/*
	

=====================
   table of content 
====================
    1.  topbar
  
*/

/* Typography
================================================== */

body{
   font-family: $OpenSans;
   line-height: 22px;
   font-size: 14px;
   color: #777777;
   font-weight:400;
   border: 0;
   margin: 0;
   padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   color: #222222;
   font-family: $Lato;
   font-weight: 700;
}


h1 {
   font-size: 36px;
   line-height: 44px;
}

h2 {
   font-size: 30px;
   line-height: 36px;
}

h3 {
   font-size: 20px;
   line-height: 28px;
}

h4 {
   font-size: 18px;
   line-height: 26px;
}

h5 {
   font-size: 16px;
   line-height: 24px;
}
h6 {
   font-size: 14px;
   line-height: 24px;
}

/* Global styles
================================================== */

iframe {
   border: none; }
   
a:link,
a:visited {
   text-decoration: none;
}

a {
   color: $primary-color;
   @include transition();
}

a:hover {
   text-decoration: none;
   color: $primary-color;
}

a.read-more {
   color: $primary-color;
   font-weight: 700;
}

a.read-more:hover {
   color: #222;
}

.no-padding {
   padding: 0;
}

.p-60 {
   padding: 60px 0;

}
.p-100 {
   padding: 100px 0 !important;

}

.media>.pull-left {
   margin-right: 20px;
}

.gap-60 {
   clear: both;
   height: 60px;
}

.gap-50 {
   clear: both;
   height: 50px;
}

.gap-40 {
   clear: both;
   height: 40px;
}

.gap-30 {
   clear: both;
   height: 30px;
}

.gap-20 {
   clear: both;
   height: 20px;
}

.gap-10 {
   clear: both;
   height: 10px;
}

.mb-25 {
   margin-bottom: 25px;
}

.mb-30 {
   margin-bottom: 30px;
}

.mb-50 {
   margin-bottom: 50px;
}

.mb-60 {
   margin-bottom: 60px;
}

.mb-70 {
   margin-bottom: 70px;
}

.mb-80 {
   margin-bottom: 80px;
}

.mb-100 {
   margin-bottom: 100px;
}

.mb-110 {
   margin-bottom: 110px;
}

.mt-100 {
   margin-top: 100px;
}

.mt-50 {
   margin-top: 50px;
}
.mt-80{
   margin-top: 80px;
}

.mt-35 {
   margin-top: 35px;
}

.mrb-30 {
   margin-bottom: 30px;
}

.mrb-80 {
   margin-bottom: -80px;
}

.mr-70 {
   margin-right: 70px;
}

.mr-80 {
   margin-right: 80px;
}

.mr-100 {
   margin-right: 100px;
}

.ml-70 {
   margin-left: 70px;
}

.mr-70 {
   margin-right: 70px;
}

.mr-80 {
   margin-right: 80px;
}

.mr-100 {
   margin-right: 100px;
}

.mrt-0 {
   margin-top: 0 !important;
}

.pab-60 {
   padding-bottom: 60px;
}

.pab-70 {
   padding-bottom: 70px;
}

.pab {
   padding-bottom: 0;
}
.pull-left{
   float: left;
}
.pull-right{
   float: right;
}

img.pull-left {
   margin-right: 20px;
   margin-bottom: 20px;
}

img.pull-right {
   margin-left: 20px;
   margin-bottom: 20px;
}

.unstyled {
   list-style: none;
   margin: 0;
   padding: 0;
}

/* Dropcap */
.dropcap {
   font-size: 48px;
   line-height: 60px;
   padding: 0 7px;
   display: inline-block;
   float: left;
   font-weight: 700;
   margin: 5px 15px 5px 0;
   position: relative;
   text-transform: uppercase;
}
.clearfix{
   &:after{
      display: block;
      width: 100%;
      content: '';
   }
}
// btn 
.btn {
   font-size: 14px;
   font-weight: 700;
   color: $white-color;
   text-transform: uppercase;
   background: $primary-color;
   height: 45px;
   padding: 0 35px;
   line-height: 42px;
   @include border-radius(0px);
   @include transition();
   outline: none;
   text-decoration: none;
   cursor: pointer;
   border: none;
 
   &:hover {
      color: $primary-color;
      background: $white-color;
   }

   &.fill {
      background: transparent;
      padding: 0 25px;
      color: $white-color;
      margin-left: 20px;
      border: 2px solid $white-color;

      &:hover {
         background: $primary-color;
         border-color: $primary-color;
      }
   }

   &.btn-round {
      @include border-radius(36px);
   }
}

.btn-link {
   font-size: 13px;
   font-weight: 700;
   color: $primary-color;
   text-decoration: none !important;

   i {
      margin-left: 6px;
      position: relative;
      top: 2px;
   }

   &:hover {
      color: $primary-color;
   }
}

