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

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond|Crete+Round|Old+Standard+TT|PT+Sans+Caption');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond|KoHo');
@import url('https://fonts.googleapis.com/css?family=KoHo|Roboto+Condensed');

*{padding:0; margin:0}

body{font-family: 'Cormorant Garamond', serif;; font-size:15px;}

#main{ width:100%; height:auto; top:0; left:0;}

nav{ width:25%; height:100vh; position:fixed; background-color:#FFF;}

.logo{ width:100%; height:auto; postion:absolute; margin-top:20px;}
.logo img{width:70%; height:auto; margin-left:15%;}

.logoRes{ width:100%; height:auto; postion:absolute; padding-top:0px;  display:none;}
.logoRes img{width:30%; height:auto; margin-left:3%; position:absolute; z-index:10; margin-top:20px}

section{position:absolute; margin-left:25%}

#bgindex{ width:75%; height:100vh;}

#bgacerca{width:75%; height: 100vh;  font-family: 'Roboto Condensed', sans-serif;
font-family: 'KoHo', sans-serif; font-size:18px; background:url(../img/acerca.png) no-repeat center center fixed; background-size:cover;  background-attachment: fixed;
  overflow-x: hidden; overflow-y: scroll}

#revista{ width:75%; height:100vh; background-color:#DEE5C3;  background-size:cover;  background-attachment: fixed;
  overflow-x: hidden; overflow-y: scroll }
  
#obras{ width:75%; height:100vh;  background-size:cover;  background-attachment: fixed;
  overflow-x: hidden; overflow-y: scroll }
  
#videos{width:75%; height:100vh; background-color:#e0e2dd;  background-size:cover;  background-attachment: fixed;
  overflow-x: hidden; overflow-y: scroll }

#fotografia{width:75%; height:100vh; background:url(../img/fondo.png);  background-size:cover;  background-attachment: fixed;
  overflow-x: hidden; overflow-y: scroll }
  

