/*!
 * CSS by XeonDesigns (https://xeondesigns.com/)
 * Copyright 2019 by XeonDesigns and Muf Tayebaly
 */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
  font-weight: 200;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
  font-weight: 100;
}

#content {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  position: relative;
  min-height: 100%;
  font-size:12px;
}
body {
  /* Margin bottom by footer height */
  font-family: apparat-light, sans-serif;
  /*margin-bottom: 48px;*/
  font-size:12px;
  background-color:#f5f5f5;
  color:#2d2d2b;
}
h1 {
  font-family:scotch-display, sans-serif;
  font-weight:700;
  color:#000;
  font-size:12rem;
  line-height:10rem;
}
h2 {
  font-family:scotch-display, sans-serif;
  font-weight:700;
  color:#000;
  font-size:40px;
  font-style: italic;
}
h3 {
  font-family:scotch-display, sans-serif;
  font-weight:700;
  color:#000;
  font-size:28px;
}
h4 {
  font-family:scotch-display, sans-serif;
  font-weight:700;
  color:#000;
  font-size:30px;
  line-height: 38px
}
h5 {
  font-family: apparat-light, sans-serif;
  color:#1a1a1a;
  font-size:24px;
}
h6 {
  font-family:apparat-light, sans-serif;
  color:#1a1a1a;
  font-size:10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 15px;
}

/*---------- new styles ----------*/

