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

* {
margin:0;
padding:0;
}

/*Estilos Base*/
.contenedor-img {
width: 300px;
height: 200px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
}
.contenedor-img .mascara,.contenedor-img .contenido {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
display: block;
position: relative;

}
.contenedor-img h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.9);
margin: 20px 0 0 0
}
.contenedor-img p {
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 10px;
text-align: center
}
.contenedor-img a.link {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #222;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
box-shadow: 0 0 5px #000
}
/*Ejemplo 5*/
.ejemplo-5 img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;

}
.ejemplo-5 .mascara {
 width:100%;
    height:100%;
background-color: rgba(221, 224, 255, 0.9);
transition: all 0.5s linear;
opacity: 0;
}
.ejemplo-5 h2{
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #6d7b7b;
transition: all 0.5s linear;
opacity: 0;
}
.ejemplo-5 p {
color: #6d7b7b;
font-size: 1em;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.ejemplo-5 p a {

font-size: 1.5em;

}
.ejemplo-5 a.link {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
background-color: rgba(119, 80, 21, 0.9);
}

.ejemplo-5:hover img {
transform: scale(10);
opacity: 0;
}
.ejemplo-5:hover .mascara {
opacity: 1;
}
.ejemplo-5:hover h2,
.ejemplo-5:hover p,
.ejemplo-5:hover a.link{
transform: scale(1);
opacity: 1;
}


#cartel1 {
    width:100%;
    height:auto;
    margin-top: -7px;
    background-image: url("../imagenes/fondo_iconos.jpg");
    background-repeat: repeat-x;
    float:left;

}

.cabecera {
  width: 100%;
  height: 0;
  padding-bottom: 35%;
  overflow: hidden;
  position: relative;
}
header img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  margin: auto;
  padding: 0;
}



.titulo {
color:#2E9AFE;
  font-family: 'Josefin Sans', sans-serif;
   font-size: 30pt;
   letter-spacing: 3px
}

h2 .txt_centrado {
color:red;
margin-top: 2%;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
  font-family: 'Josefin Sans', sans-serif;

}

.txt_centrado {
margin-top: 2%;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 2%;
  font-family: 'Josefin Sans', sans-serif;

}
.txt_var {

  font-size: 2em;
  font-family: 'Josefin Sans', sans-serif;

}


#caja1{
  width:100%;
   height:auto;
    text-align: left;
    background-color: #F2F2F2;
     background-image:url(../imagenes/fondo_iconos_1.jpg);
    float:left;

}
#cajas {

    width:25%;
    height:auto;
    background-color:#FFFFFF;
    text-align:center;
    float:left;

}
#cajas1 {

    width:25%;
    height:auto;
    background-color:#f2f2f2;
    text-align:center;
    float:left;

}

#p0 {
display: none;
}

#franjapie {
position:relative;
width:100%;
background-color:#ccc;
float:left;

}

#info {
margin-top:1em;
margin-bottom:1em;
width:100%;
font-family: 'Fjalla One', sans-serif;
text-align:center;
color:#FFFFFF;
background-color:#ccc;
float:left;
}


#pie{
    width:100%;
    max-width:1500px;
    text-align:left;
    color:#000000;
    background-color:#F2F2F2;
    z-index: 9;

}


@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}


@media (max-width: 730px) {
    #cajas, #cajas1 {
        width:50%;


    }



@media (max-width: 570px) {
    #cajas, #cajas1 {
        width:100%;


    }