/*------------------------------------------------------------------
[Main of contents]
1. Reset HTML/CSS, Unitest, Body
2. Page Title
3. Primary
3. Footer
-------------------------------------------------------------------*/

/* ==========================================================================
   [Start] 1. Reset HTML/CSS, Unitest, Body, @Extend
========================================================================== */
.custom-font-1{
  font-family: 'Poppins', sans-serif;
}
.vc_custom_heading{
  &.custom-font-1{
    font-family: 'Poppins', sans-serif !important;
  }
}
.custom-font-2{
  font-family: 'Montserrat', sans-serif;
}
.color-primary{
  color: $primary_color !important;
}

body {
  overflow-x: hidden;
@extend .custom-font-1;
  color: #959393;
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  background: #fff;
}
.container{
  max-width: 100%;
}
.w100{
  width: 100% !important;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
img.aligncenter {
  margin: 5px auto;
}
.alignleft {
  float: left;
}
img.alignleft {
  margin: 9px 30px 15px 0;
}
.alignright {
  float: right;
}
img.alignright {
  margin-left: 15px;
  margin-bottom: 20px;
}
.wp-caption { 
  opacity: 1;
  &.alignnone {
    width: 100% !important;
  }
}
.wp-caption{opacity:1}
.wp-caption-text{opacity:1}
.sticky{opacity:1}
.gallery-caption{opacity:1}
.alignright {opacity:1}
.alignleft {opacity:1}
.aligncenter {opacity:1}

.media-left img {
  max-width: inherit;
}
.wp-caption-text {opacity: 1;}
.gallery-caption {opacity: 1;}
.left {
  float: left;
}
.right {
  float: right;
}
.text-upper {
  text-transform: uppercase;
}
.entry-page-image {
  margin-bottom: 14px;
}
#main #page-default {
  position: relative;
  z-index: 1;
}
.block {
  display: block;
}
.b-ra img {
  @include border-radius(2px 2px 0 0);
}
.sl-italic {
  font-style: italic;
  letter-spacing: 0 !important;
}

