@import url("reset.css");
/*@import url("normalize.css");*/

@import url("woocommerce-layout.css");


@font-face { font-family: PalaLTBold; src: url('../fonts/Palatino-LT-Std-Bold.ttf') format('truetype'); }
@font-face { font-family: PalaLT; src: url('../fonts/Palatino-LT-Std-Roman.ttf') format('truetype'); }


body {margin: 0; padding; font-family: Arial, Helvetica, sans-serif; background-color: #e5e5e5; color: #636363; font-family: PalaLT;
background-image: url(../img/bgSpine.jpg); background-repeat: no-repeat; background-position: 10% 50%/*background-attachment:fixed;*/ }

#header {width: 100%; height: 144px; background-color: #e5e5e5;}
#logo {float: left;}
#logo img {width: 100%; margin: 50px 0px 30px 0px;}


.contentLeft hr {clear: both; border: none; border-bottom: 3px dotted #CCC;}

/* Wordpress content*/ 
.alignright {float: right; margin: 0px 0px 20px 20px;}
.alignleft {float: left; margin: 0px 20px 20px 0px;}



#lang {float: right; width: 300px; text-align: right;}
#lang img {margin: 5px 0px 0px 10px;}
#logo {float: left;}

#headerRight {float: right;width: 260px; height: 50px; margin: 40px 0px 0px 0px; background-image: url(../img/iconPhoneB.png); background-repeat: no-repeat; background-position: 0px -7px; padding-left: 60px; }
#headerRight p {color: #959595; margin: 0px;}
#headerRight a {color: #2c2c2c; font-size: 20pt;}
#headerRight img {float: right;}

.homeRight {/*height: 450px;*/ background-color: #f3f3f3;}

.contentWrapper {/*background-color: #e5e5e5;*/ } 
.content { width: 1150px; margin: 0px auto;}
.contentMain { background-color: #fff; overflow: auto;}
.contentLeft {float: left; width:670px; padding: 30px; /*background-color: yellow;*/}
.contentRight {background-color: #f3f3f3; float: right; width:360px; padding: 30px;}

/*

#contentSlider {width: 1150px; margin: 0px auto 20px auto; }
#contentSlider  h2 {background-color: #c8c8c8; color: #910029; padding: 20px 20px; font-size: 16pt;}
#contentSlider  h2 a {color: #2e2e2e; font-size: 12pt; text-decoration: underline; font-weight: normal;margin: 0px 0px 0px 10px;}
#contentSlider h3 {padding: 10px 0px 10px 10px; color: #910029; background-color: white; margin: 0px!important; width: 220px;}
#contentSlider h3 strong {color: #303030; display: block;}
#contentSlider .lSPager {display: none;}

#contentSlider .lSPrev, #contentSlider .lSNext  {top: 20px;}
#contentSlider .lSPrev:before {content:""; width: 30px; height: 30px; display: block; background-color: #fff; -moz-border-radius: 10px; border-radius: 10px; margin: 13px 0px 0px 10px; position: absolute;} 
#contentSlider .lSNext:before {content:""; width: 30px; height: 30px; display: block; background-color: #fff; -moz-border-radius: 10px; border-radius: 10px; margin: 13px 0px 0px 13px; position: absolute;} 
*/

.homeRight { height: 394px; overflow: hidden;}

.btnB {background-color: #900028; color: #fff!important; padding: 12px 15px 12px 35px; -moz-border-radius: 10px; border-radius: 10px;}
.btnB:before {content:"";  width: 0; float: left; margin: 3px 0px 0px -20px; position: absolute;
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid white; }
  .btn:hover {background-color: #d54a4b; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;}

.topImg {margin: -30px 0px 0px -30px;}

.block {float: left; margin-bottom: 20px;}
.block2 {width: 48%; padding: 0 2% 0 0;}
.block3 {width: 343px; padding: 0 10px 0 30px;}

#nav {background-color: #303030;}
.topNav {overflow: hidden; background-color: #303030;}
.topNav li {list-style: none!important;}
.topNav a {float: left; display: block; color: #fff; text-align: center; padding: 30px 30px; font-size: 14pt; font-family: PalaLTBold;}
.topNav a.active {background-color: #900028!important; color: #fff!important;}
.topNav a.active:hover {color: #d02420;} 
.topNav .icon {display: none;}
.dropdown {float: left; overflow: hidden; z-index: 999;}
.dropdown .dropbtn {border: none; outline: none; color: white; padding: 30px 30px 30px 30px; background-color: inherit; font-family: PalaLTBold; margin: 0; font-size: 14pt;}
.dropdown:after {content: "";width: 0; float: right; position: relative; margin: -15px 18px 0px -36px; height: 0; z-index:999;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: white transparent transparent transparent;}
.dropdown-content {display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 999;}
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
.topNav a:hover, .dropdown:hover .dropbtn {background-color: #900028; color: white;}
.dropdown-content a:hover {background-color: #ddd; color: black;}
.dropdown:hover .dropdown-content {display: block;}

#lang ul {float: right;}
#lang ul li {list-style: none; float: left; margin: 0px;}


/* Footer */
#footerNav {background-color: #303030; border-top: 50px solid #900028; }
#footerNav p, #footerNav ul, #footerNav strong { color: #bababa;}
#footerNav a {color: #fff;}
#footerNav h2 {color: #fff; padding: 15px 0px; margin: -50px 0px 20px 0px; font-size: 14pt;}
#footerNav h2 a  {color: #fff;}
#footer {clear: both; background-color: #8b8b8b; padding: 30px 0px 24px 0px; color: #555555; }
#footer a {color: #555555;}

#socialMedia {float: right; width: 200px; margin: -34px 0px 0px 0px;}
#socialMedia span {margin: 8px 5px; float: left;}
#facebook {margin: 5px; display: inline-block;}
#instagram {margin: 5px; display: inline-block;}

/* */
#berichtenOverzicht {}
#berichtenOverzicht h2 a {text-decoration: none;}
.imgRight {float: right; margin: 0px 0px 10px 20px; }
#berichtenOverzicht hr {border: none; border-bottom: 1px solid #e5e5e5!important;}


h1, h2, h3 {font-family: PalaLTBold;}
h1 {margin: 0px 0px 20px 0px; color: #900028; /*font-size: 22pt;*/ font-size: 16pt;}
.content h2 {font-size: 16pt; margin: 5px 0px 10px 0px;  color: #303030;}
.content h3 {font-size: 14pt; margin: 5px 0px 10px 0px; color: #303030;}
.contentLeft a, .contentRight a {color: #900028; text-decoration: underline;}


strong {font-weight: bold;}
.content ul {margin: 0px 0px 20px 0px;}
.content ul li {list-style: disc; margin: 0px 0px 10px 20px;}

.content p {margin: 0px 0px 10px 0px;}
.content em {font-style: italic; font-size: 10pt; color: #999;}
.contentLeft a, p a {color: #6b1715; text-decoration: underline;}

/*
#slider {float: left; width: 730px; overflow: hidden; height: 455px; }
.content ul.content-slider{list-style: none outside none!important; color: red; padding-left: 0; margin: 0;}
.content ul.content-slider li {list-style: none!important; margin: 0px; padding: 0px;}
.content-slider li{text-align: center;  color: #FFF; list-style: none!important; padding-left: 0;  margin: 0;}	

.lslide h2 {}
.lslide h2 {background-color: rgba(44, 97, 151, .8); padding: 10px 10px 10px 70px; width: 650px; color: white!important; border: none;}
.lslide h2 em {clear: both; color: white; display: block; margin-top: 6px;}

.lSSlideOuter .lSPager.lSpg {position: absolute; margin: -26px 0px 0px 500px!important;}
.lSSlideOuter .lSPager.lSpg > li {margin: 0px;}
.lSSlideOuter .lSPager.lSpg > li a {background-color: #2c6197!important; border: 2px solid #fff; height: 12px; width: 12px;}
.lSSlideOuter .lSPager.lSpg > li.active a {background-color: #fff!important; border: 2px solid #ffffff;}

.lSNext {background-image: none!important; width: 45px!important; height: 45px!important; margin-top: 180px!important;}
.lSPrev {background-image: none!important; width: 45px!important; height: 45px!important; margin-top: 180px!important;}
.lSNext:after {content:""; position: absolute; margin: 18px 0px 0px 20px; width: 0; height: 0; border-style: solid;
border-width: 10px 0px 10px 18px; border-color: transparent transparent transparent #fff;}
.lSPrev:after {content:""; position: absolute; margin: 18px 0px 0px 15px; width: 0; height: 0; border-style: solid;
border-width: 10px 18px 10px 0px; border-color: transparent #fff transparent transparent;}
*/

.wc_ppp_paywall {border: 5px solid gray; padding: 15px; }




@media screen and (max-width: 600px) {
  .topNav a:not(:first-child), .dropdown .dropbtn {display: none;}
  .topNav a.icon {float: right; display: block;}

.topNav a, .dropdown .dropbtn {padding: 15px 15px; color: #fff!important;}


  .topNav.responsive {position: relative;}
  .topNav.responsive .icon {position: absolute; right: 0; top: 0;}
  .topNav.responsive a {float: none; display: block; text-align: left; }
  .topNav.responsive .dropdown {float: none;}
  .topNav.responsive .dropdown-content {position: relative;}
  .topNav.responsive .dropdown .dropbtn {display: block; width: 100%; text-align: left;}
  
  body {background-image: none; width: 100%; }

#logo {width: 60%; margin: -5px 0px 0px 5px;}
#lang {float: right; width: 70px; text-align: right;}
#lang img {margin: 5px 0px 0px 10px; width: 20px!important;}

#header {height: 60px; overflow: hidden;}
.content {width: 100%;}

.content img {/*width: 100%;*/ float: none!important;}
.content iframe {width: 90%!important;}
.contentLeft {width: 90%; padding-left: 20px; padding-right: 20px; float: none;}
.contentRight div {display: none;}
.contentRight img {/*width: 100%;*/ display: block;}
.contentRight {padding: 0px; width: 100%; /*overflow: hidden;*/}

.caret {display: none;}

.block3 {clear: both; width: 100%!important; padding: 0px; margin: 0px 0px 20px 0px;} 
.block3 h2, .block3 h2 a {background-color: #900028; }

#homeNav:after {content: ""; margin-bottom: 20px;}
#homeNav h2 a {width: auto;}
#homeNav h2:after {display: none;}
.iconKwast, .iconRoller, .iconGlas, .iconNetwerk, .iconPhone {padding: 15px 80px!important;    background-position: 10px 10px!important; }
 
#footer { padding: 20px 20px 10px 20px;} 
#footerNav {border: none;} 
#footerNav h2 {margin: 0px 0px 10px 0px; width: 96%!important; padding: 2%;}
#footerNav h2 a {background-color: #900028;color: #fff;}  
#footerNav h2:after {display: none;}  
#footerNav .content .block3 p, #footerNav .content .block3 h2, #footerNav .content .block3 ul   { padding-right: 20px; padding-left:20px;}
  

/*
#slider {clear: both; height: auto;}
#slider .sliderWrapper {width: 100%; }
.slbArrow, .slbCloseBtn {z-index: 999999;}


.lSPager {display: none;}
#slider {width: 100%;}
*/

#homeNav .block4, #footerNav .block4 {width: 25%; padding: 0;}

#homeNav h2 {background-color: #6b1715; }
#homeNav h2 a {width: 100%;}

#homeImg {margin-bottom: -60px;  height: 300px; overflow: hidden;}

#homeNav { height: 80px; margin-top: 43px; border-bottom: 1px solid white;}
#homeNav .block {margin: 0px;}

#homeNav h2 {margin: 0px;}
#homeNav h2:after {content:""; background-color: #6b1715; width: 40px; height: 40px; display: block;  transform: rotate(45deg); margin: -90px 0px 24px 10px;} 
/*.schilderwerk {display: block; height: 300px; background-image: url(../img/de-nooy-01.jpg); background-position: 0px -160px; }
.glas {display: block; height: 300px; background-image: url(../img/de-nooy-02.jpg);}
.nooy {display: block; height: 300px; background-image: url(../img/de-nooy-03.jpg); background-position: 0px -200px;}
.nooy:after {content:""; display: block; width: 100%; clear: both;}*/

#headerRight {display: none;}


#mc-embedded-subscribe {margin-left: 0px!important;}


  .product {width: 100%;}


} 


@media screen and (min-width: 1300px) {
	
	
  #homeNav .content:before {content: ""; width: 0;
height: 0;
border-style: solid;
border-width: 0 0 80px 130px;
border-color: transparent transparent #6b1715 transparent;
position: absolute;
margin-left: -130px;
z-index: 9;

}
#homeNav:after {content: ""; width: 0;
height: 0;
border-style: solid;
border-width: 80px 0 0 130px;
border-color: transparent transparent transparent #6b1715;
position: absolute;}
}




/*
.slbOverlay {opacity: 1!important; }
.slbCaption {font-size: 14pt!important;}

*/




/* VideoPages*/


.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion.active:after {
  content: "\2212";
}

.aPanel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.caret {
  position: absolute;
  margin: 10px 0px 0px 10px;
  width: 0; 
	height: 0; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	
	border-top: 8px solid #fff;}