/*===============
     GENERALES
  ===============*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border/box;
}

body {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    background-color: #d9d9d8;
}

header { /*Actualizado*/
    width: 100%;
    height: 90px;
    background: #3C6719;
    color: #fff;
    border-bottom: solid;
    border-bottom-width: 4px;
    border-bottom-color: #96C300; /*649152*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    -webkit-box-shadow: inset 0px 30px 112px -12px rgba(29,51,12,1);
    -moz-box-shadow: inset 0px 30px 112px -12px rgba(29,51,12,1);
    box-shadow: inset 0px 30px 112px -12px rgba(29,51,12,1);
}

.contenedor_login {
    width: 98%;
    margin: auto;
}

.contenedor {
    width: 98%;
    margin: auto;
}

h1 {
    float: left;
}

section {
    width: 100%;
}

.contenedor img {
    align-content: center;
}

@media (min-width: 768px) {
    .sociales {
        width: auto;
    }

    footer .contenedor {
        justify-content: space-between;
    }
}

@media (min-width: 1330px ) { /*Actualizado*/
    .contenedor {
        width: 1330px;
    }

    header {
        height: 110px;
    }
}

.botones a {
    min-width: 120px;
    font-size: 16px;
    text-align: center;
    /*text-decoration: none;*/
    cursor: pointer;
    /*width: 80px;*/
    color: #fff;
    background-color: #6aa71c;
    text-decoration: none;
    padding: 8px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 5px;
    border: 3px solid #fff;
    -webkit-box-shadow: 0px 0px 14px -2px rgba(194,194,194,0.75);
    -moz-box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
    box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
}

    .botones a:hover {
        background-color: #e8e9e7; /*2f6903*/
        border: 3px solid #6aa71c;
        color: #6aa71c;
        text-decoration: none;
    }

.botones {
    min-width: 120px;
    font-size: 16px;
    text-align: center;
    /*aling: center;*/
    cursor: pointer;
    color: #fff;
    background-color: #6aa71c;
    text-decoration: none;
    padding: 8px;
    margin: 5px;
    border: 3px solid #fff;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-box-shadow: 0px 0px 14px -2px rgba(194,194,194,0.75);
    -moz-box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
    box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
}

    .botones:hover {
        background-color: #e8e9e7; /*2f6903*/
        border: 3px solid #6aa71c;
        color: #6aa71c;
        -webkit-box-shadow: 0px 0px 0px 0px rgba(194,194,194,1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(194,194,194,1);
        box-shadow: 0px 0px 0px 0px rgba(194,194,194,1);
    }

    .botones:hover {
        background-color: #e8e9e7; /*2f6903*/
        border: 3px solid #6aa71c;
        color: #6aa71c;
        -webkit-box-shadow: 0px 0px 0px 0px rgba(194,194,194,1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(194,194,194,1);
        box-shadow: 0px 0px 0px 0px rgba(194,194,194,1);
    }

/*===============
       MENU
  ===============*/

#menu-bar {
    display: none;
}

header label {
    float: right;
    font-size: 30px;
    margin: 6px 0;
    cursor: pointer;
}

/* Menu desplegable movil */


.contenedor_menu a { /*Actualizado*/
    font-size: 20px;
    border: none;
    text-decoration: none;
    padding-top: 40px;
    padding-bottom: 10px;
    color: #ffffff;
    display: flex;
}

    .contenedor_menu a:hover {
        height: 25px;
        font-size: 20px;
        color: #96C300; /* #4eabcc azul - #3e4098 morado*/
        /*text-decoration: underline ;*/
        /*  rgb(62,64,152) */
    }


.contenedor_menu { /*Actualizado */
    justify-content: space-between;
    position: static;
    padding-top: 05px;
    width: 90%;
    height: 110px /*65px*/;
    transform: translateX(-5%);
    float: right;
    display: flex;
}

@media (max-width: 1330px) { /*Nuevo*/
    .banner_img { /*Nuevo*/
        width: 800px;
        height: 50px;
        position: relative;
        top: 25%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .banner1 { /*Nuevo*/
        width: 100%;
    }
}





/*===============
       BANNER
  ===============*/

#banner { /*Actualizado*/
    margin-top: 90px;
    position: relative;
}

    #banner img {
        width: 100%;
        height: 100%;
    }

    #banner .contenedor {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        color: #fff;
    }

    #banner h2 {
        font-size: 36px;
        text-shadow: 2px 2px 5px #000;
    }

    #banner h1 {
        font-size: 34px;
        text-shadow: 2px 2px 5px #000;
    }


@media (min-width: 0px) {
    #banner h2 {
        font-size: 40px;
    }
}

