/*font-family: 'Share Tech Mono', monospace; 'Playfair Display', serif;*/
/***** Global Classes and declarations *****/
body { font-size: 62.5%; font-family:  'Share Tech Mono', monospace; font-weight: 400; }
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, input { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; outline: none; }
a.selected { }
a:hover.selected { text-decoration: none; }
/*a:visited{ color:#60615f; text-decoration:underline;}*/
img { border: none; }
html { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
p, input, a { color: #fff }
h1 { font-size: 1.8em; line-height: 1.2em; }
h2 { font-size: 1.5em; }
h3, h3 a { font-size: 1.2em; }
h4, h4 a { font-size: 1.2em; }
h5, h5 a { font-size: 1.2em; }
h6, h6 a { font-size: 1.2em; }
h3 a, h4 a, h5 a, h6 a { font-size: 1em; text-decoration: underline; }
table, table tr td, table tr th { border: none }
.clearfix:after { content: "."; /*display: block;*/ clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix {/*display: inline-block;*/ }
* html .clearfix { height: 1%; }
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: none; -webkit-border-radius: 0; -webkit-overflow-scrolling: touch; outline: none }
.clear { font-size: 1%; height: 0; line-height: 0; width: 0; float: none; clear: both; }
html[xmlns] .clearfix {/*display: block;*/ }
input { outline: none }
article, aside, canvas, details, figcaption, figure, main, footer, header, hgroup, menu, nav, section, summary, mark { display: block; width: 100%; float: left; }
strong { font-weight: normal }
* { box-sizing: border-box }
h1, h2, h3, h4, h5, h6 { width: 100%; float: left; font-weight: normal; }
p{width: 100%; float: left;}
/***** Global Classes and declarations *****/
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.hide{display: none !important}
.middleWrapper{width: 1400px; margin: 0 auto;}
.container{width: 100%; float: left;}
header{position: fixed; left: 0; top: 0; z-index: 3; background:#000}
.home header{background:none;}
.home.scrollActive header{background:#000;}
.home .bannerText h2, .home .bannerText h2 span{opacity:0; -webkit-transition:all ease 1s; -moz-transition:all ease 1s; transition:all ease 1s; position:relative; left:50px;}
.home .bannerText h2.active{opacity:1; left:0}
.home .bannerText h2.active span{opacity:1; left:0}
header .container{padding: 20px 0}
header nav{width: auto; float: right;}
ul.navUL, ul.navUL li, ul.navUL li a{width: auto; float: left}
ul.navUL li{margin: 0 0 0 25px;}
ul.navUL li a{font-size:1.8em; padding: 5px;-webkit-transition:all ease 0.3s; -moz-transition:all ease 0.3s;  transition:all ease 0.3s;}
ul.navUL li a:hover, ul.navUL li a.active{color:#9c9c9c;}

footer {height: 100vh; position: relative; overflow: hidden}
.space-content, .space-img{width: 50%; float: left; height: 100%; overflow: hidden}
.space-img {position:relative; background-position:center center; background-size:cover;}
.space-img h2{font-size:5em; color:#fff; position:absolute; right:100px; top:50px; z-index:2; text-align:right; font-family:'Playfair Display', serif; font-weight:700;}
.space-img.spaceRight h2{right:auto; left:100px; text-align:left;}
.spaceRight{float: right !important}
.spaceLeft{float: left !important}
.space-img img{height: 100%; float: left; visibility:hidden}
.space-content{display: table;}
.space-content .wrapper{width: 80%; float: right; padding: 0 80px;}
.space-content .wrapper h2{font-size: 2em; text-transform: uppercase; color: #000000; margin: 0 0 5px 0; letter-spacing:1px; }
.space-content .wrapper p{font-size: 1.6em; color: #5e6469; line-height: 1.5em; letter-spacing:1px;  }
.space-content .wrapper p a{color: #5e6469; font-size: 1em; }
.space{width: 100%; float: left; margin: 25px 0;}
.vMid{display: table-cell; vertical-align: middle; }

article{height: 100vh;}
.brandsWrapper .space-content{background: #000;  }

ul.brandUL{width: 100%; float: left}
ul.brandUL li{width: 85px; float: left; margin: 5px;}
ul.brandUL li a{width: 100%; float: left}
ul.brandUL li img{width: 100%; float: left}

/************ slider *********/
article.banner{height: 100vh; padding: 0 ; position: relative; }
ul.bannerUL, ul.bannerUL li{float: left; width: 100%; height: 100%;  }
.home ul.bannerUL, .home ul.bannerUL li{height:100vh;}
.owl-carousel .owl-stage {  overflow: hidden;}
ul.bannerUL li{background-position: center center; background-size: cover;}
ul.bannerUL.workBanner li{background:#000 !important;}
ul.bannerUL li img{float: left; height: 100vh; width: auto; max-width: 100%; max-height: 100%;  position: relative; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%); left: 50%; top: 50%; visibility: hidden; display: none}
ul.bannerUL .owl-item.active img{z-index: 1}
.bannerText{width: auto; height: 100vh; position: absolute; left: 50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); top: 0; display: table; text-align: center; z-index: 1; min-width:400px;}
.innerpages .bannerText{max-width:400px;}
.bannerText h2{width: 100%; float: left; color: #fff; font-size: 4.8em; font-family: 'Playfair Display', serif; text-align:left; font-weight:700; letter-spacing:9px;}
.bannerText h2 span{color: #fff; position: relative; z-index: 1; display: block; border: none; padding: 0; clear:left; font-size:1.9em; margin:-5px 0 0 0; text-transform: none; font-weight:400; font-style:italic; letter-spacing:normal;}
.home .bannerText {left:75%; min-width:600px;}
.vMid{display: table-cell; vertical-align: middle;  }
.shareStory{position: absolute; left: 50%; bottom: 20px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);  z-index: 1; }
a.btnStyle{width:auto; height: 60px; line-height: 60px;  color: #fff; text-transform: uppercase; font-size: 1.6em; display: table;  margin: 0 auto 70px auto; position: relative; letter-spacing: 1px; }
a.btnStyle:after{width: 100%; height: 100%; border: 1px solid #fff; content: ''; display: block; position: absolute; left: -2px; top: -2px; z-index: -1}
a.btnStyle:before{width: 100%; height: 100%; border:1px solid #fff; content: ''; display: block; position: absolute; left: 3px; top: 3px; z-index: -1}
a.btnStyle span{overflow: hidden; float: left; width: 100%; position: relative; padding: 0 60px;}
a.btnStyle span:before{width: 100%; height: 100%;background: #fff; content: ''; display: block; position: absolute; top: 4px; z-index: -1; left: -100%;}
a.btnStyle:hover{color: #d8132b}
a.btnStyle:hover span:before{left: 4px; top: 4px;}
a.scrollDown{width: auto; margin: 0 auto; display: table; color: #ffffff; text-transform: uppercase; font-size: 1.2em; position: relative; padding: 60px 0 0 0; letter-spacing: 1px;}
a.scrollDown:after{width: 28px; height: 50px; content: ''; display: block; position: absolute; border: 1px solid #fff; left: 50%; top: 0; margin: 0 0 0 -15px;  border-radius: 50px;}
a.scrollDown:before{width: 5px; height: 10px; content: ''; display: block; position: absolute; background: #fff; left: 50%; top: 10px; margin: 0 0 0 -2px; border-radius: 10px; -webkit-animation:scrollDownAnim 0.8s linear infinite; -moz-animation:scrollDownAnim 0.8s linear infinite; animation:scrollDownAnim 1.2s linear infinite;} 

@-webkit-keyframes scrollDownAnim {
  0%   { opacity: 0; top: 10px; }
  100% { opacity: 1; top: 30px; }
}
@-moz-keyframes scrollDownAnim {
  0%   { opacity: 0; top: 10px; }
  100% { opacity: 1; top: 30px; }
}
@-o-keyframes scrollDownAnim {
  0%   { opacity: 0; top: 10px; }
  100% { opacity: 1; top: 30px; }
}
@keyframes scrollDownAnim {
  0%   { opacity: 0; top: 10px; }
  100% { opacity: 1; top: 30px; }
}

/* scaleUp */

.flipInX {
  -webkit-animation: scaleUpFrom 1s ease both;
  -moz-animation: scaleUpFrom 1s ease both;
  animation: scaleUpFrom 1s ease both;
}

.slideOutDown {
  -webkit-animation: scaleUpTo 1s ease both;
  -moz-animation: scaleUpTo 1s ease both;
  animation: scaleUpTo 1s ease both;
}

@-webkit-keyframes scaleUpFrom {
  from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpFrom {
  from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpFrom {
  from { opacity: 0; transform: scale(1.5); }
}

@-webkit-keyframes scaleUpTo {
  to { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpTo {
  to { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpTo {
  to { opacity: 0; transform: scale(1.5); }
}


.innerpages article{height:auto; min-height:100px;}
.innerpages article.banner{height:100vh; overflow:hidden;}
.innerpages article.banner01{height:70vh;}
.innerpages article.banner01 .bannerText{height:70vh; }
.innerpages article.banner01 .bannerText h2{text-align:center; line-height:1em;}
.innerpages .bannerText h2{font-size:6em; letter-spacing:normal !important;}
.bannerText p{font-size:2em; line-height:1.6em; margin:10px 0 0 0}
ul.workUL, ul.workUL li img{width:100%; float:left; -webkit-transition:all ease 0.6s; -moz-transition:all ease 0.6s; transition:all ease 0.6s; }
ul.workUL li{width:50%; float:left; position:relative;}
ul.workUL li p{font-size:2em; text-transform:uppercase; padding:5px 10px; background:#fff; position:absolute; left:40px; top:30px; width:auto; color:#000; -webkit-transition:all ease 0.6s; -moz-transition:all ease 0.6s;  transition:all ease 0.6s;}
ul.workUL li a{width:100%; float:left; overflow:hidden;}
ul.workUL li img{-webkit-transform:scale(1.01,1.01); -moz-transform:scale(1.01,1.01); transform:scale(1.01,1.01);}
ul.workUL li a:hover img{-webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); transform:scale(1.1,1.1);}
ul.workUL li a:hover p{left:50px;}
.bannerText.arrow:after{width:1px; height:0%; content:''; display:block; position:absolute; bottom:-20%; left:50%; background:#fff; z-index:2; -webkit-transition:all linear 0.8s; -moz-transition:all linear 0.8s; transition:all linear 0.8s; }
.bannerText.arrow:before{width:40px; height:40px; content:''; display:block; position:absolute; bottom:-20%; left:50%; background:url(../images/arrow-kma.png) no-repeat center 0; z-index:2; margin:0 0 0 -19px;  -webkit-transition:all linear 0.8s; -moz-transition:all linear 0.8s; transition:all linear 0.8s;}
.bannerText.arrow.active:after{ height:30%; bottom:0;}
.bannerText.arrow.active:before{bottom:30%;}
.bannerText.arrow p{color:#9c9c9c;}
.bannerText.arrow p strong, .bannerText.arrow p span{color:#fff; font-weight:normal;}

.topDesc .middleWrapper{width:700px; text-align:center; padding:60px 0; display:table}
.topDesc .middleWrapper p{font-size:1.8em; line-height:1.6em; color:#5e6469; margin:0; padding:0;}

ul.socialTags{width:auto; margin:0 auto; display:inline-block; padding:25px 0 0 0; }
ul.socialTags li{width:auto; float:left; margin:0 10px;}
ul.socialTags li a{font-size:1.8em; text-transform:uppercase; color:#000; padding:8px 25px; border:1px solid #000; border-radius:30px; float:left}
ul.socialTags li a.yt{border-color:#0072bc;}
ul.socialTags li a.fb{border-color:#ec008c;}
ul.socialTags li a.insta{border-color:#00a651;}

.tabWrapper{background:#535864; padding:60px 0}
ul.socialMediaWrap li img, ul.socialMediaWrap, .tabWrap, .tabDetails{width:100%; float:left}
ul.socialMediaWrap li{width:50%; float:left; padding:10px;}
.tabDetails h2{display:none;}

ul.tabUL{margin:0 auto; display:table; width:auto; padding:0 0 30px 0;}
ul.tabUL li{padding:0 15px; float:left; border-left:1px solid rgba(255,255,255,0.2); height:25px;}
ul.tabUL li:first-child{border:none;}
ul.tabUL li a{font-size:2em; text-transform:uppercase; float:left; line-height:25px; -webkit-transition:all ease 0.3s; -moz-transition:all ease 0.3s; transition:all ease 0.3s; position:relative; }
ul.tabUL li a:after{width:0; height:2px; background:#a7b1c8; content:''; display:block; position:absolute; bottom:-3px; left:50%; -webkit-transition:all ease 0.3s; -moz-transition:all ease 0.3s; transition:all ease 0.3s; }
ul.tabUL li a:hover:after, ul.tabUL li a.active:after{width:100%; left:0;}


.tabDetails {display:none;}

.tabDetails .videoW, .tabDetails .brandIdentity{width:800px; margin:0 auto;}
.tabDetails .videoW{margin-bottom: 25px; display: table;}
.tabDetails .videoW iframe{width:100%; float:left; height:450px;}
.tabDetails .brandIdentity img{width:100%; float:left; margin:0 0 25px 0;}
.tabDetails .websiteDiv{width:980px; margin:0 auto}
.tabDetails .websiteDiv img{width:100%; float:left;}
a.menu{display:none;}

a.visitSite{position:absolute; right:-350px; bottom:30px; padding:0 25px; height:35x; line-height:35px; font-size:1.6em; border-radius:35px; background:#fff; color:#000;-webkit-transition:all ease 0.3s; -moz-transition:all ease 0.3s; transition:all ease 0.3s;}
a.visitSite:hover{background:#535864; color:#fff;}
.weDoWrapper{background:#e3e6e8;}
.servicesWrapper{ margin:50px 0 0 0}
.servicesWrapper .space-img h2{top:75px;}
.clientsWraper .space-img h2{top:125px;}

ul.social li{width:auto; float:left; margin:15px 0 0 0}
ul.social li a{position: relative; width: 35px; height: 35px; overflow: hidden; text-indent: -99px; background: url(../images/social-media.png) no-repeat 0 0; margin: 10px 5px 0 0; opacity: 0.8; float:left; }
ul.social li a.insta{background-position: -44px 0;}
ul.social li a.ytIcon{background-position:right 0;}
ul.social li a:hover{opacity: 1}

.canvasW{width:100%; position:relative; left:0; top:0; background:#000; height:100vh;}
.canvasW canvas{width:100%; height:100%; float:left}

.workArticle{background:#27292e}
.innerpages ul.bannerUL li:after{width:100%; height:100%; background:rgba(0,0,0,0.3); content:''; display:block; position:absolute; left:0; top:0; z-index:1}