/*
 Website Name:   Compagnie Doedel
 Website URI:    http://www.compagniedoedel.nl/
 Description:  Compagnie Doedel
 Author:       spirito
 Version:      3
 Tags:         
 Text Domain:  CompDoe
*/

/* -----Global----- */

/*html {
	height: 100%;
}*/
body {
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #000;
	margin: 0px;
	padding: 0px;
	height: 100%;
 }
 #page {
	background: url(images/achtergrond.jpg) center top no-repeat;
	position: relative;
	margin: auto;
	max-width: 1000px;
	height: 900px;
	max-height: 100%;
}
@font-face {
	font-family: sitespec;
	src: url(morrisromanblack.otf);
}
* {
box-sizing: border-box;
}
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* -----Header----- */

#header {
	width: 100%;
	height: 22.2%;
	background: transparent;
}
#naamkl {
	float: left;
	width: 47%;
	padding: 0 3.5%;
}
#cdlogo {
	float: left;
	position: relative;
	width: 18%;
	padding-top: 3%;
	z-index: 1;
}
#nav {
	float: left;
	width: 16%;
	background-color: rgba(0,0,0,0.5);
	box-shadow: 0px 0px 15px black;
	z-index: 1;
	transform: translate(30%, 50%);
}
#nav a img {
	display: inline;
	float: left;
	max-width: 25%;
	margin: 12%;
	transition: transform 0.5s;
}
#nav a img:hover {
	padding: 0;
	transform: scale(1.5,1.5);
}
#fblogo {
	position: absolute;
	right: 2%;
	width: 45%;
}
#fblogo a {
	position: absolute;
	top: 27%;
	right: 1%;
	width: 8%;
	height: 25.7%;
	padding: 0px;
}
#fblogo a:visited {
	text-decoration: none;
}
#fblogo a:hover {
	position: absolute;
	transform:
	scale(2,2);
	top: 30%;
	right: 0%;
	padding: 0;
	z-index: 1;
}

/* -----Midden----- */

#midden {
	position: relative;
	width: 100%;
	height: 77.8%;
	font-family: sitespec;
	font-size: 20px;
	color: #CD853F;
}

/* -----Menu----- */

#menusleutel {
	position: absolute;
	top: 0;
	}
#menusleutel ul {
	position: absolute;
	top: 3%;
	left: 22%;
	text-align: left;
	width: 150px;
	padding: 0;
	line-height: 1.55;
}
#menusleutel ul > li {
	float: none;
	display: block;
}
.shift1 { padding-left: 17%;}
.shift2 { padding-left: 0;}
.shift3 { padding-left: 13%;}
.shift4 { padding-left: 20%;}
.shift5 { padding-left: 30%;}
.shift6 { padding-left: 60%;}

#menusleutel a:hover {
	background-color: #F5DEB3;
	border-radius: 25px;
	padding: 0 5px;
}
#centraal {
	position: absolute;
	top: 5.5%;
	right: 4%;
	width: 50%;
	padding : 0 1%;
	background: rgba(0,0,0,0.5);
	color: #FF8C2D;
	box-shadow: 10px 10px 25px black, -10px -10px 25px black;
	text-shadow: 2px 2px 0px black;
}
#centraal ul {
	padding-left: 0;
}
#centraal p {
	font-size: 22px;
	line-height: 1;
}
#centraal a {
	color: #F5DEB3;
	text-decoration: none;
	padding: 5px;
}
#centraal a:hover  {
	color: black;
	background-color: #CD853F;
	padding: 5px;
	text-decoration: none;
}
.agenda {
	margin-left: 26%;
	margin-right: 24%;
}
#links {
	position: absolute;
	bottom: 12%;
	left: 15%;
	width: 400px;
	height: auto;
	box-shadow: 10px 10px 25px #FF8C2D, -10px -10px 25px #FF8C2D;
	}
#rechts {
	position: absolute;
	bottom: 0;
	right: 0;
	width:
	400px;
	height: auto;
}
#onder {
	position: absolute;
	bottom: 0;
	width: 100%;
	}
#links img, #rechts img, #onder img, #cdlogo2 img {
	display: block;
	}
