/* =================================== */
/* base stuff                          */
/* =================================== */

BODY { 
	margin:0; 
	padding:0; 
	background:#66CFEC;
	font-family: apercuregular, helvetica, arial, sans-serif;
	font-size:100%;
}

A { text-decoration:none; }

H1, H2, H3, H4, H5 { font-family:apercubold; }

P.lead { font-family:apercubold; }

/* =================================== */
/* the main map                        */
/* =================================== */

#mapContainer	{ position:absolute; z-index:0; left:0; top:0; visibility:hidden; overflow:hidden; }
#mapImage		{ position:absolute; z-index:0; left:0; top:0; }
#tracer			{ position:absolute; z-index:100; visibility:hidden; background:#fff; padding:10px; width:200px; }

/* =================================== */
/* the animated objects                */
/* =================================== */

/* default character */
.character {
	position:absolute;
	z-index:8;
	background-repeat: no-repeat;
	background-position:0 0;
	cursor:pointer;
}

/* on mouseover, brighten the thing */
.character:hover {
	-webkit-filter: brightness(115%); filter: brightness(115%);
}

/* waterval */
.waterfall {
	position:absolute;
	z-index:4;
	background-repeat: no-repeat;
	background-position:0 0;
}

/* wolkjes */
.cloud-1 {
	position:absolute;
	z-index:20;
	opacity:0.9;
    -webkit-animation-name: cloud-1;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out; /* linear | ease | ease-in-out */
}

.cloud-2 {
	position:absolute;
	z-index:20;
	opacity:0.9;
    -webkit-animation-name: cloud-2;
    -webkit-animation-duration: 9s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out; /* linear | ease | ease-in-out */
}

.cloud-3 {
	position:absolute;
	z-index:20;
	opacity:0.9;
    -webkit-animation-name: cloud-3;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out; /* linear | ease | ease-in-out */
}

.cloud-dly-0	{ -webkit-animation-delay: 0s; }
.cloud-dly-1	{ -webkit-animation-delay: 0.7s; }
.cloud-dly-2	{ -webkit-animation-delay: 1.2s; }
.cloud-dly-3	{ -webkit-animation-delay: 1.7s; }

/* animation code for wolkjes */
@-webkit-keyframes cloud-1 {
	0%   { -webkit-transform:translate(  0px, 0px); }
	50%  { -webkit-transform:translate(-30px, 0px); }
	100% { -webkit-transform:translate(  0px, 0px); }
}

@-webkit-keyframes cloud-2 {
	0%   { -webkit-transform:translate(  0px, 0px); }
	50%  { -webkit-transform:translate( 30px, 0px); }
	100% { -webkit-transform:translate(  0px, 0px); }
}

@-webkit-keyframes cloud-3 {
	0%   { -webkit-transform:translate(  0px, 0px); }
	50%  { -webkit-transform:translate( -40px, 0px); }
	100% { -webkit-transform:translate(  0px, 0px); }
}
		
.pier-basis {
	position:absolute;
	z-index:7;
}

.vliegtuig {
	-webkit-animation-name: vliegtuig;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out; /* linear | ease | ease-in-out */
}			

/* animation code for vliegtuig */
@-webkit-keyframes vliegtuig {
	0%   { -webkit-transform:translate( 0px, 0px); }
	50%  { -webkit-transform:translate( 0px, -30px); }
	100% { -webkit-transform:translate( 0px, 0px); }
}
			
/* =================================== */
/* billboards                          */
/* =================================== */

/*
	How to affect other elements when a div is hovered
	--------------------------------------------------
	Source: https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered

	If the cube is directly inside the container:
	#container:hover > #cube { background-color: yellow; }
	
	If cube is next to (after containers closing tag) the container:
	#container:hover + #cube { background-color: yellow; }
	
	If the cube is somewhere inside the container:
	#container:hover #cube { background-color: yellow; }
	
	If the cube is a sibling of the container:
	#container:hover ~ #cube { background-color: yellow; }
*/


/* the image of the billboard that will be pushed up */
.billboard-image {
	position:absolute;
	z-index:6;
	background-repeat: no-repeat;
	background-position:0 0;
}

/* the hover-zone that will trigger the push up on mouseover */
.billboard-hover {
	position:absolute;
	z-index:7;
	cursor:pointer;
	/*background-color:rgba(255, 255, 255, 0.5);*/
}

/* ugly code: the individual id's of the images */
#bord-gianni-image, #bord-malika-image, #bord-niels-image, #bord-lola-image, #bord-ladekast-image {
	transition: margin .3s cubic-bezier(0.4, 0, 0, 1.6);
	-moz-transition: margin .3s cubic-bezier(0.4, 0, 0, 1.6);
	-webkit-transition: margin .3s cubic-bezier(0.4, 0, 0, 1.6);
}

