/* CSS Document */

/* 
    Created on : 08/04/2016 
    Author     : Themes - Dojo
    Template Name : ArchiDojo 
    Description: ArchiDojo , creative HTML Template
    Version    : 1.0
*/

/* ------------------------------------------ */
/*             TABLE OF CONTENTS
/* ------------------------------------------ */
/*   01 - General & Basic Styles  */
/*   02 - Front - Pages & menu & logo  */
/*   03 - Portofolio Pages & Elements */
/*   04 - Shop Page */
/*   05 - Product Page */
/*   06 - Blog Category Verions */
/*   07 - Blog Post Page Versions */
/*   08 - Portfolio Item Page */
/*   09 - Page 404 */
/*   10 - Coming soon Page */
/*  Hover Effects   */
/*  Animation & Keyframes   */


/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              01 - General & Basic Styles
/* --------------------------------------------------------------------------------------------------------------------- */


*{
    padding: 0;
    margin: 0;

}
body{
    background: #fff;
    font-family: 'Montserrat', sans-serif;
}
#page-content{overflow-x: hidden !important;}
.lefty, .mydiv, .classy, .divc, .libeled, 
.kiwi, .frow, .fitz, .poll, .sown, .coma, .lehi, .vice, .bura {display:none;}
/* --- typography --------------------- */

/*headings*/
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
    padding: 0;
	line-height: 14px;
}

/* paragraphs */
p {
	line-height: 14px;
	font-weight: 400;
	margin: 0;
}

span{
	line-height: 14px;
}

a{
	line-height: 14px;
	font-weight: 400;
}
a:hover,a:focus, button:hover, button:focus{
    text-decoration: none;
    outline: none
}

ul,ol{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              02 - Front - Pages & Menu & NavBar
/* --------------------------------------------------------------------------------------------------------------------- */

/** general for all front pages **/
.navbar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    color: #669a89;
    z-index: 9;
    background-color:#6babe2;
    border-color: transparent;
    border-radius: 0;
    border: none;
    font-size: 12px;
    letter-spacing: 2px;
    margin: 0;
    transition: background-color .2s ease-in-out;
}
.navbar-static{
  position: relative;
  height: 60px;
}
.navbar-brand{
    width: 110px;
    height: 30px;
    margin-left: 0 !important;
    margin-top: 15px;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}
.navbar-default .navbar-brand{background-image: url('../images/archidojo_white_logo.png');}
.navbar-static .navbar-brand{background-image: url('../images/archidojo_black_logo.png');}
.navbar-nav a{
    position: relative;
    color:black !important;
    font-weight:bold;
    padding: 19px 20px !important;
    line-height: 21px !important;
    background: transparent;
    transition: background-color .2s ease-in-out;
}
.navbar-nav li:last-child a{padding-right: 0 !important}
.navbar-nav a:before{
    content: "";
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
    height: 0;
    background: #99cccc;
    -webkit-transition: height 0.2s ease-in-out;
    -o-transition: height 0.2s ease-in-out;
    transition: height 0.2s ease-in-out;
}
.navbar-nav li:last-child a:before{right: 0}
.navbar-default .navbar-nav .active a{background-color: transparent !important;}

.navbar-fixed-top{
    position: fixed !important;
    background: #fff;
    height: 60px;
    z-index: 99;
}
.navbar-fixed-top .navbar-collapse{padding: 0 15px;}
.navbar-fixed-top .navbar-brand{background-image: url("../images/archidojo_black_logo.png");}
.navbar-fixed-top .navbar-nav a,
.navbar-static .navbar-nav a{ 
  color: #337ab7 !important;
  background-color: #fff;
}
.navbar-fixed-top .navbar-nav li.active a,
.navbar-static .navbar-nav li.active a{
    color: #333 !important;
    background: #fff !important;
}
.navbar-static:before,
.navbar-fixed-top:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: -10px;
    /*background: rgba(51, 51, 51, 0.2);*/
}