a, a:hover, a:focus{
  outline: none;
  text-decoration: none !important;
  @include transition(all 300ms linear 0ms);
  color: $primary_color;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 15px;
  @extend .ft-poppin;
  color: $secondary_color;
  font-weight: 500;
}
.h1,h1{
  font-size: 45px;
  line-height: 60px;

}
.h2,h2{
  font-size: 40px;
  line-height: 50px;
}
.h3,h3 {
  font-size: 30px;
  line-height: 41px;
}
.h4,h4{
  font-size: 25px;
  line-height: 35px;
}
.h5,h5 {
  font-size: 20px;
  line-height: 30px;
}
h6{
  font-size: 18px;
  line-height: 36px;
}
ul {
  padding: 0;
  margin: 0;
  list-style: disc;
}
ol{
  ul{
    ul{
      margin-left: 25px;
    }
  }
}
.entry-content{
  > ul{
    list-style: disc;
    padding-left: 30px;
    padding-bottom: 20px;
    display: inline-block;
    text-align: left;
    li{
      //display: inline-block;
      float: left;
      clear: both;
    }
    ul{
      margin-left: 20px;
    }
  }
  > ol{
    padding-left: 30px;
    padding-bottom: 20px;
    display: inline-block;
    text-align: left;
    li{
      display: list-item;
      float: left;
      clear: both;
    }
    ul{
      list-style: disc;
      padding-left: 20px;
    }
  }
  .wp-caption,
  iframe{
    max-width: 590px !important;
    &.alignnone {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
}
.alignright{
  padding-left: 10px;
}
.page-template-default{
  .entry-content.entry-content-page{
    > p:first-child{
      margin-top: 50px;
    }
    > p:last-child{
      margin-bottom: 60px;
    }
  }

}
p {
  margin: 0 0 10px;
}
img {
  height: auto;
  max-width: 100%;
}
.hide-image img {
  display: none;
}
.w50 {
  float: left;
  width: 50%;
}
.size_big {
  font-size: 64px;
}
.size_small {
  font-size: 26px;
}
body .wpb_content_element,
body .wpb_button {
  margin-bottom: 0
}
.entry-content > .vc_row-fluid {
  position: relative;
}
.entry-content > .wpb_row .wpb_row {
    margin-left: -15px;
    margin-right: -15px;
}
.entry-content > .wpb_row .padding-30 .wpb_row {
    margin-left: 0;
    margin-right: 0;
}
.vc_row-fluid .container .container,
.vc_row-fluid .vc_row-fluid .container {
  width: 100%;
}
.media-body {
  width: inherit;
}
.margin-top40 {
  margin-top: 40px;
}
.thin {
  font-weight: 300;
}
.well {
  border: medium none;
  border-radius: 0;
  box-shadow: none;
}
.dark {
  color: $color_dark;
}
.dark2 {
  color: $color_dark2;
}
.color-primary {
  color: $primary_color;
}
.media .color-primary {
  color: $primary_color !important;
}
.cmsline {
  width: 19px;
  height: 3px;
  background-color: $color_dark2;
  display: block;
}
.line-gray {
  height: 1px;
  display: block;
  width: 100%;
  background-color: #353535;
}
.icon-box-style {
  display: block;
  height: 60px;
  line-height: 72px;
  text-align: center;
  width: 60px;
  @include border-radius(2px);
  background-color: $primary_color;
  position: relative;
  &:before {
    content: "";
    height: 2px;
    width: 19px;
    background-color: $primary_color;
    position: absolute;
    bottom: -10px;
    left: 0;
  }
  i {
    font-size: 28px;
    color: #fff;
  }
}
.br-2px {
  @include border-radius(2px);
}
.br-3px {
  @include border-radius(3px);
}
.br-4px {
  @include border-radius(4px);
}
.br-5px {
  @include border-radius(5px);
}
.box-shadow1{
  @include box-shadow(2px 0 3px rgba(#282828,0.06));
}
.z-index-1 {
  z-index: 1;
}

.no-padding {
  padding: 0;
}
.no-bottom-margin {
  margin-bottom: 0;
}
.vc_row{
  &.bg-overlay{
    &:before{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      background-color: inherit; 
      content: "";  
      z-index: 1;  
    }
  }
  &.bg-right-top{
    background-position: right top !important;
  }
  &.bg-line-bottom{
    background-position: right bottom !important;
  }
  &.bg-line-top{
    background-position: left top !important;
  }
  > .wpb_column{
    z-index: 2;
    position: relative;
  }
}
.vc_row.vc_inner{
  &.bg-right-top{
    background-position: right top !important;
  }
}
.overlay-color-column{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.vc_row-o-equal-height{
  .wpb_wrapper {
    height: 100%;
  }
  .vc_column-inner{
    height: 100%;
    .template-cms_grid--layout-default {
      height: 100%;
      .cms-grid{
        height: 100%;
      }
      .cms-grid-item{
        padding-bottom: 0;
        height: 100%;
      }

      .cms-grid-inner {
        height: 100%;
        padding-bottom: 15px;
      }
    }
  }
}
.custom-row-image-right{
  .custom-row-image{
    background-position: right top;
  }
}
.wpb_column.position-left, .wpb_column.position-right {
  position: absolute;
  top: 0;
  left: 0;
}
.wpb_column.position-right {
  left: inherit;
  right: 0;
}
/*
================> Unit Test
*/
.sticky{
  display: inline-block;
}
.screen-reader-text{
  display: none;
}
article:not(.sticky){
  .entry-title{
    i.fa-thumb-tack{
      display: none;
    }
  }
}
table {
    border-bottom: 1px solid #ededed;
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 2;
    margin: 0 0 20px;
    width: 100%;
    @include border-radius(0);
    th {
      color: $color_dark;
    }
}
caption, td {
    font-weight: normal;
    text-align: left;
}
.table > tbody > tr > td, 
.table > tbody > tr > th, 
.table > tfoot > tr > td, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > thead > tr > th {
  padding: 13px 8px;
}
th {
  font-weight: 700;
}
td {
    border-top: 1px solid #ededed;
    padding: 6px 10px 6px 10px;
}
/*--- Definition Lists ---*/
dl {
    margin: 0 0 0 25px;
  &.gallery-item{
    margin: 0;
  }
}
dl dt {
    font-weight: normal;
    line-height: 26px;
    text-transform: uppercase;
    font-weight: 700;
    color: $color_dark;
}
dl dd {
    line-height: normal;
    margin-bottom: 20px;
  &.gallery-caption{
    margin-top: 20px;
  }
    a {
      color: $primary_color;
      &:hover {
        color: $link_hover;
      }
    }
}
.page-links{
  padding: 20px 0;
  span:not(.page-links-title){
    color: $primary_color;
  }
  a{
    span{
      color: #777 !important;
    }
    &:hover{
      span{
        color: $primary_color !important;
      }
    }
  }
}
.wp-caption{
  img + p{
    margin-top: 10px;
  }
}
code, kbd {
    background-color: transparent;
    border-radius: 4px;
    color: inherit;
    font-size: 100%;
    padding: 2px 4px;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}
ins {
    color: #fff;
    border: none;
    padding: 2px;
    text-decoration: none;
    background-color: $primary_color;
}
pre {
    background: #f5f5f5;
    color: #666;
    font-family: monospace;
    font-size: 14px;
    margin: 20px 0;
    overflow: auto;
    padding: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.comment-wrap{
  padding: 0 15px;
}
.entry-content-inner {
  ul {
    padding: 0 0 0 35px;
    list-style-type: square;
    &.list-style-check {
      list-style: none;
      padding: 0;
    }
  }
}
dl + h2 + ul {
  list-style: none !important;
  padding: 0 0 0 20px;
  margin: 0 !important;
  li {
    position: relative;
    padding-left: 15px;
    &:before {
      content: "\f111";
      font-family: FontAwesome;
      font-size: 7px;
        left: 0;
        position: absolute;
        color: $primary_color;
    }
    ul {
      padding-left: 20px !important;
      list-style: none !important;
      margin: 0 !important;
      padding-bottom: 0 !important;
    }
  }
}
.post-password-form [type="password"] {
  margin-bottom: 10px;
  height: 39px;
  position: relative;
  top: -2px;
  border-width: 1px;
}
.w100{
  width: 100% !important;
}


/* ==========================================================================
   [End] 1. Reset HTML/CSS, Unitest, Body
========================================================================== */

/* ==========================================================================
   [Start] 2. Page Title
========================================================================== */
#page-title {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../images/page-title.jpg);
  padding: 119px 0 27px;
  text-align: center;
  border-bottom: #fff solid 7px;
  box-shadow: 0 0 21px rgba(#000,0.38);
  -webkit-box-shadow: 0 0 21px rgba(#000,0.38);
  &.theme-blank{
    padding: 119px 0 27px;
  }
  > .container {
    position: relative;
    z-index: 1;
  }
  &:after{
    content: '';
    position: absolute;
    background: $secondary_color;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.8;
  }
  #page-title-text {
    color: #fff;
     h1 {
       color: inherit;
       font-size: 22px;
       line-height: 30px;
       font-weight: 500;
       margin-bottom: 0;
       text-transform: capitalize;
    }
  }
  #breadcrumb-text {
    min-height: 0px;
    ul.breadcrumbs {
      font-size: 14px;
      list-style: outside none none;
      padding: 1px 0 15px 0;
      float: left;
      line-height: 22px;
      width: 100%;
      text-transform: none;
      color: #fff;
      font-weight: 300;
      li{
        display: inline-block;
        margin: 0;
        padding:0 6px;
          position: relative;
          &:after {
            content: "/";
            display: inline-block;
            color: #fff;
            position: relative;
            right: -6px;
          }
        &:last-child{
          &:after{
            display: none;
          }
        }
        a {
          color: #fff;
          &:hover{
            color: $primary_color;
          }

        }

      }
    }
  }

}

/* ==========================================================================
   [End] 2. Page Title
========================================================================== */

/* ==========================================================================
   [Start] 3. Primary
========================================================================== */
#page-wrapper.cs-boxed {
  background-color: #fff;
}
#page{
  overflow: hidden;
  position: relative;
}
#main {
  .sidebar-left-active #primary.sidebar-active {
    float: right;
  }
}
.vc_row-o-full-height {
  opacity: 0;
  filter: alpha(opacity=0);
}

/* Column Overlay */
.column-bg-overlay {
  color: #fff;
  .overlay-color-column {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .wpb_wrapper {
    position: relative;
    z-index: 1;
  }
  ul li {
    border-color: rgba(255, 255, 255, 0.2) !important; 
  }
}
/* End Column Overlay */

#content footer.entry-meta {
  padding: 0;
  text-align: center;
}
.sider-page {
  .wpb_row .container {
    padding: 0;
    width: 100%;
  }
  &.sd-left {
    #primary {
      float: right;
    }
  }
  &.sd-right {
    #primary {
      float: left;
    }
  }
}
#page-blog-standard #primary.page-full-width, .single-post-wrap #primary.full-width {
  float: none;
  margin: auto;
  max-width: 870px;
}


