@charset "utf-8";
body{
	margin:0px;
	padding:0px;
	height:100vh;
	width:100vw;
	font-size: 1em;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
body.home{}
	body.home h2{ display: none;}
	body.home .logo{ width: 212%; transition: 1s ease all;}
body > section {
	display:block;	
	padding:2vw;	
}
	#clientes a:hover{
		text-transform: uppercase;
	}
#bg{
	pointer-events: none;
	position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
	z-index: 2; /*NVO*/
	transition: 1s ease all;
}
	#bg .a, #bg .b{position: absolute; height: 50%; width: 100%; display: block;}
	#bg .a{background-color:rgba(255,102,0,1.00);top:0;box-shadow: 5px 4px 14px 1px white; }
	#bg .b{background-color: rgba(0,102,156,1.00); bottom:0;}
	#bg.abrir .a, #bg.abrir .b{
		height: 0%;
		transition: 1s ease all;
	}
	#bg.abierto .a, #bg.abierto .b{
		height: 7%;
		transition: 0.5s ease all;
	}
	#bg.cerrado .a, #bg.cerrado .b{ height: 50%; transition: 0.5s ease all;}
	#bg .b img{    
		position: relative;
		display: block;
		margin: auto;
		background: white;
		border-radius: 12px 12px 0px 0px;
		padding: 0 2%;
		transition: 0.5s all ease;
		pointer-events: auto;}
		#bg .b img:hover{ background-color: black;}
#logMensajes{
	font-family:  Helvetica,  "sans-serif";	
}
	#logMensajes.aparece {
		top: 0vh;
		transition: 2s ease all 0s;
	}
	#logMensajes a {
		border: 0.2rem solid;
		border-radius: 10px;
		padding: 0.3rem;
		line-height: 2;
		color: white; 
		text-decoration: none;
		white-space: nowrap;
	}
	#logMensajes img{
		display: block;
		filter: opacity(0.3);	
		position: absolute;	
	}	

		#logMensajes a:nth-of-type(odd){ background-color: rgba(255,102,0,1.00);} 
			#logMensajes a:nth-of-type(odd):hover {border: inset rgb(255,172,117);}
			#logMensajes a:active { background-color:  rgb(255,124,36);}
		#logMensajes a:nth-of-type(even){  background-color: rgba(0,102,156,1.00);}
			#logMensajes a:nth-of-type(even):hover{  border: inset rgb(93,199,255);}
			#logMensajes a:nth-of-type(even):active { background-color:rgb(52,147,197);}
#contacto{
	text-align:right;
	font-family:sans-serif;
}
	#contacto > b, #contacto > span{ display: block;}
	#contacto .wa{ color: #00a454;}	
	#contacto .tel{ color: rgb(255,255,255);}
#clientes .wrapClientes { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
	#clientes .wrapClientes li {padding: 0.5em; list-style-image: url(imagenes/qboxSquareIcon20px.png); }
		#clientes .wrapClientes a:first-of-type{
			position: relative;
			text-decoration: none; 
			font-weight: bold; 
			font-size: 1.2em;
    		text-transform: uppercase;
			padding: 0.5em 2em;
			border: 0.2em solid;
			display: inline-block;
			margin: 2.5em 0 1.2em;
			transition: 1.2s ease all;
			color: white}
		#clientes .wrapClientes a:first-of-type:hover{text-decoration: underline; }
		#clientes .wrapClientes a:first-of-type:hover::after {
			text-shadow: initial;
			line-height: 2;
			width: 100%;
			content: 'Ver este WebSite';
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			text-align: center;
		}
		#clientes .wrapClientes li:nth-of-type(even) a:first-of-type{ 
			background-color:  rgba(255,102,0,1.00); 
			box-shadow: 0.6em 0.6em 0.9em rgb(0,102,156);}
		#clientes .wrapClientes li:nth-of-type(even) a:first-of-type:hover::after { 
			background-color:rgb(0,102,156); }		
		#clientes .wrapClientes li:nth-of-type(odd) a:first-of-type{ 
			background-color: rgba(0,102,156,1.00); 
			box-shadow:0.6em 0.6em 0.9em rgb(255 102 0)}
		#clientes .wrapClientes li:nth-of-type(odd) a:first-of-type:hover::after { 
			background-color:rgb(255 102 0); }
		#clientes .wrapClientes li span {display: block;}
		#clientes .wrapClientes li iframe { width: 80vw; height: 80vh; display: block;}
		#clientes .wrapClientes li.fichaBocetos{ 
			box-shadow: 44px 16px 22px 3px rgba(0,37,99,0.54);
			-webkit-box-shadow: 44px 16px 22px 3px rgba(0,37,99,0.54);
			-moz-box-shadow: 44px 16px 22px 3px rgba(0,37,99,0.54); }
	#clientes .wrapClientes + aside span{ text-align: left; font-weight: bold; display: block; margin: 0 auto; width: 80%;}
	#clientes .wrapClientes + aside { text-align: left;  padding-bottom: 20vh;}	

#clientes h2{ 
    font-family: sans-serif;
    text-align: center;
    position: sticky;
    top: 1.5vh;
    background: white;
    margin-top: 0;
    padding: 5vh 0;
	z-index: 1;
	font-size: 4em;
}
	#clientes h2 span:first-of-type{ color: rgba(255,102,0,1.00);}
	#clientes h2 span:last-of-type{color: rgba(0,102,156,1.00);}
	#clientes h2.vert{ display: none;}
