/**
 * File: woocommerce.scss
 * Description : Contains all styling for the WooCommerce in WPLMS
 * Author: Mr.Vibe 
 * Credits: www.VibeThemes.com
 * Project: WPLMS
 * version 2.0
 **/
/*========================================================================*/
/*   TABLE OF CONTENT
/*========================================================================*/
/*
/*    01. GLOBAL STYLING
/*    02. TYPOGRAPHY STYLING
/*    03. FORMS STYLING
/*    04. SELECT DROPDOWN
/*    05. LINKS STYLING
/*    06. LISTS STYLING
/*    07. PAGE BLOCKS
/*    08. MISCELLANEOUS
/*
/*========================================================================*/
/*   01. DEFAULT STYLING 
/*========================================================================*/


/*========================================================================*/
/*   01. GENERAL STYLING 
/*========================================================================*/

.clear1,
.clear2:nth-child(2n+1),
.clear3:nth-child(3n+1),
.clear4:nth-child(4n+1),
.clear6:nth-child(6n+1){
    clear:both;
}
.grid_item.clear2:nth-child(2n+1),
.grid_item.clear3:nth-child(3n+1),
.grid_item.clear4:nth-child(4n+1),
.grid_item.clear6:nth-child(6n+1){
    clear:none;
}

.grid{
  
  li {
    line-height:1.4em;
    max-width:100%;
    .block{
      margin:0 0 30px;
      line-height:1.5;
    }
  }

  &.masonry{
    li{
      .block{
        margin:0 15px 30px;
        line-height:0;
        z-index:8;
        &:hover{
          z-index:9;
        }
      }
    }
  }
} 

.pagecontent{
    margin:30px 0;
    position:relative;
}


/*========================================================================*/
/*   01. IFRAME STYLING 
/*========================================================================*/

.iframecontent {
  position: relative;
  padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;border:none;
    overflow:hidden;
  }
}

/*========================================================================*/
/*   01. PAGE BUILDERSTYLING 
/*========================================================================*/

[class*="span"].v_first {
    margin-left:0;
}
.vibe_editor{

}

.v_first {
    clear:both;
}   

.v_column{
    margin-bottom:30px;
    display:inline-block;
}
section.stripe{
    margin:0;
    z-index:3;
    overflow:hidden;
    .v_column{
      margin-bottom:0;
    }
}
.stripe.v_column,
.stripe_container.v_column{
    padding-bottom:0;
}

.stripenext{
padding-top:30px;
z-index:3;
}

.stripe.slider,
.slider .stripe{
    padding:0;
}

.fullwidth{
    width:100%;
}
.v_module{
  position:relative;
}


/*========================================================================*/
/*   01. PAGEBUILDER GRIDS
/*========================================================================*/

.vibe_grid{

  .wp_query_args{
      display: none;
  }
  &.masonry{
      margin:0 -15px;
  }
}


.load_grid,
.end_grid{
    clear:both;
    margin: 20px 0;
    width:100%;
    text-align: center;
    position: relative;
    display:inline-block;
}
.end_grid span{
    padding: 16px 40px;
    border-radius:2px;
    background:$bordercolor;
    width:200px;
}
.load_grid span{
    background: $bordercolor url(../images/spinner.gif) no-repeat 5px;
    padding: 16px 40px 16px 70px;
    border-radius:2px;
}
.end_grid{
     display:none;
}

.form_field.small{
  width:32px;
  padding:4px;
}
.math_sum{
  padding:5px 5px 5px 0;
  font-weight:600;
  float:left;
  font-style:normal;
}

/*========================================================================*/
/*   01. BLOCKS
/*========================================================================*/

.flexslider>ul.slides{list-style:none !important;}


.blog-item{
  .blog-item-date{
    float: left;
    font-size: 32px;
    display: inline-block;
    border-right: 1px solid $bordercolor;
    margin-right: 15px;
    .day{
      font-weight:700;
      padding:15px;
      color:#bbb;
    }
    .month{
      display: block;
      padding: 5px 10px 10px;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 600;
      color:#bbb;
      text-align: center;
      border-top: 1px solid $bordercolor;
    }
  }
  & + h4 + p{
    margin-left:80px;
  }
} 

/*====================================================================
  FEATURED BLOCKS
====================================================================*/

