* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

:root {
    --red: #da291c;
    --orange: #db792e;
    --navy: #001830;
    --pink: #df096c;
    --sans: Jost, Futura, sans-serif;
}


html,
body {
    font-family: Jost, Futura, sans-serif;
    font-size: 12px;
    color: black;
    font-weight: 400;
    margin: auto;
    padding: 0;
}

a {
    color: black;
    transition: .3s;
}

a svg {
    transition: .3s;
}

a:hover {}


main {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    clear: both;
    position: relative;
    overflow: hidden;
}

main:after {
    content: '';
    display: block;
    clear: both;
}

figure img {
    width: 100%;
}


p {
    font-size: 1.25rem;
    text-indent: 2rem;
    margin: 0;
}

p:first-of-type {
    font-family: 'Domine', serif;
    font-size: 1.5em;
    line-height: 2rem;
    color: var(--red);
    margin-bottom: 1em;
    text-indent: 0;
}

p:nth-of-type(2) {
    text-indent: 0;
}

.section h1 {
    font-size: 3em;
    line-height: 1em;
    text-transform: uppercase;
    margin-top: 0;
}

h1.big {
    font-size: 6em;
    text-align: center;
}

h1.big u {
    display: inline-block;
    line-height: 1em;
    border-bottom: 1rem solid black;
    text-decoration: none;
}

/***************************

NAVIGATION

****************************/

.overlay {
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    display: none;
    z-index: 999;
}

#nav {
    width: 100%;
    height: 6em;
    margin: 0 auto;
    background: white;
    border-bottom: .5em solid var(--red);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 -.5em .5em .5em rgba(0, 0, 0, .5);
}

nav {
    width: 100%;
    max-width: 100em;
    margin: auto;
    position: relative;
    display: flex;
}

nav h1 {
    display: inline-block;
    color: var(--red);
    font-size: 8em;
    line-height: .7em;
    padding: 0;
    margin: 0 1em 0 0;
    pointer-events: none;
}


nav ul {
    display: flex;
    padding: 0;
    /* Removes list indent */
    list-style-type: none;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    margin: 0;

}

nav ul li {
    flex: 0 1;
    text-align: center;
}

nav ul li a {
    white-space: nowrap;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border: .25rem solid transparent;
    padding: 0 1rem;
}

nav ul li:nth-child(even) a {
    color: var(--red);
}


nav ul li a:hover {
    border-color: black;
}

nav ul li:nth-child(even) a:hover {
    border-color: var(--red);
}

nav .hamburger {
    display: none;
}


/***************************

MAIN BOOK SECTIONS

****************************/


#stdwytk,
.popup.stdwytk,
.excerpt.stdwytk {
    --red: #db792e;
    /* orange */
}

#smnty,
.popup.smnty,
.excerpt.smnty {
    --red: #333399;
    /* purple */
}


section,
article {
    padding: 0 3em;
}

section#sysk,
section#stdwytk,
section#smnty {
    padding: 0;
}

.section {
    width: 100%;
    max-width: 100rem;
    margin: auto;
    padding: 4em 0 2em;
}

.section:after {
    content: '';
    display: block;
    clear: both;
}



/***************************

TITLE + AUTHOR

****************************/

.wow {
    visibility: hidden;
}

.no-js .wow {
    visibility: visible !important;
}


header {
    background: var(--red);
    margin: auto;
    min-height: 100vh;
    display: flex;
    margin-top: -6em;
}

header .section {
    padding: 10em 0;

}

header h4 {
    font-size: 4em;
    font-family: Domine, serif;
    margin: 0 0 0 5rem;
    color: white;
}

#title {
    padding: 5em 7em;
    margin: 2em 5em;
    border: 1em solid white;
}


/* LIVE TYPE TITLE */

#title h1 {
    font-size: 9em;
    line-height: .9em;
    margin: 0;
}

#title h1 span {
    display: inline-block;
}


/* AUTHOR NAME */

#title h2 {
    font-size: 2.75em;
    line-height: 1.4;
    text-align: justify;
    color: white;
    margin: 0;

    padding: 2rem 0;

    margin: 1em auto;
    border-top: .5rem solid white;
    border-bottom: .5rem solid white;

}



/* SUBTITLE */