#naamkl img, #cdlogo img, #fblogo img, #fblogo a, #fblogo a:hover,
	#menusleutel img, #links img, #rechts img, #onder img, #cdlogo2 img  {
	max-width: 100%;
}
#frameL {
	background: url(images/frame-L.png) repeat-y;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -25px;
	width: 49px;
	height: 100%;
}
#frameR {
	background: url(images/frame-R.png) repeat-y;
	position: absolute;
	top: 0;
	right: 0;
	margin-right: -25px;
	width: 49px;
	height: 100%;
}
/*#naamkl, #cdlogo, #nav, #fblogo, #fblogo a, #centraal,
#menusleutel, #menusleutel ul, #links, #rechts, #onder,
#frameL, #frameR, #cdlogo2, .agenda, #prodmidden {
	border: 1px solid green;
}*/

/* -----Navigatie----- */

a {
	color: #F5DEB3;
	text-decoration: none;
}
a:visited {
	background-color: transparent;
	text-decoration: none;
}
a:hover  {
	color: black;
	text-decoration: none;
}
ul {
	text-align: center;
	list-style-type: none;
}
p, h1, h2 {
	text-align: center;
	}
p {
	font-size: 20px;
	line-height: 30px;
}
hr {
	border: 1px solid #800000;
	width: 200px;
}
img {
	margin: 0;
	border-style: none;
}

/* -----mobiel & kleiner----- */

@media only screen and (max-width:1000px) {
#centraal {top: 3%;}
#links {left: 5.2%; bottom: 8%;}
#rechts {width: 40%;}
#frameL {background: url(images/frame-L-h.png) repeat-y; margin-left: 0; width: 24px;}
#frameR {background: url(images/frame-R-h.png) repeat-y; margin-right: 0; width: 24px;}
}
@media only screen and (max-width:768px) {
/*#naamkl, #cdlogo, #nav, #fblogo, #fblogo a, #centraal, #menusleutel,
#menusleutel ul, #links, #rechts, #onder, #frameL, #frameR, #cdlogo2,
 .agenda, #prodmidden {
	border: 1px solid blue;}*/
#menusleutel {width: 40%;}
#menusleutel ul {font-size: 2.5vw;}
#centraal p {font-size: 3vw;}
#links {width: 345px; bottom: 12%; left: 5%;}
#rechts {width: 45%;}
}
@media only screen and (max-width:600px) {
/*#naamkl, #cdlogo, #nav, #fblogo, #fblogo a, #centraal, #menusleutel,
#menusleutel ul, #links, #rechts, #onder, #frameL, #frameR, #cdlogo2,
 .agenda, #prodmidden {
	border: 1px solid red;}*/
#naamkl {width: 80%; transform: translate(0, 20%); z-index: 1}
#cdlogo {width: 25%; transform: translate(230%, -5%);}
#nav {width: 25%; transform: translate(10%, -320%);}
#fblogo {width: 80%;}
#fblogo img {float: right;}
#menusleutel {top: 2%; width: 50%;}
#menusleutel ul {font-size: 3.2vw;}
#centraal {top: 22%;}
#centraal p {font-size: 3.3vw;}
#links {width: 45%; bottom: 12%;}
}
@media only screen and (max-width:500px) {
/*#naamkl, #cdlogo, #nav, #fblogo, #fblogo a, #centraal, #menusleutel,
#menusleutel ul, #links, #rechts, #onder, #frameL, #frameR, #cdlogo2,
 .agenda, #prodmidden {
	border: 1px solid green;}*/
#cdlogo {float: right; transform: translate(-30%, 50%);}
#nav {transform: translate(115%, -320%);}
#menusleutel {top: 0; width: 300px;}
#menusleutel ul {font-size: 20px;}
#centraal {width: 80%; top: 50%; right: 10%; padding: 3% 1%; z-index: 1;}
#centraal p {font-size: 18px; margin: 7px;}
.agenda {margin-left: 6%; margin-right: 7%;}
#links {bottom: 2%;}
}
@media only screen and (max-width:350px) {
/*#naamkl, #cdlogo, #nav, #fblogo, #fblogo a, #centraal, #menusleutel,
#menusleutel ul, #links, #rechts, #onder, #frameL, #frameR, #cdlogo2,
 .agenda, #prodmidden {
	border: 1px solid red;}*/
#cdlogo {transform: translate(-180%, 0);}
#menusleutel {top: 0; width: 100%;}
}