.block{

  // DEFAULT

  .block_content{
    position: relative;
    line-height:1.4;
  }
  .block_media{
    position: relative;
    img{
      border-radius:2px;
      width:100%;
    }
    span.overlay{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index:1;
      background: rgba(0,0,0,0.6);
    }
    .hover-link{
      opacity:0;
      color: #FFF;
      padding: 0;
      background: none;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index:2;
      right: auto;
      margin: -12px;
      font-size: 24px;
      &.hyperlink{
        right:22px;
      }
    }
    &:hover{
      span.overlay{opacity:1;}
      .hover-link{
        opacity:1;
        animation: fadeInLeft 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275);
      }
    } 
  }
  h4.block_title{
    margin:10px 0 0;
    font-size:18px;
    font-weight:600;
    &  + .date{
      font-weight: 400;
      color:$light-text-color;
      text-transform: uppercase;
      margin: 5px 0;
      letter-spacing: 1px;
      a{
        font-weight:600;
        color:$light-text-color;
        display: inline;
      }
    }
  } 
  
  // SIDE

  &.side{
    .block_media{
      float: left;
      max-width: 50%;
      margin: 0 15px 15px 0;
    }
  }

  // COURSE ITEM

  &.courseitem{
    margin-bottom:30px;

    .block_content{
      display: inline-block;
      background: #FFF;
      width: 100%;
      padding: 0 15px 15px;
      border: 1px solid $bordercolor;
      border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px;

      img{
        width: 32px;
        border-radius: 50%;
        float: left;
        margin-right: 10px;
      }

      .block_title{
        font-weight:600;
        padding:15px 0;
        border-bottom:1px solid $bordercolor;
      }
      .star-rating{
        font-size: 11px;
        display: inline-block;
        line-height:1.6;
        padding: 15px 0;
        & > span{
          font-size:16px;
          float: left;
          line-height:1;
          &:before{
            content: "\f006";
            font-family:'fontawesome';
            color:#FFCB10;
          }
          &.half{
            &:before{
              content: "\f123";
            }
          }
          &.fill{
            &:before{
              content: "\f005";
            }
          }
          &:last-child{margin-right:5px;}
        }
        & + strong, & + a,& + .pricing_course{
          float:right;
          padding:10px 0;
        }
      }
      span.subs{
        margin-left:5px;
      }
      .icon-wallet-money{display:none;}
      .instructor_course{
        float:left;
        & +.instructor_course{
          clear:both;
        }
        & + a {
          float:right;
          color:#70c989;
          line-height: 1.2;
        }
        & + strong{
          float: right;
          line-height:1.4;
          color:$light-text-color;
        }
      }
    }

    span.clear{
      clear:both;
      display: block;
      margin:0 0 15px;
      border-top:1px solid $bordercolor;

    }

    & + strong,
    & + a strong{
      float: right;text-align: center;
      text-transform: uppercase;
      color: #70c989;
      line-height: 1.2;
      .amount{
        color:#70c989;
        text-align: center;
        line-height: 1.6em;
      }
      & > span{
        display: block;
        font-size: 11px;
        color:#70c989;
        text-align: center;
      }
    }
  }

  // post block
  &.postblock{
    .block_media{
      position:relative;
      .postblock_cat{
          position: absolute;
          top: 10px;
          left: 10px;
          font-size: 11px;
          color: #fff;
          background: rgba(0,0,0,.2);
          text-transform: uppercase;
          font-weight: 600;
          padding: 5px;
          line-height: 1.2;
          border-radius: 2px;
      }
    }
    .block_content{
      padding:15px 15px 30px;
      border:1px solid $bordercolor;
      border-top:none;
      .course_instructor{color:$primarybg;padding:10px 0 0;}
      .block_title{
        padding: 0;margin:5px 0 0;
        font-size:16px;
        font-weight:600;
      }
    }
  }

  /*=================
  GENERAL
  =================*/
  &.general{
    position:relative;
    overflow:hidden;
    .block_content{
      position:absolute;
      bottom:0;
      left:0;width:100%;
      padding:15px;
      transform:translateY(100%);
      background: -moz-linear-gradient(top,transparent 0,rgba(0,0,0,1) 100%);
      background: -webkit-gradient(linear,left top,left bottom,color-stop(0,transparent),color-stop(100%,rgba(0,0,0,1)));
      background: -webkit-linear-gradient(top,transparent 0,rgba(0,0,0,1) 100%);
      background: -o-linear-gradient(top,transparent 0,rgba(0,0,0,1) 100%);
      background: -ms-linear-gradient(top,transparent 0,rgba(0,0,0,1) 100%);
      background: linear-gradient(to bottom,transparent 0,rgba(0,0,0,1) 100%);
      .block_title a{color:#fff;}
      .general_details{
        background:#009dd8;display:inline-block;
        padding:2px 8px; border-radius:2px;transition: all 0.2s ease-in-out;
        a{color:#fff;}
      }
    }
    &:hover{
      .block_content{
        transform:translateY(0%);   transition: all 0.2s ease-in-out;
      }
    } 
  }
  &.generic{
    position:relative;
    overflow:hidden;
    .block_media{ img{border-radius:8px;}}
    .block_content{
      position:absolute;
      bottom:0;
      left:0;width:100%;
      padding:15px 30px;border-radius: 0 0 8px 8px; 
      transform:translateY(0%);   transition: all 0.2s ease-in-out;
      background: -moz-linear-gradient(top,transparent 0,rgba(0,0,0,1) 100%);
      background: -webkit-gradient(linear,left top,left bottom,color-stop(0,transparent),color-stop(100%,rgba(0,0,0,1)));
      background: -webkit-linear-gradient(top,transparent 0,rgba(0,0,0,1) 100%);
      background: -o-linear-gradient(top,transparent 0,rgba(0,0,0,1) 100%);
      background: -ms-linear-gradient(top,transparent 0,rgba(0,0,0,1) 100%);
      background: linear-gradient(to bottom,transparent 0,rgba(0,0,0,1) 100%);
      .block_title{ font-size: 2rem;line-height:1.8rem;font-weight: 700; a{
        color:#fff;
        position:relative;
        display: inline-block;
        &:before{
          content:'';height:100%;width: 4px;border-radius:2px;
          background:#009dd8;display:block;
          position: absolute;left: -10px;top: 0;
        }
      }}

      .generic_category{
        margin-top:10px;
        display:inline-block;
        a{
          color:#fff;display:inline-block;
          transition: all 0.2s ease-in-out;
          position:relative;overflow:hidden;
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 2px;
          font-weight: 600;
          padding:2px 0;
          &:before{
            content:'';
            display:block;
            position:absolute;
            height:2px; width:100%;
            background: #fff;
            left:0; bottom:0;
            transform:translateX(-100%);
            transition: all 0.2s ease-in-out;
          }
          &:hover{
            &:before{
              transform:translateX(0%);
            }
          }
        }
      }
    }
  }
  &.simple{
    position:relative;
    overflow:hidden;
    .block_media{
      position:relative;
      img{
      border-radius:8px;
      -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1); 
      }
      margin-bottom:30px;
      a:before{
        transition: all 0.2s ease-in-out;
        transform:translateX(-100%);
        content:'';border-radius:8px;
        position:absolute;
        left:0;top:0;
        display:block;
        width:100%;height:100%;
        opacity:0.8;
        background:#009dd8;
      }
    }
    .block_content{
      position:relative;
      padding:0 30px;
      .block_title{ font-size: 2rem;line-height:1.8rem;font-weight: 700;}
      .simple_category{
        margin:10px 0 20px;
        a{
          display:inline-block;
          transition: all 0.2s ease-in-out;
          position:relative;overflow:hidden;
          &:before{
            content:'';
            display:block;
            position:absolute;
            height:2px; width:100%;
            background: #009dd8;
            left:0; bottom:0;
            transform:translateX(-100%);
            transition: all 0.2s ease-in-out;
          }
          &:hover{
            &:before{
              transform:translateX(0%);
            }
          }
        }
      }
    }
    .block_media:hover{
      a{
        &:before{
          transform:translateX(0%);
        }
        &:after{
          content:"\f0c1";
          font-family:fontawesome;
          font-size:36px;color:#fff;
          margin:-18px 0 0 -18px;
          position:absolute;
          left:50%;top:50%;
          display:block;
        }
      }
    } 
  }
} 



.testimonial-content{
    .author{
      img{
        max-width: 64px;
        border-radius: 50%;
        float: left;
        margin-right: 15px;
      }
      h4{margin-bottom:0;}
    }
}

