@font-face {
    font-family: 'Neris-Black';
    src: url('./../fonts/Neris-Black.eot?#iefix') format('embedded-opentype'),  url('./../fonts/Neris-Black.otf')  format('opentype'),
            url('./../fonts/Neris-Black.woff') format('woff'), url('./../fonts/Neris-Black.ttf')  format('truetype'), url('./../fonts/Neris-Black.svg#Neris-Black') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Neris-Light';
    src: url('./../fonts/Neris-Light.eot?#iefix') format('embedded-opentype'),  url('./../fonts/Neris-Light.otf')  format('opentype'),
           url('./../fonts/Neris-Light.woff') format('woff'), url('./../fonts/Neris-Light.ttf')  format('truetype'), url('./../fonts/Neris-Light.svg#Neris-Light') format('svg');
    font-weight: normal;
    font-style: normal;
  }


html, body {
    color: #fff;
    margin: 0;
    padding: 0;
    font-family: "Neris-Light";
    font-weight: 500;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
}

body {
    background: #fff;
}

h1, h2, .h2 {
    display: block;
    font-family: "Neris-Black", helvetica, arial, sans-serif;
    font-weight: 100;
}

.btn,
.btn-primary {
    text-decoration: underline;
    font-weight: 500;
    padding-left: 30px;
    padding-right: 30px;
    border-color: #ddc16a;
    background-color: #ddc16a;
    text-transform: lowercase;
    margin-top: 20px;
    padding-bottom: 12px;
}

.btn:hover,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    text-decoration: underline;
    border-color: #dec884;
    background-color: #dec884;
}

.welcome h1 span {
    display: block;
}

nav {
    overflow: hidden;
    font-family: "Neris-Black";
    box-shadow: 0 0 40px #446F8D;
}

section div.light {
    background: #66a6d3;
}

section div.dark {
    background: #5c95bd;
}

.inverse {
    background: #66a6d3;
}

.form-control {
    border: none;
}

section.about a,
section.about a:hover,
section.about a:focus,
section.about a:active {
    color: #fff;
    text-decoration: underline;
}

footer {
    background: #a9cf47;
}

section.contact .socialmedia img {
    width: 53px;
    margin: 0 5px;
}

@media (min-width: 768px) and (max-width: 1000px) {

    body {
        font-size: 14px;
    }

    em.note {
        font-size: 12px;
    }

    .form-control,
    .btn {
        font-size: 16px;
    }

    nav {
        top: 0;
        width: 100%;
        position: fixed;
        z-index: 500;
        height: 130px;
        line-height: 130px;
        background: #66a6d3;
        text-align: center;
        -webkit-transition: height 1s;
        -moz-transition: height 1s;
        -ms-transition: height 1s;
        -o-transition: height 1s;
        transition: height 1s;
        box-shadow: 0 0 40px #446F8D;
    }

    nav.smaller {
        height: 100px;
        line-height: 100px;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 18px;
        letter-spacing: 1px;
    }

    nav li {
        display: inline-block;
        padding: 0 4px;
    }

    nav li::after {
        color: #a9cf47;
        content: "";
        padding-left: 12px;
    }

    nav li.who::after,
    nav li.logo::after,
    nav li.contact::after {
        content: "";
        padding-left: 0;
    }

    nav li img {
        width: 100%;
        max-width: 100px;
    }

    nav a,
    nav a:hover,
    nav a:active,
    nav a:focus {
        color: #fff;
        text-decoration: none;
    }

    nav .logo img {
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }

    nav.smaller .logo {
        width: 120px;
    }

    nav.smaller .logo img {
        width: 50px;
    }

    .light,
    .dark {
        padding: 40px 0 50px 0;
    }

    h1 {
        font-size: 100px
    }

    h2,
    .h2 {
        margin: 0;
        font-size: 40px;
        margin-bottom: 30px;
        text-align: center;
    }

    h3 {
        margin: 20px 0;
        font-size: 18px;
        line-height: 1.6em;
        font-weight: 900;
        text-align: center;
    }

    section.welcome .header {
        top: 50%;
        margin-top: -230px;
        position: absolute;
    }

    section.welcome .header h1 {
        line-height: 95px;
        margin-bottom: 15px;
        text-shadow: 0 0 15px #666;
    }

    section.welcome .btn {
        font-size: 24px;
        font-weight: 900;
        text-transform: lowercase;
    }

    .inline {
        padding: 0 20px;
        overflow: hidden;
    }

    #introtext:after {
        content: " Sfeer op Wielen";
        color: #ddc16a;
    }

    .one .inline {
        margin: 0 auto;
        max-width: 900px;
    }

    .two .inline {
        max-width: 400px;
        float: left;
    }

    .three .inline {
        margin: 0 auto;
        max-width: 400px;
    }

    .intro form {
        max-width: 400px;
        margin: 40px auto 0 auto;
    }

    section.contact {
        padding: 20px;
    }

    section.contact .first {
        padding-right: 30px;
        text-align: center;
    }

    section.contact .second {
        padding-left: 30px;
    }

    .socialmedia {
        margin-top: 40px;
    }

    section.contact .socialmedia a {
        margin: 0 5px;
    }

    section.contact .follow {
        font-family: "Neris-Black";
        font-size: 35px;
        letter-spacing: 1px;
        margin-bottom: 0;
        margin-top: 0;
    }

    section.contact .inline {
        padding: 40px 20px;
    }

    section.contact form {
        width: 340px;
        text-align: left;
    }

    section.contact .first,
    section.contact .second {
        margin-top: -40px;
    }

    section.contact textarea {
        height: 175px;
    }

    footer {
        padding: 20px;
        font-size: 16px;
    }

    footer span.pipe {
        color: #494a4b;
        margin: 0 10px;
    }

    footer p {
        margin: 0;
    }

    footer a,
    footer a:hover,
    footer a:active,
    footer a:focus {
        color: #fff;
        text-decoration: none;
    }
}

