/*reset*/
* {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
/*animaciones*/
#flake {pointer-events:none;}
/*aspectos generales*/
@font-face{font-family:'indieflower';src:url(../FUENTES/IndieFlower.ttf);}
@font-face{font-family:'Comforta-r';src:url(../FUENTES/Comfortaa-Regular.ttf);}
#index1{background-color: #3EABD6; /* Old browsers *//*fondo portada azul*/
	background: -moz-linear-gradient(top, #262660 0%, #00ffff 50%, #262660 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #262660 0%,#00ffff 50%,#262660 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #262660 0%,#00ffff 50%,#262660 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262660', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */
	background-size:cover;}
#index2{background-color:rgb(3, 187, 255);
	background-image:url("../IMAGENES/fondocontacto.png");
	background-repeat:no-repeat;
	background-size:100% 100%;}
#index3{background-color: #3EABD6; /* Old browsers *//*fondo para visores*/
	background: -moz-linear-gradient(top, #000 0%, #262660 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #000 0%,#262660 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #000 0%,#262660 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262660', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */
	background-size:cover; background-attachment:fixed;}
#index4{background-color: #3EABD6; /* Old browsers *//*fondo color paginas*/
	background: -moz-linear-gradient(top, #262660 0%, #ffcc99 50%, #262660 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #262660 0%,#ffcc99 50%,#262660 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #262660 0%,#ffcc99 50%,#262660 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262660', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */
	background-size:cover;}
#index5{background-color:rgb(0, 0, 0);/*fondo para videos*/
	background-image:url("../IMAGENES/fondovideos.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;}
@media (max-width:400px){#index5{background-image:url("../IMAGENES/fondovideos-movil.jpg");}}
/*#index1, #index2{background-color:rgb(3, 187, 255);/*fondo provisional navidad
		background-image:url("../IMAGENES/fondonavidad.png");
		background-repeat:no-repeat; background-attachment:fixed;
		background-size:cover;}*/
body{overflow-x:hidden;}
a {text-decoration:none;}
a{font-family:'indieflower';
	font-size:130%;
	color:white;
	text-shadow:1px 3px 3px #0b0355;}
a:hover{color:#0b0355;
	text-shadow:1px 3px 1px #0ff;}
a:active{color:#262660;}
.botonsubir {width:40px;
	height:40px;
	position:fixed;
		bottom:0px;
		right:10px;
		z-index:500;
		background:url("../IMAGENES/botonsubir.png");
	background-size:100% 100%;
	font-size:80%;}
.botonidioma img {width: 150px;
		height:auto;}
#mensaje {color:#262662; /*pagina en desarrollo*/
	font-family:'indieflower';
	font-size:250%;
	text-align:center;
	margin:40px auto 40px;}
/*header*/
.LOGOALONSO {width:100%;
	margin:40px auto 0px;}
.logogira {width:100%;
		text-align:center;}
@media (max-width:500px) {.LOGOALONSO img{width:60%;
			display:block;
			margin:40px auto 80px;}
			.logoizquierdo{width:150px;margin-right:10px;}
			.logoderecho{width:150px;margin-left:10px;}}	
@media (max-width:800px), (orientation:portrait){.LOGOALONSO img{width:60%;
	display:block;
	margin:40px auto 80px;}
	.logoizquierdo{width:100px; margin-right:50px;}
	.logoderecho{width:100px; margin-left:50px;}}	
@media (min-width:801px) and (orientation:landscape){.LOGOALONSO img{width:20%;
	display:block;
	margin:auto;}
	.logoizquierdo{width:150px; margin-right:200px;}
	.logoderecho{width:150px; margin-left:200px;}}	
	/*meter aqui una mediaquerie para pantallas de mas de 1500 separandolos 300px si haec falta*/
/*body*/
body{width:100%;
	height:100%;}
/*menú-enlaces entre páginas*/
/*para móvil y pantallas pequeñas*/
@media (max-width:800px), (orientation:portrait){
	.links {width:100%;
		height:380px;
		display:block;
		float:left;
		clear:both;
		margin-bottom:60px;}	
	#menu, #menu2 {width:100%;
		position:relative;
		top:10px;
		text-align:center;
		overflow:hidden;}
	#menu li, #menu2 li{text-align:center;
		width:100%;
		display:block;
		margin:60px 0px;
		font-size:150%;}}
/*para móvil en horizontal y pantallas grandes*/	
@media (min-width:800px), (orientation:landscape){
	.links {width:100%;
		height:130px;		
		float:left;	
		margin-bottom:20px;}
	#menu, #menu2 {width:100%;
		position:relative;
		top:10px;
		bottom:30px;
		left:-30px;
		margin:20px 0px 60px;
		padding:5px 30px 0;
		overflow:hidden;}
	#menu li, #menu2 li {text-align:center;
		width:25%;
		float:left;
		font-size:100%;}}
