/* =============================================================================
* ce_tabs
* ========================================================================== */
.ce_tabs {
   overflow: hidden;
}

.ce_tabs .panes .section {
   display: none;
}

.ce_tabs .panes .section.active {
   display: block;
}

.ce_tabs .tabs span {
   cursor: pointer;
   display: block;
}

.ce_tabs i {
   margin-right: 5px;
}

.ce_tabs .image_container {
   text-align: center;
}

.ce_tabs .tabs .image_container img {
   width: auto;
   display: inline-block;
   opacity: 0.6;
   transition: opacity 0.5s ease;
   -webkit-transition: opacity 0.5s ease;
}

.ce_tabs .tabs li.active .image_container img,
.ce_tabs .tabs li:hover .image_container img {
   opacity: 1;
}

/* classic */
.ce_tabs .tabs.classic {
   margin-bottom: 25px;
}

.ce_tabs .tabs.classic ul li {
   display: inline-block;
   padding: 10px 15px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: rgb(247, 247, 247);
   border-radius: 10px;
   margin-bottom: 5px;
   margin-right: 3px;
}

.ce_tabs .tabs.classic ul li.active,
.ce_tabs .tabs.classic ul li:hover {
   background: var(--accentColor);
   color: #FFF;
}

.ce_tabs .panes.classic {
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: rgb(247, 247, 247);
   padding: 45px;
   border-radius: 20px;
}

.ce_tabs .tabs.horizontal ul li:hover span,
.ce_tabs .tabs.horizontal ul li.active span {
   color: #FFFFFF;
}

/* horizontal */
.ce_tabs .tabs.horizontal {
   /*text-align: center;*/
}

.ce_tabs .tabs.horizontal ul {
   /*margin-left: auto;*/
   /*margin-right: auto;*/
   margin-bottom: 35px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #FEFEFE;
   border-radius: 9px;
   padding: 4px;
   text-align: center;
   /*+box-shadow: 2px 2px 5px rgba(185, 185, 185, 0.272);*/
   -moz-box-shadow: 2px 2px 5px rgba(185, 185, 185, 0.272);
   -webkit-box-shadow: 2px 2px 5px rgba(185, 185, 185, 0.272);
   box-shadow: 2px 2px 5px rgba(185, 185, 185, 0.272);
   width: 99%;
}

.ce_tabs .tabs.horizontal li {
   padding: 10px 25px;
}

.ce_tabs .tabs.horizontal li i {
   display: flex;
   margin-right: 5px;
   align-items: center;
}

.ce_tabs .tabs.horizontal li span {
   font-weight: bold;
   display: flex;
}

.ce_tabs .tabs.horizontal ul li.active {
   background: #B38B4E;
   border-radius: 9px;
   color: ;
}

.ce_tabs .tabs.horizontal ul li:hover {
   opacity: 0.9;
}

/* horizontal-clean */
.ce_tabs .tabs.horizontal-clean {
   padding-bottom: 45px;
}

.ce_tabs.no-margin .tabs.horizontal-clean {
   padding-bottom: 0;
}

.ce_tabs .tabs.horizontal-clean ul {
   text-align: center;
   margin-bottom: 30px;
}

.ce_tabs .tabs.horizontal-clean ul li {
   display: inline-block;
   position: relative;
   font-weight: bold !important;
}

.ce_tabs .tabs.horizontal-clean ul li.active span {
   color: var(--accentColor);
}

.ce_tabs .tabs.horizontal-clean ul li.active {
   font-weight: bold;
}

.ce_tabs .tabs.horizontal-clean ul li.active:after {
   content: '';
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 10px 10px 0 10px;
   border-color: var(--accentColor) transparent transparent transparent;
   position: absolute;
   bottom: -20px;
   left: 50%;
   margin-left: -10px;
}

.ce_tabs .tabs.horizontal-clean i {
   display: block;
   font-size: 2.333rem;
   margin: 0;
}

.ce_tabs .tabs.horizontal-clean .image_container {
   margin-bottom: 5px;
}

.ce_tabs .tabs.horizontal-clean ul li:hover,
.ce_tabs .tabs.horizontal-clean ul li.active {
   font-weight: normal;
}

.ce_tabs .tabs.horizontal-clean li span {
   border: 0;
   margin-left: 25px;
   margin-right: 25px;
}

/* vertical */
.ce_tabs .tabs.vertical {
   width: 30%;
}

.ce_tabs .tabs.vertical,
.ce_tabs .panes.vertical {
   float: left;
}

.ce_tabs .panes.vertical {
   padding-left: 3rem;
   width: 70%;
}

.ce_tabs .tabs.vertical ul li span,
.ce_tabs .tabs.vertical ul li {
   width: 100%;
}

.ce_tabs .tabs.vertical ul li span {
   display: block;
   padding: 12px 16px;
}

.ce_tabs .tabs.vertical ul li:hover span,
.ce_tabs .tabs.vertical ul li.active span {
   font-weight: bold;
}

.ce_tabs .panes.vertical {
   border-left: 1px solid rgb(229, 229, 229);
}

.ce_tabs .tabs.vertical ul li span {
   border-bottom: 1px solid rgb(229, 229, 229);
}

/* vertical_2 */
.ce_tabs .tabs.vertical_2 {
   width: 30%;
   float: right;
}

.ce_tabs .panes.vertical_2 {
   float: left;
}

.ce_tabs .panes.vertical_2 {
   padding-right: 3rem;
   width: 70%;
}

.ce_tabs .tabs.vertical_2 ul li span,
.ce_tabs .tabs.vertical ul li {
   width: 100%;
}

.ce_tabs .tabs.vertical_2 ul li span {
   display: block;
   padding: 12px 16px;
   border-bottom: 1px solid rgb(229, 229, 229);
}

.ce_tabs .tabs.vertical_2 ul li.active span {
   font-weight: bold;
}

.ce_tabs .panes.vertical_2 {
   border-right: 1px solid #E1E1E1;
}

.ce_tabs .tabs ul li:hover,
.ce_tabs .tabs.vertical ul li a.current,
.ce_tabs .tabs.vertical_2 ul li a.current {
   position: relative;
   z-index: 100;
}

/* =============================================================================
* smart phones  (s / small screens)
* ========================================================================== */
@media only screen and (max-width: 1081px) {
   .ce_tabs .tabs li {
      display: block !important;
      float: none !important;
      width: 100% !important;
   }
   
   .ce_tabs .tabs.vertical,
   .ce_tabs .panes.vertical {
      float: none;
      width: 100%;
   }
   
   .ce_tabs .tabs.classic ul li {
      margin-bottom: 2px;
   }
   
   .ce_tabs .tabs.horizontal {
      margin-bottom: 20px;
   }
   
   .ce_tabs .tabs.horizontal ul {
      display: block;
      border-radius: 12px;
      /*margin-top: 0;*/
   }
   
   .ce_tabs .panes.vertical {
      border: 0;
      padding: 0;
      margin-top: 15px;
   }
   
   .ce_tabs .panes.vertical_2 {
      padding: 0;
      width: 100%;
      margin-top: 15px;
      border: 0;
   }
   
   .ce_tabs .tabs.vertical_2 {
      width: 100%;
      float: none;
   }
   
   .ce_tabs .tabs.horizontal-clean ul li {
      margin-bottom: 10px;
      border-bottom: 1px solid rgb(200, 200, 200);
      padding-bottom: 5px;
   }
   
   .ce_tabs .tabs.horizontal-clean ul li.active:after {
      display: none;
   }
}
