@media (min-width: 1280px) and (max-width: 1500px) {
  html, body {
    font-size: 15px;
  }
}

@media (min-width: 1136px) and (max-width: 1279px) {
  html, body {
    font-size: 13.5px;
  }

}

@media (min-width: 960px) and (max-width: 1135px) {
  html, body {
    font-size: 13px;
  }

}

 @media (min-width: 768px) and (max-width: 959px) {
  html, body {
    font-size: 13px;
   }

}

@media (min-width: 1441px) {
  .menu-bar {
    width:1170px;
  }
}
@media (min-width: 1264px) and (max-width: 1440px) {
  .menu-bar {
    width:1024px;
  }
}

@media (min-width: 1135px) and (max-width: 1263px) {
  .menu-bar {
     width:910px;
  }
}

@media (min-width: 1024px) and (max-width: 1134px) {
  .menu-bar {
    width:980px;
  }
  top-bar {
      height:174px;
  }
}



@media (min-width: 1135px) {
 .top-bar {
      height:186px;
  }
}

@media (max-width: 1134px) {
 .top-bar {
      height:174px;
  }
}
    
    
@media (max-width: 1023px) {
  .top-bar {
    display:none;
  }
  .top-bar-mobile {
    display:flex; 
  }
}

@media (min-width: 1024px) {
  .top-bar {
    display:flex;
  }
  .top-bar-mobile {
    display:none; 
  }
}



a, a:hover, a:active {
   display:inline-block;
   text-decoration:none; 
}

.top-bar {
  width:100%;
  margin:0px;
  background-color: white;  
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow-wrap: break-word;
}


.header-bar {
    background-image:  linear-gradient(rgba(66,66,66,0.6), rgba(66,66,66, 0.6)), url('../images/header_bg.jpg');
    width:100%;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
}

.img-header {
    width: 100%;
}

.header-title {
    color: white;
    font-size:4.8rem;
    font-family: 'Oswald';
    text-transform:uppercase; 
    text-align:center;
}

.menu-bar {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  align-items : center;
}

.menu-bar-left {
   width:200px;
}

.menu-bar-right {
  margin-bottom:3rem;
  display : flex;
  flex-direction:row;
  align-items : center;
  flex-wrap: wrap;
 }

.menu-elt {
  position:relative;
  color:#888585;
  background-color:white;  
  font-size: 100%;
  padding: 0.4rem 0.5rem;
  margin: 0px;
  border: 1px solid white;
  height: 2.4rem;
  cursor:pointer;
  border-radius: 1.5rem;
}

.menu-elt-selected {
    border: 1px solid #999; 
}

.sub-menu {
   margin-top:3rem;
   display: flex;
   flex-direction: column;
   padding: 1px;
   z-index : 2010;
   position: absolute;
   top: -1rem;
   left:0px;
   opacity:100%;
   transition: opacity 0.5s;
}
.sub-menu.vclosed {
   opacity:0%;
}

.sub-menu-pad {
    width:100%;
    height:3rem;
    opacity:0%;
    cursor:auto;
}

.sub-menu-pad:hover {
    
}

.sub-menu-elt {
   background-color: #383737; 
   border: 1px solid #383737;
   width : 18rem; 
   color: white;
   padding : 1rem 1.5rem;
   cursor:pointer;
   text-wrap: wrap;
}

.sub-menu-elt:hover {
   background-color: #bb2332; 
}



.top-bar-mobile {
    position:relative;
    background-color: white;
    flex-direction: row;
    align-items:center;
    justify-content:center;
}

.left-top-bar-mobile {
    position:absolute;
    top:50%;
    left:0%;
    transform:translate(0%,-50%);
    -ms-transform:translate(-0%,-50%);
    width: 2rem;
}



.hamburger-mobile {
    font-size:100%;
    color:#888585;
}


.hamburger-mobile:hover {
    color:#bb2332;
    cursor:pointer;
}


.content-top-bar-mobile {
    display:flex;
    flex-direction:row;
    justify-content:center;
    width:100%;
}

.logo-mobile {
   width : 110px;
   height : 60px;
}



@media (min-width: 1024px) {
   .header-title {
        font-size:4rem;
    }
    .header-bar {
        height:28rem;
    }
}

@media (min-width: 960px) and (max-width: 1024px) {
    .header-title {
        font-size:3.8rem;
    }
    .header-bar {
        height:26.8rem;
    } 
}

@media (min-width: 768px) and (max-width: 959px) {
    .header-title {
        font-size:3rem;
    }
    .header-bar {
        height:22rem;
    } 
}

@media (min-width: 480px) and (max-width: 767px) {
    .header-title {
        font-size:2.2rem;
    }
    .header-bar {
        height:16rem;
    } 

}
@media (max-width: 479px) {
      .header-title {
        font-size:1.6rem;
    }
    .header-bar {
        height:10rem;
    } 
 
}

@media (min-width: 640px)  {
   .top-bar-mobile {
      height: 132px;
    }
}
@media (min-width: 480px) and (max-width: 639px) {
   .top-bar-mobile {
      height: 125px;
    }
}
@media (max-width: 480px) {
   .top-bar-mobile {
      height: 99px;
    }
}

@media (max-width: 319px) {                               
    .left-top-bar-mobile {
        margin-left:1rem;
    }                  
}
@media (min-width: 320px) {                               
    .left-top-bar-mobile {
        margin-left:2rem;
    }   
}



@media (min-width: 480px) {
   .menu-bar-mobile {
        top:0px;
    }
}

@media (max-width: 479px) {
   .menu-bar-mobile {
        top:99px;
    }
}


.menu-bar-mobile {
  position: absolute;
  z-index:100;
  left:0px;
  width:100%;
  max-width: 380px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color:#bb2332;  
  transition: transform .5s;
  overflow-x: hidden;
 }

 .menu-bar-mobile.closed {
     transform: translateX(-380px);
 }

.menu-elt-mobile {
  position:relative;
  display: flex;
  flex-direction: row; 
  justify-content: space-between;
  align-items : center;
  color:white;
  text-transform:uppercase;
  background-color:#bb2332; 
  border-bottom: 1px solid #aa202d;
  padding-left:2.5rem;
  padding-right:1rem;
  padding-top:1rem;
  padding-bottom:1.3rem;
  margin: 0px;
  height:3.4rem;
  cursor:pointer;
  text-wrap-mode: wrap;
  font-size: 81%;
  font-weight: 500;
}



.menu-elt-mobile:hover {
   background-color:#aa202d;  
}



.menu-elt-left-mobile {
   padding-left:0.3rem;
   padding-right:0.5rem;
   padding-top:1rem;
   padding-bottom:0.3rem;

  
}

.menu-elt-right-mobile {
   font-size:33%;
   border:2px solid #bb2332;
   padding-left:0.3rem;
   padding-right:0.5rem;
   padding-top:0.6rem;
   padding-bottom:0.3rem;
}

.menu-elt-right-mobile:hover {
   border:2px solid #961c28;
}


.sub-menu-mobile {
    display:grid;
    grid-template-rows:  0fr;
    transition: grid-template-rows 400ms;
}

.sub-menu-mobile-opened {
   grid-template-rows: 1fr;
}

 .sub-menu-content-mobile { 
    overflow: hidden;
}


.sub-menu-elt-mobile { 
   display:block;
   background-color: #aa202d; 
   text-transform: none;
   width: 100%;
   color: white;
   padding: 0.8rem 2.5rem;
   cursor:pointer;
   font-size: 95%;
}

.sub-menu-elt-mobile:hover {
   background-color: #961c28;  
}