@media (min-width: 1400px){
  .container {
    max-width: 1320px;
  }
}
.navbar-nav{
  font-family: scotch-display, sans-serif;
  font-weight:700;
  font-size:18px;
}
.navbar-light .navbar-nav .nav-link {
  position:relative;
  color:#000;
  padding:0px 6px;
  transition: all 0.3s ease-in-out;
  z-index:99;
}
.navbar-light .navbar-nav .nav-link::before {
  content:"";
  position:absolute;
  width:100%;
  height:20px;
  left:4px;
  top:4px;
  background-image:url("../imgs/nav_yellow.png");
  background-size:90% 90%;
  background-repeat: no-repeat;
  opacity:0;
  z-index:-1;
  transition: all 0.3s ease-out;
}
.navbar-light .navbar-nav .nav-link:hover {
  color:#000;
}
.navbar-light .navbar-nav .nav-link:hover::before {
  opacity:0.7;
}
.navbar-nav li{
  margin:0px 15px;
  padding:4px 10px;
}
.navbar-light .navbar-nav .nav-link.active::before{
  content:"";
  position:absolute;
  width:100%;
  height:20px;
  left:4px;
  top:4px;
  background-image:url("../imgs/nav_yellow.png");
  background-size:90% 90%;
  background-repeat: no-repeat;
  opacity:1;
  z-index:-1;
  transition: all 0.3s ease-out;
}
.main-hero{
  min-height:500px;
  height: calc(100vh - 121px);
  position:relative;
  background-image:url("../imgs/me-zai.jpg");
  background-position:bottom 0px right 10px;
  background-size:auto 100%;
  background-repeat: no-repeat;
}
.hero-title{
  background-image: url("../imgs/header_yellow.png");
  background-position: left bottom;
  background-size: auto 55%;
  background-repeat: no-repeat;
  padding-bottom:10px;
}
.hero-text{
  width:35%;
  font-size:14px;
  line-height:22px;
}
.hero-ps{
  font-family:scotch-display, sans-serif;
  font-weight:300;
  font-style: italic;
  width:35%;
  font-size:14px;
  line-height:22px;
}
.home-center-vert {
    position: absolute;
    top: 50%;
    transform: translate(0%, -52%);
}
.height-100{
  height:100%;
}
section.bg-white{
  background-color:#fff;
  padding: 100px 0px;
}
section.bg-transparent{
  padding: 100px 0px;
}
section.bg-dark{
  background-color:#1a1a1a !important;
  padding: 100px 0px;
  color:#fff;
}
section.bg-dark h2{
  color:#fff;
}
.quote1{
  font-family:scotch-display, sans-serif;
  font-size:36px;
  font-weight:700;
  width:80%;
  margin:0 auto;
  text-align: center;
}
.quote1 div{
  font-family:apparat-light, sans-serif;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height:22px;
  margin-top: 14px;
}
.img-3row{
  width:100%;
  padding:65% 0px;
  background-color:#fff;
  background-size:cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: all 0.3s ease-out;
  cursor: pointer !important;
}
.cursor-pointer {
  cursor:pointer;
}
.cap-list{
  font-size:22px;
  line-height:27px;
  padding:0;
  margin:0;
}
.cap-list li{
  list-style:none;
  margin:13px 0px;
}
html.sr .load-hidden {
    visibility: hidden;
}
.client-logos{
  margin:0;
  padding:0;
  text-align:center;
}
.client-logos li{
  display:inline-block;
  width:130px;
  height:120px;
  background-size:contain;
  background-position: center center;
  background-repeat: no-repeat;
  list-style:none;
  margin:8px;
}
.bg-color-white{
  background-color:#fff;
}
.border-radius{
  border-radius: 6px;
}
.contact-thing{
  padding:20px 40px;
}
.ls-1{
  letter-spacing: 1px;
}
.fs-1{
  font-size: 10px;
  color:#000;
}
.btn-new{
  letter-spacing: 2px;
  padding:0.375rem 0px;
  padding-right:70px;
  position:relative;
  transition:all 0.2s ease-in;
  text-transform: uppercase;
}
.btn-new::after{
  content:"";
  width:50px;
  height:13px;
  background-image:url('../imgs/button_black.png');
  background-size:contain;
  background-position: center center;
  position:absolute;
  background-repeat: no-repeat;
  right:9px;
  top:5.5px;
  transition:all 0.2s ease-in;
}
.btn-new:hover::after{
  right:0px;
}
.btn-new:disabled::after{
  opacity:0.6;
}
.btn-new:disabled:hover::after{
  right:9px;
}
.btn-new-light{
  letter-spacing: 2px;
  padding:0.375rem 0px;
  padding-right:70px;
  position:relative;
  transition:all 0.2s ease-in;
  text-transform: uppercase;
  color:#fff;
}
.btn-new-light::after{
  content:"";
  width:50px;
  height:13px;
  background-image:url('../imgs/button_yellow.png');
  background-size:contain;
  background-position: center center;
  position:absolute;
  background-repeat: no-repeat;
  right:9px;
  top:5.5px;
  transition:all 0.2s ease-in;
}
.btn-new-light:hover{
  color:#fff;
}
.btn-new-light:hover::after{
  right:0px;
}
.btn-new-dl{
  letter-spacing: 2px;
  padding:0.375rem 0px;
  padding-right:25px;
  position:relative;
  transition:all 0.2s ease-in;
  text-transform: uppercase;
}
.btn-new-dl::after{
  content:"";
  width:13px;
  height:13px;
  background-image:url('../imgs/button_download.png');
  background-size:contain;
  background-position: center center;
  position:absolute;
  background-repeat: no-repeat;
  right:0px;
  top:5px;
  transition:all 0.2s ease-in;
}
.btn-new-dl:hover::after{
  top:11px;
}
.btn-new-light-dl{
  letter-spacing: 2px;
  padding:0.375rem 0px;
  padding-right:25px;
  position:relative;
  transition:all 0.2s ease-in;
  text-transform: uppercase;
  color:#fff;
}
.btn-new-light-dl:hover{
  color:#fff;
}
.btn-new-light-dl::after{
  content:"";
  width:13px;
  height:13px;
  background-image:url('../imgs/button_download.png');
  background-size:contain;
  background-position: center center;
  position:absolute;
  background-repeat: no-repeat;
  right:0px;
  top:5px;
  filter:invert(1);
  transition:all 0.2s ease-in;
}
.btn-new-light-dl:hover::after{
  top:11px;
}
.location{
  position:absolute;
  right:-30px;
  top:50px;
  width:100px;
  height:20px;
  text-transform: uppercase;
  transform: rotate(-90deg);
  font-weight:700;
  color:#000;
  font-size:10px;
  letter-spacing: 2px;
}
.navbar-light .navbar-toggler {
  border:0px solid #f5f5f5;
}
.work-cats{
  margin:0;
  padding:0;
  text-align:center;
}
.work-cats li{
  position:relative;
  list-style:none;
  display:inline-block;
  padding:2px 6px;
  font-family:apparat-light, sans-serif;
  margin:4px 5px;
}
.work-cats li::after{
  content: "";
  position:absolute;
  left:calc(50% - 4px);
  width:5px;
  height:5px;
  bottom:-14px;
  background-color:#ccc;
  border-radius:6px;
  opacity:0;
  transition:all 0.2s ease-in;
}
.work-cats li:hover::after{
  bottom:-8px;
  opacity:1;
}
.work-cats li.active::after{
  content: "";
  position:absolute;
  left:calc(50% - 4px);
  width:5px;
  height:5px;
  bottom:-8px;
  background-color:#1a1a1a;
  border-radius:6px;
  opacity:1;
}
.project-details-fixed {
  position: -webkit-sticky;
	position: sticky;
	top: 20px;
}
.h1-2{
  font-size:80px;
  line-height:90px;
}
.color-white{
  color:#fff;
}
.p-text{
  font-size:14px;
  line-height:22px;
}
.testimonial-pic{
  width:95%;
  background-position:center center;
  padding:30% 0px;
  background-repeat: no-repeat;
  background-size:cover;
}
.img-3row:hover{
  box-shadow: 2px 0px 20px rgba(0,0,0,0.1);
  transition:all 0.3s ease-out;
  cursor: pointer;
}


