@charset "utf-8";
/* CSS Document */
/* colores */
.aviso footer {
    background: #ff0000;
}
.index footer {
    background: #ff0000
}
.oferta h1,
.oferta h2,
.oferta h3,
.oferta h4,
.oferta h5 {
    color: #ffcc00
}
.oferta footer {
    background: #ffcc00
}
.contacto h1,
.contacto h2,
.contacto h3,
.contacto h4,
.contacto h5 {
    color: #008ecf
}
.contacto footer {
    background: #008ecf
}
.sobre h1,
.sobre h2,
.sobre h3,
.sobre h4,
.sobre h5 {
    color: #00cc33
}
.sobre footer {
    background: #00cc33
}
.color-1 {
    /* verde */
    background: #00cc33;
}
.color-2 {
    /* amarillo */
    background: #ffcc00;
}
.color-3 {
    /* azul */
    background: #008ecf;
}
.color-4 {
    /* naranja oscuro */
    background: #ff9900;
}
.menu .color-1.active,
.menu .color-1:hover {
    background: #00cc33
}
.menu .color-2.active,
.menu .color-2:hover {
    background: #ffcc00
}
.menu .color-3.active,
.menu .color-3:hover {
    background: #008ecf
}
.menu .color-4.active,
.menu .color-4:hover {
    background: #ff9900
}
.cuadros.grande .textos.color-1:hover,
.cuadros.peque .textos.color-1:hover {
    background: #00cc33
}
.cuadros.grande .textos.color-2:hover,
.cuadros.peque .textos.color-2:hover {
    background: #ffcc00
}
.cuadros.grande .textos.color-3:hover,
.cuadros.peque .textos.color-3:hover {
    background: #008ecf
}
.cuadros.grande .textos.color-4:hover,
.cuadros.peque .textos.color-4:hover {
    background: #ff9900
}
/* fin colores */
.menu a {
    background: none
}
/* BLOQUES */
body {
    font-family: Arial, Helvetica, sans-serif
}
#content {
    width: 980px;
    margin: 1em auto 0 auto;
}
header {
    margin: 2em 0;
    overflow: hidden;
}
.cuerpo {
    overflow: hidden;
    clear: both;
    width: 100%;
    /*margin-bottom: 4em;*/
	margin-bottom:2.25em;
}
.index .cuerpo {
    margin-top: 2em;
	margin-bottom: 0;
}
.cuerpo_principal {
    width: 55%;
    float: left;
    overflow: hidden;
	margin-bottom:1.75em;
}
.aviso .cuerpo_principal {
    width: 100%;
    float: none;
}
aside {
    width: 39%;
    float: right;
}
footer {
    margin: 2em 0 0 0;
    padding: 3.5em 1.5em 6em 3em;
    background: #ccc;
    color: #fff;
    text-align: left;
    clear: both;
    overflow: hidden;
    position: relative;
}
.aviso-legal {
    clear: both;
    text-align: right;
    position: absolute;
    right: 35px;
    bottom: 25px;
}
.cuadros {
    font-size: 1.9em;
    padding: 1em;
    overflow: hidden;
    color: #fff;
}
.cuadros.grande {
    width: 39.05%;
    height: 12.64em;
    margin-right: 1.5%;
    float: left;
    padding: 0;
    position: relative;
}
.cuadros.grande .textos,
.cuadros.peque .textos {
    display: block;
    text-decoration: none;
    position: absolute;
    color: #fff;
    background: none;
}
.cuadros.grande .textos {
    padding: 0 1em;
    height: 12.64em;
}
.cuadros.peque {
    width: 18.75%;
    padding: 0;
    float: left;
    font-size: 1.30em;
    height: 8.84em;
    position: relative;
}
.cuadros.peque .textos {
    padding: 0 1em;
    height: 8.84em;
}
.cuadros p {
    margin: 0
}
.cuadros p + p {
    margin-top: .35em
}
.fila-2 .cuadros,
.fila-2 img {
    margin-left: 1.5%
}
.fila-2 > .cuadros:first-child,
.fila-2 > img:first-child {
    margin-left: 0
}
/* cabecera */
.logo {
    float: left
}
.logo a {
    display: block;
    width: 114px;
    height: 114px;
}
.logo a:hover span {
    display: none
}
.logo a:hover {
    background: url(../images/logo-animado.gif)
}
.titulo-web {
    margin-bottom: .6em
}
.titulo-idiomas {
    float: left;
    margin: 1em 2em;
}
.menu {
    text-align: center;
    float: right;
}
.menu-nav {
    margin-top: 0
}
.menu a {
    display: inline-block;
    font-size: 1.35em;
    color: #000;
    text-decoration: none;
    width: 5.25em;
    padding: 2.25em 0 1.75em 0;
}
.menu a:hover,
.menu a.active {
    color: #fff
}
.menu .active {

}
.menu li {
    display: inline-block;
    list-style: none;
    margin: 0;
	margin-left:-.28em;
}
.idiomas ul {
    padding: 0;
    margin: 0;
}
.idiomas li {
    display: inline-block;
    list-style: none;
    font-size: .9em;
}
.idiomas a,
.menu-nav-secundario a {
    color: #999999;
    text-decoration: none;
}
.idiomas a:hover,
.menu-nav-secundario a:hover {
    color: #000
}
header nav {

}
/* fin cabecera */
/* pie */
.columna-1,
.columna-2,
.columna-3 {
    width: 33%;
    float: left;
}
.columna-2 {
    width: 23%;
    padding: 0 3.5%;
    margin: 0 3% 0 .5%;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    overflow: hidden;
}
footer span {
    display: block;
    font-size: 2em;
}
footer a {
    color: #fff;
    text-decoration: none;
}
footer a:hover {
    background: #ff9900
}
footer a:hover .nivel-1,
footer a:hover .nivel-2 {
    background: #ff9900;
    display: inline;
}
footer a:hover .nivel-2 {
    display: inline-block
}
span.nivel-2 {
    font-size: 1.15em;
    margin-top: .5em;
}
span.nivel-3 {
    font-size: 1em;
    margin: .5em 0 1.25em 0;
    background: url(../images/cuadro-blanco.png) left no-repeat;
    padding-left: 1.5em;
}
.redes a {
    display: inline-block;
    margin: 1.5em .5em 0 0;
    width: 56px;
    height: 56px;
}
.redes a.facebook:hover span,
.redes a.twitter:hover span,
.redes a.google:hover span,
.redes a.instagram:hover span {
    display: none
}
.redes a.facebook:hover {
    background: url(../images/facebook-icono_hover.png);
    width: 56px;
    height: 56px;
    overflow: hidden;
}
.redes a.google:hover {
    background: url(../images/google-icono_hover.png);
    width: 56px;
    height: 56px;
    overflow: hidden;
}
.redes a.twitter:hover {
    background: url(../images/twitter-icono_hover.png);
    width: 56px;
    height: 56px;
    overflow: hidden;
}
.redes a.instagram:hover {
    background: url(../images/instagram-icono_hover.png);
    width: 56px;
    height: 56px;
    overflow: hidden;
}
/* fin pie */
aside div {
    margin-bottom: .5em
}
aside img {
    margin-bottom: 1em;
    display: block;
}
/* COLORES SECCIONES */
.seccion_1 footer,
.seccion_1 aside,
.seccion_1 header {
    background: #ccc
}
/* menu secundario */
.menu-nav-secundario {
    padding-left: 0;
    margin-top: 0;
}
.menu-nav-secundario li {
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
}
/* fin menu secundario */
/* TEXTOS */
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol {
    margin-top: 1.25em
}
h1 {
    font-size: 1.5em
}
h2 {
    font-size: 1.25em
}
h3 {
    font-size: 1.15em
}
h4 {
    font-size: 1em
}
hr {

}
p {
    font-size: 1.1em
}
a {

}
a:hover {

}
ul {
    list-style: url(../images/guion.png);
    padding-left: 1.1em;
    font-size: 1.1em;
}
header ul {
    font-size: 1em
}
ol {
    list-style: decimal;
    padding-left: 2em;
    font-size: 1.1em;
}
li {

}
blockquote {
    font-size: 1.1em
}
.cuerpo h1,
.cuerpo h2,
.cuerpo h3,
.cuerpo h4,
.cuerpo h5 {
    margin-top: 1em
}
.cuerpo h1 {
    font-size: 3.75em;
    font-weight: bold;
}
h1.titulo-general {
    margin-top: .3em;
    margin-bottom: .75em;
}
.cuerpo h1.titulo-seccion {
    color: #000;
    font-size: 1.5em;
}
.cuerpo h1.titulo-seccion + h2 {
    margin-top: .5em
}
.cuerpo h2 {
    font-size: 2.2em;
    font-weight: bold;
}
.aviso .cuerpo h2 {
    font-size: 1.5em;
}
.cuerpo h3 {
    font-size: 1.75em;
    font-weight: bold;
}
.cuerpo h4 {
    font-size: 1.5em;
    font-weight: bold;
}
.cuerpo h4 {
    font-size: 1.25em;
    font-weight: bold;
}
.cuerpo_principal p,
.cuerpo_principal ol,
.cuerpo_principal ul,
.cuerpo_principal blockquote,
.okFormu,
.errorFormu {
    font-family: "Courier New", Courier, monospace
}
.cuerpo_principal h1:first-child,
.cuerpo_principal h2:first-child,
.cuerpo_principal h3:first-child,
.cuerpo_principal p:first-child,
.cuerpo_principal ul:first-child,
.cuerpo_principal ol:first-child {
    margin-top: 0
}
.capa-cuadros img,
.capa-cuadros .cuadros {
    margin-bottom: 1.75%;
    overflow: hidden;
}
.capa-cuadros img {
    display: block;
    float: left;
}
.foto-portada {
    display: block;
    float: left;
    margin-bottom: 1.75%;
}