#title h3 {
    font-size: 4em;
    line-height: .9;
    color: white;
    text-transform: uppercase;
    text-align: justify;
    text-align-last: left;
    margin: 0 auto 1rem;
}

/* ORDER BUTTON */

header .button {
    display: inline-block;
    margin: 0 1em .5em 0;
}

header .order {
    display: inline-block;
    line-height: .9;
    padding: .5em .5em;
    font-size: 1.75em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--red);
    border: .25rem solid black;
}


header .order:hover {
    background: black;
    color: white;
}

/***************************

ABOUT BOOK

****************************/

.book .section:after {
    display: none;
}

.book .section {
    padding-bottom: 3em;
}

.book picture {
    width: 40em;
    float: left;
    margin: 0 5em 3em 5em;
}

#stdwytk .book picture {
    float: right;
}


.book picture img {
    width: 100%;
}

#sysk .book .desc,
#smnty .book .desc {
    margin-left: 50em;
}

#stdwytk .book .desc {
    margin-right: 50em;
}


/***************************

BUY LINKS

***************************/

.buttons {
    background: black;
    color: white;
}

#stdwytk .buttons {
    background: var(--navy);
}

#smnty .buttons {
    background: var(--pink);
}

.buttons .section {
    padding: 3em 0;
}

.buttons h1 {
    margin: 0;
}

.buttons h2 {
    font-family: Domine, serif;
    margin: .0;
    font-size: 2em;
}

.buttons h3 {
    display: none;
}


.buttons .buylinks ul {
    padding: 0;
    /* Removes list indent */
    list-style-type: none;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    text-align: center;
}

.buttons .buylinks li {
    display: flex;
    flex: 0 1 32%;
    /* Three buttons per line */
    margin-top: 2%;
}

.buttons .buylinks li a {
    color: white;
    width: 100%;
    padding: .75em .5em;
    background: var(--red);
    border-radius: 2em;
    text-decoration: none;
    text-transform: uppercase;
    border: .25rem solid var(--red);
    font-weight: bold;
    overflow: visible;
    white-space: nowrap;
}



.buylinks li a:before {
    vertical-align: -.125em;

}

.popup .buylinks li a:hover svg path {
    fill: var(--red);
}

.buttons .buylinks li a:hover {
    background: transparent;
    color: white;
}

.usa.buylinks ul {
    margin-bottom: 3em;
}

.international {
    clear: both;
}

.buttons .international.buylinks li:first-of-type,
.popup div .international.buylinks li:first-of-type {
    font-family: 'Domine', serif;
    text-transform: none;
    font-weight: normal;
    font-size: 1.5em;
    flex: 0 1 100%;
    text-align: left;
    display: block;
    margin-top: 0;
}

.popup div .international.buylinks li:first-of-type {
    text-align: center;
}

.buttons .international.buylinks li {
    flex: 0 1 16%;
    margin-top: 1rem;
}

/***************************

ORDER LINKS

***************************/

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 50%;
    min-width: 60em;
    max-width: 80em;
}

.popup .close {
    position: fixed;
    top: -.75em;
    right: -.75em;
    background-color: black;
    border: 0;
    outline: 0;
    margin: 0;
    height: 2.5em;
    width: 2.5em;
    border-radius: 3em;
    transition: .3s;
    cursor: pointer;
}

.popup .close:after,
.popup .close:before {
    content: "";
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1em;
    height: 0;
    border-top: .25em solid white;
    transform-origin: center;
}

.popup .close:after {
    transform: rotate(45deg);
}

.popup .close:before {
    transform: rotate(-45deg);
}

.popup .close:hover {
    background: var(--red);
}

