/*MENU Y GENERALES*/
body{
	font-size: 1em;
	margin: 0;
}

.identidad{ 
	background-image: url("imagenes/roraulornelasn.svg");
	background: no-repeat; 
	width: 200px;
	padding-left: 5em;
	float: left;
}/*
nav:hover >.identidad{
	background-image: url("imagenes/roraulornelasan.svg");
	margin-left: 1em;
	float: left;
	width: 200px;
	padding-left: 1em;
	z-index: 199;
	}*/




.botonmenu{
	display: none;
	margin: 1em 0.5em 0 0;
	padding: 0;
}
	.botonmenu a{
	color: black;
}
	nav:hover>.botonmenu a{
	color: white;
}


/*
.identidad:hover {
	background-image: url("imagenes/roraulornelasan.svg");
	background-image: no-repeat; 
	width: 200px;
	padding-left: 5em;
	float: left;
}*/
/*MENU*/

.cajamenu{
padding-right: 5em;
}

nav{
	display: block;
	width: 100%;
	padding: 0;
	text-align: right;
	position: fixed;
	z-index: 99;
	background: white;
	margin: 0;
	vertical-align: bottom;
	margin-bottom: 0;
	height: 50px;

}
nav:hover{
	background: rgba(255,0,0,0.7)
}
/*nav:hover > .cajamenu ul li a{
	color: white;
}*/

nav ul{
	text-decoration: none;
	position: relative;
	vertical-align: bottom;
	padding-top: 1em;
}
nav ul li{
	display: inline;
	font-family: 'ComfortaaRegular';
	padding: 0.5em;
	position: relative;
	vertical-align: bottom;
}
nav ul li a{
	color: black;
	vertical-align: bottom;
}
/*nav ul li:hover{
	text-decoration: underline;
	color: white;
}*/
/*nav ul a:hover{
	color: white;
}*/
/*nav ul li a {
	color: black;
}*/


nav ul li a:hover {
	color:white;
	text-decoration: underline;
}
nav ul li ul li a {
	color: white;
}

#menu ul ul{
	display: none;
	position: absolute;
	left: 63%;
	width: 200px;
	text-align: left;

	/*top: 10%;*/
	/*float: right;*/
}

#menu ul li ul li{
	padding: 0.5em;
	margin: 0;
	background: rgba(255,0,0,0.7);
	position: relative;
	right: 60%;
	text-align: left;
	display: block;
}
#menu ul li ul li:hover{
background: rgba(255,0,0,0.7);
}
/* NO LO ALTERA
#menu ul li ul li a{
	margin: 10em;
	width: 5em;
}
*/
#menu ul li ul{
	vertical-align: bottom;
	top: 30%;
}
#menu ul li li{
	margin: 10em;
}

#menu ul li:hover > ul {
	display: block;
}
/*TIPOGRAFIAS, CUERPO Y GENERALES*/
#pagina{
	padding-top: 3em;
	display: block;
}


h1{
	font-family: 'Comfortaabold';
	margin: 2em 0 0 0 ;/* 40% 0 40%;*/
	font-size: 3em;

}


h2{ 
font-family: 'Comfortaaregular';
display: inline-block;
right: 0;
margin: 0;
font-size: 3em;
}

h3{
	font-family: 'Comfortaaregular';
}

p{
	font-family: 'Comfortaaregular';
}
.titulo-b{
	margin: 0 50%;
	display: block;
}

p.ver-galeria{
font-family: 'Comfortaaregular';
text-decoration: none;
display: inline-block;
float: right;
color: gray;
margin: 0;
padding: 0.75em 0 0 0;
}

p.lista-galeria{
font-family: 'Comfortaaregular';
text-decoration: none;
display: block;
margin: 1.5em 0 0 0;
padding: 0 0 0 0;
}



a{text-decoration: none;
color: gray;}
a:hover{
color: red;	
}

.cabecera{
	height: 3em;
	margin: 2em 0 0 0;
}
/*pagina index */


/*
.presentacion-1, .presentacion-2 .presentacion-3{	
	font-family: 'Comfortaabold';

}*/
/*INDEX*/
/*#foto-presentacion{
	margin: 0 0 0 1em; 
	width: 500px;
}*/

