/*
Theme Name: David Ruano
Author: Jordi Pujol Cayón vo8.me
Description: Minimal wordpress theme that only shows galleries fullscreen
Version: 0.0.1
Tags: media, gallery, photography
*/

/*
#zulo .cont{display:inline-block}
#zulo .cont img{vertical-align:top}
*/
#preloadContainer{display:none}

/*.info{position:absolute;z-index:300;;color:#fff;left:0px;bottom:0px;padding:30px;;font-size:14px;display:none}*/

#swiper{width: 100%;position: absolute;height:100%}
#swiper{z-index: 1000;top: 0;left:0;right:0;bottom:0}
[class^="icon-"]{display:inline-block}
#O,#P,#Q,#A,#tools,#social{position:fixed;z-index:3000;padding:10px;height:30px;}
#controls .control{_idth:30px;text-align:center;font-size:48px}
#O{left:0px;top:50%;margin-top:-1em}
#P{right:0px;top:50%;margin-top:-1em}
#Q{top:0px;left:50%;margin-left:-1em}
#A{bottom:0px;left:50%;margin-left:-1em}

#tools{bottom:0px;left:0px;;padding:2vw 1vw;text-align:left;}/*amagat d'inici*/

body.customize-support #Q,body.customize-support #social{margin-top:32px}


#controls{color:#d5d5d5;font-size:14px;display:block;}
#controls a{color:#d5d5d5;text-decoration:none;font-size:2.5em;vertical-align:center;height:1em;line-height:2.5em;float:left;opacity:.5}
#controls div a{margin-left:1rem}
#controls div a:first-child{margin-left:0}

#controls a:hover{display:inline-block;opacity:.8;transition-duration: .8s;}
#controls a.meh,#controls a.meh:hover{display:none;opacity:0!important;}
.home #controls #A.meh{display:none;opacity:0!important;}
#controls #A.meh{display:inline-block;opacity:.8!important;}

#social{top:0px;right:0px;text-align:right}
#social a{width:inherit!important;opacity:1;font-size:20px}
#social .fa,#social .icon-twitter,#social .icon-facebook,#social .icon-instagram{width:1em;height:1em;border-radius:50%;padding:.3em;line-height:1em;text-align:center}
#social .fa-twitter,#social .icon-twitter{background-color:#4099ff}
#social .fa-facebook,#social .icon-facebook{background-color:#3b5998}
#social .fa-instagram,#social .icon-instagram{background-color:#d5d5d5;color:#252525}


#controls a#LOGO{opacity:0;position:absolute;z-index:2000;padding:0px;top:0px;left:0px;margin-left:3vw;margin-top:10px;height:3vw;width:25vw;max-width:340px;background-image:url('logo_davidruano.png');background-size:contain;background-repeat:no-repeat;background-position:top left;}

#controls div#languages{
	opacity:0;position:absolute;z-index:2000;padding:0px;	margin-top:-3em;
	top:50vh;left:50vw;-ms-transform:translate(-50%,-40%);-webkit-transform:translate(-50%,-40%);transform:translate(-50%,-40%);;margin-right:0;margin-bottom:0;opacity:0;white-space: nowrap!important;
}

#controls div#languages span{
	cursor:pointer;
	/*font-family: 'IBM Plex Sans', sans-serif;*/
	font-family: 'Roboto', sans-serif;
	font-weight:800;
	padding-right:1em;
	opacity:1;
	font-size:56px;	
	display:inline-block;	
}

#controls div#languages span:last-child{
	padding-right:0px;
}

#controls div#languages span:hover{	
	opacity:.7;
}

@-webkit-keyframes move{
    0%{
	opacity:0;
	-webkit-transform:translate(-50%,-40%);
	width:80%;height:80%;
	max-width:100%;
	}
  50% {	  opacity:1;  }  
  90% {	  opacity:1;  }    
  100% {
	 opacity:0; 
	 -webkit-transform: translate(-50%,-50%);
	 width:80%;height:80%;
	 max-width:100%;
	 }
}

@keyframes move {
	 0%{
	opacity:0;
	transform: translate(-50%,-40%);  
	 }
  50% {	  opacity:1;}  
  90% {	  opacity:1;  }    
  100% {
	 opacity:0;
     transform: translate(-50%,-50%);  
  }  
}


#controls  a#LOGO.splash{top:50vh;left:50vw;-ms-transform:translate(-50%,-40%);-webkit-transform:translate(-50%,-40%);transform:translate(-50%,-40%);width:80vw;height:80vh;max-width:1200px;background-position:center center;margin-right:0;margin-bottom:0;opacity:0;
  -webkit-animation: move 5.2s ease;  
  animation: move 5.2s ease;
}


/*
.control.thin .fa-chevron-circle-right::before{content:url('slider-right.png')}
.control.thin .fa-chevron-circle-down::before{content:url('slider-down.png')}
.control.thin .fa-chevron-circle-up::before{content:url('slider-up.png')}
.control.thin .fa-chevron-circle-left::before{content:url('slider-left.png')}

#O.thin{left:-30px;top:50%;margin-top:-48px}
#P.thin{right:35px;top:50%;margin-top:-48px}
#Q.thin{top:-30px;left:50%;margin-left:-48px}
#A.thin{bottom:15px;left:50%;margin-left:-48px}
*/