.social{ width:100%; height:auto; position:absolute; bottom:0; text-align:center; margin-bottom:20px;}
.social p{ font-size:16px; color:#333;}
.social a:link{ color: #8a1000; text-decoration: none; font-weight: bold}
.social a:visited{ color: #8a1000; text-decoration: none}

.socialRes{ width:100%; height:46px; position:fixed; bottom:0; text-align:center;  display:none;}

.socialRes2{ width:100%; height:auto;  bottom:0; text-align:center; margin-bottom:20px;  font-size:14px }

.socialRes p{ font-size:14px !important; color:#900 !important; margin-top: 1px}


header{ display: none}


.navegation{ width:140px; height:420px; position:absolute; top:50%; left:50%; margin-top:-200px; margin-left:-70px;}
.navegation ul li{ list-style:none; font-size:22px; letter-spacing:5px;}
.marginTop{ margin-top:37px;}
.navegation ul li a:link{ text-decoration:none; color:#000;} 
.navegation ul li a:visited{ text-decoration:none; color:#000;} 
.navegation ul li a:hover{ color:#F00;} 
.active{ color:#F00 !important;}

.infoacerca{width:40%; height:auto; margin:5% 30% 0 30%; }

.infoacerca ul{margin:30px 0 30px 90px}
.infoacerca ul li{ color:#fff;}


.infoacerca p{ color:#FFF; text-align:center; line-height:27px}
.infoacerca  h2{ color:#FFF; text-align:center; margin:22px; font-size:30px; letter-spacing:5px;}

.infoacerca  h3{ color:#FFF; margin:60px 20px 30px 20px; font-size:24px; text-align:center; letter-spacing:5px;}

.infoacerca hr{ background:#85d0b5; height:5px; border:none; margin-bottom:30px}

.institucion{ width:80%; height:40%; margin:40px 0 40px 10%}
.institucion img{ width:40%; height:auto; margin-left:6%}



.calaveras{ width:80%; height:100vh; }
.calaveras img{ width: 100%; height:auto; position: absolute; top: 50%; left: 50%; margin-top: -15%; margin-left: -50%;}


.banner{ width:100%; height:100vh; animation: banner 40s infinite;}

/*Imagenes revista*/
.contenedor {
	width:94%;
	height:100vh;
	margin:15px 0 0 2%;
	
}

 
.elemento {
	width:22%;

	background:#fff;
	float:left;
	margin-bottom:15px;
	box-shadow:0 1px 2px 0 rgba(0,0,0,0.22);
	margin-left:3%; 
	text-align:center;
	font-weight:bold;
}

.elemento2 {
	width:30.33333%;

	background:#fff;
	float:left;
	margin-bottom:15px;
	box-shadow:0 1px 2px 0 rgba(0,0,0,0.22);
	margin-left:3%; 
	text-align:center;
	font-weight:bold;
}



 
.elemento p {font-size:13px; color:#000; font-family: 'KoHo', sans-serif; margin:10px; height:70px;}
.elemento2 p {font-size:13px; color:#000; font-family: 'KoHo', sans-serif; margin:10px; height:70px;}

.style {font-size:13px; color:#000; font-family: 'KoHo', sans-serif; margin:10px; height:30px !important;}
 
.elemento img {
	width:100%;
	height: auto;
}

.elemento2 img {
	width:100%;
	height: auto;
}



.titleRevista{ display:none}
.calaveras2{ display:none;}


@keyframes banner{ 

0%, 5%{ background:url(../img/bgdesktop/img1.gif) no-repeat center center; background-size:cover; }

10%, 15%{ background:url(../img/bgdesktop/img2.gif) no-repeat center center; background-size:cover }

20%, 25%{ background:url(../img/bgdesktop/img3.gif) no-repeat center center; background-size:cover }

30%, 35%{ background:url(../img/bgdesktop/img4.gif) no-repeat center center; background-size:cover}

40%, 45%{ background:url(../img/bgdesktop/img5.gif) no-repeat center center; background-size:cover }

50%, 55%{ background:url(../img/bgdesktop/img6.gif) no-repeat center center; background-size:cover  }

60%, 65%{ background:url(../img/bgdesktop/img7.gif) no-repeat center center; background-size:cover}

70%, 75%{ background:url(../img/bgdesktop/img8.gif) no-repeat center center; background-size:cover }

80%, 85%{ background:url(../img/bgdesktop/img9.gif) no-repeat center center; background-size:cover  }

90%, 95%{ background:url(../img/bgdesktop/img10.gif) no-repeat center center; background-size:cover }

100%, 0%{ background:url(../img/bgdesktop/img6.gif) no-repeat center center; background-size:cover ;}}



@media screen and (max-width:1100px){
	
nav{ display:none; position:absolute;}

section{ width:100%;  float:none; background-size:cover; margin-left:0}

.socialRes{ background-color:#000; display:block; margin-top: 200px}

.socialRes2{display:inline-block}
.socialRes p{ font-size:16px; color:#FFF !important;  font-weight:bold !important }

.logoRes{display:block;}
	
/*Menu responsivo*/
	
	header{
	position:fixed;
	width:100%; 
	background:#ffffff; 
	line-height:60px;
	border-bottom:1px solid #dddddd;
}
.hamburger{

  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
  background-color:#000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#000;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background-color:rgba(255,255,255,.8);  position:absolute; text-align:center; font-size:12px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:27px 0 27px 0; border-bottom:#dddddd 1px solid; font-size:15px;}
.menu li:hover{display: block;    background:#ffffff; padding:27px 0 27px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
.menu ul li a:hover {  color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}
header{display:inline-block; font-size:12px; position:absolute}
span{padding-left:20px;}
a{color:#336699;}

#bgindex{ width:100%;}

#bgacerca{width:100%;  }
.infoacerca{width:60%; height:auto; margin:5% 20% 0 20%; }

#revista{ width:100%; }

  
#obras{ width:100%;  }



.calaveras{ width:100%; height:auto;}
.calaveras img{ width: 100%; height:auto; position: absolute; top: 50%; left: 00%; margin-top:-18%; margin-left: 0%;}

.banner{ display:none !important}

.celular{ width:100%; height:100vh; animation: celular 20s infinite; display:inline-block; position:absolute}

#videos{width:100%;  }

#fotografia{width:100%; }

@keyframes celular{ 

0%, 5%{ background:url(../img/bgmobile/img1.gif) no-repeat center center; background-size:cover; }

10%, 15%{ background:url(../img/bgmobile/img2.gif) no-repeat center center; background-size:cover }

20%, 25%{ background:url(../img/bgmobile/img3.gif) no-repeat center center; background-size:cover }

30%, 35%{ background:url(../img/bgmobile/img4.gif) no-repeat center center; background-size:cover}

40%, 45%{ background:url(../img/bgmobile/img5.gif) no-repeat center center; background-size:cover }

50%, 55%{ background:url(../img/bgmobile/img6.gif) no-repeat center center; background-size:cover  }

60%, 65%{ background:url(../img/bgmobile/img7.gif) no-repeat center center; background-size:cover}

70%, 75%{ background:url(../img/bgmobile/img8.gif) no-repeat center center; background-size:cover }

80%, 85%{ background:url(../img/bgmobile/img9.gif) no-repeat center center; background-size:cover  }

90%, 95%{ background:url(../img/bgmobile/img10.gif) no-repeat center center; background-size:cover }

100%, 0%{ background:url(../img/bgmobile/img6.gif) no-repeat center center; background-size:cover ;}


}

.infoacerca{margin:15% 20% 0 20%; }
	
	
.contenedor {
	margin:240px 0 80px 2%;
	
}

.elemento {
	width:29.333333333333333%;
	margin-left:3.6%;
	
}

.elemento2 {
	width:46%;
	margin-left:4%;
	
}



.titleRevista{ width:100%; height:auto; position:absolute; margin-top:150px; }	
.titleRevista h2{ text-align:center; font-size:40px }
	


@media screen and (max-height:768px){
	
.navegation{ height:300px; margin-top:-130px;}
.marginTop{ margin-top:30px;margin-left:6%;
}


	
	

	
}

@media screen and (max-width:768px){
	
.logoRes img{width:40%; height:auto; margin-left:3%;}
.calaveras img{ width: 100%; height:auto; position: absolute; top: 50%; left: 00%; margin-top:-18%; margin-left: 0%;}

.infoacerca{margin:20% 20% 0 20%; }

.elemento {
	width:44%;
	margin-left:5%;
}


}

@media screen and (max-width:590px){
	
.logoRes img{width:60%; height:auto; margin-left:3%;}
.calaveras img{ width: 100%; height:auto; position: absolute; top: 50%; left: 00%; margin-top:-20%; margin-left: 0%;}

.infoacerca{width:80%; height:auto; margin:37% 10% 0 10%; }
.correo{ font-size:14px !important}
	
	.elemento {
	width:90%;
	margin-left:5%;
}

	.elemento2 {
	width:90%;
	margin-left:5%;
}


/*efecto pinteres*/



}

@media (orientation: portrait) {
	#portrait{
		display: block;
          }
		  
	
}