@charset "utf-8";
/* 18-09-2018 - CSS Document */


/* colours

groen: #defe47

donker-grijs: title: #282828
grijs tekst: #a5a5a5
 */

@import url("reset.css");

/* HTML5 fix */ 
header, section, footer, aside, nav, main, article, figure {
  display: block;
}

@font-face { font-family: boostssi; src: url('../fonts/Boost-SSi.ttf'); }

body, table {font-family: boostssi; background-color: #f9f9f9;}
body {/*background-image: url(../img/dsgn/zietze-bg.jpg); background-size: fit; background-attachment: fixed; */}

main {width: 96%; padding: 0% 2%; /*max-width: 1136px;*/ margin: 100px auto 0px auto; font-family: Arial, Helvetica, sans-serif; display: block; float: left; color: #a5a5a5;} 

/* Header ------------------------------------------------------------------------------------------------------------------------------------------------ */ 
#titleBar {background-color: #282828; color: #f9f9f9; float: left; width: 96%; padding: 15px 2%; font-family: boostssi; position:fixed; z-index: 888; }
#titleBar a {color: white; margin-left: 94px; text-decoration: none;}
.opening {float: left;}
.phone {float: right;}

#logo {margin-top: 0px; margin-left: -5px; position: absolute!important; float: left; z-index: 99;}


/* block & col ------------------------------------------------------------------------------------------------------------------------------------------------ */ 

.col {float: left; width: 33%;}
.col .block {width: 90%!important;}
.col .block a {width: 100%!important;}

.col h2 {width: 90%}
.col h2:before {display: none;}

.block  {float: left; width: 100%; background-size: cover; /*height: 20vw;*/}
.block2 {width: 30%; padding-right: 3%;} 
.block4 {width: 25%; height: auto;}
.block5 {width: 19%; height: auto;}
.block6 {width: 15%; height: auto;}


/* Content ------------------------------------------------------------------------------------------------------------------------------------------------ */ 
.columnT { column-count: 3;column-gap: 20px; column-rule: 1px solid #defe47;}
.columnT p {font-family: Georgia, "Times New Roman", Times, serif!important; font-size: 14pt!important;}

section {padding: 0% 2% 0% 2%; background-color: #f9f9f9;}
.contentWrapper {/*max-width: 1160px;*/}
br {clear:both;}

h1 {font-family: boostssi; font-size: 20pt; color: #282828;}

h3 {font-family: boostssi; margin:0px; padding: 0px;}

h4 {font-family: boostssi; margin:0px; padding: 0px; color: #000;}

strong {font-weight: bold;}

/*ul.list {font-family: boostssi; margin-left: 16px;}
ul.list li:before {content:""; background-color: #bcbcbc; width: 7px; height: 7px; display:block; position: absolute; margin: 7px 0px 0px -15px; transform: rotate(45deg);}*/



section h2 {clear: both; display: block; color: #000;  font-family: boostssi; margin: 0px 0px 0px 0px; }
section h2 em {background-color: #f9f9f9; padding: 0px 5px 0px 5px; margin: 0px 0px 0px 0px; border: 3px solid #000; border-top: none; border-bottom: none; border-radius: 6px;}
section h2:before {content:""; display: block; width: 20px; height: 20px; background-image: url(../img/dsgn/zietze-oog.png); margin: 0px 10px 0px 10px; float: left; z-index: 100;  position: relative; }
section h2:after {content:""; display: block;  height: 1px; background-color: #defe47; background: linear-gradient(27deg, rgba(222,254,71,1) 0%, rgba(249,249,249,1) 100%); margin: -8px 20px 20px 0px; border-bottom: 1px dotted #000; }

section p {font-family: boostssi; margin: 0px 0px 15px 0px;}
section a {font-family: boostssi; color: #c59b37; text-decoration: underline;}

section h2 span { display: block; width: 10px; height: 10px; background-color: yellow;  margin: 10px; float: left; z-index: 100;  }

/*a.topLink:before {content: ""; display: block; float: right; width: 100%; height: 10px; background-color: red; clear: both;}*/
a.topLink {
display: none;  
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 20px 15px;
border-color: transparent transparent #defe47 transparent;
float: right;
position: relative;
margin: 0px 0px -20px 0px;


}
a.topLink:after {content: ""; display: block; width: 0; float: left; margin: 4px 0px 0px -10px;
height: 0;
border-style: solid;
border-width: 0 10px 15px 10px;
border-color: transparent transparent #000 transparent; }


/* Block3 ------------------------------------------------------------------------------------------------------------------------------------------------ */ 


.block3 {background-color: #f3f3f3; height: 20vw; width: 30%; position: relative;  overflow: hidden; margin-bottom: 3%; transition-timing-function: ease; /*opacity:0.4; transition-timing-function: ease; */-webkit-transition-timing-function: ease; transition: all 1s; border-radius: 6px;}

.blockInnerImg { height: 100%; width: 100%; filter: grayscale(100%) opacity(50%); position: absolute; z-index:1;  transition: all 1s; background-size: cover; }
.block3:hover .blockInnerImg{filter: grayscale(0%) opacity(100%); z-index: 4;}

.block3:hover {/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/ cursor: pointer; /*opacity:1;*/ filter: grayscale(0%); /*box-shadow: 0px 0px 300px 200px rgba(0, 0, 0, 0.8);*/ z-index: 5; /*transform: scale(1.2);*/ }
.block3:nth-child(1) {clear: left;}
.block3:nth-of-type(3n+2) {background-color: #e9e9e9; margin: 0% 3% 1% 3%;}

.blockImg:hover {box-shadow: none; cursor:default;}

.block3:after {content:""; display: block; height: 100%; width: 100%; background-image: radial-gradient(#fff 0%, transparent 50%, #f9f9f9 70%); transition-timing-function: ease; -webkit-transition-timing-function: ease; transition: all 1s; position: absolute; top: 0px; z-index: 2; }
.block3:hover:after {content:""; display: block; height: 100%; width: 100%; background-image: radial-gradient(transparent 0%, transparent 100%); transition-timing-function: ease; -webkit-transition-timing-function: ease; transition: all 1s;}
/*.block3 a:after {content:""; display: block; height: 20vw; width: 100%; background-image: radial-gradient(#c7fb13 0%, #ddfb13 10%, transparent 40%, white 70%);}*/

/*.block3:after {content:""; display: block; height: 20vw; width: 100%;background:red; transition: all 1s;}
.block3:hover:after {content:""; display: block; height: 20vw; width: 100%; background: green; transition-timing-function: ease; -webkit-transition-timing-function: ease;}*/
 
.block3 h3 { font-size: 1.2vw; /*background-color: rgb(255, 255, 255, 0.6);*/ color: #4c4c4c; display: inline-block!important; padding: .1vw .2vw; position: absolute; bottom: 0; right: 0;  font-family: boostssi;  /*text-shadow: 0px 0px 1px #000;*/ margin-bottom: -200px; transition: all .5s; border-top: 3px solid black; text-align: right; max-width: 80%; z-index: 5; /*margin-right: -500px;*/ margin-right: 0px; /*margin-bottom: -1000px;*/ box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.8); }
.block3 h3:before {content: ""; display: block; width: 3vw; height: 3vw;  border: 3px dotted black; position: absolute; left: 0px; margin: -5.3vw 0vw 0vw -1.7vw; /* margin: -59px 0px 0px -17px;*/ border-radius: 30px; /*background-color: rgba(222, 254, 71, 0.5);*/ background: radial-gradient(circle, rgba(222,254,71,0) 0%, rgba(222,254,71,1) 100%);} 
.block3 h3:after {content: ""; display: block; width: 1pvw; height: 1.8vw;  position: absolute; left: 0px; margin: -3.4vw 0vw 0vw 0vw; border-right: 3px solid black; /*box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.8);*/}
/*.block3 h3:before {content: ""; display: block; width: 50px; height: 50px;  border: 3px dotted black; position: absolute; left: 0px; margin: -50px 0px 0px -50px; background-color: rgba(222, 254, 71, 0.5); border-radius: 50px; }*/

/*.block3 h3 a {background-color: red!important; display: block; z-index: 10000!important; position: absolute!important; width: 100px!important; height: 100px!important; top: 0px!important; margin-bottom: 0px!important; }*/

.block3:hover h3 { /*background-color: rgb(255, 255, 255, 0.8);*/}


.block3:hover em {margin-left: -500px; transition-timing-function: ease; -webkit-transition-timing-function: ease; transition: all 1s;}
.block3 em {font-size: 1.3vw; float: left; font-family: boostssi; /*text-align: justify;*/  border-bottom: 3px dotted #a5a5a5; position: absolute; left: 0!important; color: #a5a5a5;
  padding: .3vw .3vw .3vw .6vw; /*padding: 3px 3px 3px 6px;*/ margin-left: 0px;   text-align: left; padding-right: 40px; /*background-color: rgb(255, 255, 255, 0.6);*/ max-width: 70%; z-index: 3; }

/* block3Home */
 .block3Home em {color: #282828; transition-timing-function: ease; -webkit-transition-timing-function: ease; transition: all 1s; }
 .block3Home em:after {content: ""; display: block; width: 5vw; height: 5vw; /*width: 50px; height: 50px;*/  border: 3px dotted #282828; position: absolute; right: 0px;  margin: 2.6vw -2.6vw 0vw 0vw; /*margin: 35px -26px 0px 0px;*/ border-radius: 5vw; /*background-color: rgba(222, 254, 71, 0.5);*/ background: radial-gradient(circle, rgba(222,254,71,0) 0%, rgba(222,254,71,1) 100%);}
 .block3Home em:before {content: ""; display: block; width: 1vw; height: 2vw; /*width: 10px; height: 30px;*/  position: absolute; right: 0px; margin: 1.9vw 0vw 0vw 0vw; border-right: 3px solid black;}
.block3Home em {border-bottom: 3px solid #282828;}

.block3Home:hover em{margin-left: 0px;  opacity: 0; margin: -50px -300px 0px 0px;}
.block3Home:hover em:after  {width: 500px; height: 500px; border-radius: 500px; transition-timing-function: ease; -webkit-transition-timing-function: ease; transition: all 1s; margin-right: -300px; /*margin: -50px -300px 0px 0px;*/ opacity: 0;}
.block3Home:hover em:before {/*margin: -50px 0px 0px 0px;*/ transition-timing-function: ease; -webkit-transition-timing-function: ease; transition: all 1s;}

 .block3Home h3 {}
 .block3Home h3:before { }
 .block3Home h3:after {}
 
.block3Home:hover h3 {margin-bottom: 0px; background-color: rgb(1, 1, 1, 0.6); color: white}

.blockContent {height: 20vw; width: 28%; padding: 0% 2% 0% 2%;}
.blockContent:after {display: none;}
.blockContent h4 {margin: 20px 0px 10px 0px;}
.blockContent a {    position: relative;}


/* Nav ------------------------------------------------------------------------------------------------------------------------------------------------ */ 
nav {background-color: rgba(255, 255, 255, 0.8);  font-family: boostssi; width: 100%; z-index: 777; float: left; position:fixed; margin-top: 40px; }
.topNav {overflow: hidden; /*background-color: #fff;*/ float: right; }
.topNav a {float: left; display: block; color: #a5a5a5; text-align: center; padding: 15px 10px; font-size: 14pt;  font-family: boostssi;}
.active {background-color: #fff!important; color: #282828!important; border-bottom: 1px solid #defe47!important; }
.active:hover {background-color: #defe47!important; color: #282828!important; border-bottom: 1px solid #282828!important; }

.topNav .icon {display: none;}
.dropdown {float: left; overflow: hidden; }
.dropdown .dropbtn {border: none; outline: none; color: #282828;  font-family: boostssi; padding: 15px 20px 15px 10px; background-color: inherit; font-family: inherit; margin: 0; font-size: 14pt;}
.dropdown:after {content: "";width: 0; float: right; position: relative; margin: -15px 18px 0px -36px; height: 0; z-index:1000;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: #fff 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: 1;}
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}

.subTitle {color: #defe47!important; }
.subTitle:hover {background-color: #f9f9f9!important;}

.topNav a:hover, .dropdown:hover .dropbtn {background-color: #defe47; color: #fff; text-shadow: 2px 2px 5px #9cbb09;}
.dropdown-content a:hover {background-color: #ddd; color: black;}
.dropdown:hover .dropdown-content {display: block;}





/* W3 Slider */
.mySlides1, .mySlides2, .mySlides3 {display:none; /*width: 96%; padding: 0% 2%;*/ width: 100%; /*background-color: gray;*/  float: left; transition-timing-function: ease; -webkit-transition-timing-function: ease; transition: all 1s;}

.w3-badge {height:13px;width:13px;padding:0}

.slider-controls {/*background-color: yellow;*/ position: relative; float: left; width: 104%; height: 100%; font-size: 60px; margin-left: -3%; margin-top: -17%;  font-family: boostssi;}
.slider-left { color: #282828; display:inline-block; float: left; cursor:pointer;  z-index: 10000; position: absolute;}
.slider-right { color: #282828;  display:inline-block; float: right; cursor:pointer;  z-index: 10000; }



/* to be sorted -------------------------------------------------------------------------------------------------------- */
/* to be sorted -------------------------------------------------------------------------------------------------------- */
/* to be sorted -------------------------------------------------------------------------------------------------------- */
/* to be sorted -------------------------------------------------------------------------------------------------------- */
/* to be sorted -------------------------------------------------------------------------------------------------------- */
/* to be sorted -------------------------------------------------------------------------------------------------------- */
/* to be sorted -------------------------------------------------------------------------------------------------------- */
/* to be sorted -------------------------------------------------------------------------------------------------------- *//* to be sorted -------------------------------------------------------------------------------------------------------- */
/* to be sorted -------------------------------------------------------------------------------------------------------- *//* to be sorted -------------------------------------------------------------------------------------------------------- */
/* to be sorted -------------------------------------------------------------------------------------------------------- *//* to be sorted -------------------------------------------------------------------------------------------------------- *//* to be sorted -------------------------------------------------------------------------------------------------------- *//* to be sorted -------------------------------------------------------------------------------------------------------- *//* to be sorted -------------------------------------------------------------------------------------------------------- *//* to be sorted -------------------------------------------------------------------------------------------------------- */









.homeBlocks {margin: -200px 0px 0px 0px; position: absolute;}




/* content ------------------------------------------------------------------------------------------------------------------------------------------------ */ 








/*.content h2.dark {clear: both; display: block; color: #fff;  font-family: boostssi; margin: 20px 0px 0px 0px; }
.content h2.dark em {background-color: #2e2e2e; padding: 0px 5px 0px 5px; margin: 0px 0px 0px 0px; border: 3px solid #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff; border-radius: 6px;}
.content h2.dark:before {content:""; display: block; width: 20px; height: 20px; background-image: url(../img/dsgn/zietze-oog.png); margin: 0px 10px 0px 10px; float: left; z-index: 100;  position: relative; }
.content h2.dark:after {content:""; display: block;  height: 1px; background-color: #defe47; margin: -8px 20px 20px 0px; border-bottom: 1px dotted #2e2e2e; }*/






/*.blockHeader {width: 30%; padding-right: 3%; float: left;}
.blockHeader .block3 {width: 100%;}*/





.contentDetails {}
.contentDetails .block3 h3 {display: none;}


/* Footer */
footer {clear: both; border-top: 1px #dadada solid; /*margin-top: 20px;*/ padding: 10px 0px 10px 0px; background-color: #282828; height: 20px; color: gray;  }
footer a {color: gray; text-decoration: underline;}
#zietze {float: right; color: gray;}
#zietze a {color: gray;}
#zietze a:hover {color: #fff;}
ul#footerNav {}
ul#footerNav li {float: left; margin-right: 20px;}

 #footerLinks {color: #979797; padding: 20px 0px 20px 0px; /*-moz-border-radius: 8px; border-radius: 8px;*/ }
 #footerLinks .content {/*width: 90%;*/ margin: 0 auto;}
 #footerLinks h3 {padding: 0px 0px 5px 0px; /*border-bottom: 1px #bcbcbc solid;*/ font-family: boostssi; color: #7c7c7c;}
 #footerLinks a {color: #bcbcbc; text-decoration: none;}
 #footerLinks ul li {margin: 3px 0px 10px 0px; padding: 0px 0px 0px 35px;}
 #footerLinks ul li:before {content:""; width: 20px; height: 20px; display:block; position: absolute; margin: -2px 0px 0px -25px; background-image: url(../img/dsgn/zietze-oog.png); filter: grayscale(100%) opacity(30%); }
 #footerLinks ul li a:hover {color: #73604C;}
 #footerLinks ul li:hover:before {filter: grayscale(0%);  }
 
 
 a.facebook {background-image: url(../img/facebookIcon.png); background-repeat: no-repeat; background-position: 0px 7px; display: block;  padding: 0px 0px 0px 30px; margin: 20px 0px 0px 0px; color: #3b5998;}
 
 
 /* form */
form label {float: left; width: 195px; color:#282828; margin: 5px 0px 0px 0px; font-family: boostssi;}
form span label {margin: 0px;}
form label.error {position:absolute; width: auto; color: #ffffff; margin: -0px 0px 0px -20px; background-color: #2d2d2d; background-position: left bottom; background-repeat: no-repeat; padding: 5px 14px 4px 14px; border-left: 10px #60010A solid; border-right: 1px #60010A solid; }
form input {float: left; width: 200px; font-size: 8pt; padding: 5px; margin: 0px 0px 10px 0px; font-family: boostssi;}
form textarea {float: left; width: 200px; border: 1px #FF9F00 solid; font-size: 8pt; padding: 5px; margin: 0px 0px 10px 0px;}
form input.submitButton {margin: 5px 0px 0px 195px; background-image: url(../images/navBgActive.png); -moz-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0px 2px 3px #bfbfbf; -webkit-box-shadow: 0px 2px 3px #bfbfbf; color: #2c2c2c;}
input.radiobutton, input.checkbox {width: 14px; border: none; margin: 5px 5px 10px 0px;}
form span {float: left; margin: 5px 15px 0px 0px; color:#000000; font-family: boostssi;}
#contact_interesses {float: left; width: 300px;}
form ul {margin: 0px 0px 20px 130px;}
form ul li {clear: left;}
form div {float: left; width: 250px;}
div.wShop {clear: left; width: 262px;}



/* thema */   
	   .theme { /*background-color: yellow; *//*width: 385px; height: 572px;*/ padding-top: 20px; float: left; background-repeat: no-repeat; border-radius: 10px; background-size:cover;  width: 25vw; height: 30vw; margin: 0vw 0vw 3vw 3vw;}
	   /*.theme:hover {background-color: white;} */
	   
	   .theme p {font-family:boostssi; color: #86446a; color: white; text-shadow: 2px 2px 5px #000; margin: 0px 0px 0px 50px; font-size: 3.5rem; line-height: 1em; }
	   .theme p em {font-family: boostssi; font-size: 1.2rem!important; margin-right: 10px;  line-height: 1rem;}
	   
	   .theme div {position: absolute; padding: 230px 0px 0px 50px; }
	   .theme ul {background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; padding-top: 10px; }
	   
	   .theme ul li { font-family: boostssi; font-size: 14pt; margin-bottom: 2px; padding: 2px 10px; width: 280px;  padding: 5px 10px; color: #000;}
	   .theme ul li a {color: #000;}
	   .theme ul li:hover {background-color: #defe47; }
	   .theme ul li:last-child {margin-top: 20px;}
	   .theme ul li:before {content: "-)"; width: 20px; height: 20px; margin-right: 10px; color: #86446a;}
	   .theme1:hover {background-image: url(../img/dsgn/theme1.jpg);}
	   .theme2:hover {background-image: url(../img/dsgn/theme2.jpg);}
	   .theme3:hover {background-image: url(../img/dsgn/theme3.jpg);}
	   .theme4:hover {background-image: url(../img/dsgn/theme4.jpg);}
	   .theme5:hover {background-image: url(../img/dsgn/theme5.jpg);}

.sliderDesk {display: block;}
.sliderSp {display: none;}

/* Responsive ------------------------------------------------------------------------------------------------------------------------------------------------ */ 
@media screen and (max-width: 600px) {
  main {width: 92%; padding: 0% 4%; margin-top: 100px;}
/*  .content h2 {transform: scale(1.5);  margin: 10px 0px 20px 120px!important; clear: both; float: left;}
  .content h2 span:before {transform: scale(1.5); margin: 28px 0px -10px -18px;}
  .content h2 span:after {transform: scale(1.5); margin: 15px 0px -10px -10px;}*/
  
 body {} 
  .block {height: 70vw;}
  .block3  {width: 100%; margin: 0px 0px 20px 0px!important; padding: 0; }
  .blockContent  {width: 100%!important;; margin: 0px 0px 20px 0px!important; padding: 0!important; height: auto; }
  .blockContent:after {clear: both;}

  .block3 h3 { font-size: 1.2em;}
  .block3 em {font-size: 1.3em;}

.block3 h3:before {display: none;} 
.block3 h3:after {display: none;}

.block3 em:before {display: none;}
.block3 em:after {display: none;}



  
  .col {width: 100%;}
 .opening{text-indent: -500px;}
 .phone {font-size: 10pt;}
 
 nav {background-color: none; /*width: 50px; right: 0px;*/}
 
 #logo {width: 35%; margin: 0px 0px 0px 0px; left: 5px; top: 34px; float: left;}
 
 #navFb {display: none;}
  #footerLinks {display: none;}
  footer a {display: none;}

.topNav {float: none; width: 50px; margin-top: 50px; background-color: white;}  
.topNav a {display: none;}

  .topNav a:not(:first-child), .dropdown .dropbtn {display: none;}
  .topNav a.icon {float: right; display: block;}

.topNav a, .dropdown .dropbtn {padding: 15px 15px;}


  .topNav.responsive {position: relative; width: 100%; left: 0px;}
  .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;}
  
.icon {background-color: reblack; color: white; right: 0px; position: absolute; margin-top: -50px; z-index:999999!important;}
 
 
 .sliderDesk {display: none;}
.sliderSp {display: block;}

footer {font-size: 8pt;}
 
  
}

@media screen and (min-width: 1300px) {

/*
.block3 h3 {transform: scale(1.5); right: 5%; bottom: 2%;}
.block3 em {transform: scale(1.5); left: 10%!important; top: 2%;margin-left: 0px;}	
*/	
	
  #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;}
}