@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');


/*--------------------------------------RESET---------------------------------------------*/
html,body,div,span,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,samp,small,strike,strong,sub,sup,tt,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,section, article, aside, footer, header, hgroup, nav{ margin:0; padding:0; border:0; outline:0; font-size:100%; font:inherit; vertical-align:baseline; -moz-box-sizing:border-box; /* Firefox 28 and earlier*/ box-sizing:border-box;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
body{position:relative;	-webkit-font-kerning: auto;	-webkit-font-smoothing: antialiased;}

/*--------------------------------------ALGEMENE SETTINGS---------------------------------------------*/
body {font-family: 'Noto Sans', sans-serif; font-size:14px; color:#333333; background:#ffffff; }

.floatleft { float:left;}
.floatright { float:right;}
.clear { clear:both; }

.row::after {content: ""; clear: both; display: table;}
[class*="col-"] { float: left; width:100%; }




/*--------------------------------------FONTS AND COLORING---------------------------------------------*/
strong { font-weight: bold; font-size:18px; }
i { font-style:italic;}

a {  text-decoration: none}
a:hover {  text-decoration:none;}

h1   { font-size:37px; color:rgba(128,189,29,1); margin:0px 0px 40px 0px; font-weight: bold;}
h2   { font-size:30px; color:rgba(128,189,29,1); margin:0px 0px 30px 0px; font-weight: bold;}
h3   { font-size:25px; color:rgba(128,189,29,1); margin:0px 0px 20px 0px; font-weight: bold;}
h4   { font-size:22px; color:rgba(128,189,29,1); margin:0px 0px 20px 0px; font-weight: bold;}
h5   { font-size:20px; color:rgba(128,189,29,1); margin:0px 0px 20px 0px; font-weight: bold;}
h6   { font-size:18px; color:rgba(128,189,29,1); margin:0px 0px 20px 0px; font-weight: bold;}

p {line-height: 26px;}

.textalign-center { text-align: center;}
.textalign-right { text-align: left;}

.button { display: inline-block; color:#ffffff; background-color:rgba(34,118,71,1); text-decoration: none; padding:10px 40px;  border-radius:5px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.button:hover { color:rgba(128,189,29,1); }


.plusgroen-background {background-color:rgba(128,189,29,1);}
.plusdonkergroen-background {background-color:rgba(34,118,71,1); }
.pluspaars-background {background-color:rgba(85,77,167,1); }
.white-background {background-color:rgba(255,255,255,1); color:rgba(128,189,29,1);}
.white-background:hover {color:rgba(34,118,71,1);}
.grijs-background {background-color: #4d4d4d;}

.plusgroen-color {color:rgba(128,189,29,1);}
.plusdonkergroen-color {color:rgba(34,118,71,1); }
.pluspaars-color {color:rgba(85,77,167,1); }


/*--------------------------------------HEADER STYLING---------------------------------------------*/
header {height:104px;}
.topbalkgroen{width: 100%; height: 52px; background:rgba(128,189,29,1); position: relative; z-index:1200; padding: 0px 25px 0px 25px;  }
.topbalkwit{width: 100%; height: 52px;  background:rgba(255,255,255,1); position: relative; z-index: 1100;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.max1200px {max-width: 1200px; position: relative; margin: 0 auto;  }
.logo {width: 110px; height:auto; position: relative; margin: 3px 0px 0px 0px;}
.logo-hofleverancier {width: 50px; height:auto; position: absolute; margin:-5px 0px 0px 15px; z-index: 1001; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;}
/*-.logo {width: 245px; height:auto; position: relative; margin: 15px 0px 0px 0px;}--*/

.topbalkwit .buttonpositioning {position: absolute; right:25px; top:6px;}

/*--------------------------------------CLASIE---------------------------------------------*/
.smaller .topbalkwit {position: fixed; top:0px; background:rgba(255,255,255,0.9);  }
/*-.logoclasie {width: 245px; height:auto; position: relative; float: left; margin: -150px 0px 0px 0px;   -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.smaller .logoclasie { margin: 15px 10px 0px 25px; width: 245px;   }--*/

.logoclasie {width: 200px; height:auto; position: relative; float: left; margin: -150px 0px 0px 0px;   -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.smaller .logoclasie { margin: 3px 10px 0px 25px; width: 110px; }



/*--------------------------------------FLEXSLIDER-TOPSLIDER---------------------------------------------*/
.topslider { position: relative; height:200px;   }
.slide { background-position:center center; background-size: 1517px 200px; }

.slidetekst-container {margin:0 auto; height:200px; width:100%; text-align:center; padding:30px 25px 0px 25px;  display:block;   font-size:25px; color:#ffffff;  font-weight: bold; text-shadow:2px 2px 8px #000000; }
.slidetekst-container .button {font-size: 14px; text-shadow: none; background-color:rgba(128,189,29,1);} 
.slidetekst-container .button:hover {background-color:rgba(255,255,255,1); color:rgba(34,118,71,1);;}

/*--------------------------------------FLEXSLIDER-LOGOSLIDER---------------------------------------------*/
.streeklogos li { padding: 0px 0px 0px 0px; height: 235px;   }

.streek-tegel { max-width:197px; margin: 0px; padding:5px; text-align: center;  position: relative;   -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.streek-tegel h3  {font-size: 15px;  margin: 20px 0px 0px 0px; }
.streek-tegel:hover h3  {color:rgba(128,189,29,1); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.streek-tegel img  {border-radius:5px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.streek-tegel:hover img {border:solid 4px rgba(128,189,29,1);}

/*--------------------------------------MAIN SECTION STYLING---------------------------------------------*/
main {position: relative;}
article {max-width: 850px; margin: 0 auto; padding:50px 25px 50px 25px; }

ol.stappen {list-style: decimal; list-style-position: outside; font-size: 18px; margin-left: 20px; }
ol.stappen li {padding:10px 0px 10px 0px;}

ul.actievoorwaarden {list-style: disc; list-style-position: outside; font-size: 10px; margin-left: 20px; }
ul.actievoorwaarden li {padding:5px 0px 5px 0px;}



#winkels{ background-color: #f4f4f5;}
#winkels h1 { font-size: 45px; font-weight: bold;}
#winkels h1 span { color: rgba(34,118,71,1);}
#winkels h2 { font-size: 35px; font-weight: bold;}
#winkels h3 { font-size: 15px; font-weight: bold;}
.winkelkiezer {height: 180px;}
.winkelkiezer img:hover {-webkit-transition: 350ms; -moz-transition: 350ms; transition:350ms; margin: -6px 0px 0px 0px;}
.winkelkiezer:hover > h3 {-webkit-transition: 350ms; -moz-transition: 350ms; transition:350ms; color:rgba(34,118,71,1);}

.afbeelding-home-rechts {position: relative; float: left; margin: 75px 0px 0px 0px;}
.historie-afbeelding { position: relative; text-align: right;}
.historie-afbeelding img { max-width: 80%; }


#streek { background: url("../images/streek-background.jpg"); }
.beste-dichtbij { font-family: 'Amatic SC', cursive; font-size:40px; }
.cracked-above {height: 29px;  background: url("../images/streek-cracked.png"); }
.cracked-below {height: 29px;  background: url("../images/streek-cracked-below.png"); }

#bezorgen{ margin-top:50px; padding: 25px; color: #ffffff; }
#bezorgen h2{ color: #ffffff; }
#bezorgen ul {list-style-type: disc; list-style-position: outside; margin: 0px 0px 0px 25px;}

/*--------------------------------------FOOTER STYLING---------------------------------------------*/

footer {margin: 50px 0px 0px 0px; background-color: #333333; color: #FFFFFF; }
#purple-row {height: auto; padding: 20px 25px 20px 25px; text-align: center; }
.werkenbij {color:#FFFFFF; font-weight: bold; font-size: 18px; margin: 0px 20px 0px 0px;}
.socialcontainer {display: block; padding: 50px 0px 15px 0px; color: #ffffff; }
.socialcontainer i {font-size:35px; vertical-align: middle; }
.social {color:rgba(128,189,29,1); -webkit-transition: 350ms; -moz-transition: 350ms; transition:350ms; }
.social:hover {color:rgba(255,255,255,1);}
footer span img{ vertical-align: middle; margin: 0px 0px 0px 10px;}

.winkels {padding: 0px 25px 80px 25px; text-align: center;}
.winkels div {margin:90px 0px 0px 0px }
.winkels h3 {color: #FFFFFF;}
.winkels a {color:rgba(255,255,255,1); -webkit-transition: 350ms; -moz-transition: 350ms; transition:350ms;}
.winkels a:hover {color:rgba(128,189,29,1);}
i.facebookicon {font-size: 20px;}


/*--------------------------------------VERVOLGPAGINA'S STYLING---------------------------------------------*/

.vervolgpage-cracked {position: relative; z-index:101; margin: -15px 0px 0px 0px; }

.vervolg-streek-tegel {float: left; max-width:197px; margin: 0px 25px 0px 0px; padding:5px; text-align: center;  position: relative;   -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.vervolg-streek-tegel h3  {font-size: 15px;  margin: 10px 0px 0px 0px; }
.vervolg-streek-tegel:hover h3  {color:rgba(128,189,29,1); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.vervolg-streek-tegel img  {max-width:197px; border-radius:5px;  -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.vervolg-streek-tegel:hover img {border:solid 4px rgba(128,189,29,1);}

.vervolgpage-familienaam {display: inline-block; color: #FFFFFF; background-color:rgba(128,189,29,1); font-family: 'Amatic SC', cursive; font-size:30px; padding: 2px 15px; margin: 20px 0px 20px 0px;}
.vervolgpage-plaatsnaam { font-family: 'Amatic SC', cursive; font-size:40px; color:rgba(85,77,167,1);}
.vervolgpage-plaatsnaam span { font-size:70px; line-height: 80px; text-decoration: underline; }
.vervolgpage-bestevan { margin: -100px 0px 0px 0px; }

a.breadcrumb:hover {text-decoration: underline;}
a.breadcrumb:active {color:#000000;}