.block.courseitem.course2{
  .star-rating{
    width:auto;
    line-height:1;
  }
  .pricing_course{
    width: 100%;
    margin-top: 10px;
    position: relative;
  }
  .instructor_course+a, .instructor_course+strong{
    text-align: center;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid $bordercolor;
  }
  .star-rating + strong{
    margin-top:10px;
  }
}
.block.courseitem.course3{
    border: 1px solid #EEE;
    border-radius: 2px;
    .block_media{

    }
    .block_content{
      padding:15px 15px 10px;
      position:relative;
      .course_instructor{
        position:absolute;
        right:0;
        top:-30px;
        border-radius:50%;
        img{
          border-radius:50%;
          width:48px;
          border:2px solid #FFF;
        }
      }
      .block_title{
        padding:0 20px 0 0;
        margin:0;font-size:16px;
        line-height:1.2;border: none;
        min-height:64px;
      }
      .course_price{
        font-size:16px;
        margin:10px 0;
        color:#70c989;
        font-weight:600;
        display:inline-block;
        width:100%;
      }
      .icon-wallet-money{display:none;}
      .course_meta{
        border-top:1px solid #EEE;
        padding-top:10px;
        margin-top:10px;
        span.fa{
          float:right;
          color:#888;
          font-size:12px;
        }
        .star-rating{
          padding:0;
          display:inline-block;
        .fa{
          color:#FFCB10;
          float:left;
          font-size:16px;
        }
      }
      }
    }
}

.block.courseitem.course4{
    
    .block_content{
      position:relative;
      .course_instructor{
        color:#bbb;
        border:none;
      }
      .block_title{
        margin:0;    padding-bottom: 5px;
        font-size:16px;
        line-height:1.2;
        border: none;
      }
      .course_block_bottom{
          clear: both;
          width: 100%;
          display: inline-block;
          margin-top: 20px;
          .fa-users{
            float:left;
            color:#bbb;
            font-size:16px;
            &:before{margin-right: 5px;}
          }
          .course_price{
            font-size:16px;
            margin:0;
            color:#70c989;
            font-weight:600;
            float:right;
          }
        .icon-wallet-money{display:none;}
      }
    }
}

.block.courseitem.course5{
  .block_title{
    margin:0;    
    padding-bottom: 15px;
    font-size:16px;
    line-height:1.2;
    border: none;
  }
  .course_price{
    clear:Both;
    font-size:16px;
    margin:0;
    color:#70c989;
    font-weight:600;
  }
  .fa-calendar-check-o{
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    color: #bbb;
    margin-bottom: 10px;
    &:before{margin-right:5px;}
  }
}

.block.courseitem.course6{
    overflow:visible;
    border:none;
    .block_media{
        position:relative;
        .postblock_cats{
            position: absolute;
            bottom: 10px;
            right: 0px;
            .postblock_cat{
                color: #fff;
                background: $primarybg;
                text-transform: none;
                font-weight: 600;
                padding: 8px 29px;
                line-height: 1.2;
                border-radius: 0;
                &+.postblock_cat{
                    margin-top:10px;
                }
            }
        }
        .course_start_date{
        position: absolute;
          top: 10px;
          left: 0;
          padding: 8px 29px;
          background: #eee;
          z-index: 99;
          &:before{
            margin-right:8px;
          }
        }
    }
    .block_content{

        position:relative;
        padding:0;border:none;
        .course_instructor{
            border:none;
        }
        .block_title{
            margin:10px 0 5px;    
            padding-bottom: 5px;
            font-size:18px;
            line-height:1.2;
            border: none;font-weight:800;
            a{font-weight:800;}
        }
        .course_instructor{
            padding-bottom:18px;
            margin-bottom:15px;
            display:block;
            position:relative;
            &:after{
                content:'';
                position:absolute;
                bottom:0;left:0;
                width:80px;
                transition:all 0.5s;
                background:$primarybg;
                display:block;
                height: 3px;
                border-radius: 3px;
            }
        }
        .course_block_bottom{
            clear: both;
            width: 100%;
            display: inline-block;
            margin-top: 20px;

            display: grid;
            grid-template-columns: 55px 90px 1fr;
            align-items: center;
            justify-content: center;
            .icon-wallet-money{display:none;}
            .star-rating{
              display:grid;
              grid-template-columns:1fr 10px;
              align-items:center;
            }
            .course_price{
              text-align:right;
            }
        }
    }
    &:hover{
        .course_instructor{
            &:after{
                width:120px;
            }
        }
    }
}


.dark .block.courseitem .block_content{
  background: rgba(0,0,0,0.1);
  border-color:rgba(0,0,0,0.1);
}
.dark .block.courseitem span.clear,
.dark .block.courseitem .block_title,
.dark .block.courseitem.course2 .instructor_course+a,
.dark .block.courseitem.course2 .instructor_course+strong{
 border-color:rgba(255,255,255,0.1); 
}


hr.divider{
  height:1px;
  width:100%;
  background:$bordercolor;
}


/*========================================================================*/
/*   01. FLEXSLDIER
/*========================================================================*/


.widget_carousel,
.vibe_carousel{
  position: relative;
  .flex-direction-nav{
    list-style:none !important;
    height:0;
    a{
      font-size: 12px;
      box-shadow: none;
      width: auto;
      height: auto;
      opacity: 1;
      padding:3px;
      line-height: 1;
      z-index: 9;
      background:#78c8ce;
      color:#FFF;
      text-shadow: none;
      border-radius:2px;
      &.flex-disabled{opacity:0.6;}
      &.flex-next{
        position: absolute;
        top:10px;
        right:0;
        z-index:2;
      }
      &.flex-prev{
        position: absolute;
        top:10px;
        right:24px;
        display: inline-block;
        z-index:1;
      }
    }
  }
  .flex-control-nav{
    li{
      a{
        width: 12px;
        height: 12px;
        background: #78c8ce;
        text-indent: 9999px;
        display: block;
        opacity: 0.4;
        border-radius:50%;
      }
    }
  }
}

.v_module.custom_post_carousel,
.v_module.member_carousel,
.v_module.taxonomy_carousel{
  .vibe_carousel{
    .flex-direction-nav{
      a{
        &.flex-next,
        &.flex-prev{
          position: absolute;
          top:-56px;
        }
      }
    }
    &.noheading{
      .flex-direction-nav{
        bottom:50%;
        left:0;
        width:100%;
        .flex-next,.flex-prev{
          background: none;
          color: #78c8ce;
          font-size: 16px;
          margin-top: -30px;
        }
        .flex-next{
          top: auto;
          right: -30px;
          left: auto;
        }
        .flex-prev{
          top: auto;
          left: -30px;
          right: auto;
        }

      }
    }
  }
  .heading_more{
    padding: 3px 6px;
    line-height: 1;
    position: absolute;
    top: 4px;
    right: 50px;
    background: $primarybg;
    color: $primarycolor;
    border-radius: 2px;
    font-weight: 600;
    font-size: 14px;
  }
}

.taxonomy_carousel{
  a.term_block{
    position:relative;
    display:inline-block;
    width:100%;
    .term_name{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        .term_details{
            display:inline;
            text-align:center;
            strong{
                display:block;
            }
        }
        strong,span{
            color:#FFF;
        }
    }
  }
}

