/*
Theme Name: Cascoland v3.0
Author: Erik de Graaff
Author URI: http://erikdegraaff.com/
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

html, body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;		
  color:#444;
  overflow-y:scroll;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;

}
.test {
	position: absolute;
	height:500px;
	z-index: 10000;
	width: 100vw;
	pointer-events:none;
	background:rgba(255,0,0,0.0);
	display: block;

    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;	
}
.test.prevented {
	background:rgba(255,0,255,0.0);
	pointer-events:auto;
}

.wrapper {
	position:absolute;
	width: 100vw;
	height:100vw;
	overflow: hidden;
	opacity: 1;
}
.wrapper.unloaded {
	opacity: 0;
}

.grabbing {
}

.loader {
	position: fixed;
	width:60px;
	height:60px;
	background-image: url(img/loader.svg);
	z-index:5000;
	left:calc(50% - 60px);
	top:calc(50vh - 60px);
	display: none;
}

.lightbox {
	position: fixed;
	width: 100%;
	height:100vh;
	background: rgba(255,255,255, 0.7);
	z-index: 4000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease;
	-webkit-transition: opacity .6s ease;
}
.lightbox .image-holder {
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	position: fixed;
	width: 88%;
	height:88vh;
	margin:6vh 6% 6vh 6%;
}
.lightbox.open {
	opacity: 1;
	pointer-events: auto;
}
.lightbox a {
	font-size:1.8vw;
	margin:1vw;	
	position: absolute;
}
.lightbox a.close,
.lightbox a.next-img {
	right:0px;
}
.lightbox a.next-img,
.lightbox a.prev-img {
	top:45vh;
}

div[class^="col-"] {
	float:left;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform-style: preserve-3d;
	min-height:100vh;
}
div[class^="col-"] * {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform-style: preserve-3d;
}

/* 
RESPONSIVE 
*/
.page {
/*	left:0px;
*/	transform-origin:0 0;
}
.page.prev .overlay {
	cursor:pointer;
}
.columns-6 .page  { width:77.5vw; 	}
.columns-6 .page.curr {transform:translateX(5vw); -webkit-transform:translateX(5vw);}
.columns-6 .page.next {transform:translateX(84.5vw); -webkit-transform:translateX(84.5vw);}
.columns-6 .col-1 { width:15.5vw;	}
.columns-6 .col-2 { width:31vw;		}
.columns-6 .col-3 { width:46.5vw;	}

/* 
Type 
*/
@font-face {
  font-family: 'CargoD';
  src: url('fonts/cargo-d-1361512276.eot');
  src: url('fonts/cargo-d-1361512276.eot?#iefix') format('embedded-opentype'),
  	   url('fonts/cargo-d-1361512276.svg#aad4a4f3edcdc209818a6f29d32a593f') format('svg'),
       url('fonts/cargo-d-1361512276.woff') format('woff'), 
       url('fonts/cargo-d-1361512276.ttf')  format('truetype');
  font-style:   normal;
  font-weight:  400;
}

h3 {
	font-size:1.8vw;	
}
h1,h2,h3,h4 {
  font-style:   normal;
  font-weight:  400;
  font-family: 'CargoD';
  text-transform: uppercase;
  color:#444;
}		
.content_nl h2,
.content_en h2 {
  text-transform: uppercase;
  font-family: sans-serif;		
  font-size:1.7vw;
  line-height:110%;
  font-weight:normal;
}
strong,
#content_txt h4,
.content_nl h4,
.content_en h4 {
  text-transform: none;
  font-family: sans-serif;		
  font-size:1.7vw;
  line-height:110%;
  font-weight:normal;
}

li {
  	line-height: 140%;
  	font-size: 1.35vw;  
	text-transform: lowercase;
}

.info-block {
	margin-top: 0px;
	margin-bottom:15px;
}
.col-2 .left,
.col-2 .right {
	width:calc(50% - 1vw);	
	float:left;	
}
.info-block p {
	margin:0px;
	margin-bottom:15px;

}
.info-block h4 {
	margin:0px;
	font-size: 1.5vw;
    word-wrap: break-word;
}

.info-block li {
/*	font-size: 1.35vw;
	text-transform: lowercase;
	line-height:150%;
	list-style: none;
*/}
li a, li span {
  font-style:   normal;
  font-weight:  400;
  font-family: 'CargoD';
  text-transform: uppercase;
  text-decoration: none;	
}
li a:hover, 
li a:visited:hover {
	color:aqua;
}
.filter-list li {
  font-size:1.35vw;
  font-style:   normal;
  font-weight:  400;
  font-family: 'CargoD';
  text-transform: uppercase;
  text-decoration: none;	
}
.filter-list li:after {
	content:'';
	height:11px;
	width:11px;
	background-size: cover;
	background-image:url('img/close.svg');
	position: absolute;
	margin:5px;
	margin-top:6px;
}
.filter-list li:hover:after {
	background-image:url('img/close_color.svg');
}
.filter-list li:hover {
	color:aqua;
}
p {
	font-size:1.35vw;
  	line-height: 150%;  
  	clear:both;
}
p.caption {
	margin:0vw 1vw 0vw 1vw;	
	font-size:1.2vw;
}
a:link, a:visited {
	font-family: 'CargoD';
	text-transform: uppercase;
	text-decoration: none;
  	color:#444;
}		
a:hover, a:visited:hover,
a:hover *, a:visited:hover * {
	text-decoration: none;
  	color:aqua;
}

