/* ========================================================================
   1. Luoi + reset   (thay bootstrap.min.css  122KB)
   ===================================================================== */
/* Mini grid + reset  -  thay cho bootstrap.min.css (122KB -> ~3KB).
   Chi giu dung nhung quy tac ma 4 trang nay dung that.
   Cac gia tri lay nguyen tu bootstrap 3 de bo cuc khong xe dich. */

/* --- reset (phan bootstrap ma theme dua vao) ------------------------------ */
html { font-family: sans-serif; font-size: 10px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
*, *::before, *::after { box-sizing: border-box; }

article, aside, figcaption, figure, footer, header, main, nav, section { display: block; }
figure { margin: 0; }
img { border: 0; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }
h1 { font-size: 36px; margin: .67em 0; }
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
p  { margin: 0 0 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; }
ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; }
blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; }

a { background-color: transparent; color: #337ab7; text-decoration: none; }
a:hover, a:focus { color: #23527c; text-decoration: underline; }
a:active, a:hover { outline: 0; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
button { overflow: visible; text-transform: none; -webkit-appearance: button; cursor: pointer; }
button[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; }

/* --- luoi ---------------------------------------------------------------- */
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
.container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
.row { margin-left: -15px; margin-right: -15px; }
.row::before, .row::after { content: " "; display: table; }
.row::after { clear: both; }

[class*="col-"] { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
.col-xs-4  { float: left; width: 33.33333333%; }
.col-xs-12 { float: left; width: 100%; }

.center-block { display: block; margin-left: auto; margin-right: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.visible-md, .visible-lg, .visible-sm { display: none !important; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.pull-right  { float: right; }
.clearfix::before, .clearfix::after { content: " "; display: table; }
.clearfix::after { clear: both; }

/* --- collapse + nut menu di dong (bootstrap) ------------------------------
   Thieu khoi nay thi menu di dong xo san ra va nut hamburger bien mat. */
.collapse { display: none; }
.collapse.in { display: block; }
.collapsing { position: relative; height: 0; overflow: hidden;
  transition-property: height, visibility; transition-duration: .35s; transition-timing-function: ease; }

.navbar-toggle { position: relative; float: right; margin-right: 15px;
  padding: 9px 10px; margin-top: 8px; margin-bottom: 8px;
  background-color: transparent; background-image: none;
  border: 1px solid transparent; border-radius: 4px; }
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
.navbar-collapse { overflow-x: visible; padding-right: 15px; padding-left: 15px;
  border-top: 1px solid transparent; -webkit-overflow-scrolling: touch; }

@media (min-width: 992px) {
  .navbar-toggle { display: none; }
  .navbar-collapse.collapse { display: block !important; height: auto !important;
    padding-bottom: 0; overflow: visible !important; }
  .navbar-collapse { width: auto; border-top: 0; box-shadow: none; }
}

.form-group  { margin-bottom: 15px; }
.form-control { display: block; width: 100%; background-image: none; }
/* line-height 1.42857143 la cua bootstrap. Thieu no thi nut thua ke
   line-height 1.65 cua body -> cao 23.1px thay vi 20px nhu ban goc. */
.btn { display: inline-block; margin-bottom: 0; text-align: center; vertical-align: middle;
       touch-action: manipulation; cursor: pointer; background-image: none;
       border: 1px solid transparent; white-space: nowrap;
       line-height: 1.42857143; }
.btn:focus, .btn:active:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }

@media (min-width: 768px) {
  .container   { width: 750px; }
  .col-sm-6    { float: left; width: 50%; }
  .col-sm-12   { float: left; width: 100%; }
  .visible-sm  { display: block !important; }
}
@media (min-width: 992px) {
  .container   { width: 970px; }
  .col-md-3    { float: left; width: 25%; }
  .col-md-4    { float: left; width: 33.33333333%; }
  .col-md-6    { float: left; width: 50%; }
  .col-md-8    { float: left; width: 66.66666667%; }
  .col-md-12   { float: left; width: 100%; }
  .col-md-offset-4 { margin-left: 33.33333333%; }   /* trang chi tiet du an */
  .visible-md  { display: block !important; }
  .visible-sm  { display: none !important; }
  .text-left-md   { text-align: left; }
  .text-center-md { text-align: center; }
  .text-right-md  { text-align: right; }
}
@media (min-width: 1200px) {
  .container   { width: 1170px; }
  .col-lg-3    { float: left; width: 25%; }
  .col-lg-4    { float: left; width: 33.33333333%; }
  .visible-lg  { display: block !important; }
}

/* ========================================================================
   2. Hieu ung       (trich 3 hieu ung tu animate.css  70KB)
   ===================================================================== */
/* 3 hieu ung duy nhat trang nay dung - trich tu animate.css (70KB -> 1KB). */
.animated{animation-duration:1s;animation-fill-mode:both}
.wow{visibility:hidden}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
.fadeInUp{animation-name:fadeInUp}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
.fadeInRight{animation-name:fadeInRight}
@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}
.slideInDown{animation-name:slideInDown}
@media (prefers-reduced-motion:reduce){
  .animated{animation:none!important}
  .wow{visibility:visible!important}
}

/* ========================================================================
   3. Icon SVG       (thay font-awesome  31KB css + 165KB font)
   ===================================================================== */
/* Icon SVG inline - thay font-awesome (31KB css + 165KB font). */
.fa{display:inline-block;line-height:1;vertical-align:-.125em}
.fa svg{width:1em;height:1em;fill:currentColor;display:block}

/* ========================================================================
   4. Bang chay du an (owl.carousel.css - giu nguyen)
   ===================================================================== */
/* 
 * 	Core Owl Carousel CSS File
 *	v1.3.3
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* display none until init */
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}
	
.owl-carousel .owl-item{
	float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
	cursor: pointer;
}
.owl-controls {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

/* ========================================================================
   5. Giao dien goarch (nguyen ban cua theme; mau #c5a47e -> #fab207)
   ===================================================================== */
/* ------------------------------------------------------------------------------

  Template Name: Go.arch 
  Description: Go.arch  - Architecture HTML Template
  Author: Murren
  Author URI: http://themeforest.net/user/murren20
  Version: 1.0
  
  1.  Global

      1.1 General
      1.2 Typography
      1.3 Fields
      1.4 Buttons
      1.5 Icons
      1.6 Loader
      1.7 Content styles

  2.  Header 

      2.1 Brand
      2.2 Vertical Panel
      2.3 Navbar Desctop
      2.4 Navbar Desctop Affix
      2.5 Navbar Mobile
      2.6 Navbar Mobile Affix
      

  3.  Main

      3.1 Slider

  4.  About

      4.1 Services
      4.1 Object map

  5.  Projects

      5.1 Project Carousel
      5.2 Magnific popup
      5.3 Project Details

  6.  Experience
  7.  Clients
  8   blog

      8.1 blog Details
      8.2 Widgets
      8.3 Widget Recent Post

  9.  Contacts  
  10. Footer
  11. Responsive styles

      11.1 Min width: 768px
      11.2 Min width 992px
      11.3 Min width 1200px 
      11.4 Max height 480px

    
    
/*-------------------------------------------------------------------------------
  1. Global
-------------------------------------------------------------------------------*/



/* 1.1 General */



html{
  font-size: 75%;
  -webkit-font-smoothing: antialiased;
}

body{
  font-family: 'montserratlight', sans-serif;
  font-size: 1em;
  line-height: 1.65;
  color: rgba(255,255,255,0.6);
  background-color: #272727;
}

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

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

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

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

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



/* 1.2 Typography */



@font-face {
  font-family: 'montserratlight';
  src: url('../fonts/montserrat/Montserrat-Light.ttf');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'montserratsemibold';
  src: url('../fonts/montserrat/Montserrat-SemiBold.ttf');
  font-weight: normal;
  font-style: normal;

}

h1,
.h1,
h2,
.h2,
h3,
.h3{
  margin-top:25px;
  margin-bottom:15px;
}

h1,
.h1{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 8vmin;
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

h2,
.h2{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 2.1875em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

h3,
.h3{
  font-family: 'montserratsemibold';
  font-size: 1.875em;
  line-height: 1.1;
  font-weight: normal;
  color:#fff;
}

h4,
.h4{
  font-family: 'montserratsemibold';
  font-size: 1.125em;
  line-height: 1.35;
  font-weight: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:#fff;
}

h5,
.h5{
  font-family: 'montserratsemibold';
  font-size: 1em;
  line-height: 1.2;
  font-weight: normal;
  color:#fff;
}

h6,
.h6{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 0.78em;
  font-weight: normal;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a,
.h5 a,
.h6 a{
  color:inherit;
}

h1 a:hover,
.h1 a:hover,
h2 a:hover,
.h2 a:hover,
h3 a:hover,
.h3 a:hover,
h4 a:hover,
.h4 a:hover,
.h5 a:hover,
.h6 a:hover{
  text-decoration: none;
}

p{
  margin-bottom: 1.6em;
}

b, strong,  label, th, caption{
  font-family: 'montserratsemibold';
  font-weight:normal;
}

ul{
  list-style: none;
  padding-left: 0;
}

a {
  color:#fab207;
  -webkit-transition: color .3s ease-out;
  -o-transition: color .3s ease-out;
  transition: color .3s ease-out;
}

a:hover,
a:focus {
  color:#fab207;
  outline: none;
}

a:focus{
  text-decoration: none;
}

abbr{
  border-bottom-color:inherit;
}

blockquote{
  border-left-color:rgba(255,255,255,0.08);
  font-size:1em;
}

blockquote cite{
  display:block;
  text-align:right;
  margin-top:5px;
  font-size:0.85em;
  color:#fff;
}

pre{
  background-color:rgba(255,255,255,0.08);
  color:#fff;
  border:0;
  white-space:pre-wrap;
}

code{
  background-color:rgba(255,255,255,0.08);
  color:#ff7d7d;
}

table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
}

table > tbody > tr:nth-of-type(odd){
   background-color:rgba(255,255,255,0.08);
}


table > caption + thead > tr:first-child > th,
table > colgroup + thead > tr:first-child > th,
table > thead:first-child > tr:first-child > th,
table > caption + thead > tr:first-child > td,
table > colgroup + thead > tr:first-child > td,
table > thead:first-child > tr:first-child > td {
  border-top: 0;
}



/* 1.3 Fields */



input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="phone"],
input[type="tel"],
textarea,
select{
  display:inline-block;
  width:100%;
  font-size: 1em;
  line-height: 1.42857143;
  padding: 6px 12px;
  height: 3.625em;
  border-radius: 0.75em;
  padding-left: 22px;
  color: #fff;
  background-color: #323232;
  border:1px solid #323232;
  -webkit-box-shadow:none;
  box-shadow:none;
  -webkit-appearance: none;
  -webkit-transition: all .15s;
  -o-transition: all .15s;
  transition: all .15s;
}

textarea{
  height: 7.9em;
  padding-top:1.1em;
  resize:none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="phone"]:focus,
input[type="tel"]:focus,
textarea:focus, 
select:focus{
  border-color:#fab207;
  outline: 0;
  -webkit-box-shadow:none;
  box-shadow:none;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(197,164,126,.075, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(197,164,126,.075, 0.6);
}

input::-moz-placeholder {
  color: #959999;
  opacity: 1;
}

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

input::-webkit-input-placeholder {
  color: #959999;
}

input.error{
  border-color:#fab207;
}

textarea::-moz-placeholder{
  color:#959999;
  opacity:1;
}

textarea:-ms-input-placeholder{
  color:#959999;
}

textarea::-webkit-input-placeholder{
  color:#959999;
}

.form-group{
  margin-bottom: 10px;
}

.wobble-error{
  -webkit-animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
  animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
}

label.error{
  display: none!important;
}



/* 1.4 Buttons */



.btn,
[type="submit"]{
  font-family: 'montserratsemibold';
  font-weight:normal;
  position: relative;
  display: inline-block;
  border:0.2em solid #fab207;
  border-radius: 30px;
  padding:1.1em 2.2em 1.05em;
  font-size: 0.875em;
  color:#fff;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  background-color: #fab207;
  border:0;
  -webkit-transition: all .3s ease-out!important;
  transition: all .3s ease-out!important;
}

.btn:hover,
.btn:focus,
[type="submit"]:hover,
[type="submit"]:focus{
  color: #fff;
  background-color: #323232;
  -webkit-box-shadow:none;
  box-shadow: none;
  outline: none!important;
}

.btn .icon-next{
  position: relative;
  top:-0.1em;
  margin-left: 0.6em;
  vertical-align: middle;
}

.btn-gray{
  background-color: #323232;
  border-color: #323232;
}

.btn-gray:hover{

  background-color: #fab207;
}

.btn-shadow-1{
  box-shadow:0 15px 34px rgba(0,0,0,0.18);
}

.btn-shadow-2{
  box-shadow:0 15px 34px rgba(0,0,0,0.18);
}



/* 1.5 Icons */



.icon-next{
  display: inline-block;
  width:0.94em;
  height: 0.75em;
  background:none 0 0 no-repeat;
  background-size:0.94em 0.75em;
}



/* 1.6 Loader */



.loader{
  position: fixed;
  overflow: hidden;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:#272727;
  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: #fab207;
  -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;
      }
}



/* 1.7 Content styles */



.layout{
  position: relative;
  overflow: hidden;
}

.text-primary{
  color:#fab207;
}

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

.row-base{
  margin-top: -3em;
}

.col-base{
  margin-top: 3em;
}

.section{
  position: relative;
  margin-top: 7.1em;
  margin-bottom: 7.1em;
}

.section-header{
  position: relative;
}

.section-title{
  text-align: center;
  margin:0;
  margin-left: 0.32em;
}

.fade-title-left,
.fade-title-right{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10.8em;
  line-height: 1;
  color: #fff;
  position: absolute;
  left: 0;
  top:0.03em;
  opacity: 0.03;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

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

.section-content{
  margin-top: 7.1em;
}



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



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



/* 2.1 Brand */



.brand-panel{
  position: absolute;
  z-index: 4;
  left: 0;
  top:0;
  width: 39.6vmin;
  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;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:4vmin;
  line-height: 1;
  color: #fff;
}

.brand:hover,
.brand:focus{
  color: #fff;
  text-decoration: none;
}

.brand-name{
  position: absolute;
  z-index: -1;
  bottom: -0.4em;
  right:-0.38em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 8.75em;
  line-height: 1;
  opacity: 0.04;
  color: #fff;
}

.slide-number{
  font-family: 'Oswald', sans-serif;
  margin-top: 8vmin;
}

.slide-number .current-number{
  font-size: 8vmin;
  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;
}

.header-phone{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 0.81em;
  letter-spacing: 0.32em;
  position: absolute;
  z-index: 3;
  color: #fff;
  left: 47vmin;
  top:5.9vmin;
}

@media (max-width: 480px){
  .header-phone{
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1200px){
  .header-phone{
    display: none;
  }
}



/* 2.2 Vertical Panel */



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

.vertical-panel{
  z-index: 3;
  height: 10000px;
  background-color: #2b2b2b;
}

.vertical-panel-content{
  z-index: 4;
}

.vertical-panel-info{
  margin-bottom: 3.5vmin;
}

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

.vertical-panel-title{
  font-family: 'montserratsemibold';
  font-weight:normal;
  font-size: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1em;
  color: #fff;
  position: relative;
  left: 1px;
  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){
  .vertical-panel-title{
    display: none;
  }
}

.social-list{
  margin-bottom: 3.5vmin;
}

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

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

.social-list .fa:hover{
  color:#fab207;
  text-decoration: none;
}



/* 2.3 Navbar Desctop */



.navbar-desctop{
  display: none;
  position: absolute;
  z-index: 2;
  top:0;
  left:0;
  width: 100%;
  padding:5.9vmin 0 0;
}

.navbar-desctop .brand{
  display: none;
  float:left;
  position: relative;
  top:-0.22em;
  font-size: 1.6em;
}

.navbar-desctop-menu{
  float: right;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 0.81em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.navbar-desctop-menu li{
  position: relative;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}

.navbar-desctop-menu li a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.navbar-desctop-menu li a:hover,
.navbar-desctop-menu .active > a{
  color:  #fab207;
}

.navbar-desctop-menu  > li{
  float: left;
  margin-left: 5.1em;
}

.navbar-desctop-menu > li > a{
  color: #fff;
  background-color: transparent;
  margin-bottom: 1.5em;
}

.navbar-desctop-menu li ul{
  position: absolute;
  z-index: 10;
  left: 100%;
  top:60%;
  visibility: hidden;
  min-width: 210px;
  opacity: 0;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  background:rgba(50, 50, 50, 0.95);
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.navbar-desctop-menu > li > ul{
  left: -20px;
  margin-top: 0;
}

.navbar-desctop-menu li:hover > ul{
  top:0;
  visibility: visible;
  opacity: 1;
}

.navbar-desctop-menu > li:hover > ul{
  top:100%;
}

.navbar-desctop-menu li li{
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.navbar-desctop-menu li li:last-child{
  border-bottom: 0;
}

.navbar-desctop-menu li li a{
  color: #fff;
  padding: 12px 20px 10px;
}



/* 2.4 Navbar Desctop Affix */



.navbar-desctop.affix{
  position: fixed;
  z-index: 5;
  top:0;
  background-color:rgba(50, 50, 50, 0.95);
  padding:1.3em 0 0;
  box-shadow: 0 0 35px rgba(0,0,0,0.1);
}

.navbar-desctop.affix.affix-top{
  padding-top:2.2em;
}

.navbar-desctop.affix .brand{
  display: block;
}

.navbar-desctop.affix .navbar-desctop-menu li a{
  color: #fff;
}

.navbar-desctop.affix .navbar-desctop-menu li > a:hover,
.navbar-desctop.affix .navbar-desctop-menu .active > a{
  color:#fab207;
}



/* 2.5 Navbar Mobile */



.navbar-mobile{
  position: absolute;
  z-index: 2;
  left: 0;
  top:0;
  width: 100%;
  padding:6vmin 0;
}

.navbar-mobile .brand{
  display: none;
  margin-left: 15px;
  font-size: 1.6em;
}

.navbar-collapse{
  border:0;
  background-color: rgba(50, 50, 50, 0.95);
  -webkit-box-shadow:none;
  box-shadow:none;
}

@media (max-height: 320px ){
  .navbar-collapse{
    max-height: 240px;
  }
}

.navbar-toggle{
  padding: 0;
  margin-top:0;
  margin-bottom: 0;
  border-radius: 0;
  border:0;
}

.navbar-toggle .icon-bar{
  background-color:#fff;
  height: 2px;
  width: 30px;
}

.navbar-toggle .icon-bar + .icon-bar{
  margin-top:5px;
}

.navbar-toggle.collapsed .icon-bar{
  background-color: #fff;
}

.navbar-nav-mobile{
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.9em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-top: 1.2em;
  margin-bottom: 0;
}

.navbar-nav-mobile li{
  position: relative;
  border-top:1px solid rgba(255,255,255,0.1);
}

.navbar-nav-mobile li a{
  display: block;
  padding: 1em 1em;
  color: #fff;
  text-decoration: none;
}

.navbar-nav-mobile > .current > a{
  color: #fab207;
}

.navbar-nav-mobile li a .fa-angle-down{
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.navbar-nav-mobile > .current > a .fa-angle-down{
  top:-0.2em;
  left:-0.3em;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.navbar-nav-mobile > .active > a,
.navbar-nav-mobile > .active > a:hover{
  background-color: #fab207;
  color: #fff;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.navbar-nav-mobile ul{
  display: none;
}

.navbar-nav-mobile li a:hover,
.navbar-nav-mobile li .active > a{
  color: #fab207;
}



/* 2.6 Navbar Mobile Affix */



.navbar-mobile.affix{
  position: fixed;
  z-index: 5;
  background-color:rgba(50, 50, 50, 0.95);
  box-shadow: 0 0 35px rgba(0,0,0,0.1);
  padding: 1.2em 0;
}

.navbar-mobile.affix .brand{
  display: inline-block;
}

.navbar-mobile.affix .navbar-toggle .icon-bar{
  background-color:#fab207;
}



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



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

.main-inner{
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 33.7vmin 0 33.7vmin;
}


.main-inner .page-lines{
  z-index: 1;
}

.main-inner:after{
  content:'';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top:0;
  background: -webkit-linear-gradient(bottom,  rgba(39,39,39,1) 0%,rgba(39,39,39,0.95) 26%,rgba(39,39,39,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0.95) 26%,rgba(39,39,39,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.main-projects,
.main-contacts{
  padding: 34.2vmin 0 34vmin;
}

.main-project{
  padding: 33.7vmin 0 11vmin;
  background-size: cover;
  background-position: center 0;
}

.main-header{
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: right;
  padding-left: 38.5vmin;
}

.main-header h1{
  font-size:8vmin;
  margin:0;
  margin-right: -0.32em;
}



/* 3.1 Slider */



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

.rev_slider .btn{
   font-size: 0.875em!important;
  -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-family: 'Oswald', sans-serif;
  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: none 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-right: 0.82em;
}

.arrow-right:after{
  background: none 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-left: 0.72em;
}

.slide-title{
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

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



/* ------------------------------------------------------------------------------- */
/*  4. About
/* ------------------------------------------------------------------------------- */



.bg-about{
  background: none 50% 0 no-repeat;
  background-size: cover;
}

.entry-title{
  font-size: 3.6em;
  margin:0 0 1em;
}

.entry-text{
  font-size: 1.5em;
  line-height: 1.6;
}

.about .fade-title-left{
  top:1em;
}

.col-about-title{
  margin-top: 0;
  margin-bottom:1.1em;
}

.col-about-info p:last-child{
  margin-bottom: 0;
}

.col-about-img{
  position: relative;
}

.col-about-img img{
  display: block;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}



/* 4.1 Services */



.row-services{
  margin-left: -4.1em;
  margin-right: -4.1em;
}

.col-service{
  padding: 0 4.1em;
}

.service-item{
  margin-bottom:2em;
}

.service-item:last-child{
  margin-bottom: 0;
}

.service-item h4{
  margin-top: 0.8em;
  margin-bottom: 1.1em;
}

.services .service-item h4{
  margin-top: 1.25em;
}

.service-item p:last-child{
  margin-bottom: 0;
}


/* 4.2 Object Map */



.objects{
  position: relative;
}

.object-label{
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #e5bf93;
  box-shadow:0  0  70px 8px rgba(197,164,126,0.75);
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.object-label:hover{
  box-shadow:none;
}

.popover.top{
  margin-top: -20px;
}

.object-info{
  position: absolute;
  display: none;
  z-index: 1;
  left: 50%;
  bottom: 40px;
  width: 12.4em;
  margin-left: -6.2em;
  padding: 1.1em 1.3em 3em;
  border:0;
  background-color: rgba(0,0,0,0.3);
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow:none;
}

.object-info.in{
  display: block;
}

.object-info:before{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top: 14px solid rgba(0,0,0,0.3);
}

.object-title{
  font-size: 1em;
  font-family: 'montserratsemibold';
  font-weight: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:#fab207;
  padding: 0 0 1em;
  border-bottom:1px solid rgba(249,249,249,0.2);
  margin: 0 0 .5em;
}

.object-content{
  font-family: 'montserratlight', sans-serif;
  font-size: 0.75em;
  line-height: 2.6;
  color: #fff;
  padding: 0;
}

.popover.top>.arrow{
  border-top-color: transparent;
}

.popover.top>.arrow:after{
  border-top-color:rgba(0,0,0,0.6);
}




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



.bg-projects{
  position: relative;
  background:none 50% 0 no-repeat;
  background-size: cover;
}

.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-family: 'Oswald', sans-serif;
  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-family: 'Oswald', sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.8em;
  -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:none 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.4);
  transform: scale(1.4);
}

.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 Carousel */



.owl-prev,
.owl-next{
  position: absolute;
  top:50%;
  font-family: 'Oswald', sans-serif;
  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:none left 50% no-repeat;
  background-size: 1.3em 1em;

}

.owl-next{
  left: auto;
  right: 0.8em;
  padding-right: 35px;
  background:none right 50% no-repeat;
  background-size: 1.3em 1em;
}



/* 5.2 Magnific popup */



.mfp-figure{
  box-shadow: none;
}

.mfp-iframe-scaler{
  overflow: visible;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close{
  padding: 0;
  margin-top: -10px;
  font-family: inherit;
  font-size: 40px;
  font-weight: 300;
  line-height: 0;
}

img.mfp-img{
  min-height: 460px;
}


.mfp-title{
  padding-right: 40px;
  font-size:1.2em;
  line-height: 1.2;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
}

.mfp-counter{
  top:5px;
}

.mfp-bg{
  background-color: #141414;
}

.mfp-arrow-left:before, .mfp-arrow-left .mfp-b{
  display: none;
}

.mfp-arrow-right:before, .mfp-arrow-right .mfp-b{
  display: none;
}

.mfp-wrap .mfp-content {
  -webkit-perspective: 1300px;
  perspective: 1300px
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform:scale(0) rotateY(60deg);
  -o-transform:scale(0) rotateY(60deg);
  transform:scale(0) rotateY(60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  -webkit-transform: rotateY(-60deg);
  -ms-transform: rotateY(-60deg);
  -o-transform: rotateY(-60deg);
  transform: rotateY(-60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.mfp-wrap.mfp-ready .mfp-figure,
.mfp-wrap.mfp-ready .mfp-iframe-scaler {
  opacity: 1;
  -webkit-transform:rotateX(0);
  -ms-transform:rotateX(0);
  -o-transform:rotateX(0);
  transform:rotateX(0);
}

.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-wrap.mfp-removing .mfp-figure ,
.mfp-wrap.mfp-removing .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform: rotateX(-60deg);
  -ms-transform: rotateX(-60deg);
  -o-transform: rotateX(-60deg);
  transform: rotateX(-60deg);

}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur
.mfp-image-holder .mfp-close{
  cursor:none, zoom-out;
}

.mfp-removing.mfp-bg {
  opacity: 0;
}



/* 5.3 Project Details */



.project-title-info{
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 2vmin;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 2.2em;
  margin-left: -1.8em;
}

.project-title-info .project-info-item{
  display: inline-block;
  margin-left: 1.8em;
}

.project-details-item{
  position: relative;
}

.project-details-img{
  position: relative;
  padding: 0;
}

.project-details-info{
  background-color: #fab207;
  padding: 4.8em 3.1em 4.8em;
  color:#fff;
}

.project-details-title{
  position: relative;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 1.9em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.7em;
}

.project-details-title:before{
  content: '';
  position: absolute;
  bottom: -0.35em;
  width: 10em;
  border-top: 1px solid #ededed;
  left: -4.4em;
  width: 5.5em;
}

.project-details-descr{
  font-size: 1.1em;
  line-height: 1.62;
}

.project-details-descr p:last-child{
  margin-bottom: 0;
}

.project-details-item:nth-child(even) .project-details-info{
  right:0;
  left: auto;
  top:13%;
  background-color: #212121;
}



/* ------------------------------------------------------------------------------- */
/*  6. Experience
/* ------------------------------------------------------------------------------- */



.experience{
  text-align: center;
}

.text-parallax {
  background: no-repeat 0 0;
  display: inline-block;
}

.text-parallax-content{
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 21.8em;
  line-height: 1;
  overflow: hidden;
  margin-bottom: 0;
  background: #272727;
  color:#fff;
  mix-blend-mode: darken;
  -ms-mix-blend-mode:darken;
}

.experience-info{
  position: relative;
  top: -0.75em;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5625em;
  line-height: 1.45;
  letter-spacing: 0.06em;
  display: inline-block;
  text-align: left;
  margin:0 0 0 0.5em;
}



/* ------------------------------------------------------------------------------- */
/*  7. Clients
/* ------------------------------------------------------------------------------- */



.clients{
  text-align: center;
}

.clients-list{
  margin:-3.8em -1.95em 0;
}

.clients-list .client{
  display: inline-block;
  vertical-align: middle;
  padding: 3.8em 1.95em 0;
  margin:0;
}

.clients-list .client img{
  opacity: 0.3;
  display: block;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.clients-list .client a:hover img{
  opacity: 1;
}



/* ------------------------------------------------------------------------------- */
/*  8. Blog
/* ------------------------------------------------------------------------------- */



.bg-blog{
  background: none 50% 0 no-repeat;
  background-size: cover;
}

.blog_item{
  position: relative;
  margin-bottom: 3em;
  margin-right: 1px;
  background-color: #373737;
  box-shadow:0 1px 15px rgba(0,0,0,0.08);
}

.blog_item:last-child{
  margin-bottom: 0;
}

.blog-thumbnail{
  position: static;
}

.blog-thumbnail-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 5px;
  padding: 0;
  border-radius: 0.25em 0 0 0.25em;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 50%;
}

.blog-thumbnail-img img{
  border-radius: 0.25em 0.25em 0 0;
}

.blog-info{
  padding: 3.3em 3em;
}

.blog-info .blog-tags a{
  background-color: #434343;
}

.blog-tags{
  font-family: 'montserratsemibold';
  margin-top:-0.8em;
}


.blog-tags-bottom{
	margin-top:3.8em;
}

.blog-tags a{
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.77em 1.1em 0.77em;
  border-radius: 2em;
  background-color: #333333;
  text-transform: uppercase;
  color:#6f6f6f;
  margin-top: 0.8em;
  margin:0.8em 0.7em 0 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.blog-tags a:hover{
  background-color:#fab207;
  text-decoration: none;
  color: #fff;
}

.blog-title{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.333;
  margin: 1.8em 0 0.8em;
}

.blog-meta{
  font-size: 0.88em;
  color:#b4b4b4;
  overflow: hidden;
}

.blog-meta .author{
  color: #b4b4b4;
  float: left;
}

.blog-meta .author a{
  font-family: 'montserratsemibold';
  color:#b4b4b4;
}

.blog-meta .author a:hover{
  text-decoration: none;
  color:#fab207;
}

.blog-meta .time{
  float: right;
  color:#b4b4b4;
}

.blog-info .blog-meta{
  border-top:1px solid #474747;
  margin-top: 1.7em;
  padding-top: 1.7em;
}

.read-more{
  display: inline-block;
  font-family: 'montserratsemibold';
  font-size: 0.88em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.read-more{
  padding-right: 2em;
  background:none right 50% no-repeat;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.read-more:hover{
  text-decoration: none;
  background-position: 95% 50%;
}

.blog-info .read-more{
  margin-top: 2.8em;
}



/* 8.1 Blog Details */



.blog-details{
  margin-bottom:8.3em;
}

.col-secondary{
  margin-top: 7.1em;
}

.post-header{
  margin-bottom: 5em;
}

.post-header h3{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 2.2em;
  line-height: 1.43;
  margin:0 0 0 0;
}

.post-header .blog-meta{
  margin-top: 2.45em;
}

.post-thumbnail{
  margin-bottom: 2.5em;
}

.post-thumbnail img{
  width: 100%;
  border-radius: 0.25em;
}



/* 8.2 Widgets */



.widget{
  margin-bottom: 3.65em;
}

.widget > ul{
	margin-bottom:0;
}

.widget input[type="text"],
.widget input[type="password"],
.widget select{
	width:100%;
}

.widget-title{
  font-family: 'montserratsemibold';
  font-weight: normal;
  font-size: 1.3em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 2.25em 0;
}



/* 8.3 Widget Search */


.search-form{
	position:relative;
}

.search-form button,
.search-form button:hover{
  background:none;
  padding:none;
  padding:0;
}

.search-form button{
  position: absolute;
  right: 20px;
  top: 13px;
  font-size: 18px;
  padding:0;
}
.search-form button:hover{
  color:#fab207
}



/* 8.4 Widget Recent Post */



.recent-post{
  margin-bottom: 1.7em;
  overflow: hidden;
}

.recent-post:last-child{
  margin-bottom: 0;
}

.recent-post-thumbnail{
  width: 9.32em;
  float: left;
}

.recent-post-thumbnail img{
  border-radius: 0.25em;
  max-width: 100%;
}

.recent-post-body{
  padding-left: 11.2em;
}

.recent-post-title{
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  margin:0;
  position: relative;
}

.recent-post-time{
  font-size: 0.88em;
  color:#b4b4b4;
  margin-top: 0.9em;
}



/* 8.5 Widget Archive */



.widget_archive li{
	padding:10px 0;
	font-family:'Oswald', sans-serif;
	font-weight:300;
	color:#686868;
	text-align:right;
	font-size:1.2em;
	overflow:hidden;
}

.widget_archive li a{
	float:left;
	color:#fff;
}

.widget_archive li a:hover{
	color:#fab207;
	text-decoration:none;
}

.widget_archive > ul > li{
	padding-top:0;
	border-top:1px solid rgba(255,255,255,0.08);
}

.widget_archive > ul > li:first-child{
	border-top:0;
}

.widget_archive ul ul{
	clear:left;
}

.widget_archive ul ul{
	margin-left:20px;
}

.widget_archive li li{
	font-size:0.9em;
}



/* 8.6 Widget Categories */



.widget_categories li{
	padding:10px 0;
	font-family:'Oswald', sans-serif;
	font-weight:300;
	color:#686868;
	text-align:right;
	font-size:1.2em;
	overflow:hidden;
}

.widget_categories li a{
	float:left;
	color:#fff;
}

.widget_categories li a:hover{
	color:#fab207;
	text-decoration:none;
}

.widget_categories > ul > li{
	border-top:1px solid rgba(255,255,255,0.08);
}

.widget_categories > ul > li:first-child{
	border-top:0;
	padding-top:0;
}

.widget_categories ul ul{
	clear:left;
}

.widget_categories ul ul{
	margin-left:20px;
}

.widget_categories li li{
	font-size:0.9em;
}



/* 8.7 Widget Pages */



.widget_pages li{
	padding:10px 0;
	font-family:'Oswald', sans-serif;
	font-weight:300;
	color:#686868;
	font-size:1.2em;
}

.widget_pages li a{
	color:#fff;
}

.widget_pages li a:hover{
	color:#fab207;
	text-decoration:none;
}

.widget_pages > ul > li{
	border-top:1px solid rgba(255,255,255,0.08);
}

.widget_pages > ul > li:first-child{
	border-top:0;
	padding-top:0;
}

.widget_pages ul ul{
	clear:left;
}

.widget_pages ul ul{
	margin-left:20px;
}

.widget_pages li li{
	font-size:0.9em;
}



/* 8.8 Widget Meta */



.widget_meta li{
	padding:10px 0;
	border-top:1px solid rgba(255,255,255,0.08);
	font-family:'Oswald', sans-serif;
	font-weight:300;
	color:#686868;
	font-size:1.2em;
}

.widget_meta li:first-child{
	padding-top:0;
	border-top:0;
}

.widget_meta li a{
	color:#fff;
}

.widget_meta li a:hover{
	color:#fab207;
	text-decoration:none;
}



/* 8.9 Widget RSS */



.widget_rss{
   font-size:0.9em;
}

.rss-widget-icon{
	position:relative;
	top:-1px;
}
.rss-date{
   display:block;
   color:#686868;
}

.rssSummary{
	margin:10px 0;
}

.widget_rss li{
   margin-bottom:30px;
}

.widget_rss li:last-child{
	margin-bottom:0;
}

.widget_rss cite{
	font-style:normal;
	color:#686868;
	font-weight:700;
}




/* 8.10 Widget Recent Entries */



.widget_recent_entries{
   font-family: 'Oswald', sans-serif;
   font-weight: 400;
   font-size: 1.1em;
   line-height: 1.45;
}

.widget_recent_entries li{
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.08);
}

.widget_recent_entries li:first-child{
  padding-top:0;
  border-top:0;
}

.widget_recent_entries a{
	color:#fff;
}

.widget_recent_entries a:hover{
  color:#fab207;
  text-decoration:none;
}



/* 8.11 Widget Recent Comments */



.widget_recent_comments ul li{
  margin-bottom:10px;
}

.widget_recent_comments ul li:last-child{
  margin-bottom:0;
}

.recentcomments > a{
  color:#fff;
}

.recentcomments > a:hover{
  color:#fab207;
}



/* 8.12 Widget Nav Menu */



.widget_nav_menu li{
	padding:10px 0;
	font-family:'Oswald', sans-serif;
	font-weight:300;
	color:#686868;
	font-size:1.2em;
}

.widget_nav_menu li a{
	color:#fff;
}

.widget_nav_menu li a:hover{
	color:#fab207;
	text-decoration:none;
}

.widget_nav_menu .menu > li{
	border-top:1px solid rgba(255,255,255,0.08);
}

.widget_nav_menu > .menu > li:first-child{
	border-top:0;
	padding-top:0;
}

.widget_nav_menu ul > li:last-child{
	padding-bottom:0;
}

.widget_nav_menu ul ul{
	clear:left;
}

.widget_nav_menu ul ul{
	margin-left:20px;
}

.widget_nav_menu li li{
	font-size:0.9em;
}




/* 8.13 WP calendar */



.calendar_wrap{
  border-radius: 0.75em;
  text-align:center;
}

#wp-calendar{
  width:100%;
  font-size:0.9em;
}

#wp-calendar th{
  padding:10px;
  border-bottom:0;
}

#wp-calendar caption,
#wp-calendar th{
  text-align:center;
}

#wp-calendar caption{
  padding:0 0 13px;
  font-size:1.1em;
  font-weight:700;
}

#wp-calendar tbody td{
  padding:10px;
  border:1px solid #404040;
  background:#323232;
}

#wp-calendar tbody td a{
  font-family: 'Montserrat', sans-serif;
  color:#fff;
  font-weight:bold;
}

#wp-calendar #prev,
#wp-calendar #next{
  border:0;
  padding-top:8px;
}

#wp-calendar #prev{
  text-align:left;
}

#wp-calendar #next{
  text-align:right;
}



/* 8.14 Comments */



.section-add-comment{
  margin-top: 5.4em;
}
.logged-in-as{
  font-size:0.9em;
}

.comment-list{
  list-style:none;
  padding:0;
}

.comment{
  background: #323232;
}

.comment input[type="text"], 
.comment input[type="password"], 
.comment input[type="search"], 
.comment input[type="email"], 
.comment input[type="phone"], 
.comment input[type="tel"],
.comment textarea, 
.comment select{
  background-color:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.08);
}

.comment input[type="text"]:focus,
.comment input[type="password"]:focus,
.comment input[type="search"]:focus,
.comment input[type="email"]:focus,
.comment input[type="phone"]:focus,
.comment input[type="tel"],
.comment textarea:focus, 
.comment select:focus{
  border-color:#fab207;
}

.comment .btn:hover,
.comment .btn:focus{
  background-color:rgba(255,255,255,0.08);
  color:#fff;
}


.comment-notes{
  font-size: 0.85em;
}

.comment-body{
   position:relative;
}

.comment-list > .comment{
  padding:2.2em;
  margin-top:2.2em;
}

.comment-list > .comment:first-child{
  margin-top:0;
}

.comment-list .comment .comment{
	padding-top:2.2em;
	margin:2.2em 0 2.2em 1.7em;
	border-top:1px solid rgba(255,255,255,0.08);
}

.comment-meta{
  overflow:hidden;
}

.comment-author{
  color:#fff;
  margin-bottom:1.8em;
  margin-right:17em;  
}

.comment-author .avatar{
  border-radius:50%;
  margin-right:10px;
}

.comment-author .fn{
  font-size: 0.9em;
  color:#fff;
}

.comment-metadata{ 
  position: absolute;
  right: 0;
  top: 1px;
  font-size: 0.9em;
}

.comment-metadata a{
  color:#686868;
}

.comment-metadata a:hover{
  color:#fab207;
  text-decoration:none;
}

.comment-content{
	margin-top:2.2em;
}

.comment-reply-link{
  font-family: 'montserratsemibold';
  font-weight:normal;
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.77em 1.1em 0.77em;
  border-radius: 2em;
  background-color: #fab207;
  text-transform: uppercase;
  color:#fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.comment-reply-link:hover,
.comment-reply-link:focus{
  background-color:rgba(255,255,255,0.08);
  color:#fff;
  text-decoration:none;
}

.comment-respond{
  margin-top:5.4em;
}

.comment-respond h2 small{
	font-size:40%;
}

.comment-body + .comment-respond{
	margin-top:2.2em;
}

.comment-reply-title small{
  font-size:30%;
  letter-spacing:1em;
}



/* 8.15 Pagination */



.pagination span,
.pagination a{
	display: inline-block;
    font-size: 0.75em;
    line-height: 1;
    padding: 0.77em 1.1em 0.77em;
    border-radius: 2em;
    background-color: #333333;
    text-transform: uppercase;
    color: #6f6f6f;
    margin-top: 0.8em;
    margin: 0.8em 0.7em 0 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.pagination .current,
.pagination a:hover{
	background:#fab207;
	color:#fff;
	text-decoration:none;
}



/* ------------------------------------------------------------------------------- */
/*  9. Contacts
/* ------------------------------------------------------------------------------- */



.bg-contacts{
  background: none 50% 0 no-repeat;
  background-size: cover;
}

.contacts .fade-title-right{
  left: 90%;
}

.row-field{
  margin-left: -5px;
  margin-right:-5px;
}

.col-field{
  padding: 0 5px;
}

.col-message{
  display: none;
  margin-top: 20px;
}

.col-address{
  font-size: 1.125em;
  line-height: 2.1;
  margin-top: 2em;
}

.form-submit{
  margin-top: 1.2em;
}

.success-message{
  display: none;
}

.error-message{
  display: none;
}

.success-message .fa{
  margin-right: 7px;
  font-size: 1.5em;
}

.contact-details{
  position: relative;
  overflow: hidden;
  margin-top: -1px;
}

.col-map{
  height: 35em;
}

.gmap{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  padding: 0;
  height: 100%;
}

.map-info{
  color:#3d3d3d;
  padding: 1.2em;
}
.map-title{
  margin-bottom: 2em;
}

.map-title h3{
  margin:0;
  color:#3d3d3d;
}

.map-address-row{
  margin-top: 1em;
}

.map-address-row .fa{
  float: left;
  margin: 0.35em 0.6em 0 0;
  width: 1.1em;
  text-align: center;
  color: #fab207;
  font-size: 1.2em;
}

.map-address-row  .text{
  display: block;
  overflow: hidden;
  font-size: 1.15em;
}

.contact-info{
  color:#fff;
  padding:0;
  background:none 50% no-repeat;
  background-size: cover;
}

.contact-info-content{
  padding: 5.5em 5.6em;
  background-color:rgba(197,164,125, 0.95);
}

.contact-info-title{
  font-family: 'Oswald', sans-serif;
  font-size: 80px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color:#fff;
  opacity: 0.1;
  position: absolute;
  top:100%;
  left: 100%;
  margin-top: -0.5em;
  margin-left: -2.3em;
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.contact-row{
  position: relative;
  z-index: 1;
  margin-bottom: 2.3em;
}

.contact-row:last-child{
  margin-bottom: 0;
}

.contact-row h4{
  margin:0 0 0.8em;
  color:#fff;
}

.contact-row .fa{
  float: left;
  width: 1.1em;
  margin-top: -0.15em;
  padding: 1px;
  text-align: center;
  font-size: 1.3em;
  line-height: 1.25;
}

.contact-body{
  padding-left: 2.6em;
}

.contact-content{
  font-size: 1.3em;
}

.phone-row{
  font-size: 1.3em;
  letter-spacing: 0.2em;
  margin-top: 0.5em;
}



/* ------------------------------------------------------------------------------- */
/*  10. Footer
/* ------------------------------------------------------------------------------- */



.footer{
  text-align: center;
  margin:7.1em 0 5.5em;
  font-size: 12px;

}

.footer .brand{
  margin-top: -0.45em;
  font-size: 3.4em;
}

.author-link{
  font-family: 'Montserrat', sans-serif;
  color: inherit;
}

.author-link:hover{
  text-decoration: none;
}



/* ------------------------------------------------------------------------------- */
/*  11. Responsive styles
/* ------------------------------------------------------------------------------- */



/* 11.1 Min width 768px */



@media (min-width: 768px){



  html{
    font-size: 85%;
  }



  /* Slider */



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

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



  /* About */



  .entry{
    padding: 0 7.5em;
  }

  .col-about-spec{
    padding: 0 4.4em;
  }



  /* Project Carousel */



  .owl-prev{
    left: 3.6em
  }

  .owl-next{
    right:3.6em;
  }



  /* Projects Deatails */



  .project-details{
    margin-top: 7.1em;
  }


  .project-details-item{
    margin-bottom: 7.1em;
  }

  .project-details-info{
    position: absolute;
    z-index: 1;
    left: 0;
    top:13%;
    bottom: 13%;
    width: 55%;
  }

  .project-details-item:nth-child(odd) .project-details-img{
    padding-left: 15px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img{
    padding-right:15px;
    padding-left: 15px;
  }

}



/* 11.2 Min width 992px */



@media (min-width: 992px){



  html{
    font-size: 92%;
  }



  /* Content styles */



  .text-center-md{
    text-align: center;
  }

  .text-right-md{
    text-align: right;
  }

  .text-left-md{
    text-align: left;
  }



  /* Navbar Desctop*/
	
   .menu-main-container{
	 float:right;
   }
   
   
   
   /* Navbar Mobile */
   
   
   
  .navbar-mobile{
    position: absolute;
    left: -50000px;
    top: -50000px;
  }



  /* About */



  .col-about-img{
    padding-left: 0;
    left: -5px;
  }

  .col-about-img img{
    max-width: calc(100% + 5px);
  }



  /* Project Details */



  .project-details-item:nth-child(odd) .project-details-img{
    padding-left: 5px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img{
    padding-right:5px;
    padding-left: 15px;
  }



  /* blog Details */



  .col-primary{
    padding-right: 2.2em;
  }

  .col-secondary{
    margin-top: 10.62em;
    margin-left: -5px;
    padding:0 10px 0 0;
  }



  /* Contacts */


  .row-field{
    margin-left: -15px;
  }

  .col-map{
    position:static;
    height: 100%;
  }
}


/* 11.3 Min width 1200px */



@media (min-width: 1200px){


  html{
    font-size: 100%;
  }



  /* Header */



  .main-header{
    padding-left: 0;
  }



  /* Project Details */


  .project-details-info{
    width: 44%;
  }

}



/* 11.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;
  }
}

/* ========================================================================
   6. Ghi de tu goarch/style.css (tep o THU MUC GOC cua theme)
   ===================================================================== */
/* ==========================================================================
   Cac luat tu goarch/style.css  (tep style.css o THU MUC GOC cua theme,
   khac voi goarch/css/style.css ma phan lon giao dien nam trong do).
   --------------------------------------------------------------------------
   Lan dau toi chi gop tep thu hai nen SOT nhung luat ghi de o day.
   Hau qua do duoc: chu doc canh anh du an bi hep 27px
   (line-height 18.9px thay vi 42px).

   Chi giu nhung luat con tac dung tren ban tinh; da bo phan chi danh cho
   WordPress (.wp-caption, alignleft, comment, widget...).
   ========================================================================== */

iframe { max-width: 100%; }
img, select { max-width: 100%; }

/* Chu doc canh anh du an ("ARCHITECTURE", "INTERIOR"...).
   line-height:3 la thu quyet dinh be rong khoi chu sau khi xoay -90 do. */
.project-category { line-height: 3; }
.project-category { transform-origin: 0 0; bottom: -100px; }

.social { position: relative; z-index: 50; }
.d-none { display: none; }

.blog-details ul, .wpb_wrapper ul { list-style: disc; padding-left: 25px; }

/* --------------------------------------------------------------------------
   Hai luat ep font cho anh dau trang, cung tu goarch/style.css.
   Ban goc dat !important nen chung THANG ca style inline cua RevSlider.
   Lop .rev_slider van duoc giu tren ban tinh nen 2 luat nay con tac dung.
   -------------------------------------------------------------------------- */
.rev_slider .slide-title { font-family: 'Oswald', sans-serif !important; }
.rev_slider .js-target-scroll { font-family: 'montserratsemibold' !important; }

/* Chu tren anh dau trang deu CAN PHAI (a:right trong data-text). */
.tp-caption, .tp-splitted { text-align: right !important; }

/* ========================================================================
   7. Bang chay dau trang + xem anh  (thay revslider + magnific-popup)
   ===================================================================== */
/* ==========================================================================
   Hero slider  -  thay cho Revolution Slider (rs6.js 300KB + rs6.css 120KB)
   Do cho khop ban goc: tieu de 45px/75px letter-spacing 16px hoa,
   mo ta 18px/30px, nut "Look more" 20px Roboto bo tron 30px.
   ========================================================================== */

.js-hero-slider {
  position: relative;
  z-index: 0;          /* PHAI thap hon header (theme dung z-index 2..5),
                          neu khong anh se de len thanh menu */
  width: 100%;
  height: 100vh;
  min-height: 420px;
  overflow: hidden;
  background-color: #1c1c1c;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease;
  will-change: opacity;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;   /* trong pham vi .js-hero-slider (z-index:0), khong dung toi header */
}

.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.06);
  transition: transform 9s linear;
}

.hero-slide.is-active .hero-slide-bg {
  transform: scale(1);
}

/* lop phu toi de chu noi len, giong ban goc */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .38);
  pointer-events: none;
}

.hero-slide-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* y:m  - dat theo TAM DOC nhu ban goc */
  align-items: flex-end;     /* x:r  - moi lop deu CAN PHAI */
  text-align: right;         /* a:right */
  padding: 0 18px 0 34vmin;
}

/* Cac so duoi day lay tu chinh thuoc tinh data-text / data-xy cua
   Revolution Slider tren ban goc:
     tieu de : w:normal; s:50,45,30,30; l:80,75,65,55; ls:16px; a:right
     mo ta   : s:18; l:30; a:right
     nut     : 20px Roboto, l:25
   Bon moc ung voi responsiveLevels "2048,1750,1192,<nho hon>". */

.hero-slide-title {
  margin: 0;
  max-width: 1276px;
  font-family: 'Oswald', sans-serif;   /* rs-layer: "Oswald, sans-serif" */
  font-size: 50px;
  line-height: 80px;
  font-weight: 400;
  letter-spacing: 16px;
  text-transform: uppercase;
  text-align: right;
  color: #fff;
}

.hero-slide-text {
  margin: 45px 0 0;          /* yo:75px so voi tam, tru nua dong tieu de */
  max-width: 538px;
  /* Ban goc dung 'Montserratlight' (font CUC BO cua theme, net manh),
     KHONG phai 'Montserrat' tai tu Google (net day hon).
     Do thang tu style inline cua <rs-layer> tren site that. */
  font-family: 'montserratlight', sans-serif;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  text-align: right;
  color: #fff;
}

.hero-slide-actions {
  margin-top: 40px;          /* yo:195px so voi tam */
  text-align: right;
}

.hero-slide-actions .btn {
  font-family: 'Roboto', 'Montserrat', sans-serif;
  /* .btn cua theme dat font-size:0.875em (=14px) va co !important o
     .rev_slider .btn, nen phai ep lai dung 20px nhu ban goc. */
  font-size: 20px !important;
  line-height: 25px;
  font-weight: 400;
  letter-spacing: 2px;
  padding: 15px 30px 14px;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
}

/* moc 2: duoi 1750px  -> tieu de 45/75 (day la co ma man 1440 dang dung) */
@media (max-width: 1750px) {
  .hero-slide-title { font-size: 45px; line-height: 75px; max-width: 700px; }
}

/* moc 3: duoi 1192px -> 30/65 */
@media (max-width: 1192px) {
  .hero-slide-title { font-size: 30px; line-height: 65px; max-width: 450px; letter-spacing: 12px; }
}

/* Mui ten Prev/Next: dung nguyen .arrow-left/.arrow-right cua theme
   (chu do CSS theme ve bang content:'Prev'/'Next'). Chi them vien khi
   di chuyen bang ban phim. */
.arrow-left:focus-visible,
.arrow-right:focus-visible {
  outline: 2px solid #fab207;
  outline-offset: 4px;
}

@media (max-width: 991px) {
  .js-hero-slider { height: 78vh; }
  .hero-slide-inner { padding: 0 8vw; }
  .hero-slide-title { font-size: 28px; line-height: 44px; letter-spacing: 8px; }
  .hero-slide-text  { font-size: 15px; line-height: 26px; }
  .hero-slide-actions { text-align: left; }
  .hero-slide-actions .btn { font-size: 16px; padding: 12px 24px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide-bg { transition: none; }
  .hero-slide.is-active .hero-slide-bg { transform: none; }
}

/* ==========================================================================
   Lightbox  -  thay cho magnific-popup
   ========================================================================== */

.sh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 6vw;
  background: rgba(11, 11, 11, .92);
}

.sh-lightbox.is-open { display: flex; }

.sh-lb-fig {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}

.sh-lb-fig img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  margin: 0 auto;
  object-fit: contain;
}

.sh-lb-fig figcaption {
  margin-top: 1em;
  font-family: 'Oswald', sans-serif;
  font-size: .95em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
}

.sh-lightbox button {
  position: absolute;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: .35em .5em;
  opacity: .7;
  transition: opacity .25s, color .25s;
}

.sh-lightbox button:hover,
.sh-lightbox button:focus-visible { opacity: 1; color: #fab207; }

.sh-lightbox button:focus-visible {
  outline: 2px solid #fab207;
  outline-offset: 2px;
}

.sh-lb-close { top: 1.2vh;  right: 1.5vw; font-size: 2.6em; }
.sh-lb-prev  { left: 1.5vw;  top: 50%; transform: translateY(-50%); font-size: 2em; }
.sh-lb-next  { right: 1.5vw; top: 50%; transform: translateY(-50%); font-size: 2em; }

@media (max-width: 767px) {
  .sh-lb-prev, .sh-lb-next { font-size: 1.5em; }
  .sh-lb-close { font-size: 2em; }
}

/* ==========================================================================
   Chinh nho de khop ban goc
   ========================================================================== */

/* So dien thoai + email: van bam goi/gui duoc, nhung nhin y het chu thuong
   cua ban goc (khong gach chan, khong doi mau). */
.header-phone a,
.header-phone a:hover,
.header-phone a:focus {
  color: inherit;
  text-decoration: none;
}

.col-address a {
  color: inherit;
  text-decoration: none;
}

.col-address a:hover,
.col-address a:focus {
  color: #fab207;
}

/* ==========================================================================
   Loi moi lien he cuoi trang du an
   Khach xem xong du an thi biet buoc tiep theo la gi, khong phai tu cuon
   xuong tim bieu mau.
   ========================================================================== */

.project-cta {
  padding: 1em 15px 0;
}

.project-cta-text {
  margin: 0 0 1.8em;
  font-family: 'Oswald', sans-serif;
  font-size: 1.15em;
  line-height: 1.75;
  letter-spacing: .06em;
  color: #cfcfcf;
}

.project-cta-text a {
  color: #fab207;
  text-decoration: none;
  white-space: nowrap;
}

.project-cta-text a:hover,
.project-cta-text a:focus {
  text-decoration: underline;
}

.project-cta .btn + .btn {
  margin-left: 1em;
}

@media (max-width: 767px) {
  .project-cta-text { font-size: 1em; }
  .project-cta .btn { display: block; margin: 0 auto .8em; max-width: 20em; }
  .project-cta .btn + .btn { margin-left: auto; }
}

/* ========================================================================
   8. Sua tran ngang tren dien thoai  (chi chay duoi 992px)
   ===================================================================== */
/* ==========================================================================
   Sua tran ngang tren dien thoai
   --------------------------------------------------------------------------
   Ban WordPress goc bi tran ngang tren man hep (da do: 24-26 phan tu vuot
   khoi man 390px, chu bi cat cut). Theme goarch 2016 khong co @media nao
   duoi 992px ngoai mot khoi max-width:480px.

   TAT CA quy tac duoi day chi chay khi man HEP HON 992px.
   Man hinh may tinh khong doi mot diem anh nao.
   ========================================================================== */

@media (max-width: 991px) {

  /* 1. Chan moi thu tran ra ngoai man hinh */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* 2. Panel logo ben trai: tu o vuong lon thanh dai ngang gon o dau trang.
        Tren may tinh no la khoi 39.6vmin x 40.7vmin dat de len noi dung. */
  .brand-panel {
    position: relative;
    width: 100%;
    height: auto;
    padding: 18px 15px;
    text-align: left;
  }
  .brand-panel .brand img { height: 64px; width: auto; margin: 0; }
  .brand-name { display: none; }          /* chu "Sweet Home" mo khong lo phia sau */

  /* 3. Cot doc ben trai (chu "ARCHITECTURE BURO" + icon mang xa hoi):
        chuyen thanh hang ngang duoi logo, khong con chiem cot ben trai. */
  .vertical-panel { display: none; }
  .vertical-panel-content {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    padding: 0 15px 14px;
    transform: none;
  }
  .vertical-panel-info { display: none; }
  .social-list {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 22px;
    list-style: none;
  }
  .social-list li { margin: 0; }
  .social-list .fa { font-size: 20px; }

  /* 4. So dien thoai: mot hang rieng duoi logo, bam goi duoc.
        Ban goc dat no de len nut menu; o day tach ra cho de bam. */
  .header-phone {
    display: block;
    position: relative;
    left: auto;
    top: auto;
    padding: 0 15px 12px;
    font-size: 13px;
  }

  /* Thanh menu di dong: dua len tren cung, nut hamburger ben phai */
  .navbar-mobile {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    height: auto;
    padding: 10px 0;
  }
  .navbar-mobile .navbar-toggle { display: block; margin-top: 14px; }
  .navbar-mobile .navbar-collapse { padding: 0; }
  .navbar-mobile .navbar-collapse.in { max-height: 70vh; overflow-y: auto; }

  /* Chua logo thi chua vuong nut menu */
  .brand-panel { padding-right: 76px; }

  /* 5. So thu tu slide */
  .slide-number { position: relative; left: auto; top: auto; padding: 0 15px; }

  /* 6. Anh dau trang: khong de chu tran ra ngoai */
  .js-hero-slider { height: auto; min-height: 0; }
  .hero-slide { position: relative; inset: auto; opacity: 1; visibility: visible; }
  .hero-slide:not(.is-active) { display: none; }
  .hero-slide.is-active { display: block; }
  .hero-slide-bg {
    position: relative;
    inset: auto;
    height: 58vw;
    min-height: 220px;
    transform: none;
  }
  .hero-slide::after { display: none; }
  .hero-slide-inner {
    position: relative;
    height: auto;
    padding: 22px 15px 30px;
    background-color: #272727;
    align-items: stretch;      /* man hep: chu chay het be ngang */
    text-align: left;          /* can phai chi hop o man rong */
  }
  .hero-slide-title  { font-size: 22px; line-height: 34px; letter-spacing: 5px;
                       margin-bottom: .8em; max-width: none; text-align: left; }
  .hero-slide-text   { font-size: 14px; line-height: 24px; margin-top: 0;
                       max-width: none; text-align: left; }
  .hero-slide-actions { margin-top: 1.6em; text-align: left; }

  /* 7. Mui ten Prev / Next: dat duoi anh thay vi de len */
  .arrow-left, .arrow-right {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    display: inline-block;
    margin: 0 22px 16px 15px;
  }

  /* 8. Bang chay du an: moi man mot du an.
        Be rong tung o do site.js tinh (perView() tra ve 1 khi duoi 992px),
        KHONG ep bang CSS: width:100% o day se tinh theo .owl-wrapper (rong
        gap 4 lan man hinh) chu khong phai theo man hinh.
        .owl-wrapper-outer cat phan thua nen trang khong bi tran. */
  .owl-wrapper-outer { overflow: hidden; width: 100%; }

  /* 9. Trang Projects: bo margin am cua .row de khoi lech ra ngoai 15px */
  .projects_block.row { margin-left: 0; margin-right: 0; }
  .projects_block .project { width: 100%; float: none; padding-left: 0; padding-right: 0; }

  /* 10. O chu du an: thu nho le trong cho vua man */
  .project figcaption { margin: 1.4em 1.6em; }
  .project-title { font-size: 1.15em; }
  .project-category { font-size: 11px; letter-spacing: .5em; }

  /* 11. Cac muc chung */
  .container { width: 100%; max-width: 100%; }
  .section-title { font-size: 1.5em; letter-spacing: .18em; }
  .fade-title-left, .fade-title-right { display: none; }   /* chu mo khong lo phia sau */
  .main-inner { background-attachment: scroll; }
  .main-projects, .main-contacts { padding: 90px 0 60px; }
  .main-header h1 { font-size: 2em; letter-spacing: .18em; }

  /* 12. Bieu mau lien he: cac o xep doc, du rong */
  .col-address { margin-bottom: 22px; }
  .form-submit { text-align: left; }
  .object-map img { max-width: 100%; height: auto; }
  .object-label { display: none; }        /* nhan tren ban do de sai vi tri o man hep */

  /* 13. Chan trang */
  .footer { text-align: center; }
  .footer .col-base { margin-bottom: 14px; }
  .footer .brand img { margin: 0 auto; }
  .text-left-md, .text-center-md, .text-right-md { text-align: center; }

  /* 14. Duong ke doc trang tri: bo di cho do roi mat tren man hep */
  .page-lines { display: none; }
}

@media (max-width: 575px) {
  .hero-slide-title { font-size: 18px; line-height: 28px; letter-spacing: 3px; }
  .project figcaption { margin: 1.1em 1.2em; }
  .section-title { font-size: 1.3em; }
}

/* ========================================================================
   9. Tang toc hieu ung  (de CUOI cung de ghi de duoc)
   ===================================================================== */
/* ==========================================================================
   TANG TOC HIEU UNG
   --------------------------------------------------------------------------
   Muc tieu: web CAM GIAC nhanh. Bo cuc, mau sac, font giu NGUYEN - chi rut
   ngan thoi gian cac hieu ung.

   Theme goarch dat nhieu hieu ung rat dai (anh du an phong to mat 8 giay),
   lam nguoi dung tuong web dang treo.

   Muon quay lai cham nhu cu: xoa tep nay khoi build_all.py (muc 9).
   ========================================================================== */

/* --- 1. Anh du an phong to khi re chuot: 8s -> 1.2s ----------------------
   Day la thu lam web y nhat. Re chuot vao o du an phai doi 8 GIAY anh moi
   phong xong. 1.2s van muot ma thay ngay ket qua. */
.project figure img {
  transition: transform 1.2s ease-out !important;
}

/* Lop phu toi va chu tren o du an: 0.5s -> 0.25s */
.project figure:after,
.project-title,
.project-category,
.project-zoom {
  transition-duration: .25s !important;
}

/* --- 2. Anh dau trang phong cham: 9s -> 4s ------------------------------
   Hieu ung nay chay NEN trong khi doc chu nen khong can nhanh lam,
   nhung 9s thi anh gan nhu dung yen. */
.hero-slide-bg {
  transition: transform 4s linear;
}

/* --- 3. Chuyen slide: 1.4s -> 0.5s -------------------------------------- */
.hero-slide {
  transition: opacity .5s ease;
}

/* --- 4. Hieu ung chu chay len khi cuon: 1s -> 0.5s ---------------------- */
.animated {
  animation-duration: .5s !important;
}

/* --- 5. Bang chay du an: 0.7s -> 0.35s ---------------------------------- */
.owl-wrapper {
  transition-duration: .35s !important;
}

/* --- 6. Nut, lien ket, menu: 0.3s -> 0.15s ------------------------------
   Nhung thu nguoi dung bam vao phai phan hoi TUC THI.

   LUU Y: theme dat `transition: all .3s ease-out !important` (dang VIET TAT).
   Thuoc tinh viet tat thang `transition-duration` du ca hai deu !important,
   nen o day phai ghi de bang CHINH dang viet tat. */
.btn,
[type="submit"] {
  transition: all .15s ease-out !important;
}

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

.navbar-desctop-menu li a,
.navbar-nav-mobile li a,
.social-list .fa,
.clients-list .client img,
.arrow-left,
.arrow-right {
  transition-duration: .15s !important;
}

/* --- 7. Xem anh phong to: mo nhanh hon ---------------------------------- */
.sh-lightbox button {
  transition-duration: .15s;
}

/* --- 8. Thanh menu dinh len dau: bo hieu ung truot cho dut khoat -------- */
.navbar-desctop.animated,
.navbar-mobile.animated {
  animation-duration: .25s !important;
}

/* --- 9. Ton trong nguoi dung tat hieu ung trong he dieu hanh ------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}