@charset "utf-8";
/* CSS Document */

@media only screen and (max-width:959px){
	#gr-mobile-detector{
		display:inline;
	}
	.max-width{
		min-width:0;
		max-width:none;
		width:90%;
	}
	.guru-gallery-holder > div > a.close{
		width:2em;
		height:2em;
		background-position:center center;
	}
	#gr-modal > div{
		min-width:0;
		max-width:none;
		width:90%;
		height:auto;
		max-height:70%;
		max-height:-webkit-calc(100% - 7em); /*por el alto de #gr-modal > div > h1 (sumando padding) + el top de #gr-modal.open > div*/
		max-height:calc(100% - 7em);
	}
	#gr-modal.open.loaded > div{ 
		top:4em;
	}
	#gr-modal > div > h1{
		padding:1em;
		font-size:0.9em;
		position:relative;
	}
	
	#gr-modal > div > h1 > a,
	#gr-modal > div > h1 > a:visited,
	#gr-modal > div > h1 > a:active{
		float:none;
		position:absolute;
		top:-2.5em;
		right:0
	}
	
	#gr-modal > div > div.content{
		padding:1em;
	}
	
	#gr-dialog-holder > div{
		width:90%;
	}
	#gr-dialog-holder > div > p{
		max-height:6em;
	}
	
	div.guru-contact-holder,
	div.guru-contact-holder > div{
		display:block;
		width:auto;
		text-align:center;
	}
	div.guru-contact-holder > div.contact{
		padding:0;
	}
	div.guru-contact-holder > div.map{
		text-align:center;
		padding:2em 0 0 0;
	}
	div.guru-contact-holder > div.map > p.mobile-call{
		display:block;
		visibility:visible;
	}
	div.guru-contact-holder > div.map > iframe{
		height:10em;
	}
	
	*[data-tooltip]:after{
		width:100%;
		max-width:none;
	}
	
	body{
		background-image:url(../media/body-bg-portrait.jpg);
		background-attachment: fixed;
	}
	
	
	header{
		position:fixed;
		height:4.5rem;
	}
	header > div{
		width:auto !important;
		height:4.5rem;
		background:transparent url(../media/mobile-back.png) no-repeat center bottom;
		background-size:200% 100%;
		transition:height 0.5s ease;
	}
	header.mobile-open > div{
		height:16rem;
	}
	header > div > span.logo{
		width:8rem;
		height:6rem;
		text-align:left;
		left:5%;
		z-index:11;
	}
	header > div > span.logo > img{
		height:4.5rem;
		width:auto;
		top:0.5rem;
		left:1rem;
	}
	
	header > div > span.tel{
		display:none;
		visibility:hidden;
	}
	
	header > div > var{
		display:inline-block;
		visibility:visible;
		width:2.2rem;
		height:2.2rem;
		position:absolute;
		top:1rem;
		right:5%;
		z-index:11;
	}
	
	header > div > var > span{
		display:inline-block;
		position:absolute;
		right:50%;
		width:0.4rem;
		height:0.4rem;
		border-radius:100%;
		background-color:#717F1E;
	}
	header > div > var > span:nth-child(1){top:0rem}
	header > div > var > span:nth-child(2){top:0.89rem}
	header > div > var > span:nth-child(3){top:1.8rem}
	
	header > div > nav{
		top:0;
		transform:translateY(-100%);
		opacity:0;
		z-index:10;
		transition:transform 0.5s, opacity 0.5s;
	}
	header.mobile-open > div > nav{
		transform:translateY(7rem);
		opacity:1;
	}
	
	header > div > nav > a,
	header > div > nav > a:visited,
	header > div > nav > a:active{
		width:20%;
		margin:0.5rem 0;
		position:relative;
		border-color:#717F1E;
		color:#717F1E;
	}
	
	header > div > nav > a.current{
		font-weight:bold;
		background-color:transparent;
		color:#717F1E;
	}
	header > div > nav > a:hover{
		text-decoration:none;
		background-color:#717F1E;
		color:#fff;
	}
	
	header > div > nav > a:nth-child(odd){float:left;left:5%}
	header > div > nav > a:nth-child(even){float:right;right:5%}
	
	main > section{
		width:80vw;
		min-width:0px;
		padding:4rem 0;
	}
	
	figure.billboard > figcaption > div > h1{
		font-size:1.6rem;
	}
	figure.billboard > figcaption > div > h2{
		font-size:1.2rem;
	}
	
	p.image > img{
		width:100%;
		height:auto;
	}
	
	div.iconse,
	div.iconse > div{
		display:block;
		padding 2rem 0;
	}
}