/* TYPOGRAPHY */

* {
    margin: auto;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    font-family: "futura-pt", sans-serif;
    color: #f4eedf;
    background-color: #272924;
}

h1 {
    padding-top: 20px;
    font-size: 45px;
}

h2 {
    padding-top: 50px;
}

.title {
    padding-top: 0;
}

.subtitle {
    padding-top: 0;
}

p {
    font-size: 18px;
    padding: 10px 0;
}

.fineprint {
    text-align: left;
    font-size: 14px;
    color: #666666;
    margin: 0 10px;
}

.bringtofront {
    position: relative;
    z-index: 999;
}

#credits {
    padding: 0;
    width: 90%;
    max-width: 900px;
}

a {
    color: #6f9b94;
    text-decoration: none;
    transition: 200ms;
    transition-timing-function: ease-in-out;
    -webkit-transition: 200ms;
    -webkit-transition-timing-function: ease-in-out;
}

a:hover {
    color: #8EC7BF;
}

/* IMAGES */

img {
    width: 100%;
}

.border {
    border: 5px solid #f4eedf;
}

/* BUTTONS */

button {
    font-family: "futura-pt", sans-serif;
    font-size: 17px;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 3px;
    letter-spacing: .03em;
    color: #fff;
    background-color: #6f9b94;
    box-sizing: border-box;
    height: 32px;
    line-height: 32px;
    padding: 0 18px;
    display: inline-block;
    margin: 0;
    transition: all 200ms ease-in-out;
}

button:hover {
    background-color: #8EC7BF;
    cursor: pointer;
}

/* CONTAINER */

#mainwidth {
    width: 90%;
    max-width: 900px;
    height: auto;
    padding: 2px 20px;
    margin: 0 auto;

}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 50px;
}

/* HEADER */

#header {
  padding: 0;
  border-bottom: 2px #8080801f solid;
}

.button {
    height: 40px;
    width: auto;
}

#nextlogo {
    display: block;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

nav ul {
    text-align: center;
    padding-inline-start: 0;
}

nav ul li {
    text-transform: uppercase;
    font-weight: 600;
    list-style: none;
    display: inline-block;
    padding: 10px 4px;
}

/* GRID */

.big-box {
    text-align: center;

}

.cap {
    pointer-events: none;
}

.box {
    display: inline-block;
    width: 350px;
    height: 375px;
    margin: 2em 1em;
    vertical-align: middle;
}

.box-single {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 400px;
    margin: auto;
    vertical-align: middle;
}

.world {
    grid-column-start: 1;
    grid-column-end: 3;
}

/* THE BIG CIRCLE */

#bigcircle {
    height: 550px;
    width: 100%;
    position: relative;
}

#bigcircle svg {
    position: absolute;
    top: 50%;
    bottom: 50%;
}

/* TERMS OF ENDANGERMENT */

#bluebox {
    border: 5px solid #609c94;
}

#peachbox {
    border: 5px solid #ff8e78;
}

#redbox {
    border: 5px solid #fd4851;
}

#plumbox {
    border: 5px solid #973D57;
}

/* NEAREST LANGUAGE */

.nearest {
    display: flex;
    align-items: center;
    justify-content: center;
}

#nearest-loading {
    width: 64px;
    height: 64px;
    display: none;
}

/* THE WORLD */

#earth_div {
    width: 100%;
    height: 400px;
}

.mapboxgl-popup-content {
    color: #272924;
    max-width: 300px;
}

/* OUTRO */

.spacer {
    width: 50px;
    height: auto;
    padding-top: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#outro {
    text-align: center;
    padding-top: 50px;
}


@media (max-width: 768px) {
    #mc_embed_signup input.email {
        width: 100%;
        margin-bottom: 5px;
    }
    #mc_embed_signup .clear {
        display: block;
        width: 100%
    }
    #mc_embed_signup .button {
        width: 100%;
        margin: 0;
    }
}

/* SERIES INTRO */

#seriesintro {
    width: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#serieslogo {
    width: 250px;
}

/* FOOTER */

#footer {
    border-top: 2px #8080801f solid;
    margin-top: 20px;
}

/* MEDIA QUERIES */

@media (max-width: 768px) {
    h3 {
        top: 750px;
        padding: 0 100px;
    }
    h4 {
        top: 570px;
    }

    #earth_div {
        height: 700px;
        width: auto;
    }
}

@media (max-width:560px) {
    h3 {
        top: 700px;
        padding: 0 60px;
    }

    h4 {
        top: 560px;
        font-size: 125px;
    }

    .container {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-gap: 5px;
    }

    .showcasetext {
        padding-bottom: 30px;
    }

    #showcase1-image {
        order: 1;
    }
    #showcase1-text {
        order: 2;
    }
    #showcase2-image {
        order: 3;
    }
    #showcase2-text {
        order: 4;
    }
    #showcase3-image {
        order: 5;
    }
    #showcase3-text {
        order: 6;
    }
    #showcase4-image {
        order: 7;
    }
    #showcase4-text {
        order: 8;
    }

    .world {
        grid-column-end: 2;
    }

    #earth_div {
        height: 450px;
        width: auto;
    }
}