/* /////////////////////////////////////////// */
/*  GLOBAL*/
*{
    margin: 0%;
}
.blankspace{
    background-color: #1f4e02;
    margin-top: 8%;
}
.main{
    display: inline-flex;
    background-color:black; 
}
.all{
    background-color:#0c0c0bfa; 
    width: 90%;
}
/* /////////////////////////////////////////// */
/*  FIN GLOBAL*/

/* /////////////////////////////////////////// */
/* BARRA DE NAVEGACION */
.navbar-nav{
    display: inline-flex;
    width: 100%;
    height: 5%;
    background-color: #47ac07;
    justify-content: space-between;
    position: fixed;
}
.info-menu{
    display: inline-flex;
    width: 100%;
    height: 5%;
    background-color: #47ac07;
    justify-content: space-between;
}
.ham{
    display:none;
    background-color:transparent;
    cursor: pointer;
    border:none;
    margin:0;
    padding:0;
}
.ham span{
    background-color: #f3f3f3;
    display:block;
    height:3px;
    width: 15px;
    margin:3px auto;
    border-radius:2px; 
}
.rrss{
    margin-right: 3%;
    margin-top: 5px;
}
.rrss ul{
    list-style-type: none;
    margin-right: 10px;
    margin-top: 1%;
    display: inline-flex;
}
.rrss li{
    justify-content: space-evenly;
    margin-left: 18px;
}
.rrss img{
    height: 20px;
}

.menu ul{
    list-style-type: none;
    margin-right: 10px;
    margin-left: 10px;
    display: inline-flex;
}
.menu li{
    justify-content: space-evenly;
    margin: 0px 40px 0px 40px;
}
.menu li a{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-decoration: none;
    font-size:20px;
    color: black;
}
.logo{
    margin-top: 3px;
    margin-left: 4%;
}
.logo img{
    height: 25px;
}
/* /////////////////////////////////////////// */
/* FIN BARRA DE NAVEGACION */

/* /////////////////////////////////////////// */
/* FORMS */
.form{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    padding-bottom: 6%;
}
.form h1{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 3%;
}
.form p {
    color: white;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    margin: 2% 0% 2% 0%;
}
.boton-form{
    margin-top: 2%;
    width: 10%;
}
/* /////////////////////////////////////////// */
/* FORMS */