@media (max-width: 991.9px) {
  h1 {
    font-size:80px;
    line-height:75px;
  }
  .hero-title{
    background-size: auto 45%;
  }
  .location{
    visibility: hidden;
  }
}
@media (max-width: 540px) {
  h1 {
    font-size:90px;
    line-height:85px;
  }
  .hero-text{
    width:90%;
  }
  .hero-ps{
    width:90%;
  }
  .main-hero{
    background-image:none;
  }
}

/*---------- end new ----------*/




.myclass {
  font-weight:700;
  color:#f5f5f4;
  font-size:11px;
  letter-spacing: 2px;
  line-height:20px;
  position:absolute;
  top:30%;
  text-align:center;
}
.line-br {
  border-bottom:1px solid #b0b0b0;
  height:7px;
  margin-bottom:13px;
  font-size:2px;
}
p{
  font-weight:normal;
}
a:focus{
  border:none;
  box-shadow: none;
  outline: none;
}
a{
  transition: all 0.3s;
  color:#1a1a1a;
}
a:hover, a:focus {
  text-decoration: none;
  color:#000;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 65px;
  line-height: 65px; /* Vertically center the text there */
  color:#000;
  font-size:12px;
  text-align:center;
  background-color:#DFFD35;
  z-index:99991;
}
.footer img {
  opacity: 0.6;
}
@media (max-width: 768px) {
  .footer {
    z-index:9996;
  }
}
@media (max-width: 624px) {
  /*.footer {
    position:fixed;
    text-align:left;
    padding-left:30px;
    width:65%;
  }*/
  .built-by{
    display:none;
  }
}
.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}
a[data-toggle="collapse"] {
  position: relative;
}
.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.btn {
  transition: all 0.3s;
}
.btn-dark, .btn-dark:active, .btn-dark:visited{
  background-color:#2d2d2b;
  color:#fff;
  border:1px solid #2d2d2b;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size:10px;
  font-weight:500;
  padding:7px 14px;
  min-width:130px;
  margin-bottom:4px;
}
.btn-dark:hover, .btn-dark:focus{
  background-color:#9e5e26;
  color:#fff;
  border:1px solid #9e5e26;
}
.btn-dark:focus{
  box-shadow: 0 0 0 3px rgba(126, 126, 126, .3);
}
.btn-dark-outline, .btn-dark-outline:active, .btn-dark-outline:visited{
  background-color:none;
  color:#2d2d2b;
  border:1px solid #2d2d2b;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size:10px;
  font-weight:500;
  padding:7px 14px;
  min-width:130px;
  margin-bottom:4px;
}
.btn-dark-outline:hover:not([disabled]), .btn-dark-outline:focus:not([disabled]){
  background-color:#9e5e26;
  color:#fff;
  border:1px solid #9e5e26;
}
.btn-dark-outline:focus{
  box-shadow: 0 0 0 3px rgba(126, 126, 126, .3);
}
.btn-dark-outline:disabled, .btn-dark-outline[disabled]{
  border-color:#b0b0b0;
  color:#b0b0b0;
}
.btn-light-outline, .btn-light-outline:active, .btn-light-outline:visited{
  background-color:none;
  color:#fff;
  border:1px solid #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size:10px;
  font-weight:500;
  padding:7px 14px;
  min-width:130px;
  margin-bottom:4px;
}
.btn-light-outline:hover, .btn-light-outline:focus{
  background-color:#fff;
  color:#2d2d2b;
  border:1px solid #fff;
}
.btn-light-outline:focus{
  box-shadow: 0 0 0 3px rgba(126, 126, 126, .3);
}
.form-group input{
  font-family: apparat-light, sans-serif;
  border:none;
  border-bottom:1px solid #707070;
  font-size:18px;
  padding:1px 25px 1px 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  transition: all 0.3s;
  color:#1a1a1a;
}
.form-group input:focus{
  box-shadow:none;
  border-bottom:1px solid #DFFD35;
}
.form-group input::placeholder {
  color:#b0b0b0;
  font-size:18px;
}
.form-group input:-ms-input-placeholder{
  color:#b0b0b0;
  font-size:18px;
}
.form-group input::-ms-input-placeholder {
  color:#b0b0b0;
  font-size:18px;
}
.form-group textarea{
  font-family: apparat-light, sans-serif;
  border:none;
  border-bottom:1px solid #707070;
  font-size:18px;
  padding:1px 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  transition: all 0.3s;
  color:#1a1a1a;
}
.form-group textarea:focus{
  box-shadow:none;
  border-bottom:1px solid #DFFD35;
}
.form-group textarea::placeholder {
  color:#b0b0b0;
  font-size:18px;
}
.form-group textarea:-ms-input-placeholder{
  color:#b0b0b0;
  font-size:18px;
}
.form-group textarea::-ms-input-placeholder {
  color:#b0b0b0;
  font-size:18px;
}
.input-check{
  position:absolute;
  right:40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  width:20px;
  height:20px;
  line-height:21px;
  text-align:center;
  font-size:7px;
  background-color:#fff;
  color:#aaa;
  margin-top:6px;
  font-family: 'iconzai' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  transition:all 0.3s;
}

