/*********
Author: Kaj-Ivar van der Wijst
In opdracht van: A-Eskwadraat

	Created by Kaj-Ivar van der Wijst
	http://www.vanderwijst.com

	The CSS, HTML and design is released under GPL.

*/



/********** External files **********/
/*@import 'reset.css';
@import 'grid.less'; */

@import "hexagon.less";


/********** LESS Variables **********/

/* Colours */
@white: #FFFFFF;
@lightgray: #999;
@darkgray: #3A3A3A;
@verydarkgray: #222;
@darkred: #9B283D;
@darkblue: #28839C;
@orange: #FFA500;
@uugeel: #ffcd00;

/* From logo: */
@logoblauw: #5A8BCB;
@logopaars: #744F7A;
@logooranje: #F57900;
@logogeel: #E8D000;
@logogroen: #73D215; // Lichtgroen
@logorood: #CC0000;

/* Fonts */

.sansserif (@size: 1em, @slant: normal, @weight: normal, @caps: normal) {
	font: @slant @weight @caps @size 'Open Sans', 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
}
.serif (@size: 1em, @slant: normal, @weight: normal, @caps: normal) {
	font: @slant @weight @caps @size Merriweather, "Bitstream Charter", "Century Schoolbook L", "Liberation Serif", Times, serif;
}