/* -----producties----- */

#prodpage {
	background: none;
	position: relative;
	margin: auto;
	max-width: 1000px;
	height: auto;
}
#prodpage img {
	display: block;
	border: 2px solid #800000;
	width:100%;
	height:100%;
}
#prodboven {
	width: 100%;
	height: 22.2%;
	/*background: transparent;*/
}
#prodboven, #prodmidden, #prodonder:after {
	content: "";
	display: table;
	clear: both;
}
#prodmidden {
	width: 100%;
}
#vuurring, #vlammenlijst {
	position: absolute;
	left: 15%;
	width: 70%;
	padding: 35%;
	z-index: -1;
}
#vuurring {
	background: url(images/vuurring.png) no-repeat;
	background-size: 100%;
	top: 5%;
	padding: 35%;
}
#vlammenlijst {
	background: url(images/vlammenlijst.png) no-repeat;
	background-size: 100%;
	top: 4%;
	padding: 42% 35%;
}
#prodvuur {
	position: absolute;
	top: 35%;
	left: 28.57%;
	width: 42.86%;
	height: 42.86%;
	padding: 4% 3%;
	color: #FF8C2D;
}
#prodvlam {
	position: absolute;
	top: 41%;
	left: 33.33%;
	width: 33.33%;
	height: 41.5%;
	padding: 0 2%;
	color: #FF8C2D;
	overflow: auto;
}
#prodvuur h2, #prodvlam h2 {
	font-family: sitespec;
	margin: 0;
}
#prodvuur p, #prodvlam p {
	font-size: 15px;
	line-height: 20px;
	margin-top: 4%;
	text-shadow: 2px 2px 5px #000;
}
#prodonder {
	position: relative;
	width: 100%;
}
.tweede {
	display: none;
}
.doos1, .doos2, .doos3, .doos4, .doos5, .doos6, .alt1, .alt2, .alt3, .alt4 {
	float: left;
}
.doosboven, .doosonder {
	position: absolute;
}
.doosboven {
	top: 2%;
	Left: 33.33%;
	width: 33.33%;
}
.doos1, .doos2 {
	width: 50%;
	padding: 2% 4%;
}
.doos3, .doos4, .doos5, .doos6 {
	width: 33.33%;
	margin: 3% 0;
	padding: 2%;
}
video {
	display: block;
	max-width:100%;
	height: auto;
}
.kader {
	border: 2px solid #800000;
}
.linkbox, .linkbox1 {
	position: absolute;
	text-align: center;
	width: 60px;
	background-color :black;
	border: 2px solid #800000;
}
.linkbox {
	line-height: 55px;
	height: 60px;
	border-radius: 100%;
}
.linkbox1 {
	position: absolute;
	top: 80%;
	left: 46%;
	line-height: 37px;
	height: 40px;
}
.linkbox a:hover, .linkbox1 a:hover {
	color: #FF8C2D;
	background-color: #000;
}	
/*.doos1, .doos2, .doos3, .doos4, .doos5, .doos6,
alt2, .alt3, .alt4,  .doosboven, .doosonder, #vuurring, #vlammenlijst, #prodvuur, .prodvlam {
	border: 1px solid green;
}*/
@media only screen and (max-width:1000px) {
#prodvuur p, #prodvlam p {font-size: 1.6vw; line-height: 1.2;}
#prodvuur h2, #prodvlam h2 {font-size: 2.3vw; line-height: 1;}
}
@media only screen and (max-width:768px) {
#prodmidden {visibility: hidden;}
.eerste {display: none;}
.tweede {display: initial;}
.doos2 {display: none;}
#vuurring {top: 3%; left: 5%; width: 90%; padding: 45%;}
#vlammenlijst {left: 5%; width: 90%; padding: 54% 45%;}
#prodvlam {left: 29%; width: 42.5%;}
#prodvuur p, #prodvlam p {font-size: 2vw;}
#prodvuur h2, #prodvlam h2 {font-size: 3vw;}
.doosboven {top: 1%; left: 25%; width: 50%;}
.doos1, .alt2 {width: 55%; margin: 2% 22.5%; padding: 0;}
 .alt1, .alt2, .alt3, .alt4, .doos3, .doos4, .doos5, .doos6 {padding: 0;}
 .alt1, .alt3, .alt4, .doos5, .doos6 {width: 40%;}
.doos3, .doos4  {width: 33.33%;}
.alt2 {margin-top: 16%;}
.linkbox {left: 46%; width: 8.1%; height: auto; font-size: 2vw; line-height: 0; padding: 3.77% 0;}
.linkbox1 {left: 46%; width: 8.1%; height: auto; font-size: 2.3vw; line-height: 0; padding: 2.5% 0;}
}
@media only screen and (max-width:500px) {
#vuurring {top: 5%; left: 0; width: 100%; padding: 50%;}
#prodvuur {top: 36%; left: 27%; width: 46%; height: 46%; padding: 2%;}
#vlammenlijst {left: 5%; width: 90%; padding: 54% 45%;}
#prodvlam {left: 29%; width: 43%; padding: 6% 2%;}
#prodvuur p, #prodvlam p {font-size: 2.5vw;}
#prodvuur h2, #prodvlam h2 {font-size: 3.5vw;}
.doosboven {left: 15%; width: 70%;}
.linkbox1 {left: 44%; width: 12%; font-size: 2.8vw; padding: 3.5% 0;}
}
/* -----footer----- */

