*{margin: 0; padding: 0}


body{background: #edf2f4; font-family: 'Open Sans', sans-serif; max-width: 960px; margin: 0 auto 0 auto; min-height: 500px; font-size: 14px}
.pagina {width: 960px; height: 650px}

header{background: #edf2f4; margin-left: 40px; margin-top: 20px;}
header nav {;}
header nav ul {list-style-type: none}
header nav ul li {display: block; line-height: 240%}
header nav ul li a { color: #34A0B2;text-decoration: none; padding: 13px; display: inline; font-size: 14px}

a.menu1:hover {background-color: #fe9e92; border-radius: 10px; transition: all 300ms; color: #edf2f4;}



.imagen1 {margin-bottom: 25px;}
.mapasitio {color: #fe9e92}
.titulos {font-size: 15px; color: #fe9e92; margin-bottom: 8px; font-weight: 700}
.linea {border-style: solid; margin-bottom: 3%; margin-top: 2%; border-color: #fe9e92} 
.textoseccion {font-size: 11px; color: #7e7e7e;}



section { background: #edf2f4; min-height: 500px}




.textoseccion {font-size: 10px; color: #7e7e7e; margin-top: 20px}
.dest1 {font-weight: bold}
.dest2 {font-style: italic}

footer {height: 100px}
.separador {clear: both; margin-left: 40px}
.piepagina {font-size: 8px; color: #7e7e7e; text-align: center; width: 100%}


.xleft {position: relative; float: left; width: 20%}
.xright {position: relative; float: right; width: 75%; margin-top: 20px}
.yleft {position: relative; float: left; width: 260px; height: 125px}
.yleft2 {position: relative; float: left; width: 200px; height: 125px}

.ancho100 {width: 100%}
.ancho80 {width: 80%}
.ancho70 {width: 70%}

.ancho20 {width: 20%}
.margen1 {margin-left: 70px; margin-top: 20px}
.margin5 {margin-top: 5%}
.margin17 {margin-top: -17%}
.marginleft30 {margin-left: 30%}
.marginleft5 {margin-left: 5%}

.marginbottom10 {margin-bottom: 10%}

.mapalink {font-size: 0.7rem; color: #34A0B2; background-color: none; text-decoration: none; padding: 1%}
.menumapa {color: #34A0B2; text-decoration: none; }
a.menumapa:hover {color: #fe9e92}

.floatleft {position: relative; float: left}
.bold {font-weight: 700}
video {width: 100%}

.caja320 {position: relative; float: right; margin-top: 5%}

/*RESPONSIVE*/

@media screen and (max-width: 768px){

    *{transition: 1s}
    .xleft {position: relative; float: left; width: 100%}
    .xright {position: relative; float: left; width: 99%; margin-left: 1%}
    header nav ul li {display: inline; width: 100%; }
    header nav ul li a {padding: 5px}
    .separador {margin-left: 3%;  margin-top: 30%;  margin-right: 3%;}
    .cajaplan {width: 50%; margin-left: 5%}
    .caja320 {width: 100%; position: relative; float: left; margin-left: 5%; margin-top:  10%}
}


@media screen and (max-width: 480px){

    *{transition: 1s}
    header nav ul li {display: block; width: 100%; }
    .r480 {display: none}
    .caja480 {position: relative; float: left; width: 100%; margin-left: 5%; margin-bottom: 5%; margin-top: 5%}
    .titulos {font-size: 16px}
    .textoseccion {font-size: 12px}
    .cajaplan {width: 40%}
    
}
@media screen and (max-width: 320px){

    *{transition: 1s}
   
    .caja480 {margin-left: 3%}
    .caja320 {margin-top: 5%; margin-left: 15%}
    .cajaplan {margin-bottom: 10%}
}