@media (min-width: 768px) {
    #banner {
        height: 300px;
        overflow: hidden;
    }

        #banner img {
            height: auto;
            margin-top: -100px;
        }
}


@media (min-width: 1330px) { /*Actualizado*/
    #banner { /*Actualizado*/
        margin-top: 110px;
    }

        #banner img {
            margin-top: -200px;
        }
}

/*===============
       BALDOSAS
     =============*/



.bloque {
    width: 300px;
    height: 340px;
    text-align: center;
    background-color: #e8e9e7;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 55px;
    border: 1px solid #fff;
    -webkit-box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
    -moz-box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
    box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
}

    .bloque img {
        width: 100px;
        height: 100px;
        margin-top: -60px;
        margin-right: 140px;
        border-radius: 50%;
        border: 7px solid #fff;
        -webkit-box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
        -moz-box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
        box-shadow: 7px 7px 14px -2px rgba(194,194,194,0.75);
    }


.contenido h2 {
    font-size: 18px;
    text-align: center;
    color: #2f6903;
    padding-bottom: 10px;
}

.contenido p {
    font-size: 14px;
    text-align: justify;
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 10px;
    height: 190px;
}

.contenido a {
    font-size: 14px;
    aling: center;
    cursor: pointer;
    width: 80px;
    color: #fff;
    background-color: #6aa71c;
    text-decoration: none;
    padding: 7px;
    margin: 5px;
    border: 3px solid #fff;
}

    .contenido a:hover {
        background-color: #e8e9e7; /*2f6903*/
        border: 3px solid #6aa71c;
        color: #6aa71c;
    }



#blog h3, h4 {
    text-align: center;
}

#blog .contenedor {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#blog article {
    margin: 15px;
}

/*===============
       LOGIN
  ===============*/

.bloque_login {
    width: 480px;
    height: 380px;
    text-align: center;
    background-color: #e8e9e7;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 200px;
    border: 1px solid #C3C3C3;
    -webkit-box-shadow: inset 0px 0px 160px -10px rgba(194,192,194,1);
    -moz-box-shadow: inset 0px 0px 160px -10px rgba(194,192,194,1);
    box-shadow: inset 0px 0px 160px -10px rgba(194,192,194,1);
}


    .bloque_login img {
        width: 100px;
        height: 100px;
        margin-top: -60px;
        border-radius: 50%;
        border: 7px solid #fff;
    }

.close img {
    width: 120px;
    height: 120px;
}

.login_us input {
    height: 30px;
    width: 250px;
    display: inline-block;
    font-size: 18px;
    border-radius: 8px;
    border: none;
    margin-bottom: 20px;
    background-color: #fff;
    text-align: center;
}


.login_pw input {
    height: 30px;
    width: 250px;
    font-size: 18px;
    border-radius: 8px;
    border: none;
    margin-bottom: 20px;
    background-color: #fff;
    text-align: center;
}

.modal {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    animation: modal 1s 0.3s forwards;
    visibility: hidden;
    opacity: 0;
}

.autenticacion {
    margin: auto;
    /*width: 50%;*/
    height: 50%;
}

#cerrar {
    display: none;
}

    #cerrar + label {
        position: fixed;
        z-index: 50;
        right: 40px;
        top: 100px;
        cursor: pointer;
        animation: modal 1s 0.3s forwards;
        visibility: hidden;
        opacity: 0;
    }

@media (min-width: 0px) {
    .bloque_login {
        width: 400px;
    }
}

@keyframes modal {
    100% {
        visibility: visible;
        opacity: 1;
    }
}

.validation-summary-errors ul {
    list-style: none;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

/*===============
               INFO
          ===============*/

#info {
    border-top: solid;
    border-top-width: 3px;
    border-top-color: #d9d9d8;
    background: #d9d9d8;
    color: #fff;
    text-align: center;
}


#info_login {
    border-top: solid;
    /*border-top-width: 5px;*/
    /*border-top-color: #96C300;*/
    border-bottom: solid;
    border-bottom-width: 4px;
    border-bottom-color: #96C300;
    background: #3C6719;
    color: #fff;
    text-align: center;
    -webkit-box-shadow: inset 0px 30px 112px -12px rgba(29,51,12,1);
    -moz-box-shadow: inset 0px 30px 112px -12px rgba(29,51,12,1);
    box-shadow: inset 0px 30px 112px -12px rgba(29,51,12,1);
}


@media (min-width: 480px) {
    .info_login {
        width: 300px;
    }
}

@media (min-width: 1024px) {
    .info-pet {
        width: auto;
    }
}