// post readmore
.post-readmore{
   font-size: 13px;
   text-transform: uppercase;
   font-weight: 700;
   color: #222222;
   &:hover{
      color: $primary-color;
   }
   i{
      vertical-align: middle;
      margin-left: 5px;
   }
}
// default Block Title style

.block-title {
   font-size: 14px;
   text-transform: uppercase;
   color: #fff;
   font-weight: 700;
   line-height: 36px;
   &.title-border {
      margin-left: 10px;
      border-bottom: 2px solid $primary-color;
      .title-bg {
         padding: 0px 27px;
         position: relative;
         background: $primary-color;
         display: inline-block;
         top: 2px;
         &:before {
            position: absolute;
            content: "";
            left: -9px;
            top: 0px;
            width: 2px;
            height: 100%;
            background: $primary-color;
            bottom: 0;
            margin: auto;
         }
      }
   }
   &.no-left-border{
      &.title-border .title-bg:before{
         display: none;
      }
   }

}
.section-heading{
   &.no-title-shap{
      .title-bg:after{
         display: none;
      }
   }
}
.heading-style2{
   .block-title{
      color: #222222;
      &.title-border{
         position: relative;
         border-bottom: none !important;
         margin-left: 0;
         &:before{
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 100%;
            height: 1px;
            background: #eaeaea;
         }
         .title-bg {
            background: #fff;
            &:after,
            &:before{
               display: none;
            }
         }
      }
   }
}


// default post title
.post-title{
   font-size: 14px;
   font-weight: 600;
   color: #222222;
   line-height: 18px;
   a{
      color: #222222;
      &:hover{
         color: $primary-color;
      }
   }
   &.md{
      font-size: 20px;
      font-weight: 700;
      line-height: 26px;
   }
   &.lg{
      font-size: 30px;
      font-weight: 700;
      line-height: 38px;
      letter-spacing: 0.45px;
      word-wrap: break-word; 
   }
}

//  post category style
a{
   &.post-cat{
      position: relative;
      left: 3px;
      top: 0px;
      background: #007bff;
      color: #fff;
      padding: 0px 5px;
      font-size: 11px;
      font-weight: 700;
      display: inline-block;
      line-height: 15px;
      text-transform: uppercase;
      margin-bottom: 7px;
      z-index: 1;
      margin-right: 10px;
      &:last-child{
         margin-right: 0;
      }
   }
}

//  default post content

.post-content{

   p{
      margin-top: 10px;
      margin-bottom: 12px;
   }
  
}
//post meta info

.post-meta{
   span{
      margin-right: 15px;
      font-size: 13px;
      color: #777777;

         i{
            vertical-align: middle;
            margin-right: 5px;
            font-weight: 700;
         }
         a{
            color: #777777;
         }
         
   }
}
.img-link{
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 1;
}
// post block style
.post-block-style{
   .post-thumb{
      margin-bottom: 15px;
      overflow: hidden;;
      position: relative;
      img{
         width: 100%;
         @include transition();
         @include transform(scale(1));
      }
   }
   .post-video-content{
      position: absolute;
      left: 0;
      top: 50%;
      right: 0;
      margin: auto;
      text-align: center;
      z-index: 1;
      transform: translateY(-50%);
   }
   &:hover{
      .post-thumb{
         img{
            @include transform(scale(1.1));
         }
      }
   }
}

// post overlay style
.ts-overlay-style{
   position: relative;
   .item,
   &.item{
      @include background-content();
      -webkit-backface-visibility: hidden;
      min-height: 260px;

   }
   &::before{
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      //background: linear-gradient(to top, rgba(#222222, 0.6) 20%, transparent 100%);
      background: linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.8) 100%);
      @include transition();
   }
   &:hover{
      &::before{
         background-color: rgba(0,0,0, .2);
      } 
   }
   .post-content{
      padding: 20px 20px 18px;
      position: absolute;
      bottom: 0;
      z-index: 1;
   }
   .post-title{
      a{
         color: #fff;
      }
   }
   
   .post-meta-info{
      padding: 0;
      margin: 0;
      li{
         font-size: 13px;
         display: inline-block;
         color: #fff;
         font-weight: 400;
         margin-right: 20px;
         a{
            color: #fff;
         }
         i{
            margin-right: 6px;
            font-size: 13px;
            vertical-align: middle;
            font-weight: 700;
         }
         &:last-child{
            margin-right: 0;
         }
         &.active{
            i{
               color: $primary-color;
            }
         }
         &.cat-item{
            display: block;
         }
      }
   }
}


// owl slider 

.main-container{
   padding-top: 80px;
}

.main-content-inner,
.main-container{
   padding-bottom: 80px;
}

.archive{
   .category-main-title{
      .block-title{
         margin-bottom: 0;
      }
   }
}