@media (min-width: 1001px) {

    body {
        font-size: 18px;
    }

    em.note {
        font-size: 16px;
    }

    .form-control,
    .btn {
        font-size: 20px;
        text-transform: lowercase;
    }

    nav {
        top: 0;
        width: 100%;
        position: fixed;
        z-index: 500;
        height: 90px;
        line-height: 90px;
        background: #66a6d3;
        text-align: center;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        box-shadow: 0 0 40px #446F8D;
    }

    nav.smaller {
        height: 100px;
        line-height: 100px;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 25px;
        letter-spacing: 1px;
    }

    nav li {
        display: inline-block;
        padding: 0 4px;
    }

    nav li::after {
        color: #a9cf47;
        content: "";
        padding-left: 10px;
    }

    nav li.who::after,
    nav li.logo::after,
    nav li.contact::after {
        content: "";
        padding-left: 0;
    }

    nav li img {
        width: 100%;
        max-width: 175px;
    }

    nav a {
        color: #fff;
        text-decoration: none;
    }

    nav a:hover,
    nav a:active,
    nav a:focus {
        color: #ddc16a;
        text-decoration: none;
    }

    nav .logo img {
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }

    nav.smaller .logo {
        width: 150px;
    }

    nav.smaller .logo img {
        width: 75px;
    }

    .light,
    .dark {
        padding: 40px 0 50px 0;
    }

    h1 {
        font-size: 100px
    }

    h2,
    .h2 {
        margin: 0;
        font-size: 50px;
        margin-bottom: 30px;
        text-align: center;
    }

    h3 {
        margin: 20px 0;
        font-size: 24px;
        font-weight: 900;
        text-align: center;
    }

    section.welcome .header {
        top: 50%;
        margin-top: -230px;
        position: absolute;
    }

    section.welcome .header h1 {
        line-height: 95px;
        margin-bottom: 15px;
        text-shadow: 0 0 15px #666;
    }

    section.welcome .btn {
        font-size: 24px;
        font-weight: 900;
        text-transform: lowercase;
    }

    .inline {
        padding: 0 20px;
        overflow: hidden;
    }

    #introtext:after {
        content: " Sfeer op Wielen";
        color: #ddc16a;
    }

    .one .inline {
        margin: 0 auto;
        max-width: 900px;
    }

    .two .inline {
        max-width: 400px;
        float: left;
    }

    .three .inline {
        margin: 0 auto;
        max-width: 400px;
    }

    .intro form {
        max-width: 400px;
        margin: 40px auto 0 auto;
    }

    section.contact {
        padding: 20px 0;
    }

    section.contact .first {
        padding-right: 30px;
        text-align: center;
    }

    section.contact .second {
        padding-left: 30px;
    }

    .socialmedia {
        margin-top: 40px;
    }

    section.contact .socialmedia a {
        margin: 0 5px;
    }

    section.contact .follow {
        font-family: "Neris-Black";
        font-size: 35px;
        letter-spacing: 1px;
        margin-bottom: 0;
        margin-top: 0;
        color: #fff;
        text-decoration: none;
    }

    section.contact .inline {
        padding: 40px 20px;
    }

    section.contact form {
        width: 340px;
        text-align: left;
    }

    section.contact .first,
    section.contact .second {
        margin-top: -40px;
    }

    section.contact textarea {
        height: 175px;
    }

    footer {
        padding: 20px;
        font-size: 22px;
    }

    footer span.pipe {
        color: #494a4b;
        margin: 0 15px;
    }

    footer p {
        margin: 0;
    }

    footer a,
    footer a:hover,
    footer a:active,
    footer a:focus {
        color: #fff;
        text-decoration: none;
    }
}

@media (min-width: 1200px) {

    nav li {
        display: inline-block;
        padding: 0 10px;
    }

    nav li::after {
        color: #a9cf47;
        content: "";
        padding-left: 24px;
    }
}

.language {
    display: none !important;
}