/* Background Image Fixed vs Background Overlay Color */
#content .wpb_row {
  &.row-background-fixed{
    position: inherit;
    background-attachment: fixed;
    background-repeat: no-repeat;
    .overlay-color {
      height: 3000px;
      left: -50%;
      position: relative;
      margin-bottom: -3000px;
      width: 200%;
      @include transform(translateY(-20%));
    }
  }
  &.row-bg-overlay {
    overflow: hidden;
    position: relative;
  }
  .overlay-color {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: inherit;
  }
}
#page #content {
  padding-top: 65px;
  padding-bottom: 65px;
  .main-content{
    padding: 20px 20px 20px;
  }
}
/* Page 404 */
.error404{
  #page #content{
    padding: 0 !important;
  }
  .cms-content404{
    > div{
      display: inline-block;
      float: none;  
      > a{
      width: 100%;
      text-align: center;
      float: left;
      display: inline-block;
        margin: 0 0 70px;
    }
      .error-404{
        padding: 69px 0 78px;
        width: 100%;
        float: left;
        img{
          max-height: 301px;
        }
        .page-content{
          margin-top: -30px;
        }
        h1 {
          margin: 0;
          color: $secondary_color;
          font-size: 200px;
          line-height: 1;
          position: relative;
          font-weight: 700;
        }
        p{
          color: #aaa;
          font-size: 22px;
          line-height: 22px;
          position: relative;
          margin-bottom: 0;
          font-weight: 500;
          a{
            margin-top: 58px;
            &:hover{
              background: $secondary_color !important;
              color: #fff !important;
            }
          }
        }
      }
    }
  }
}
/* Page Loading */
#cms-loadding {
  background: #fff;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 10000;
  top: 0;
}