.widget .vibe_carousel .flex-direction-nav a.flex-prev,
.widget .vibe_carousel .flex-direction-nav a.flex-next{
  top:24px;
}
.widget_carousel .flex-direction-nav a.flex-next,
.widget_carousel .flex-direction-nav a.flex-prev{
  top:-48px;
}

footer .widget_carousel .flex-direction-nav a.flex-prev, 
footer .widget_carousel .flex-direction-nav a.flex-next,
.boxed footer .widget_carousel .flex-direction-nav a.flex-prev, 
.boxed footer .widget_carousel .flex-direction-nav a.flex-next{
  top:-32px;
}

.v_module.member_carousel{
  .member_block{
    text-align:center;
    
  }
}
/*========================================================================*/
/*   01. PARALLAX
/*========================================================================*/
 
.parallax_content{
    width:100%;
    display: inline-block;
}
 
/*========================================================================*/
/*   01. FILTERABLE BLOCK
/*========================================================================*/
 
.vibe_filterable {
  margin: 0px 10px 20px 0;
  float: left;
  li {
    float: left;
    margin: 5px 10px 5px 0;
    a{
      background-color: $bordercolor;
      font-weight:600;
      border:1px solid #DDD;
      border-radius:2px;
      border-radius:1px;
      padding: 8px 14px;
      font-size: 11px;
      border-radius:2px;
      display: inline-block;
      text-transform:uppercase;
      transition: all 0.2s ease-in-out;
      &:hover{
        background:$primarybg;
        border-color:$primarybg;
        color:$primarycolor;
      }
    }
    &.active{
      a{
        background:$primarybg;
        border-color:$primarybg;
        color:$primarycolor;
      }
    } 
  }
}


.filterableitems_container {
  clear: both;
  margin: 20px 0px;
  .filteritem{
    float: left;
    position: relative;
    margin: 0px 30px 30px 0;
    &.next {
      width: 60px;
      height: 60px;
      border: 5px solid black;
      border-radius: 35px;
    }
  }
}


.filterable_thumb{
  position:relative;
}

/*========================================================================*/
/*   01. ISOTOPE
/*========================================================================*/

.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  transition-duration: 0s;
}

.grid.masonry,
.filterableitems_container.isotope{
  overflow:visible !important;
}


/*========================================================================*/
/*   01. ACCORDION BLOCK
/*========================================================================*/


.accordion-group.panel{
    margin:0;
    background:none;
    border:none;
    border-radius:none;
    box-shadow:none;
}
.accordion-heading{
  a{
    font-size: 12px;
    text-transform: uppercase;
    padding: 12px 20px 12px 0;
    font-weight: 600;
    width:100%;
    display: block;
    border-bottom: 1px solid $bordercolor;
    position: relative;
    &.accordion-toggle{
      &:after{
        font-family: 'fonticon';
        float:right;
        content:'\e092';
        font-size:16px;
        color:$bordercolor;
      }
      &.collapsed:after{
          content:'\e05d';
      }
    }
  }
} 

.accordion-inner{
    padding:15px 0;
}

/*========================================================================*/
/*   01. TABS
/*========================================================================*/


.tabs {
  position: relative;
  display: inline-block;
  width: 100%;
  ul.tabtitle {
    display:block;
    cursor: pointer;
  }
  .nav{
    &.nav-tabs{
      li{
        &.active>a>span{
          padding:0;
          color: #fff;
        }
        a{
          white-space:nowrap;
          i{
            float:left;
            margin-right:5px;
            font-size:16px;
          }
        }
      }
    }
  }
}

.widget .tabs {
  .nav{
    margin-bottom:0 !important;
  }
}

.content .tab-content{
    padding: 15px 0;
}



.tab-pane{
  li{
    img{
      float: left;
      border: 2px solid #eef1f3;
      width: 48px;
      margin-right: 10px;
      height: auto;
      border-radius:2px;
      transition: all 0.2s ease-in-out;
    }
    &:hover{
      img{
        border-color: $primarybg;
      }
    }
  }
} 


.widget{
  .nav-tabs{
    li{
      width:33%;
      text-align: center;
      padding-bottom:0;
    }
  } 
} 

.widget{
  .tab-content li{
      padding:6px 0;
  }
} 

.nav-tabs > li > a{
    border-radius: 4px 4px 0 0;
    margin:0;
}

.tabs{
  ul.tabtitle{
    li{
      background: #444;
      font-size: 15px;
      line-height: 40px;
      height: 40px;
      position: relative;
      padding: 0 20px;
      float: left;
      display: block;
      color: #FFF;
      text-align: center;
      &.active,
      &:hover{
        background: $primarybg;
        color:$primarycolor;
      }
    }
  }
  .tabpanes{
    clear:both;
    li{
      background:#FFF;
    }
  }
}





.tabs label:first-of-type {
    z-index: 4;
}

.clear-shadow {
  clear: both;
}

.tabcontent {
  position: relative;
    z-index: 5;
    opacity:0;
}

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tabs{
    ul.nav{
      list-style:none;
      margin:0 0 30px;
      position:relative;
      z-index:99;
    }
    .tab-content{
      position:relative;
    }
    > .nav-tabs{
      margin-bottom:29px;
    }
    &.tabs-left >.nav-tabs{
      margin-right:29px !important;
    }
    &.tabs-right >.nav-tabs{
      margin-left:29px !important;
    }
    &.tabs-bottom >.nav-tabs{
      margin-top:29px !important;
    }
}

/*= LEFT RIGHT BOTTOM TABS == */

//@extend-elements
//original selectors
//.tabs-left >.nav-tabs >li >a, .tabs-right >.nav-tabs >li >a
%extend_1 {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}