.index{
	margin-top: 3em;

}
.foto-index{
width: 80%;
margin: 0 auto;
max-width: 1200px;
display: block;
}
.cuadro-index{
	background: rgba(255,0,0,0.7);
}

.texto-presentacion{
	display: block;
	margin: 0 auto;
	width: 80%;
	max-width: 1000px;

}
.boton-home{
	width: 460px;
	height: 130px;
	background: red;
	margin: 10px 10px;
}

.presentacion-1{
	margin: 12px 0 auto 14px;
	width: 100%;
	color:rgba(0,0,0,1);
	font-size: 33px;
	font-family: 'ComfortaaRegular';
	color: rgba(255,0,0,1);

}

.presentacion-2{
	color:rgba(255,255,255,1);
	font-size: 33px;
	font-family: 'ComfortaaRegular';
}
.presentacion-3{
	color:rgba(255,255,255,1);
	font-size: 33px;
	width: 100%;
	font-family: 'Comfortaaregular';
}
h3.presentacion-4{
	color:rgba(255,255,255,1);
font-family: 'Comfortaaregular';
	font-size: 33px;

}

/*disenyador*/

.holo{
	
	margin-left: auto 0;
}
h1.diseno{
	margin: 0 auto 0 80px;
	color: #EA5297;
	padding-top: 3em;

}
.construccion{
	margin: 0 auto;
}

.logo-holo{
	margin: auto ;
	width: 50%;
	
}

/*PAGINA DE FOTOGRAFO*/

/*PARA 8 FOTOGRAFIAS*/
@keyframes transition{
	0%{left: 0%;}
	11%{ left: 0%;}
	22%{ left: -100%;}
	33%{ left: -200%;}
	44%{ left: -300%;}
	55%{ left: -400%;}
	66%{ left: -500%;}
	77%{ left: -600%;}
	88%{ left: -700%;}
	100% {left: -700%;}
}

/*PARA 6 FOTOGRAFIAS*/
@keyframes transition-2{
	0%{left: 0%;}
	14%{ left: 0%;}
	28%{ left: -100%;}
	42%{ left: -200%;}
	56%{ left: -300%;}
	70%{ left: -400%;}
	84%{ left: -500%;}
	100%{ left: -500%;}
}
/*PARA  5 FOTOS*/
@keyframes transition-3{
	0%{left: 0%;}
	16%{ left: 0%;}
	32%{ left: -100%;}
	48%{ left: -200%;}
	64%{ left: -300%;}
	80%{ left: -400%;}
	100%{ left: -400%;}
}

.imagen{
	width: 12.5%;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
}
/*
#identidad{
	position: relative;
	float: left;
}*/



#contenedor {
	position: relative;
	width: 800%;
	margin: 0;
	left: 0;
	float: left;
	animation: 64s transition infinite;
	padding: 0;
}
#marco{
	margin:  1em auto 3em auto;
	width: 87%;
	overflow: hidden;
	max-width: 800px;
	padding: 0;
}

#contenedor-2 {
	position: relative;
	width: 800%;
	margin: 0;
	left: 0;
	float: left;
	animation: 48s transition-2 infinite;
	padding: 0;
}
#marco-2{
	margin:  0 auto 3em auto;
	width: 87%;
	overflow: hidden;
	max-width: 800px;

}

#contenedor-3 {
	position: relative;
	width: 800%;
	margin: 0;
	left: 0;
	float: left;
	animation: 20s transition infinite;
	padding: 0;
}
#marco-3{
	margin:  0 auto 3em auto;
	width: 87%;
	overflow: hidden;
	max-width: 800px;

}

#contenedor-4 {
	position: relative;
	width: 800%;
	margin: 0;
	left: 0;
	float: left;
	animation: 20s transition infinite;
	padding: 0;
}
#marco-4{
	margin:  0 auto 3em auto;
	width: 87%;
	overflow: hidden;
	max-width: 800px;

}

#contenedor-5 {
	position: relative;
	width: 800%;
	margin: 0;
	left: 0;
	float: left;
	animation: 20s transition-2 infinite;
	padding: 0;
}
#marco-5{
	margin:  0 auto 3em auto;
	width: 87%;
	overflow: hidden;
	max-width: 800px;
}