/*para pantallas grandes en HD y ata resolución*/	
@media (min-width:1280px) and (orientation:landscape){
			.links {width:100%;
				height:130px;		
				float:left;
				margin-top:20px;	
				margin-bottom:40px;}
			#menu, #menu2 {width:100%;
				position:relative;
				top:10px;
				bottom:30px;
				left:-30px;
				margin:20px 0px 60px;
				padding:5px 30px 0;
				overflow:hidden;}
			#menu li, #menu2 li {text-align:center;
				width:25%;
				float:left;
				font-size:140%;}}		
/*index y home*/
.inspiracion {text-align:center;}
.inspiracion img {margin:40px auto 10px;}
#insp {width:80%;}
.biografia h1{display:block;
	font-size:200%;
	font-family:'indieflower';
	color:#fff;
	text-shadow:1px 3px 2px #0b0355;
	text-align:center;
	margin:40px;}
.compartir {margin: 0px auto 30px;}
/*contacto*/
#contacto {width:100%;
	height:100%;
	position:relative;
	display:table;
	text-align:center;
	margin:50px auto 10px;
	padding:10px 0px 20px;}
#contacto form {width:50%;
	height:100%;
	margin:10px auto;}
#contacto form label, .mensaformu {width:160px;
	text-align:center;
	font-family:'indieflower';
	color:#0b0355;
	text-shadow:1px 3px 1px #0ff;
	font-size:150%;}
input, select, textarea {width:100%;
						position:relative;
						display:block;
						margin:10px auto;
						font-family:'Comforta-r';
						font-size:150%;}