/*--- sidebar ----*/
.wrapper {
  display: flex;
  /*align-items: stretch;*/
  width: 100%;
}
#sidebar {
  min-width: 230px;
  max-width: 230px;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 999;
  transition: all 0.3s;
  background: #f5f5f4;
  color: #2d2d28;
  font-size:12px;
  z-index:9999;
}
#sidebar.go {
  margin-left: -230px;
}
#sidebar ul{
  margin-left:30px;
  padding-left:16px;
  list-style:none;
  padding-right:16px;
}
#sidebar ul li{
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight:normal;
  margin-bottom:12px;
}
#sidebar ul a:before {
  position: absolute;
  margin-left:-20px;
  content:"•";
  font-size:23px;
  line-height:18px;
  color: rgba(129,129,131,0);
  transition: all 0.3s;
  font-family:Arial;
}
#sidebar ul li a{
  display:block;
  color:#818183;
  transition: all 0.3s;
}
#sidebar ul li:first-child a {
  font-weight:600;
  color:#2d2d2b;
}
#sidebar ul li:first-child a:before {
  font-weight:300;
}
#sidebar ul li a:visited{
  text-decoration:none;
}
#sidebar ul li a:hover, #sidebar ul li a:focus {
  text-decoration:none;
  color:#2d2d2b;
}
#sidebar ul li:hover a:before, #sidebar ul li a:focus:before{
  color: #2d2d2b;
  font-weight:300;
  margin-left:-16px;
}
#sidebar ul li.active a:before{
  font-weight:300;
  color: rgba(158,94,38,1);
  margin-left:-16px;
}
#sidebar ul li.active a{
  color:#9e5e26;
  font-weight:600;
}
.sidebar-close{
  position:absolute;
  font-size:18px;
  top:20px;
  right:25px;
  color:#b0b0b0;
  transition: all 0.3s;
  display:none;
}
.sidebar-close:hover{
  color:#2d2d2b;
  cursor:pointer;
}
@media (max-width: 768px) {
  #sidebar {
    margin-left: -230px;
  }
  #sidebar.go {
    margin-left: 0;
  }
  .sidebar-close{
    display:block;
  }
}
#content {
  width: calc(100% - 230px);
  padding: 90px 100px 80px 30px;
  min-height: 100vh;
  transition: all 0.3s;
  /*position: absolute;
  top: 0;
  right: 0;*/
  margin-left:auto;
}
@media (max-width: 768px) {
  #content{
    width:100%;
  }
}
@media (max-width: 624px) {
  #content{
    width:100%;
    padding-right:30px;
    padding-top:110px;
  }
}
#content.go {
  width: 100%;
}
.sidebar-logo{
  width: 100px;
  padding-top: 25px;
}
.sidebar-logo img{
  width:100%;
  height:auto;
}
@media (max-width: 768px) {
  .sidebar-logo{
    width:130px;
    margin-bottom:45px;
  }
}
#page-darken{
  position:fixed;
  width:100%;
  height:100%;
  background-color: rgba(126,126,126, 0.5);
  z-index:9996;
  display:none;
}
@media (max-width: 768px) {
  .pd-go{
    display:block !important;
  }
}
.cicon-brown{
  width:40px;
  height:40px;
  line-height:41px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  font-size:16px;
  border:1px solid #9e5e26;
  color:#9e5e26;
  text-align:center;
}
.row-icons{
  padding:0px;
}
.row-icons li {
  display:inline;
  margin:0 3px;
}
.row-icons li a{
  display:inline-block;
  width:40px;
  height:40px;
  line-height:41px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  font-size:16px;
  border:1px solid #9e5e26;
  color:#9e5e26;
  text-align:center;
}
.row-icons li a:hover, .row-icons li a:focus{
  border:1px solid #9e5e26;
  color:#fff;
  background-color:#9e5e26;
}
.email-size-change a{
  font-size:14px !important;
}