/* form contacto */
.form_contacto .form_input{
    float:right;
    width:60%;
    margin-top: .75em;  
    }
.form_contacto label{
    display:inline-block;
    float:left;
    width:35%;
    font-size:.9em; 
    text-align:right;
    }
.form_contacto p{
    clear:both;
    overflow:hidden;
    margin:0 !important;
    }
.form_contacto textarea{
    margin-top:2em;
    }
.form_submit{
    padding:.25em .5em;
    }
textarea#mensaje {
	width: 100%;
}	
p.campo-aviso {
    font-size: 16px;
    margin-top: 1em!important;
    margin-bottom: 1.5em!important;
}
p.campo-aviso a{
    color: inherit;
}
p.campo-aviso label{
    display: block;
    float: none;
    width: 100%;
    text-align: left;
}
@media screen and (max-width: 850px) { 
    * {
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}
@media screen and (min-width: 769px) and (max-width: 850px) { 
    #content {
        width: 99%
    }
    footer {
        padding: 1em;
        font-size: 90%;
    }
    .redes a,
    .redes a:hover,
    .redes a img {
        width: 40px !important;
        height: 40px !important;
        display: inline-block;
        overflow: hidden;
    }
    .redes a:hover {
        background-size: 100% !important
    }
    .columna-2.redes {
        width: 30%;
        min-height: 8em;
    }
    article img,
    aside img,
    .index .cuerpo img {
        max-width: 100%;
        height: auto;
    }
    .cuadros.grande {
        width: 47.25%;
        margin-right: 1%;
        margin-left: 1%;
    }
    .capa-cuadros img {
        margin-right: 1%;
        margin-left: 1%;
    }
    .cuadros.peque {
        width: 184px;
        height: 184px;
        margin-left: 1%;
        margin-right: 1%;
    }
    .fila-2 > .cuadros:first-child,
    .fila-2 > img:first-child {
        margin-left: 1%
    }
	.form_contacto label{
		font-size:.7em;
		}	
}
@media screen and (max-width: 768px) { 
    .aviso-legal {
        clear: both;
        text-align: left;
        position: relative;
        float: left;
        right: auto;
        bottom: auto;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    #content {
        width: 95%;
        margin: 0 auto;
    }
	header{
		margin-bottom:1em;
		}
	.index .cuerpo{
		margin-top:0;
		}
	.cuerpo,
	.cuerpo_principal{
		margin-bottom:0;
		}
		
	.cuerpo h1 {
		font-size: 2.5em
	}
	.cuerpo h2 {
		font-size: 1.8em
	}
	.cuerpo h3 {
		font-size: 1.5em
	}
	.cuerpo h4 {
		font-size: 1.25em
	}
	.cuerpo h5 {
		font-size: 1.1em
}		
    .cuerpo_principal,
    .cuerpo_secundario {
        width: 100%
    }
    aside {
        margin-top: 3em
    }
aside img:last-child,
aside .cuadros:last-child {
margin-bottom: 1%;
}	
    footer {
        padding: 1em
    }
    .columna-1,
    .columna-2,
    .columna-3 {
        width: 100%;
        float: left;
    }
    .columna-2 {
        padding: 1em 0;
        margin: 1em 0;
        border-right: none;
        border-left: none;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        overflow: hidden;
    }
    .logo {
        width: 20%;
        max-width: 114px;
    }
    .logo img,
    .logo a {
        width: 100%;
        height: auto;
    }
    .titulo-idiomas {
        width: 60%;
        margin: 2%;
    }
    .titulo-web {
        margin-top: 2%;
        margin-bottom: 2%;
    }
    .titulo-idiomas img {
        width: 100%;
        height: auto;
    }
    .menu {
        width: 100%;
        margin-top: 5%;
        text-align: left;
    }
    .menu-nav {
        padding-left: 0
    }
    .menu a {
        width: 100%;
        padding: 40% 0;
        font-size: 98%;
        overflow: hidden;
    }
    .menu li {
        width: 23%;
        max-width: 114px;
        text-align: center;
    }
    .logo a:hover span {
        display: block
    }
    .logo a:hover {
        background: url(../images/logo.png)
    }
    article img,
    aside img,
    .index .cuerpo img {
        max-width: 100%;
        height: auto;
    }
    .index .grande {
        width: 100%;
        height: auto;
        clear: both;
    }
	.cuadros {
		font-size: 1.65em;
	}	
    .cuadros.grande .textos {
        height: auto;
        padding: 10%;
    }
    .index .peque {
        width: 184px;
        margin: 1%;
    }
    .index .peque .textos {

    }
    .index .cuerpo img,
    .fila-2 > .cuadros:first-child,
    .fila-2 > img:first-child {
        margin: 1%
    }
	.index .cuerpo img.foto-portada{
		margin-left:0;
		margin-bottom:1.75%;
		}
    .cuadros.grande .textos,
    .cuadros.peque .textos {
        position: relative
    }
	.cuadros.peque div{
		position:absolute;
		padding-right:1em;
		}
	
}