* {
    margin:0;
    padding: 0;
}



.contenedor {
    max-width: 1600px;
    margin: auto;
    display: flex;
    flex-direction: row-reverse;
    box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.3);
}

body {
    font-family: Georgia, "Times New Roman", Times, serif;
    background: #D3D3D3;
}

.principal {
    width: 76%;
    background: #FFFFFF;
}

.aside {
    width: 24%;
    background-color: #992505;
    box-shadow: 4px 0px 5px 0px rgba(0,0,0,0.6);
    background-image: url(../img/side-texture.gif);
    background-repeat: no-repeat;
    background-position: 0 232px;
}

.aside .logo-texto {
    width: 71%;
    margin: 26px 13% 0px 13%;
}

.aside .logo-texto img {
    width: 100%;
}

.logo-texto p {
    color:#FFFFFF;
    font-family: Trebuchet MS, "MS Sans Serif", Geneva, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    text-align: right;
}

#desc-movil {
    display: none;
}

img.bandera {
    display: flex;
    margin: auto;
    margin-top: 56px;
    margin-bottom: 20px;
}

.img-varias img {
    display: flex;
    margin: auto;
    margin-top: 18px;
    width: 45px;
}

#hero {
    height: 150px;
    background-image: url(../img/IMG-10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -230px;
}

#hero2 {
    height: 150px;
    background-image: url(../img/9-VASALLI-PROPUESTA.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -165px;
}

#hero3 {
    height: 150px;
    background-image: url(../img/banner-agro-servicios.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#hero4 {
    height: 150px;
    background-image: url(../img/11-portada-contactos.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*
#hero-propuesta {
    height: 150px;
    background-image: url(../img/hero2-prop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -1000px;
}
*/

#menu {
    background-image: url(../img/menu-back.gif);
    display: flex;
    height: 23px;
    align-items: center;
}

#menu-icon {
    display: none;
}

#cerrar {
    display: none;
}
    
#menu-movil {
    display: none;
}

#menu a {
    margin-right: 60px;
    margin-left: 20px;
    text-decoration: none;
    color: #000000;
    font-size: 17px;
    padding: 2px 8px 2px 8px;
    text-transform: uppercase;
}

#menu a:hover {
    color: #ffffff;
    transition: .4s;
}

#menu a:active {
    color: #ffffff;
    /*background: #000000;*/
}

.activo {
    color: #ffffff !important;
    background: #000000;
}

#clock {
    pointer-events: none;
}

#caja-time-languaje {
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;
    padding-top:6px;
}

#languaje a {
    margin-right: 8px;
}

main {
    display: flex;
}

#main-serv {
    height: auto;
}

.texto {
    padding: 12px 20px 20px 20px;
    width: 64%;
}

.texto-movil {
    display:none;
}

.texto h1 {
    font-size: 24px;
    text-align: center;
}

.texto p {
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.imagenes {
    width: 36%;
    padding: 7px 20px 20px 20px;
}

.imagenes img {
    width: 100%;
    max-width: 212px;
    border: 1px solid black;
    margin: 14px;
}

footer {
    background-image: url(../img/foot-back.gif);
    height: 76px;
}

footer p {
    padding-top: 14px;
    color: #ffffff;
    text-align: center;
    font-size: 13px;
}

#bg-propuesta {
    background: #FFFFFF url(../img/proposal-back.jpg);
    flex-wrap: wrap;
}

#titulo-propuesta {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: bold;
    text-align: left;
}

.texto-propuesta {
    width: 60%;
    font-weight: normal;
    font-size: 15px;
}

.imagen-prop {
    width: 31%;
    margin: 20px auto 20px auto;
}

.imagen-prop img {
    width:100%;
}

#servicios {
    padding: 7px 20px 20px 20px;
    width: 86%;
}

#servicios .servicio {
    background: #f8f8f8;
    padding:13px;
    margin-bottom: 20px;
    border:solid 1px #000000;
}

#servicios ul {
    padding-left: 20px;
}