/*--- navbar top ---*/
.navbar-zai{
  background-color:#f5f5f4;
  color:#2d2d2b;
  padding-left:242px;
  padding-right:30px;
  width:100%;
  padding-top:22px;
  padding-bottom:14px;
  transition: all 0.3s;
}
.navbar-zai-go{
  padding-left:12px;
}
@media (max-width: 768px) {
  .navbar-zai{
    padding-left:20px;
  }
}
.navbar-zai .right{
  width:100%;
  text-align:right;
}
.navbar-zai .info{
  font-weight:bold;
  letter-spacing: 2px;
}
.navbar-zai .muted{
  color:#9e5e26;
  font-weight:normal;
}
.navbar-zai .job{
  color:#2d2d2b;
  font-weight:normal;
  letter-spacing: 1px;
}
.navbar-zai .form-inline{
  float:right;
  margin-top:-7px;
}
.navbar-zai .form-inline input {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border:none;
  background-color:#fff;
  color:#2d2d2b;
  font-size:11px;
  font-family: 'Montserrat', sans-serif;
  -webkit-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
  border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
  padding-right:6px;
  margin-right:0px !important;
  transition: all 0.3s;
  width:130px;
}
.navbar-zai .form-inline input:focus{
  box-shadow: none;
  width:200px;
}
.navbar-zai button:focus {
  box-shadow:none;
}
.navbar-zai .form-inline input::placeholder {
  color:#b0b0b0;
  letter-spacing: 1px;
  font-weight:300;
}
.navbar-zai .form-inline input:-ms-input-placeholder{
  color:#b0b0b0;
  letter-spacing: 1px;
  font-weight:300;
}
.navbar-zai .form-inline input::-ms-input-placeholder {
  color:#b0b0b0;
  letter-spacing: 1px;
  font-weight:300;
}
.btn-search-navbar{
  -webkit-border-top-right-radius: 20px;
  -moz-border-top-right-radius: 20px;
  border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-bottom-right-radius: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-top-left-radius: 0px;
  border-top-left-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color:#fff;
  font-size:14px;
  padding-top:4px;
  padding-bottom:4px;
  color:#b0b0b0;
  padding-left:6px;
  transition: all 0.3s;
}
.btn-search-navbar:hover, .btn-search-navbar:focus{
  color:#2d2d2b;
}
@media (max-width: 624px) {
  .search-it{
    width:100%;
    padding:12px 6px 0px 10px;
  }
  .search-it .search-resp{
    width: calc(100% - 34px) !important;
  }
  .navbar-zai{
    padding-bottom:22px;
  }
}
.hamburger-menu{
  float:left;
  width:40px;
  display:none;
  margin-top:-6px;
}
.hamburger-menu .btn{
  font-size:12px;
  transition: all 0.3s;
}
.hamburger-menu .btn:hover{
  color:#9e5e26;
}
.arrow-menu{
  float:left;
  width:40px;
  margin-top:-13px;
}
.arrow-menu .btn{
  font-size:20px;
  color:#b0b0b0;
  transition: all 0.3s;
}
.arrow-menu .btn:hover{
  color:#2d2d2b;
}
@media (max-width: 768px) {
  .hamburger-menu{
    display:block !important;
  }
  .arrow-menu{
    display:none;
  }
}
.nav-mail, .nav-mail:visited{
  color:#2d2d2b;
}
.nav-mail:hover{
  color:#9e5e26;
}