.popup .box {
    display: flex;
    background: white;
    padding: 2.5em;
    outline: 2em solid white;
    border: .5em solid black;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

.popup .box picture {
    flex: .8;
    height: auto;

}

.popup .box picture img {
    height: auto;
    width: 100%;
}



.popup .box .orderlinks {
    margin-right: 2.5em;
    text-align: center;
    flex: 1;
}

.popup .box h1 {
    font-family: Domine, serif;
    margin: 0;
}

.popup h2 {
    font-size: 2em;
    margin: 0;
    text-transform: uppercase;
}


.popup .box .buylinks ul {
    padding: 0;
    /* Removes list indent */
    list-style-type: none;
    display: flex;
    flex-flow: wrap;
    margin-bottom: 0;
}

.popup .box .buylinks li {
    display: flex;
    text-align: center;
    flex: 0 1 48%;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
    margin: 1%;
}

.popup .box .buylinks li a {
    color: white;
    flex: 1;
    padding: .75em .5em;
    background: var(--red);
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border: .25rem solid var(--red);
    font-weight: bold;
    border-radius: 2em;
    overflow: hidden;
    white-space: nowrap;
}

.popup .box .buylinks li a:hover {
    background: transparent;
    color: var(--red);
}

.popup .box .international.buylinks li {
    text-align: center;
}


/***************************

SWEEPSTAKES

***************************/

.sweeps {
    background: var(--red);
    color: color: var(--navy);
}

.sweeps h1.big {
    font-size: 4em;
    margin-bottom: .5em;
    color: var(--navy);
}

.sweeps h1.big u {
    color: white;
    border-bottom: .125em solid white;
    display: inline-block;
    margin-bottom: .125em;
    font-size: 1.25em;
}

.sweeps p:first-of-type {
    color: white;
    font-size: 2em;
}

.sweeps p {
    font-size: 1.5em;
    line-height: 1.6em;
}

.sweeps picture {
    max-width: 45em;
    width: 50%;
    float: right;
    margin: 0 5em 3em 5em;
}

.sweeps picture img {
    width: 100%;
}

.sweeps .form {
    background: var(--navy);
    margin-top: 2em;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    padding-top: 30%;
    border: 4px solid white;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.sweeps .form iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding:
}

/***************************

TOUR

***************************/

#events {
    text-align: center;
    background: var(--red);
}

#events h1 {
    color: var(--navy);
    text-transform: uppercase;
    margin-bottom: .5em;
}

#events h1 u {
    color: white;
    border-color: white;
}

#events p {
    text-align: center;
    font-size: 2.5em;
    line-height: 1.5em;
    color: var(--navy);
}

#events .tour {
    margin: 2em auto;
    display: table;
    width: 100%;
    border-spacing: .25em 0;
}

#events .row,
#events .header {
    display: table-row;
}

#events .header {
    text-transform: uppercase;
    font-size: 1em;
}

#events .header > div {
    display: table-cell;
    padding: .25rem .75rem;
    background: var(--navy);
    color: white;
    font-weight: bold;

}

#events .row > div {
    display: table-cell;
    padding: .5em .75rem .5em;
    line-height: 1.5rem;
    vertical-align: middle;
}



#events .row br {
    display: none;
}

#events .row > div {
    border-bottom: 1px solid white;
    font-size: 1.5em;
    color: white;
}

#events .row:last-of-type > div {
    border-bottom: none;
}

#events .row .date {
    width: 30%;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1em;
}

#events .row .time {
    width: 20%;
    text-transform: uppercase;

    font-weight: bold;
}

#events .row .venue {
    line-height: 1.2em;
}

#events .venue,
#events .time {}

#events .ticket a {
    text-align: center;
    display: inline-block;
    background: white;
    color: var(--red);
    width: 10em;
    ;
    font-size: .75em;
    padding: .75rem 1em;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    border-radius: 2em;
    border: 2px solid white;
}

#events .ticket a:hover {
    background: transparent;
    color: white;
}


#events .venue a svg {
    height: 1em;
    width: 1em;
    fill: white;
    vertical-align: -.125em;
    margin-right: .25em
}

#events .venue a:hover svg {
    fill: var(--red);
}


/***************************

EXCERPTS

****************************/


h1.big u {
    color: var(--red);
    border-color: var(--red);

}



h1 u {
    color: var(--red);
    border-color: var(--red);
}

.excerpt h2 {
    display: inline-block;
    background: var(--red);
    padding: .5em;
    font-family: Domine, serif;
    font-weight: 700;
    color: white;
    font-size: 1em;
}

.excerpt h1 {
    margin-top: 0;
}

.excerpt .order {
    text-align: center;
    font-size: 1.5em;
    width: 15rem;
    display: inline-block;
    background: url(../img/sysk_button.png);
    background-size: cover;
    padding: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    margin: 2em 0;
    text-shadow: .125rem .125rem 0 white, -.125rem -.125rem 0 white;
    border: 2px solid black;
}