.navbar-nav .dropdown-menu{
  border-radius: 0;
  right: -1px;
  display: block;
  opacity: 0;
  transform: translateY(-150%);
  transition: transform .3s ease-in-out, opacity .1s ease-in-out, .3s z-index .2s ease-in-out;
  z-index: -3 !important;
}
.navbar-nav .dropdown-menu a{
  padding: 10px 15px !important;
  line-height: 14px !important;
  font-size: 10px;
  color: #a6c6c6 !important;
}
.navbar-collapse .dropdown:hover .dropdown-menu{
  display: block;
  transform: translateY(0);
  opacity: 1;
  z-index: 1000 !important;
}
.navbar-collapse .dropdown:hover i.fa{transform: rotate(180deg);}
.navbar-collapse .dropdown:hover{background-color: #fff;}
.navbar-collapse .dropdown:hover a.dropdown-toggle{ color: #333 !important;}

.navbar-nav .dropdown-menu a:before{
  bottom: 3px;
  left: 15px;
  right: 15px;
}
.navbar-nav .dropdown i.fa{
  position: relative;
  left: 5px;
  font-size: 14px;
  -webkit-transition: transform 0.2s ease-in-out;
  -o-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}
.navbar-nav .dropdown.open i.fa{
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}



/** first page header **/
header{position: relative;}
.first-page-header{
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/** top carousel **/
.top-carousel:before{
    content: "";
    position: absolute;
    top: 277px;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(51, 51, 51, 0.6);
}

.slide, .slide .container{
    position: relative;
    height: 100vh;
}

.slide:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -1;
}
.slide:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(27, 35, 38, 0.5);
    z-index: 1;
}

.slide-1:after{background-image: url("../images/slide-1.jpg");}
.slide-2:after{background-image: url("../images/slide-2.jpg");}
.slide-3:after{background-image: url("../images/slide-3.jpg");}

.slide-description{
    position: relative;
    margin-top: 235px;
    color: #fff;
    z-index: 2;
}
.slide-description span{
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 24px;
}
.slide-description h1{
    font-size: 48px;
    line-height: 14px;
    margin: 40px 0 45px 0;
}
.slide-description p{
    font-size: 18px;
    line-height: 30px;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    word-wrap: break-word;
}

/* top carousel controls */
.top-carousel .owl-controls{
    position: absolute;
    width: 100%;
}
.top-carousel .owl-dots{
    position: relative;
    top: -60px;
    margin: 0 auto;
}

.top-carousel .owl-dot{
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    margin-right: 10px;
    float: left;
}
.top-carousel .owl-dot.active{background: #fff}


/** carousel top preview buttons &&  carousel product cards **/
.top-preview-button {
  position: absolute;
  border-radius: 50%;
}
.top-preview-button > a {
  position: relative;
  z-index: 2;
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 18px;
  line-height: 58px;
  color: #fff;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.top-preview-button::after {
  /* this is used to create the pulse animation */
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  background-color: transparent;
  -webkit-animation: pulse 2s infinite;
  -moz-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
}

.top-preview-button> a:after, .top-preview-button> a:before {
  /* rotating plus icon */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-color: #99cccc;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.top-preview-button> a:after {
  height: 2px;
  width: 20px;
}
.top-preview-button> a:before {
  height: 20px;
  width: 2px;
}
.top-preview-button.is-open > a::after, .top-preview-button.is-open > a::before {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  transform: translateX(-50%) translateY(-50%) rotate(135deg);
  opacity: 1;
}
.top-preview-button.is-open::after {
  /* remove pulse effect */
  display: none;
}
.top-preview-button.is-open .product-card {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
.top-preview-button.visited > a {
  background-color: transparent;
  color: #fff;
}
.top-preview-button .product-card::before {
  /* triangle next to the interest point description - hidden on mobile */
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  display: none;
  border: 16px solid transparent;
}

.slide .product-card {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

.product-card {
  position: relative;
  left: 0;
  display: block;
  width: 270px;
  height: 425px;
  background: #fff;
  padding: 28px;
  z-index: 2;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
.product-card h2 {
  font-size: 22px;
  font-size: 1.375rem;
  margin-bottom: .6em;
}
.product-card p {
  color: #758eb1;
}
.top-preview-button.is-open > a {
  background-color: #fff;
  color: #a6b3b5;
}
.top-preview-button > a .fa{
    position: relative;
    z-index: 1;
}
.top-preview-button.is-open > a .fa{visibility: hidden;}

.product-card img{
    width: 100%;
    max-width: 210px;
    height: 100%;
    max-height: 210px;
    border: 2px solid #eaf0f3;
}
.product-card h4{
    color: #99cccc;
    margin-bottom: 18px;
    padding: 18px 0;
    height: 35px;
    border-bottom: 2px solid #eaf0f3;
    display: table;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-word;
    transition: color .2s ease-in-out;
}
.product-card h4 a{
  display: table-cell;
  vertical-align: middle;
  color: #99cccc;
  font-weight: bold;
}
.product-card .stars-rating{
    color: #cccc99;
    font-size: 18px;
    letter-spacing: 2px;
    float: left;
}
.product-card .product-price{
    color: #333;
    font-size: 18px;
    line-height: 18px;
    float: right;
}
.product-card .product-discount{
    font-size: 18px;
    color: #ccc;
}
.product-card button{
    position: relative;
    clear: both;
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 18px;
    line-height: 14px;
    background: #99cccc;
    border: none;
    margin-top: 20px;
    text-transform: capitalize;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.product-card button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.product-card:hover h4,
.product-card:hover h4 a{color: #333;}

/* position of buttons */
.slide-1 .top-preview-button:nth-of-type(1) {
  bottom: 12%;
  right: 50%;
}
.slide-1 .top-preview-button:nth-of-type(2) {
  bottom: 50%;
  right: 30%;
}
.slide-1 .top-preview-button:nth-of-type(3) {
  bottom: 12%;
  right: 2%;
}
.slide-2 .top-preview-button:nth-of-type(1) {
  bottom: 20%;
  left: 30%%;
}
.slide-2 .top-preview-button:nth-of-type(2) {
  bottom: 50%;
  right: 50%;
}
.slide-2 .top-preview-button:nth-of-type(3) {
  top: 12%;
  right: 15%;
}
.slide-3 .top-preview-button:nth-of-type(1) {
  bottom: 12%;
  left: 18%;
}
.slide-3 .top-preview-button:nth-of-type(2) {
  top: 50%;
  left: 44%;
}
.slide-3 .top-preview-button:nth-of-type(3) {
  bottom: 12%;
  right: 2%;
}
.slide-3 .top-preview-button:nth-of-type(4) {
  top: 25%;
  right: 15%;
}
/* animation delay of buttons */
.slide .top-preview-button:nth-of-type(1) a {
  -webkit-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.slide .top-preview-button:nth-of-type(2) a {
  -webkit-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.slide .top-preview-button:nth-of-type(3) a {
  -webkit-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.slide .top-preview-button:nth-of-type(4) a {
  -webkit-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}



/*** section portfolio highlights ***/
.first-page .portfolio-highlights-full-width{
  border-bottom: 2px solid #fff;
}
.portfolio-page .portfolio-header{
  background-color: #cccc99;
  padding-top: 60px;
}
.portfolio-intro{
    background:#fff;
    color: black;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    height: 78px;
}
.portfolio-intro h2{
    letter-spacing: 3px;
    margin-top: 30px;
}
.portfolio-intro button{
    line-height: 30px;
    letter-spacing: 3px;
    color: #99cccc;
    border: 2px solid #99cccc;
    border-radius: 0;
    width: 208px;
    padding: 2px 10px;
    margin: 18px 0;
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.portfolio-intro button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #99cccc;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.portfolio-intro button.active{
  box-shadow: none;
  background-color: #99cccc;
  color: #fff;
}
.portfolio-intro button:focus{
  outline: none !important;
  box-shadow: none;
}

.portfolio-work, .portfolio-work .work-bg{
    position: relative;
    height: 455px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.portfolio-work{
    background-position: 0 75%;
    background-attachment: fixed;
}
.portfolio-work:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.portfolio-work.lighter:before{background-color:red;}
.portfolio-work.darker:before{background:#66b3ff}
.portfolio-work:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
}
.portfolio-work:last-of-type:after{display: none;}

.portfolio-work .work-bg:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(153, 204, 204, 0.2);
}

.portfolio-work .work-description{ color: #fff;}
.portfolio-work.lighter .work-description{background: #99cccc;}
.portfolio-work.darker .work-description{background: #9eb6ae;}


.portfolio-work .col-md-6:last-of-type{
    padding: 0;
    margin-left: -15px;
}

.portfolio-work .work-description{
    padding: 57px 60px 58px;
    height: 455px;
}
.portfolio-work.lighter .work-description{
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}
.portfolio-work.lighter .work-bg{
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}
.portfolio-work.darker .work-description{
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
}
.portfolio-work.darker .work-bg{
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
}
.work-description h3{
    line-height: 30px;
    margin-bottom: 20px;
}
.work-description span{
    font-size: 10px;
    line-height: 24px;
    letter-spacing: 2px;
}
.work-description hr{
    border-top: 2px solid #fff;
    margin: 50px 0;
}
.work-description p{
    line-height: 30px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    padding: 0 50px;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    word-wrap: break-word;
}
.work-description .btn{
    width: 100%;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 0;
    letter-spacing: 3px;
    line-height: 45px;
    margin-top: 40px ;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.work-description .btn:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.darker  .work-description .btn{background:#C5E7FC;}
.lighter .work-description  .btn{background:#C5E7FC;}

/*** shop latest additions section ***/
.shop-latest-additions .product-card{
  position: relative;
  visibility: visible;
  opacity: 1;
  border: 2px solid #eaf0f3;
  margin-bottom: 30px;
}

.product-card.with_discount:after{
  content: "-50%";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background-color: #f1710a;
  font-size: 10px;
  line-height: 40px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

/*** shop-highlights ***/
.shop-highlights{
  background-color: #99cccc;
  border-bottom: 2px solid #fff;
}
.shop-highlights .product-card{
  position: relative;
  visibility: visible;
  opacity: 1;
  margin-bottom: 30px;
}

/*** section about-us block ***/
.about-block{
  background-color:#fff;
  border-bottom: 2px solid #fff;
  color:black;
  padding-bottom: 50px;
}
.about-wrapp{
  padding-right: 65px;
  margin-top: 30px;
}
.about-wrapp h4:first-child{margin-bottom: 30px;}
.about-wrapp p,
.about-wrapp small{
  line-height: 30px;
  font-family:'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  margin-bottom: 30px !important;
  display: inline-block;
}
.about-wrapp small,
.about-wrapp ul span{font-size: 14px;}
.about-wrapp p{
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}
.about-wrapp ul li{
  position: relative;
  padding-left: 30px;
}
.about-wrapp ul li:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 2px;
  background-color: #D3D3D3;
}
.about-wrapp ul span{
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.about-wrapp h4:last-child{
  margin-top: 40px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.standard-page .about-block{padding-top: 60px;}

/*** section pricing plans ***/
.price{
  position: relative;
  border: 2px solid #eaf0f3;
  padding: 30px;
  margin-bottom: 60px;
  display: inline-block;
  color: #374545;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  transition: all .2s ease-in-out;
}
.price .icon{
  display: block;
  font-size: 48px;
  line-height: 100%;
}
.price h1{margin: 20px 0}
.price small{
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 10px;
}
.price hr{
  border-top: 2px solid #eaf0f3;
  margin: 25px 0 22px;
}
.price h4:first-of-type{
  text-align: center;
  padding: 0 18px;
  line-height: 30px;
  margin-bottom: 10px;
}
.price li{
  position: relative;
  color: #999999;
  padding-left: 18px;
  line-height: 29px;
  background-image: url('../images/checked_icon.png');
  background-repeat: no-repeat;
  background-position: left;
}
.price .price-tax{
  width: 138px;
  height: 128px;
  border: 2px solid #eaf0f3;
  padding: 33px 0;
  text-align: center;
  margin-top: 10px;
}
.price .price-tax h1{
  margin: 0 0 7px 0;
  line-height: 100%;
}
.price button{
    position: relative;
    clear: both;
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    line-height: 14px;
    background: #99cccc;
    border: none;
    margin-top: 18px;
    text-transform: capitalize;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.price button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.price:hover{
  border-color: #374545;
}

/*** section full width video ***/
.full-width-video{ 
    position: relative;
    height: 100vh;
    overflow: hidden;
    border-bottom: 2px solid #fff;
}
.full-width-video:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(27, 35, 38, 0.6);
    z-index: 1;
}
.video-presentation{
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    color: #fff;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
#video-background{
    position: relative;
    min-width: 100%;
    min-height: 100%;
}
.full-width-video h2{
    letter-spacing: 6px;
    margin-bottom: 50px;
}
.full-width-video button{
    position: relative;
    width: 100%;
    height: 60px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 0;
    line-height: 30px;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.full-width-video button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.landing_video_bg .full-width-video{border-bottom: none;}

/*** section clients && testimonials ***/
.clients_testimonials{
    position: relative;
    background: #9eb6ae;
    color: #fff;
    border-bottom: 2px solid #fff;
}

.our-clients{ 
    background: #fff;
    padding: 22px 15px;
}
.our-clients ul{
    margin: 0
}
.our-clients li{
    height: 50px;
    margin: 30px 0;
}
.our-clients li a{
  display: block;
  opacity: .8;
  transition: opacity .2s ease-in-out;
}
.our-clients li img{
  max-height: 50px;
  max-width: 90%;
}
.our-clients li a:hover{opacity: 1;}

.clients_testimonials .testimonials{
    padding: 0;
    margin-left: -15px;
    max-height: 100%;
    height: 374px;
    border-right: 2px solid #fff;
}
.testimonial .icon{
    font-size: 48px;
    display: inline-block;
    margin-top: 60px;
    margin-bottom: 25px;
}
.testimonial h1{
    font-size: 48px;
    line-height: 30px;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin-bottom: 20px;
}
.testimonial small{
    font-size: 10px;
    line-height: 30px;
    letter-spacing: 3px;
    display: block;
}
.testimonial p{
    display: inline-block;
    padding: 0 55px;
    height: 55px;
    margin-top: 27px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    word-wrap: break-word;
    font-size: 18px;
    line-height: 30px;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.testimonials .owl-controls,
.testimonials .owl-dots{
    position: relative;
    text-align: center;
    width: 100%;
}
.testimonials .owl-dot{
    width: 13px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    display: inline-block;
    z-index: 2;
    margin-top: 9px;
    margin-right: 6px;
}
.testimonials .owl-dot.active{background: #fff}


/**** achievments section *****/
.achievments{
    background: #99cccc;
    border-bottom: 2px solid #fff;
    color: #fff;
    padding-bottom: 110px;
}
.achievments .icon,
.achievments #count-nr{font-size: 48px;}

.achievments .icon{
    display: inline-block;
    margin-top: 118px;
    margin-bottom: 20px;
}
.achievments .count-nr{
    line-height: 35px;
    margin-bottom: 15px;
    font-family:'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.achievments small{
    font-size: 10px;
    letter-spacing: 3px;
    display: inline-block;
}

/**** services section *****/
.company-page .services{border-bottom: none;}
.standard-page .services{padding-top: 60px;}
.services{
    position: relative;
    border-bottom: 2px solid #fff;
}

/*service color change here......*/
.services:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background:#D3D3D3;*/
}
.services:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../images/service_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background:#fff;
    z-index: -1;
    opacity: 0.8;
}
.services .section-intro{color:black;}

.section-intro{
    position: relative;
    color: #374545;
    z-index: 1;
}
.section-intro .icon{
    font-size: 48px;
    display: inline-block;
    margin-top: 58px;
    margin-bottom: 22px;
}
.section-intro h1{
    font-size: 30px;
    line-height: 30px;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin-bottom: 20px;
}
.section-intro small{
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 40px;
    display: inline-block;
}
.section-intro h4{
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin-bottom: 28px;
}

/* nav tabs */
.nav_tabs_row{
    position: relative;
    background: #fff;
    border-top: 2px solid #fff;
    padding-top: 30px;
    z-index: 3;
}
.services .nav-tabs{border-bottom: 0;}
.services .nav-tabs a{
    position: relative;
    font-size: 24px;
    font-weight: bold;
    color: black !important;
    padding: 15px 0 41px !important;
    width: 370px;
    text-align: center;
    margin-right: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    cursor: pointer;
}
.services .nav-tabs a:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: #fff;
}
.services .nav-tabs li.active a:before{display: none;}

.services .nav-tabs li:nth-child(2){margin: 0 30px;}
.services .nav-tabs li:first-child a{ background-color:#eaf0f3 !important}
.services .nav-tabs li:nth-child(2) a{background-color:#eaf0f3 !important}
.services .nav-tabs li:last-child a{ background-color:#eaf0f3 !important}

.services .nav-tabs>li.active>a, .services .nav-tabs>li.active>a:focus{background-color: #fff}

.tab_panes_row, .contact-us-row{
    position: relative;
    background-color: #fff;
}
#interior-tab{background-color: #fff !important}
#architecture-tab{background-color: #fff !important}
#furniture-tab{background-color: #fff !important}
.services .tab-pane{
    float: left;
    z-index: 2;
    padding-top: 57px;
    color:black;
    background-color: #fff;
}
.services .tab-pane .service-tab{
    position: relative;
    padding-left: 15px;
    padding-right: 60px;
    float: left;
    background-color: #fff; 
}
.services .tab-pane .service-tab:before{
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    height: 100%;
    width: 2px;
    /*background: #fff;*/
    background-color: #fff;
}
.services .tab-pane .service-tab h3{
    line-height: 24px;
    margin-bottom: 17px;
}
.services .tab-pane .service-tab small{
    font-size: 10px;
    letter-spacing: 3px;
}
.services .tab-pane .service-tab p{
    margin-top: 37px;
    margin-bottom: 17px !important;
    height: 120px;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 30px;
    /*font-size: 14px;*/
    /*line-height: 1.42857143;*/
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.contact-us-row a{
    line-height: 30px;
    letter-spacing: 4px;
    display: inline-block;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 0;
    background:#fff;
    color: #337ab7;
    margin: 60px 0;
    padding: 11px 0;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color:#adf3ed;
}
.contact-us-row a:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

/*** our process section ***/
.process-row{
    background-color: #cccc99;
    padding-bottom: 60px;
    border-bottom: 2px solid #fff;
}
.process-row .nav-tabs{
    border-right: 2px solid #fff;
    border-bottom: none;
}
.process-row .nav-tabs, .process-row .tab-content{margin-top: 35px;}
.process-row .nav-tabs>li{ 
    float: none; 
    margin-bottom: 40px;
}
.process-row .nav-tabs>li:first-child{margin-top: 20px}
.process-row .nav-tabs>li:last-child{margin-bottom: 20px}
.process-row .nav-tabs>li.active>a, .process-row .nav-tabs>li.active>a:hover, 
.process-row .nav-tabs>li.active>a:focus, .process-row .nav>li>a:hover, .process-row .nav>li>a:focus{
    background: transparent;
    border: none;
}
.process-row .nav-tabs>li>a{
    position: relative;
    border: none;
    color: #fff;
    width: 100%;
}
.process-row .nav-tabs>li.active>a{color: #fff;}
.process-row .nav-tabs>li>a:after{
    content: "";
    position: absolute;
    top: 40%;
    right: -4%;
    width: 30px;
    height: 2px;
    background: #fff;
    visibility: hidden;
    transform: translateX(60px);
    transition: transform .3s ease-in-out, visibility .1s ease-in-out;
}
.process-row .nav-tabs>li>a:before{
    content: "";
    position: absolute;
    top: 17%;
    right: 15px;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    background: transparent;
    visibility: hidden;
    transform: translateX(60px);
    transition: transform .3s ease-in-out, visibility .1s ease-in-out;
}
.process-row .nav-tabs>li.active>a:after,
.process-row .nav-tabs>li.active>a:before{
  visibility: visible;
  transform: translateX(0);
}
.process-row .nav-tabs>li.active>a:hover h1{color: inherit}
.process-row .nav-tabs>li>a:hover h1{color: #333}

.process-row .nav-tabs h1{
    font-size: 48px;
    line-height: 30px;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    display: inline-block;
    float: left;
    margin-right: 20px;
    -webkit-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}
.process-row .nav-tabs h3{margin-bottom: 5px}
.process-row .nav-tabs small{
    font-size: 10px;
    letter-spacing: 3px;
}

.process-row .tab-content{
    padding-left: 60px;
    padding-right: 50px;
    padding-top: 20px;
    color: #fff;
    background: #fff;
}
.process-row .tab-content p{
    font-size: 18px;
    line-height: 30px;
    font-family:'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
.process-row .tab-content p span.inherit-text{
    font-size: 14px;
    margin: 45px 0;
    display: inherit;
    line-height: 30px;
}
.two-col {
    -moz-column-count: 2;
    -moz-column-gap: 50px;
    -webkit-column-count: 2;
    -webkit-column-gap: 50px;
    -ms-column-count: 2;
    -ms-column-gap: 50px;
    height: 375px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*** our team section ***/
.team-row{
    background:#D3D3D3;
    border-bottom: 2px solid #fff;
}
.team-member{
    margin: 60px 0;
    color: black;
    padding: 0 20px;
}
.team-member-portrait{
    position: relative;
    border: 30px solid #fff;
    border-radius: 50%;
    margin-bottom: 30px;
    max-width: 330px;
    max-height: 330px;
}
.team-member-portrait img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.team-member small{
    font-size: 10px;
    letter-spacing: 3px;
    margin: 20px 0 42px 0;
    display: inline-block;
}
.team-member p{
    line-height: 30px;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin-bottom: 20px !important;
    padding: 0 15px;
}
.team-member-socials a{
    font-size: 24px;
    line-height: 100%;
    color:  #fff;
    margin: 0 5px;
    border-radius: 50%;
    -webkit-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
}
.first-page .team-row{
    border-top: 2px solid #fff;
    border-bottom: #fff;
}
.company-page .team-row{border-top: 2px solid #fff;}

/*** contact us section ***/
.contact-form{
  display: inline-block;
  margin-bottom: 30px;
}
.contact-form .form-group{margin-bottom: 30px;}
.contact-form .form-group input{
  padding-left: 20px;
  color: #333;
  height: 48px;
  border: 2px solid #eaf0f3;
  border-radius: 0;
  font-family:'Montserrat', sans-serif;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  transition: border-color .2s ease-in-out;
}
.contact-form .form-group textarea{
  border-radius: 0;
  border: 2px solid #eaf0f3;
  height: 180px;
  padding-left: 20px;
  color: #333;
  resize: none;
  transition: border-color .2s ease-in-out;
}
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus{
  outline: none;
  border-color: #374545;
}
.contact-form .form-group button{
    color:#337ab7;
    background-color:#C5E7FC;
    padding-left: 0;
    font-size: 18px;
    height: 50px;
    border-radius: 0;
    border: 2px solid #eaf0f3;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color:#adf3ed;
}
.contact-form .form-group button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.call_us_btn, 
.workin_hours{
  font-size: 18px;
  line-height: 30px;
  display: inline-block;
  width: 100%;
  height: 50px;
  border-top: 2px solid #eaf0f3;
  border-bottom: 2px solid #eaf0f3;
  padding: 8px 0;
}

.call_us_btn i,
.workin_hours i{
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.call_us_btn .pull-right,
.workin_hours .pull-right{
  margin-top: 10px;
  color: #333;
}

.standard-page .contact-us{
  padding-top: 60px;
  background-color: #fff;
}
.standard-page .contact-us .section-intro{color: #fff}
.standard-page .contact-us .call_us_btn, .standard-page .contact-us .workin_hours,
.standard-page .contact-us .call_us_btn a, .standard-page .contact-us .workin_hours span{color: #fff !important}

/*** blog-stories section ***/
.blog_stories{
  background-color: #cccc99;
  border-bottom: 2px solid #fff;
}
.shop-page .blog_stories{border: none;}

.blog_stories .blog-card{
  position: relative;
  max-height: 395px;
  background-color: #fff;
  padding: 30px;
  margin-bottom: 60px;
}
.blog_stories .blog-card img{
  width: 100%;
  max-height: 200px;
}
.blog_stories .blog-card h4{
  margin: 15px 0;
  height: 60px;
  width: 100%;
  display: table;
}
.blog_stories .blog-card h4 a{
  color: #3b4a4a;
  line-height: 30px;
  display: table-cell;
  vertical-align: middle;
}
.blog_stories .blog-card button{
    position: relative;
    clear: both;
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 18px;
    line-height: 14px;
    background: #99cccc;
    border: none;
    margin-top: 0;
    text-transform: capitalize;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.blog_stories .blog-card button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

/*** clients_inline list section ***/
.clients_inline ul{margin-top: 17px;}
.clients_inline ul a{
  display: block;
  margin-bottom: 35px;
  opacity: .8;
  transition: opacity .2s ease-in-out;
}
.clients_inline ul img{max-width: 90%;}
.clients_inline ul a:hover{opacity: 1;}

/*** testimonials_inline section ***/
.testimonials_inline{
  background-color: #9eb6ae;
  color: #fff;
  padding-bottom: 55px;
}
.standard-page .testimonials_inline{
  border-bottom: 2px solid #fff;
  background-color: #99cccc;
}

/*** subscribe section ***/
.subscribe{padding-bottom: 60px;}
.subscribe .form-inline input{
  width: 100%;
  height: 48px;
  padding-left: 20px;
  border: 2px solid #eaf0f3;
  border-radius: 0;
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
} 
.subscribe .form-inline input:focus{
  outline: none;
  border-color: #374545;
}
.subscribe .form-inline button{
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 0;
  color: #fff;
  background: #99cccc;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.subscribe .form-inline button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

/******** skills section *******/
.skills{
  background-color:#D3D3D3;
  color: black;
  padding-bottom: 50px;
  border-bottom: 2px solid #fff;
}
.skills .section-intro{color:black;}

.progress-bars{
  font-size: 10px;
  display: table;
  line-height: 30px;
  letter-spacing: 2px;
}

.progress-bars ul{
  display: table-cell;
}
.progress-bars ul.skill-name{
  width: 29.824%;
  margin-right: 30px;
}
.meter { 
  height: 30px;  
  position: relative;
  background: transparent;
  padding: 5px 0 5px 30px;
}
.meter > span {
  display: inline-block;
  height: 2px;
  vertical-align: middle;
  background-color: #fff;
  position: relative;
  overflow: hidden;

}
.meter > p{
  display: inline-block;
  margin-left: 25px !important;
}

/*** footer ***/
footer{
    background:#88b5dc;
    border-bottom: 2px solid #fff;
    border-top: 2px solid #fff;
}
footer .container{
  padding: 0 30px;
}

#location-map{
    height: 400px;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}
.gm-style-iw * {
    display: block;
    width: 100%;
}
.gm-style-iw h4, .gm-style-iw p {
    margin: 0;
    padding: 0;
}
.gm-style-iw a {
    color: #4272db;
}

.footer-contacts-info,
.footer-social-links{
    position: relative;
    border-right: 2px solid #fff;
    height: 400px;
    color: black;
    padding: 30px;
}
.footer-contacts-info{background: #6babe2}
.footer-social-links{background: #6babe2}

.footer-contacts-info small{
    letter-spacing: 3px;
    font-size: 10px;
    line-height: 30px;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 30px;
}
.footer-contacts-info address{
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    line-height: 30px;
    margin-bottom: 30px;
}
.footer-contacts-info address a{color:black}
.footer-contacts-info address span{
    display: inline-block;
    width: 30%;
}

.footer-social-links ul{
    margin: 35px 0 40px 0;
}
.footer-social-links ul li{
    margin-right: 13px;
    padding-left: 0;
}
.footer-social-links ul li a{
    font-size: 24px;
    line-height: 100%;
    color:black;
    border-radius: 50%;
    -webkit-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
}
.footer-social-links .copyright{
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    line-height: 30px;
    display: block;
    margin-bottom: 25px;
}
.footer-social-links .copyright a{
    position: relative;
    color:black;
}
.footer-social-links .copyright a:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    -webkit-transition: height 0.3s ease-out;
    -o-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
}
.footer-social-links .copyright a:hover:before{
    height: 2px;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              03 - Portofolio Pages & Elements 
/* --------------------------------------------------------------------------------------------------------------------- */

/*** header ***/
.portfolio-filter-btn button{margin: 18px 5px}

/**************************************************************************************************************** 
section portfolio highlights with different versions of content && sections of portfolio page elements with different versions !!!!!!
*****************************************************************************************************************/

.darker{background-color:  #9eb6ae}
.lighter{background-color: #99cccc}

/* 1. Full width with 30px padding */
.portfolio-intro-full-width{padding: 0 30px;}
.portfolio-highlights-full-width .lighter.with_padding,
.portfolio-highlights-full-width .darker.with_padding{
  padding: 30px;
  color: black;
  max-height: 430px;
}

.portfolio-highlights-full-width .lighter.with_padding .col-md-6:first-of-type,
.portfolio-highlights-full-width .darker.with_padding .col-md-6:first-of-type{padding-left: 0}
.portfolio-highlights-full-width .lighter.with_padding .col-md-6:last-of-type,
.portfolio-highlights-full-width .darker.with_padding .col-md-6:last-of-type{padding-right: 0}
.portfolio-highlights-full-width .lighter.with_padding{background-color:
#fff;
}
.portfolio-highlights-full-width .darker.with_padding{background-color:#D3D3D3;}
.portfolio-highlights-full-width .lighter.with_padding .work-bg,
.portfolio-highlights-full-width .darker.with_padding .work-bg{
    position: relative;
    height: 370px;
    background-size: cover;
    background-repeat: no-repeat;
    border: 2px solid #fff;
}
.portfolio-highlights-full-width .lighter.with_padding .work-bg:after,
.portfolio-highlights-full-width .darker.with_padding .work-bg:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(153, 204, 204, 0.2);
}

.portfolio-highlights-full-width .work-description hr{margin: 20px 0}
/*.portfolio-highlights-full-width .darker.with_padding .work-description hr{margin: 50px 0 20px 0}*/
.portfolio-highlights-full-width .work-description p{
  padding: 0 30px 0 0;
  height: 155px;
}
.portfolio-highlights-full-width .work-description .btn{margin-top: 9px;}

/* 2. Full with no padding */
.portfolio-highlights-full-width .with_no_padding .col-md-6:first-of-type{
  padding-left: 0;
  padding-right: 30px;
  margin-left: -15px;
}
.portfolio-highlights-full-width .with_no_padding .col-md-6:last-of-type{padding: 0}

.portfolio-highlights-full-width .with_no_padding{ color: #fff; }
.portfolio-highlights-full-width .lighter.with_no_padding{background-color: #99cccc}
.portfolio-highlights-full-width .darker.with_no_padding{background-color: #9eb6ae;}
.portfolio-highlights-full-width .with_no_padding .work-bg,
.portfolio-highlights-full-width .with_no_padding .work-bg{
    padding: 30px 0;
    position: relative;
    height: 370px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.portfolio-highlights-full-width .with_no_padding .work-description h3{padding-right: 15%}
.portfolio-highlights-full-width .with_no_padding .work-description{ padding: 28px 0 30px}
.portfolio-highlights-full-width .with_no_padding .work-description p{
  font-size: 14px;
  padding: 0;
  height: 97px;
}

/* 3. Boxed with view details button */
.boxed_highlights .lighter,
.boxed_highlights .darker{
  border-width: 2px 2px 2px 1px;
  border-style: solid;
  border-color: #fff;
  padding: 30px 15px;
  color: #fff;
  display: inline-block;
  float: left;
  margin-top: 26px;
}
.boxed_highlights .lighter{background-color: #99cccc;}
.boxed_highlights .darker{background-color: #9eb6ae;}

.boxed_highlights .with_btn .work-bg{
  height: 245px;
  border: 2px solid #fff;
  margin-bottom: 35px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.boxed_highlights .with_btn .btn{
    width: 100%;
    height: 50px;
    border-radius: 0;
    letter-spacing: 3px;
    line-height: 30px;
    color: #9eb6ae;
    background: #fff;
    font-size: 10px;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.boxed_highlights .with_btn .btn:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.boxed_highlights .with_btn .work-description hr{margin: 25px 0}
.boxed_highlights .with_btn .work-description p{
  padding: 0;
  font-size: 14px;
  height: 90px;
}
.boxed_highlights .with_btn .work-details{
  display: inline-block;
  float: left;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  width: 100%;
  padding: 12px 0;
  letter-spacing: 3px;
  margin-top: 32px;
}

/* 4. Boxed - all block is link */
.boxed_highlights .highlight_link{
  color: #fff;
  max-height: 300px;
  display: inline-block;
  position: relative;
  -webkit-transition: background-color 0.2s ease-in-out !important;
  -o-transition: background-color 0.2s ease-in-out !important;
  transition: background-color 0.2s ease-in-out !important;
}
.boxed_highlights .lighter .highlight_link{
  padding-right: 15px;
  background-color: #fff;
}
.boxed_highlights .darker .highlight_link{
  padding-left: 15px;
  background-color: #fff;
}
.boxed_highlights .highlight_link .work-bg{
  height: 236px;
  border: 2px solid #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.boxed_highlights .highlight_link h3{margin-bottom: 10px}
.boxed_highlights .highlight_link .work-description p{
  clear: both;
  font-size: 14px;
  line-height: 26px;
  padding: 0;
  height: 75px;
}
.boxed_highlights .highlight_link .work-details{
  display: inline-block;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  width: 100%;
  padding: 3px 0;
  letter-spacing: 3px;
  margin: 18px 0;
}
.highlight_link:hover{background-color: #333;}

.boxed_container.three_col, .boxed_highlights{margin-bottom: 30px}

/* 5. portfolio full-width container link on block hover */
.big_hover_lnk{
  margin: 0;
  padding: 0;
  color: #fff;
  overflow: hidden;
}
.big_hover_lnk .work-bg{
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.big_hover_lnk .work-description{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 24%;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
.big_hover_lnk.lighter .work-description{background-color: #fff;}
.big_hover_lnk.darker .work-description{background-color: #66b3ff;}

.big_hover_lnk .work-description h3{
  position: relative;
  top: 0;
  height: 60px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-transition: top 0.3s ease-in-out;
  -o-transition: top 0.3s ease-in-out;
  transition: top 0.3s ease-in-out;
}
.big_hover_lnk .work-description small{
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -10%;
  text-transform: uppercase;
  -webkit-transition: bottom 0.3s ease-in-out;
  -o-transition: bottom 0.3s ease-in-out;
  transition: bottom 0.3s ease-in-out;
}
.big_hover_lnk:hover .work-description{
  opacity: 1;
  color: #fff;
}
.big_hover_lnk:hover .work-description h3{ top: 97px;}
.big_hover_lnk:hover .work-description small{ bottom: 97px;}

/* 6. portfolio boxed container link on block hover three cols */
.boxed_container .big_hover_lnk .work-bg{height: 275px}
.boxed_container .big_hover_lnk{
  padding: 0 15px;
  margin-top: 30px;
  background-color: transparent;
  display: block;
}
.boxed_container .big_hover_lnk .work-description{
  left: 15px;
  right: 15px;
  width: auto;
  padding: 0 15%;
}
.boxed_container .big_hover_lnk:hover .work-description h3{ top: 85px;}
.boxed_container .big_hover_lnk:hover .work-description small{ bottom: 85px;}

/* 7. portfolio boxed container link on block hover four cols */
.four_col.boxed_container .big_hover_lnk .work-bg{height: 200px}
.four_col.boxed_container .work-description small{display: none;}
.four_col.boxed_container .work-description h3{
  top: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 18px;
}
.four_col.boxed_container .big_hover_lnk:hover .work-description h3{ top: 50%;}
.four_col.boxed_container{padding-bottom: 30px}

/* 7. portfolio boxed container link on block hover four cols with background */
.portofolio_with_bg{background-color: #374545}

/******************************************************************************************************************************************** 
    /.section portfolio highlights with different versions of content && sections of portfolio page elements with different versions !!!!!!
*********************************************************************************************************************************************/


/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              04 - Shop Page
/* --------------------------------------------------------------------------------------------------------------------- */

/****** SIDEBAR WIDGETS *****/
.sidebar{
  position: relative;
  padding-top: 30px;
}
.sidebar:after{
  content: "";
  position: absolute;
  top: 106px;
  left: 15px;
  right: 15px;
  height: 104.4%;
  border: 2px solid #eaf0f3;
}

.widget{
  position: relative;
  padding: 18px 30px 8px;
  z-index: 2;
}
.widget:before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 2px;
  background-color:#eaf0f3; 
}
.widget h4{
  padding-bottom: 16px;
  margin-bottom: 10px;
  border-bottom: 2px solid #eaf0f3;
}

/** search widget **/
.widget_search{
  margin-bottom: 30px;
  padding: 0 !important;
}
.search-form{position: relative;}
.search-form input{
  width: 100%;
  height: 48px;
  border-radius: 0;
  border: 2px solid #eaf0f3;
  color: #333;
  padding-left: 20px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-size: 18px;
}
.search-form button{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #99cccc;
  background-color: transparent;
  border: none;
  font-size: 18px;
}

/** categories widget && tags categories **/
.cat-item, .cat-item a,
.tagcloud li, .tagcloud a{
  line-height: 30px;
  letter-spacing: 3px;
  font-size: 10px;
  color: #99cccc;
  text-transform: uppercase;
}
.cat-item span,
.tagcloud span{
  float: right;
  line-height: 30px;
  color: #ccc;
}
.cat-item a:hover, .tagcloud a:hover{color:  #333}

/** price-range filter widget **/
.widget_price_filter{padding-bottom: 20px;}
#price-range{
  position: relative;
  width: 100%;
  height: 2px;
  margin: 30px 0 20px;
  background-color: #eaf0f3;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 2px;
    background-color: #99cccc;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    display: block;
}
.ui-state-default, .ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #99cccc;
}
.ui-slider-horizontal .ui-slider-handle { top: -8px;}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    -ms-touch-action: none;
    touch-action: none;
}
.ui-slider .ui-slider-handle:focus{
  outline: none;
  box-shadow: none;
}

.widget_price_filter p{
  font-size: 10px;
  font-weight: bold;
  line-height: 30px;
  letter-spacing: 3px;
}
.widget_price_filter input[type='text']{
  float: right;
  text-align: right;
  border: none;
  letter-spacing: 3px;
  width: 50%;
}

.widget_price_filter button.btn{
  width: 100%;
  height: 48px;
  color: #fff;
  font-size: 18px;
  background-color: #99cccc;
  border: none;
  border-radius: 0;
  margin-top: 10px;
  text-transform: capitalize;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.widget_price_filter button.btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

/****** SHOP CONTENT *****/
.shop-intro{
  padding-top: 30px;
}
.shop-intro h6{
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 3px;
  line-height: 30px;
  margin-top: 10px;
}

/* sorting select */
/* Default custom select styles */
div.select_list {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  text-align: left;
  font-size: 18px;
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  background: #fff;
  color: #a5a5a5;
  z-index: 100;
  width: 100%;
  max-width: 270px;
  float: right;
  border: 2px solid #eaf0f3;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div.select_list:focus { outline: none; }
.select_list select { display: none; }
.select_list span {
  display: block;
  position: relative;
  cursor: pointer;
  padding: 15px 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Placeholder and selected option */
.list_elastic > span::after {
  font: normal normal normal 18px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.select_list > span::after,
.select_list .select_listed span::after {
  speak: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.select_list > span::after {
  content: "\f107";
  right: 15px;
}
.select_list.cs-active > span::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
div.cs-active { z-index: 200; }
.list_elastic > span {
  background-color: #fff;
  z-index: 100;
}

.list_elastic .cs-options {
  overflow: visible;
  background: transparent;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  border: 2px solid #eaf0f3;
}
.list_elastic.cs-active .cs-options {
  pointer-events: auto;
}
.list_elastic .cs-options > ul::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transform: scale3d(1,0,1);
  transform: scale3d(1,0,1);
  background: #fff;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.list_elastic.cs-active .cs-options > ul::before {
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
  -webkit-transition: none;
  transition: none;
  -webkit-animation: expand 0.6s ease-out;
    animation: expand 0.6s ease-out;
}
.list_elastic .cs-options ul li {
  opacity: 0;
  -webkit-transform: translate3d(0,-25px,0);
  transform: translate3d(0,-25px,0);
  -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
  transition: opacity 0.15s, transform 0.15s;
}
.list_elastic.cs-active .cs-options ul li {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
  -webkit-transition: none;
  transition: none;
  -webkit-animation: bounce 0.6s ease-out;
    animation: bounce 0.6s ease-out;
}
.list_elastic .cs-options span:hover,
.list_elastic .cs-options li.cs-focus span,
.list_elastic .cs-options .select_listed span { color: #333;}
.select_list .cs-options {
  position: absolute;
  overflow: hidden;
  width: 100%;
  background: #fff;
  visibility: hidden;
}
.select_list.cs-active .cs-options {visibility: visible;}
.select_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/** product cards **/
.shop-content ul{
  font-size: 0;
  margin: 0 -15px;
}
.shop-content li{
  margin: 0 10px;
  float: left;
}
.shop-content .product-card{
  border: 2px solid #eaf0f3;
  margin-top: 30px;
}

/* load more btn */
.load-more_btn a{
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
  font-size: 18px;
  padding: 14px 0 16px 0;
  background-color: #fff;
  color: #fff;
  border: none;
  border-radius: 0;
  margin: 30px 0;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.load-more_btn a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

/** shop page - shop highlights **/
.shop-page .shop-highlights{
  background-color: #cccc99;
  border-top: 2px solid #fff;
}
.shop-page .blog_stories{
  background-color: #99cccc;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              05 - Product Page
/* --------------------------------------------------------------------------------------------------------------------- */
/*** header ***/

.product_page_header{
  height: 100vh;
  background: rgba(27, 35, 38, 0.5);
}
.product_page_header:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/product_header.jpg') no-repeat;
  background-size: cover;
  background-attachment: fixed;
  z-index: -1;
  opacity: 0.5;
}
.product_page_header:before{
  content: "";
  position: absolute;
  top: 277px;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(51, 51, 51, 0.4);
}

.product-carousel{
  z-index: 4;
  padding: 30px;
  margin-top: 150px;
  max-height: 575px;
  background: #fff;
}

.product-carousel .owl-dots{
  position: relative;
  height: 15px;
  width: 100%;
  bottom: 30px;
  text-align: center;
  margin: 25px 0;
}
.product-carousel .owl-dot{
  width: 13px;
  height: 13px;
  border: 2px solid #99cccc;
  border-radius: 50%;
  margin: 0 3px;
  display: inline-block;
}
.product-carousel .owl-dot.active{background: #99cccc}

/* header_product_description */
.header_product_description{
  position: relative;
    margin-top: 235px;
    color: #fff;
    z-index: 2;
}
.breadcrumb, .breadcrumb a{
  position: relative;
  font-size: 10px;
  line-height: 24px;
  letter-spacing: 2px;
  color: #fff;
}
.breadcrumb li a:after{
  content: "\f105";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  margin-left: 10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.header_product_description h1{
  font-size: 48px;
  line-height: 14px;
  margin: 40px 0 45px 0;
}
.header_product_description p{
  padding-right: 50px;
  font-size: 18px;
  line-height: 30px;
  font-family:'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.header_product_description input[type="number"]{
  width: 85px;
  height: 48px;
  margin-top: 20px;
  margin-right: 30px;
  padding-left: 15px;
  color: #333;
  float: left;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.header_product_description button{
  position: relative;
  height: 48px;
  background: #99cccc;
  color: #fff;
  width: 210px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 0;
  border: none;
  float: left;
  margin-top: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.header_product_description button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

/*** product tabs ***/
.product-tabs{
  position: relative;
  display: inline-block;
}
.product_tabs{padding:30px 0 40px;}

.product_tabs .nav-tabs{ border-bottom: 2px solid #fff !important;}
.product_tabs .nav-tabs li{margin-bottom: -4px}
.product_tabs .nav-tabs a{
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
  color: #333 !important;
  background: #eaf0f3 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 28px 0;
  width: 370px;
  text-transform: capitalize;
}
.product_tabs .nav-tabs a i.fa{color: #cccc99 !important}

.product_tabs .nav-tabs li:nth-child(2) a{margin: 0 28px}
.product_tabs .nav-tabs li.active a{
  background-color: #fff !important;
  border: 2px solid #eaf0f3 !important;
  border-bottom-color: transparent !important;
}

.product_tabs .tab-content{
  border-width: 0 2px 2px 2px;
  border-style: solid;
  border-color: #eaf0f3;
  border-top-color: transparent;
  float: left;
  width: 99.8%;
  margin-bottom: 30px;
}
.product_tabs .tab-content>.active{
  float: left;
  padding: 30px 30px 28px;
  width: 100%;
}

#description-tab h4{
  margin: 30px 0 40px;
  font-weight: bold;
}
#description-tab p{
  font-size: 18px;
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
#description-tab p small{
  display: block;
  font-size: 14px;
  margin: 30px 0;
}

#review-tab .comment{
  border: 2px solid #eaf0f3;
  height: 100px;
  margin-bottom: 30px;
}
#review-tab .comment-author{
  display: inline-block;
  border-right: 2px solid #eaf0f3;
  width: 12.792%;
  max-width: 140px;
  line-height: 45px;
  padding: 28px 28px 10px;
  float: left;
}
#review-tab .comment-author h4{font-weight: bold;}
#review-tab .comment-author span.author-rating{color: #cccc99}
#review-tab .comment-right{
  width: 86.387%;
  display: inline-block;
}
#review-tab .comment-right p{
  font-size: 18px;
  line-height: 30px;
  padding: 18px 28px;
  font-family: 'Montserrat', sans-serif;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}
#review-tab h3{
  background-color: #eaf0f3;
  line-height: 60px;
  font-weight: bold;
  margin-bottom: 30px;
}

.review-form .form-group{ display: inline-block; }
.review-form input[type="text"],
.review-form input[type="email"]{
  width: 370px;
  max-width: 100%;
  height: 50px;
  border: 2px solid #eaf0f3;
  padding-left: 17px;
  margin-right: 30px;
  margin-bottom: 15px;
  color: #333;
  font-size: 18px;
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.review-form .form-group p{
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.review-form .form-group p i.fa{color: #cccc99}

.review-form textarea{
  width: 100%;
  resize: none;
  height: 60px;
  padding-left: 17px;
  padding-top: 7px;
  color: #333;
  border: 2px solid #eaf0f3;
  font-size: 18px;
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased; 
}
.review-form button{
  position: relative;
  display: inline-block;
  width: 100%;
  line-height: 60px;
  background: #99cccc;
  margin-top: 25px;
  font-size: 24px;
  font-weight: bold;
  border: none;
  color: #fff;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.review-form button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

#info-tab, #info-tab ul{
  padding: 0;
  font-size: 18px;
}
#info-tab li{
  line-height: 70px;
  padding: 0 30px;
}
#info-tab .info-name{ border-right: 2px solid #eaf0f3; }
#info-tab .info-product{
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased; 
}
#info-tab .info-name li{ 
  box-shadow: 0px 1px 0px 1px #eaf0f3; 
  font-weight: bold;
}

/*** highligts from the shop ***/
.product_page .shop-highlights{background-color: #cccc99}

/*** stories from the blog ***/
.product_page .blog_stories{
  background-color: #99cccc;
  border: none;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              06 - Blog Category Verions
/* --------------------------------------------------------------------------------------------------------------------- */
/******* Blog gategory inline version ********/

/*** header ***/
.blog_category_inline header, 
.blog_category_boxed header{ position: relative; }
.blog_category_inline header:after,
.blog_category_boxed header:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/blog1_header_bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.2;
}
.blog_category_inline header:before,
.blog_category_boxed header:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(21, 21, 21, 0.5);
  z-index: -1;
}

.blog_category_inline header .section-intro,
.blog_category_boxed header .section-intro{
  margin-top: 150px;
  margin-bottom: 32px;
  color: #fff;
}

/** blog intro variants **/
.standard_blog_intro{
  position: relative; 
  background: #fff; 
  padding: 50px 0 0;
}
.standard_blog_intro a{
  position: relative;
  color: #333;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  z-index: 2;
}
.standard_blog_intro a:before{
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: #333;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  z-index: -1;
}
.standard_blog_intro a:hover:before{
  left: 0;
  right: 0;
}

.standard_blog_intro h1{
  font-size: 48px;
  line-height: 30px;
  font-family:'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  margin-bottom: 20px;
}
.standard_blog_intro small{
  font-size: 10px;
  letter-spacing: 3px;
  margin-bottom: 40px;
  display: inline-block;
  font-weight: bold;
  color: #ccc;
}
.standard_blog_intro h4{
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  margin-bottom: 50px;
  color: #333;
}
.standard_blog_intro h4 span{text-transform: lowercase;}

.standard_blog_intro .container{ border-bottom: 2px solid #fff;}
.standard_blog_intro:last-of-type .container{ border-bottom: none;}

.standard_blog_intro.with_shadow_blog_intro{padding-bottom: 22px}
.standard_blog_intro.with_shadow_blog_intro .container{ border-bottom: none;}
.standard_blog_intro.with_shadow_blog_intro:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: -10px;
  background: rgba(51, 51, 51, 0.2);
  z-index: 1;
}
.standard_blog_intro.with_bg_blog_intro{
  background: transparent;
  border: 2px solid #ccc;
}
.standard_blog_intro.with_bg_blog_intro .container{ border-bottom: none;}
.standard_blog_intro.with_bg_blog_intro small{color: #a1a1a1;}
.standard_blog_intro.with_bg_blog_intro:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 60vh;
  top: 0;
  left: 0;
  background: url('../images/blog_intro_bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.2;
}
.standard_blog_intro.with_bg_blog_intro:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 60vh;
  top: 0;
  left: 0;
  background: rgba(26, 104, 124, 0.2);
}

/******* Blog gategory boxed version ********/
.blog_category_boxed .standard_blog_intro:first-of-type{margin-top: 30px;}
.blog_category_boxed .standard_blog_intro{
  border: 2px solid #ccc;
  margin-bottom: 30px;
  padding-left: 300px;
}
.blog_category_boxed .standard_blog_intro:after{
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  width: 240px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.blog_category_boxed .standard_blog_intro:first-of-type:after{background: url('../images/blog1.jpg');}
.blog_category_boxed .standard_blog_intro:nth-of-type(2):after{background: url('../images/blog2.jpg');}
.blog_category_boxed .standard_blog_intro:nth-of-type(3):after{background: url('../images/blog3.jpg');}
.blog_category_boxed .standard_blog_intro:last-of-type:after{background: url('../images/blog4.jpg');}

/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              07 - Blog Post Page Versions
/* --------------------------------------------------------------------------------------------------------------------- */
/***************** Blog Post 1 Variant ****************/
/*** header ***/
.blog_post header{ position: relative; }

.blog_post header:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/blog1_header_bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.2;
}

.blog_post header:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(21, 21, 21, 0.5);
  z-index: -1;
}

.blog_post header .section-intro{
  margin-top: 150px;
  margin-bottom: 32px;
  color: #fff;
}

/** blog post content **/
.blog-post-content{padding: 0}

.blog_post_title{
  line-height: 30px;
  padding-left: 25px;
  margin-top: 55px;
}
.blog-post-content .big_img{
  width: 100%;
  margin: 55px 0;
}
.comment-right p{
  line-height: 30px;
  padding-left: 25px;
}
.blog-post-content ol li{
  position: relative;
  padding-left: 30px;
}
.blog-post-content ol li:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 8px;
  height: 2px;
  background: #b5b5b5;
}
.blog-post-content .cite{
  margin: 50px 0;
  color: #fff;
}
.blog-post-content .cite p:first-of-type{
  background: #fff;
  line-height: 65px;
  border-bottom: 1px solid #fff;
  text-align: center;
}
.blog-post-content .cite p:last-of-type{
  background: #fff;
  display: inline-block;
  width: 100%;
  padding-right: 25px;
  font-size: 12px;
  line-height: 45px;
}

.blog-post-content ul{
  margin: 50px 0;
  float: left;
}
.blog-post-content ul li{
  float: left;
  padding: 1px;
}
.blog-post-content ul li a{position: relative; display: block;}
.blog-post-content ul li a:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 60px;
  background: url('../images/blog_post_hover.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.comments-area{
  position: relative;
  border: 2px solid #eaf0f3;
  margin-top: 50px;
  margin-bottom: 60px;
}
.comments-intro{
  position: relative;
  z-index: 2;
  background: #fff;
  float: left;
  display: inline-block;
  width: 100%;
  border-bottom: 2px solid #fff;
  padding: 28px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.comments-area .comment-list li:before{display: none;}
.comments-area .comment-left,
.comments-area .comment-right{ 
  display: inline-block;
  float: left;
}
.comments-area .comment{padding: 0;}
.comments-area .comment-left{
  width: 100px;
}
.comments-area .comment-left .comment-author{padding: 23px 22px;}
.comments-area .comment-left .comment-author h3{
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.comments-area .comment-left .comment-author a{color: #333}
.comments-area .comment-left .comment-meta{
  background: #333;
  text-align: center;
  padding: 7px 0;
}
.comments-area .comment-left .comment-meta a{
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  line-height: 18px;
}
.comments-area .comment-left .comment-meta time:first-of-type{
  font-size: 8px;
  letter-spacing: 2px;
}
.comments-area .comment-left .comment-meta time:last-of-type{
  font-size: 11px;
  letter-spacing: 3px;
}
.comments-area .comment-right{
  width: calc(100% - 100px);
  padding: 20px 60px 20px 5px;
  border-left: 2px solid #eaf0f3;
  border-bottom: 2px solid #eaf0f3;
  height: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-word;
}
.comment-respond{
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.comment-reply-title{
  padding: 27px 30px 28px 30px;
  clear: both;
  float: left;
  width: 100%;
  margin: 30px 0;
  border-top: 2px solid #eaf0f3;
  border-bottom: 2px solid #eaf0f3;
}

.comments-area .comment-form{
  clear: both;
  display: inline-block;
  font-size: 18px;
  padding: 0 30px;
}
.comments-area .comment-form p{
  display: inline-block;
  padding: 0;
  float: left;
  margin-bottom: 30px !important;
}
.comments-area .comment-form-author,
.comments-area .comment-form-email{ width: 50%; }
.comments-area .comment-form-author{padding-right: 15px !important;}
.comments-area .comment-form-email{padding-left: 15px !important;}
.comments-area .comment-form-comment{width: 100%}
.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"]{
  width: 100%;
  height: 48px;
  border: 2px solid #fff;
  float: left;
  padding-left: 20px;
  color: #333;
}
.comments-area .comment-form textarea{
  width: 100%;
  height: 160px;
  border: 2px solid #fff;
  resize: none;
  padding-left: 20px;
  padding-top: 10px;
  margin: 0;
}
.comments-area .comment-form .form-submit{width: 100%;}
.comments-area .comment-form input[type="submit"]{
    position: relative;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 0;
    color: #fff;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    -webkit-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}


/***************** Blog Post 2 Variant ****************/

.three-col {
  -moz-column-count: 3;
  -moz-column-gap: 60px;
  -webkit-column-count: 3;
  -webkit-column-gap: 60px;

  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
}
.blog-post-content.three-col{ 
  padding-top: 60px; 
  max-height: 2315px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}
.blog-post-content.three-col p{ 
  padding: 0; 
  line-height: 30px;
}
.blog-post-content.three-col .big_letter_intro:first-letter{
    font-size: 60px;
    float: left;
    height: 60px;
    margin-right: 10px;
    line-height: 60px;
    font-family:'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
.blog-post-content.three-col ul{
  position: relative;
  margin: 40px 0;
  z-index: 1;
}
.blog-post-content.three-col ul li{
  position: relative;
  padding-left: 15px;
}
.blog-post-content.three-col ul li:before{
  content: ".";
  position: absolute;
  left: 0;
  top: 2px;
}
.blog-post-content.three-col h1{
  font-weight: bold;
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  margin: 40px 0 0 0;
}
.blog-post-content.three-col .thumbnail{
  position: relative;
  border-radius: 0;
  padding: 0;
  margin: 39px 0 30px; 
  border: none;
  clear: both;
}
.blog-post-content.three-col .thumbnail img{
  height: 180px;
  overflow: hidden;
  width: 100%;
}
.blog-post-content.three-col .thumbnail span.icon{
  position: absolute;
  top: 40%;
  left: 44%;
  color: #fff;
  font-size: 48px;
  opacity: 0;
}
.blog-post-content.three-col .thumbnail:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.8);
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.blog-post-content.three-col .blog-post-video-content{
  position: relative;
  height: 180px;
  display: block;
  background: url('../images/work-2.jpg') no-repeat;
  background-size: cover;
  margin: 30px 0 50px;
}
.blog-post-content.three-col .blog-post-video-content:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.8);
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
.blog-post-content.three-col .blog-post-video-content span.icon{
  position: absolute;
  top: 40%;
  left: 44%;
  color: #fff;
  font-size: 48px;
  opacity: 0;
}

.blog-post-content.three-col blockquote{
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  border: none;
  font-size: 24px;
  padding: 0 5px 0 0;
  display: inline-block;
  margin: 45px 0;
}
.blog-post-content.three-col blockquote h3{
  line-height: 30px;
}
.blog-post-content.three-col blockquote footer{
  position: relative;
  display: inline-block;
  float: right;
  color: #333;
  background: transparent;
  border: none;
  margin-top: 30px;
}
.blog-post-content.three-col blockquote footer h3{
  display: inline-block;
  float: right;
}
.blog-post-content.three-col h1:last-of-type{margin-bottom: 45px;}

/***************** Blog Post 3 Variant ****************/

/* header */
.blog_post_3 header{
  height: 100vh;
  background: url('../images/blog_post_3.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; 
  margin-bottom: 30px;
}
.blog_post_3 header:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(55, 69, 69, .5);
}
.blog_post_3 header .section-intro{
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #fff;
}

/** content **/
.blog_post_3 .blog-post-content p{
  line-height: 30px;
  letter-spacing: 1px;
  padding: 0 100px;
  margin: 20px 0;
  display: inline-block;
}
.blog_post_3 .blog-post-content .big_img{margin: 25px 0}

.blog_post_3 .blog-post-content ol{
  padding-left: 90px;
  margin-top: 20px;
}
.blog_post_3 .blog-post-content ol p{
  margin: 0;
  padding: 0;
}
.blog_post_3 .blog-post-content .cite p:first-of-type{
  margin: 0 !important;
  padding: 0;
  display: block;
}
.blog_post_3 .blog-post-content .cite p:last-of-type{margin: 0 !important;}
.blog_post_3 .blog-post-content ul{margin: 20px 0}

.blog_post_3 .blog-post-content .comment-list{
  padding-left: 0;
  display: inline-block;
}
.blog_post_3 .blog-post-content .comment-right p{
  padding-left: 25px;
  overflow: hidden;
  height: 125px;
}
.blog_post_3 .comments-area .comment-form p{
  padding: 0;
  margin:0 0 30px 0 !important;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              08 - Portfolio Item Pages
/* --------------------------------------------------------------------------------------------------------------------- */

 /****************** Portfolio Item Page_1 ************************/

/* header */
.portfolio_item header { 
  position: relative; 
  height: 600px;
}
.portfolio_item header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.8);
    z-index: -1;
}
.portfolio_item header:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/portfolio_item_bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.2;
}
.portfolio_item header .section-intro {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.portfolio_item header .section-intro small{
  margin-bottom: 10px;
  color: #a0cfcf;
}
.portfolio_item header .section-intro ul small{color: #fff}
.portfolio_item header .section-intro ul li{
  position: relative;
  margin: 0 7px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.portfolio_item header .section-intro ul li:nth-child(2):after,
.portfolio_item header .section-intro ul li:nth-child(2):before{
  content: "";
  position: absolute;
  top: 11px;
  width: 2px;
  height: 2px;
  background: #fff;
}
.portfolio_item header .section-intro ul li:nth-child(2):after{right: -9px;}
.portfolio_item header .section-intro ul li:nth-child(2):before{left: -11px;}

/*** portfolio item wrapp ***/
.portfolio_item_wrap{ 
  position: relative;
  padding: 60px 0; 
  z-index: 9;
}
.portfolio_item_wrap .big_image_intro{
  height: 360px;
  width: 100%;
  background: url('../images/portfolio_item_big.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
}
.portfolio_item_wrap .three-col h1:last-of-type{margin-top: 0}

.portfolio_item_wrap .blog-post-video-content{
  position: relative;
  height: 360px;
  width: 100%;
  display: block;
  background: url('../images/slide-3.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 50px 0 0 0;
}
.portfolio_item_wrap .blog-post-video-content:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.8);
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
.portfolio_item_wrap .blog-post-video-content .icon{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 48px;
  color: #fff;
  opacity: 0;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
  -webkit-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
.portfolio_item_wrap .blog-post-video-content:hover .icon,
.portfolio_item_wrap .blog-post-video-content:hover:before{opacity: 1}

/****************** Portfolio Item Page_2 ************************/

/** header  **/
.portfolio-item-page_2 header{ 
  height: 100vh;
  border-bottom: 2px solid #fff;
}
.portfolio-item-page_2 header:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/slide-2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  opacity: .3;
}
.portfolio-item-page_2 header:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(27, 35, 38, .7);
}
.heading_row_mask{
  position: absolute;
  top: 277px;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(52, 52, 52, 0.3);
  z-index: 1;
}
.portfolio-item-page_2 .header_product_description p{padding-right: 190px}

/** portfolio item description sections **/
.portfolio_item_description{
  background: #fff;
  color: #fff;
  border-bottom: 2px solid #fff;
  padding: 50px 0;
}
.portfolio_item_description:last-of-type{border-bottom: none;}

.portfolio_item_description h1{
  line-height: 30px;
  margin-bottom: 50px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.portfolio_item_description p, .portfolio_item_description li span{ line-height: 30px;}
.portfolio_item_description ul{margin-top: 45px;}
.portfolio_item_description:last-of-type ul{ 
  margin-top: 5px;
  margin-bottom: 35px;
}
.portfolio_item_description:last-of-type ul li{
  position: relative;
  padding-left: 10px;
}
.portfolio_item_description:last-of-type ul li:after{
  content: "";
  position: absolute;
  top: 45%;
  left: 2px;
  width: 3px;
  height: 3px;
  background-color: #fff;
  border-radius: 50%;
}

/** portfolio item specification section **/
.item_specification{
  clear: both;
  background: #cccc99;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding-bottom: 50px;
}
.spec_list{color: #fff}
.spec_list ul{
  margin-top: 18px;
  margin-bottom: 35px;
}
.spec_list ul li{
  position: relative;
  padding-left: 10px;
}
.spec_list ul li:after{
  content: "";
  position: absolute;
  top: 45%;
  left: 2px;
  width: 3px;
  height: 3px;
  background-color: #fff;
  border-radius: 50%;
}
.spec_list ul h4, .spec_list span{
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

/** clients_testimonials/quotes **/
.portfolio-item-page_2 .quotes{
  background-color: #99cccc;
  color: #333;
  padding-bottom: 13px;
}

/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              09 - Page 404
/* --------------------------------------------------------------------------------------------------------------------- */
.page-404{ position: relative; }
.page-404:after{
  content: "";
  position: absolute;
  top: 277px;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(51, 51, 51, 0.6);
  z-index: -2;
}
.page-404 main, .page-404 main .container{
  position: relative;
  height: 100vh;
  color: #fff;
}
.page-404 main:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(27, 35, 38, 0.5);
  z-index: 1;
}
.page-404 main:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: -1;
  background: url('../images/page_404_bg.jpg');
}

.page-404 .page-intro{
  margin-top: 290px;
  color: #fff;
  z-index: 1;
}
.page-404 .page-intro h1{
  font-weight: bold;
  font-size: 48px;
  line-height: 39px;
  margin-bottom: 33px;
}
.page-404 .page-intro h4{
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  line-height: 30px;
}
.page-404 .page-intro a{
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 50px;
    color: #fff;
    font-size: 18px;
    line-height: 40px;
    background: #99cccc;
    border: none;
    border-radius: 0;
    margin-top: 20px;
    text-transform: capitalize;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.page-404 .page-intro a:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

/* --------------------------------------------------------------------------------------------------------------------- */
/*                                          10 - Coming soon Page
/* --------------------------------------------------------------------------------------------------------------------- */
.countdown-page{
  position: relative;
  height: 100vh;
  color: #fff;
  background: url('../images/countdown_bg.jpg');
  background-size: cover;
}
.countdown-page:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(52, 52, 52, 0.7);
}
.countdown-page .container{height: 100vh}
.countdown-page .logo a{
  position: relative;
  display: inline-block;
  width: 114px;
  height: 28px;
  margin-top: 30px;
  background: url('../images/archidojo_white_logo.png');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
}

.countdown-page .section-intro{color: #fff}
.countdown-page .countdown_wrapp{
  position: relative;
  top: calc(50% - 60px);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

#countdown_time h1{
  display: inline-block;
  font-size: 48px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  position: relative;
  line-height: 30px;
  margin: 0 40px;
}
#countdown_time h1:after{
  content: "";
  position: absolute;
  top: 45%;
  right: -40px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}
#countdown_time h1:last-child:after{display: none;}

#countdown_time h1 span{
  font-size: 10px;
  line-height: 30px;
  letter-spacing: 3px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  top: 45px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

/*** coming soon page video background ***/
.countdown-page.countdown_video_bg{background: none}
.fullscreen-bg_video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fullscreen-bg_video video{
  min-width: 100%;
  min-height: 100%;
}

/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              HOVER EFFECTS
/* --------------------------------------------------------------------------------------------------------------------- */

/** front page **/

.extended-wrapp .top-extended-socials a:hover{
    background: #99cccc;
    color: #fff;
}

.navbar-nav a:hover:before{ height: 2px; }

.slide .top-product-view:hover{
    color: #a6b3b5;
    background: #fff;
}
.product-card button:hover, .blog_stories .blog-card button:hover{ color: #fff;}
.product-card h4 a:hover{color: #333;}

.portfolio-intro button:hover{ color:  #374545; }

.product-card button:hover:before,
.portfolio-intro button:hover:before,
.work-description .btn:hover:before,
.full-width-video button:hover:before,
.contact-us-row a:hover:before,
.boxed_highlights .with_btn button:hover:before,
.price button:hover:before,
.contact-form .form-group button:hover:before,
.blog_stories .blog-card button:hover:before,
.subscribe .form-inline button:hover:before,
.widget_price_filter button.btn:hover:before,
.load-more_btn a:hover:before, .header_product_description button:hover:before,
.review-form button:hover:before, .page-404 .page-intro a:hover:before{
    webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.work-description .btn:hover,
.full-width-video button:hover,
.contact-us-row a:hover {color: #9eb6ae; }

.team-member-socials a:hover,
.footer-social-links ul li a:hover{
    background: #fff;
    color: #99cccc;
}

.boxed_highlights .with_btn button:hover, .load-more_btn a:hover,
.header_product_description button:hover{color: #fff !important}
.contact-form .form-group button:hover{color: #99cccc;}

/********** Arrow-Up Button ********/
a.arrow-up{
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  padding: 12px 0;
  border: 2px solid #333;
  border-radius: 50%;
  color: #333;
  font-size: 30px;
  z-index: 5;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out !important;
  -o-transition: opacity 0.3s ease-in-out !important;
  transition: opacity 0.3s ease-in-out !important;
}
a.arrow-up.visible{ 
  visibility: visible; 
  opacity: 1;
}
a.arrow-up i.fa{
  -webkit-transition: margin-top 0.2s ease-in-out;
  -o-transition: margin-top 0.2s ease-in-out;
  transition: margin-top 0.2s ease-in-out;
}
a.arrow-up:hover i.fa{margin-top: -10px}

/* blog post page */
.blog-post-content ul li a:hover:before{ opacity: 1; }
.comments-area .comment-form input[type="submit"]:hover{
  background: #333;
  color: #fff;
}

.blog-post-content.three-col .thumbnail:hover:before,
.blog-post-content.three-col .thumbnail:hover span.icon,
.blog-post-content.three-col .blog-post-video-content:hover:before,
.blog-post-content.three-col .blog-post-video-content:hover span.icon{opacity: 1}

/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              Overlay & Page content before & after load
/* --------------------------------------------------------------------------------------------------------------------- */
.overlay{
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background:#C5E7FC;
  z-index: 999;
  overflow: hidden;
  transition: all 0.3s ease-in-out
}
.overlay span{
  position: relative;
  display: block;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 48px;
  color:black;
} 
.overlay span:after{
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  z-index: 1;
  transition: width 0.3s ease-out;
  animation: loadIntro 1.5s;
  -webkit-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.overlay i{
  -webkit-animation: rotateIcon 1s linear infinite;
  -moz-animation: rotateIcon 1s linear infinite;
  animation: rotateIcon 1s linear infinite;
}

/* page content before load */
#page-content{
  position: relative;
  left: -199px;
  transition: all 0.3s linear;
  height: 100vh;
}
/* page content loaded */
#page-content.loaded{
  left: 0;
  height: 100%;
}

/* --------------------------------------------------------------------------------------------------------------------- */
/*                                              Animation & Keyframes   
/* --------------------------------------------------------------------------------------------------------------------- */

.animated {
  -webkit-animation-duration: 1s !important;
  animation-duration: 1s !important;
  -webkit-animation-fill-mode: both !important;
  animation-fill-mode: both !important;
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.8);
  }
  50% {
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.8);
  }
  100% {
    -webkit-transform: scale(1.3);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.8);
  }
  50% {
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.8);
  }
  100% {
    -moz-transform: scale(1.3);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.8);
  }
  50% {
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.8);
  }
  100% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0);
  }
}



@media screen and (max-width: 30em) {
  div.list_elastic { font-size: 1em; }
}


/** sorting select animation  'Shop Page' **/
@-webkit-keyframes expand { 
  0% { -webkit-transform: scale3d(1,0,1); }
  25% { -webkit-transform: scale3d(1,1.2,1); }
  50% { -webkit-transform: scale3d(1,0.85,1); }
  75% { -webkit-transform: scale3d(1,1.05,1) }
  100% { -webkit-transform: scale3d(1,1,1); }
}

@keyframes expand { 
  0% { -webkit-transform: scale3d(1,0,1); transform: scale3d(1,0,1); }
  25% { -webkit-transform: scale3d(1,1.2,1); transform: scale3d(1,1.2,1); }
  50% { -webkit-transform: scale3d(1,0.85,1); transform: scale3d(1,0.85,1); }
  75% { -webkit-transform: scale3d(1,1.05,1); transform: scale3d(1,1.05,1); }
  100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}


@-webkit-keyframes bounce { 
  0% { -webkit-transform: translate3d(0,-25px,0); opacity:0; }
  25% { -webkit-transform: translate3d(0,10px,0); }
  50% { -webkit-transform: translate3d(0,-6px,0); }
  75% { -webkit-transform: translate3d(0,2px,0); }
  100% { -webkit-transform: translate3d(0,0,0); opacity: 1; }
}

@keyframes bounce { 
  0% { -webkit-transform: translate3d(0,-25px,0); transform: translate3d(0,-25px,0); opacity:0; }
  25% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); }
  50% { -webkit-transform: translate3d(0,-6px,0); transform: translate3d(0,-6px,0); }
  75% { -webkit-transform: translate3d(0,2px,0); transform: translate3d(0,2px,0); }
  100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; }
}

@-keyframes loadIntro{
  0%{
    width: 0%
  }
  50%{
    width: 50%
  }
  100%{
    width: 100%;
  }
}
@keyframes loadIntro{
  0%{
    width: 0%
  }
  50%{
    width: 50%
  }
  100%{
    width: 100%;
  }
}

@-keyframes rotateIcon{
  100%{
    -webkit-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }

}
@keyframes rotateIcon{
  100%{
    -webkit-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

/**************************** PLACEHOLDER COLOR CHANGE ****************************/
::-webkit-input-placeholder {
   color: #333;
}

:-moz-placeholder { /* Firefox 18- */
   color: #333;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #333;  
}

:-ms-input-placeholder {  
   color: #333;  
}