/* Page Contact - Gettouch */
.page-get-contact {
  ul {
    margin-bottom: 20px;
    li {
      padding-left: 23px;
      position: relative;
      margin-bottom: 7px;
      margin-top: 4px;
      i {
        font-size: 16px;
        color: $color_dark2;
        padding-right: 14px;
        left: 0;
        position: absolute;
        top: 3px;
      }
      a {
        display: block;
      }
    }
  }
}

/* Custom - Row background image */
.row-arrow {
  .cms-angle-wrapper {
    position: absolute;
    top: -256px;
    left: -29px;
    right: -29px;
    z-index: 1;
   .angle-svg {
      width: 100%;
     fill:inherit;
    }
    &.style2{
      top: -264px;
      .angle-svg {
       fill:#fff;
      }
    }
  }

}
.row-half-left{
  .custom-row-image{
    background-position: left bottom;
    background-repeat: no-repeat;
    height: 100%;
    left: 0;
    bottom: -36px;
    position: absolute;
    width: 57%;
    z-index: 1;
  }
}
.row-half-left2{
  .custom-row-image{
    background-position: left bottom;
    background-repeat: no-repeat;
    height: 100%;
    left: 0 !important;
    bottom: -44px;
    position: absolute;
    width: 50%;
    z-index: 2;
  }
}
.row-half-right{
  .custom-row-image{
    background-position: right bottom;
    background-repeat: no-repeat;
    height: 100%;
    right: 0;
    left: auto !important;
    bottom: -69px;
    position: absolute;
    width: 57%;
    z-index: 1;
  }
}

