@import url('animal.css');

@font-face {

    font-family: Nexa light;

    src: url('../fonts/Futura/NexaLight.otf');

}

body{

    font-family: Nexa light;

    font-size: 18px;

    background: url("../img/fondo.webp");

    background-size: cover;

}

a{

    color: black;

}

h1,h2,h3,h4,h5{

  font-family: Nexa Light;

}

.menu-mob,.c-hamburger--htx{

    display: none!important;

}

.px-1{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.orange{ 

    color: #f7941e;

}

.container{

    max-width: 1020px;

    padding: 0 !important;
}

.ele{

    width: 100%;

    border-top: 20px solid black;

    border-bottom: 20px solid black;

}

.col-md-12, .col-sm-12 ,.col-xs-12{

    padding-left: 0;

    padding-right: 0;

}

.p{

    font-size: 30px;

    width: 60%;

    padding: 5px;

    margin: 0 auto;

}

.logo-head{

    background-color: black;

}

.black{

    background-color: black;

}

h1,h2, h3{

    text-transform: uppercase;

    font-weight: 700;

}

.tit{

    background-color: black;

    color: white;

    padding: 3px 0;

}

.tit-ser{

    font-size: 40px;

    padding: 10px;

}

.pink{color: #ff017e;text-transform: capitalize;}

.yellow{color: #f8e821;text-transform: capitalize;}
.border-in-text{
    text-shadow: 
                -1px -1px 0 #000,
                1px -1px 0 #000,  
                -1px 1px 0 #000, 
                1px 1px 0 #000; 
}
.blue{color: #037dff;text-transform: capitalize;}

.red{color: #ff0100;text-transform: capitalize;}

.green{color:#39b04a;text-transform: capitalize;}

.purple{color: #7f00ff;text-transform: capitalize;}

.green-strong{color: #061615;text-transform: capitalize;}

h3.orange{text-transform: capitalize;}

.bar-colors{

  padding: 10px 0;

}

.bar-colors span:hover{

  color: white;

  cursor: pointer;

  font-weight: bolder;

}

.img-left-top{

    position: relative;

    left: -150px;

    top: 35px;

    @media (max-width: 992px) {
        position: unset !important;
    }
}

.mar-left{margin-left: -115px;}

.img-left-top-up{

  position: absolute;

  top: 304px;

  left: -161px;

}

*:focus{

    outline: none;

}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */

  color: #2c95ff!important;

}

::-moz-placeholder { /* Firefox 19+ */

  color: #2c95ff!important;

}

:-ms-input-placeholder { /* IE 10+ */

  color: #2c95ff!important;

}

:-moz-placeholder { /* Firefox 18- */

  color: #2c95ff!important;

}



.white{

    background-color: rgba(255, 255, 255, 0.88);

    text-align: center;

}

.flex{

    display: inline-flex;

    margin: 10px 0;

}

.monkey{

    position: absolute;

    right: -165px;

    z-index: 10;

    top: 0px;

    width: 300px;

}

.menu{

    position: absolute;

    width: 245px;

    height: 300px;

    background: url('../img/menu.png');

    left: -115px;

    background-size: cover;

    z-index: 10;

}

.div-menu{

    -ms-transform: rotate(-14deg); /* IE 9 */

    -webkit-transform: rotate(-14deg); /* Chrome, Safari, Opera */

    transform: rotate(-14deg);

    margin: 60px auto;

    width: 200px;

}

.d-menu{

    cursor: pointer;

    margin: 5px 0;
}

.d-menu a:hover{

    color: #ca7c20;

}

.p-quien{

    width: 70%;

    margin: 20px auto;

    font-size: 22px;

}

.img-mid{

    width: 40%;

}

.img-left{

    position: absolute;

    left: -150px;

}

.img-right{

    position: inherit;

    right: -235px;

}

.top{top: -320px;}

.img-down{

    margin-top: -290px;

    right: -340px;

}

.rig{

    margin-top: 35px;

    left: 155px;

}

.jirafa{

    right: -355px;

}

.redes{

    display: flex;

    flex-direction: column;

    width: 120px;

}

.redes img{

    margin: 10px;

    width: 100px;

}

.dir{

    display: flex;
    align-items: center;

}

.tab{

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 15px 30px;
    gap: 40px;
}

.ini{

    text-align: justify;

    margin: 0 auto;

    width: 95px;

}

.c-hamburger {

  display: block;

  position: absolute;

  overflow: hidden;

  margin: 0;

  padding: 0;

  width: 80px;

  height: 80px;

  font-size: 0;

  text-indent: -9999px;

  appearance: none;

  box-shadow: none;

  border-radius: none;

  border: none;

  cursor: pointer;

  transition: background 0.3s;

  z-index: 25;

  right: 0;

  top: 0;

}



.c-hamburger:focus {

  outline: none;

}

.c-hamburger span {

  display: block;

  position: absolute;

  top: 37px;

  left: 18px;

  right: 18px;

  height: 5px;

  background: white;

}



.c-hamburger span::before,

.c-hamburger span::after {

  position: absolute;

  display: block;

  left: 0;

  width: 100%;

  height: 5px;

  background-color: #fff;

  content: "";

}



.c-hamburger span::before {

  top: -20px;

}



.c-hamburger span::after {

  bottom: -20px;

}



.c-hamburger--htx {

  background-color: #f7941e;

}



.c-hamburger--htx span {

  transition: background 0s 0.3s;

}



.c-hamburger--htx span::before,

.c-hamburger--htx span::after {

  transition-duration: 0.3s, 0.3s;

  transition-delay: 0.3s, 0s;

}



.c-hamburger--htx span::before {

  transition-property: top, transform;

}



.c-hamburger--htx span::after {

  transition-property: bottom, transform;

}



/* active state, i.e. menu open */

.c-hamburger--htx.is-active {

  background-color: #cb0032;

}



.c-hamburger--htx.is-active span {

  background: none;

}



.c-hamburger--htx.is-active span::before {

  top: 0;

  transform: rotate(45deg);

}



.c-hamburger--htx.is-active span::after {

  bottom: 0;

  transform: rotate(-45deg);

}



.c-hamburger--htx.is-active span::before,

.c-hamburger--htx.is-active span::after {

  transition-delay: 0s, 0.3s;

}

@media (max-width: 768px) {

    .mar-left{

      margin-left: 0;

      width: 100%;

    }

    .top{top: 0;}

    .flex,.menu-mob,.c-hamburger--htx{

        display: inline-table!important;

    }

    .menu-mob{

        position: fixed;

        background-color: orange;

        left: -1200px;

        top: 109px;

        height: 100%;

        z-index: 20;

        width: 60%;

    }

    .div-menu{

        -ms-transform: rotate(0deg);

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    .flex img{

        margin: 5px;

        width: 100%;

    }

    .monkey{

        display: none;

    }

    .p{
        font-size: 22px !important;
    }
    .p,.p-quien{
        width: 100%;

        padding: 5px;

    }

    .img-mid{

        width: 80%;

    }

    .img-left,.img-right{

        left: 0;

        position: relative!important;

    }

    .menu{

        display: none;

    }

    .img-down {

        margin-top: -165px!important;

        right: -125px;

    }

    .redes{
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        

        padding-left: 0;


    }

    .dir{

        display: flex;
        align-items: center;
        padding-right: 0;

        margin: 0 auto;

    }

    .img-left-top{

        width: 100%;

        position: initial;

}



}

@media (max-width: 1024px) and (min-width: 770px) {

    .p,.p-quien{

        padding: 5px;

        width: 70%;

    }

    .img-left{

        left: 0;

        position: relative;

    }  

    .menu{

        left: -80px;

    } 

    .img-right{

        position: relative;

        right: -20px;

    }

    .img-down{

       margin-top: -260px;

       right: -125px;

    }

}

@media (max-width: 510px) {
    .px-sm-1{
        padding-right: 1rem;
        padding-left: 1rem;
    }
}
/* Starts */
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border: none;
}

.navbar-toggle span.icon-bar {
    transition: all 0.15s;
}

.navbar-toggle span:nth-child(2) {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggle span:nth-child(3) {
    opacity: 0;
}

.navbar-toggle span:nth-child(4) {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.navbar-toggle.collapsed span:nth-child(2),
.navbar-toggle.collapsed span:nth-child(4) {
    transform: rotate(0);
}

.navbar-toggle.collapsed span:nth-child(3) {
    opacity: 1;
}