body {
    
    font-size: 100%; 
    background-color: #e8e8d0;
    font-family: sans-serif;
    max-width: 1200px;
    margin: auto;
    text-decoration: none;
}


.redes{
    
    margin: 0px;
    padding: 0px;
    -webkit-box-sizing:border-box;
    -moz-box--sizing:border-box;
    box-sizing: border-box;
    
    position: fixed;
    right: 0;
    top: 300px;
    z-index: 2000;
    
}


.redes ul{
 
    list-style: none;
    
    
}


.redes ul li a{
    
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 20px 15px;
    text-decoration: none; 
    -webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms 
}


.redes ul li .icon-facebook{ 
    
    background: #3b5998;

}

.redes ul li .icon-twitter{ 
    
    background:#00abf0 ;
}

.redes ul li .icon-google{ 
    
    background:#d95232 ;
}

.redes ul li .icon-pinterest{ 
    
    background:#ae181f ;
}

.redes ul li .icon-mail{ 
    
    background: #666666;
}


.redes ul li a:hover{
 
    padding: 30px 15px;
    background: #000;
    
}

#barra1 {
    
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style:none;
    display: inline-block;
    text-align: center;
    
}
  


.registro {
 
    background: #00d49c;
    text-decoration: none;
    color: #fddf03;
    display: inline-block;
    font-size: 20px;
    margin: 20px;
    left: 250px;
    padding: 10px 50px;
    text-align: right;
    width: 900px;
    box-shadow: 0px 3px 0px #03a87d;
    position: absolute;
}

.registro:hover{
  color:  #fff;
  
}


.registro1 {
 
    background: #ff005c;
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    text-align: right;
    margin: 20px;
    left: 250px;
    padding: 10px 20px;
    width: 750px;
    box-shadow: 0px 3px 0px #bc0044;
    position: absolute;
   
}

.registro1:hover{
  color:  #fddf03;
  
}


.registro2 {
 
    background: #0185b6;
    text-decoration: none;
    color: #fddf03;
    display: inline-block;
    font-size: 20px;
    margin: 20px;
    left: 250px;
    padding: 21px 50px;
    text-align: right;
    width: 450px;
    box-shadow: 0px 3px 0px #016184;
    position: absolute;

    
    
}


.home {
   
    border-radius: 4px;
    width: 230px; 
   
    
    
}




#nav{
    
    margin: 0px;
    padding: 0px;
    width: 1200px;
    font-family: sans-serif;
    
}

ul,ol {
list-style: none;
}

.menu{
    position: absolute;
    margin-left: 195px;
    margin-top: -90px;
}
.menu li a{
    background:#fddf03;
    color: #0185b6;
    text-decoration: none;
    padding: 15px 10px;
    display: block; }

.menu li a:hover{
    color: #ff005c;
    font-weight: bold; 
}

.menu >li{
    float: left;   
}


.menu li ul{
    display: none;
    position: absolute;
    min-width: 140px;
}

.menu li:hover >ul{
    display: block;  
}



.comollegar {
    
    color: #ff005c;
    font-weight: bold; 

}

.imagenes{   
  width: 500px;
  height: 200px;
  top:200px;
  left: 0;
  right: 0;
  margin: 0 auto;
  
}

.imgefecto{
    display: block;
    margin-left: -300px;
    margin-right: 0px;
    width: 1100px;
    height: 1000px;
     overflow:hidden;
    }

.foto {
        display:block;
        margin-left: 0px;
        margin-right: 0px;
        width: 2200px;
        height: 500px;           
        margin-left: 0px;
        -webkit-transition: margin 1s ease;
        -moz-transition: margin 1s ease;
        -o-transition: margin 1s ease;
        -ms-transition: margin 1s ease;
        transition: margin 1s ease;   
    }      
 
.foto:hover{
       margin-left: -1150px;   
       }


/*IMAGEN1*/

.tap {
    
  width: 350px;
  height: 350px;    
}

 .top {
    
  width: 350px;
  height: 350px;    
}

.contenedor {
  
  position: relative;
  margin-bottom: 0px;
  margin-left: 50px;
  margin-right: 0px;
  margin-top: 350px;
}

