/**
- Template pour tablette realise par Leo Chaussard
- Version 4.0 du site Catrainz.fr
- Aout 2022
- Version 1.0

**/


/** Tablette ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- **/


@media only screen and (min-width : 751px) and (max-width : 1339px)  {


    .ct-main-container {
        margin: 80px auto 50px auto;
    }
    
    
    .ct-class-left-main-container {
            display: none;
    }
    
    .ct-center-main-container {
        margin: 0;
        padding-top: 30px;
    }
    
    .ct-logo a img {
        max-width: none;
        height: 75px;
      }
    
    .ct-fil-de-navigation {
        display: none;
      }
    

      .ct-menu-horizontal {
        display: none;
      }

      .ct-logo-image-ordinateur {
        display: none;
      }

      .ct-logo-image-mobile {
        display: block;
      }

      .ct-article-titre-objet-cdp {
        text-align: center;
      }

      .ct-text-justify {
        text-align: left;
      }
      .ct-text-intro-justify {
        text-align: justify;
    }
      
    
    
    /** ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- **/
    
    /** ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- **/
    
    /** Menu hamburger ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- **/
    
    .ct-mobile-menu a {
        color: #ffffff;
        text-decoration: none;
      }
      
      .ct-scroll-fixed {
          /* position: fixed; */
          overflow: hidden !important;
      }
      
      .ct-mobile-menu {
          align-items: center;
          /* background-color: #2F2D2D; */
          background-color: rgba(26, 25, 25, 0.95);
          /* clip-path: polygon(81.05% 9.1%, 92% 9.1%, 92% 10.1%, 81.05% 10.1%); */
          clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
          color: #f2f2f2;
          display: flex;
          flex-direction: column;
          font-family: 'Montserrat', sans-serif;
          /* font-family: 'Poppins', sans-serif; */
          /* font-family: sans-serif; */
          font-size: 22px;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          transition: clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1), background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
          width: 100%;
          z-index: 500;
          overflow-y: scroll;
      }
      
      .ct-mobile-menu-active .ct-mobile-menu {
          background-color: rgba(26, 25, 25, 0.95);
          clip-path: polygon(101% -1%, 101% 101%, -1% 101%, -1% -1%);
      }
      
      .ct-menu-mobile-options {
          text-align: left;
          display: flex;
          flex-direction: column;
          margin-top: 80px;
          margin-bottom: 100px;
          transform: scale(0.8);
          transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
          width: calc(100% - 60px);
      }
      
      .ct-menu-mobile-options ul {
          margin-bottom: 50px;
          list-style-type: none;
          margin: 0;
          padding: 0;
      }
      
      .ct-menu-mobile-option.ct-mobile-menu-titre {
          color: #ffffff;
          text-transform: uppercase !important;
          border-bottom: 1px solid #ffffff;
          padding-top: 20px;
          padding-bottom: 15px;
        }
      
      .ct-mobile-menu-lien {
          margin: 30px 0 30px 30px;
          font-size: 18px;
      }
      
      .ct-mobile-menu-li-animation ul li, .ct-mobile-menu-li-animation h3  {
        animation: ct-nav-slide .3s .2s 1 forwards;
        animation-delay: 0.2s;
        opacity: 0;
      }
      
      .ct-mobile-menu-li-animation ul li:first-child {
        animation-delay: 0.35s;
      }
      
      .ct-mobile-menu-li-animation ul li:nth-child(2) {
        animation-delay: 0.45s;
      }
      
      .ct-mobile-menu-li-animation ul li:nth-child(3) {
        animation-delay: 0.55s;
      }
      
      .ct-mobile-menu-li-animation ul li:nth-child(4) {
        animation-delay: 0.65s;
      }
      
      .ct-mobile-menu-li-animation ul li:nth-child(5) {
        animation-delay: 0.75s;
      }
      
      .ct-mobile-menu-li-animation ul li:nth-child(6) {
        animation-delay: 0.85s;
      }
      
      
      .ct-mobile-menu-li-animation ul li:nth-child(7) {
        animation-delay: 0.95s;
      }
      
      .ct-mobile-menu-li-animation ul li:nth-child(8) {
        animation-delay: 1.05s;
      }
      
      .ct-mobile-menu-li-animation ul li:nth-child(9) {
        animation-delay: 1.15s;
      }

      .ct-mobile-menu-li-animation div.ct-menu-horizontal-mobile div.ct-apparence-mobile div {
        animation: ct-nav-slide .3s .2s 1 forwards;
        animation-delay: 0.35s;
        opacity: 0;
    }
      
      .ct-mobile-menu-li-animation ul li a {
        text-decoration: none;
        margin: auto 0px;
        color: #ffffff;
        transition: all 0.8s ease 0s;
        width: 100%;
        display: block;
      }
      
      .ct-mobile-menu-li-animation ul li a:hover {
        color: #00B4E3;
      }
      
      .ct-mobile-menu-active .ct-menu-mobile-options {
          transform: scale(1);
        }
      
        .ct-header {
          width: 100%;
          height: 80px;
          background-color: #2F2D2D;
          position: fixed;
          border-bottom: 5px solid #00B4E3;
          z-index: 1000;
          top: 0;
        }
      
        #ct-iconmenumobile {
          height: 45px;
          width: 35px;
          display: block;
          margin: auto 50px auto auto;
          cursor: pointer;
        }
      
        .ct-burger1, .ct-burger2, .ct-burger3 {
          width: 35px;
          height: 2px;
          background-color: #00B4E3;
          margin: 9px 0;
          transition: 0.4s;
          border-radius: 5px 5px 5px 5px;
      
        }
      
        .ct-change .ct-burger1 {
          -webkit-transform: rotate(-45deg) translate(-9px, 6px);
          transform: rotate(-45deg) translate(-9px, 6px);
        }
        
        .ct-change .ct-burger2 {
          opacity: 0;
        }
      
        .ct-change .ct-burger3 {
          -webkit-transform: rotate(45deg) translate(-8px, -8px);
          transform: rotate(45deg) translate(-8px, -8px);
        }
    
        @keyframes ct-nav-slide {
          0% {
           opacity:0;
           transform:translateY(100%)
          }
          to {
           opacity:1;
           transform:translateY(0)
          }
         }
    
    
    .ct-menu-horizontal-mobile h3 {
      color: #ffffff;
      text-transform: uppercase !important;
      border-bottom: 1px solid #ffffff;
      padding-top: 20px;
      padding-bottom: 15px;
      font-size: 22px;
      font-weight: normal;
      animation-delay: 0.25s;
    }
    
    .ct-menu-horizontal-mobile ul li {
      margin: 30px 0 30px 30px;
      font-size: 18px;
      /* height: 50px; */
      vertical-align: middle;
    }
    
    li.nav-item.item-108 {
      height: 50px;
    }
    
    li.nav-item.item-108 a {
      height: 50px;
      display: table-cell;
      vertical-align: middle;
      padding-left: 10px;
    }
    
    .nav-item.item-108 {
      border: none;
    }
    
    .nav-item.item-108:hover {
      background-color: inherit;
    }
    
    .nav-item.item-108::before {
      content: '';
      display: block;
      background-color: #00B4E3;
      background-image: url(../images/icones/menu-mobile/train-subway-solid-white.svg);
      filter: none;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      background-position: center; 
      width: 50px;
      height: 50px;
      float: left;
      margin: 0 6px 0 0;
      border-radius: 5px;
    }
    
    .nav-item.item-108:hover {
      background-color: inherit;
    }
    
    
    
    
    
    
    li.nav-item.item-113 {
      height: 50px;
    }
    
    li.nav-item.item-113 a {
      height: 50px;
      display: table-cell;
      vertical-align: middle;
      padding-left: 10px;
    }
    
    .nav-item.item-113 {
      border: none;
    }
    
    .nav-item.item-113:hover {
      background-color: inherit;
    }
    
    .nav-item.item-113::before {
      content: '';
      display: block;
      background-color: #b065a1;
      background-image: url(../images/icones/menu-mobile/shop-solid-white.svg);
      filter: none;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      background-position: center; 
      width: 50px;
      height: 50px;
      float: left;
      margin: 0 6px 0 0;
      border-radius: 5px;
    }
    
    .nav-item.item-113:hover {
      background-color: inherit;
    }
    
    
    
    
    li.nav-item.item-114 {
      height: 50px;
    }
    
    li.nav-item.item-114 a {
      height: 50px;
      display: table-cell;
      vertical-align: middle;
      padding-left: 10px;
    }
    
    .nav-item.item-114 {
      border: none;
    }
    
    .nav-item.item-114:hover {
      background-color: inherit;
    }
    
    .nav-item.item-114::before {
      content: '';
      display: block;
      background-color: #f29400;
      background-image: url(../images/icones/menu-mobile/house-chimney-solid-white.svg);
      filter: none;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      background-position: center; 
      width: 50px;
      height: 50px;
      float: left;
      margin: 0 6px 0 0;
      border-radius: 5px;
    }
    
    .nav-item.item-114:hover {
      background-color: inherit;
    }
    
    
    
    
    
    li.nav-item.item-115 {
      height: 50px;
    }
    
    li.nav-item.item-115 a {
      height: 50px;
      display: table-cell;
      vertical-align: middle;
      padding-left: 10px;
    }
    
    .nav-item.item-115 {
      border: none;
    }
    
    .nav-item.item-115:hover {
      background-color: inherit;
    }
    
    .nav-item.item-115::before {
      content: '';
      display: block;
      background-color: #6897b4;
      background-image: url(../images/icones/menu-mobile/signs-post-solid-white.svg);
      filter: none;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      background-position: center; 
      width: 50px;
      height: 50px;
      float: left;
      margin: 0 6px 0 0;
      border-radius: 5px;
    }
    
    .nav-item.item-115:hover {
      background-color: inherit;
    }
    
    
    
    
    li.nav-item.item-116 {
      height: 50px;
    }
    
    li.nav-item.item-116 a {
      height: 50px;
      display: table-cell;
      vertical-align: middle;
      padding-left: 10px;
    }
    
    .nav-item.item-116 {
      border: none;
    }
    
    .nav-item.item-116:hover {
      background-color: inherit;
    }
    
    .nav-item.item-116::before {
      content: '';
      display: block;
      background-color: #40b294;
      background-image: url(../images/icones/menu-mobile/car-solid-white.svg);
      filter: none;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      background-position: center; 
      width: 50px;
      height: 50px;
      float: left;
      margin: 0 6px 0 0;
      border-radius: 5px;
    }
    
    .nav-item.item-116:hover {
      background-color: inherit;
    }


    .ct-art-menubox {
      min-height: 310px;
    }

/** ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- **/

}