.overlay-none .custom-row-image:before {
  background: transparent;
}
.custom-row-image-right-cover{
  overflow: initial !important;
  .custom-row-image{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: calc(100% + 54px);
    left: auto;
    right: 0;
    position: absolute;
    top: -27px;
    bottom: -27px;
    box-shadow: 0 0 35px rgba(#000,0.2),0 0 35px rgba(#000,0.2);
    -webkit-box-shadow: 0 0 35px rgba(#000,0.2),0 0 35px rgba(#000,0.2);
  }
}
.custom-row-image-left-cover{
  overflow: initial !important;
  .custom-row-image{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: calc(100% + 54px);
    left: 0;
    right: auto;
    position: absolute;
    top: -27px;
    bottom: -27px;
    box-shadow: 0 0 35px rgba(#000,0.2),0 0 35px rgba(#000,0.2);
    -webkit-box-shadow: 0 0 35px rgba(#000,0.2),0 0 35px rgba(#000,0.2);
  }
}
.custom-mix-color{
  .overlay-color {
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: '';
      opacity: 0.8;
      background: $primary_color;
      mix-blend-mode: multiply;
    }
  }
}
.custom-gradient-color{
  .overlay-color {
    &:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: '';
      opacity: 0.8;
      background: $primary_color;
      mix-blend-mode: multiply;
    }
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: '';
      opacity: 0.15;
      @include background-horizontal(rgba($primary_color,0.8),rgba($secondary_color,0.8));
    }
  }
}
.custom-gradient-color2{
  .overlay-color {
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: '';
      opacity: 0.85;
      @include background-horizontal(rgba($primary_color,0.8),rgba($secondary_color,0.8));
    }
  }
}
.row-image-holder {
  border: 2px solid #f9f9f9;
  bottom: 90px;
  left: 15px;
  position: absolute;
  right: 165px;
  text-align: center;
  top: 90px;
  img {
    left: 50%;
    position: absolute;
    top: 50%;
    @include transform(translate(-50%, -50%));
  }
}
.over_follow_initial{
  overflow: initial !important;
  .wpb_row {
    z-index: 2;
    position: relative;
  }
}
body .bg-left-bottom{
  background-position: bottom left !important;
}
body .bg-left-top{
  background-position: top left !important;
}
body .bg-right-top{
  background-position: top right !important;
}
body .bg-right-bottom{
  background-position: bottom right !important;
}
body .bg-right-center{
  background-position: center right !important;
}
body .bg-center-top{
  background-position: center top !important;
}
.custom-row-image-right {
  .custom-row-image {
    left: auto;
    right: 0;
    &:before {
      background-color: transparent;
    }
  }
}
body .half-left-background {
  background-position: top left !important;
  background-size: 50% 100% !important;
  .overlay-color{
    max-width: 50%;
    left: 0 !important;
  }
}
body .half-right-background {
  background-position: top right !important;
  background-size: 50% 100% !important;
  .overlay-color{
    max-width: 50%;
    right: 0 !important;
    left: auto !important;
  }
}
.bg-border-custom .custom-row-image:after {
  border: 2px solid rgba(255, 255, 255, 0.5);
  bottom: 100px;
  content: "";
  left: 100px;
  position: absolute;
  right: 100px;
  top: 100px;
}