.tabs-below > .nav-tabs {
  border-bottom: 0;
  border-top: 1px solid $bordercolor;
  > li {
    margin-top: -1px;
    margin-bottom: 0;
    > a {
      //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
      border-radius: 0 0 4px 4px;
      &:hover {
        border-top-color: $bordercolor;
        border-bottom-color: transparent;
      }
      &:focus {
        border-top-color: $bordercolor;
        border-bottom-color: transparent;
      }
    }
  }
  > .active > a {
    border-color: transparent $bordercolor $bordercolor $bordercolor;
    &:hover {
      border-color: transparent $bordercolor $bordercolor $bordercolor;
    }
    &:focus {
      border-color: transparent $bordercolor $bordercolor $bordercolor;
    }
  }
}
.tabs-right > .nav-tabs {
  border-bottom: 0;
  float: right;
  margin-left: 19px;
  border-left: 1px solid $bordercolor;
  > li {
    float: none;
    > a {
      @extend %extend_1;
      margin-left: -1px;
      //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
      border-radius: 0 4px 4px 0;
      &:hover {
        border-color: $bordercolor $bordercolor $bordercolor $bordercolor;
      }
      &:focus {
        border-color: $bordercolor $bordercolor $bordercolor $bordercolor;
      }
    }
  }
  .active > a {
    border-color: $bordercolor $bordercolor $bordercolor transparent;
    *border-left-color: #fff;
    &:hover {
      border-color: $bordercolor $bordercolor $bordercolor transparent;
      *border-left-color: #fff;
    }
    &:focus {
      border-color: $bordercolor $bordercolor $bordercolor transparent;
      *border-left-color: #fff;
    }
  }
}
.tabs-left > .nav-tabs {
  border-bottom: 0;
  float: left;
  margin-right: 19px;
  border-right: 1px solid $bordercolor;
  > li {
    float: none;
    > a {
      @extend %extend_1;
      margin-right: -1px;
      //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
      border-radius: 4px 0 0 4px;
      &:hover {
        border-color: $bordercolor $bordercolor $bordercolor $bordercolor;
      }
      &:focus {
        border-color: $bordercolor $bordercolor $bordercolor $bordercolor;
      }
    }
  }
  .active > a {
    border-color: $bordercolor transparent $bordercolor $bordercolor;
    *border-right-color: #fff;
    &:hover {
      border-color: $bordercolor transparent $bordercolor $bordercolor;
      *border-right-color: #fff;
    }
    &:focus {
      border-color: $bordercolor transparent $bordercolor $bordercolor;
      *border-right-color: #fff;
    }
  }
}
.tab-content > {
  .tab-pane {
    display: none;
  }
  .active {
    display: block;
  }
}
.pill-content > {
  .pill-pane {
    display: none;
  }
  .active {
    display: block;
  }
}

/*=== */

.nav.nav-tabs{
  & > li{
    & > a{
      padding:10px 15px;
      & > span{
        margin-left:5px;
      }
    }
    &.active{
      & > a{
        & > span{
          background: #FFF;
          padding: 1px 5px;
          border-radius: 50%;
          color: $primarybg;
        }
      }
    }
  }
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px !important;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 2px 2px 0;
     -moz-border-radius: 0 2px 2px 0;
          border-radius: 0 2px 2px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #78c8c9 #78c8c9 #78c8c9 #dddddd;
  background-color:#78c8c9;
  color:#FFF;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #78c8c9 #78c8c9 #78c8c9 transparent;
  *border-left-color: #ffffff;
  background-image:url(../images/button.png);
}

.active .tabcontent{
  z-index: 2;
    padding: 15px;
    display: block;
    -webkit-animation-name: fadeinblock;
  -webkit-animation-duration: 0.3s;
  animation-name: fadeinblock;
  animation-duration: 1s;
}
@-webkit-keyframes fadeinblock { 
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes fadeinblock {
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}


/*========================================================================*/
/*   01. POSTS WIDGET
/*========================================================================*/

.posts{
  li {
    clear: both;
    margin: 2px 0;
    padding: 2px;
    display: inline-block;
    width: 100%;
    &:hover{
      background:#f3f5f6; 
    }
    img{
      float: left;
      border: 2px solid #eef1f3;
      width: 60px;
      margin-right: 10px;
      height: auto;
      transition: all 0.2s ease-in-out;
    }
    &:hover img{
      border-color: $primarybg;
    }
    a{
      & > span{
        color: #2a3744;
      }
    }
    small{
      a{
        color: #AAA;
        font-size: 11px;
      }
    }
  }
} 

/*========================================================================*/
/*   01. PULL QUOTE
/*========================================================================*/

.pullquote{
  margin: 30px 0;
  padding: 15px 30px 15px 30px;
  width: 30%;
  float: left;;
  display:inline-block;
  border-right: 1px solid $bordercolor;
  &.left {
    margin-right: 20px;
    float: left;
  }
  &.right {
    margin-left: 20px;
    float: right;
  }
}

/*========================================================================*/
/*   01. GALLERY
/*========================================================================*/

.gallery{
  a{
    width:64px;
    height:auto;
    float:left;
    margin:0;
    padding:3px 5px;
    width:auto;
    display:inline-block;
    line-height:0;
    text-align:center;
    overflow:hidden;
    img{
      width:100%;
      border:2px solid #F6F6F6;
      &:hover{
          border-color:#78C8CE;
      }
    }
  }
  &.medium img {
    width: 128px;
    height:auto;
  }

  &.mini img {
    width: 48px;
    height:48px;
  }
  &.normal img,
  &.small img {
    width: 64px;
    height:64px;
  }

  &.large img {
    width: 256px;
    height:auto;
  }

  &.columns1 > a{
      width:100%;  
  }

  &.columns2 > a{
      width:50%;  
  }

  &.columns3 > a{
      width:33%;  
  }

  &.columns4 > a{
      width:25%;  
  }

  &.columns5 > a{
      width:20%;  
  }
  &.columns6 > a{
      width:16.67%;  
  }
  &.columns7 > a{
      width:14.28%;  
  }
  &.columns8 > a{
      width:12.5%;  
  }
  &.columns9 > a{
      width:11.11%;  
  }
  &:after { 
    content: ''; 
    clear: both; 
    display: block; 
  }
} 



/*========================================================================*/
/*   01. GALLERY
/*========================================================================*/

.heading{
    clear:both;
    font-size: 16px;
    margin: 10px 0;
    padding: 8px 0;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 3px solid $bordercolor;
}


/*========================================================================*/
/*   01. PROGRESS BAR
/*========================================================================*/

.progressbars{
  display:inline-block;
  width: 60%;
  margin: 30px 0 30px 30px;
  border-radius:20px;
}
.progressbar_wrap{
    text-align: start;
    display: block;
    clear: both;
    margin:10px 0;
}
.progress{
  background:rgba(0,0,0,0.1);
  margin:0;
  border-radius:20px;
  position:relative;
  width: 100%;
  display: inline-block;
  overflow:visible;
  strong{
    position:absolute;
    top:0;
    left:0;
  }
  .bar{
    background:#78C8CE;
    color:#FFF;
    font-size:12px;
    line-height:1.5em;
    padding:4px 20px ;
    text-transform:uppercase;
    font-weight:600;
    position:relative;
    height:auto;
    border-radius:20px;
    span{
      position:absolute;
      right: -20px;
      top: -32px;
      background:rgba(0,0,0,0.6);
      color:#FFF;
      padding:4px 8px;
      border-radius:2px;
      &:after{
        content:'';
        position: absolute;
        left: 40%;
        bottom: -10px;
        border: 5px solid;
        border-color: rgba(0,0,0,0.6) transparent transparent transparent;
      }
    }
  }
}

.one_half .progress{
    margin:48px 30px;
}


/*========================================================================*/
/*   01. KNOB
/*========================================================================*/


.knob{
  display:block;
  position:relative;
  h3{
    margin-top: 0px;
    font-size: 20px;
    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
  }
}



/*========================================================================*/
/*   01. ALERT
/*========================================================================*/

.alert{
  display:block;
  background: #1CA8DD;
  padding: 15px;
  color: #FFF;
  margin:15px 0;
  &.alert-info{
      background: #1CA8DD;
  }
  &.alert-error{
      background: #d15b28;
  }
  &.alert-danger{
      background: #d13228;
  }
  &.alert-success{
      background: #78C8CE;
  }
  &.alert-block{
      background: #d6c72d;
  }
}

/*========================================================================*/
/*   01. BTNS
/*========================================================================*/

.btn{
    font-size:14px;
    line-height:2em;
    padding:8px 16px;
    background:#78C8CE;
    border:1px solid #78C8CE;
    color:#FFF;
    margin:5px 5px 5px 0;
    border-radius:2px;
    & + .btn{
        margin-left:5px;
    }
    &.other{
        border:none;
    }
    &:hover{
        background:transparent;
        border-color:#78C8CE;
        color:#78C8CE;
        
    }

    &.primary{
        background:#78C8CE;
        border-color:#78C8CE;
    }
}

/*========================================================================*/
/*   01. COLUMNS
/*========================================================================*/


.one_half { 
  width: 50%;
  float: left; 
  min-width: 240px;
}
.one_third { 
  width: 33.3%; 
  float: left; 
  min-width: 160px;
}
.one_fourth { 
  width: 25%;
  float: left; 
  min-width: 120px;
}
.one_fifth { 
  width: 20%;
  float: left;
  min-width: 60px;
  }

.two_third { width: 66.6%; float: left;}
.three_fourth { width: 75%;float: left;}
.two_fifth{width: 40%;float: left;}
.three_fifth{width: 60%;float: left;}
.four_fifth{width: 80%;float: left;}

.column_content{
  padding-left:10px;
  &.first{
      padding-left:0;
  }
}

/*========================================================================*/
/*   01. GMAP
/*========================================================================*/

.gmap,.gmap iframe{
    width:100%;
}

.vibe_gmap{
    margin:30px 0;
    padding:20px 0;
    border-top:1px solid $bordercolor;
    border-bottom:1px solid $bordercolor;
}
.vibe_gmap img,
#map-canvas img{
    max-width:none;
}