/* /////////////////////////////////////////// */
/* agradecimientos */
.agradecimientos{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    padding-bottom: 22%;
    margin: 5% 10% 0% 10%;
}
.agradecimientos h1{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
/* /////////////////////////////////////////// */
/* agradecimientos */

/* /////////////////////////////////////////// */
/* blog detail */
.blog_div{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    margin: 2% 10% 0% 10%;
}
.blog_title h1{
    color: white;
    margin: 2% 0% 2% 0%;
    font-family: Arial, Helvetica, sans-serif;
}
.blog_image{
    margin: 2% 0% 2% 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}
.blog_date small{
    margin: 2% 0% 2% 0%;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    align-self: flex-start;
}
.blog_content{
    margin: 2% 0% 2% 0%;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
}
.blog_return{
    background-color: #1f4e02;
    width: 10%;
    margin: 5% 0% 5% 0%;
    border-radius: 10%;
    padding: 2% 0% 2% 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}
.blog_return a{
    text-decoration: none;
    text-align: center;
    color: white;
}
/* /////////////////////////////////////////// */
/* blog detail */

/* /////////////////////////////////////////// */
/* BANNER */
.banner{
    margin-top: 2%;
    margin-bottom: 1%;
}
.banner img{
    height: 5%;
    width: 100%;
    /* margin-bottom: 3%; */
}
.phone-display{
    display: none;
}
/* /////////////////////////////////////////// */
/* FIN BANNER */

/* /////////////////////////////////////////// */
/* menu lateral */
.menu-lateral-1{
    background-color: #0c0c0bfa;
    position: fixed;
    padding-right: 5%;
    padding-bottom: 10%;
    height: 100%;
}
.menu-lateral-1 h3{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    margin-top: 10%;
    margin-bottom: 30%;
    text-align: center;
}
.menu-lateral-1 ul{
    text-align: end;
    margin-right: 5%;
}
.menu-lateral-1 li{
    margin-left: 0%;
    list-style: none;
    margin-bottom: 20%;
    margin-top: 20%;
}
.menu-lateral-1 a{
    text-decoration: none;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
.refranes{
    margin-top: 60%;
    margin-bottom: 50%;
    position: relative;
    display: inline-block;
    text-align: center;
}
.refranes img{
    width: 100%;
    margin-left: 4%;
    border-radius: 5%;
}
.centrado{
    position: absolute;
    top: 52%;
    left: 55%;
    transform: translate(-50%, -50%);
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}
.centrado p{
    font-size: 12px;
}
/* /////////////////////////////////////////// */
/* FIN menu lateral */

/* /////////////////////////////////////////// */
/* CREDITOS */
.creditos{
    margin-left: 7%;
    display: inline-flex;
}
.gif img{
    width: 65%; 
    border-radius:10%;
}
/* /////////////////////////////////////////// */
/* FIN CREDITOS */


/* /////////////////////////////////////////// */
/* BLOG */
.blog-title{
    text-align: center;
    margin-top: 4%;
    margin-bottom: 4%;
    color: aliceblue;
    text-transform: capitalize;
    font-style: oblique;
    font-family: Arial, Helvetica, sans-serif;
}
.row{
    display: inline-block;
}
.blog-title h2{
    color: white; 
    text-align: center; 
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.section_1{
    align-items: center;
    text-align: justify;
    margin: 1% 14% 1% 14%;
    text-decoration: none;
}
.section_1 p{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
.section_1 small{
    color: white;
}
.img-blog img{
    align-content: center;
    width: 40%;
    margin-left: 30%;
}

.allblog {
    margin-left: 43%;
    background-color: green; 
    width: 15%; 
    text-align: center;
    align-content: center;
    border-radius: 20%;
}
.buttonblog{
    width: 100%;
    align-content: center;
    align-items: center;
}
.allblog a{
    text-decoration: none; 
    text-align: center; 
    color: rgb(255, 255, 255);
}
/* /////////////////////////////////////////// */
/* FIN BLOG */

/* /////////////////////////////////////////// */
/* INFO HIPO */
.info{
    margin-top: 2%;
}
.info h1{
    text-align: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 2%;
}
.colum-hipo {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    margin-left: 2%;
    margin-bottom: 3%;
}
.casilla-hipo img{
    width: 80%;
    border-radius: 10%;
}
/* /////////////////////////////////////////// */
/* FIN INFO HIPO */

/* /////////////////////////////////////////// */
/* EXTENDEDINFO DERECHA*/
.division-der{
    display: inline-flex;
    margin: 0% 4% 0% 2%;
}
.img-content{
    margin: 2% 0% 5% 0%;
    width: 33%;
}
.img-content img{
    width: 90%;
    border-radius: 10%;
}
.texto-info-division {
    width: 80%;
}
.texto-info-division p{
    color: white;
    text-align: justify;
    margin: 1% 5% 1% 5%;
    font-family: Arial, Helvetica, sans-serif;
}
.texto-info-creditos h1{
    color: white;
    margin: 0% 5% 4% 5%;
    font-family: Arial, Helvetica, sans-serif;
}
.texto-info-creditos p{
    color: white;
    text-align: justify;
    margin: 1% 6% 1% 5%;
    font-family: Arial, Helvetica, sans-serif;
}
.texto-info-creditos h3{
    color: white;
    margin: 1% 5% 0% 5%;
    font-family: Arial, Helvetica, sans-serif;
}
.texto-info-creditos ul{
    margin: 3% 10% 5% 0%;
}
.texto-info-division li {
    margin-bottom: 3%;
    list-style: none;
}
/* /////////////////////////////////////////// */
/* FIN EXTENDEDINFO DERECHA */

/* /////////////////////////////////////////// */
/* FIN EXTENDEDINFO IZQUIERDA */
.division-izq{
    display: inline-flex;
    margin: 0% 0% 0% 5%;
}
.img-content-izq{
    margin: 2% 0% 5% 1%;
    width: 33%;
}
.img-content-izq img{
    width: 90%;
    border-radius: 10%;
}
.texto-info-division-izq {
    width: 80%;
}
.texto-info-division-izq p{
    color: white;
    text-align: justify;
    margin: 1% 0% 1% 0%;
    font-family: Arial, Helvetica, sans-serif;
}
.texto-info-creditos-izq ul{
    margin: 3% 10% 5% 0%;
}
.texto-info-division-izq li {
    margin-bottom: 3%;
    list-style: none;
}
/* /////////////////////////////////////////// */
/* FIN EXTENDEDINFO IZQUIERDA */

/* /////////////////////////////////////////// */
/* NOTA AL PIE */
.nota{
    margin: 2% 10% 5% 10%;
}
.nota small{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    font-size: smaller;
}
/* /////////////////////////////////////////// */
/* FIN NOTA AL PIE */

/* /////////////////////////////////////////// */
/* DESCARGAS */
.descargas{
    margin: 3% 0% 0% 10%;
}
.descargas h1{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    margin-bottom: 5%;
}
.documentos p{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
.documentos a{
    margin-top: 10%;
    /* text-decoration: none; */
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
/* /////////////////////////////////////////// */
/* DESCARGAS */

/* /////////////////////////////////////////// */
/* CONTACTO */
.map {
    margin-top:5%;
	height: 250px;
	width: 50%;
    border-radius: 5%;
}
.contacto{
    margin: 3% 10% 3% 10%;
    width: 100%;
}
.contacto h1{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 3%;
}
.contact-info{
    display: inline-flex;
    margin-top: 1%;
    align-items: center;
}
.contact-info a{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
.contact-info p{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 5%;
    text-align: start;
}
.contacto img{
    width: 3%;
}
/* /////////////////////////////////////////// */
/* CONTACTO */

/* /////////////////////////////////////////// */
/* FOOTER */
footer{
    background-color: #1f4e02;
    padding-top: 1%;
    padding-bottom: 1%;
}
footer a{
    text-decoration: none;
    color: white;
    margin-left: 40%;
}
/* /////////////////////////////////////////// */
/* FOOTER */

/* /////////////////////////////////////////// */
/* /////////////////////////////////////////// */
/* DISPOSITIVOS MOVILES/////////////////////// */

@media (max-width:768px){
    /* /////////////////////////////////////////// */
    /* BARRA DE NAVEGACION */
    .logo{
        margin: 2% 0% 0% 3%;
    }
    .info-menu{
        width: 100%;
    } 
    .menu{
        margin-top: 0%;
        margin-bottom: 0;
    }
    .menu ul{
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .menu li{
        margin: 5% 0% 5% 0%;
    }
    .rrss{
        margin-top: 4%;
        margin-bottom: 5%;
    }
    .rrss ul{
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .rrss li{
        margin: 3% 0% 3% 0%;
    }
    .ham{
       display: block;
       margin-right: 15%;
    }
    .info-menu{
        display: flex;
        flex-direction: column;
        height: 50vh;
        width: 100%;
        display: none;
        height: max-content;
    }

    .info-menu.activado{
        display: flex;
    }
    .navbar-nav{
        width: 100%;
        height: max-content;
    }
    header{
        width: 100%;
    }
    /* /////////////////////////////////////////// */
    /* BARRA DE NAVEGACION */

    /* /////////////////////////////////////////// */
    /* banner */
    .phone-display.phone{
        display:inline-flex;
        /* margin-top: 100%; */
    }
    /* /////////////////////////////////////////// */
    /* banner */

    /* /////////////////////////////////////////// */
    /* creditos */
    .creditos{
        display: flex;
        flex-direction: column;
        margin: 5% 0% 0% 10%;
    }
    .gif{
        width: 100%;
        margin-bottom: 5%;
    }
    .gif img{
        width: 90%;
    }
    /* /////////////////////////////////////////// */
    /* creditos */

    /* /////////////////////////////////////////// */
    /* creditos */
    .blog_section_2{
        margin: 5% 3% 8% 3%;
    }
    .section_1{
        margin: 0% 3% 0% 3%;
    }
    .img-blog img{
        width: 80%;
        margin-left: 10%;
    }
    .allblog{
        width: 30%;
        margin-left: 36%;
    }
    /* /////////////////////////////////////////// */
    /* creditos */

    /* /////////////////////////////////////////// */
    /* INFO HIPO */
    /* .fila-hipo{
        display: inline-flex;
        justify-content: space-evenly;
    } */
    .colum-hipo{
        display: flex;
        flex-direction: column;
        margin-left: 9%;
    }
    .casilla-hipo{
        margin-top: 2%;
        margin-bottom: 2%;
    }
    /* /////////////////////////////////////////// */
    /* INFO HIPO */

    /* /////////////////////////////////////////// */
    /* INFO HIPO */
    .division-der{
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .texto-info-division{
        width: 100%;
        margin: 0% 0% 0% 0%;
    }
    .img-content{
        margin: 2% 0% 5% 4%;
        width: 90%;
    }
    .img-content img{
        width: 90%;
        border-radius: 10%;
    }
    .texto-info-creditos h3{
        margin-bottom: 10%;
        margin-top: 5%;
        font-size:x-large;
    }
    .texto-info-division p{
        margin: 5% 5% 5% 5%;
    }
    .texto-info-creditos ul{
        margin: 3% 0% 5% 0%;
    }
    .texto-info-division li {
        margin-bottom: 3%;
    }

    .division-izq{
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .img-content-izq{
        width: 90%;
    }
    .texto-info-division-izq{
        width: 90%;
        margin-right: 10%;
    }
    .texto-info-division-izq li{
        margin-top: 5%;
        margin-bottom: 2%;
    }
    .nota{
        text-align: justify;
        font-size: x-small;
    }
    /* /////////////////////////////////////////// */
    /* INFO HIPO */

    /* /////////////////////////////////////////// */
    /* menu lateral */
    .all{
        width: 100%;
    }
    .menu-lateral{
        padding: 0;
        margin: 0;
        width: 0px;
        display:none;
    }
    /* /////////////////////////////////////////// */
    /* menu lateral */

    /* /////////////////////////////////////////// */
    /* blog detail */
    .blog_div{
        margin-top: 8%;
        padding-bottom: 100%;
    }
    .blog_return{
        width: 30%;
    }
    /* /////////////////////////////////////////// */
    /* blog detail */

    footer a{
        margin-left: 35%;
    }
    .main{
        width:115%;
    }
}

/* /////////////////////////////////////////// */
/* /////////////////////////////////////////// */
/* /////////////////////////////////////////// */

/* Animaciones */
  
@keyframes muestraMenu {
    from {opacity: 0;}
    to {opacity: 1;}
}

.info-menu.activado{
    display:flex; 
    animation: muestraMenu 350ms ease-in-out both;
}

.br-1.animado{
    transform: rotate(-45deg) translate(-10px, 8px);
}

.br-2.animado{
    opacity: 0;
}
.br-3.animado{
    transform: rotate(45deg) translate(-10px, -8px);
}

.ham.girar:hover{
    transform:rotate(360deg);
}