.contenedor img {
  position: absolute;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.contenedor img.top:hover {
  opacity: 0;
}


/*IMAGEN2*/

.tap2 {
    
  width: 700px;
  height: 350px;    
}

 .top2 {
    
  width: 700px;
  height: 350px;    
}

.contenedor2 {
  
  position: relative;
  margin-bottom: 0px;
  margin-left: 450px;
  margin-right: 0px;
  margin-top: 350px;
}

.contenedor2 img {
  position: absolute;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.contenedor2 img.top2:hover {
  opacity: 0;
}


/*IMAGEN3*/

.tap3 {
    
  width: 535px;
  height: 150px;    
}

 .top3 {
    
 width: 535px;
  height: 150px;    
}

.contenedor3 {
  
  position: relative;
  margin-bottom: 0px;
  margin-left: 50px;
  margin-right: 0px;
  margin-top: 750px;
}

.contenedor3 img {
  position: absolute;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.contenedor3 img.top3:hover {
  opacity: 0;
}


/*IMAGEN4*/

.tap4 {
    
  width: 535px;
  height: 150px;    
}

 .top4 {
    
  width: 535px;
  height: 150px;    
}

.contenedor4 {
  
  position: relative;
  margin-bottom: 0;
  margin-left: 620px;
  margin-right: 0px;
  margin-top: 750px;
}

.contenedor4 img {
  position: absolute;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.contenedor4 img.top4:hover {
  opacity: 0;
}


.final{

margin: auto;
margin-top: 500px;
text-align: center;
margin-bottom: 50px;
}

.final2{

margin: auto;
margin-top: 950px;
text-align: center;
margin-bottom: 50px;
}


.final3{
  margin: auto;
margin-top: 450px;
text-align: center;
margin-bottom: 50px;  
}



/////////////////////////////////////////////*INICIO HTML */////////////////////////////////////////////////////////



.aimagenes{   
  width: 400px;
  height: 150px;
  top:200px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  
}

.aimgefecto{
    display: block;
    margin-left: 400px;
    margin-right: 0px;
    width: 750px;
    height: 600px;
     overflow:hidden;
    }

.afoto {
        display:block;
        margin-left: 0px;
        margin-right: 0px;
        width: 1500px;
        height: 300px;           
        margin-left: 0px;
        -webkit-transition: margin 1s ease;
        -moz-transition: margin 1s ease;
        -o-transition: margin 1s ease;
        -ms-transition: margin 1s ease;
        transition: margin 1s ease;   
    }      
 
.afoto:hover{
       margin-left: -780px;   
       }



/*IMAGEN1*/

.atap1 {
    
  width: 240px;
  height: 240px;   
}

 .atop1 {
    
  width: 240px;
  height: 240px;    
}

.acontenedor1 {
  
  position: relative;
  margin-bottom: 0px;
  margin-left: 400px;
  margin-right: 0px;
  margin-top: -280px;
}

.acontenedor1 img {
  position: absolute;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.acontenedor1 img.atop1:hover {
  opacity: 0;
}


/*IMAGEN2*/

.atap2 {
    
  width: 480px;
  height: 240px;    
}

 .atop2 {
    
  width: 480px;
  height: 240px;    
}

.acontenedor2 {
  
  position: relative;
  margin-bottom: 0px;
  margin-left: 670px;
  margin-right: 0px;
  margin-top: -280px;
}

.acontenedor2 img {
  position: absolute;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.acontenedor2 img.atop2:hover {
  opacity: 0;
}


/*IMAGEN3*/

.atap3 {
    
  width: 350px;
  height: 110px;    
}

 .atop3 {
    
 width: 350px;
  height: 110px;      
}

.acontenedor3 {
  
  position: relative;
  margin-bottom: 0px;
  margin-left: 400px;
  margin-right: 0px;
  margin-top: 270px;
}

.acontenedor3 img {
  position: absolute;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.acontenedor3 img.atop3:hover {
  opacity: 0;
}


/*IMAGEN4*/

.atap4 {
    
 width: 350px;
  height: 110px;      
}

 .atop4 {
    
  width: 350px;
  height: 110px;       
}

.acontenedor4 {
  
  position: relative;
  margin-bottom: 0;
  margin-left: 800px;
  margin-right: 0px;
  margin-top: 270px;
}

.acontenedor4 img {
  position: absolute;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.acontenedor4 img.atop4:hover {
  opacity: 0;
}



#menu2 {
	background: #ff005c;
	position: absolute;
    
}


#menu2 a {
	display: block;
	color: #fff;
	font-size: 18px;
	
    text-decoration: none;
}

#menu2 a:hover {
	background: #e8e8d0;
    color: #ff005c;
}


#menu2 {
	width: 300px;
	height: 370px;
	top: 170px;
    padding-left: 0px;
	z-index: 1000;
}

#menu2 a {
	border-bottom: 1px solid #e8e8d0;
	padding: 20px;
}







#menu3 {
	background: #e8e8d0;
	position: absolute;
    
}


#menu3 a {
	display: block;
	color: #ff005c;
	font-size: 18px;
	
    text-decoration: none;
}




#menu3 {
	width: 300px;
	height: 370px;
	top: 170px;
    padding-left: 0px;
	z-index: 1000;
}

#menu3 a {
	border-bottom: 1px solid #e8e8d0;
	padding: 20px;
}

.calendario{
    
  position: absolute;  
  width:350px;
  height: 400px;
  margin-left: -30px;
  margin-top: 400px;

}