/* Clearfix */
.clearfix:before,
.clearfix:after { content:""; display:table; }
.clearfix:after { clear: both; }
.clearfix { zoom:1;clear: both; /* For IE 6/7 (trigger hasLayout) */ }


/*========================================================================*/
/*   01. DROPCAPS
/*========================================================================*/

.dropcaps{
  float: left;
  padding: 0 15px 0 0;
  margin-top: 0;
  line-height: 1.1em;
}

/*========================================================================*/
/*   01. NOTE
/*========================================================================*/

.notification{
  clear: both;
  margin: 60px 60px 30px 0px;
  padding: 15px;
  color: #FFF;
  background:#78C8CE;
  border: 2px solid #EEE;
  border-radius: 2px;
  display:block;
  text-align:left;
}



/*========================================================================*/
/*   01. FORMS
/*========================================================================*/

.form_field{
  display:block;
  font-size: 14px;
  padding: 4px 8px;
  margin: 5px 0;
  border: 1px solid $bordercolor;
  line-height: 21px;
  width: 100%;
}

/*========================================================================*/
/*   01. POPUPs
/*========================================================================*/

.mfp-ajax-holder .mfp-content{
    width:auto;
    max-width:720px;
    margin:0 auto;
}
.popup_content{
    background:#FFF;
    padding:40px;
    display:block;
    margin-top:10%;
    max-width:60%;
}


/*========================================================================*/
/*   01. TEAM
/*========================================================================*/

.team_member{
  width: 100%;
  max-width:300px;
  height: 100%;
  position: relative;
  cursor: default;
    text-align: center;
  img{
      display: inline-block;
      border-top-left-radius:2px;
      border-top-right-radius:2px;
  }
  .member_info{
    display: block;
    width: inherit;
    height: inherit;
    text-align:center;
    padding:5px 0;
    border-left:5px solid $bordercolor;
    border-right:5px solid $bordercolor;
    border-bottom:5px solid $bordercolor;
    h3 {
      text-align:center;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 14px;
      font-weight:600;
      margin: 0 30px;
      padding: 10px 10px 10px;
      display: inline-block;
      border-bottom: 3px solid $bordercolor;
      small{
        display: block;
        white-space: nowrap;
        color: #bbb;
        font-weight: 600;
        font-size:11px;
        margin-top:5px;
      }
      & + span{
        width:100%;
        display: block;
      }
    }
    ul {
      color: #fff;
      display:inline-block;
      padding: 10px 5px;
      text-align:center;
      margin: 0 10px;
      font-size: 16px;
      list-style: none;
      li{
        float:left;
        display: inline-block;
        a {
          display: block;
          font-style: normal;
          font-size: 20px;
          line-height: 0;
          margin:0 3px;
          color:#bbb;
          &.twitter{font-size:24px;}
          &:hover{
              color:#78c8ce;
          }
        }
      }
    }
  }
}



/*========================================================================*/
/*   01. TESTIMONIALS
/*========================================================================*/

.testimonial{
    position: relative;
}
.testimonial_content{
    background:rgba(230,230,230,0.2);
    padding:20px 20px 15px;
    position: relative;
    border-radius:2px;
}
.testimonial_content:after{
       content:'';
       position: absolute;
       bottom:-40px;
       left: 68px;
       border:20px solid;
       border-color:rgba(230,230,230,0.2) transparent transparent transparent;
}
.testimonial_author {
    margin:15px 0;
}
.testimonial_author img{
    max-width:64px;
    height:auto;
    margin:0 30px 0 0;
    float:left;
    border-radius:50%;
}
.testimonial_author h4{
    font-size:14px;
    padding-top:10px;
}
.testimonial_author h4 small{
    display: block;
}


/*========================================================================*/
/*   01. TOOLTIPS
/*========================================================================*/
/*
.tooltip{
    position: relative;
}

.tooltip:hover:after,
.tooltip:hover:before{
    opacity:1;
}

.tooltip:after{
    content:attr(title);
    position:absolute;
    left: 0;
    border-radius: 2px;
    top: -36px;
    background: #78C8CE;
    padding: 6px 10px;
    color: #FFF;
    display: block;
    opacity:0;
    white-space:nowrap;
    -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.tooltip:before{
    content:'';
    border:5px solid;
    position:absolute;
    left:50%;
    top:-5px;
    opacity:0;
    border-color:#78C8CE transparent transparent transparent;
}
*/