.excerpt .order:hover {
    background: black;
    background-image: none;
    text-shadow: none;
    color: white;
}

.excerpt figure {
    margin: 0;
    padding: 0;

}

#secsoc,
#ufo,
#avatar {
    margin-bottom: 2em;
    border-bottom: 1px solid lightgray;
}

#lost,
#secsoc {
    margin-top: 6em;
}

#ufo:after {
    clear: both;
    content: '';
    display: block;
}

#lost figure,
#avatar figure {
    float: left;
    width: 40em;
    margin-right: 5em;
}

#lost div {
    padding-left: 45em;
}

#potato figure {
    float: right;
    width: 55em;
    margin-left: 1em;
}

#potato p {
    padding-right: 55rem;
}

#ufo figure {
    float: left;
    width: 40em;
    margin-right: 5em;
    margin-top: -5em;
    margin-bottom: 2eml
}

#ufo div {
    padding-left: 45em;
}

#secsoc figure {
    float: right;
    width: 40em;
    margin-left: 5em;
    margin-bottom: 2em;
}

#secsoc blockquote {
    margin: 0 0 2em 0;
    text-indent: -.75em;
}

#secsoc q {
    font-family: 'Domine', serif;
    display: block;
    font-size: 2.25em;
    line-height: 1.3;
}

#secsoc cite {
    text-align: right;
    font-style: normal;
    font-size: 1.25em;
    text-align: right;
    display: block;
}

/***************************

MORE

****************************/


#more {
    background: var(--red);
    padding-bottom: 5em;
}

#more .section {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

#more h1 {
    flex: 100%;
}

#more .big u {
    color: white;
    border-color: white;

}

.podcast {
    display: inline-block;
}

.podcast h1 {
    display: inline-block;
    width: 20rem;
    text-transform: none;
    font-size: 2.5em;
    line-height: 1.16em;
}

.smnty.podcast h1 {
    width: 30rem;
}

.podcast a {
    font-family: Domine, serif;
    color: white;
    text-decoration: none;
}

.podcast a:hover {
    color: black;
}

.podcast a:hover h1:after {
    border-left: 1.5rem solid black;
}

.podcast h1:after {
    margin-top: 1rem;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1.5rem solid white;
    transition: .2s;
}

.podcast figure {
    width: 50%;
    display: inline-block;
    max-width: 15em;
    border: .25em solid white;
    vertical-align: top;
    margin: 0;
    transition: .2s;

    padding: 0;
    margin: 0;
}

.podcast figure img {
    display: block;
}


.podcast figure:hover,
.podcast h1:hover + figure {
    border-color: black;
}


.sysk.podcast {
    border-right: 2px solid black;
    margin-right: 4em;
    padding-right: 4em;
}


.smnty.podcast {
    margin-top: 2em;
}

#social {
    display: inline-block;
    width: 40em;
    padding-left: 5em;
    border-left: .5em solid black;
    vertical-align: top;
}

#social h1 span {
    font-size: .625em;
}

#social a {
    font-size: 2em;
    display: block;
    margin: .25em 0;
    text-decoration: none;

}

#social a:hover {
    color: white;
}

#social picture {
    margin-right: .25em;
}

#social .social img {
    width: .75em;
}





/***************************

NEWSLETTER

****************************/

#newsletter {
    padding-bottom: 5em;
    text-align: center;
}

#newsletter h1 {
    font-family: Domine, serif;
    text-transform: none;
    font-size: 2em;
}

#newsletter form {
    margin-top: 1em;
}

#newsletter .email input,
#newsletter form .country select,
#newsletter form #submit {
    font-family: Jost, sans-serif;
    font-size: 1.5em;
}

#newsletter form .email,
#newsletter form .country {
    display: inline-block;
}

#newsletter form label {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--red);
    display: block;
    text-align: left;
}

#newsletter form .email input,
#newsletter form .country select {
    padding: .5rem 1rem;
    border: .125rem solid black;
    border-radius: none;
    outline: none;
    margin-right: 1rem;
}