/*--- navbar right side ---*/
.side-buttons{
  position:fixed;
  background-color: #f5f5f4;
  right:30px;
  top:calc(50% - 50px);
  z-index:9995;
}
.side-buttons ul{
  font-size:21px;
  width:30px;
  margin-bottom:0px;
}
.side-buttons ul li{
  margin-bottom:8px;
}
.side-button ul li:last-child{
  margin-bottom:0px;
}
.side-buttons ul li a{
  color:#9e5e26;
}
.side-buttons ul li a:hover, .side-buttons ul li a:focus {
  color:#2d2d2b;
  text-decoration:none;
}
.bot-pin{
  font-size:27px;
}
@media (max-width: 624px) {
  .side-buttons {
    position: fixed;
    bottom: 0;
    top:inherit;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 44px;
    line-height: 44px; /* Vertically center the text there */
    text-align:right;
    padding-right:6px;
    padding-bottom:4px;
  }
  .side-buttons ul {
    width:100%;
    text-align:right;
    display:inline;
  }
  .side-buttons ul li{
    display:inline-block;
    margin-left:8px;
  }
  .bot-pin{
    font-size:22px;
  }
}

/*--- masonry ---*/
.grid-item {
  width: calc(33.333% - 8px);
  margin-bottom:8px;
  overflow:hidden;
  transition: all 0.3s;
}
.grid-item-width2 {
  width: calc(66.666% - 8px);
}
.grid-item img {
  width:100%;
  transition: all 0.3s;
}
.grid-item:hover img {
  transform: scale(1.08);
}
.grid-item .overlay {
  position:absolute;
  width:100%;
  height:100%;
  background-color:#1a1a1a;
  opacity: 0;
  transition: all 0.3s;
  z-index:99;
  cursor:pointer;
}
.grid-item:hover .overlay, .grid-item:focus .overlay, .grid-item:active .overlay, .grid-item .overlay:focus {
  opacity: 0.92;
}