#clientes .ocultarCliente{ display: none;}


#faqs h1{ text-align: center; text-transform: uppercase;}
#faqs article{ padding-top:  3em; }

#pagos{ 
	background-image: url(imagenes/cryptopayments/bgCripto-ML.jpg); 
	background-size: cover; 
	background-attachment: fixed; 
	text-align: center; 
	padding: 1em;
}
	
	#pagos article span{ display: block; color:  white; font-weight: bold; user-select: text;}
.bar{
	display:block;
	height:1.5vh;
	width:100vw;
	z-index: 3;
}
.bar:first-of-type{
	background-color:#616F85;
 	background-color: rgba(0,102,156,1.00);
	position: fixed;
	top: 0px;
}
.bar:last-of-type{
	background-color:#E77817;
	background-color:rgba(255,102,0,1.00);
	position:fixed;	
	bottom:0px;
}






@media (orientation:portrait){
	body.home > section{ font-size:1.2em;}
		body.home h2.aparece{ 
			top: 1em;
			color: white;
			transform: rotate(-26.6deg);
			position: fixed;
			display: block;
			z-index: 2;
			font-family: sans-serif;
			left: 1em;}
		body.home .logo.aparece{width: 100%;}
		body.home br{ margin-bottom: 2em;}
	#bg{ transform: rotate(-26.6deg) scale(1.70);}
	#bg{ transform: scale(2.470);} /*TEMPORAL*/	
	#bg .b img{ width: 7em; top:-0.79em;}
	#bg.abierto{ z-index: auto;}
		#bg.abrir .a, #bg.abrir .b{height: 0%;}
		#bg.abierto .a, #bg.abierto .b{height: 30%;}
	#logMensajes{
		text-align: center;
		margin-top: 100vh;
		transition: 2s ease all;
	}
		#logMensajes.aparece{margin-top: 2em;}
		#logMensajes a { display: block;}
		#logMensajes img{ right: 0;	width: 50%;	}
	#clientes aside{ padding-top: 5em; }
	#clientes h2.horz{ display: none;}
/*	#clientes h2.vert.aparece {
		margin: 0;
		z-index: 2;
		background: transparent;
		display: block;
		color: white;
		left: 0em;
		top: 3em;
		position: fixed;
		transform: rotate(-26.7deg);
		padding: 0;
	}/*BORRAR*/
	#clientes h2 {
		margin: 0;
		z-index: 2;
		background: transparent;
		display: block;
		left: 0.1em;
		top: 1.9em;
		position: fixed;
		transform: rotate(-26.7deg);
		padding: 0;
		font-size: 2em;
	}
		#clientes h2 > span:first-of-type{ color: white;}
	
	#clientes li:first-of-type {
		margin-top: 100vh;
	}
		#clientes li:first-of-type.aparece {
			margin-top: 10em;
			transition: 1s ease all;
		}
	#contacto{
		margin-top: 4em;
		padding-bottom: 10em;
		position: relative;
		text-align: left;
	}
	#faqs{ padding: 5em 10%;}

	#pagos{    padding: 12em 1em; }
		#pagos article{ display: block;}
				#pagos article img{ width: 100%;}
				#pagos article span{ font-size: 40px; word-break: break-all; }
}
@media (orientation:portrait) and (max-width:340px){
	body{
		/*min-width:280px;*/ /* NOTA> ME ESTA CREANDO PROBLEMAS EN ourTeam.php*/
		/*min-height:360px;*/
		width: 100vw;
		height: 100vh;
	}	
}
@media (orientation:landscape){
	body.home{ position: absolute; overflow-y: scroll;   overflow-x: hidden;}
	body.home .logo{ width: 50%; position: fixed; left: 2em; filter: drop-shadow(31px 26px 43px rgb(150,150,150));}
		img.logo.aparece:hover {   transform: scale(1.2);}	
	#bg{transform: rotate(-26.6deg) scale(1.8);	}
	#bg.abierto .b { height: 25%;}
		#bg .b img{top: -1em; width: 10em;}
	#logMensajes{
		width: 42%;
		top: 100vh;
		right: 0;
		position: absolute;
		padding-top: 4em;
    	text-align: right; 
		padding-bottom: 31rem;
		box-sizing: content-box;
	}
		#logMensajes img{ right: 0;	width: 50%;	}
	#clientes{ width: 50%;}
	#contacto{bottom:0px;	right:0px;	position:fixed;}
		#contacto.aparece{ z-index:3; color: white; transform: rotate(-26.6deg) scale(0.86) translateY(-37px) translateX(76px);}
	#faqs { padding: 9em 10%; width: 50%;}	
		
		#pagos article{ display: inline-block; width: 50%;}
			#pagos article img{ width: 40vw;}	
			#pagos article:last-of-type{ margin-bottom: 15em;}

}
@media (orientation:landscape) and (max-width:1024px){
	body.home > section{
		font-size:3vh;
	}	
}
@media (orientation:landscape) and (min-width:1025px){
	body.home > section{
		font-size:1.6rem;
	}	
}
/*@media (orientation:landscape) and (min-width:1000px){
	body.home > section{
		font-size:1.6em;
	}	
}*/