.bloquearScroll {
      overflow-y: hidden !important;
  }
  
  header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
  }

     /* BURGER */
  .burger-container {
      background-color: #2c2c2c;
      width: 100%;
      height: 50px;
      
  }
  .burger {
      position: relative;
      width: 70px;
      height: 50px;
      cursor: pointer;
  }
   
  .burgerBar1 {
      position: absolute;
      top: 10px;
      left: 15px;
      /* background-color: white; */
      /* background: rgb(4,4,4);
      background: linear-gradient(90deg, rgba(4,4,4,1) 0%, rgba(4,4,4,0) 15%, rgba(4,4,4,1) 85%); */
      background: rgb(68,68,68);
      background: linear-gradient(83deg, rgba(68,68,68,0.38390804597701145) 6%, rgba(68,68,68,1) 29%, rgba(68,68,68,1) 100%);
      width: 50px;
      height: 5px;
      transition:0.75s;
  }
  
  .burgerBar2 {
      position: absolute;
      top: 22px;
      left: 15px;
      background: rgb(4,4,4);
      background: linear-gradient(90deg, rgba(4,4,4,1) 0%, rgba(4,4,4,0) 74%, rgba(4,4,4,1) 85%);
      width: 50px;
      height: 5px;
      transition:0.50s;
  }
  
  .burgerBar3 {
      position: absolute;
      top: 35px;
      left: 15px;
      background: rgb(4,4,4);
      background: linear-gradient(90deg, rgba(4,4,4,1) 0%, rgba(4,4,4,1) 29%, rgba(4,4,4,0) 97%);
      width: 50px;
      height: 5px;
      transition:0.25s;
  }
  .burgerOn>.burgerBar1{
      transform: rotate(-40deg);
      top: 22px;
      transition: 0.75s;
   }
   .burgerOn>.burgerBar2{
      transform: rotate(40deg);
      transition:0.5s;
   }
   .burgerOn>.burgerBar3{
      width:0px;
      transition:0.25s;
   }
  
  /*  FIN - BURGER */
  /*  MENU */
  
  #menu-container {
      background-color: rgb(255, 255, 255);
      width: 100%;
      height: 0 ;
      transition: 0.5s;
  }
  
  .menuContainerOn {
   height: calc(100vh - 50px) !important;
      overflow-y: auto;
      transition: 0.5s;
  }
 
   .menuContainerOn::-webkit-scrollbar {
      -webkit-appearance: none;
  }
  
  .menu {
      margin: 0px;
      padding:20px 10px;
      text-align:center;
      opacity: 0;
      width: 0%;
      height: 0%;
      display:none;
  }
  .menu>li{
  
 
  }
   .menu > li a> span{
      display: block;
      color:#444;
      font-size: 20px;
      padding:5px 0px;
      font-weight: bolder !important;
   }   
   .menu li a> span:hover{
      background-color:rgb(200, 200, 200);
   }  

  .menuOn {
      width: auto;
      height: 100vh;
      display:block !important;
      animation-name: menuOnAnimation;
      animation-fill-mode: forwards;
      animation-duration: 1s;
  }
  
  @keyframes menuOnAnimation {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  /*  FIN - MENU */
  /* OPCIONES DEL MENU */
  
  .subopcionTitre {
      display:block;
      cursor: pointer;
      color:rgb(4,4,4) ;
      font-size: 20px;
      font-weight: bolder !important;
  }
  .subopcionTitre:hover {
   background-color:rgb(200, 200, 200);
}

.subopcionTitre::after{
    display: inline-block;
    margin-left: 15px;
    content: "+";
   }
   
   .subopcionTitreOn::after{
    content: "-" !important;
    vertical-align: 3px;
   }

  .subopcionTitre+ul {
      display: none;
  }
  
  .subopcionTitreOn+ul {
      display: block;
  }

  .subopcionContainer{background-color:#efefef !important; }
  .subopcionContainer>li>a>span {
   display: block;
   font-size: 16px;
  }   
  .subopcionContainer>li>a>span:hover{   
    background-color:rgb(200, 200, 200);
  }  
 
  /*  FIN - OPCIONES DEL MENU */

  .menuLogo2{
    padding-top:60px;
   text-align: center; 
  }
  .menuLogo2>img{
    height:auto;
    width: 300px; 
  }

  .menuLogo2On{
    top:-300px; 
  }


    .conteiner-social{
        position: fixed;
        top: 5px;
        right: 20px;
        z-index: 2;     
    }

    .container-lang {
        position: absolute;
        top: 61px;
        left: 15px;
        display: flex;
        flex-direction: row; 
    }
 
  .container-lang>a>div {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border-radius: 50%;
    padding: 5px 5px;
    margin-right: 5px;
    font-weight: bolder;
    }   
    .container-resa{
        position: fixed;
        top: 5px;
        right: 25px;
        display: flex;
        flex-direction: row;
        z-index: 1;
      }

    .socialPhone{    
    height: 35px;
    width: 35px;
    padding: 0px;
    }
    .socialResa{    
        height: 35px;
        width: 35px;
        padding: 0px;
    }

@media only screen and (min-width: 400px) {}

@media only screen and (min-width: 500px) {
  
}

@media only screen and (min-width: 576px) {
    .menuLogo2{
        padding-top:0px;
    }
    .menuLogo2>img{ 
        width: 25%;
    	max-width: 300px;
    }  
    .container-lang{
        position: absolute;
        top: 10px;
        left: 20px; 
    }

    .conteiner-social{ 
        position: absolute;
        top: 10px;
        right: 20px;
    } 
    header {
        position: relative;

    }
   
    .stickiMenu4{
        position: relative !important;
        top: auto !important;
        bottom: 0px !important;
    }
    .stickiMenu4On{
        position: fixed !important;
        top: 0px !important;
        bottom: auto !important;
    }
    .stickiMenu4On>nav>.menu>.menuLogo1{
        align-self: baseline!important;
    } 
}   

@media only screen and (min-width: 768px) {
    
    .socialResa{    
        padding-left:10px; 
        padding-right:10px; 
        width: auto; 
    }
}

@media only screen and (min-width: 992px) {
    .socialPhone{    
        padding-left:10px; 
        padding-right:10px; 
        width: auto; 
    }
}
@media only screen and (min-width: 1024px) {}
@media only screen and (max-width: 1199px) {
    .stickiItemsMenuOn{
        position: fixed !important;
        z-index: 4 !important;
        top: 5px !important; 
    }
    .stickiLogoOn{
        position: fixed !important;
        z-index: 4 !important;
        top: 5px !important; 
    }
    .menuLogo2.stickiLogoOn{  
    padding-top:0px !important;
    right: calc(50% - 60px) !important;
    }
    .menuLogo2.stickiLogoOn > img{ 
        width: 120px !important;
        opacity:0; 
        -webkit-animation:fadeInLogoMenu 1s forwards; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation:fadeInLogoMenu 1s forwards; /* Firefox < 16 */
        -ms-animation:fadeInLogoMenu 1s forwards; /* Internet Explorer */
        -o-animation:fadeInLogoMenu 1s forwards; /* Opera < 12.1 */
        animation:fadeInLogoMenu 1s forwards; 
    }   
    @keyframes fadeInLogoMenu{
        0%{
           opacity:0;
        }100%{ 
            opacity:1;
        } 
    }
}
@media only screen and (min-width: 1200px) {
   
 
   .burger-container{display:none;}

/* ESTILOS DEL MENU */
.menu{
    height:46px !important;
    width: 100%;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0px ;
    background-color:white;
    transition:0.5s;
    
}
.menu>li {
    position: relative;
    border-bottom: none !important;
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
 
}
 .menuLogo1{
    align-self: end!important;
}
.menu > li a> span{
   display: block;
}   

.subopcionContainer{ 
   position: absolute;
   top:48px !important;
   width: 100%;
}
/* FIN - ESTILOS DEL MENU */
 
   

    
 
 
}