/* Table of Content
==================================================
1.	Typography
2.  Global Styles (body, link color, gap, ul, section-title, overlay etc)
3.  Header area
4.	Banner area

	
*/

@import 'variable';
@import 'mixin';

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



body {
   font-family: $openSansFont;
   line-height: 26px;
   font-size: 15px;
   color: #666666;
   font-weight: 400;
   border: 0;
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.post .entry-header .entry-title{
   color: $title-color;
   font-family: "ZCOOL XiaoWei", sans-serif;
}



h1 {
   font-size: 48px;
   line-height: 52px;
}

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

h3 {
   font-size: 30px;
   margin-bottom: 20px;
}

h4 {
   font-size: 24px;
   line-height: 28px;
}

h5 {
   font-size: 20px;
   line-height: 24px;
}

h6 {
   font-size: 18px;
   line-height: 24px;
}

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


iframe {
   border: none;
}
a:focus,
a:active,
input,
input:hover,
input:focus,
input:active,
textarea,
textarea:hover,
textarea:focus,
textarea:active {
	-moz-outline: none;
	outline: none;
}
a:active,
a:focus,
a:hover,
a:visited {
	text-decoration: none;
	outline: 0;
}


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;
}

a:focus {
   outline: 0;
}

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;
}


.btn{
	display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 14px;
	line-height: 1.5;
	text-transform: uppercase;
	 border-radius: 0px;
	 padding: 12px 27px;
   font-weight: 700;
   @include transition();
	 i{
		 margin-left: 10px;
	 }
}

.btn-primary{
	background: #bc906b;
	color: #fff;
	border: 1px solid #bc906b;
   box-shadow: 5px 5px 0px 0px rgba(188,144,107,.3);
   margin-right: 5px;
	&:hover{
		background: #222222;
		color: #fff;
		border-color: #222222;
		box-shadow: none;
	}
}
.btn-solid{
   display: block;
   width: 100%;
   -webkit-box-shadow: 0px 15px 25px 0px rgba(188, 144, 107, 0.3);
   box-shadow: 0px 15px 25px 0px rgba(188, 144, 107, 0.3);
   &:hover{
      box-shadow: none;
   }
}
// form-control
.form-control,
.wpcf7-form-control{
   height: 50px;
   font-size: 14px;
   line-height: 28px;
   padding: 0 25px;
   border-radius: 0;
   &:focus{
      border-color: $primary-color;
      outline: none;
      box-shadow: none;
   }
 
}


/* Title*/

.ts-section-title{
   .title-border{
      position: relative;
      &:after{
         position: absolute;
         left: 0;
         right: 0;
         margin: auto;
         height: 3px;
         width: 40px;
         background: black;
         content: '';
         bottom: 0%;
         transform: translateX(-0%);
        
      }
   }
	.section-title{
      
		margin-bottom: 20px;
		text-align: center;
		font-size: 54px;
      font-weight: 400;
      font-family: $cookie;

		span{
		 color: $title-color;
		 margin-bottom: 15px;
      }
      
	 }
	 .title-bold{
		 font-size: 64px;
	 }
	 i{
       display: block;
		 &.icon{
			 font-size: 25px;
			 color: #c4c4c4;
		 }
    }
    &.title-left{
      .title-border:after{
         right: auto;
      }
    }
    &.title-right{
      .title-border:after{
         left: auto;
      }
    }
}
// title bar
.title-bar{
   span{
      display: inline-block;
      background: $primary-color;
      &.title-left-bar,
      &.title-right-bar{
         width: 70px;
         height: 2px;
        
      }
      &.title-middle-bar{
         width: 11px;
         height: 11px;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         vertical-align: middle;
         margin: 0 25px;
      }
   }
}

// overlay

.overlay {
   position: relative;
   z-index: 1;

   &:before {
      @include absolute();
      width: 100%;
      height: 100%;
      content: '';
      background: rgba(0, 0, 0, 0.68);
      z-index: -1;
   }
}


.main-container {
   padding: 80px 0;

   &.blog,
   &.blog-single {
      padding-bottom: 50px;
   }
}

// owl-carousel
.owl-carousel {
   .owl-dots{
      text-align: center;
      .owl-dot {
         width: 5px;
         height: 5px;
         border-radius: 50%;
         background: #6f6b6b;
         display: inline-block;
         opacity: 1;
         margin: 0 5px;
         opacity: .5;
   
         &.active {
            border: 2px solid #bc906b;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: transparent;
            position: relative;
            top: 5px;
         }
      }
   }

   .owl-nav{
      .owl-prev,
      .owl-next{
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         font-size: 48px;
         color: #666666;
      }
      .owl-prev{
         left: 30px;
      }
      .owl-next{
         right: 30px
      }
   }

}

.img-link{
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 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 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{
      li{
         color: #fff;
         a{
            color: #fff;
         }
      }
   }
   .deliciko-rating{
      .deliciko-review-percent{
         span{
            color: #fff;
            &.total-avg{
               color: #fff;
            }
         }
      }
   }
}


.post-meta-info{
   padding: 0;
   margin: 0;
   li{
      font-size: 12px;
      display: inline-block;
      color: #222222;
      font-weight: 400;
      margin-right: 20px;
      padding-left: 10px;
      position: relative;
      a{
         color: #222222;
         &:hover{
            color: $primary-color;
         }
      }
      i{
         margin-right: 6px;
         font-size: 12px;
         vertical-align: middle;
         font-weight: 700;
      }
      &:last-child{
         margin-right: 0;
      }
      &:before{
         position: absolute;
         left: 0;
         top: 2px;
         bottom: 0;
         width: 3px;
         height: 3px;
         @include border-radius(50%);
         background: $primary-color;
         content: '';
         margin: auto;
      }
   }
}