.boton {width:100px;
	display:block;
	text-align:center;
	font-family:'indieflower';
	color:white;
	background-color:#262660;}
.boton2 {width:300px;text-align:center;font-family:'indieflower';}
.fondomensaformu {text-align:center;width:100%;height:1000px;}
.mensaformu {width:100%;position:relative;top:300px;}
.reicon {width:50px;}
.boton:hover, .boton2:hover {box-shadow:0px 0px 10px #212125;}
/*info*/
.main {width:100%;
	height:200%;}
.main h3 {display:block;
		font-size:300%;
		font-family:'indieflower';
		color:#fff;
		text-shadow:1px 3px 2px #0b0355;
		text-align:center;
		margin:40px;
		padding-top:40px;}
/*parrafo servicios*/
.servicios{display:block;
	position:relative;
			width:80%;
			height:auto;
			margin:0px auto;
			padding:20px;
			border-radius:20px;
			background:rgba(255,255,255,0.6);
			box-shadow:inset 2px 3px 4px #0b0355;
			-webkit-box-shadow:inset 2px 3px 4px #0b0355;
			-moz-box-shadow:inset 2px 3px 4px #0b0355;
			-ms-box-shadow:inset 2px 3px 4px #0b0355;
		}
.servicios ol{width:90%;
		margin:0px auto;}			
.servicios li{width:100%;
			display:block;
			color:#262660;
			font-family:'Comforta-r';
			line-height:20px;
			text-align:right;}
.derecha {text-align:left !important;}
.derecha img {width:80px;mix-blend-mode:multiply;}
.servicios ol span {font-size:2em;float:left;height:100px;padding-top:20px;}
.derechos {float:right !important;}
/*parrafos bio-sobremi-curri*/
.yo {width:100%;
	display:block;
	margin:20px auto 20px;}
.yo img{display:block;
	left:auto;
	right:auto;
	width:50%;
	margin: auto;
	border-radius:20px;
	box-shadow:1px 3px 4px #0b0355;
	-webkit-box-shadow:1px 3px 4px #0b0355;
	-moz-box-shadow:1px 3px 4px #0b0355;
	-ms-box-shadow:1px 3px 4px #0b0355;}
.biografia {width:100%;
			display:block;
			margin:0px auto 20px;}
.biografia p{width:80%;
			display:block;
			height:auto;
			margin:20px auto 40px;
			padding:20px;
			border-radius:20px;
			background:rgba(255,255,255,0.6);
			box-shadow:inset 2px 3px 4px #0b0355;
			-webkit-box-shadow:inset 2px 3px 4px #0b0355;
			-moz-box-shadow:inset 2px 3px 4px #0b0355;
			-ms-box-shadow:inset 2px 3px 4px #0b0355;
			color:#262660;
			font-family:'Comforta-r';
			text-indent:40px;
			line-height:20px;
			text-align:justify;
			overflow:hidden;}
.texto-centrado p{text-align:center;}
@media (max-width:500px) {.yo img{width:70%;
				display:block;
				margin:auto;}
				.servicios li, .biografia p{font-size:90%;
					line-height:20px;}}		
	@media (max-width:800px),(orientation:portrait){.yo img{width:70%;
					display:block;
					margin:auto;}
					.servicios li, .biografia p{font-size:100%;
						line-height:25px;}}			
	@media (min-width:801px) and (orientation:landscape){.yo img{width:50%;
					display:block;
					margin:auto;}
					.servicios li, .biografia p {font-size:140%;
						line-height:30px;}}
@media (max-width:400px){.biografia p{text-align:left;}}							
/*html trabajos-distribuidor*/
.iconos a img{padding:10px;
		border-radius:5px;
		-webkit-transition-duration:1s;
		-moz-transition-duration:1s;
		-ms-transition-duration:1s;
		transition-duration:1s;}
.iconos a img:hover{background:rgba(255,255,255,0.5);
			-webkit-box-shadow:0 0 5px #262660;
			-moz-box-shadow:0 0 5px #262660;
			-ms-box-shadow:0 0 5px #262660;
			box-shadow:0 0 5px #262660;}
@media (max-width:800px), (orientation:portrait){
	.iconos {text-align:center;
		margin:40px auto;}
	.iconos a{display:inline-block;
		width:50%;
		margin:20px 20px;}
	.iconos a img{width:100%;}}
@media (min-width:801px) and (orientation:landscape){
	.iconos {text-align:center;
		margin:40px auto 30px;}
	.iconos a{display:inline;
		margin:40px 20px;}
	.iconos a img{width:25%;}}
/*html galeria y portafolio*/
.miniaturas h3 {text-align:center;
	font-family:'indieflower';
	font-size:300%;
	color:#fff;
	text-shadow:1px 3px 2px #0b0355;
	margin:20px 0px 40px;
	line-height:40px;}
.galeria {width:90%;
	margin:auto;
	padding:20px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-display:flex;
	-moz-display:flex;
	-ms-display:flex;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;}
	.galeria li {margin:15px;
		width:250px;
		height:250px;
		overflow:hidden;
		text-align:center;		
		line-height:250px;
		padding:5px;}
		.galeria img {width:auto;
			height:100%;
			margin:auto;
			border-radius:10px;
			-webkit-box-shadow:0 0 4px #262660;
			-moz-box-shadow:0 0 4px #262660;
			-ms-box-shadow:0 0 4px #262660;
			box-shadow:0 0 4px #262660;}
			.ancho img {width:100%;height:auto;}
	.galeria img:hover{box-shadow:0 0 2px #fff;
		-moz-box-shadow:0 0 2px #fff;
		-webkit-box-shadow:0 0 2px #fff;
		-ms-box-shadow:0 0 2px #fff;}
.visorcuadros{display:none;}
.visorcuadros:target{display:block; width:100%; height:100%;margin:auto;}
@media (min-width:801px) and (orientation:landscape){.visorcuadros:target{display:block; width:60%; height:100%;margin:auto;}}
/*.modal {display:none;}
.modal:target {width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:-40px;
	left:0px;
	background:rgba(0,0,0,0.9);}*/
.modal, .visorcuadros h3 {width:80%;
	font-family:'Comforta-r';
	font-size:130%;
	color:#262660;
	text-shadow:none;
	text-indent:40px;
	line-height:30px;
	text-align:center;
	overflow:hidden;
	margin:20px auto;
	padding:20px;
	border-radius:20px;
	background:rgba(255,255,255,0.8);
	box-shadow:1px 3px 4px #0b0355;
	-webkit-box-shadow:1px 3px 4px #0b0355;
	-moz-box-shadow:1px 3px 4px #0b0355;
	-ms-box-shadow:1px 3px 4px #0b0355;}
.cuadro {display:flex;
	justify-content:center;
	align-items:center;}
	.cuadro a {color:#fff;
		font-size:100px;
		margin:0px 10px;}
		.cuadro a:nth-child(2){margin:0px;
			height:100%;
			flex-shrink: 2;}
			.cuadro img {width:100%;
				height:auto;
				max-height:100%;
				margin:40px auto 0;
				box-sizing:border-box;
				-moz-box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-ms-box-sizing:border-box;
				box-shadow:1px 3px 4px #0b0355;
				-webkit-box-shadow:1px 3px 4px #0b0355;
				-moz-box-shadow:1px 3px 4px #0b0355;
				-ms-box-shadow:1px 3px 4px #0b0355;}				
.cerrar {display:block;
	position:absolute;
	top:0px;
	right:10px;
	background:#00ffff;
	width:60px;
	height:10px;
	margin:10px auto;
	text-align:center;
	font-size:16px;
	color:#000;
	text-shadow:none;
	padding:5px;
	border-radius:10%;}
.cerrar:hover{text-shadow:0px 0px 2px #262660;}
@media (max-width:425px) {.cuadro a{display:none;}
		.cuadro a:nth-child(2){display:block;}}
/*html7-galeria de videos*/
		.videos-fondos p{background-color:#cccccc;box-shadow:0px 2px 4px #fff, inset 0 0 10px #000;
					-webkit-box-shadow:0px 2px 4px #fff, inset 0 0 10px #000;
					-moz-box-shadow:0px 2px 4px #fff, inset 0 0 10px #000;
					-ms-box-shadow:0px 2px 4px #fff, inset 0 0 10px #000;}
		.videos-fondos img{width:300px;height:auto;margin:10px auto 0;
					box-shadow:0 0 5px #262660;
					-webkit-box-shadow:0 0 5px #262660;
					-moz-box-shadow:0 0 5px #262660;
					-ms-box-shadow:0 0 5px #262660;}
		.videos-fondos img:hover{box-shadow:none;
					-webkit-box-shadow:none;
					-moz-box-shadow:none;
					-ms-box-shadow:none;}
		.video-container {width:90%;
					display:block;
					height:auto;
					margin:20px auto 40px;
					padding:20px;
					color:#262660;
					font-family:'Comforta-r';
					line-height:30px;
					overflow:hidden;}
		.galeriavideos {width:90%;
					display:block;
					height:auto;
					margin:auto;
					padding:20px;
					border-radius:20px;
					background-color:#cccccc;
					box-shadow:0px 2px 4px #fff, inset 0 0 10px #000;
					-webkit-box-shadow:0px 2px 4px #fff, inset 0 0 10px #000;
					-moz-box-shadow:0px 2px 4px #fff, inset 0 0 10px #000;
					-ms-box-shadow:0px 2px 4px #fff, inset 0 0 10px #000;
					overflow:hidden;}
		.imagen-video {width:380px;height:250px;float:left;margin-left:50px;}
		.texto-videos {width:45%;height:250px;float:right;margin-right:100px;
					background-color:rgba(0, 20, 20, 0.6);
					box-shadow:inset 0 0 10px #000, 0 3px 4px #000, 0 0px 2px #fff;
					-webkit-box-shadow:inset 0 0 10px #000, 0 3px 4px #000,  0 0px 2px #fff;
					-moz-box-shadow:inset 0 0 10px #000, 0 3px 4px #000, 0 0px 2px #fff;
					-ms-box-shadow:inset 0 0 10px #000, 0 3px 4px #000, 0 0px 2px #fff;}
		.imagen-video img{width:300px;height:185px;float:left;position:relative;top:30px;left:30px;}
		.imagen-video img:nth-child(2){width:310px;height:255px;float:left;top:-190px;
					box-shadow:inset 0 0 10px #000, 0 3px 4px #000, 0 0px 2px #fff;
					-webkit-box-shadow:inset 0 0 10px #000, 0 3px 4px #000, 0 0px 2px #fff;
					-moz-box-shadow:inset 0 0 10px #000, 0 3px 4px #000, 0 0px 2px #fff;
					-ms-box-shadow:inset 0 0 10px #000, 0 3px 4px #000, 0 0px 2px #fff;}
		.texto-videos p{color:#fff;padding:20px;}
@media(max-width:1120px){.imagen-video {margin-left:0;}}
@media (max-width:1080px){.imagen-video {width:100%;display:block;float:none;text-align:center;position:relative;}
						.texto-videos {width:100%;height:auto;display:block;float:none;margin:0;}
						.imagen-video img{position:absolute;top:20px;left:0;right:0;margin:auto;}
						.imagen-video img:nth-child(2){display:block;float:none;top:-10px;left:0;right:0;}}
@media (max-width:340px){.videos-fondos img{width:100%;}
						.imagen-video img{width:100%;position:absolute;top:20px;left:0;right:0;margin:auto;}
						.imagen-video img:nth-child(2){width:100%;}}			
.videos {text-align:center;
		max-width:100%;}
.videos p, .videos2 p, .catalogos p{width:530px;
		max-width:80%;
		margin:40px auto;
		text-align:center;
		padding:20px;
		border-radius:20px;
		background:rgba(255,255,255,0.6);
		box-shadow:1px 3px 4px #0b0355;
		-moz-box-shadow:1px 3px 4px #0b0355;
		-webkit-box-shadow:1px 3px 4px #0b0355;
		-ms-box-shadow:1px 3px 4px #0b0355;
		color:#262660;
		font-family:'Comforta-r';
		line-height:25px;
		overflow:hidden;}
.videos2 {margin:50px auto 0px;
		text-align:center;
		display:block;}
		.videosize {width:560px !important;
			height:315px !important;}
@media (max-width:400px) {.videosize {width:350px !important;
							height:197px !important;}
							.videos p, .videos2 p{font-size:80%;}}
@media (min-width:401px) and (max-width:560px), (orientation:portrait){.videosize {width:400px !important;
							height:225px !important;}
							.videos p, .videos2 p {font-size:90%;}}
@media (min-width:1501px) and (orientation:landscape){.videos2 div:nth-child(1){float:left;
														margin-left:10%;}}
														/*.videos2 div:nth-child(2){
														margin-right:10%;}}
/*html7-catalogos de issue*/
.catalogos {margin:50px auto 0px;
					text-align:center;
					display:block;}
.catalogos img{width:300px;height:auto;}
/*footer*/
#footer {text-align:center;
			display:block;
			font-family:'indieflower';
			color:#0ff;
			text-align:center;}
.mail {margin:40px auto 50px;
	padding-top:0px;}
.mail a{font-size:140%;
	display:block;
	text-align:center;
	margin:20px auto 20px;}
.widkets {text-align:center;
	margin-bottom:40px;}
.widkets a{text-align:center;
	margin:20px;}
.widkets a img{width:60px;
		height:auto;}
.widkets a img:hover{border-radius:30px;
	-webkit-box-shadow:0 0 10px #00ffff;
	-moz-box-shadow:0 0 10px #00ffff;
	-ms-box-shadow:0 0 10px #00ffff;
	box-shadow:0 0 10px #00ffff;}
	/*styles de yumpu*/
.embed-container { position: relative; padding-bottom:56.25%; height:0; overflow: hidden; max-width: 100%; }	
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}	
/*recomendacion actualizar navegador*/
	#barraaceptacion {
		display:none;
		position:absolute;
		left:0px;
		right:0px;
		top:0px;
		width:100%;
		text-align:center;
		padding:5px;	
		background-color: rgba(0, 0, 0, 0.5);
		color:#fff;
		z-index:99999;}
	#barraaceptacion p{font-family:'Comforta-r';		
		line-height:20px;}
	#barraaceptacion div:hover {display:none;}
	.inner {width:100%;
		position:absolute;
		padding-left:5px;
		font-family:'Comforta-r';
		font-size:12px;
		top:30%;}
	.inner a.ok {padding:4px;color:#00ff2e;text-decoration:none;}
	.inner a.info {padding-left:5px;text-decoration:none;color:#00ffff;}