/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */



/* ------------------------------------------------------------------------------

  Template Name: Go.arch
  Description: Go.arch  - Architecture | Interiors |  Real Estate Landing Page
  Author: Murren
  Author URI: http://themeforest.net/user/murren20
  Version: 1.0


/* 1.1 General */




@import url('/wp-content/themes/bb-theme-child/css/font-awesome.min.css');
@import url('/wp-content/themes/bb-theme-child/css/owl.carousel.css');
@import url('/wp-content/themes/bb-theme-child/css/owl.transitions.css');


::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #c5a47e;
}

::selection{
  background-color:#c5a47e;
  color:#fff;
}

-webkit-::selection{
    background-color:#c5a47e;
    color:#fff;
}

::-moz-selection{
    background-color:#c5a47e;
    color:#fff;
}


/* 1.6 Loader */

.loader{
  position: fixed;
  overflow: hidden;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  color:#fff;
  text-align: center;
}

.loader-brand{
  position: absolute;
  left:0;
  width: 100%;
  top:50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
       -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c5a47e;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

/**Mobile Logo**/

.headerlogomobile {
    display: none;
}

/* 1.7 Content styles */

.contentlayout{
  position: relative;
  /** overflow: hidden; **/
}

.page-lines{
  position: absolute;
  z-index: -1;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
}

.page-lines .col-line{
  padding: 0;
}

.page-lines .line{
  position: absolute;
  left: 0;
  width: 1px;
  height: 50000px;
  background-color:rgba(255,255,255,0.08);
}

.page-lines .col-line:last-child .line:last-child{
  left: auto;
  right: 0;
}

.section-header{
  position: relative;
}

.section-title{
  text-align: center;
  margin:0;
  margin-top: 40px;
}

.content-title {
    display: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10.8em;
  line-height: 1;
  color: #fff;
  text-align: left;
  width: 100%;
  top: -75px;
  opacity: 0.04;
  position: absolute;
  /**
  position: absolute;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); **/
}

.content-title-right{
  left:100%;
}

.section-content{
  margin-top: 0;
}



/*-------------------------------------------------------------------------------
  2. Header
-------------------------------------------------------------------------------*/


.header-inner .vertical-panel-content{
  bottom:auto;
  top:0;
}



/* 2.1 Brand */



.brand-panel{
  position: absolute;
  z-index: 4;
  left: 0;
  top:0;
  width: 39.47vmin;
  height: 40.7vmin;
  padding: 4.8vmin 2em 4.8vmin;
  background-color: #2b2b2b;
  text-align: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.brand {
  display: inline-block;
}

.brand-name {
  position: absolute;
  z-index: -1;
  bottom: -0.4em;
  right:-0.38em;
  opacity: 0.3;
}
/**
.slide-number{
  margin-top: 8vmin;
} **/

.slide-number .current-number{
  font-size: 6vmin;
  letter-spacing: 0.1em;
  line-height: 1;
}

.slide-number sup{
  display: inline-block;
  position: relative;
  top:-3px;
  font-size: 2vmin;
  letter-spacing: 0.1em;
  color: #5e5e5e;
  vertical-align: top;
  margin-left: 0.46em;
}

.slide-number sup .delimiter{
  display: inline-block;
  margin-right: 0.4em;
}



/* 2.2 Vertical Panel */

.content-container {
    position: relative !important;
    z-index: 850 !important;
}


.vertical-panel,
.vertical-panel-content{
  position: absolute;
  width: 11vw;
  left: 0;
  text-align: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.vertical-panel{
  z-index: 3;
  height: 100vh;
  background-color: #0a0a0a;
  border-right: 1px solid #d1d1d1;
}

.vertical-panel-content{
  z-index: 4;
  height: 100vh;
  top: 0vh;
}

.vertical-panel-info{
  margin-bottom: 3.5vmin;
  position: absolute;
  bottom: 5vh;
  left: 4.8vw;
}

.vertical-panel-info .line{
  height: 5vmin;
  width: 1px;
  margin:15px auto 0;
  background-color:#646464;
}

.vertical-panel-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 10px;
  line-height: 1;
  color: #fff;
  position: relative;
  left: -6px;
  margin:0 auto;
  width: 1px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
   -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

@media (max-height: 850px) {
  /**.project-category {
    display: none;
  }**/
  .owl-prev {
    color: white !important;
  }
}

@media (max-height: 500px) {
  .vertical-panel-title {
    display: none;
  }
}

.social-list{
  margin-bottom: 3.5vmin;
  text-align: center;
  padding: 0;
}

.social-list li{
  margin-top: 3.8vmin;
}

.social-list .fa{
  font-size: 2.4vmin;
  color: #606060;
}

.social-list .fa:hover{
  color:#c5a47e;
  text-decoration: none;
}
.topicon {
  margin-top: 20px;
  margin-bottom: 20px;

}

/*-------------------------------------------------------------------------------
  3. Main
-------------------------------------------------------------------------------*/

.main{
  position: relative;
  overflow: hidden;
  min-height: 420px;
}


/* 3.1 Slider TOP OF PAGE */

.rev_slider{
  color: #fff;
  min-height: 420px;
}

.rev_slider .btn{
  -webkit-transition: background-color .3s ease-out!important;
          transition: background-color .3s ease-out!important;
}

.tp-caption{
  padding: 0 20px;
  text-align: right;
}

.arrow-left,
.arrow-right{
  position: absolute;
  z-index: 4;
  bottom: 4vh;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.arrow-left{
  left: 22vmin;
}

.arrow-right{
  right: 15px;
}

.arrow-left:after,
.arrow-right:before{
  content:'';
  display: inline-block;
  vertical-align: middle;
  background-color: transparent;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

.arrow-left:after{
  content:'Prev';
}

.arrow-right:before{
  content:'Next';
}

.arrow-left:before,
.arrow-right:after{
  content:'';
  display: inline-block;
  vertical-align: middle;
  width:1.3em;
  height: 1em;
  opacity: 0.25;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.arrow-left:hover:before,
.arrow-right:hover:after{
  opacity: 1;
}

.arrow-left:before{
  background: url(img/img-icon/prev.png) 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-right: 0.82em;
}

.arrow-right:after{
  background: url(img/img-icon/next.png) 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-left: 0.72em;
}

.slide-title{
  font-size: 50px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.slide-subtitle{
  font-size: 18px;
  line-height: 1.7;
}

/* ------------------------------------------------------------------------------- */
/*  4.1 About
/* ------------------------------------------------------------------------------- */

.overlapcontent {
    position: relative !important;
    z-index: 500 !important;
    background: #0a0a0a;
}
.overlapimage {
    position: relative !important;
    z-index: 500  !important;
}
.overlaptop {
    position: relative !important;
    border-top: 1px solid #d1d1d1;
    z-index: 500 !important;
}
.overlapbottom {
    position: relative !important;
    border-bottom: 1px solid #d1d1d1;
    z-index: 500  !important;
}



/* ------------------------------------------------------------------------------- */
/*  5. Projects
/* ------------------------------------------------------------------------------- */

.project{
  padding: 0;
  overflow: hidden;
}

.project figure{
  position: relative;
}

.project figure img{
  display: block;
  width: 100%;
  -webkit-transition: all 8s linear;
  -o-transition: all 8s linear;
  transition: all 8s linear;
}

.project figure:after{
  content:'';
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background-color: #111;
  opacity: 0.7;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project.project-light figure:after{
  opacity: 0.4;
}

.project figcaption{
  position: absolute;
  z-index: 1;
  left: 0;
  top:0;
  right:0;
  bottom:0;
  margin: 3.2em 3.6em;
}

.project-title{
  position: relative;
  top:0;
  left:0;
  margin:0;
  font-weight: normal;
  font-size: 1.56em;
  line-height: 1.45;
  letter-spacing: 0.07em;
  color: #fff;
  text-transform: uppercase;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project-category{
  position: absolute;
  left: 0;
  bottom: 0;
  margin:0 0 -0.8em;
  font-weight: normal;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.4em;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project-zoom{
  position: absolute;
  left: 50%;
  top:50%;
  width: 9em;
  height: 9em;
  margin:-4.5em;
  border-radius: 50%;
  background-color: rgba(197,164,126,0.84);
  overflow: hidden;
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform:scale(0.5);
  -o-transform:scale(0.5);
  transform:scale(0.5);
  -webkit-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}

.project-zoom:after{
  content: '';
  position: absolute;
  left: 50%;
  top:50%;
  width: 2.625em;
  height:2.625em;
  background:url(img/img-icon/zoom.png) 0 0 no-repeat;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.project figure:hover:after{
  opacity: 0;
}

.project figure:hover img{
  -webkit-transform: scale(1);
  transform: scale(1);
}

.project figure:hover .project-title{
  top: 30px;
  opacity: 0;
}

.project figure:hover .project-category{
  opacity: 0;
  letter-spacing: 2em;
}

.project figure:hover .project-zoom{
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);
}




/* 5.1 Project Carousel */

.owl-prev,
.owl-next{
  position: absolute;
  top:50%;
  font-size:1em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0.7;
}

.owl-prev:hover,
.owl-next:hover{
  opacity: 1;
}

.owl-prev{
  left: 0.8em;
  padding-left: 35px;
  background:url(img/img-icon/prev.png) left 50% no-repeat;
  background-size: 1.3em 1em;
  color: rgba(255, 255, 255, 0) !important;
}

.owl-next{
  left: auto;
  right: 0.8em;
  padding-right: 35px;
  background:url(img/img-icon/next.png) right 50% no-repeat;
  background-size: 1.3em 1em;
}




/* ------------------------------------------------------------------------------- */
/*  12. Responsive styles
/* ------------------------------------------------------------------------------- */

/* 12.1 Min width 992px */
@media only screen and (max-width: 992px) {
  .vertical-panel {
    width: 11vw;
  }
  .vertical-panel-info {
    left: 4.6vw;
  }
}


/* 12.1 Min width 768px */
@media only screen and (max-width: 768px) {

  .vertical-panel {
    display: none;
  }
  .vertical-panel-content {
    display: none;
  }
  .section-content {
      margin-top: 0;
      position: fixed;
      bottom: 0px;
      width: 100vw;
      height: 70vh;
  }
  .projects-carousel {
    position: absolute;
  }
  figure {
    margin: 0 !important;
  }
  .project figure {
    bottom: 0;
  }
  .project-category {
    display: none;
  }
  .project figure img {
    display: block;
    overflow-x: hidden;
    height: 70vh;
    object-fit: cover;
    object-position: center;
    width: 100%;
    transition: all 0.2s linear;
  }
  .project figcaption {
    margin: 20px 20px;
  }

  /* Slider */
  .arrow-left{
    top: 43.5vmin;
    bottom: auto;
  }
  .arrow-right{
    left: 28vmin;
    right: auto;
    margin-left: 5em;
    top: 43.5vmin;
    bottom: auto;
  }

  /* Project Carousel */
  .owl-prev{
    left: 20px;
    color: rgba(255, 255, 255, 1) !important;
  }
  .owl-next{
    right: 20px;
    color: white;
  }
  .project figure:hover .project-title{
    top: 0 !important;
    opacity: 1 !important;
  }
  .project-title {
    top: 0 !important;
    opacity: 1 !important;
  }
  .project figure:hover:after {
    opacity: 0.7 !important;
  }
  .project.project-light figure:after{
    opacity: 0.7;
  }
}

  /** ZOOM **/
  .project-zoom {
    opacity: 1;
  }
  .project figure:hover .project-zoom {
    transform: scale(0.8);
  }


/* 12.4 Max height 480px  */
@media (max-height: 480px){

  /* Slider */
  .arrow-left{
    top: 43.5vmin;
    bottom: auto;
  }

  .arrow-right{
    left: 28vmin;
    right:auto;
    margin-left: 5em;
    top: 43.5vmin;
    bottom: auto;
  }
}