/*#momentazo{display:none;min-width:100%;height:100%;}*/
.info{
	width: 100vw;position: absolute;z-index: 990;top: 0;left:0;right:0;opacity:0;text-align:center;height:100vw;white-space: nowrap;
	/*cursor:pointer;*/
	/*background-color:rgba(33,33,33,.5)*/
}
.info>div.credits{  
  font-size:1.1em;
  _ext-shadow: 0px 0px 2px #000000;
  color:#d5d5d5;
  width:50%;
  max-width:500px;  
  white-space:pre-line;
  text-align:left;
  position:absolute;top:50vh;left:50vw;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)
}

.info.multilang{/*per començar totes amagades*/
	display:none;
}

/*
.info ul{display:none;padding:10px;margin:0 0 10px 0;background-color:rgba(0,0,0,.2);border-radius:10px}
.info ul li{list-style:none;padding:0;margin:0;line-height:18px}
.info a.control{display:inline-block;margin-left:20px}
*/

html {min-height: calc(100vh + 1px);height: calc(100vh + 1px);_eight: 100%;}
body{min-height: calc(100vh + 1px); _in-height:100%; width:100%;overflow:hidden;font-size:16px;;margin:0;padding:0;	_ext-shadow: 2px 2px #000000;background-color:#030303;background-size:cover;background-repeat:no-repeat;background-position:center center}

/*.info{position:absolute;z-index:300;;color:#fff;left:0px;bottom:0px;padding:30px;;font-size:14px;display:none}
.info a{color:#fff;text-decoration:none}*/

#momentazo{z-index:1;display:none;position:relative;_box-shadow: 20px 0px 200px #d5d5d5,-20px 0px 200px #d5d5d5;}
#momentazo.original.vertical{height:100%;margin:0 auto}
#momentazo.original.horitzontal{width:100%;}

#momentazo.pantalla{top:50vh;left:50vw;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}/*centered always*/
#momentazo.pantalla.vertical{width:100vw;}
#momentazo.pantalla.horitzontal{height:100vh;}

#pantallazo.original,#_lashplayer.original{z-index:1;display:none;position:fixed;width:100%;height:100%;}
#pantallazo.pantalla,#batacazo.pantalla,#_lashplayer.pantalla{display:none;position:fixed;min-width:100%;min-height:100%;width:auto;height:auto;}
#pantallazo,#batacazo,#_lashplayer{top:50vh;left:50vw;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}/*centered always*/
#flashplayer{z-index:1;position:fixed;width:100vw;height:100vh;top:0;left:0}/*centered always*/


/*#time{text-align:center;position:absolute;z-index:500;opacity:.8;right:0px;bottom:0px;_ext-align:right;;color:#ccc;padding:30px;}
#time span{font-size:70px;font-weight:bold}*/


#grid {/*idem .info*/
	width: 100vw;position: absolute;z-index: 890;top: 0;left:0;right:0;height:100vw;
}


.info a{	
    /*font-family: 'IBM Plex Sans', sans-serif;*/
	font-family: 'Roboto', sans-serif;
	font-weight: 400;/*600*/
	color:#fff !important; font-size:56px;
	text-decoration:none;
	/*text-transform:uppercase;*/
	display:block;
	
}
.dosxtres .row{_eight:50vh;display:block}
.dosxtres .row .col-4{	
  _idth:33.33%;
  text-align:center;
  color:#ccc;float:left;position: relative;min-height: 1px;height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  
  
}

/***border black always***/
.dosxtres .row{height:49.66vh;}
.dosxtres .row .col-4{
	width:calc(33.33% - .48vh);
	margin-right:.7vh;
	margin-bottom:.7vh;
}
.dosxtres .row .col-4:last-child{
	margin-right:0;
}
.dosxtres .row:last-child .col-4{
	margin-bottom:0;
}
/******/


.dosxtres .row .col-4>a{
  align-self: center;
  margin: 0 auto;
}
.dosxtres .row .col-4>a>img.vertical{ width:100%;}
.dosxtres .row .col-4>a>img.horitzontal{ height:100%;}


#momentazo.pantalla{top:50vh;left:50vw;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}/*centered always*/
#momentazo.pantalla.vertical{width:100vw;}
#momentazo.pantalla.horitzontal{height:100vh;}




@media screen and (max-width:1024px){
	/* #O,#P,#Q,#A{opacity:0}	*/
	#controls a{font-size:20px!important}	
	#social a{font-size:16px!important}	
	#controls div#languages span{font-size:50px!important}	
	.info a{font-size:30px!important}	
}

@media screen and (max-width:700px){
	/* #O,#P,#Q,#A{opacity:0}	*/
	#controls a#LOGO{max-width:250px;min-width:200px;min-height:18px}	
	.info a{font-size:22px!important}	
	#controls div#languages span{font-size:30px!important;padding-right:.5em;}	
	
}