/*#region  Typography 
--------------------------  */

h1 { font-family: "jubilat", georgia, serif; font-size: 2em; font-weight: 700; margin: 0 0 0.5em 0; }
h2 { font-family: "jubilat", georgia, serif; font-size: 1.25em; font-weight: 700; }
h3 { font-family: "jubilat", georgia, serif; font-size: 1.15em; font-weight: 700; }

p { margin: 0 0 1em 0; }
    p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

a { text-decoration: none; -moz-transition: all linear .2s; -o-transition: all linear .2s; -webkit-transition: all linear .2s; transition: all linear .2s; }

/*#endregion */

/*#region  content 
--------------------------  */

body { text-align: left; font-family: "futura-pt",arial,sans-serif; font-style: normal; font-weight: 400; font-size: 1em; line-height: 1.5em; padding: 0; margin: 0; min-width: 18.75em; background-color: #dba22f; }
header { background-color: #000; margin: 1em; padding: 1em; text-align: center; }
    header h1 { text-transform: uppercase; color: #fff; padding: 0; letter-spacing: -0.01em; margin-bottom: 0.5em; }
        header h1 span { background-color: #cc2b1f; display: inline-block; padding: 0.15em; }
        header p { color: #fff; font-size: 1.25em; font-style: italic; }

main { padding: 1em; font-size: 1.5em; }
main ul { margin: 0 0 2em 10%; padding: 0; float: left; width: 90%; }
main ul li { float: left; width: 32%; margin-left: 2%; }
main ul li:nth-child(3n+1) { margin-left: 0; }
main p { text-align: center; }

footer { background-color: #000; margin: 1em; padding: 1em; text-align: center; }
    footer ul { margin: 0 0 1em 0; padding: 0; list-style-type: none; font-size: 1.25em; }
    footer ul li { display: inline-block; margin: 0 1em; }
    footer p { margin: 0; padding: 0; font-size: 1.25em; }
footer a { color: #fff; }
/*#endregion */

/*  920px
--------------------------  */
@media screen and (max-width: 920px) {
    main ul li { width: 45%; margin-left: 5%; }
        main ul li:nth-child(3n+1) { margin-left: 5%; }
        main ul li:nth-child(2n+1) { margin-left: 0; }
}

/*  700px
--------------------------  */
@media screen and (max-width: 700px) {
    main ul { margin-left: 5%; width: 95%; }
}

/*  550px
--------------------------  */
@media screen and (max-width: 550px) {
    main ul li { width: 100%; margin-left: 0; }
        main ul li:nth-child(3n+1) { margin-left: 0 }
    r
}