@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Oxygen);

* { padding: 0; margin: 0; outline: 0 none; line-height: 120%; -webkit-text-size-adjust: none; }

html { height: 100%; min-height: 100%; }
body { height: 100%; min-height: 100%; font-family: 'Oxygen', arial, sans-serif; }
h1, h2, h3, h4 { text-transform: uppercase; font-family: 'Montserrat', arial, sans-serif; }
h1 { font-size: 90px; line-height: 100%; }
h2 { font-size: 60px; margin: 0 0 20px 0; }
h3 { font-size: 48px; margin: 0 0 20px 0; }
h4 { font-size: 90px; line-height: 100%; margin: 0; }
h4 span { display: block; font-size: 14px; line-height: 250%; font-family: 'Oxygen', arial, sans-serif; }
p { margin: 0 0 20px 0; font-size: 16px; line-height: 150%; }
p a { font-weight: 700; color: #000; }
p a:hover { text-decoration: none; }

label a { color: #fff; }
.radio-head { margin: 10px 0 0 0; color: #fff; }
.radio { float: left; margin: 10px 0; color: #fff; }
.radio input[type=radio] { margin: 0 10px 0 0; }
.radio input[type=radio].invalid + label { color: #f7e967; }

nav { z-index: 20; position: fixed; width: 100%; }
nav.with-bg { background-color: #fff; box-shadow: 1px 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); }
nav #logo-zwart, nav #logo-wit { float: left; width: 137px; margin: 20px 0 20px 40px; }
nav #logo-wit { display: none; }
nav ul { float: right; margin: 43px 40px 0 0; list-style: none; }
nav ul li { float: left; margin: 0 0 0 40px; }
nav ul li:first-of-type { margin-left: 0; }
nav ul li a { text-decoration: none; text-transform: uppercase; font-family: 'Montserrat', arial, sans-serif; font-weight: 700; color: #000; }
nav ul li a.white { color: #fff; }
nav ul li a:hover, nav ul li a.active { text-decoration: underline; }

header { height: 100%; min-height: 360px; background-image: url('../img/bg-wit.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
header .second-bg { z-index: 10; position: absolute; width: 100%; height: 100%; min-height: 360px; top: 0; bottom: 0; background-image: url('../img/bg-zwart.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
header h1 { z-index: 15; position: relative; width: 750px; margin-left: 43%; color: #fff; }
header a { z-index: 15; position: relative; }
header a img { width: 150px; margin-left: 43%; margin-top: 20px; padding-left: 8px; }
header #slider-buttons { z-index: 20; position: absolute; left: 17%; margin-top: 200px; }
header #slider-buttons-white, header #slider-buttons-black { clear: both; margin: 10px auto; width: 14px; height: 14px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; cursor: pointer; }
header #slider-buttons-white.active, header #slider-buttons-black.active { width: 21px; height: 21px; }
header #slider-buttons-white { border: 2px solid #000; background-color: #fff; }
header #slider-buttons-black { border: 2px solid #fff; background-color: #000; }

#content-over .img-1, #content-horeca .img-1, #content-thuis .img-1 { display: none; }
#content-over .img-wrapper { float: left; width: 470px; }
#content-over .img-2 { float: right; width: 115px; margin: 0 50px 0 0; }
#content-over h2 { text-align: right; }
#content-over .content-text { float: left; width: 580px; margin: 0 0 0 50px; }
#content-over .content-text p { font-size: 20px; margin: 0 0 30px 0; }
#content-horeca .content-text { float: left; width: 600px; margin: 0 130px 0 125px; }
#content-horeca .img-2 { float: left; width: 244px; margin: 55px 0 0 0; }
#content-thuis .content-text { float: left; width: 670px; }
#content-thuis .img-2 { float: left; width: 250px; margin: 0 100px 0 65px; }

footer { height: 100%; min-height: 740px; background-color: #63615d; background-image: url('../img/flessen-bottom-leeg.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; transition: background 0.6s ease; -webkit-transition: background 0.6s ease; -moz-transition: background 0.6s ease; }
footer.footer-bg-1 { background-image: url('../img/flessen-bottom.jpg'); }
footer h4 { width: 850px; margin: 0 0 0 20px; color: #fff; }
footer #amount { width: 100%; }
footer #amount .amount-field { float: right; margin: 0 20px; color: #fff; }
footer #amount .amount-field:first-of-type { float: left; }
footer #amount .amount-field a { display: block; float: left; padding: 8px 15px; font-size: 28px; color: #fff; text-decoration: none; font-family: 'Montserrat', arial, sans-serif; font-weight: 400; }
footer #amount .amount-field input { display: block; float: left; width: 70px; padding: 10px 0; color: #fff; background-color: transparent; border: 2px solid #fff; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -webkit-appearance: none; font-size: 20px; font-family: 'Montserrat', arial, sans-serif; font-weight: 400; text-align: center; }
footer #amount .amount-field a.invalid, footer #amount .amount-field input.invalid { border-color: #f7e967; color: #f7e967; }
footer #order-bottles, footer #order-bottles-2, footer #order-bottles-fb { display: block; width: 170px; padding: 15px 0; margin: 0 auto; background-color: #fff; border: 0 none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -webkit-appearance: none; color: #000; font-size: 16px; font-family: 'Montserrat', arial, sans-serif; font-weight: 700; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; }
footer #order-bottles-fb { float: left; margin: 20px 0 300px 20px; }
footer #order-bottles-2-container { display: none; width: 100%;  }
footer #form-2, footer #form-3 { display: none; }
footer #form-3 { color: #fff; text-align: center; }
footer #input-wrapper { position: relative; width: 520px; margin: 0 auto; }
footer #input-wrapper input[type=text], footer #input-wrapper input[type=email] { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: left; padding: 10px; margin: 10px 0; color: #fff; background-color: transparent; border: 2px solid #fff; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -webkit-appearance: none; font-size: 20px; font-family: 'Oxygen', arial, sans-serif; font-weight: 400; }
footer #input-wrapper input[type=text].invalid, footer #input-wrapper input[type=email].invalid { border-color: #f7e967; color: #f7e967; }
footer #form-alert { display: none; position: absolute; width: 100%; margin: 50px 0 0 0; background-color: #f7e967; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
footer #form-alert .close { position: absolute; top: 10px; right: 10px; color: #726705; font-weight: 700; cursor: pointer; }
footer #form-alert .close:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  filter: alpha(opacity=70);  -moz-opacity: 0.7;  -khtml-opacity: 0.7;  opacity: 0.7;  }
footer #form-alert img { float: left; width: 54px; margin: 19px; }
footer #form-alert p { float: left; width: 400px; margin: 10px; font-size: 14px; color: #726705; }
footer #form-alert .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 16%; margin-left: -35px; bottom: -16px; }
footer #form-alert .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); background-color: #f7e967; }

.transition { transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; }
.transition-100 { transition: all 0.1s ease; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; }
.table { display: table; width: 100%; height: 100%; }
.table-cell { display: table-cell; vertical-align: middle; }
.content { width: 1100px; margin: 150px auto 150px auto; }
.table-cell .content { margin: 0 auto 0 auto; }
.width-20 { width: 20%; }
.width-30 { width: 30%; }
.width-40 { width: 40%; }
.width-50 { width: 50%; }
.width-60 { width: 60%; }
.width-70 { width: 70%; }
.width-80 { width: 80%; }
.width-100 { width: 100%; }
.small-border-left { border-left-width: 1px !important; }
.small-border-right { border-right-width: 1px !important; }
.hidden { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);  -moz-opacity: 0;  -khtml-opacity: 0;  opacity: 0; }
.clearer { clear: both; }
.text-black { color: #000 !important; }


/* begin extra media query */
@media (max-width:1399px) {
    header h1 { width: 550px; font-size: 70px; }
}
/* end extra media query */

@media (max-width:1199px) {
    .content { width: 892px; }
    footer h4 { width: 550px; font-size: 60px; }

    #content-over .content-text { width: 372px; }
    #content-horeca .content-text { width: 618px; margin: 0 30px 0 0; }
    #content-thuis .content-text { width: 592px; }
    #content-thuis .img-2 { width: 250px; margin: 0 50px 0 0; }
}

@media (max-width:991px) {
    h2, h3, h4 { font-size: 36px; }
    nav { position: absolute; }
    nav ul { display: none; }
    header h1 { width: 400px; font-size: 50px; }
    header #slider-buttons { left: 40px; margin-top: 0; }
    .content { width: 748px; }

    #content-over .img-wrapper { width: 370px; }
    #content-over .img-2 { margin: 0 20px 0 0; }
    #content-over h2 { font-size: 48px; }
    #content-over .content-text { width: 308px; margin: 0 0 0 40px; }
    #content-over .content-text p { font-size: 16px; }
    #content-horeca .content-text { width: 478px; margin: 0 30px 0 20px; }
    #content-horeca .img-2 { float: left; width: 200px; margin: 55px 20px 0 0; }
    #content-thuis .content-text { width: 458px; }
    #content-thuis .img-2 { width: 200px; margin: 0 30px 0 20px; }
}

@media (max-width:767px) {
    h2, h3, h4 { font-size: 28px !important; }
    nav #logo { margin-left: 20px; }
    header { background-position: center left; }
    header .second-bg { background-position: center left; }
    header h1 { width: 300px; margin-left: 20px; margin-top: 150px; font-size: 36px; }
    header a img { display: none !important; }
    header #slider-buttons { left: 40%; bottom: 20px; }
    header #slider-buttons-white, header #slider-buttons-black { float: left; clear: none; margin: 0 10px; }
    header #slider-buttons-white:not(.active), header #slider-buttons-black:not(.active) { margin-top: 3px; }
    .content { width: auto; margin: 150px 20px 150px 20px; }

    #content-over .img-2, #content-horeca .img-2, #content-thuis .img-2 { display: none; }
    #content-over .img-1, #content-horeca .img-1, #content-thuis .img-1 { display: block; position: absolute; width: 200px; margin: -50px 0 0 70px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";  filter: alpha(opacity=15);  -moz-opacity: 0.15;  -khtml-opacity: 0.15;  opacity: 0.15; }

    #content-over .img-wrapper { width: 100%; margin: 0; }
    #content-over h2 { text-align: left; }
    #content-over .content-text { width: 100%; margin: 0; }
    #content-over .content-text p { font-size: 16px; }
    #content-horeca .content-text { width: 100%; margin: 0; }
    #content-thuis .content-text { width: 100%; margin: 0; }

    footer h4 { width: 90%; }
    footer #input-wrapper { width: 90%; }
    #amount-white, #amount-black { background-color: rgba(0,0,0,0.4) !important; }
    footer #form-alert p { width: 66%; }
}

@media (max-width:480px) {
    h4 span { font-size: 12px; }
    footer #input-wrapper input { font-size: 16px; }
    footer #form-alert { margin-top: 57px; }
    footer #form-alert img { display: none; }
    footer #form-alert p { font-size: 13px; width: 90%; }
}