#servicios .servicio h4 {
    font-size: 17px;
    font-weight: bold;
}

#servicios .descripcion {
    padding-top: 20px;
    justify-content: space-between;
    display: none;
}

#servicios .servicio .descripcion .caja-img {
    width: 40%;
    margin-left: 20px;
}

#servicios .servicio .descripcion img {
    width: 100%;
}

#servicios .titular {
    display: flex;
    justify-content: space-between;
}

#contact {
    background: url(../img/contact-back.jpg);
    padding-bottom: 170px;
}

#contacto {
    display: flex;
    justify-content: space-around;
}

#contacto .administracion {
    width: 50%;
    margin-right: 10px;
    border-right: 1px solid;
}

#contacto .contacto {
    width: 50%;
    margin-left: 10px;
}

#contacto .administracion h3, #contacto .contacto h2 {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 10px;
}

#contacto .administracion p {
    font-family: Trebuchet MS, "MS Sans Serif", Geneva, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    margin-bottom: 10px;
}

#contacto .administracion h4 {
    margin-bottom: 8px;
}

#contacto .contacto ul {
    margin-bottom: 20px;
}

#contacto .contacto ul li {
    list-style: none;
}

#contacto .contacto ul li:nth-child(1) {
    font-size: 18px;
    font-weight: normal;
    font-style: italic;
    margin-top: 10px;
}
#contacto .contacto ul li:nth-child(2), .cargo {
    font-family: Trebuchet MS, "MS Sans Serif", Geneva, sans-serif;
    font-size: 14px;
    font-weight: normal;
}

#contacto .contacto ul li a, .administracion a {
    font-family: Trebuchet MS, "MS Sans Serif", Geneva, sans-serif;
    color: #992505;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 14px;
    display:inline-block;
    margin-top: 7px;
}


/* botones services */

.mas {
    width: 26px;
    height: 25px;
}

.menos {
    display: none;
    width: 26px;
    height: 25px;
}


/******************** RESPONSIVE ************************/

@media screen and (max-width:1430px) {
    #servicios {
        width:95%;
    }

    
}

@media screen and (max-width:1215px) {
    .aside .logo-texto {
        width:73%;
    }
}

@media screen and (max-width:1185px) {
    .aside .logo-texto {
        width:75%;
    }
}

@media screen and (max-width:1150px) {
    .aside .logo-texto {
        width:79%;
    }
}

@media screen and (max-width:1110px) {
    .texto p {
        font-size: 15px;
    }
}

@media screen and (max-width: 1080px) {
    main {
        flex-direction: column;
        height: auto;
    }

    .texto h1 {
        font-size: 23px;
    }

    .texto {
        width: 93%;
    }

    .imagenes {
        width: 93%;
    }

    .imagenes img {
        width: 40%;
        max-width: none;
        margin-left: 2%;
        margin-top: 0;
    }

    #hero2 {
        background-position: center;
    }
}


@media screen and (max-width: 1000px) {
    #menu a {
        margin-right: 25px;
    }
}

@media screen and (max-width: 890px) {
    .contenedor {
        flex-direction: column-reverse;
    }

    .principal {
        width: 100%;
    }

    #hero {
        background-position: center;
    }

    aside {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .aside {
        width: 100%;
        background-position: center right;
        background-size: contain;
    }

    .aside .logo-texto {
        width: 26%;
        margin: 22px 3% 12px 2%;
    }

    img.bandera {
        display: inline-block;
        margin-left: 43px;
        margin-right: 5px;
    }

    .img-varias img {
        display: inline-block;
        margin-bottom: 4px;
        margin-left: 12px;    
    }

    .img-varias {
        display: inline-block;
    }

    footer p {
        font-size: 14px;
    }
    
}

@media screen and (max-width: 640px) {
    .aside .logo-texto {
        width: 22%;
    }
}

/* movil */

