@font-face {
  font-family: babapro;
  src: url("../fonts/Babapro-Ea4rr.otf");
}

@font-face{
  font-family: raleway;
  src: url("../fonts/Raleway-Regular.ttf")
}
@font-face{
  font-family: raleway-bold;
  src: url("../fonts/Raleway-Bold.ttf")
}
@font-face{
  font-family: raleway-semibold;
  src: url("../fonts/Raleway-SemiBold.ttf")
}
*
{
  font-feature-settings: 'pnum' on, 'lnum' on;
}
header{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}
.espace_header_categories{
  width: 100%;
  height: 65px;
}

.header__nav{
  width: 100%;
  height: 65px;
  z-index: 100;
  background-color: #21243a;
}


.header__nav ol{
    height: inherit;
    width: inherit;
    display: flex;
    list-style: none;
}
.nav__items{
  width: 80%;
  display: flex;
  justify-content: space-around;
  /* margin-left: 3%; */
  height: 100%;
}
.header__nav > ol> label{
   display:none;
   flex-direction:column;
   width: 3rem;
   cursor:pointer;
   text-align: center;
   justify-content: center;
   margin-right: 2rem;
   position: relative;
 }

.header__nav > ol> label +.nav__items{
  transition: all .3s ease-out;
  top: -200%;
  overflow: auto;
}

.header__nav > ol> label.active +.nav__items{
  top:0;
}


 
.header__nav > ol> label >span{
   background: #fff;
   border-radius:10px;
   height:3px;
   margin: 4px 0;
   transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
 
 
 span:nth-of-type(1){
   width:50%;
   
 }
 
 span:nth-of-type(2){
   width:100%;
 }
 
 
 span:nth-of-type(3){
   width:75%;
 }
 
 
 input[type="checkbox"]{
   display:none;
 }
 
 
 input[type="checkbox"]:checked ~ span:nth-of-type(1){
   transform-origin:bottom;
   transform: rotatez(48deg) translate(6px,0px);
 }
 
 
 input[type="checkbox"]:checked ~ span:nth-of-type(2){
   
   transform-origin:top;
   transform:rotatez(-45deg)
 }
 
 
 input[type="checkbox"]:checked ~ span:nth-of-type(3){
   
   transform-origin:bottom;
   width:50%;
   transform: translate(14px,-7px) rotatez(47deg);
 }


.items a{
    font-family: raleway;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.6rem;
    color:#fff;
    position:relative;
    height: fit-content;
    top: 33%;
}

.logo_container{
  /* width: 14%; */
  min-width: 220px;
  align-self: center;
  max-height: 100%;
  margin-left: 3%;
}

.logo{
  width: 100%;
  /* height: 100%; */
  max-height: 41px;
  /* filter: drop-shadow(0px 0px 2px #5b97ff); */
}


.items__menu > a{
    font-family: raleway;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.6rem;
    color:#fff;
    position: relative;
    height: fit-content;
    top: 33%;
}
.items__menu > ul > li > a{
  font-family: raleway;
      font-weight: 700;
      text-decoration: none;
      font-size: 1.5rem;
}


.items__menu{
  display: flex;
}

.items__menu img{
  filter: invert(1);
  position: relative;
  top: 32%;
  height: 2rem;
  width: 2rem;
}


.items >a:hover{
  color:var(--sColor);
}



.menu_categoria li{
  width: 25%;
  text-align: center;
  display: flex;
  justify-content: center;
  height: inherit;
    align-items: center;
}

.menu_contactanos li{
  width: 25%;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu_categoria li:hover{
  background-color: #21243a;
  color: white;
}

.menu_categoria li a,.menu_contactanos li a{
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--bgsecondColor);
}

.menu_categoria,.menu_contactanos{
  position: absolute;
  background-color: white;
  width: 100%;
  left: 0;
  top: 6.2rem;
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
  visibility: hidden;
  height: 6rem;
}