#newsletter form .country select {
    width: 20rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, black 50%),
        linear-gradient(135deg, black 50%, transparent 50%);
    background-position:
        calc(100% - 1.5em) center,
        calc(100% - 1em) center;
    background-size:
        .5em .5em,
        .5em .5em;
    background-repeat: no-repeat;
}

#newsletter form select::-ms-expand {
    display: none;
}

#newsletter form .email input {
    width: 30rem;
}

::placeholder {
    color: #CCC;
}

#newsletter form #submit {
    display: inline-block;
    vertical-align: bottom;
    padding: .125rem .5rem;
    background: var(--red);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    border: .125rem solid var(--red);
    width: 15rem;
    cursor: pointer;
    transition: .5s;
}

#newsletter form #submit:hover {
    background: transparent;
    color: var(--red);
}

#newsletter form #submit.nocountry {
    pointer-events: none;
    background: white;
    border-color: gray;
    color: gray;
}

.input {
    position: relative;
}

.input .errortext {
    position: absolute;
    top: 0;
    right: 1.5em;
    text-transform: uppercase;
    font-size: .8em;
    letter-spacing: .05em;
}

#tryagain,
#spnCountryMessage {
    margin-top: 1em;
}

#countryrules {
    font-size: 1.25em;
    line-height: 1.5;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#countryrules span {
    font-weight: bold;
    font-family: 'Domine', serif;
    color: var(--red);
    margin: .5em 1em 0 0;
    display: inline-block;
}

#thanks #book {
    text-align: center;
    margin-top: 0;
    padding-top: 0;
}

#thanks .section {
    padding-top: 4em;
}

#thanks .big {
    margin: 0 auto .25em
}

#thanks #book picture {
    margin: 0 1em;
    display: inline-block;
}

#thanks #book picture img {
    height: 30em;
    width: auto;
}

#thanks p {
    text-indent: 0;
    color: black;
}

#thanks {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#thanks .section {
    border-bottom: .125em solid white;
}

#thanks footer {
    flex: 1;
    width: 100%;
}

/***************************

FOOTER & COPYRIGHT

****************************/

footer {
    background: black;
    color: white;
    text-align: center;
    margin: 0 auto 0;
    padding: 2em 0;
}

footer a {
    color: white;
}


footer span {
    content: '';
    display: inline-block;
    width: 1em;
}

#logo {
    display: block;
    width: 4em;
    margin: 0 auto .5em;
}

#logo img {
    width: 100%;
}


footer .social {
    display: block;
    text-align: center;
}


footer .social a {
    font-size: 1.25em;
    text-decoration: none;
    line-height: 0;
    font-weight: bold;
}



footer .social a {
    white-space: nowrap;
    margin: 0 1em .5em 0;
    display: inline-block;
}

footer .social a:hover {
    text-decoration: underline;
}

footer .social img {
    height: 1.25em;
    width: 1.25em;
    vertical-align: -.375em;
    margin-right: .25em;
}

footer .social div {
    display: inline-block;
    margin: auto;
}

/*!!!!!!!!!!!!!!!!!!!!!!

MEDIA QUERIES

!!!!!!!!!!!!!!!!!!!!!!*/


/* Medium Desktop & Landscape iPad */