@media (max-width: 768px) {

    body {
        font-size: 20px;
    }

    h1 {
        font-size: 55px;
    }

    h2 {
        font-size: 40px;
    }

    .h2 {
        display: none !important;
    }

    h3 {
        font-size: 24px;
        font-weight: 900;
        margin-bottom: 20px;
    }

    .parallax-container {
        width: 100%;
        height: 470px !important;
    }

    .parallax-mirror {
        height: 750px !important;
        width: 100% !important;
    }

    .parallax-slider {
       width: 1000px !important;
       height: 100% !important;
       left: -400px !important;
    }

    .form-control,
    .btn {
        font-size: 18px;
    }

    #introtext:after {
        content: " Sfeer op Wielen";
        color: #ddc16a;
    }

    section.contact .follow {
        color: #fff;
        text-decoration: none;
    }

    .language {
        top: 36px;
        right: 30px;
        position: absolute;
        z-index: 99999;
        display: block !important;
    }

    .language2 {
        display: none !important;
    }

    #mobile-menu {
        top: 42px;
        left: 30px;
        width: 25px;
        height: 20px;
        cursor: pointer;
        z-index: 99999999999;
        position: absolute;
        border-radius: 0px;
        -webkit-transition: all .3s ease, -webkit-transform .2s ease;
                transition: all .3s ease, transform .2s ease;
        background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 20%, transparent 20%, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%,
            transparent 80%, #ffffff 80%), -webkit-linear-gradient(transparent, transparent);
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 20%, transparent 20%, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%,
            transparent 80%, #ffffff 80%), linear-gradient(transparent, transparent);
    }

    #mobile-menu.clicked {
        background: -webkit-linear-gradient(135deg, transparent 0%, transparent 43%, #ffffff 43%, #ffffff 53%, transparent 53%, transparent 100%),
        -webkit-linear-gradient(45deg, transparent 0%, transparent 43%, #ffffff 43%, #ffffff 53%, transparent 53%, transparent 100%);
        background: linear-gradient(-45deg, transparent 0%, transparent 43%, #ffffff 43%, #ffffff 53%, transparent 53%, transparent 100%),
        linear-gradient(45deg, transparent 0%, transparent 43%, #ffffff 43%, #ffffff 53%, transparent 53%, transparent 100%);
        -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
                transform: rotate(180deg);
    }

    nav {
        width: 100%;
        height: 100px;
        padding: 15px 0;
        background: #66a6d3;
        text-align: center;
        -webkit-transition: height 0.5s;
        -moz-transition: height 0.5s;
        -ms-transition: height 0.5s;
        -o-transition: height 0.5s;
        transition: height 0.5s;
        z-index: 999;
        position: absolute;
        box-shadow: 0 0 40px #446F8D;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav li {
        display: none;
        padding: 15px 0;
    }

    nav li.logo {
        display: block;
    }

    nav li.logo img {
        width: 120px;
    }

    nav.open {
        height: 350px;
        overflow: hidden;
    }

    nav.open .logo {
        display: none;
    }

    nav.open li {
        font-size: 32px;
        display: block;
    }

    nav.open a {
        color: #fff;
        text-decoration: none;
        text-transform: lowercase;
    }

    nav.open a:hover,
    nav.open a:active,
    nav.open a:focus {
        color: #ddc16a;
    }

    img.bounceIn {
        width: 75px;
        margin: 15px 0;
    }

    section.welcome .header {
        top: 38%;
        margin-top: -150px;
        position: absolute;
    }

    section.welcome .header h1 {
        margin-bottom: 5px;
        text-shadow: 0 0 15px #666;
    }

    section.welcome .btn.btn-primary {
        padding: 10px;
    }

    .light,
    .dark {
        padding: 30px;
    }

    section.contact {
        padding: 20px 0;
        text-align: center;
    }

    section.contact .inline {
        padding: 0 20px;
    }

    section.contact .pull-right {
        float: none !important;
    }

    section.contact .img-responsive {
        width: 50%;
        margin: 20px auto 10px auto;
    }

    section.contact .socialmedia img {
        width: 40px;
        margin: 0 5px;
    }

    section.contact form {
        width: 100%;
        padding: 40px 0 20px 0;
        text-align: center;
    }

    section.contact textarea {
        height: 160px;
    }

    section.contact .btn {
        width: 100%;
    }

    footer {
        padding: 14px;
        line-height: 1.7em;
    }

    footer p {
        margin: 0;
        text-align: center;
    }

    footer span.pipe {
        height: 1px;
        display: block;
        visibility: hidden;
    }

    footer span.strong {
        font-weight: bold;
    }

    footer a,
    footer a:hover,
    footer a:active,
    footer a:focus {
        color: #fff;
        text-decoration: none;
    }
}

@media (max-height: 800px) {

    section.welcome .header h1 {
        font-size: 70px;
        line-height: 70px;
    }

    section.welcome .btn {
        font-size: 20px;
    }
}

::-webkit-input-placeholder {
    color: #bbb !important;
    font-style: italic !important;
}

:-moz-placeholder {
   color: #bbb !important;
   opacity: 1 !important;
   font-style: italic !important;
}

::-moz-placeholder {
   color: #bbb !important;
   opacity: 1 !important;
   font-style: italic !important;
}

:-ms-input-placeholder {
   color: #aaa !important;
   font-style: italic !important;
}

@media screen\0 {

    nav .logo img {
        transition: none !important;
    }
}