/* Other mixins */
.rounded (@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
.shadow (@left: 1px, @top: 1px, @blur: 2px, @color: #888) {
	-moz-box-shadow: @left @top @blur @color;
	-webkit-box-shadow: @left @top @blur @color;
	box-shadow: @left @top @blur @color;
}
.svgbackground(@png, @svg, @repeat: no-repeat, @left: 0, @top: center, @color: transparent) {
	background: @repeat @left @top @color;
	background-image: url(@png);
	background-image: none, url(@svg);
}
.rotate(@degrees: 90deg) {
	-moz-transform: rotate(@degrees);
	-webkit-transform: rotate(@degrees);
	-o-transform: rotate(@degrees);
	-ms-transform: rotate(@degrees);
	transform: rotate(@degrees);
}
.translate3d(@x: 0, @y: 0) {
	-webkit-transform: translate3d(@x, @y, 0);
	-moz-transform: translate3d(@x, @y, 0);
	-o-transform: translate3d(@x, @y, 0);
	transform: translate3d(@x, @y, 0);
}
.transition(@duration: 1s, @properties: all, @effect: ease-in-out) {
	transition: @properties @duration @effect;
	-webkit-transition: @properties @duration @effect;
	-moz-transition: @properties @duration @effect;
	-o-transition: @properties @duration @effect;
}

.clear { clear: both; }



/********** Layout **********/

@baseline: 24px;	/* Line-height of a standard 1em text line */

body, html {
	position: relative;
}

@menupadding: 25px;
@menuheight: @menupadding * 2 + 1.1 * @baseline;

.section {
	position: relative;
	z-index: 10;
}

.section.first {
	margin-top: @menuheight;
}

.section.seperator {
    .container {
        border-top: 8px solid #ccc;
    }
}

.anchor {
  display: block;
  height: 50px; /*same height as header*/
  margin-top: -50px; /*same height as header*/
  visibility: hidden;
}




/********** Overlay **********/
body::after {
  /* dark overlay layer - visible when we fire .cd-quick-view */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(71, 55, 78, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
}
@media only screen and (min-width: 1024px) {
  body.overlay-layer::after {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s 0s, visibility 0s 0s;
  }
}
.cd-quick-view {
    display: block;
    position: fixed;
    max-width: 900px;
    visibility: hidden;

    /* Force Hardware Acceleration in WebKit */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    will-change: left, top, width;
    z-index: 1;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/********** Menu ***********/

.menu_logo {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #e2e2e2;
    .columns { padding-top: 10px; position: relative; padding-bottom: 10px; }
    .logo {
        max-height: 60px;
        max-width: 85%;
        float: right;
    }
    @hamburgerheight: 35px;
    .hamburger {
        height: @hamburgerheight;
        width: @hamburgerheight;
        top: 50%;
        left: -10px;
        margin-top: -@hamburgerheight/2;
        position: absolute;
        display: block;
        float: left;
        img { height: 100%; border: none; .rotate(270deg); .transition(.5s); }
    }
}

@media (min-width: 550px) and (max-width: 800px) {

    .menu {
        .leftitems {
            float: left;
            width: 30.6667%;
            padding-top: 3px;
        }

        .rightitems {
            float: right;
            width: 30.6667%;
            padding-top: 3px;
        }

        .leftitems .two.columns, .rightitems .two.columns {
            clear: both;
            width: 100%;
            a {
                padding-bottom: 2px;
                padding-top: 2px;
            }
        }

    }
    .slideshow.section.first {
		height: 370px;
		padding-top: 30px;
	}


}

@media (min-width: 800px) and (max-width: 1000px) {
    .menu {
        .container { width: 95%; }
        .columns {
            margin-left: 1%;
            &:first-child { margin-left: 0; }
            &.two {
                width: 16.3333%;
            }
        }
    }
    .slideshow.section.first {
		height: 350px;
		padding-top: 60px;
	}
}



@media(max-width: 550px) {
    .full_menu.hidden {
        .menu { left: -90%; }
        .hamburger img { .rotate(0deg); }
    }
    .slideshow.section.first {
		//height: 175px;
		background-position: 59% 0;
		background-size: 200%;
		padding-top: 30px;
		margin-top: 75px;
		h1 {
			font-size: 2em;
		}
		h2 {
			font-size: 1.5em;
		}
		h3 {
			color: black;
			border-bottom: 4px solid #666;
			padding: 15px 0;
		}

		.card {
			margin-top: 0;
			&:first-child {
				margin-top: 40px;
			}
		}

	}
}

.menu {
	position: fixed;
	top: 0; left: 0;
	width: 80%;
  .transition(.3s);
	height: 100%;
	z-index: 500;
  overflow: auto;
  .row { margin-top: 90px; }

	//.shadow(0px, 0px, 12px, rgba(0,0,0,.9));

	background-color: #000; //@darkgray;

    a.logo {
        display: none;
    }

    a {
        display: block;
        width: 100%;
        padding: 10px 0;
        //text-transform: uppercase;
        text-decoration: none;
        font-size: 1.2em;
        font-weight: 400;
        color: @white;
        &:hover { color: @uugeel; }
        &.twolines { padding-top: 10px; }
    }

		.flag {
			position: absolute;
			right: 20px;
			top: 0;
			z-index: 100;
			img {
				width: 50px;
			}
		}

}

@media (min-width: 550px) {

		.full_menu.scrolled, .subpage .full_menu {
			.menu a.logo img {
					width: 74%;
			}
		}

    .menu_logo { display: none; }
    .menu {

        width: 100%;
        height: @menuheight;
        .transition(0);
        overflow: visible;
        .row { margin-top: 0; }

        //.shadow(0px, 0px, 12px, rgba(0,0,0,.5));

        text-align: center;
        a {
            padding-top: @menupadding;
            padding-bottom: @menupadding;
        }

        a.logo {
        /* MOBILE FIRST FIXME */
            display: block;
            padding: 0;
            img {
                width: 100%;
                //.shadow(0px, 0px, 12px, #000);
            }
            height: @menupadding * 2;
        }

    }

}




/********** Slideshow ***********/

@slideshowtextcolor: #111;

.slideshow {
	// height: 310px;
	padding: 130px 0 0;
	// background: url('http://cdn.utrechtyourway.nl/sites/default/files/imagecache/tut_background_image/backgrounds/_MG_096520101220_jeppevanpruisen.jpg') no-repeat top center;
	// background: url('https://donkerutrecht.nl/site/assets/files/1719/tachtig_036.jpg') no-repeat top center;
	background: url('../img/slideshow/dom4.jpg') no-repeat center right;
	background-position: 100% 0%;
	background-size: 130%;
	color: @slideshowtextcolor;
	text-align: center;
	min-height: 250px;

	h1 {
		text-transform: uppercase;
		margin-bottom: 5px;
		font-weight: 600;
	}

	h2 {
		// text-transform: lowercase;
		.serif(2.5em, italic);
		margin-bottom: 10px;
	}

	h3 {
		font-size: 2em;
		margin-top: 30px;
	}

	.orange {
		color: @uugeel;
		text-shadow: 0 0 10px rgba(0,0,0,.4);
	}

	.card {
		margin-top: 40px;
		margin-bottom: 50px;
		position: relative;
		text-align: left;
		display: block;
		color: #FFF;
		text-decoration: none;

		&.card1 {
			.outer { background: @logoblauw; }
			&:hover .outer {
				background: #000;
				color: @logoblauw;
			}
		}

		&.card2 {
			.outer { background: #7AAB1B; }
			&:hover .outer {
				background: #000;
				color: #7AAB1B;
			}
		}

		.inner {
			background-color: rgba(0, 0, 0, 0.5);
			padding: 15px;
		}

		.outer {
			display: inline-block;
			float: right;
			background: @orange;
			color: #000;
			text-transform: uppercase;
			font-weight: 600;
			font-size: .9em;
			padding: 10px 20px;
			span {
				font-size: .9em;
				position: relative;
				top: -2px;
				padding-left: 5px;
			}
		}

		h5 {
			.serif(2em);
			margin-bottom: 1rem;
		}

	}

}




/********** Summary ***********/

.summary {
	padding: 60px 0;
	text-align: center;
	p { font-size: 1.5em; }
	.normal {
		font-size: 1em;
		text-align: left;
	}
	h2 {
		.sansserif(1.65em);
		color: @lightgray;
	}

	.sponsors {
		margin-top: 20px;
		a { border: none; }
		img { height: 80px; padding: 0 30px; }
	}

	.ticketsonsale {
		.hexagon(150px, #7AAB1B);
		margin-left: auto; margin-right: auto;
		font-size: 1.05em;
		color: #000;
		text-decoration: none;
		h4 {
			padding-top: 0px;
			.serif(1.15em);
			margin: 0;
		}
		.price {
			.sansserif(1.7em);
			margin: 5px 0 -9px;
		}
		p {
			font-size: 1em;
			margin: 0;
		}
		&:hover {
			.hexagon-changecolor(#222);
			.button {
				background: #FFF;
				color: #000;
				border: 1px solid #FFF;
				padding: 0 39px 0 14px;
				&::after { left: 25px; top: -2px; color: #000; }
				&::before { background: #FFF; }
			}
		}
		.buttoncont {
			margin-top: 18px;
			text-align: center;
		}
		.button {
			background: #000;
			color: #7AAB1B;
			margin: 0 auto;
			&::after { color: #7AAB1B; }
		}
	}

}

.section.photos {
	background: @darkgray;
	padding: 50px 0;
	.imgcontainer {
		width: 100%;
		overflow: hidden;
		.images {
			width: 2000px;
		}
		img {
			margin: 5px;
		}
		position: relative;
		display: block;
		color: white;
		.overlay {
			background: linear-gradient(to right, rgba(58,58,58,0) 0%, rgba(58,58,58,0) 65%, rgba(58,58,58,1) 100%); /*Standard*/
			position: absolute;
			top: 0; left: 0;
			width: 100%;
			height: 200px;
			text-align: right;
			font-size: 180px;
			line-height: 180px;
			span { margin: -30px 20px 0 0; display: block; }
		}
		&:hover .overlay {
			color: @logoblauw;
		}
	}
	h2 {
		margin-bottom: 5px;
	}
	h3 {
		.serif(1.5em, italic);
		color: @lightgray;
	}
	color: white;
}

@media(max-width: 550px) {
	.summary p {
		font-size: 1.1em;
	}
}




/********** The Challenge & Festival ***********/

.festival {
	padding: 40px 0 20px;
	min-height: 250px;
	margin-bottom: 40px;
	background: @logoblauw url('../img/festival/tesla.jpg') no-repeat center right;
	background-position: 95% 0%;
	background-size: contain;
	color: #000;
	a.button {
		background: #000;
		color: @logoblauw;
		&::after { color: @logoblauw; }
		&:hover {
			background: @logoblauw;
			color: #000;
			border: 1px solid #000;
			padding: 0 39px 0 14px;
			&::after { left: 25px; top: -2px; }
		}
	}
}

.challenge {
	padding: 40px 0 20px;
	min-height: 250px;
	color: #000;
	background: #7AAB1B url('../img/photos/plancks2.jpg') no-repeat center right;
	background-position: 5% 0%;
	background-size: contain;
	a.button {
		background: #000;
		color: #7AAB1B;
		&::after { color: #7AAB1B; }
		&:hover {
			background: #7AAB1B;
			color: #000;
			border: 1px solid #000;
			padding: 0 39px 0 14px;
			&::after { left: 25px; top: -2px; }
		}
	}
}

.challenge, .festival {
	h4 {
		.serif(2em);
	}
}

@media(max-width: 550px) {
	.challenge, .festival {
		background-image: none;
	}
}


/********** Inspirational quote ***********/

.inspirationalquote {
	padding: 40px 0 60px;
	text-align: center;
	.quote, .author {
		.serif(2.5em, italic);
		color: #3B3B3B;
	}
	.quote { margin-bottom: 20px; }
	.author {
		text-align: right;
		font-size: 2em;
		margin-bottom: 10px;
	}
	.function {
		.serif(1.4em);
		color: #999;
		text-align: right;
	}
}


/********** Ambassadors ***********/

.ambassadors {
	padding: 60px 0;
	img {
		height: 200px;
		margin: 20px auto;
		display: block;
	}
    .columns:nth-child(3n+4) {
        clear: both;
    }
}





/********** Location ***********/

.location {
	padding: 0 0 60px 0;
	h2 {
		margin-bottom: 5px;
	}
	h3 {
		.serif(1.5em, italic);
		color: @lightgray;
	}
  .container {
      padding-top: 60px;
  }
	.mapcontainer {
		width: 100%;
		height: 300px;
		background: url('../img/mapfull.png') no-repeat top center;
		background-size: cover;
	}
}

@media(max-width: 550px) {
	.location .mapcontainer {
		height: 200px;
	}
}



/********** Schedule ***********/

.schedule {
	position: relative;
	z-index: 20;
	.container .cd-schedule {
		width: 70%;
		margin-bottom: 200px;
		.single-event.klein {
			.event-date { display: none; }
		}
	}
	&.ontop {
		z-index: 100000;
	}
}

@media(max-width: 550px) {
	.schedule {
		.container .cd-schedule {
			width: 100%;
			margin-bottom: 10px;
			.events ul {
				padding-left: 0;
			}
			height: auto;
		}
	}
}



/********** Learn more ***********/

.learnmore {
	padding: 0 0 60px 0;
    .container {
        padding-top: 60px;
    }
}




/********** Footer ***********/

.footer {
	padding: 40px 0;
	background: @darkgray;
	color: @white;
}




/********** Copyright notice ***********/

.copyright {
	padding: 40px 0;
	background: @verydarkgray;
	color: @lightgray;
	text-align: center;
}










/*****************************
 **** Subpages: Challenge ****
 *****************************/



.subpage {
    .firstsec {
        padding-top: 150px;
        text-align: center;
    }
		h2 {
				.sansserif(3em, normal, light);
				margin-bottom: 10px;
		}
		h3 {
			.serif(1.5em, italic);
			color: @lightgray;
		}
		overflow-x: hidden;
}

@media(max-width: 550px) {
	.subpage .firstsec {
		padding-top: 100px;
	}
}


.signup {
	background: #7AAB1B;
	padding: 30px 0 15px;
	margin-bottom: 30px;
	.info {
		font-size: 1.1em;
		text-align: center;
	}
	.newsletterform {
		text-align: center;
	}
	h3 {
		.serif(2em, italic);
		text-align: center;
		color: #000;
	}
}

.speakers {
	padding: 40px 0;
	min-height: 200px;
	h3 {
		margin-bottom: 40px;
	}
	.spreker {
		text-align: center;
		margin-left: 2.5%;
		width: 18%;
		float: left;
		margin-bottom: -10px;
		border: none;
		color: #000;
		display: block;
		text-decoration: none;
		&:hover {
			background: #7AAB1B;
		}
		&:first-child {
			margin-left: 0;
		}
		&:nth-child(5) {
			margin-left: 9.5%;
		}
		img {
			max-width: 150px;
			width: 90%;
		}
		.sprekerdesc {
			height: 65px;
		}
		h5 {
			.serif(1.2em, normal, 400);
			margin: 10px 0 5px;
		}
		p {
			margin: 0 0 10px 0;
			.serif(1em, italic);
			color: @darkgray;
		}
	}
	.sprekerrow.first {
		margin-top: 20px;
		padding-top: 40px;
		border-top: solid 5px #E0E0E0;
	}
}

@media (min-width: 550px) {
	.speakers {
		.sprekerrow {
		}
		.spreker:nth-child(n+5) {
			position: relative;
			height: 240px;
			img {
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -75px;
			}
			.sprekerdesc {
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
			}
		}
	}
}



@media (max-width: 550px) {
	.speakers {
		.spreker {
			width: 45%;
			left: 10% !important;
			right: 10%;
			margin-left: 2.5% !important;
			margin-bottom: 0px;
			.sprekerdesc {
				height: 70px;
			}
		}
	}
}

.app {
	margin: 40px 0;
	padding: 30px 0 0;
	min-height: 200px;
	background: #ddd;
	.appphotos {
		height: 500px;
		width: 1200px;
		overflow: hidden;
		left: 50%;
		margin-left: -600px;
		position: relative;
		@imgwidth: 307px;
		.photo1, .photo2, .photo3, .photo4, .photo5 {
			width: @imgwidth;
			margin-left: @imgwidth * (-1) / 2;
			.shadow(0px, 0px,26px, rgba(0,0,0,.5));
		}
		.photo1, .photo5 {
			top: 185px !important;
			z-index: 3;
			opacity: .8;
			position: absolute;
			//filter: blur(2px);
		}
		.photo2, .photo4 {
			top: 135px !important;
			z-index: 7;
			opacity: .9;
			position: absolute;
			//filter: blur(1px);
		}
		.photo1 {
			left: 15% !important;
		}
		.photo2 {
			left: 31.5% !important;
		}
		.photo3 {
			top: 30px !important;
			width: 400px;
			margin: 0 auto;
			z-index: 10;
			.shadow(0,0,0);
		}
		.photo4 {
			left: 68.5% !important;
		}
		.photo5 {
			left: 85% !important;
		}
	}
}

@media (max-width: 550px) {
	.app {
		.appphotos {
			width: 100%;
			left: 0;
			height: 400px;
			margin-left: 0;
			.photo1, .photo2, .photo4, .photo5 {
				display: none !important;
			}
			.photo3 img {
				width: 300px;
				margin-left: -15px;
			}
		}
	}
}

.locationfull {
	padding: 40px 0;
	.map {
		width: 100%;
		margin-top: 50px;
		background: url('../img/mapfull.png') no-repeat center center;
		background-size: cover;
		height: 320px;
	}
}

@media(max-width: 550px) {
	.locationfull .map {
		height: 200px;
	}
}




/*****************************
 **** Subpages: Festival ****
 *****************************/


 .blocks {
	 .block {
		 width: 33.3%;
		 display: block;
		 float: left;
		 text-decoration: none;
		 color: #000;
		 margin-bottom: 40px;
		 .bg {
			 height: 200px;
			 background-size: cover;
			 background-position: center center;
		 }
		 .content {
			 padding: 15px;
			 height: 150px;
			 background: #ddd;
			 box-sizing: border-box;
			 h5 {
				 font-weight: 300;
				 margin-bottom: 10px;
			 }
				span {
				 color: white;
			 }
		 }
		 .link {
			 float: right;
			 margin-right: 0;
			 background: @logoblauw;
		 }
		 &:hover .link::after, .link:hover::after {
			 color: @logoblauw;
		 }

		 &.textblock {
			 .content {
				 height: 350px;
				 background: @logoblauw;
				 display: table-cell;
				 vertical-align: middle;
				 width: 100%;
				 padding: 35px;
				 .serif(2.3em);
				 overflow-wrap: break-word;
				 line-height: 1.5em;
			 }
			 .link {
				 background: #000;
				 color: #FFF;
				 &::after { color: #FFF; }
			 }
			 &:hover .link {
				 &::after { color: #000; }
				 &::before { background: #ddd; }
			 }
		 }

	 }
 }



 @media(max-width: 550px) {

	 .blocks {
		 .block {
			 width: 100%;
			 margin-bottom: 20px;
		 }
	 }

 }




 /*****************************
  **** Subpages: Festival ****
  *****************************/


.organisationrow {
	margin: 0 auto;
	.function {
		width: 18%;
		margin: 1%;
		min-height: 70px;
		float: left;
		text-align: center;
		&:first-child {
			margin-left: 10%;
		}
	}
}




.tickets {
	input[type='text'], input[type='email'], input[type='date'], textarea {
		width: 95%;
		max-width: 400px;
	}
	label {
		display: inline;
		margin: 0;
		font-weight: 400;
	}
	margin-bottom: 80px;
}

.ticketdescription, .warning, .error {
	background: #DEDEDE;
	padding: 20px;
	border: 5px solid #666;
	margin: 20px 0 35px;
	h4 {
		font-size: 1.2em;
		font-weight: 600;
		text-transform: uppercase;
	}
	p {
		margin: 10px 0;
		span {
			display: inline-block;
			width: 150px;
		}
	}
}

.error {
	background: rgba(139, 0, 0, .3);
	border-color: darkred;
	margin-bottom: 60px;
}
.warning {
	background: rgba(70, 130, 180, .3);
	border-color: steelblue;
	margin-bottom: 60px;
}


.section.allekraampjes {
	margin-top: 50px;
	img {
		width: 100%;
	}
	p.category {
		margin: 10px 0 0;
	}
	ol, ul {
		margin: 0 0 20px;
		padding-left: 20px;
		li {
			margin: 0;
		}
	}

}