@media only screen and (max-width: 1200px) {

    .section,
    nav {
        max-width: 80rem;
    }

    .section {
        padding-top: 4em;
    }

    nav h1 {
        margin-right: .5em;
    }

    nav ul li a {
        font-size: 1.5em;
    }

    #title {
        padding: 4em;
        margin: 2em 0;
        border-width: .75em;
    }

    #title h1 {
        font-size: 8.5em;
    }

    #title h2 {
        font-size: 2.5em;
        text-align: left;
    }

    #title h3 {
        font-size: 3.5em;

        text-align: left;
    }

    header h4 {
        margin-left: 0;
    }

    header .popup .box {
        margin-right: -1rem;

    }

    .book picture {
        width: 30em;
        margin-left: 0;
        margin-bottom: 1em;
    }



    #sysk .book .desc,
    #smnty .book .desc {
        margin-left: 35em;
    }

    #stdwytk .book .desc {
        margin-right: 38em;
    }

    .book .section {
        padding-bottom: 2.5em;
    }

    .buttons .section {
        padding: 3em 0;
    }

    .buttons .buylinks {
        clear: both;
    }

    .international.buylinks ul li {
        flex: 0 1 32%;
    }

    .buttons .international.buylinks ul li:first-of-type {
        margin-top: 1rem
    }

    .popup {
        width: 75%;
    }

    .popup .international.buylinks ul li {
        flex: 0 1 48%;
    }

    .sweeps p {
        font-size: 1.25em;
    }

    .sweeps .section {
        display: flex;
        flex-flow: wrap;
    }

    .sweeps h1.big {
        font-size: 3em;
        margin: 0 auto .5em;
    }

    .sweeps h1.big u {
        font-size: inherit;
        display: block;
    }

    .sweeps picture {
        flex: 1;
        order: 5;
        width: 50%;
        margin: 2em 2em 0 0;
    }

    .sweeps .form {
        flex: 1;
        order: 6;
    }

    #events p {
        font-size: 2em;
    }

    .sweeps p:first-of-type {
        font-size: 1.5em;
        line-height: 1.3em;
    }


    #lost figure,
    #avatar figure {
        width: 50%;
        min-width: 10em;
        float: right;
        margin-left: 2.5em;
        margin-right: 0;
    }

    #ufo figure,
    #secsoc figure {
        float: right;
        margin-left: 2em;
        margin-right: 0;
        width: 45%;
        min-width: 30em;
    }

    #ufo figure {
        margin-top: -2em;
    }

    #ufo div {
        padding-left: 30%;
    }


    #lost div,
    #avatar div {
        padding-left: 0;
    }

    #lost figure {
        width: 50%;
        min-width: 10em;
    }

    #avatar figure {
        width: 45%;
        min-width: 10em;
    }

    #potato figure {
        width: 50%;
        min-width: 10em;
        margin: 0 0 .5em 1em;
    }

    #potato p {
        padding: 0;
    }

    #more .section {
        display: flex;
        flex-flow: wrap;
    }

    #more h1 {
        flex: 100%;
    }


    #social {
        flex: 0 1 35em;
        width: auto;
        margin-left: 2.5em;
        padding-left: 2.5em;
    }

    #newsletter h1 {
        font-size: 2.5em;
        line-height: 1.25em;
    }

    #newsletter h1 u:before {
        content: '';
        display: block;
    }

    #newsletter form {
        margin-left: 0;
        display: flex;
        flex-flow: wrap;
    }

    .country {
        flex: 1;
        width: inherit;
        margin-right: 2em;
    }

    .email {
        flex: 2;
    }

    #newsletter form .country select {
        width: 100%;
    }

    #newsletter form .email input {
        width: 100%;
    }

    #submit {
        flex: 0 1 100%;
        margin-top: .5em;
    }

    #countryrules {
        padding: 0;
        margin: 1.5em auto;
    }


}