/* INTENTOR PARA ELIMINAR EL ESPACIO QUE DEJABA a BAJO LAS FOTOS
.grid-item a{
	vertical-align: top;
	background-color: green;
	padding-bottom: 0px;
	margin-bottom: 350px;
}
.grid-item a img{
	height: 250px;
	margin-bottom: 0;
	padding-bottom: 0;
}*/
/*PAGINA DE INICIO*/

.home{
	background: red;
	width: 75%;
	margin: 0 auto;
}
	
.presentacion{
	margin: 5em 11% 0 25%;
	/*background: rgba(0,0,0,0.5);*/
	display: block;
	z-index: -1;
}

#fotoprincipal{
	width: 200px;
	display: block;
	margin: 1em 50% 0 50%;	
	z-index: 0;
	opacity: 0.8;
	position: fixed;

}
@keyframes circular{
	0%{width: 800px; height: 800px;}
	25%{width: 700px; height: 700px}
	50%{width: 550px; height: 550px}
	75%{width: 750px; height: 750px}
	100%{width: 800px; height: 800px}
}

.circulo{
	/*margin-top: 10em;*/
	background: radial-gradient(rgba(255,0,0,0.8)0%, rgba(255,0,0,0.5)40%,rgba(255,0,0,0.3)50%,
		rgba(255,255,255,1)60%,rgba(255,255,255,1)70%);
	margin: 0 auto;
	height: 700px;
	width: 700px;
	border-radius: 500px 500px 500px 500px;
	z-index: -3;
	animation: 5s circular infinite;
}
.pagehome{
	padding-top: 2em;
}

/*.pagehome{
	background: radial-gradient(rgba(255,255,255,1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0,0,0,1) 50%);
	background: -webkit-radial-gradient(rgba(255,255,255,1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0,0,0,1) 50%));
	background: -moz-radial-gradient(rgba(255,255,255,1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0,0,0,1) 50%));
}*/

/*GALERIAS COMPLETAS DE FOTOGRAFIAS*/
.galeriadepagina{
	padding-top: 3em;
}
.grid-item:hover{
	background: rgba(255,0,0,0.7);
	border: solid 2px(255,0,0,0.7);
}
.grid-item{
	float: left;
	margin: 5px;
}
.grid{
	margin: 0 50px 0 150px;
}
.titulo-galeria-2{
	margin: 2em 33% 10px 33%;
	font-size: 3.5em;	
}
.titulo-galeria-3{
	font-size: 3.5em;
}
.titulo-galeria{
	margin: 2em 0 0 150px;
}
/*
pagina actor
*/
#pagina-2{
	padding:  1.7em 0 0 0;
}
.videobook{
	width: 80%;
	margin: 2em 10% 010%
/*padding: 100px auto 0 auto;
*/}
video{
	margin:0;
	width:100%;
}
#marco-6{
	margin:  1em auto 3em auto;
	width: 50%;
	overflow: hidden;
	max-width: 800px;
	padding: 0;
	display: inline-block;
	vertical-align: top;
	margin-left: 7%;
}
#contenedor-6 {
	position: relative;
	width: 800%;
	/*margin: 0 ;*/
	margin: 4em 0 0 0; 
	left: 0;
	float: left;
	animation: 40s transition-3 infinite;
	padding: 0;

}


.imagen-6{
	width: 12.5%;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
}
.presentacion-actor{
	width: 40%;
display: inline-block;

vertical-align: top;
}
.experiencia-video{
	width: 40%;
	display: inline-block;
	vertical-align: top;
	}
.experiencia-teatro{
		width: 40%;
	display: inline-block;
	vertical-align: top;
	margin-left: 7%;
}

.texto-imagen{
	width: 80%;
	margin: 5em 10% 0 10%;
}
.experiencia{
	width: 80%;
	margin: 3.5em 10% 0 10%;

}