#footer {
	color: #F5DEB3;
	font-size: 10px;
	float: left;
	/*height: 142px;*/
	width: 100%;
	border-top: 2px solid #8B4513;
}
#footer ul {
	padding-left: 0px;
	margin-top: 12px;
}
#footer ul > li {
	display: inline-block;
}
#footer a {
	color: #F5DEB3;
	text-decoration: underline;
}
#footer a:hover  {
	color: red;
	background: transparent;
	padding: 0px;
	text-decoration: none;
}

/*-------------lightbox--------------*/

.modal {
display: none;
position: fixed;
z-index: 3;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
}
.modal-content {
position: relative;
background-color: white;
margin: auto;
/*display: block;*/
padding: 0;
max-width: 70%;
max-height: 680px;
box-shadow: 5px 5px 10px #F5DEB3, -5px -5px 10px #F5DEB3;
animation: zoom 1s;
-webkit-animation: zoom 1s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)} to {transform:scale(1)}
}
.close {
color: #F5DEB3;
position: absolute;
top: 10px;
right: 10%;
font-size: 25px;
transition: 0.4s ease;
border-radius: 100px;
font-weight: bold;
text-align: center;
width: 30px;
}
.close:hover, .close:focus {
background-color: #F5DEB3;
color: black;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.mySlides img {
width:100%;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 6px 12px;
margin-top: -50px;
color: #F5DEB3;
font-weight: bold;
font-size: 20px;
transition: 0.4s ease;
border-radius: 0 50px 50px 0;
user-select: none;
-webkit-user-select: none;
}
.next {
right: 0;
border-radius: 50px 0 0 50px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.6);
/*background: #F5DEB3;*/
color: #F5DEB3;
padding: 6px 12px;
}
.nr {
color: #F5DEB3;
font-size:
12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* Scroll Bar Master Styling Starts Here */

.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

/*-------------verticaal--------------*/

.vscrollerbase {
	width: 10px;
	/*height: 300px  !important;*/
	background-color: #CD853F;
	border-left : 1px solid #800000;
}
.vscrollerbasebeg {
width: 10px;
height: 10px !important;
background : #CD853F url(images/pijl-up.png);
}
.vscrollerbasemid {
background-color: #CD853F;
}
.vscrollerbaseend {
	width: 10px;
	height: 10px;
	background : #CD853F url(images/pijl-down.png);
}
.vscrollerbar {
	width: 10px;
	background-color: #800000;
	padding: 10px;
}

/*-------------horizontaal--------------*/

.hscrollerbase {
	height: 10px;
	/*width: 100px  !important!;*/
	background-color: #CD853F;
	border-left : 1px solid #800000;
}
.hscrollerbasebeg {
width: 10px;
height: 10px !important;
background : #CD853F url(images/pijl-left.png);
}
.hscrollerbasemid {
background-color: #CD853F;
}
.hscrollerbaseend {
	width: 10px;
	height: 10px;
	background : #CD853F url(images/pijl-right.png);
}
.hscrollerbar {
	height: 10px;
	background-color: #800000;
	padding: 10px;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: #800000;
}