/*========================================================================*/
/*   01. VIDEO
/*========================================================================*/


.wp-video{width:100% !important;}
.mejs-container.mejs-video {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}
.mejs-container, .mejs-embed, .mejs-embed body {
background:transparent!important;
}



/*========================================================================*/
/*   01. COUNTER
/*========================================================================*/

.percentage-counter h6{
     color: #78C8CE;
}
.percentage-counter{
  margin: 30px 0;
  text-align: center;
        color: #78C8CE;
}
.first .percentage-counter{
  border: none;
}
.percentage-counter .count{
  font-size: 48px;
  color: #78C8CE;
}


/*========================================================================*/
/*   01. IMAGE SLIDER
/*========================================================================*/

/* flexslider Necessary Styles
*********************************/
.image_slider {margin: 0; padding: 0; position:relative;}
.image_slider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.image_slider .slides img {width: 100%; display: block;}
.flexslider-pauseplay span {text-transform: capitalize;}
.image_slider .flex-direction-nav,
.image_slider .flex-control-nav,
.image_slider .slides{list-style:none !important;}
/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* Direction Nav */
.flex-direction-nav {*height: 0;}


.full_slider .flex-control-nav.flex-control-paging li a.flex-active,
.image_slider .flex-control-nav.flex-control-paging li a.flex-active,
.step_slider .flex-control-nav.flex-control-paging li a.flex-active{
        background: #78c8c9;
}

.image_slider .flex-direction-nav li{
    
}

.image_slider .slides li{
    position:relative;
}
.image_slider .flex-control-nav.flex-control-paging,
.full_slider .flex-control-nav.flex-control-paging,
.step_slider .flex-control-nav.flex-control-paging{
    position:absolute;
    bottom:10px;
    display:block;
    text-align:center;
    width:100%;
}
.full_slider .flex-control-nav.flex-control-paging li,
.image_slider .flex-control-nav.flex-control-paging li,
.step_slider .flex-control-nav.flex-control-paging li{
    margin: 0 0 0 5px;
    text-indent:-9999px;
    padding:0;
    border:none;
    display: inline;
    
}
.full_slider .flex-control-nav.flex-control-paging li a,
.image_slider .flex-control-nav.flex-control-paging li a,
.step_slider .flex-control-nav.flex-control-paging li a{
    width:12px;
    height:12px;
    display:inline-block;
    background:#FFF;color: transparent;
    border-radius:12px;
}

.image_slider .flex-direction-nav li a,
.step_slider .flex-direction-nav li a{
    position: absolute;
    margin:0;
    padding:0;  
    font-size:24px;
}

.image_slider.slide1 .flex-direction-nav li a.flex-prev{
    left:30px;
    color:#FFF;
    top: 45%;
}
.image_slider.slide1 .flex-direction-nav li a.flex-next{
    right:30px;color:#FFF;
    top: 45%;
}
.flex-caption h1,.flex-caption h2,.flex-caption h5,.flex-caption h3,.flex-caption h4,.flex-caption h6{
    color:#FFF;
}

.flex-caption,
.slide1 .flex-caption{
    width: 100%;
padding: 0;
position: absolute;
background: rgba(0,0,0,0.6);
color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
font-size: 14px;
line-height: 18px;
}
.slide1 .flex-caption{
    left: 0;
    bottom: 5px;
}


/*=== Slide 2 ===*/

.image_slider.slide2 .flex-caption {
width: 50%;
max-width: 310px;
height: 120px;
padding: 10px 20px 10px;
bottom: 20px;
right: 20px;
text-align: left;
}


.image_slider.slide2 .flex-direction-nav li a.flex-prev {
right: 360px;
height: 70px;
bottom: 90px;
background: #78c8c9;
color: #FFF;
}
.image_slider.slide2 .flex-direction-nav li a.flex-next {
right: 360px;
height: 70px;
bottom:20px;
background: #78c8c9;
color: #FFF;
}
.image_slider.slide2 .flex-direction-nav li a.flex-prev i,
.image_slider.slide2 .flex-direction-nav li a.flex-next i{
    margin: 20px -8px;
    display: inline-block;
}

/*=== Slide 3 ===*/

.image_slider.slide3 .flex-caption {
width: 50%;
max-width: 310px;
height: 120px;
padding: 10px 20px 10px;
bottom: 20px;
left: 20px;
text-align: left;
}

.image_slider.slide3 .flex-direction-nav li a.flex-prev {
left: 360px;
height: 70px;
bottom: 20px;
background: #78c8c9;
color: #FFF;
}
.image_slider.slide3 .flex-direction-nav li a.flex-next {
left: 360px;
height: 70px;
bottom:90px;
background: #78c8c9;
color: #FFF;
}
.image_slider.slide3 .flex-direction-nav li a.flex-prev i,
.image_slider.slide3 .flex-direction-nav li a.flex-next i{
    margin: 20px -8px;
    display: inline-block;
}
/*=== Slide 4 ===*/
.image_slider.slide4 .flex-caption{
    width:40%;
    right:0;
    bottom:20px;
    padding:15px 20px 30px;
    margin-left:-40px;
    text-align:left;
}

.image_slider.slide4 .flex-direction-nav li a.flex-prev{
    bottom: 20px;
right: 20%;
width: 20%;
text-align: center;
color: #FFF;
padding: 0 20px;
margin-left: -41px;
background: #78c8c9;
}

.image_slider.slide4 .flex-direction-nav li a.flex-next{
    bottom: 20px;
right: 20px;
width: 20%;
text-align: center;
color: #FFF;
padding: 0 20px;
margin-right: -20px;
background: #78c8c9;
}

/*=== Slide 5 ===*/

.image_slider.slide5 .flex-caption{
    width:40%;
    left:0;
    bottom:20px;
    padding:15px 20px 40px;
    text-align:left;
}

.image_slider.slide5 .flex-direction-nav li a.flex-next{
  bottom: 20px;
  left: 20%;
  width: 20%;
  text-align: center;
  color: #FFF;
  padding: 0 20px;
  background: $primarybg;
}

.image_slider.slide5 .flex-direction-nav li a.flex-prev{
  bottom: 20px;
  left: 20px;
  width: 20%;
  text-align: center;
  color: #FFF;
  padding: 0 20px;
  margin-left: -20px;
  background: #78c8c9;
}

/*=== Slide 6 ===*/
.flexslider.image_slider.slide6 .slides img {
    width: 60%; 
    display: block;
    float:right;
}
.image_slider.slide6 .flex-caption{
    width:38%;
    background:transparent;
    text-align:left;
    color:#444;
    text-shadow:none;
}
.slide6 .flex-caption h3.heading{
    color:#444;
    text-shadow:none;
}

