/*
    Theme Name: De Ruijter actiepagina
    Theme URI: -
    Description: Thema voor actiepagina voor De Ruijter 2018
    Version: 1.0
    Author: Jules Heerkens
    Author URI: http://www.bureaubasket.nl
    */

/* wpform fixes */
ul#wpforms-6-field_17 {clear: both; padding-top: 20px !important;}

.agree {width: 100% !important; clear: both; float; left; color:#897049; font: normal 11pt 'Open Sans'; }
.agree a {color:#897049; font: normal 11pt 'Open Sans'; }

.wpforms-submit-container {margin: 0 !important; padding: 0 0 30px 0 !important; background-color: #f1dca9;}
#wpforms-submit-6 {margin: -8px auto !important;}
#wpforms-6-field_12-error {width: 336px !important;}

input[type="text"], input[type="email"] {background-color: #fff; width: 300px !important; border: none !important; font-size: 10pt; line-height: 30px !important; text-align: center; color: #897049; margin: 14px 0 0 33px !important;  -moz-border-radius: 24px; border-radius: 24px;}
#wpforms-6-field_6-container, #wpforms-6-field_15-container {margin-top: -14px !important;}
#wpforms-6-field_12 {width: 210px !important;}
#wpforms-6-field_13 {width: 80px !important; margin-left: 100px !important; font-size: 9pt !important;}

.wpforms-page-2 p.uploadtekst {margin: -14px 0 20px 0 !important ;}

button[type="submit"] {display: block; width: 90%; background-color: #d33a35;
    -moz-border-radius: 24px; border-radius: 24px; border: 0px !important; text-decoration: none; color: #fff; font: bold 10pt 'Open Sans'; line-height:  30px; margin:  26px auto 0 auto; text-transform: uppercase;}
button[type="submit"]:hover {background-color: #897049; color: #fff;}
.wpforms-error {font: normal 9pt 'Open Sans'; padding-top: 6p !important;}

.wpforms-page-indicator {margin: 0 !important; padding: 0 !important;}
.wpforms-field {margin: 0 !important; padding: 0 !important;}
.wpforms-field-container {padding-bottom: 30px; background-color: #f7dca4; text-align:  center;}
.wpforms-field-file-upload {margin: 30px 0 10px 0 !important;}
.wpforms-field-large {margin: 10px 0 !important;}
.wpforms-field-medium {margin: 10px 0 !important;}
.wpforms-field-small {margin: 10px 0 !important;}
.wpforms-page-button {display: block; width: 90%; background-color: #d33a35;
    -moz-border-radius: 24px; border-radius: 24px; border: 0px !important; text-decoration: none; color: #fff; font: bold 10pt 'Open Sans'; line-height:  30px; margin:  26px auto 0 auto; text-transform: uppercase;}
.wpforms-page-button:hover {background-color: #897049; color: #fff;}
input[type="file"] {
padding: 20px;
color: #897049;
border: 1px solid #897049;
font: normal 9pt 'Open Sans';
background-color: #e9d3a6;
-moz-border-radius: 10px; border-radius: 10px;
margin-top: -10px;
}


.uploadtekst {font: normal 10pt 'Open Sans'; color: #897049; padding: 0 5%; line-height: 18pt;}
.uploadtekst2 {font: normal 9pt 'Open Sans'; color: #897049; padding: 0 5%; margin-top: 20px !important;}


#voorwaarden {
padding: 40px;
}
#voorwaarden h3 {font: bold 16pt 'Open Sans'; color: #897049; margin-bottom: 20px;}
#voorwaarden p {font: normal 11pt 'Open Sans'; color: #897049; margin-bottom: 20px; line-height: 16pt;}

#voorwaarden h2 {font: bold 11pt 'Open Sans'; color: #897049;}
#voorwaarden ul{
padding-bottom: 40px; font: normal 10pt 'Open Sans'; color: #897049; line-height: 16pt; 
}
#voorwaarden ul li {padding-top: 20px;}
#voorwaarden ul li ul {padding-left: 20px; padding-bottom: 0 !important;}
ul.heinz {margin-top: 20px;}
ul.heinz li{padding-top: 2px !important;}




html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

strong {font-weight: bold;}
em {font-style: italic;}

/* BODY */
body {background: url(IMG/bg.jpg) top center; background-size: 100%;}
a {transition: 0.4s;}

/* HEADER */

#top_bar {width: 100%; height: 90px; background-color: #d33a35; position: absolute; z-index: 1; top: 0; left: 0;}
#logo {display: block; width: 233px; position: absolute; z-index: 99999; top: 0; left: 40px;}
#burger_menu {display: none; position: absolute; z-index: 5;}
#top_menu {float: right; position:  absolute; top: 0; right: 40px; z-index: 4;}
#top_menu li {float: left; margin-left: 25px; line-height:  90px;}
#top_menu li a{font: bold 10pt 'Open Sans'; text-transform: uppercase; text-decoration: none; color:white;}
#top_menu li a:hover{color: #f7dca4;}

/* HEADER INTRO */

#header_intro {display: block; width: 700px; margin: 16px auto 0 auto;}

#star {display: block; width: 160px; height: 160px; margin: 0 auto; background-color: red;}

/* PROGRESSIE */

.progressie {display:  block; width: 0; height: 100%; background-color: #8f130f; }
.prog1 {width: 33.33% !important;}
.prog2 {width: 66.66% !important;}
.prog3 {width: 100% !important;}


/* CONTENT */

#content {display: block; width: 700px; background-color: #fff; margin: 0 auto; margin-top: 330px;}

#stappen {background-color: #d33a35; padding: 34px;}
#balk {position: absolute; z-index: 888; width: 500px; height: 10px; background-color: white; margin:40px 0 0 70px;}
.full {float: left; display:  block; width: 33.33333%; height: 100%; background-color: darkblue;}
#stappen h4 {font: bold 9pt 'Open Sans'; text-transform: uppercase; color: #fff; line-height:  13pt;}
#stappen h4.mob {display: none;}
.stap {float: left; width: 122px; text-align:  center; margin-right: 48px; position: relative; z-index: 999;}
.vier {margin-right: 0px !important;}
.clear {clear:  both; width: 100%; display: block;}
.stap-ster {width: 80px; height: 80px; display: inline-block; background: url(IMG/ster1.png) top left no-repeat; background-size: 100%; margin-bottom: 10px; color: #d33a35; font-size:  20pt; line-height:  90px;}
.stap-compleet {width: 80px; height: 80px; display: inline-block; background: url(IMG/ster.png) top left no-repeat; background-size: 100%; margin-bottom: 10px; color: #fff;}

.redbutton {display: block; width: 100%; background-color: #d33a35;
    -moz-border-radius: 24px; border-radius: 24px; text-decoration: none; color: #fff; font: bold 10pt 'Open Sans'; line-height:  30px; margin:  26px auto 0 auto; text-transform: uppercase;}
.redbutton:hover {background-color: #897049; color: #fff;}
.goldbutton {display: inline-block; color: #897049; font: normal 11pt 'Open Sans'; padding-top: 20px; clear: both;}
.goldbutton:hover {color:#d33a35;}

#inhoud {padding: 5%; background-color: #f1dca9; text-align:  center;}
h1 {font: bold 22pt 'Open Sans'; color: #d33a35; margin-bottom: 20px;}
#inhoud p {font: normal 11pt 'Open Sans'; color: #897049; line-height:16pt; padding:0 0%;}

#producten {padding:  30px; text-align: center;}
#producten h1 {font: bold 22pt 'Open Sans'; color: #897049;; margin-bottom: 20px;}
.product1 {width: 49%; height: 260px; background: url(IMG/deruijter_limited-edition_melk.jpg) top right no-repeat; background-size: 100%; float: left;}
.product2 {width: 49%; height: 260px; background: url(IMG/deruijter_limited-edition_puur.jpg) top left no-repeat; background-size: 100%; float: right;}

#veelgestelde_vragen {padding: 0 30px 30px 30px; text-align:  center;}
#veelgestelde_vragen h1 {font: bold 22pt 'Open Sans'; color: #897049; margin-bottom: 20px;}

button.vraag {
    background-color: #fff;
    color: #897049;
    font: normal 10pt 'Open Sans';
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    border-top: 1px solid #f7dca4;
	align-items: center !important;
	height: auto !important;
	padding: 20px 40px 20px 0 !important;
}


button.vraag:after {
    content: url('IMG/qa-inactive.jpg');
    float: right;
    width: 20px;
	height: 20px;
    margin: -5px -30px 0 0;
}

button.vraag.antwoord:after {
    content: url('IMG/qa-active.jpg');
}



div.antwoord {
    padding: 0 18px 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    font: normal 10pt 'Open Sans';
    text-align: left;
    transition: max-height 0.2s ease-out;
}

.antwoord p {
    color: #ceb287;
    width: 100%; 
    padding: 18px 0;
}

.antwoord ul {
    padding-left: 16px;
}

.antwoord ul li {
    font: normal 11pt 'Open Sans'; 
    line-height: 16pt;
    color: #ceb287;
    list-style: disc;
}

/* FOOTER */

#footer {width: 100%; height: auto; margin-top: 60px; background-color:#c92d23; text-align: center; padding: 20px 0 20px 0; clear: both;}
#footer h5 {color: #fff; font: bold 11pt 'Open Sans'}
#footer h5 span {padding: 0 6px;}
#footer a {color: #fff; text-decoration: none;}
#footer a:hover {text-decoration: underline;}
#footer ul {color: #fff; display: inline-block; margin: 0 auto; padding-top: 10px; font: normal 10pt 'Open Sans';}
#footer ul li {float: left; padding: 0 4px;}

/* MOBILE */
@media screen and (max-width: 1200px) {
    #top_menu {display: none;}
    #burger_menu {display: block; height: 40px; width: 40px; position:  absolute; z-index: 321; top: 25px; right: 40px; background-color: darkgreen;}
}

@media screen and (max-width: 780px) {
    #header_intro {width: 90%;}
    #content{width: 90%;}
    #stappen {width: 92%; padding: 4%;}
    .stap {width: 20% ; margin-right: 6.666666%;}
    #balk {width: 500px;}
}

@media screen and (max-width: 750px) {
    #header_intro {width: 90%;}
    #content{width: 90%;}
    #stappen {width: 92%; padding: 4%;}
    .stap {width: 20% ; margin-right: 6.666666%;}
    #balk {width: 460px;}
.wpforms-one-half {width: 100% !important; clear: both; padding: 0 0 20px 0 !important;}
.wpforms-one-fourth {width: 100% !important; clear: both; padding: 0 0 20px 0 !important;}
input[type="text"], input[type="email"] {width: 100% !important; margin: 0 auto !important}
#wpforms-6-field_6 {margin-left: 10% !important; width: 80% !important; margin-top: 20px;}
#wpforms-6-field_10 {margin-left: 10% !important; width: 80% !important; margin-top: 20px;}
#wpforms-6-field_11 {margin-left: 10% !important; width: 80% !important; margin-top: 20px;}
#wpforms-6-field_12 {margin-left: 20% !important; width: 75% !important; margin-top: 20px;}
#wpforms-6-field_13 {margin-left: 5% !important; width: 75% !important; margin-top: 20px;}
#wpforms-6-field_14 {margin-left: 10% !important; width: 80% !important; margin-top: 20px;}
#wpforms-6-field_15 {margin-left: 10% !important; width: 80% !important; margin-top: 20px;}
#wpforms-6-field_15-container {margin-top: 0 !important;}
#wpforms-6-field_14-container {margin-top: 0 !important; padding: 0 !important;}
#wpforms-6-field_12-container {width: 50% !important; float: left; clear: left;}
#wpforms-6-field_13-container {width: 50% !important; float: left; clear: right;}

}

@media screen and (max-width: 680px) {
    #top_bar {height: 70px;}
    #logo {margin: 0 auto; left: 0; right: 0; width: 178px;}
    #header_intro {top: 120px; width: 98%;  position: relative; margin: 0 auto;}
    #burger_menu {right: 25px;}
    #content {margin-top: 430px;}
    .stap-ster {width: 60px; height: 60px; font-size: 16pt !important; line-height:  65px;}
    #balk {margin: 30px 0 0 40px; width: 74%;}
    #stappen h4 {font-size: 8pt; line-height: 10pt;}
    #inhoud h1 {font-size: 18pt;}
    #inhoud p {padding: 0; font-size: 10pt;}
    .redbutton {width: 100%;}

#wpforms-6-field_6-container {margin: 0 auto !important;}

}

@media screen and (max-width: 640px) {
    #content {margin-top: 410px;}
}

@media screen and (max-width: 600px) {
    #content {margin-top: 380px;}
    .product1 {width: 100%; height: 300px; clear: both; background-position: top center; background-size: 80%;}
    .product2 {width: 100%; height: 300px; clear: both; background-position: top center; background-size: 80%;}
	#footer ul li {float: none !important; padding: 0 4px;}
	li.divider {display: none;}
	li.linkruijter {margin-top: 10px !important;}
}

@media screen and (max-width: 530px) {
    #content {margin-top: 350px;}

button.vraag {
	padding: 20px 40px 18px 0 !important;
}

button.vraag:after {
    margin: -16px -30px 0 0;
}


}

@media screen and (max-width: 500px) {
    #content {margin-top: 350px;}
    .product1 {height: 280px; background-size: 90%;}
    .product2 {height: 280px; background-size: 90%;}
}


@media screen and (max-width: 400px) {
    #content {margin-top: 310px;}
    .product1 {height: 220px; background-size: 90%;}
    .product2 {height: 220px; background-size: 90%;}
}

@media screen and (max-width: 540px) {
    #stappen h4 {display: none;}
    #stappen h4.mob {display:  block;}
    h5 span {clear: both; display: block; padding-bottom: 4px !important; text-align:  }
}