/*Hoja de estilos para web Alonso de Sousa*/
/*Creada por Alousana diseno 2018*/
/*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:'Comforta-r';
src:url(../FUENTES/Comfortaa-Regular.ttf);}
body{width:100%;
	height:100%;
	overflow-x:hidden;
	font-family:'Comforta-r';
	color:black;
	background-color:white;
	font-size:130%;}
	a {color:black;
		text-decoration:none;}
	a:hover{color:#999999;
		text-decoration:underline;}
		#idioma img{width:60px;height:30px;position:absolute;top:0;right:20px;}
		#idioma img{position:fixed;top:0;right:20px;}
/*contenedor principal, que constituye la portada*/
#main, #main2, #main4 {width:100%;
		background-color:white;
		background-image:url("../IMAGENES2/fondowebmia.png");
		background-repeat:no-repeat;
		background-attachment:fixed;}
#main2 {height:auto;background-repeat:repeat;}
#main3 {width:100%;background-color:white;}
#main4{width:100%;height:900px;}
@media (max-width:1000px), (orientation:portrait){#main {
	height:700px;
	background-size:cover;
	padding:10% 0px 20%;}}
@media (min-width:1001px) and (orientation:landscape){#main {
		height:500px;
		margin-top:-100px;
		background-size:100% 100%;
		padding:10% 0px 20%;}}
/*portada: contenedor para el logo*/
.wrapper2 {width:100%;
	height:auto;
	display:block;}	
.logo {width:40%;
	margin:auto;
	text-align:center;}
.logo img {position:relative;
	margin-top:20px;
	width:200px;}
	@media (max-width:700px){.logo img{width:150px;}}	
.artista {position:relative;
	width:25%;
	margin:10px 0px 10px 50%;
	text-align:center;} 		
/*portada: Contenedor para el retrato*/
	.wrapper1  {width:50%;
				float:left;}