.content_nl,
.content_nl h2,
.content_nl h3,
.content_nl h4,
.content_nl p {
	color:#666 !important;	
	clear:both;
}
.content_en,
.content_en h2,
.content_en h3,
.content_en h4,
.content_en p {
	color:black !important;	
	clear:both;
}

a.scroll-to-en {
	float: right;
	text-align: right;
}

/* 
Elements 
*/
iframe {
	margin:1vw;
	margin-top:0vw;
}
ul,
p,
h1,h2,h3,h4,h5,h6 {
	padding:0;
	list-style: none;
	margin:1vw;
}
h3.projects-title {
	width:74.4vw;
}

img {
	display: block;
	width:calc(100% - 1vw);
	height:auto;
	pointer-events: none;
	margin:1vw;
	vertical-align: bottom;	
}

.lazy-load {
	background-color: #eee;
	background-repeat:no-repeat;
	background-position: center center;
}

.col-3 img.portrait {
	width:calc(66.66% - 2vw);
	height:auto;
}
.card {
	position: relative;
}
.card img {
	width:calc(100% - 1vw);
	margin:0vw;
	margin-left:1vw;
}
.card h4 {
	margin:0vw;
	margin-left:1vw;
	margin-top:0.5vw;
	margin-bottom:0.5vw;
	font-size: 1.2vw;
}

a.nav {
/*	width:100%;
*/	display: block;
}

/* 
TRANSITIONS 
*/
.wrapper, .page, .overlay {
    min-height: 100vh;
	transition: all 0.4s  ease;
	-webkit-transition: all 0.4s  ease;    
}

/* 
PAGES / Columns 
*/
.hero {
	height:78vh;
	width:calc(100% - 1vw);
	margin:1vw;
	transform:translateY(-80vh);
	transition:transform 0.6s ease;
	-webkit-transform:translateY(-80vh);
	-webkit-transition:all 0.6s ease;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.hero .content h1 {
	margin:0px;
	margin-left:1vw;
	font-size: 7.4vw;
	color:white;
}
.hero .content {
	color:white;
    width: 31vw	
}
.hero .content p {
	background:rgba(0,0,0,0.5);
	padding:1vw;
	font-size: 1.6vw;
}

.front {
	transform:translateY(-80vh);
	transition:transform 0.6s ease;
	-webkit-transform:translateY(-80vh);
	-webkit-transition:all 0.6s ease;
}
.front.open,
.hero.open {
	transform:translateY(0);
	-webkit-transform:translateY(0);
}
.front.open h3:hover {
	cursor:pointer;
}
.page {
	background: white;
    position: fixed;
}

.page.idle {
	right:21.5vw;
	z-index: 0;
}
.page.prev {
	left:0vw;
	z-index: 1;
}

.page.curr {
	z-index: 3;
}
.page.next {
	z-index: 4;
}

/* OVERLAY */
.page .overlay {
	z-index: 1;
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	opacity: 1;
	background: rgba(255,255,255,0.6);
}
.page.curr .overlay,
.page.next .overlay {
	opacity: 0;
	pointer-events:none;
}
.map {
	height:30vw;
	margin:1vw;
}
ul.filters {
	list-style: none;
	padding:0px;
	padding-left:3px;
	
}
ul.filters li a{
	font-family: 'CargoD';
	font-size: 1.35vw;
	text-transform: uppercase;
	color:white;
}
.filter {
    position: fixed;
	right:0px;			
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	background: #444;
    color:white;
    min-height: 100vh;
    z-index: 10;
}
.filter a:link, .filter a:visited {
	color:white;
}
.filter a:hover, .filter a:hover{
	color: aqua;
}
.filter li {
}	


.filter li.child {
	display:none;
}
.filter li.child.open {
	display:block;
}

.filter li.child,
.filter li.child a:link, 
.filter li.child a:visited {
	font-size: 1.35vw;  
	color:#888;
}
.filter li.child a:hover, 
.filter li.child a:visited:hover {
	color:aqua;
}
.filter li.child a.selected:link, 
.filter li.child a.selected:visited {
	color:aqua;
}

ul img {
	margin:0vw;
}

.input-holder {
	position: relative;
	padding:0px;
}
.search-btn {
	width:10%;
	height:50%;
	position: absolute;
	right:1vw;
	top:25%;
	cursor:pointer;
}

.filter input[type="text"] {
	position: relative;
	background-color: #444;
	background-image:url('img/search.png');
	background-size:8%;
	background-repeat:no-repeat;
	background-position: right 95%;
	padding:5px;
	padding-bottom:2px;
	margin:1vw;
	border:none;
	border-bottom:1px solid white;
	width:calc(100% - 2vw - 10px);
}
.filter input[type="text"]:after {
	position: absolute;
	width:10px;
	height:10px;
	background:red;
	content:'';
}
.filter input[type="text"]:focus {
  outline-color: transparent;
  outline-style: none;
}

.filter input[type="text"] {
	font-size: 1.35vw;
	color:white;
	letter-spacing: -0.5px;
}
::-webkit-input-placeholder {
   color: white;
   opacity:1.0;
	font-size: 1.35vw;
}

:-moz-placeholder { /* Firefox 18- */
   color: white;  
   opacity:1.0;
	font-size: 1.35vw;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: white;  
   opacity:1.0;
	font-size: 1.35vw;
}

:-ms-input-placeholder {  
   color: white;  
   opacity:1.0;
	font-size: 1.35vw;
}