.image_slider.slide6 .flex-control-nav.flex-control-paging{
    text-align:left;
    width:40%;
}

.image_slider.slide6 .flex-direction-nav li a.flex-prev{
    left:-100px; 
    font-size:64px;
    text-shadow:0 1px 0 #FFF;
    top: 40%;color:#ccc;
    
}
.image_slider.slide6 .flex-direction-nav li a.flex-next{
   right:-100px;
   font-size:64px;
   text-shadow:0 1px 0 #FFF;
    top: 40%; color:#ccc;
}
.image_slider.slide6 .flex-direction-nav li a.flex-prev,
.image_slider.slide6 .flex-direction-nav li a.flex-next{
    
}

.image_slider.slide6 .flex-direction-nav li a.flex-prev,
.image_slider.slide6 .flex-direction-nav li a.flex-next{
    
}
/*=== Slide 7 ===*/
.flexslider.image_slider.slide7 .slides img {
    width: 60%; 
    display: block;
    float:left;
    margin-right:20px;
}
.image_slider.slide7 .flex-caption{
    width:38%;
    background:transparent;
    text-align:left;
    color:#444;
    display: inline-block;
    text-shadow:none;
}
.slide7 .flex-caption h3.heading{
    color:#444;
    text-shadow:none;
}

.image_slider.slide7 .flex-control-nav.flex-control-paging{
    text-align:right;
    width:100%;
    
}

.image_slider.slide7 .flex-direction-nav li a.flex-prev{
    left:-100px; 
    font-size:64px;
    text-shadow:0 1px 0 #FFF;
    top: 40%;color:#ccc;
    
}
.image_slider.slide7 .flex-direction-nav li a.flex-next{
   right:-100px;
   font-size:64px;
   text-shadow:0 1px 0 #FFF;
    top: 40%; color:#ccc;
}

/*=== Slide 8 ===*/
.flexslider.image_slider.slide8 .slides img {
    width: 100%; 
}
.image_slider.slide8 .flex-caption{
    max-width:60%;
    position:absolute;
    top:20%;
    left:20%;
    background:transparent;
    text-align:center;
    display: inline-block;
    text-shadow:none;
}
.slide8 .flex-caption h3.heading{
    color:#444;
    text-shadow:none;
}

.image_slider.slide8 .flex-control-nav.flex-control-paging{
    text-align: center;
width: 100%;
bottom: 10px;
}

.image_slider.slide8 .flex-direction-nav li a.flex-prev{
    left:0px; 
    font-size:64px;
    text-shadow:0 1px 0 #333;
    top: 40%;color:#FFF;
    
}
.image_slider.slide8 .flex-direction-nav li a.flex-next{
   right:0px;
   font-size:64px;
   text-shadow:0 1px 0 #333;
    top: 40%; color:#FFF;
}


/*========================================================================*/
/*   01. ALL BADGES
/*========================================================================*/

.allbadges ul{
  list-style: none;
  display: inline-block;
}

.allbadges ul > li{
  list-style: none;  
  float:left;
  padding:10px;
  position: relative;
}

.allbadges ul > li.finished img{
  opacity: 0.6;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
}

.allbadges ul > li.finished span{
  position: absolute;
  left:33%;
  bottom:33%;
  font-size:11px;
  text-transform: uppercase;
  font-weight:600;
  color:#EB4924;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
/*
==============================================
stretchLeft
==============================================
*/
.animate{
  opacity: 0;
}
.animate.load{
  opacity: 1 !important;
}
.stretch.load{
  animation-name: stretchLeft;
  -webkit-animation-name: stretchLeft;  

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease-out;  
  -webkit-animation-timing-function: ease-out;  

  transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -webkit-transform-origin: 100% 0%; 
}

@keyframes stretch {
  0% {
    transform: scaleX(0.3);
  }
  40% {
    transform: scaleX(1.02);
  }
  60% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(0.98);
  }       
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(1);
  }             
}

@-webkit-keyframes stretch {
  0% {
    -webkit-transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
  }       
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
  }   
}

/*========================================================================*/
/*   01. MISC
/*========================================================================*/

del{opacity:0.3;}

.vibe_carousel > .woocommerce{
    position: relative;
    margin-top: 15px;
}
  
.vibe_carousel.carousel_columns2 .slides > li{
  margin-right:30px;
}

.vibe_carousel.columns1 .block.courseitem{
  margin-right:0;
}

.vibe_carousel .slides > li{
margin-right:30px;
}

.vibe_carousel.onecol .slides > li{
  margin-right:30px;
}

@media screen and (max-width: 992px) { 
  .tabs-left > .nav-tabs, .tabs-right > .nav-tabs{
      width:auto;
    }
.tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li{float:left;}
  .tabs-left > .nav-tabs{
    border-right:none;
    margin-right:0;
    margin-bottom:19px;
    border-bottom:1px solid $bordercolor;
  }
  .tabs-right > .nav-tabs{
    border-left:none;
    margin-left:0;
    margin-bottom:19px;
    border-bottom:1px solid $bordercolor;
  }
}
@media screen and (max-width: 768px) { 
 .v_module{
  width:100%;
 } 
 .block.side .block_media{
  max-width:100%;
 }
 .block.side .block_content{
  clear:both;
  width:100%;
 }
 .content .tabs-right .tab-content,
.content .tabs-left .tab-content{
  max-width:100%;
}
.one_half,
.one_third,
.one_fourth,
.three_fourth,
.one_fifth,
.two_fifth,
.three_fifth,
.four_fifth,
.two_third
{
    clear: both;
    float: none;
    width: 100%;
  }
.nav-tabs > li{
  width:100% !important;
  border-bottom:1px solid $bordercolor;
}
.nav-tabs > li.active > a,.nav-tabs > li:hover > a{border-radius:2px;}
.nav-tabs > li.active,.nav-tabs > li:hover{border-bottom:none;}
}

/*========================================================================*/
/*   01. REGISTRATION FORMS
/*========================================================================*/

.wplms_registration_form{
    clear:both;display:block;
    ul{
        li{
            clear:both;
            &+li{margin-top:10px;}
            label{
                width:100%;
                display:block;
            }
            & > input,
            & > textarea,
            & > select{
                width:100%;
            }
            fieldset{
                legend{    
                    font-size: 16px;
                    font-weight:600;
                    border: none;
                }
            }
        }
    }
    .submit_registration_form{
        &.loading{
            &:before{
                content:"\f110";
                opacity:0.8;
                font-family:fontawesome;
                animation: spin 2s infinite linear;
            }
        }
    }
}