@media screen and (max-width: 480px) and (min-width: 250px){
	h1{
		font-size: 2em;
	}
	#pagina{padding-top:3em;
	}
	.cajamenu{
		display: none;
		background: rgba(255,0,0,1);
		margin-right: 0;
		text-align: right;
	}
	.botonmenu{
		display: inline-block;
	}
	.botonmenu:hover + .cajamenu, .cajamenu:hover{
	display: block;
	}
	.identidad{
		margin-right: 0;
		width: 200px;
		padding-left: 0.5em;
		margin-bottom: 0;
		padding-bottom: 0;

	}
	nav:hover{
	background: rgba(255,0,0,1)
}

	nav ul li{
		display: block;
		padding:  0.5em;
		right: 45%; 
		margin-right: 0em;
		text-align: right;
		border-bottom:1px solid white;
	}
	nav ul{
		margin-top: 0;
		padding-right: 0;
	}
	nav ul li a{
		color: white;
		padding-right: 0em;
	}
	nav ul li ul li{
		left:70%;
		text-align: left;
		width: 100%;
		padding-left: 0;
		background: rgba(255,0,0,1);
		top: 110%;

	}
	nav ul li ul{
		background: rgba(255,0,0,0);
		padding-left: 0;
		padding-right: 0;
		top:150%;
		left:200%;
		border:none;
		
	}
	nav ul li ul li a{
		padding-left: 0;
		top: 150%;
	}
	#menu ul li ul li{
		background: rgba(255,0,0,1);
	}
	#menu ul li ul li:hover{
    background: rgba(255,0,0,1);
    }
    .grid{
    	margin: 0 25px;
    }
    .titulo-galeria{
	margin: 2em 33% 10px 33%;
	font-size: 3em;
	}
	h2{font-size:2em;
}
.experiencia-teatro{
	width: 80%;
	margin: 0 auto;
}
.experiencia-video{
	width: 80%;
	margin: 0 auto;
}
.presentacion-actor{
	
	display: block;
	width: 100%;
}

#marco-6{
	width: 90%;
	margin: 0 auto;
	
}

}



@media screen and (max-width: 790px) and (min-width: 481px){

h2{font-size:2em;
}
.presentacion-actor{
	display: block;
	width: 90%;
}

#marco-6{
	width: 90%;
	margin: 0 auto;
}

.experiencia-teatro{
	width: 80%;
	margin: 0 auto;
}
.experiencia-video{
	width: 80%;
	margin: 0 auto;
}

	.identidad{
		margin-left: 0;
		width: 200px;
		padding-left: 0.5em;
	}
	
	nav:hover>.identidad{
	background-image: url("imagenes/roraulornelasan.svg");
	margin-left: 0;
	padding-left: 0em;
	width: 200px;
	}

	.cajamenu{
		padding-top: 2.5em;
		padding-right: 0em;
		margin-right: 0em;
		padding-bottom: 0em;
		margin-bottom: 0em;

	}
	#pagina{
		padding-top: 4.5em;
	}
	.galeriadepagina{
		padding-top: 5em;
	}
	.grid{
		margin: 0 20%;
	}
	/*body{background: blue}*/
	 .titulo-galeria{
	margin: 2em 15% 10px 15%;
	font-size: 45px;
	}
	h2{
		font-size: 2em;
	}

}
@media screen and (max-width: 480px) and (min-width: 1px){ 
	.titulo-galeria{
	margin: 2em 15% 10px 15%;
	font-size: 40px;
	}

}

@media screen and (max-width: 1460px) and (min-width: 791px){
	h1{
		font-size: 3em;}
	h2{}
	h3{}

}

@media screen and (max-width: 1920px) and (min-width: 1461px){
	h1{
		font-size: 3em;}
	#marco{
		max-width: 1000px;
	}
	#marco-2{
		max-width: 1000px;
	}
	#marco-3{
		max-width: 1000px;
	}
	#marco-4{
		max-width: 1000px;
	}
	#marco-5{
		max-width: 1000px;
	}

}

	/*body{
		background: green;
	}*/


@media screen and (max-width: 2600px) and (min-width: 1921px){
	h1{
		font-size: 3em;}
	/*.grid-item{
		width:  500px;
	}
	.grid-item a img{
		width: 500px;
	}
	.grid-item--width2{
		width: 250px;
	}*/
	#marco{
		max-width: 1300px;
	}
	#marco-2{
		max-width: 1300px;
	}
	#marco-3{
		max-width: 1300px;
	}
	#marco-4{
		max-width: 1300px;
	}
	#marco-5{
		max-width: 1300px;
	}

	
}


.construccion{
	
	max-width: 800px;
	margin:0 auto;
}

.nota-kaleos{
	font-size: 25px;
	color: red;
}