.imagen img {position:relative;
				width:400px;
				float:right;
				filter: drop-shadow(-2px -2px 4px #c6c6c6);}	
	@media (max-width:700px){.imagen img{width:300px;}}		
/*media querie por debajo de 1000px de ancho para bajar el nenu*/	
@media (max-width:1000px), (orientation:portrait){
	.wrapper {width:50%;
		height: auto;
		float:right;
		font-size:100%;
		margin-top:100px;}}
@media (min-width:1001px) and (orientation:landscape){
/*portada: contenedor para el menú de portada*/
	.wrapper {width:50%;
		height: auto;
		float:right;
		font-size:130%;
		margin-top:20px;}}
/*portada: contenedores secundarios para cada opción del menú*/
		/*selector de obras*/	
			.selectorobras, .selectorobras2 {opacity:0;
				-webkit-transition:all 3s;
				-o-transition:all 3s;
				-moz-transition:all 3s;
				transition:all 3s;
				margin-left:25px;
				width:40%;
				height:60%;
				overflow:hidden;
				padding:35px;
				text-align:center;
				color:#fff;
				background:rgba(150, 150, 150, 0.8);
				border-radius:25px;
				box-shadow:inset -4px -4px 8px #fff, 4px 4px 8px #fff inset, 2px 2px 8px #000,-2px -2px 8px #000;
				-moz-box-shadow:inset -4px -4px 8px #fff, 4px 4px 8px #fff inset, 2px 2px 8px #000,-2px -2px 8px #000;
				-o-box-shadow:inset -4px -4px 8px #fff, 4px 4px 8px #fff inset, 2px 2px 8px #000,-2px -2px 8px #000;
				-webkit-box-shadow:inset -4px -4px 8px #fff, 4px 4px 8px #fff inset, 2px 2px 8px #000,-2px -2px 8px #000;}
				.selectorobras2 {margin:auto;
					text-align:center;
					display:flex;
					justify-content:space-around;
					margin-bottom:20px;}
@media (max-width:700px), (orientation:portrait){.selectorobras2 {display:inline-block;margin-left:22%;}
.selectorobras2 p{margin:10px;}}
			.selectorobras a, .selectorobras2 a {color:white;}
			.selectorobras:target, .selectorobras2:target {opacity:1;}	
	.menu1 {width:50%;
		background-color:rgba(255,255,255,0.7);
		margin:20px 20px 10px 0px;
		text-align:center;
		padding:10px;
		border-radius:20px;}
	.menu2 {width:50%;
		text-align:center;
		background-color:rgba(255,255,255,0.7);
		margin:10px 20px 10px 20px;
		padding:10px;
		border-radius:20px;}
	.menu3 {width:50%;
		text-align:center;
		background-color:rgba(255,255,255,0.7);
		margin:10px 20px 10px 20px;
		padding:10px;
		border-radius:20px;}
	.menu4 {width:50%;
		text-align:center;
		background-color:rgba(255,255,255,0.7);
		margin:10px 20px 10px -50px;
		padding:10px;
		border-radius:20px;}
@media (max-width:700px), (orientation:portrait){
	.menu1, .menu2, .menu3, .menu4 {width:100%;}
	.menu1 {margin-top:0px;}
	.selectorobras {margin:auto;margin-bottom:40px;}}
@media (max-width:460px) {.menu2, .menu3 {margin-left:-20px;}}
/*paginas obra*/
.obras, .visor {width:100%;
	height:auto;
	text-align:center;
	padding-top:40px;}
	.obras {background:#c6c6c6;}
h1, h5, h6 {display:block;
	font-size:150%;
	color:white;
	text-shadow:2px 2px 4px #000, -2px -2px 10px #49a2f2;
	margin:50px auto;
	line-height:40px;}
.tituloobras h5 a{color:#fff;}
.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:5px;
			width:300px;
			height:250px;
			overflow:hidden;		
			line-height:250px;
			background-color:rgba(255,255,255,0);
			box-shadow:0 0 15px #262660,-4px -4px 8px #fff inset, 4px 4px 8px #fff inset;
			-moz-box-shadow:0 0 15px #262660,-4px -4px 8px #fff inset, 4px 4px 8px #fff inset;
			-webkit-box-shadow:0 0 15px #262660,-4px -4px 8px #fff inset, 4px 4px 8px #fff inset;
			-ms-box-shadow:0 0 15px #262660,-4px -4px 8px #fff inset, 4px 4px 8px #fff inset;}
		.galeria img {width:380px;
				height:auto;
				margin:auto;
				vertical-align:middle;}
				.ancho img {width:auto;height:250px;}
			.galeria li:hover, li:focus {box-shadow:0 0 15px #fff;
					-moz-box-shadow:0 0 15px #fff;
					-webkit-box-shadow:0 0 15px #fff;
					-ms-box-shadow:0 0 15px #fff;}	
.catalogos {margin:20px auto;
			text-align:center; 
			display:block;}	
.catalogos p{display:block;margin:50px;background-color:rgba(255, 255, 255, 0.4);padding:20px;border-radius:15px;line-height:30px;
				box-shadow:inset -4px -4px 8px #fff, 4px 4px 8px #fff inset;
				-moz-box-shadow:inset -4px -4px 8px #fff, 4px 4px 8px #fff inset;
				-o-box-shadow:inset -4px -4px 8px #fff, 4px 4px 8px #fff inset;
				-webkit-box-shadow:inset -4px -4px 8px #fff, 4px 4px 8px #fff inset;}
/*visor de cuadros*/
.visorcuadros{display:none;}
.visorcuadros:target{display:block; width:100%; height:100%;margin:auto;text-align:center;}	
@media (min-width:801px) and (orientation:landscape){.visorcuadros:target{display:block; width:60%; height:100%;margin:auto;}}
h3 {width:80%;
	font-size:120%;
	color:#262660;
	line-height:30px;
	text-align:center;
	overflow:hidden;
	margin:20px auto;
	padding:20px;
	border-radius:20px;
	background:rgba(255,255,255,0.6);
	box-shadow:0 0 15px #262660;
	-moz-box-shadow:0 0 15px #262660;
	-webkit-box-shadow:0 0 15px #262660;
	-ms-box-shadow:0 0 15px #262660}
		@media (max-width:600px){h3 {font-size:100%;}}
.cuadro {display:flex;
	justify-content:center;
	align-items:center;}
	.cuadro a {color:#c6c6c6;
		font-size:50px;
		margin:0px 10px;
		padding:10px;
		border-radius:15px;
		box-shadow:0 0 15px #262660;
		-moz-box-shadow:0 0 15px #262660;
		-webkit-box-shadow:0 0 15px #262660;
		-ms-box-shadow:0 0 15px #262660;
		text-decoration:none;}
		@media (max-width:600px){.cuadro a{font-size:25px;padding:5px;border-radius:5px;}}
		.cuadro a:hover {box-shadow:0 0 5px #262660;
			-moz-box-shadow:0 0 5px #262660;
			-webkit-box-shadow:0 0 5px #262660;
			-ms-box-shadow:0 0 5px #262660;}
		.cuadro a:nth-child(2){margin:0px;
			height:100%;
			flex-shrink: 2;
			background-color:#fff;
			box-shadow:none;}
			.cuadro img {width:100%;
				height:auto;
				max-height:100%;
				margin:40px auto 0;
				border:7px solid #fff;
				box-sizing:border-box;
				-moz-box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-ms-box-sizing:border-box;
				box-shadow:0 0 15px #262660;
				-moz-box-shadow:0 0 15px #262660;
				-webkit-box-shadow:0 0 15px #262660;
				-ms-box-shadow:0 0 15px #262660;}				
.cerrar, .cerrar2 {display:block;
	margin:10px auto;
	text-align:center;
	background:#c6c6c6;
	font-size:16px;
	padding:5px;
	border-radius:5px;
	box-shadow:0 0 15px #262660;
	-moz-box-shadow:0 0 15px #262660;
	-webkit-box-shadow:0 0 15px #262660;
	-ms-box-shadow:0 0 15px #262660;}
.cerrar {position:absolute;
	top:0px;
	right:10px;
	width:70px;
	height:15px;}
.cerrar2 {width:250px;} 
.cerrar:hover, .cerrar2:hover {text-decoration:none;
	box-shadow:0 0 5px #262660;
			-moz-box-shadow:0 0 5px #262660;
			-webkit-box-shadow:0 0 5px #262660;
			-ms-box-shadow:0 0 5px #262660;}
/*menu de paginas*/	
.menupaginas {width:100%;
				height:35px;
				padding-top:15px;
				background-color:rgba(255, 255, 255, 0.8);}
.menupaginas ul{text-align:center;display:flex;justify-content:space-around;}
@media (max-width:800px) {.menupaginas {height:200px;margin-top:-20px;}.menupaginas ul{display:block;}
.menupaginas ul li{margin:20px;}}
@media (max-width:500px) {.menupaginas {padding-top:5px;}.menupaginas ul li{margin:20px;}}
/*sobre mi*/
.sobremi {width:80%;
	height:auto;
	background-color:white;
	border-radius:20px;
	box-shadow:0px 0px 10px #212125;
	margin:30px auto;
	padding:30px;
	line-height:30px;
	text-align:justify;}
@media (max-width:500px){.sobremi {font-size:80%;}}
@media (max-width:400px){.sobremi {text-align:left;}}
/*exposiciones*/
.sobremi div {text-align:center;overflow:hidden;}
h2 {text-align:center;
	font-size:120%;}
.expos img, iframe {width:300px;height:auto;margin:auto;}
iframe, .videos img {width:500px;height:280px;}
@media (max-width:1000px){.sobremi h6{font-size:100%;}}
@media (max-width:700px){iframe, .videos img {width:90%;height:auto;}}
@media (max-width:500px){.expos img,a img {width:80%;margin:20px auto;}}
/*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{width:160px;
	text-align:center;
	font-size:130%;}
input, select, textarea {width:100%;
						position:relative;
						display:block;
						margin:10px auto;
						border:2px solid #c6c6c6;}
.boton {width:100px;
	text-align:center;}
.boton2 {width:300px;text-align:center;}
.fondomensaformu {text-align:center;width:100%;height:700px;}
.mensaformu {width:100%;position:relative;top:400px;line-height:30px;}
.reicon {width:50px;}
.boton:hover, .boton2:hover {box-shadow:0px 0px 10px #212125;}
@media (max-width:400px){#contacto form{width:100%;}
						.boton2 {width:100%;}}
/*footer*/
#footer {width:100%;
		height:170px;
		background-color:white;
		padding-bottom:20px;
		overflow:hidden;}
#footer2 {width:100%;
		height:150px;
		position:absolute;
		bottom:0px;
		background-color:rgba(255, 200, 255, 0.6);
		padding-bottom:20px;
		overflow:hidden;}	
.mail {position:relative;
	width:80%;
	height:auto;
	margin:auto;
	background-color:white;
	text-align:center;
	font-size:80%;}
.mail p{font-size:70%;}
.widkets {position:relative;
		width:45%;
		height:90px;
		margin:auto;
		padding-top:10px;
		text-align:center;
		vertical-align:center;}
.widkets img{width:50px;}
@media (max-width:500px){.widkets img{width:43px;}}
.widkets img:hover{width:42px;}
.linkalousana img{width:40px;margin-bottom:-10px;}