/*custom slider*/
.letter_spacing30em{
  letter-spacing: 0.03em !important;
}
.letter_spacing15em{
  letter-spacing: 0.015em !important;
}
.metis.tparrows{
background: rgba(#1b1a1a,0.5) !important;
  &:before{
    color: #fff !important;
  }
  &:hover{
    background: #fff !important;
    &:before{
      color: #999 !important;
      @include transform(none !important);
    }
  }
}
.hermes .tp-bullet{
  width: 9px !important;
  height: 9px !important;
  &:hover{
    background: #fff;
  }
}

.letter-spacing400{
  letter-spacing: 0.4em !important;
}
#slider-wrap{
  margin-top: 96px;

}
.tp-dottedoverlay{
  background: #272735 !important ;
  opacity: 0.8;
}
.rev_slider .hesperiden.tparrows{
  width: 52px;
  height: 52px;
  border: #fff solid 2px;
  border-radius: 50%;
  background: transparent;
  &:before{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 30px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f177" !important;
    line-height: 48px;
    text-align: right;
    width: 100%;
    margin: 0 !important;
  }
  &.tp-rightarrow:before{
    content: "\f178" !important;
    text-align: left;
  }
  &:hover{
    background: transparent !important;
    border-color: $primary_color;
    &:before{
      color: $primary_color !important;
    }
  }
}
.gyges.tparrows{
  width: auto;
  height: initial;
  background:none;
  &:before{
    font-family: 'Linearicons-Free';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e879" !important;
    line-height: 46px;
    width: 100%;
    display: block;
    margin: 0 !important;
    font-size: 20px;
  }
  &.tp-rightarrow:before{
    content: "\e87a" !important;
  }
  &:hover{
    &:before{
      color: $primary_color !important;
    }
  }
}
.hermes.tp-bullets{
  position: absolute;
  top: 50%;
  @include transform(translateX(-50%) !important);
  left: auto !important;
  text-align: center;
  height: auto !important;
  .tp-bullet{
    position: relative !important;
    width: 100% !important;
    height: 15px !important;
    border-radius: 50%;
    box-shadow: none;
    border: #fff solid 2px;
    left: 0 !important;
    margin: 8px 0;
    &:after{
      display: none;
    }
    &.selected,
    &:hover{
      background: $primary_color;
      border-color: $primary_color;

    }
  }
}
  /* End Custom Slider */
/* ==========================================================================
   [End] 3. Primary
========================================================================== */
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {

  text-align: center;
padding-right: 0;
  width: 37px;
  line-height: 37px;
  height: 37px;
  top: 0px;
  right: 0;
}
.ef3-back-to-top{
  border: 2px solid $primary_color;
  opacity: 0.5;
  z-index: 9999;
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  color: #fff;
  background: $primary_color;
  width: 50px;
  height: 50px;
  border-radius: 50%;
 @include transition(all .7s ease-in-out);
  i{
    font-size: 20px;
    text-align: center;
    width: 100%;
    line-height: 46px;
    display: block;
  }
  &:hover{
    background: $secondary_color;
    opacity: 1;
    color: #fff;
  }
  &.on{
    opacity: 1;
  }
  &.off{
    opacity: 0;
  }
}
/* Page Loading */
#cms-loadding {
  background: #fff;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 10000;
  top: 0;
  left: 0;
}

/* Loading */
.cms-loader {
  color: $primary_color;
  font-size: 10px;
  margin: auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  top: 50%;
  @include transform(translate(0px, -50%));
  width: 65px;

  >div {
    width: 18px;
    height: 18px;
    background-color: $primary_color;
    margin: 0 3px 0 0;
    border-radius: 100%;
    display: inline-block;
    float: left;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .bounce1 {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s;
  }
  .bounce2 {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s;
  }
}
@-webkit-keyframes bouncedelay{
  0%,100%,80%{
    -webkit-transform:scale(0)
  }
  40% {
    -webkit-transform:scale(1)
  }
}
@keyframes bouncedelay{
  0%,100%,80%{
    transform:scale(0);-webkit-transform:scale(0)
  }
  40%{
    transform:scale(1);-webkit-transform:scale(1)
  }
}