/* ugly code: the individual hovers to images.. hence the + combinator */
#bord-gianni-hover:hover + #bord-gianni-image     { margin-top:-15px; -webkit-filter: brightness(115%); filter: brightness(115%); }
#bord-malika-hover:hover + #bord-malika-image     { margin-top:-15px; -webkit-filter: brightness(115%); filter: brightness(115%); }
#bord-niels-hover:hover + #bord-niels-image       { margin-top:-15px; -webkit-filter: brightness(115%); filter: brightness(115%); }
#bord-lola-hover:hover + #bord-lola-image         { margin-top:-15px; -webkit-filter: brightness(115%); filter: brightness(115%); }
#bord-ladekast-hover:hover + #bord-ladekast-image { margin-top:-15px; -webkit-filter: brightness(115%); filter: brightness(115%); }

/* =================================== */
/* buttons                             */
/* =================================== */

DIV.popupButton {
	position:absolute;
	z-index:50;
	/*background:#ff0;*/
	opacity:0;
	visibility:hidden;
}

IMG.popupButton {
	width:85%;
	height:85%;
	z-index:1;

	/* this vertically aligns the image within the DIV */
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;

	/* this if for animating the width/height on mouseover*/
	transition: all .12s ease-in-out;
	-moz-transition: all .12s ease-in-out;
	-webkit-transition: all .12s ease-in-out;
}

/* DIV.popupButton A { border:2px solid #f00; } */

/* when user does mouseover, scale the image from 80% to 100% */
DIV.popupButton A:hover > IMG.popupButton {
	width:100%;
	height:100%; 
}

/* the text label underneath the button */
DIV.popupButton-text {
	background:#fff;
	width:100%;
	padding:2px 0;
	text-align:center;
	opacity:0;
	z-index:2;
	visibility:hidden;

	/* round the edges */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	/* add a black dropshadow at position [0,2] with a blur of 8px and an opacity of 40%. see https://www.w3schools.com/css/css3_shadows.asp */
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
	
	/* this vertically aligns the image within the DIV */
	margin: 0 auto;
	position: absolute;
	left: 0; bottom: -30%; right: 0; /* -15%*/

	/* this if for animating the width/height on mouseover*/
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
}

/* when the user hovers the A inside the main DIV, treat another DIV that's outside the A element */
/* hence the + operator! found this trick on https://css-tricks.com/forums/topic/hover-state-affect-a-non-child-item/ */ 
DIV.popupButton A:hover + DIV.popupButton-text {
	bottom: -40%; /* -25%*/
	opacity:1;
	/*z-index:0;*/
	visibility:visible;
}

/* =================================== */
/* popup overlay BG                    */
/* =================================== */

/* this overlay is behind the popup window and makes the background dimmed */
#overlayBG {
	position:absolute;
	left:0; top:0;
	z-index:70;
	width:100%;
	height:100%;
	background:#66CFEC;
	opacity:0.4;
	visibility:hidden;
}

/* =================================== */
/* popup info window                   */
/* =================================== */

/* the popup window main div */
#popupInfo {
	position:absolute;
	z-index:80;
	left:0; top:0; 
	background:#fff; 
	width:512px;
	visibility:hidden; 

	/* round the edges */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	/* add a black dropshadow at position [0,2] with a blur of 8px and an opacity of 40%. see https://www.w3schools.com/css/css3_shadows.asp */
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);	
}

DIV.popupContent 			{ padding:20px; }

A.closeButton				{ position:absolute; right:10px; top:10px; }
IMG.closeButton				{ width:20px; height:20px; }

#popupTitle1, #vimeoTheme, .genericTitle	{ margin:0 0 15px 0; padding:0; }
#popupTitle2								{ margin:10px 0 0 0; padding:0; }
#popupTitle3								{ margin: 0 0 5px 0; padding:0; }

#popupVideoBox				{ width:44%; float:left;  /*background:#ece;*/ }
#popupLessonsBox			{ width:52%; float:right; /*background:#cce;*/ }

DIV.lessonsContent			{ }

/* fix floating elements inside this DIV */
DIV.mainContent::after {
    content:"";
    display:block;
    clear:both;
}

#thumbVideo 					{ width:100%; height:auto; }
#titleVideo, #vimeoTitle 		{ font-family:apercubold; margin:10px 0 2px 0; padding:0; }
#captionVideo, #vimeoCaption 	{ }

DIV.lessonListItem 		{ margin:8px 0 0 0; }

A.lessonListItem, #titleVideoA				{ color:#000; }
A.lessonListItem:hover, #titleVideoA:hover	{ color:#00a0dc; }