.center-overlay{
  width:80%;
  text-align:center;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.proj-name{
  color:#fff;
  font-size:20px;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height:29px;
  font-weight:normal;
}
.center-overlay h4{
  color:#fff;
  line-height:16px;
  font-weight:normal;
  margin-top:3px;
  margin-bottom:11px;
  font-size:10px;
}
/*.center-overlay a, .center-overlay a:visited{
  display:block;
  width:35px;
  height:35px;
  font-size:26px;
  color:#fff;
  border:1px solid #fff;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  margin-left:auto;
  margin-right:auto;
  line-height:35px;
}
.center-overlay a:hover, .center-overlay a:focus{
  color:#9e5e26;
  background-color:#fff;
}*/
@media (min-width: 1700px) {
  .grid-item {
    width: calc(25% - 8px);
  }
  .grid-item-width2 {
    width: calc(50% - 8px);
  }
}
@media (min-width: 2200px) {
  .grid-item {
    width: calc(20% - 8px);
  }
  .grid-item-width2 {
    width: calc(40% - 8px);
  }
}
@media (min-width: 2700px) {
  .grid-item {
    width: calc(16.66% - 8px);
    margin-bottom:8px;
  }
}
@media (min-width: 3100px) {
  .grid-item {
    width: calc(14.28% - 8px);
  }
  .grid-item-width2 {
    width: calc(28.56% - 8px);
  }
}
@media (min-width: 3700px) {
  .grid-item {
    width: calc(12.5% - 8px);
  }
  .grid-item-width2 {
    width: calc(15% - 8px);
  }
}
@media (max-width: 1200px) {
  .grid-item {
    width: calc(50% - 8px);
  }
  .grid-item-width2 {
    width: calc(100% - 8px);
  }
}
@media (max-width: 768px) {
  .grid-item {
    width: calc(100% - 8px);
    margin-bottom:8px;
  }
  .grid-item-width2 {
    width: calc(100% - 8px);
  }
}


/*-- experience --*/
.dropshadow-sharpgrey{
  -webkit-box-shadow: -24px 30px 0px 0px rgba(237,237,237,0.7);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: -24px 30px 0px 0px rgba(237,237,237,0.7);  /* Firefox 3.5 - 3.6 */
  box-shadow: -24px 30px 0px 0px rgba(237,237,237,0.7);
}
.multi-column-list {
  padding-left:0px;
}
.multi-column-list li {
  width: 200px;
  display:inline-block;
  margin-bottom:5px;
  line-height:12px;
}
/*
@media (min-width: 1700px) {
  .multi-column-list li{
    width: calc(19.99% - 6px);
  }
}
@media (min-width: 2200px) {
  .multi-column-list li{
    width: calc(16.66% - 5px);
  }
}
@media (min-width: 2700px) {
  .multi-column-list li {
    width: calc(14.28% - 4.29px);
  }
}
@media (min-width: 3100px) {
  .multi-column-list li {
    width: calc(12.49% - 3.75px);
  }
}
@media (max-width: 1200px) {
  .multi-column-list li {
    width: calc(33.33% - 10px);
  }
}
@media (max-width: 768px) {
  .multi-column-list li {
    width: calc(49.99% - 15px);
  }
}*/
.dark-bg {
  background-color:#2d2d2b;
}
section.dark-bg{
  text-align:center;
  color:#fff;
  padding:30px 15px;
}
section.dark-bg h6{
  color:#fff;
}
.language-list li {
  list-style: none;
  margin-bottom:5px;
}
.capability-list li {
  list-style: none;
  margin-right:14px;
  margin-bottom:10px;
  display:inline-block;
  text-align:center;
  width:74px;
  vertical-align: top;
}
.capability-list li div{
  font-size:29px;
  border:1px solid #fff;
  width:74px;
  text-align:center;
  padding:16px 6px 9px 6px;
  margin-bottom:5px;
}
.capability-list li div.letters{
  font-size:20px;
  padding:21px 6px 16.7px 6px;
}

/*--- ME ---*/
.me-zai-img{
  background-image:url("../imgs/me-zai.jpg");
  background-position:right 100px top 100px;
  background-size:25%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition: none;
}
.me-content{
  padding-right:41.7%;
}
.me-zai-img-mobile{
  display:none;
  text-align:center;
}
.me-zai-img-mobile img{
  display:block;
  width:60%;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width: 925px) {
  .me-content{
    padding-right:0px;
  }
  .me-zai-img{
    background:none;
  }
  .me-zai-img-mobile{
    display:contents;
  }
}

/*--- project ---*/
.project-imgs img {
  margin-bottom:12px;
  width:100%;
  max-width:1000px;
  height:auto;
}
h5 i {
  font-size:1.2em;
}

/*--- good words ---*/
.words-pic img{
  width:100%;
  max-width:600px;
  height:auto;
  margin-bottom:14px;
}
.words-title{
  font-size:12px;
  text-transform: uppercase;
  font-weight:500;
  letter-spacing: 1px;
  color:#818183;
}
.words-job{
  font-size:12px;
  font-weight:normal;
  letter-spacing: 1px;
  color:#818183;
}
.testimonial p{
  font-size:15px;
  line-height:25px;
  font-weight:normal;
}
.words-quote{
  position:absolute;
  right:0;
  margin-top:-14px;
  font-size:34px;
}
.words-linkedin{
  font-size:20px;
}


/*--- last items for use ---*/
.if-brown{
  background-color:#DFFD35;
}
.if-brown:before{
  content: "\e905";
}
.if-red{
  background-color:#fff;
  font-family: "Material Design Icons" !important;
  font-size:12px;
  color:#d44e60;
}
.if-red:before{
  content: "\F156";
}
.if-lightgrey{
  background-color:#f5f5f5;
}
.if-lightgrey:before{
  content: "\e905";
}
@media (max-width: 768px) {
  .hide-sm{
    display:none;
  }
}