@font-face {
    font-family: 'Atlas Typewriter Thin';
    src: url('../fonts/AtlasTypewriter-Thin-Reduced.eot');
    src: url('../fonts/AtlasTypewriter-Thin-Reduced.eot?#iefix') format('embedded-opentype'), url('../fonts/AtlasTypewriter-Thin-Reduced.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
body {
    margin: 0;
    font-family: "Atlas Typewriter Thin";
    /* "VFuturaMedium","Futura",Arial,sans-serif, /*"FuturaRenner"*/
    ;
    font-size: 13px !important;
    line-height: 1.53846153
    /* 20px ÷ 14px = 1.428571429 */
    /* https://stackoverflow.com/questions/19982651/why-does-bootstrap-set-the-line-height-property-to-1-428571429 */
    ;
    font-weight: 400;
    color: #111;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87ff87+0,c1ffc1+15,ffffff+31 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#91ff91+0,bfffbf+19,ffffff+41 */
    background: #fff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #91ff91 0%, #bfffbf 19%, #ffffff 41%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #91ff91 0%, #bfffbf 19%, #ffffff 41%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #91ff91 0%, #bfffbf 19%, #ffffff 41%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#91ff91', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */
}
.parallax-container {
    position: relative;
    overflow: hidden;
}
section#t1.parallax-container {}
h1 {
    /* font-weight: 700; */
}
img {
    position: absolute;
}
h1, h2 {
    margin: 2rem 2rem 1rem;
    padding: 0
}
h4 {
    margin: 2rem 0;
}
ul, p {
    margin: 0 2rem 2rem;
    padding: 0
}
a, a:hover {
    color: #111;
    text-decoration: none;
    border-bottom: #111 solid 1px;
    padding-bottom: 0.1rem;
}
ul li {
    margin: 0 1rem 0 0;
    padding: 0;
    display: inline-block;
}
.teaser {
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 2rem;
}
.teaser h1 {
    /* font-family: "Courier New"; */
    font-family: 'Atlas Typewriter Thin';
    line-height: 1;
    letter-spacing: -0.05rem;
    font-size: 525%;
    margin-top: 0.5rem;
    color: #111;
}
#t0 .teaser h1 {
    line-height: 1;
    margin-top: 0em;
    color: #111;
}
.teaser .content {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}
.teaser .content p {
    margin: 1.5rem 0 2rem 0;
    text-align: center;
    color: #111;
}
#t0 {
    border-bottom: 2px solid rgba(0, 255, 0, 0.5);
}
#t1, #t2, #t3, #t4 {
    /* border-top: 2px solid rgba(0, 255, 0, 0.5); */
    border-bottom: 2px solid rgba(0, 255, 0, 0.5);
}
footer a {
    color: #FF0000
}
article h1 {
    line-height: 1.5em;
    margin: 2rem 0 0 0;
    -webkit-columns: 1;
    /* Chrome, Safari, Opera */
    -moz-columns: 1;
    /* Firefox */
    columns: 1;
}
article p {
    margin: 1rem 0;
    -webkit-columns: 3;
    /* Chrome, Safari, Opera */
    -moz-columns: 3;
    /* Firefox */
    columns: 3;
}
.buffer {
    display: block;
    margin: 60px;
}
.gallery {
    width: 99%/* KAN BETER VIA MEDIA QUERIES */
    ;
    margin: 2em auto;
}
.cover-card {
    border: 7px solid white;
    /*background: silver;*/
    padding: 0px;
    margin: 0px;
    height: 300px;
}
.cover-card > p {
    margin-left: 0;
    text-align: left;
    height: auto;
    color: transparent;
}
.cover-card:hover > p {
    margin: 15px;
    padding-bottom: -10px;
    color: #fff;
}
.cover-card {
    opacity: 1
}
@media (max-width: 1200px) {
    .teaser h1 {
        font-size: 525%;
    }
}
@media (max-width: 992px) {
    .teaser h1 {
        font-size: 525%;
    }
}
@media (max-width: 768px) {
    .teaser h1 {
        font-size: 500%;
    }
}
@media (max-width: 750px) {
    .teaser h1 {
        font-size: 450%;
    }
}
@media (max-width: 750px) {
    .teaser h1 {
        font-size: 400%;
    }
}
@media (max-width: 600px) {
    .teaser h1 {
        font-size: 345%;
    }
}
@media (max-width: 510px) {
    .teaser h1 {
        font-size: 280%;
    }
    section#t1 {
        height: 50vh;
    }
    article p {
        -webkit-columns: 2;
        /* Chrome, Safari, Opera */
        -moz-columns: 2;
        /* Firefox */
        columns: 2;
    }
}
@media (max-width: 425px) {
    .teaser h1 {
        font-size: 260%;
    }
}
@media (max-width: 400px) {
    .teaser h1 {
        font-size: 220%;
    }
    article p {
        -webkit-columns: 2;
        /* Chrome, Safari, Opera */
        -moz-columns: 2;
        /* Firefox */
        columns: 2;
    }
}
@media (max-width: 350px) {
    .teaser h1 {
        font-size: 200%;
    }
}
header {
    display: block;
    background-color: transparent;
    color: #111;
    /* rgba(255, 255, 0, .2); */
    position: fixed;
    z-index: 10;
    right: 0;
    left: 0;
    top: 0
}
nav {
    font-family: /* "Atlas Typewriter Regular"; */
    "Helvetica Neue", Hevetica, sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
    height: 65px;
    margin: 15px;
    /* border: 1px solid #111; */
}
.nav > li {
    position: relative;
    display: inline-block;
    width: auto;
    margin: 15px;
}
.nav > li > a {
    padding: 0;
}
.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: transparent!important;
    border-bottom: 2px solid black;
}
@media screen and (min-width:400px) {
    .nav__item {
        display: inline-block;
        padding: 0;
    }
}
@media screen and (min-width:400px) {
    .nav__item {
        display: inline-block;
        padding: 0;
    }
}
.nav__item, .nav__item a {
    display: inline-block;
    color: #111;
    border: 0;
    padding: 0;
}
.nav__item:hover, .nav__item a:hover {
    display: inline-block;
    padding: 0;
    background-color: none;
}
.slide {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}
.slide--reset {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}
.slide--up {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%)
}

/* Coming Soon */

#countdown li {
    margin: 0;
    color: #91ff91;
}
ul#countdown > li > .smalltext {
    margin: 2rem 0;
}