@media only screen and (max-width: 1024px) {

    nav h1 {
        margin-right: 0;
    }

    nav ul {
        padding: 0 1em;
    }

    nav ul li a {}


    #title {
        margin: 1em 5vw;
        border-width: 1vw;
        padding: 5vw 5vw;
    }

    #title h1 {
        font-size: 15vw;
        color: white;
    }

    #title h1 span {
        display: block;
    }

    #title h1 span:first-letter {
        color: black;
    }

    #title h2 {
        font-size: 3em;
    }


    #title h3 {
        font-size: 5em;
    }

    #title h3 br {
        display: none;
    }

    header h4 {
        margin: 0 5vw;
    }

    header .popup .box {
        margin: -10vw 4rem 0 0;
        font-size: 5vw;

    }

    #ufo figure,
    #secsoc figure {
        min-width: 20em;
    }

    .podcast h1 {
        font-size: 2.5em;
        line-height: 1.5;
        width: 60% !important;
    }

    .podcast {
        width: 75%;
        border-right: 0 !important;
        border-bottom: 2px solid #000;
        padding: 0 0 2em !important;
        margin: 0 auto 2em !important;
    }

    .podcast:last-of-type {
        border-bottom: 0;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .podcast figure {

        float: right;
        margin-right: 0;
        padding-right: 0;
    }

    .buttons .international.buylinks li {
        flex: 0 1 32%;
        /* Three buttons per line */
    }


    #events .row > div {
        font-size: 1em;
    }

    /***************************

NAVIGATION SMALL SCREEN

****************************/

    /* Small Desktop & Portrait iPad */

    @media only screen and (max-width: 800px) {

        nav {
            width: auto;
        }

        nav .hamburger {
            display: inline-block;
            position: absolute;
            right: 0;
            height: 6em;
        }

        nav ul {
            position: absolute;
            display: none;
            top: 6em;
            right: 0;
            padding: 1em 2em;
            background: var(--red);
            margin-right: 0;
        }

        nav ul li {
            display: block;
            padding: 1em 0;
            margin: 0;
        }

        nav ul li a span {
            display: none;
        }


        nav ul li a,
        nav ul li:nth-of-type(even) a {
            color: white;
            padding: .5rem 1em;
            display: block;
            border: .25rem solid white;
        }

        nav ul li a:hover,
        nav ul li a:active {
            background: black;
            border-color: var(--red);
        }


        #nav h1 {
            margin-left: -.1em;
        }

        header h4 {
            font-size: 9vw;
        }

        #title h2 {
            font-size: 2em;
        }

        #title h3 {
            font-size: 3em;
        }


        header .order {
            font-size: 1.5em;
        }

        .book h1 {
            margin-bottom: .5em;
        }

        .book h1 span {
            font-size: .625em;
            line-height: 1em;
        }

        .book h1 span:before {
            content: '';
            display: block;
        }


        #sysk .book picture,
        #stdwytk .book picture,
        #smnty .book picture {
            width: 40%;
            max-width: 25em;
            float: right;
            margin: 0 0 1em 5em;
        }

        #sweeps h1 {}

        #sweeps button a {
            padding: .25em 2em;
        }


        #sysk .book .desc,
        #stdwytk .book .desc,
        #smnty .book .desc {
            margin-left: 0;
            margin-right: 0;
        }


        .buttons h3 {
            display: block;
            text-transform: uppercase;
            font-size: 2em;
            color: var(--red);
            margin: .5em auto 0;
            padding-top: .25em;
            border-top: .125em solid var(--red);
            line-height: 1em;
        }

        .buttons .buylinks ul {
            margin: 0;
        }

        #preorder a {
            font-size: 1.5em;
        }

        .section h1 {
            text-align: left;
        }

        .section h1.big {
            font-size: 4em;
        }

        .section h1 u {
            border-bottom-width: .125em;
        }

        .sweeps .section {
            display: block;
        }

        .sweeps h1.big u {
            display: inline;
            text-decoration: underline;
            border-bottom: 0;
        }

        .sweeps picture {
            width: 55vw;
            margin: 0 2em 0 0;
            float: left;
        }

        .sweeps h1.big {
            font-size: 6vw;
            line-height: 1.2em;
        }

        .sweeps .form {
            clear: both;
        }

        #events h1 {
            text-align: center;
            font-size: 4em;
        }

        #events p {
            font-size: 1.5em;
        }



        #events .row {
            font-size: 1.25em;
        }

        #events .row br {
            display: block;
        }


        #events .ticket a {
            font-size: 1rem;
            padding: .5em 1em;
        }

        .excerpt h1.big {
            font-size: 4em !important;
        }


        #more,
        #excerpt .section {
            padding-bottom: 0;
        }


        .podcast {
            width: 100%
        }

        .podcast h1 {
            width: 60% !important;
        }

        .podcast figure {
            max-width: 20em;
            margin-right: 5%;
            width: 40% !important;
            float: left;

        }


        #social h1 {
            font-size: 2.5em;
        }

        #social {
            flex: 1;
            padding-left: 2.5em;
        }

        footer .social div {
            display: inline-block;
            text-align: left;
            margin-left: 1rem;
        }


        footer .social a {
            display: block;
        }


    }

    /* Mobile Device */

    @media only screen and (max-width: 600px) {

        section {
            padding: 0 5vw;
        }

        header .section {
            padding: 5em 0 2em;
        }

        header {
            margin-top: -3em;
        }

        #title h3 {
            font-size: 2em;
            line-height: 1.2em;
        }

        #title h2 {
            font-size: 1.5em;
        }

        #nav {
            height: 3em;
            border-width: .125em;
        }

        #nav h1 {
            font-size: 4.125em;
        }

        nav ul {
            top: 3em;
        }

        #title .order {
            font-size: 3.3vw;
        }

        .hamburger {
            font-size: .5em;
        }


        .book .section {
            display: flex;
            flex-flow: wrap;
        }

        .section h1.big {
            font-size: 8vw;
        }

        .book .desc {
            order: 1;
        }

        #sysk .book picture,
        #stdwytk .book picture,
        #smnty .book picture {
            display: block;
            width: 100%;
            max-width: inherit;
            margin: 2em auto;
            float: none;
            order: 3;
        }



        #sweeps h1 {
            display: block;
            white-space: nowrap;
        }


        .buttons {
            padding-top: 15em;
            margin-top: -20em;
            text-align: center;
        }

        .buttons .section {
            min-height: calc(100vh - 3em);
            display: flex;
            flex-flow: column;
        }

        .buttons h1 {
            flex: 0;
            text-align: center;
            font-size: 7vw;
        }

        .buttons h2 {
            font-size: 5vw;
            flex: 0;
        }

        .buttons h3 {
            font-size: 10vw;
        }

        .buttons .buylinks {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 75vw;
            margin: auto;

        }

        .buttons .buylinks ul {
            flex: 1;
            margin-top: 2em;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }

        .buttons .buylinks ul li {
            flex: 1;
            align-items: center;

        }

        .buttons .buylinks ul li a {
            font-size: 2.5vh;
            padding: 0;
        }

        .buttons .international.buylinks ul li:first-of-type {
            margin-top: 0;
            text-align: center;
        }

        #preorder a {
            font-size: 2vh;
            line-height: 1em;
            padding: .5em;
            width: 80%;
        }

        .sweeps .section {
            display: flex;
            flex-flow: wrap;
        }

        .sweeps picture {
            flex: 0 1 60vw;
            margin: 2em auto 0;
        }

        .sweeps .form {
            flex: 0 1 100%;
            padding-top: 60%;
        }

        #events h1 u {
            margin-bottom: .25em;
        }

        #events .tour {
            display: block;
            margin: auto;
            border-top: 1px solid white;
        }

        #events p {
            font-size: 1.75em;
        }


        #events .tour br {
            display: none;
        }


        #events .header {
            display: none;
        }

        #events .row {
            text-align: center;
            margin: auto;
            display: block;
            border-bottom: 1px solid white;
            padding: 1em 0 1.5em;
        }

        #events .row:last-of-type {
            border-bottom: 0;
        }

        #events .row > div {
            display: block;
            border-bottom: 0;
            padding: 0;
        }

        #events .row .date,
        #events .row .time {
            font-size: 2em;
            padding: .25em 0;
            text-transform: uppercase;
            width: auto;
        }

        #events .row .time {
            font-size: 1.5em;
        }

        #events .row .venue {
            width: auto;
            margin: .5em;
            font-size: 1.25em;
            color: black;
            padding: 0 !important;
        }




        #events .row .ticket a {
            width: 15em;
        }

        .excerpt p:first-of-type {
            font-size: 1.35em;
        }

        #lost figure,
        #ufo figure,
        #secsoc figure,
        #avatar figure {
            width: 100%;
            float: none;
            margin: auto;
        }

        #potato {}

        #potato figure {
            width: 100%;
            margin: 0 0 2em;
            float: none;
        }

        #potato figure img {}

        #more .section {
            display: block;
        }

        .podcast h1 {
            font-size: 1.5em;
            width: 45% !important;
        }

        .podcast figure {
            width: 40% !important;
        }

        #social {
            display: block;
            padding: 2em 0 0;
            margin: 3em auto 0;
            border-left: 0;
            border-top: .5em solid black;
            text-align: center;
        }

        #newsletter {
            padding-bottom: 2em;
        }

        #newsletter h1 {
            font-size: 2em;
            text-align: center;
        }

        #newsletter form {
            flex-flow: column;
        }

        #countryrules {
            text-align: left;
        }

        .country {
            margin: 0 0 1em;
        }

        #thanks .buttons {
            padding-top: 0;
            margin-top: 0;
        }

        #thanks #book picture {
            display: inline-block;

            margin: auto;
        }

        #thanks #book picture img {
            height: 50vw;
            display: inline-block;
        }


        footer span {
            content: '';
            display: block;
        }
    }