.buttonHeader .circle
{
    position:relative;
    width: 50px;
    height: 50px;
    transform: skewX(20deg);
    border: 2px solid #fff;
    margin-top: 48px;
    margin-left: 28%;
    border-radius: 4px;
    cursor:pointer
}
.buttonHeader .circle span {
  position: absolute;
  background: #fff;
  height: 5px;
  width: 75%;
  border-radius: 8px;
  transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
  left: 0;
  margin-left: 5px;
  margin-right: 5px;
}
.buttonHeader .circle .top {
  top: 14%;
}
.buttonHeader .circle .middle {
  top: 44%;
}
.buttonHeader .circle .bottom {
  top: 75%;
}
.buttonHeader  .icon.active .top {
  transform: rotate(45deg);
  top: 48%;
}
.buttonHeader  .icon.active .middle, .buttonHeader  .icon.active .bottom {
  transform: rotate(-45deg);
  top: 48%;
}
.navbarmenu-mobile
{
    height: 100vh;
    background-color: #972121;
    width:250px;
    position:absolute;
    z-index:99;
    top:0;
    left:-250px;
    transition:all 0.5s ease-in;
}
.navbarmenu-mobile.active
{
    left:0;
}
.navbarmenu-mobile ul
{
    display: grid;
    height: 100vh;
    align-items: center;
}
.navbarmenu-mobile ul li
{
    list-style:none;
}
.navbarmenu-mobile ul li:after
{
    content:"";
    background-color: #fff;
    width:90%;
    height:1px;
    display:block;
}
.navbarmenu-mobile ul li a
{
    color:#fff;
    font-size:27px
}
@media only screen and (max-width:1200px)
{
    .slider-media
    {
        width:95% !important;
    }
}
@media only screen and (max-width: 1064px)
{
    .navbar-menu li a
    {
        padding: 15px 10px;
    }
}
@media only screen and (max-width: 991px)
{
    .navbar-menu li a
    {
        padding: 12px 5px;
    }
    .frontside .card , .backside .card
    {
        width:330px;
        height:330px;
    }
    .slider-media
    {
        width:100% !important;
        display:flex !important;
        justify-content:center;
    }
}
@media only screen and (max-width: 900px)
{
    .navbar-menu li a
    {
        padding: 10px 2px;
    }
}
@media only screen and (max-width: 850px)
{
    .navbar-menu li a
    {
        font-size:18px;
        padding: 10px 0px;
    }
}
@media only screen and (max-width: 820px)
{
    .navbar-menu li a div
    {
        width:90px;
    }
    .navbar-menu li a
    {
        font-size:15px;
    }
}
@media only screen and (max-width: 767px)
{
    body
    {
        padding-top:109px
    }
    #navbarSupportedContent
    {
        display:none;
    }
 
   .navbar-menu
   {
       display:none !important;
   }
   .navbar
   {
       padding:0;
       position:relative;
   }
   .navbar-brand
   {
       margin-left:30px
   }
   .container-header
   {
        display: flex !important;
        width: 100%;
        max-width: 100%;
        justify-content: space-between !important;
        align-items: stretch !important;
   }
   .buttonHeader
   {
       display:block;
    background: #972121;
    width: 36%;
    transform: skewX(-20deg);
    margin-right: -30px;
   }
   .buttonHeader button
   {
    transform: skewX(20deg);
    margin-top: 34px;
    margin-left: 32%;
    background: #fff;
    width: 50px;
    height: 50px;
    padding: 0;
   }
   .navbarmenu-mobile
   {
       display:block;
   }
}

@media only screen and (max-width:520px)
{
    .news .slider-news .card .row.no-gutters
    {
        display: block;
        width: 60%;
        margin: auto;
    }
    .news .slider-news .card .row.no-gutters .image-news
    {
        width:100%;
        max-width:100%;
        left: auto;
    }
    .news .slider-news .card .row.no-gutters .image-news img
    {
        height: 200px;
        width: 200px;
        margin: 10px auto;
    }
    .news .slider-news .card .row.no-gutters .contact-news
    {
        width: 100%;
        max-width: 100%;
    }
}
@media only screen and (max-width:500px)
{
    .img-logo
    {
        display:none;
    }
    .img-logo-sm
    {
        display:block !important;
        width:130px;
    }
    .buttonHeader button
    {
        margin-top: 60px;
    }
}
@media only screen and (max-width:480px)
{
    .news .slider-news .card .row.no-gutters
    {
        width: 80%;
    }
}
@media only screen and (max-width:450px)
{
    .news .slider-news .card .row.no-gutters
    {
        width:100%;
    }
    .news .slider-news .card .row.no-gutters .image-news img
    {
        width:180px;
        height:180px;
    }
}