@media screen and (max-width:600px) {
    aside {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 111px;
    }

    .aside {
        background-position: center;
    }

    .aside .logo-texto {
        width: 26%;
        margin: 11px 2%;    
    }

    #desc-movil {
        display: block;
        text-align: left;
        font-size: 11px;
    }

    #titulo-propuesta {
        font-size: 16px;
    }

    #hero {
        background-position: center;
    }

    .img-varias, img.bandera, .logo-texto p, #menu {
        display: none;
    }

    #menu-icon {
        display: block;
        color: #FFFFFF;
        font-weight: normal;
        font-size: 20px;
        text-decoration: none;
        margin-right: 16px;
        cursor:pointer;
    }

    #menu-icon i {
        margin-right: 6px;
    }

    #menu-movil {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #f2c333;
    }

    #menu-movil a {
        text-decoration: none;
        color:#000000;
        padding:8px;
        text-transform: uppercase;
        transition: .4s;
    }

    #menu-movil a:hover {
        color: #FFFFFF;
        background: #000000;
        transition: .4s;
    }

    #cerrar {
        display: none;
        color: #FFFFFF;
        font-weight: normal;
        font-size: 30px;
        text-decoration: none;
        margin-right: 20px;
        cursor:pointer;
    }

    #texto-pc {
        display:none;
    }

    #texto-propuesta-pc {
        display: none;
    }

    #bg-propuesta {
        flex-direction: column-reverse;
    }

    .imagen-prop {
        width: 52%;
    }

    .texto-movil {
        display: block;
        text-align: center;
        width: 97%;
    }

    .texto-movil, .imagenes {
        padding:12px 7px 14px 7px;
    }

    .texto-movil h1 {
        font-size: 18px;
    }

    .texto-movil p {
        font-size: 14px;
    }

    #servicios {
        padding:12px 7px 14px 7px;
    }

    #servicios .servicio h4 {
        font-size: 14px;
    }

    #servicios .descripcion ul li {
        font-size: 14px;
    }

    #servicios .servicio .descripcion .caja-img {
        width: 190px;
    }

    #contacto {
        flex-direction: column;
    }

    #contacto .administracion {
        width: 100%;
        margin-right: 10px;
        border-right: none;
        border-bottom: 1px solid;
        padding-bottom: 20px;
    }

    #contacto .contacto {
        width: 100%;
        margin-left: 0;
        margin-top: 16px;
    }

    #contacto .administracion h3, #contacto .contacto h2 {
        font-size: 19px;
    }

    #contacto .contacto ul li:nth-child(1) {
        font-size: 17px;
    }

    footer p {
        font-size: 11px;
        padding-top: 14px;
    }

    #caja-time-languaje {
        padding-right: 4px;
    }
}

@media screen and (max-width:570px) {
    .aside .logo-texto {
        width:27%;
    }
}

@media screen and (max-width:541px) {
    .aside .logo-texto {
        width:30%;
    }
}

@media screen and (max-width:500px) {
    #hero3 {
        background-position: right;
    }
}

@media screen and (max-width:490px) {
    .aside .logo-texto {
        width:32%;
    }
}

@media screen and (max-width:460px) {
    .aside .logo-texto {
        width:36%;
    }
}

@media screen and (max-width:440px) {
    .aside .logo-texto {
        width:36%;
        margin-top: 15px;
    }
}

@media screen and (max-width:410px) {
    .aside .logo-texto {
        width:39%;
    }
}

@media screen and (max-width:390px) {
    .aside .logo-texto {
        width:40%;
    }
    #desc-movil {
        font-size: 10px;
    }
}

@media screen and (max-width:370px) {
    .aside .logo-texto {
        width:42%;
    }
}

@media screen and (max-width:350px) {
    .aside .logo-texto {
        width:43%;
        margin-top: 14px;
    }
}

@media screen and (max-width:330px) {
    .aside .logo-texto {
        width:45%;
    }
}

@media screen and (max-width:320px) {
    .aside .logo-texto {
        width:47%;
    }
}

@media screen and (max-width:303px) {
    .aside .logo-texto {
        width:49%;
    }
}