SPAN.lessonCategory		{ 
	float:right; 
	background:#aaa; 
	color:#fff;
	padding:4px 8px;
	font-size:70%;
	text-transform: uppercase;

	/* round the edges */
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

DIV.readmore { 
	margin-top:15px; 
}

A.readmore { 
	color:#fff; 
	background:#000;
	display:inline-block; 
	padding:8px 16px;
	font-family:apercubold;
	font-size:120%;
	
	/* round the edges */
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

A.readmore IMG {
	height:12px; 
}

/* =================================== */
/* VIMEO playbutton                    */
/* =================================== */

DIV.vimeoContainer {
}

.vimeoContainer A {
	position:relative;
	display:block;
	line-height:100%;
	font-size:0px;
		
	color:#222 !important;
	background:transparent !important;
	text-decoration:none !important;
	margin:0 !important;
	padding:0 !important;
}

/* centered playbutton */

DIV.playButton {	
	width:48px; height:48px;
	margin: -24px 0 0 -24px;

	position: absolute;
	top: 50%;
	left: 50%;
	opacity:0.75;

   transition: all .1s ease-in-out;
   -moz-transition: all .1s ease-in-out;
   -webkit-transition: all .1s ease-in-out;

}

IMG.playButton { width:100%; height:100%; }

.vimeoContainer A:hover > DIV.playButton	{ 
	width:64px; height:64px;
	margin: -32px 0 0 -32px;
	opacity:1;
}

/* =================================== */
/* popup vimeo window                  */
/* =================================== */

/* the popup window main div */
#popupVimeo {
	position:absolute;
	z-index:80;
	left:0; top:0; 
	background:#fff; 
	width:512px;
	visibility:hidden; 

	/* round the edges */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	/* add a black dropshadow at position [0,2] with a blur of 8px and an opacity of 40%. see https://www.w3schools.com/css/css3_shadows.asp */
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);	
}

/* =================================== */
/* popup about window                  */
/* =================================== */

/* the popup window main div */
#popupAbout, #popupIntro {
	position:absolute;
	z-index:80;
	left:0; top:0; 
	background:#fff; 
	width:512px;
	visibility:hidden; 

	/* round the edges */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	/* add a black dropshadow at position [0,2] with a blur of 8px and an opacity of 40%. see https://www.w3schools.com/css/css3_shadows.asp */
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);	
}

#imageIntro { float:right; margin:10px 10px; width:25%; min-width:125px; }
#logoAbout	{ float:right; margin:10px 10px; width:15%; min-width:100px; }

.aboutContent A 		{ color:#00a0dc; }
.aboutContent A:hover 	{ color:#0080bc; }

/* =================================== */
/* other stuff                         */
/* =================================== */

#popupBalloon {
	position:absolute;
	z-index:80;
	left:0; top:0; 
	background:#fff; 
	width:200px;
	visibility:hidden; 

	/* round the edges */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	/* add a black dropshadow at position [0,2] with a blur of 8px and an opacity of 40%. see https://www.w3schools.com/css/css3_shadows.asp */
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);	

    -webkit-animation-name: balloon;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out; /* linear | ease | ease-in-out */
}

@-webkit-keyframes balloon {
	0%   { -webkit-transform:translate(  0px, 0px); }
	50%  { -webkit-transform:translate(  0px, -5px); }
	100% { -webkit-transform:translate(  0px, 0px); }
}

#balloonText 	{ padding:10px; text-align:center; }
#balloonText A	{ color:#00a0dc; font-weight:bold; }

#balloonPoint	{ position:absolute; margin: 0 0 0 -5px; left:50%; bottom:-10px; width:10px; height:10px; }

/* =================================== */
/* other stuff                         */
/* =================================== */

/* the COH header/footer logo */

#logoContainer { 
	position:absolute; 
	z-index:70; 
	bottom:10px; 
	left:10px; 
	width:100px; 
	height:100px;
}

#logoImage {
	width:80px;
	height:80px;
	margin:10px 0px 0px 10px;

	transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-webkit-transition: all .1s ease-in-out;
}

#logoContainer A:hover > #logoImage {
	margin:4px 0px 0px 4px;
	width:92px;
	height:92px; 
}  

/* misc stuff */

#numprojects	{ font-weight:bold; }
.nobr			{ white-space:nowrap; }

/* volume controls */

#volumeControl { 
	position:absolute; 
	z-index:70; 
	bottom:20px; 
	right:20px; 
	width:32px; 
	height:32px;
	overflow:hidden;
}

#volumeImage	{ position:absolute; top:-32px; left:0; width:32px; height:64px; clip: rect(32px,32px,64px,0px); }

/* =================================== */
/* previous / next buttons             */
/* =================================== */

DIV.prevnext {
	position:absolute; 
	z-index:80;
	width:40px; height:40px;
	visibility:hidden;
	/*background:#fff;*/
}

IMG.prevnext {
	width:20px; height:20px;
	margin:10px 0px 0px 10px;

	transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-webkit-transition: all .1s ease-in-out;
}

A.prevnext {
	width:100%; height:100%;
	display:block;
}
	
A.prevnext:hover > IMG.prevnext {
	width:30px; height:30px;
	margin:5px 0px 0px 5px;
}