@media all and (min-width: 768px) {

  #main-menu-mobile {

    display: none; } }

@media all and (max-width: 767px) {

  #main-menu-mobile {

    position: fixed;

    top: 0;

    left: 0;

    width: 300px;

    max-width: 100%;

    height: 100vh;

    z-index: 10000000000;

    background-color: white;

    display: block;

    -webkit-transform: translate(-350px, 0px);

    -moz-transform: translate(-350px, 0px);

    -o-transform: translate(-350px, 0px);

    -ms-transform: translate(-350px, 0px);

    transform: translate(-350px, 0px);

    -webkit-transition: all 0.3s ease-in-out;

    -khtml-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out; }

    #main-menu-mobile::-webkit-scrollbar {

      width: 5px;

      border-radius: 0px; }

    #main-menu-mobile::-webkit-scrollbar-track {

      background-color: #fff; }

    #main-menu-mobile::-webkit-scrollbar-thumb {

      background-color: #b1090d;

      -webkit-transition: all 0.3s ease-in-out;

      -khtml-transition: all 0.3s ease-in-out;

      -moz-transition: all 0.3s ease-in-out;

      -ms-transition: all 0.3s ease-in-out;

      -o-transition: all 0.3s ease-in-out; }

    #main-menu-mobile::-webkit-scrollbar-thumb:hover {

      background-color: #b1090d; }

    #main-menu-mobile {

      scrollbar-face-color: #b1090d;

      scrollbar-track-color: #fff; }

    #main-menu-mobile .header-menu-mobile {

      padding: 15px;

      background-color: #026a94; }

    #main-menu-mobile .header-menu-mobile img {

      width: 80%; }

    #main-menu-mobile .header-menu-mobile .close-menu-btn {

      cursor: pointer;

      display: block;

      padding: 5px;

      min-width: 30px;

      border: solid 1px white; }

    #main-menu-mobile .header-menu-mobile .close-menu-btn i {

      color: #fff;

      font-size: 17px; }

    #main-menu-mobile .header-menu-mobile .close-menu-btn:hover {

      background-color: #fff; }

      #main-menu-mobile .header-menu-mobile .close-menu-btn:hover i {

        color: #F7941E; }

    #main-menu-mobile .menu_clone ul {

      max-height: 600px;

      overflow-y: scroll; }

      #main-menu-mobile .menu_clone ul::-webkit-scrollbar {

        width: 5px;

        border-radius: 40px; }

      #main-menu-mobile .menu_clone ul::-webkit-scrollbar-track {

        background-color: #fff; }

      #main-menu-mobile .menu_clone ul::-webkit-scrollbar-thumb {

        background-color: #F7941E;

        -webkit-transition: all 0.3s ease-in-out;

        -khtml-transition: all 0.3s ease-in-out;

        -moz-transition: all 0.3s ease-in-out;

        -ms-transition: all 0.3s ease-in-out;

        -o-transition: all 0.3s ease-in-out; }

      #main-menu-mobile .menu_clone ul::-webkit-scrollbar-thumb:hover {

        background-color: #F7941E; }

      #main-menu-mobile .menu_clone ul li {

        position: relative;

        display: block;

        border-bottom: solid 1px #ebebeb;

        overflow: hidden; }

        #main-menu-mobile .menu_clone ul li a {

          display: block;

          padding: 12px 15px 10px;

          color: #333333;

          font-size: 14px;

          font-family: 'Roboto';

          font-weight: normal;

          -webkit-transition: all 0.3s ease-in-out;

          -khtml-transition: all 0.3s ease-in-out;

          -moz-transition: all 0.3s ease-in-out;

          -ms-transition: all 0.3s ease-in-out;

          -o-transition: all 0.3s ease-in-out; }

          #main-menu-mobile .menu_clone ul li a:hover,

          #main-menu-mobile .menu_clone ul li.active a {

            color: #026a94; }

        #main-menu-mobile .menu_clone ul li i {

          position: absolute;

          width: 40px;

          max-width: 100%;

          height: 40px;

          top: 0;

          right: 0;

          background-color: #026a94;

          font-style: normal;

          cursor: pointer;

          display: flex;

          align-items: center;

          justify-content: center;

          z-index: 100;

          opacity: 1;

          -webkit-transition: all 0.3s ease-in-out;

          -khtml-transition: all 0.3s ease-in-out;

          -moz-transition: all 0.3s ease-in-out;

          -ms-transition: all 0.3s ease-in-out;

          -o-transition: all 0.3s ease-in-out; }

          #main-menu-mobile .menu_clone ul li i::before {

            font-family: 'FontAwesome';

            content: "\f107";

            font-size: 17px;

            color: #fff;

            -webkit-transition: all 0.3s ease-in-out;

            -khtml-transition: all 0.3s ease-in-out;

            -moz-transition: all 0.3s ease-in-out;

            -ms-transition: all 0.3s ease-in-out;

            -o-transition: all 0.3s ease-in-out; }

          #main-menu-mobile .menu_clone ul li i.active::before {

            -webkit-transform: rotate(-180deg);

            -moz-transform: rotate(-180deg);

            -o-transform: rotate(-180deg);

            -ms-transform: rotate(-180deg);

            transform: rotate(-180deg); }

        #main-menu-mobile .menu_clone ul li:hover i {

          opacity: 1;

          background-color: #F7941E; }

        #main-menu-mobile .menu_clone ul li ul {

          position: static;

          width: 100%;

          display: none;

          overflow-y: hidden;

          overflow-x: hidden; }

          #main-menu-mobile .menu_clone ul li ul li {

            border-top: 1px solid #fff; }

            #main-menu-mobile .menu_clone ul li ul li:last-child {

              border-bottom: none; }

            #main-menu-mobile .menu_clone ul li ul li a {

              padding-left: 20px;

              font-size: 13px;

              background-color: #ebebeb; }

            #main-menu-mobile .menu_clone ul li ul li ul li a {

              padding-left: 30px; }

  .active-menu-mobile {

    -webkit-transform: translate(0px, 0px) !important;

    -moz-transform: translate(0px, 0px) !important;

    -o-transform: translate(0px, 0px) !important;

    -ms-transform: translate(0px, 0px) !important;

    transform: translate(0px, 0px) !important; }

  .bg-over-menu {

    position: fixed;

    top: 0;

    right: -100%;

    height: 100%;

    width: calc(100% - 300px);

    min-width: 20%;

    opacity: 0;

    z-index: 0;

    background-color: rgba(0, 0, 0, 0.6);

    -webkit-transition: all 0.3s ease-in-out;

    -khtml-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out; }

    .bg-over-menu.show-over {

      right: 0;

      z-index: 10000000000;

      opacity: 1; }

    .btn_sp_menu .animated-icon1 {

      width: 30px;

      height: 20px;

      position: relative;

      margin: 0px;

      -webkit-transform: rotate(0deg);

      -moz-transform: rotate(0deg);

      -o-transform: rotate(0deg);

      transform: rotate(0deg);

      -webkit-transition: .5s ease-in-out;

      -moz-transition: .5s ease-in-out;

      -o-transition: .5s ease-in-out;

      transition: .5s ease-in-out;

      cursor: pointer; }

      .btn_sp_menu .animated-icon1 span {

        display: block;

        position: absolute;

        height: 3px;

        width: 100%;

        border-radius: 9px;

        opacity: 1;

        right: 0;

        background: #F7941E;

        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

        -webkit-transition: .25s ease-in-out;

        -moz-transition: .25s ease-in-out;

        -o-transition: .25s ease-in-out;

        transition: .25s ease-in-out; }

        .btn_sp_menu .animated-icon1 span:nth-child(1) {

          top: 0px; }

        .btn_sp_menu .animated-icon1 span:nth-child(2) {

          top: 9px; }

        .btn_sp_menu .animated-icon1 span:nth-child(3) {

          top: 19px; }

      .btn_sp_menu .animated-icon1.open span:nth-child(1) {

        top: 11px;

        -webkit-transform: rotate(135deg);

        -moz-transform: rotate(135deg);

        -o-transform: rotate(135deg);

        transform: rotate(135deg); }

      .btn_sp_menu .animated-icon1.open span:nth-child(2) {

        opacity: 0;

        left: -60px; }

      .btn_sp_menu .animated-icon1.open span:nth-child(3) {

        top: 11px;

        -webkit-transform: rotate(-135deg);

        -moz-transform: rotate(-135deg);

        -o-transform: rotate(-135deg);

        transform: rotate(-135deg); }

    .btn_sp_menu:hover span:nth-child(1), .btn_sp_menu:hover span:nth-child(3) {

        left: auto;

        right: 0;

        width: 60%;}

      .social_menu_mobile .item-social {

        color: #333333;

        font-size: 18px;

        margin: 0 20px;}

      .social_menu_mobile .item-social:hover {

        color: #F7941E;}

    }

@media all and (max-width: 575px) {

#main-menu-mobile {

  width: 245px; }

#main-menu-mobile .menu_clone ul li a {

  font-size: 12px;

}

.bg-over-menu {

  width: calc(100% - 245px); } 

}