/* TABLE OF CONTENTS --------------------------- *. 
@Import & Reset 
1. Generic styles 
2. Loader styles 
3. Home 
4. Other Pages 
5. Gallery 
6. Buttons 
7. Contact 
8. Footer
9. Media Queries */
/* ------------------------------------- */
/* *. @Import & Reset .................. */
/* ------------------------------------- */
/* http://bourbon.io/ Sass Mixin Library */
/* custom CSS files */
 @import url(plugins.css);
/* Google Fonts */
 @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700");
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700");
/* * http://meyerweb.com/eric/tools/css/reset/ * v2.0 | 20110126 * License: none (public domain) */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, h7, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
     display: block;
}
 body {
     line-height: 1;
}
 ol, ul {
     list-style: none;
}
 blockquote, q {
     quotes: none;
}
 blockquote:before, blockquote:after, q:before, q:after {
     content: '';
     content: none;
}
 table {
     border-collapse: collapse;
     border-spacing: 0;
}
/* ------------------------------------- */
/* 1. Generic styles ................... */
/* ------------------------------------- */
 body {
     background: #fdfdfd;
     font-family: "Open Sans", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
     color: #050505;
     font-weight: 400;
     font-size: 100%;
     line-height: 1.5em;
     position: absolute;
     height: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
}
 body, html {
     margin: 0;
     padding: 0;
     -webkit-tap-highlight-color: transparent;
     width: 100%;
}
 body, input, select, textarea {
     -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     -moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     -ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     -o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
 a {
     -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     -moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     -ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     -o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     cursor: pointer;
     text-decoration: none;
     color: #fdfdfd;
}
 a:hover {
     color: #00af94;
     text-decoration: none !important;
     outline: none !important;
}
 a:active, a:focus {
     outline: none !important;
     text-decoration: none !important;
     color: #fdfdfd;
}
 button {
     -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     -moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     -ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     -o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
     cursor: pointer;
}
 strong, b {
     font-weight: 700;
}
 em, i {
     font-style: normal;
}
 p {
     margin: 0;
     font-size: 20px;
     line-height: 1.6em;
     color: #6f6f6f;
     font-weight: 300;
}
 h1, h2, h3, h4, h5, h6, h7, h8 {
     font-family: "Poppins", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
     font-weight: 400;
     line-height: 1.3em;
}
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7 a, h8 a {
     color: inherit;
     text-decoration: none;
}
 h1 {
     font-size: 60px;
     line-height: 70px;
     font-weight: 700;
     letter-spacing: 1px;
}
 h2 {
     font-size: 20px;
     margin-top: 15px;
     line-height: 32px;
     letter-spacing: 0.02em;
     margin-bottom: 30px;
}
 h3 {
     font-size: 26px;
     margin-bottom: 25px;
}
 h4 {
     font-size: 22px;
     margin-bottom: 25px;
}
 h5 {
     font-size: 18px;
     margin-bottom: 25px;
}
 h6 {
     font-size: 15px;
     margin-bottom: 25px;
}
h7 {
	font-size: 60px;
     line-height: 70px;
     font-weight: 700;
     letter-spacing: 1px;
	color: rgba(0, 0, 0, 0);
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #050505;
}
h8 {
     font-size: 20px;
     margin-top: 15px;
     line-height: 32px;
     letter-spacing: 0.02em;
     margin-bottom: 30px;
}
 sub {
     font-size: 0.8em;
     position: relative;
     top: 0.5em;
}
 sup {
     font-size: 0.8em;
     position: relative;
     top: -0.5em;
}
 .clear {
     clear: both;
}
 .display-none {
     display: none !important;
}
 .no-margin-bottom {
     margin-bottom: 0 !important;
}
 .padding-top-30px {
     padding-top: 30px;
}
 .margin-bottom-10px {
     margin-bottom: 10px;
}
 .margin-bottom-20px {
     margin-bottom: 20px;
}
 .margin-bottom-50px {
     margin-bottom: 50px;
}
 .margin-top-bottom-50px {
     margin-top: 50px;
     margin-bottom: 50px;
}
 .margin-top-bottom-100px {
     margin-top: 100px;
     margin-bottom: 100px;
}
 .text-theme-color {
     color: #19233e;
}
 .before-after-line::before, .before-after-line::after {
     background: rgba(73, 144, 226, 0.8) none repeat;
     content: "";
     display: inline-block;
     height: 1px;
     margin: 0 15px;
     vertical-align: super;
     width: 30px;
}
 .text-gray {
     color: #3f3f3f;
}
 .text-light-gray {
     color: #d6d6d6;
}
 .text-white {
     color: #fdfdfd;
}
 .text-theme-color {
     color: #19233e;
}
 .font-weight-300 {
     font-weight: 300;
     letter-spacing: 0.02em;
}
 .font-weight-500 {
     font-weight: 500;
}
 .font-weight-700 {
     font-weight: 700;
     letter-spacing: 0.03em;
}
 .text-small {
     font-size: 12px;
     line-height: 18px;
}
 .align-left {
     text-align: left;
}
 .align-center {
     text-align: center;
}
 .align-right {
     text-align: right;
}
 .text-uppercase {
     text-transform: uppercase;
}
 .text-lowercase {
     text-transform: lowercase;
}
 .opacity-0 {
     opacity: 0;
}
.cbp-caption1{
	color: #3f3f3f;
	font-size: 10px;

}
.cbp-caption1:hover {
	color: #2588D4;
	font-size: 10px;
}
.imp-ds {
	position: absolute;
	bottom: 1.2%;
	left: 5%;
}
.cbp-caption2{
	color: #3f3f3f;
	font-size: 20px;

}
.cbp-caption2:hover {
	color: #2588D4;
	font-size: 20px;
}
.mob-mn1:hover{
	color: #3f3f3f;
}
.mob-mn2:hover{
	color: #788DA5;
}
.mob-mn3:hover{
	color: #8DA68B;
}
.mob-mn4:hover{
	color: #A56B6B;
}
.mob-mn5:hover{
	color: #CEB07B;
}
/* ------------------------------------- */
/* 2. Loader styles..................... */
/* ------------------------------------- */
 #loading {
     width: 100vw;
     height: 100vh;
     background: #fdfdfd;
     position: fixed;
     z-index: 9999;
}
 #loading #preloader {
     position: relative;
     width: 100%;
     height: 100px;
     top: calc(50% - 50px);
     text-align: center;
     margin: 0 auto;
}
 #loading .circle {
      width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 1px solid rgba(0,0,0, 0.08);
    border-right: 1px solid rgba(0,0,0, 0.08);
    border-bottom: 1px solid rgba(0,0,0, 0.08);
    border-left: 1px solid rgba(0,0,0, 0.5);
  
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  
    -webkit-animation: spinner 700ms infinite linear;
    -moz-animation: spinner 700ms infinite linear;
    -ms-animation: spinner 700ms infinite linear;
    -o-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;

	 z-index: 100001;
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
 /*#loading .circle1 {
     background-color: rgba(0, 0, 0, 0);
     border: 5px solid rgba(0, 183, 229, 0.9);
     opacity: .9;
     border-left: 5px solid rgba(0, 0, 0, 0);
     border-right: 5px solid rgba(0, 0, 0, 0);
     border-radius: 50px;
     box-shadow: 0 0 15px #565656;
     width: 40px;
     height: 40px;
     margin: 0px auto;
     position: relative;
     top: -60px;
     -moz-animation: spinoffPulse 2s infinite linear;
     -webkit-animation: spinoffPulse 2s infinite linear;
}
/* Loaded */
 .loader-section {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
}
 .loaded #loading .loader-section {
     -webkit-transform: translateX(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateX(-100%);
    /* IE 9 */
     transform: translateX(-100%);
    /* Firefox 16+, IE 10+, Opera */
}
 .loaded #loading {
     visibility: hidden;
}
 .loaded #preloader {
     opacity: 0;
     -webkit-transition: all 0.3s linear;
     transition: all 0.3s linear;
}
 .loaded #loading {
     -webkit-transform: translateY(-100%);
     -ms-transform: translateY(-100%);
     transform: translateY(-100%);
     -webkit-transition: all 0.4s 0.6s ease-out;
     transition: all 0.4s 0.6s ease-out;
}
 @-moz-keyframes spinPulse {
     0% {
         -moz-transform: rotate(160deg);
         opacity: 0;
         box-shadow: 0 0 1px #292929;
    }
     50% {
         -moz-transform: rotate(145deg);
         opacity: 1;
    }
     100% {
         -moz-transform: rotate(-320deg);
         opacity: 0;
    }
}
 @-moz-keyframes spinoffPulse {
     0% {
         -moz-transform: rotate(0deg);
    }
     100% {
         -moz-transform: rotate(360deg);
    }
}
 @-webkit-keyframes spinPulse {
     0% {
         -webkit-transform: rotate(160deg);
         opacity: 0;
         box-shadow: 0 0 1px #292929;
    }
     50% {
         -webkit-transform: rotate(145deg);
         opacity: 1;
    }
     100% {
         -webkit-transform: rotate(-320deg);
         opacity: 0;
    }
}
 @-webkit-keyframes spinoffPulse {
     0% {
         -webkit-transform: rotate(0deg);
    }
     100% {
         -webkit-transform: rotate(360deg);
    }
}
/* Revealers */
 .revealer {
     width: 100vw;
     height: 100vh;
     opacity: 0;
     position: fixed;
     z-index: 1000;
     pointer-events: none;
}
 .revealer--top, .revealer--bottom {
     left: 0;
}
 .revealer--right, .revealer--left {
     top: 50%;
     left: 50%;
}
 .revealer--top {
     bottom: 100%;
}
 .revealer--bottom {
     top: 100%;
}
/* Revealer effects */
 .open-effect .page:first-child {
     background: #28282D;
}
 .open-effect .page:nth-child(2) {
     background: #F15C5C;
}
 .open-effect .animate-left .quote {
     -webkit-animation: moveQuoteLeft 1s forwards;
     animation: moveQuoteLeft 1s forwards;
}
 @-webkit-keyframes moveQuoteLeft {
     0%, 65% {
         -webkit-transform: translate3d(-75px, 0, 0);
         transform: translate3d(-75px, 0, 0);
    }
     100% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @keyframes moveQuoteLeft {
     0%, 65% {
         -webkit-transform: translate3d(-75px, 0, 0);
         transform: translate3d(-75px, 0, 0);
    }
     100% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}

 .open-effect .animate-right .quote {
     -webkit-animation: moveQuoteRight 1s forwards;
     animation: moveQuoteRight 1s forwards;
}
 @-webkit-keyframes moveQuoteRight {
     0%, 65% {
         -webkit-transform: translate3d(75px, 0, 0);
         transform: translate3d(75px, 0, 0);
    }
     100% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @keyframes moveQuoteRight {
     0%, 65% {
         -webkit-transform: translate3d(75px, 0, 0);
         transform: translate3d(75px, 0, 0);
    }
     100% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 .open-effect .revealer--animate .revealer__layer {
     -webkit-animation: anim-effect-4-1 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
     animation: anim-effect-4-1 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
}
 .open-effect .revealer--animate .revealer__layer:nth-child(2) {
     -webkit-animation-name: anim-effect-4-2;
     animation-name: anim-effect-4-2;
     -webkit-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
     animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
}
 .open-effect .revealer--animate .revealer__layer:nth-child(3) {
     -webkit-animation-name: anim-effect-4-3;
     animation-name: anim-effect-4-3;
     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060) 
}
 @-webkit-keyframes anim-effect-4-1 {
     0% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
     35%, 65% {
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
     100% {
         -webkit-transform: translate3d(0, -200%, 0);
         transform: translate3d(0, -200%, 0);
    }
}
 @keyframes anim-effect-4-1 {
     0% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
     35%, 65% {
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
     100% {
         -webkit-transform: translate3d(0, -200%, 0);
         transform: translate3d(0, -200%, 0);
    }
}
 @-webkit-keyframes anim-effect-4-2 {
     0% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
     45%, 55% {
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
         -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
         animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }
     100% {
         -webkit-transform: translate3d(0, -200%, 0);
         transform: translate3d(0, -200%, 0);
    }
}
 @keyframes anim-effect-4-2 {
     0% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
     45%, 55% {
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
         -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
         animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }
     100% {
         -webkit-transform: translate3d(0, -200%, 0);
         transform: translate3d(0, -200%, 0);
    }
}
 @-webkit-keyframes anim-effect-4-3 {
     0% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
     45%, 55% {
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
         -webkit-animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
         animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    }
     100% {
         -webkit-transform: translate3d(0, -200%, 0);
         transform: translate3d(0, -200%, 0);
    }
}
 @keyframes anim-effect-4-3 {
     0% {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
     45%, 55% {
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
         -webkit-animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
         animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    }
     100% {
         -webkit-transform: translate3d(0, -200%, 0);
         transform: translate3d(0, -200%, 0);
    }
}
/* ------------------------------------- */
/* 3. Home ............................. */
/* ------------------------------------- */
 .logo {
     position: absolute;
     left: 1%;
     top: 2%;
     max-width: 100px;
}
 section {
     background-position: center center;
     background-size: cover;
     height: 90%;
     left: 5%;
     top: 5%;
     width: 90%;
     overflow: hidden;
     position: absolute;
     z-index: 0;
     opacity: 0;
     box-shadow: 7px 0 15px rgba(0, 0, 0, 0.2), -7px 0 15px rgba(0, 0, 0, 0.2);
     transition: background-color 1500ms linear 0s, box-shadow 1500ms linear 1000ms;
     -webkit-animation: fadeOut 1s linear 1 forwards;
     -moz-animation: fadeOut 1s linear 1 forwards;
     -o-animation: fadeOut 1s linear 1 forwards;
     animation: fadeOut 1s linear 1 forwards;
}
 section.active {
     opacity: 1;
     z-index: 1;
     -webkit-animation: fadeIn 1s linear 1 forwards;
     -moz-animation: fadeIn 1s linear 1 forwards;
     o-animation: fadeIn 1s linear 1 forwards;
     animation: fadeIn 1s linear 1 forwards;
}
/*Theme Color*/
 section#about {
     background-color: #8DA68B;
}
/*l Color #19233e*/
 .link-background.left::before {
     background-color: #8DA68B;
}
 section#contact {
     background-color: #CEB07B;
}
/*Contact Color #F57E60*/
 .link-background.right::before {
     background-color: #CEB07B;
}
 section#work {
     background-color: #788DA5;
}
/*work Color #F57E60*/
 .link-background.left1::before {
     background-color: #788DA5;
}
 section#services {
     background-color: #A56B6B;
}
/*Services Color #F57E60*/
 .link-background.left2::before {
     background-color: #A56B6B;
}
 .page-inner aside, .page-inner div.content {
     float: left;
     height: 100%;
     overflow: hidden;
     width: 50%;
}
 .page-inner aside {
     overflow: hidden;
     background-position: center center;
     background-size: cover;
     transition: right 1s ease 1s, opacity 1s ease 1s;
}
 .page-inner div.content {
     opacity: 1;
     position: relative;
     right: 0;
     transition: right 1s ease 0s, opacity 1s ease 0s;
}
 .page-inner div.content > div {
     background-color: #fdfdfd;
     box-sizing: border-box;
     height: 100%;
     padding: 60px;
     position: relative;
}
 .page-inner div.content, .page-inner div.content > p {
     color: #4b3c48;
}
 .page-inner.in aside {
     opacity: 0;
}
 .page-inner.in div.content {
     opacity: 0;
     right: -500px;
}
 .page-inner.out div.content {
     opacity: 0;
     right: -500px;
     transition: right 1s ease 1s, opacity 1s ease 1s;
}
 .page-inner.out aside {
     opacity: 0;
     transition: right 1s ease 0s, opacity 1s ease 0s;
}
 .page-inner aside .btn-gray {
     position: absolute;
     top: 0;
}
 .home-overlay {
     position: relative;
	 opacity: 0.5;
     height: 100%;
     width: 100%;
     overflow: visible;
     -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
     -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
     -ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
     -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
     transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
     z-index: 0;
}
 .btn-lg {
     height: 50px;
     line-height: 46px;
     min-width: 200px;
}
 .btn-filled {
     background: #3b3be8;
}
.image-video{
   width: 100%;
   height: 100vh;
   display: block;
   position: relative;
}
.video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.video-container video {
    min-width: 100%;
    width: 102%;
    height: auto;
    min-height: 102%;
    object-fit: cover;
}  
 .image-background {
     position: relative;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     height: 100%;
     width: auto;
     overflow: hidden;
}
 .header-content {
     text-align: center;
     position: absolute;
     top: 50%;
     left: 25%;
     z-index: 1;
     transform: translateX(-50%) translateY(-50%);
     text-shadow: 1px 1px 8px rgba(150, 150, 150, 0.8);
}
 .header-content h2{
     font-size: 60px;
     line-height: 70px;
     font-weight: 700;
     letter-spacing: 1px;
}
 .header-content h8{
     font-size: 60px;
     line-height: 70px;
     font-weight: 700;
     letter-spacing: 1px;
}
 h2.hero-text {
     font-size: 30px;
	 font-weight: 600;
}
h8.hero-text {
     font-size: 25px;
	 font-weight: 600;
}
/* ------------------------------------- */
/* 4. Other Pages ...................... */
/* ------------------------------------- */
 .link {
     position: fixed;
     width: 40px;
     height: 150px;
     top: calc(50vh - 75px);
     z-index: 99;
     transition: all 2s;
     font-family: "Poppins", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
     font-weight: 700;
     font-size: 15px;
}
 .link p {
     font-family: "Poppins", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
     font-weight: 700;
     font-size: 15px;
}
 .link p:hover {
     color: #fdfdfd;
}
 .link.left {
     left: -200px 
}
 .link.left1 {
     left: -200px
}
 .link.left2 {
     left: -200px
}
 .link.right {
     right: -200px 
}
 .link.left:hover+.link-background {
     background-position: center center;
     transform: translate3d(100px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1)
}
 .link.left1:hover+.link-background {
     background-position: center center;
     transform: translate3d(100px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1)
}
 .link.left2:hover+.link-background {
     background-position: center center;
     transform: translate3d(100px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1)
}
 .link.left:hover, .link.right:hover, .link.left1:hover, .link.left:hover .lmenu, .link.right:hover .rmenu, .link.left1:hover .l1menu, .link.left2:hover .l2menu {
     transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link.left:hover .lmenu-line {
     border-bottom: 1px solid #b7b7b7;
     transform: translate3d(-200px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link.left1:hover .l1menu-line {
     border-bottom: 1px solid #b7b7b7;
     transform: translate3d(-200px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link.left2:hover .l2menu-line {
     border-bottom: 1px solid #b7b7b7;
     transform: translate3d(-200px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link.right:hover .rmenu-line {
     border-bottom: 1px solid #b7b7b7;
     transform: translate3d(200px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link.left:hover .lmenu:before {
     transform: translate3d(-100px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link.left1:hover .l1menu:before {
     transform: translate3d(-100px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link.left2:hover .l2menu:before {
     transform: translate3d(-100px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link.right:hover .rmenu:after {
     transform: translate3d(100px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link.right:hover+.link-background {
     background-position: center center;
     transform: translate3d(-100px, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link-background {
     position: fixed;
     width: 60px;
     height: 100vh;
     top: 0;
     background-size: auto 100%;
     z-index: 3 
}
 .link-background::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: #fdfdfd;
     opacity: 0.94;
}
 .link-background.left {
     left: -100px;
     background-position: 65% center;
     transition: all 1.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link-background.left1 {
     left: -100px;
     background-position: 65% center;
     transition: all 1.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link-background.left2 {
     left: -100px;
     background-position: 65% center;
     transition: all 1.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link-background.right {
     right: -100px;
     background-position: 35% center;
     transition: all 1.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .link-box {
     position: relative;
     -webkit-writing-mode: vertical-rl;
     -ms-writing-mode: tb-rl;
     writing-mode: vertical-rl;
     white-space: nowrap 
}
 .link-box-left, .link-box-right, .link-box-left1, .link-box-left2 {
     display: block;
     width: 40px;
     height: 150px;
     transform: translate3d(0, 0, 0);
     transition: all 2.5s 
}
 .lmenu, .rmenu, .l1menu, .l2menu {
     letter-spacing: 5.5px;
     color: #050505;
     transition: all 1.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .lmenu::before {
     content: "";
     position: absolute;
     width: 15px;
     top: 70px;
     left: -1px;
     border-bottom: 1px solid #050505;
     transform: translate3d(0, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .l1menu::before {
     content: "";
     position: absolute;
     width: 15px;
     top: 70px;
     left: -1px;
     border-bottom: 1px solid #050505;
     transform: translate3d(0, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .l2menu::before {
     content: "";
     position: absolute;
     width: 15px;
     top: 70px;
     left: -1px;
     border-bottom: 1px solid #050505;
     transform: translate3d(0, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}

 .rmenu {
     padding-right: 20px;
}
 .rmenu::after {
     content: "";
     position: absolute;
     width: 15px;
     top: 70px;
     right: -1px;
     border-bottom: 1px solid #050505;
     transform: translate3d(0, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) 
}
 .lmenu-line-box, .rmenu-line-box, .l1menu-line-box, .l2menu-line-box {
     position: absolute;
     width: 110px;
     height: 30px;
     z-index: -1;
     top: 38%;
     pointer-events: none;
     left: 0 
}
 .rmenu-line-box {
     right: 15px 
}
 .lmenu-line-mask {
     position: relative;
     width: 60px;
     height: 30px;
     overflow: hidden;
     right: -17px;
}
 .l1menu-line-mask {
     position: relative;
     width: 60px;
     height: 30px;
     overflow: hidden;
     right: -17px;
}
 .l2menu-line-mask {
     position: relative;
     width: 60px;
     height: 30px;
     overflow: hidden;
     right: -17px;
}
 .rmenu-line-mask {
     position: relative;
     width: 60px;
     height: 30px;
     overflow: hidden;
     right: 50px;
}
 .lmenu-line, .rmenu-line, .l1menu-line, .l2menu-line {
     position: absolute;
     width: 200px;
     border-bottom: 1px solid #050505;
     display: inline-block;
     margin-top: 13px;
     transform: translate3d(0, 0, 0);
     transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
     right: -200px 
}
 .rmenu-line {
     right: 204px 
}
 .no-gutter {
     margin-right: 0;
     margin-left: 0;
}
 .no-gutter > [class*='col-'] {
     padding-right: 0;
     padding-left: 0;
}
 .full-width {
     margin-left: -40px;
     margin-right: -40px;
}
 #body-container .content {
     left: 50%;
     top: 50%;
     opacity: 1;
     padding: 0 4%;
     position: absolute;
     transform: translateX(-50%) translateY(-50%);
     transition: all 0.3s cubic-bezier(0, 0, 0.58, 1) 0s;
     visibility: visible;
     width: 100%;
}
 .services, .service-img {
     display: flex;
     flex-direction: column;
     justify-content: center;
     background-color: #fdfdfd;
     position: relative;
}
 .service-img {
     background-position: 20% 0;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     z-index: 0;
     height: 50vh;
     overflow: hidden;
}
 .page-inner .service-header {
     color: #4b3c48;
     font-size: 14px;
     font-weight: bold;
     line-height: 1.8;
     padding: 20px;
     position: relative;
     z-index: 1;
     text-align: center;
}
 .page-inner .service-header strong {
     display: block;
     font-size: 48px;
     font-weight: bold;
     line-height: 1.4;
}
 .page-inner .service-header1 {
     color: #4b3c48;
     font-size: 14px;
     font-weight: bold;
     line-height: 1.8;
     padding: 20px;
     position: relative;
     z-index: 1;
     text-align: center;
}
 .page-inner .service-header1 strong {
     display: block;
     font-size: 48px;
     font-weight: bold;
     line-height: 1.4;
}
 .back-number {
     color: #cccccc;
     font-family: Poppins, Helvetica, Arial, sans-serif;
     font-size: 160px;
     font-weight: 700;
     left: 0;
     line-height: 1;
     opacity: 0.4;
     position: absolute;
     text-align: center;
     top: -40px;
     width: 100%;
     z-index: 0;
}
 .service-header h3 {
     font-size: 1.66667rem;
     font-weight: 700;
     margin: 0 0 60px;
     position: relative;
     z-index: 1;
}
 .service-header h3::after {
     border-top: 3px solid;
     bottom: 0;
     content: " ";
     display: block;
     margin: auto;
     position: relative;
     top: 10px;
     width: 60px;
}
 .service-header1 h3 {
     font-size: 1.66667rem;
     font-weight: 700;
     margin: 0 0 60px;
     position: relative;
     z-index: 1;
}
 .service-header1 h3::after {
     border-top: 3px solid;
     bottom: 0;
     content: " ";
     display: block;
     margin: auto;
     position: relative;
     top: 10px;
     width: 60px;
}
 .icon {
     display: inline-block;
     font-size: 40px;
}
 .feature {
     margin-top: 20px;
}
/* ------------------------------------- */
/* 5. Gallery........................... */
/* ------------------------------------- */
 .gallery {
     position: relative;
     z-index: 2;
}
 .portfolio-grid {
     list-style: outside none none;
     margin: 0;
     padding: 0;
}
 .portfolio-grid figure {
     box-sizing: border-box;
     float: left;
     margin: 0;
     width: 50%;
     padding: 2px;
     display: inline-table;
     -webkit-transition: opacity 0.2s;
     transition: opacity 0.2s;
     position: relative;
}
 .portfolio-grid figcaption {
     bottom: 35px;
     opacity: 0;
     position: absolute;
     z-index: 1;
     text-align: center;
     width: 100%;
     transition: all .3s ease;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
}
 .portfolio-grid figure img {
     display: block;
     width: 100%;
     height: auto;
     opacity: 1;
     cursor: pointer;
}
 .portfolio-grid figcaption h4 {
     margin: 0 0 4px;
     padding: 0;
     font-size: 16px;
     text-transform: uppercase;
     font-weight: 400;
     color: #fdfdfd;
     letter-spacing: 1px;
}
 .portfolio-grid figcaption p {
     display: block;
     font-size: 11px;
     text-transform: uppercase;
     text-decoration: none;
     color: #aeaeae;
     margin-bottom: 0 
}
 .portfolio-grid figure:hover .gallery-img {
     background-color: #050505;
}
 .gallery-img {
     opacity: 1;
     transition: all 0.3s ease 0s;
     overflow: hidden;
}
.portfolio-grid a .gallery-img {
     position: relative;
     z-index: 0;
     display: block 
}
 .portfolio-grid figure:hover img {
     -ms-transform: scale(1.1,1.1);
     -webkit-transform: scale(1.1,1.1);
     transform: scale(1.1,1.1);
     transition: all .3s ease;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     opacity: 0.15;
     cursor: url("../img/icon-zoom-white.png"), pointer;
}
 .portfolio-grid figure:hover figcaption {
     opacity: 1;
     transition: all .3s ease;
     -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
     cursor: url("../img/icon-zoom-white.png"), pointer;
}
 #map {
     height: 300px;
     width: 100%;
     color: #3f3f3f !important;
}
/* ------------------------------------- */
/* 6. Buttons........................... */
/* ------------------------------------- */
 .fill-btn {
     background-color: #050505;
     color: #fdfdfd;
}
 .fill-btn:hover {
     background-color: #F57E60;
     color: #fdfdfd !important;
}
 .empty-btn {
     border-color: #050505;
     color: #fdfdfd;
}
 a.empty-btn:hover {
     border-color: #ea4452;
     background-color: #ea4452;
     color: #fdfdfd;
}
 .btn-close {
     display: inline-block;
     text-align: center;
     text-decoration: none;
     vertical-align: middle;
     background-color: #fdfdfd;
     position: absolute;
     height: 40px;
     width: 40px;
     color: #a56b6b;
     left: calc(50% - 40px);
     z-index: 3;
	 box-shadow: 0px 0px 5px 1px #4A4A4A;
}
 .btn-close::before, .btn-close::after {
     background-color: #a56b6b;
     content: "";
     height: 10px;
     left: 50%;
     position: absolute;
     width: 1px;
}
 .btn-close::before, .btn-close::after {
     height: 16px;
     margin-top: -8px;
     top: 50%;
     transform-origin: center center 0;
     transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
}
 .btn-close::before {
     transform: rotate(45deg);
     transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}
 .btn-close::after {
     transform: rotate(-45deg);
}
 .btn-close:hover::before {
     transform: rotate(135deg);
}
 .btn-close:hover::after {
     transform: rotate(45deg);
}
.btn-close1 {
     display: inline-block;
     text-align: center;
     text-decoration: none;
     vertical-align: middle;
     background-color: #fdfdfd;
     position: absolute;
     height: 40px;
     width: 40px;
     color: #8D1E20;
     left: calc(50% - 40px);
     z-index: 3;
}
 .btn-close1::before, .btn-close1::after {
     background-color: #8D1E20;
     content: "";
     height: 10px;
     left: 50%;
     position: absolute;
     width: 1px;
}
 .btn-close1::before, .btn-close1::after {
     height: 16px;
     margin-top: -8px;
     top: 50%;
     transform-origin: center center 0;
     transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
}
 .btn-close1::before {
     transform: rotate(45deg);
     transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}
 .btn-close1::after {
     transform: rotate(-45deg);
}
 .btn-close1:hover::before {
     transform: rotate(135deg);
}
 .btn-close1:hover::after {
     transform: rotate(45deg);
}
 .t-btn {
     position: relative;
     display: inline-block;
     border: none;
     background: none;
     font-family: "Poppins", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
     font-size: 10px;
     letter-spacing: 0.15em;
     font-weight: 300;
     font-size: 12px;
     line-height: 30px;
     text-transform: uppercase;
     text-align: center;
     color: #fdfdfd;
     margin: 10px 0 0 0;
     padding: 5px 25px;
     height: 40px;
     background: #050505;
     border: none;
     -webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     outline: none;
}
 .t-btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: rgba(219, 0, 24, 0.5);
     color: #fdfdfd;
     -webkit-transform-origin: right center;
     -moz-transform-origin: right center;
     -ms-transform-origin: right center;
     transform-origin: right center;
     -webkit-transform: scale(0, 1);
     -moz-transform: scale(0, 1);
     -ms-transform: scale(0, 1);
     -o-transform: scale(0, 1);
     transform: scale(0, 1);
     -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
 .t-btn:hover::before, a:hover .t-btn::before {
     -webkit-transform-origin: left center;
     -moz-transform-origin: left center;
     -ms-transform-origin: left center;
     transform-origin: left center;
     -webkit-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     -o-transform: scale(1, 1);
     transform: scale(1, 1);
}
 .t-btn:hover {
     color: #fdfdfd;
}
 .t-btn span {
     display: inline-block;
     position: relative;
     z-index: 2;
}
 .t-btn.large {
     width: 200px;
}
/* ------------------------------------- */
/* 7. Contact .......................... */
/* ------------------------------------- */
 .info-contact {
     margin-bottom: 30px;
}
 .info-contact .item-map {
     padding: 0;
}
 .info-contact .item-map:first-child {
     padding-left: 15px;
}
 .info-contact .item-map:last-child {
     padding-right: 15px;
}
 .info-contact .item-map .contact-item1 {
     padding: 15px 0;
     font-size: 14px;
     text-align: center;
}
 .info-contact .item-map .contact-item1 i {
     color: #3f3f3f;
     font-size: 2em;
}
 .info-contact .item-map .contact-item1 a {
     font-weight: 600;
     color: #757A86;
}
 .info-contact .item-map .contact-item1 a:hover {
     color: #00c8aa;
}
 .info-contact .item-map .contact-item2 {
     padding: 15px 0;
     font-size: 14px;
     text-align: center;
}
 .info-contact .item-map .contact-item2 i {
     color: #3f3f3f;
     font-size: 2em;
}
 .info-contact .item-map .contact-item2 a {
     font-weight: 600;
     color: #757A86;
}
 .info-contact .item-map .contact-item2 a:hover {
     color: #00c8aa;
}
 .info-contact .item-map .contact-item3 {
     padding: 15px 0;
     font-size: 14px;
     text-align: center;
}
 .info-contact .item-map .contact-item3 i {
     color: #3f3f3f;
     font-size: 2em;
}
 .info-contact .item-map .contact-item3 a {
     font-weight: 600;
     color: #757A86;
}
 .info-contact .item-map .contact-item3 a:hover {
     color: #00c8aa;
}
 .contact-form {
     margin-top: 80px;
}
 #contact-form {
     margin-top: 40px;
}
 #contact-form .form-control {
     background: #fdfdfd;
     border: 1px solid rgba(0, 0, 0, 0.1);
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -ms-border-radius: 0;
     border-radius: 0;
     box-shadow: none;
     font-weight: 400;
     outline: medium none;
     height: 40px;
     width: 100%;
     color: #050505;
     -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     text-align: left;
}
 #contact-form .form-control:hover, #contact-form .form-control:focus {
     box-shadow: none;
}
 #contact-form .form-control::-webkit-input-placeholder {
     color: #747c83 !important;
}
 #contact-form .form-control::-moz-placeholder {
     color: #747c83 !important;
}
 #contact-form .form-control:-moz-placeholder {
     color: #747c83 !important;
}
 #contact-form .form-control:-ms-input-placeholder {
     color: #747c83 !important;
}
 #contact-form textarea.form-control {
     min-height: 150px;
}
 #contact-form button#valid-form {
     width: 100%;
}
 .antispam {
     display: none;
}
 #block-reply {
     min-height: 60px;
     margin-top: 1em;
     text-align: center;
     color: #757A86;
}
 #block-reply .icon {
     font-size: 18px;
}
 .success-message, .error-message {
     color: #757A86;
}
 .success-message p, .error-message p {
     color: #757A86 !important;
}
 .success-message .ion-checkmark-round, .error-message .ion-checkmark-round {
     color: #27AE60;
}
 .error-message .ion-close-round {
     color: #FF1D4D;
}
/* ------------------------------------- */
/* 8. Footer ........................... */
/* ------------------------------------- */
 .social-icons {
     position: absolute;
     right: 1%;
     bottom: 1%;
     display: block;
     z-index: 9;
     width: auto;
     overflow: hidden;
     white-space: nowrap;
     -webkit-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     -moz-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     -ms-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     -o-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
}
 .social-icons i {
     color: #3f3f3f;
     -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
}
 .social-icons a {
     width: 40px;
     height: 22px;
     line-height: 22px;
     letter-spacing: 0;
     background: transparent;
     font-size: 12px;
     font-weight: 300;
     display: inline-block;
     text-align: center;
     float: left;
     margin-right: 2px;
     border: none;
     -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
}
 .social-icons a:hover {
     color: #00c8aa;
     background: transparent;
}
 .social-icons a:hover i {
     color: #00c8aa;
     -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
     -ms-transform: scale(1.2);
     -o-transform: scale(1.2);
     transform: scale(1.2);
}

 .lang-icons {
     position: absolute;
     right: 1%;
     bottom: 95.5%;
     display: block;
     z-index: 9;
     width: auto;
     overflow: hidden;
     white-space: nowrap;
     -webkit-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     -moz-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     -ms-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     -o-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
}
 .lang-icons i {
     color: #3f3f3f;
     -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
}
 .lang-icons a {
     width: 40px;
     height: 22px;
     line-height: 22px;
     letter-spacing: 0;
     background: transparent;
     font-size: 12px;
     font-weight: 300;
     display: inline-block;
     text-align: center;
     float: left;
     margin-right: 2px;
     border: none;
     -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
     transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
}
 .lang-icons a:hover {
     color: #00c8aa;
     background: transparent;
}
 .lang-icons a:hover i {
     color: #00c8aa;
     -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
     -ms-transform: scale(1.2);
     -o-transform: scale(1.2);
     transform: scale(1.2);
}

 .copyright {
     position: absolute;
     left: 1%;
     bottom: 1%;
     display: block;
     z-index: 9;
     width: auto;
     overflow: hidden;
     white-space: nowrap;
     -webkit-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     -moz-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     -ms-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     -o-transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
     transition: all 0.7s cubic-bezier(0.42, 0, 0.58, 1);
}
 .copyright p {
     font-size: 11px;
     font-weight: 100;
     letter-spacing: 1px;
     color: #757A86;
}
/* ------------------------------------- */
/* 9. Media Queries .................... */
/* ------------------------------------- */
/* Large Devices, Wide Screens */
/* Notebook devices */
@media only screen and (max-width: 2880px) {
	 h1.hero-text {
		 margin-top: 5%;
    }
	 .info-contact {
		 
	 }
/* Medium Devices, Desktops */
 @media only screen and (max-width: 1024px) {
	 h1.hero-text {
         font-size: 46px;
         line-height: 1.2;
    }
     h2.hero-text {
         font-size: 16px;
         line-height: 20px;
    }
	 h7.hero-text {
         font-size: 46px;
         line-height: 1.2;
    }
	 h8.hero-text {
         font-size: 16px;
         line-height: 20px;
    }
     .overlay {
         left: 0;
         width: 100%;
         height: 100%;
    }
     .logo {
         left: 50%;
         -webkit-transform: translateX(-50%);
         -moz-transform: translateX(-50%);
         -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
         transform: translateX(-50%);
         margin: 15px 0px 15px -40%;
    }
	
}
/* Small Devices, Tablets */
 @media only screen and (max-width: 768px) {
     h1.hero-text {
         font-size: 40px;
		 margin-top: 20%;
    }
	 h7.hero-text {
         font-size: 40px;
		 margin-top: 60%;
    }
	  h2.hero-text {
		  font-size: 12px;
		  margin-top: -15px;

    }
	 .imp-ds{
		 display: none;
	 }
	 	 .content{
		height: 450px;
	 }
     .copyright {
         left: 50%;
         transform: translateX(-50%);

    }
     .social-icons {
         right: 50%;
         transform: translateX(50%);
         bottom: 30px;
    }
	 	 .about_content {
		 box-shadow: 7px 0 15px rgba(0, 0, 0, 0.2), -7px 0 15px rgba(0, 0, 0, 0.2);
		  margin-top: 50px;	
	 }
	  .services_content {
		 box-shadow: 7px 0 15px rgba(0, 0, 0, 0.2), -7px 0 15px rgba(0, 0, 0, 0.2);
		  margin-top: 50px;
	 }
	  .work_content {
		 box-shadow: 7px 0 15px rgba(0, 0, 0, 0.2), -7px 0 15px rgba(0, 0, 0, 0.2);
	 }
     .social-icons a {
         width: 25px;
    }
	 .lang-icons {
		margin-right: 2%;
    }
	 .lang-icons a {
         width: 30px;
		 margin-bottom: -5%;
		 margin-left: -2%;
    }
  	 .portfolio-grid figure{
     	width: 100%;
  } 
	 .logo{
		 max-width: 50px;
         transform: translateX(390%) translateY(0%);
         bottom: 30px;
	 }
	 .service-img{
		width: 100%; 
	 }
	 .padding-top-30px {
     padding-top: 20px;
}
	 .margin-top-bottom-50px{
		 margin-top: 10px;
	 }
	 
/* Extra Small Devices, Phones */
 @media only screen and (max-width: 480px) {
     h1.hero-text {
         font-size: 30px;
		 margin-top: 35%;
    }
     h2.hero-text {
         font-size: 16.5px;
		 font-weight: 500;
		 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		 line-height: 18px;
		 margin-top: 0;
    }
	 h7.hero-text {
         font-size: 30px;
		 margin-top: 35%;
    }
	 h8.hero-text {
         font-size: 14px;
		 font-weight: 400;
		 line-height: 14px;

    }
	 h8 {
         font-size: 14px;
		 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		 line-height: 14px
    }
	 h2 {
         font-size: 18px;
		 font-weight: 500;
		 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		 line-height: 20px;
    }
	 .content{
		height: auto;
	 }
	 .about_content {
		 box-shadow: 7px 0 15px rgba(0, 0, 0, 0.2), -7px 0 15px rgba(0, 0, 0, 0.2);
		  margin-top: 50px;	
	 }
	  .services_content {
		 box-shadow: 7px 0 15px rgba(0, 0, 0, 0.2), -7px 0 15px rgba(0, 0, 0, 0.2);
		  margin-top: 50px;
	 }
	  .work_content {
		 box-shadow: 7px 0 15px rgba(0, 0, 0, 0.2), -7px 0 15px rgba(0, 0, 0, 0.2);
	 }
     .social-icons a {
         width: 25px;
    }
	 	 .lang-icons {
		 margin-bottom: 0;
    }
	 .lang-icons {
		 margin-bottom: -2%;
    }
  	 .portfolio-grid figure{
     	width: 100%;
  } 
	 .logo{
		 max-width: 60px;
         transform: translateX(100%) translateY(5%);
         bottom: 30px;
	 }
	 .service-img{
		width: 100%; 
	 }
	 .padding-top-30px {
     padding-top: 20px;
}
	 .margin-top-bottom-50px{
		 margin-top: 10px;
	 }
	 p{
		font-size: 14px;
		 font-weight: 500;
	 }
	  .info-contact .contact-item1 {
		 margin-left: -7%;
	 }
	  .info-contact .contact-item12 {
	
	 }
	  .info-contact .contact-item3 {
		 margin-left: 5%;
	 }
	 .imp-ds {
		 display: none;
	 }

	 }
/*	 .col-sm-12{
		 box-shadow: 0px 0px 10px 0px #717171;
	 }
	 }
/* Only for tablet in landscape mode */
/* Only for phone in landscape mode */
 @media screen and (max-device-width: 667px) and (orientation: landscape) {
     h1.hero-text {
         font-size: 30px;
		 		 margin-top: 35%;
    }
     h2.hero-text {
         font-size: 16px;
    }
	 h7.hero-text {
         font-size: 30px;
    }
	 h8.hero-text {
         font-size: 16px;
    }
	 .lang-icons {
		 margin-bottom: -3%;
    }
	.lang-icons a {
		 margin-bottom: ;
    }
	.logo {
	 margin: 15px 0px 15px -35%;
}
	  .info-contact .contact-item1 {
		 margin-left: -3%;
	 }
	  .info-contact .contact-item12 {
	
	 }
	  .info-contact .contact-item3 {
		 margin-left: 3%;
	 }

}
 @media (max-width: 1000px) {
     #body-container {
         height: 100%;
    }
     .page-inner div.content > div {
         padding: 30px;
         overflow: hidden;
    }
     .full-width {
         margin-left: -15px;
         margin-right: -15px;
    }
     section {
         position: relative;
         overflow: visible;
         opacity: 1;
         height: auto;
         -webkit-animation: fadeIn 1s linear 1 forwards;
         -moz-animation: fadeIn 1s linear 1 forwards;
         o-animation: fadeIn 1s linear 1 forwards;
         animation: fadeIn 1s linear 1 forwards;
    }
     .page-inner aside, .page-inner div.content {
         width: 100%;
         overflow: visible;
    }
     section#about, section#work, section#services {
         margin-top: 50px;
    }
     .service-img {

    }
     .link {
         display: none;
    }
     .header-content {
         width: 100%;
    }
     .before-after-line::before, .before-after-line::after {
         margin: 0 12px;
         width: 12px;
    }
     .opacity-0 {
         opacity: 1;
    }
     .hero-text.opacity-0 {
         opacity: 0;
    }
     #about aside.bg, #contact aside.bg, #work aside.bg, #services aside.bg {
         display: none;
    }
     .btn-close {
         display: none;
    }
	 .logo {
	 margin: 15px 0px 15px -35%;
}

}
	 }
}