.elementor-43564 .elementor-element.elementor-element-a9cd317{--spacer-size:50px;}.elementor-43564 .elementor-element.elementor-element-3a8bd29{text-align:start;}.elementor-43564 .elementor-element.elementor-element-3a8bd29 .elementor-heading-title{font-size:29px;}.elementor-43564 .elementor-element.elementor-element-970222c{--spacer-size:20px;}.elementor-43564 .elementor-element.elementor-element-b439dc9{text-align:center;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li.eael-tab-nav-item:hover:not(.active){background-color:#333;}.elementor-43564 .elementor-element.elementor-element-28e06f0{width:100%;max-width:100%;}.elementor-43564 .elementor-element.elementor-element-28e06f0 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li i{font-size:16px;color:#333;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li img{width:16px;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li svg{width:16px;height:16px;fill:#333;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-tab-inline-icon li .title-before-icon{margin-right:10px;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-tab-inline-icon li .title-after-icon{margin-left:10px;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-tab-top-icon li i, .elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-tab-top-icon li img, .elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-tab-top-icon li svg{margin-bottom:10px;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li{background-color:#01010114;color:#333333;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li:hover:not(.active){background-color:#02020226;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li:hover{color:#333333;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li:hover > i{color:#fff;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li:hover > svg{fill:#fff;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul .active{background-color:#A90000;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li.active{color:#fff;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li.active > i{color:#fff;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li.active > svg{fill:#fff;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-content > div{color:#333;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs .eael-tabs-nav > ul li:after{border-width:10px;bottom:-10px;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs.eael-tabs-vertical > .eael-tabs-nav > ul li:after{right:-10px;top:calc(50% - 10px) !important;border-left-color:#444;}.rtl .elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs.eael-tabs-vertical > .eael-tabs-nav > ul li:after{right:auto;left:-10px !important;top:calc(50% - 10px) !important;}.elementor-43564 .elementor-element.elementor-element-28e06f0 .eael-advance-tabs:not(.eael-tabs-vertical) > .eael-tabs-nav > ul li:after{border-top-color:#444;}.elementor-43564 .elementor-element.elementor-element-fc96185{--spacer-size:139px;}.elementor-43564 .elementor-element.elementor-element-b1735dd > .elementor-background-overlay{background-color:#04030333;opacity:0.5;}.elementor-43564 .elementor-element.elementor-element-9a4f056{text-align:center;font-size:24px;font-weight:700;}.elementor-43564 .elementor-element.elementor-element-4bf4367 .elementor-button{background-color:#A90000;}.elementor-43564 .elementor-element.elementor-element-4bf4367 .elementor-button:hover, .elementor-43564 .elementor-element.elementor-element-4bf4367 .elementor-button:focus{background-color:#FF0101;}.elementor-43564 .elementor-element.elementor-element-c5f9981{border-style:solid;border-color:#0101012B;margin-top:20px;margin-bottom:20px;}.elementor-43564 .elementor-element.elementor-element-b0a4ced{font-weight:700;color:#03020280;}.elementor-43564 .elementor-element.elementor-element-0ed6442{--alignment:left;--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-43564 .elementor-element.elementor-element-071b96f{--divider-border-style:solid;--divider-color:#01010196;--divider-border-width:1px;}.elementor-43564 .elementor-element.elementor-element-071b96f .elementor-divider-separator{width:99%;}.elementor-43564 .elementor-element.elementor-element-071b96f .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-43564 .elementor-element.elementor-element-34b1cd7{border-style:solid;border-color:#0101012B;margin-top:20px;margin-bottom:20px;}@media(min-width:768px){.elementor-43564 .elementor-element.elementor-element-bb6762a{width:67.19%;}.elementor-43564 .elementor-element.elementor-element-5817028{width:32.761%;}.elementor-43564 .elementor-element.elementor-element-a310577{width:46.626%;}.elementor-43564 .elementor-element.elementor-element-0f6cd18{width:53.191%;}}@media(max-width:1024px){ .elementor-43564 .elementor-element.elementor-element-0ed6442{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}@media(max-width:767px){ .elementor-43564 .elementor-element.elementor-element-0ed6442{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}/* Start custom CSS for eael-adv-tabs, class: .elementor-element-28e06f0 */@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);

$color: rgba(22, 195, 255,0.5);
$border: rgba(0,0,0,0.2);
$background: #fafafa;

$darkcolor: rgba(175,227,100, 0.6);
$darkborder: rgba(255,255,255, 0.3);
$darkbackground: #333;

.sexytabs > ul {
  
  text-align: center; font-weight: 500;
  margin: 50px 0 0; padding: 0; position: relative;
  border-bottom: 1px solid $border; z-index: 1;
  
  > li {
    
    display: inline-block; background: $background;
    padding: 0.6em 0; position: relative; width: 33%; margin: 0 0 0 -4px;
    
    &:before,
    &:after { opacity: 0; transition: 0.3s ease; }
    
    &.ui-tabs-active:before, &.ui-tabs-active:after,
    &.ui-state-hover:before, &.ui-state-hover:after,
    &.ui-state-focus:before, &.ui-state-focus:after{ opacity: 1; }
    
    // this is the shadow under the text/mask
    &:before,
    &.ui-state-active.ui-state-hover:before,
    &.ui-state-active.ui-state-focus:before{
      content: "";
      position: absolute;
      z-index: -1;
      box-shadow: 0 2px 3px $color;
      top: 50%; bottom: 0px; left: 5px; right: 5px;
      border-radius: 100px / 10px; 
    }
    
    // this is the "diamond" mask that creates the
    // nice indent effect.
    &:after,
    &.ui-state-active.ui-state-hover:after,
    &.ui-state-active.ui-state-focus:after{
      content: ""; background: $background;
      position: absolute;
      width: 12px; height: 12px;
      left: 50%; bottom: -6px; margin-left: -6px;
      transform: rotate(45deg);
      box-shadow: 
        inset 3px 3px 3px $color, 
        inset 1px 1px 1px opacify($border,0.1);
      
    }
    &.ui-state-hover:before,
    &.ui-state-focus:before{
      box-shadow: 0 2px 3px $border;
    }
    &.ui-state-hover:after,
    &.ui-state-focus:after{
      box-shadow: 
        inset 3px 3px 3px $border, 
        inset 1px 1px 1px opacify($border,0.1);
    }
    &.ui-state-focus a {
      text-decoration: underline;  
    }
    
    &:focus { outline: none; }
    
    a {
      
      color: #444; text-decoration: none;
      
      &:focus { outline: none; }
      span { position: relative; top: -0.5em; }
      
    }
  }
}


.sexytabs.dark > ul {
  
  border-bottom-color: $darkborder;
  
  > li {
    
    background: $darkbackground;
    
    
    // this is the shadow under the text/mask
    &:before,
    &.ui-state-active.ui-state-hover:before,
    &.ui-state-active.ui-state-focus:before {
      box-shadow: 0 2px 3px $darkborder;
    }
    
    // this is the "diamond" mask that creates the
    // nice indent effect.
    &:after,
    &.ui-state-active.ui-state-hover:after,
    &.ui-state-active.ui-state-focus:after{
      background: $darkbackground;
      box-shadow: 
        inset 3px 3px 3px $darkborder, 
        inset 1px 1px 1px opacify($darkborder,0.2);
    }
    &.ui-state-hover:before,
    &.ui-state-focus:before{
      box-shadow: none;
    }
    &.ui-state-hover:after,
    &.ui-state-focus:after{
      box-shadow: inset 1px 1px 0px opacify($darkborder,0.1);
    }
    
    a {
      color: white;
    }
  }
}




// misc setup CSS.

img { 
  width: 60px; float: left; 
  margin: 0 1em 1em 0; border-radius: 3px; }

body{ 
  font-size: 1em; background: $background; 
  font-family: Lato; font-weight: 300;
}

h1 { text-align: center; font-size: 20px;  }

.sexytabs { width: 90%; min-width: 360px; margin: auto; }
.contents { padding: 20px 50px; min-height: 200px; }

.darkpage { 
  
  background: #333; 
  color: white;
  
}

.darkpage,
.lightpage { padding: 50px 0; }


@media screen and (min-width: 1000px) {
  .darkpage,
  .lightpage { width: 50%; float: left; padding: 0; }
}
View Compiled 



Resources/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-1322c20 */@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);

$color: rgba(22, 195, 255,0.5);
$border: rgba(0,0,0,0.2);
$background: #fafafa;

$darkcolor: rgba(175,227,100, 0.6);
$darkborder: rgba(255,255,255, 0.3);
$darkbackground: #333;

.sexytabs > ul {
  
  text-align: center; font-weight: 500;
  margin: 50px 0 0; padding: 0; position: relative;
  border-bottom: 1px solid $border; z-index: 1;
  
  > li {
    
    display: inline-block; background: $background;
    padding: 0.6em 0; position: relative; width: 33%; margin: 0 0 0 -4px;
    
    &:before,
    &:after { opacity: 0; transition: 0.3s ease; }
    
    &.ui-tabs-active:before, &.ui-tabs-active:after,
    &.ui-state-hover:before, &.ui-state-hover:after,
    &.ui-state-focus:before, &.ui-state-focus:after{ opacity: 1; }
    
    // this is the shadow under the text/mask
    &:before,
    &.ui-state-active.ui-state-hover:before,
    &.ui-state-active.ui-state-focus:before{
      content: "";
      position: absolute;
      z-index: -1;
      box-shadow: 0 2px 3px $color;
      top: 50%; bottom: 0px; left: 5px; right: 5px;
      border-radius: 100px / 10px; 
    }
    
    // this is the "diamond" mask that creates the
    // nice indent effect.
    &:after,
    &.ui-state-active.ui-state-hover:after,
    &.ui-state-active.ui-state-focus:after{
      content: ""; background: $background;
      position: absolute;
      width: 12px; height: 12px;
      left: 50%; bottom: -6px; margin-left: -6px;
      transform: rotate(45deg);
      box-shadow: 
        inset 3px 3px 3px $color, 
        inset 1px 1px 1px opacify($border,0.1);
      
    }
    &.ui-state-hover:before,
    &.ui-state-focus:before{
      box-shadow: 0 2px 3px $border;
    }
    &.ui-state-hover:after,
    &.ui-state-focus:after{
      box-shadow: 
        inset 3px 3px 3px $border, 
        inset 1px 1px 1px opacify($border,0.1);
    }
    &.ui-state-focus a {
      text-decoration: underline;  
    }
    
    &:focus { outline: none; }
    
    a {
      
      color: #444; text-decoration: none;
      
      &:focus { outline: none; }
      span { position: relative; top: -0.5em; }
      
    }
  }
}


.sexytabs.dark > ul {
  
  border-bottom-color: $darkborder;
  
  > li {
    
    background: $darkbackground;
    
    
    // this is the shadow under the text/mask
    &:before,
    &.ui-state-active.ui-state-hover:before,
    &.ui-state-active.ui-state-focus:before {
      box-shadow: 0 2px 3px $darkborder;
    }
    
    // this is the "diamond" mask that creates the
    // nice indent effect.
    &:after,
    &.ui-state-active.ui-state-hover:after,
    &.ui-state-active.ui-state-focus:after{
      background: $darkbackground;
      box-shadow: 
        inset 3px 3px 3px $darkborder, 
        inset 1px 1px 1px opacify($darkborder,0.2);
    }
    &.ui-state-hover:before,
    &.ui-state-focus:before{
      box-shadow: none;
    }
    &.ui-state-hover:after,
    &.ui-state-focus:after{
      box-shadow: inset 1px 1px 0px opacify($darkborder,0.1);
    }
    
    a {
      color: white;
    }
  }
}




// misc setup CSS.

img { 
  width: 60px; float: left; 
  margin: 0 1em 1em 0; border-radius: 3px; }

body{ 
  font-size: 1em; background: $background; 
  font-family: Lato; font-weight: 300;
}

h1 { text-align: center; font-size: 20px;  }

.sexytabs { width: 90%; min-width: 360px; margin: auto; }
.contents { padding: 20px 50px; min-height: 200px; }

.darkpage { 
  
  background: #333; 
  color: white;
  
}

.darkpage,
.lightpage { padding: 50px 0; }


@media screen and (min-width: 1000px) {
  .darkpage,
  .lightpage { width: 50%; float: left; padding: 0; }
}
View Compiled 



Resources/* End custom CSS */