@import url("fonts.css");
@import url("../animations/aos.css");
@import url("../slick/slick-theme.css");
@import url("../slick/slick.css");
@import url("bootstrap.css");
@import url("imagehover.min.css");
@import url("glitch.css");
html, body{position:relative; margin:0; padding: 0; width:100%; height:100%;/* background:#070b0e; */ background:#777;  font-family: 'Averta-Light', Arial;}
.top-header{position: fixed; top: 0; width:100%; background: transparent; min-height: 20px; padding-bottom: 0; padding: 0px 10px 10px; z-index: 999; }

a img {  border: 0;}
a, a:active, a:focus, a:hover {
  outline: 0;
  border: none;
  color: inherit;
  text-decoration: none;
  -moz-outline-style: none;
}
.logos{
	position: fixed; 
	top: 0%; 
	padding:20px 5px; 
	display: inline-block;
	text-decoration: none; 
	border-bottom-left-radius: 4px; 
	border-bottom-right-radius: 4px;
	animation-name: bounceIn;
  	animation-duration: 450ms;
  	animation-timing-function: linear;
    animation-fill-mode: forwards;
    transition: all 0.5s ease-in-out;
}
.logozx-bg{background:#111517; transition: all 0.5s ease-in-out; padding:20px 10px;}
.scroll-logo{top: -40%; transition: all 0.5s ease-in-out;}

.logos img{max-width: 140px;}

.lr{padding:10px; margin:10px 0;}
.menu-btn{
	position: relative;
	width:50px; height:50px; 
	margin-top: 20px;
	color:#fff; 
	text-align: center;
	line-height: 50px;
	background:#ff8a14;
	border-radius: 50%;
	cursor: pointer;
	z-index: 54;
}
.menu-btn::before{
	content: ""; 
	position: absolute; 
	color:#fff;
	left: 0;
	top: 0; 
	transform: scale(1);
	width:50px; height:50px;
	background:#ff8a14;
	border-radius: 50%;
	animation-name: opct;
  	animation-duration: 1.1s;
  	animation-iteration-count: infinite; 
	z-index: -1;
}
.menus{position: fixed; top: -200%; display: block; padding:15px 0; background:#000; z-index: 9999; width:100%; height:100%; padding-top: 6%; overflow:hidden; transition: all 0.9s ease-in-out; z-index: 997; }
.menus::before{content:""; position: absolute; top: -110%; left: 0%;width:100%; height:50%; background:rgba(255,255,255,0.3); z-index: 3; transition: all 1.9s ease-in-out;}
.menus::after{content:""; position: absolute; top: -110%; left: 0%;width:100%; height:50%; background:rgba(255,13,51,0.3); z-index: 3; transition: all 1.7s ease-in-out;}
.show-menus{position: fixed; top: 0%; width:100%; height:100%; border-radius: 0%; transition: all 0.9s ease-in-out;}
.show-menus::before{content:""; position: absolute; top: 110%; left: 0%;width:100%; height:50%; background:rgba(255,255,255,0.3); z-index: 3; transition: all 1.9s ease-in-out;}
.show-menus::after{content:""; position: absolute; top: 110%; left: 0%;width:100%; height:50%; background:rgba(255,13,51,0.3); z-index: 3; transition: all 1.7s ease-in-out;}

.menu-list{position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
.menu-list ul{padding: 0; margin: 0;}
.menu-list ul li{ list-style: none; text-align: center; display: inline-block; /*width: 100%;*/}
.menu-list ul li a{
	position: relative;
	padding:0px 20px; 	
	display: inline-block; 
	color: rgba(255, 255, 255, 0.9); 
	font-family: 'trump_gothic_east_bold'; 
	font-size: 5vh; 
	line-height: 1;
	letter-spacing: 3px;
	font-weight: bold; 
	text-decoration: none; 
	text-transform: uppercase;
}
.show-menus .menu-list ul li a{padding:10px 20px; transition: padding 1.5s;}
.menu-list ul li a:hover{ 
	 color: #ff8a14;
}


.menu-list ul li a:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  left: auto;
  background-color: #000;
  color: #333;
  width: 0;
  overflow: hidden;
  -webkit-transition: width 0.14s ease-out;
  transition: width 0.14s ease-out;
  z-index: -1;
}
.menu-list ul li a:after {
  opacity: 0;
  content: attr(data-text);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: #333;
  overflow: hidden;
  -webkit-transform: translate(-24px, 6px);
  transform: translate(-24px, 6px);
  -webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
  transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
  z-index: -1;
}
.menu-list ul li a:hover:before {
  left: 0;
  right: auto;
  width: 100%;
}
.menu-list ul li a:hover:after {
  opacity: 1;
  padding: 0 20px;
  -webkit-transform: translate(0px, 6px);
          transform: translate(0px, 6px);
  -webkit-transition: opacity 0.2s 0.14s ease-out, -webkit-transform 0.2s 0.14s ease-out;
  transition: opacity 0.2s 0.14s ease-out, -webkit-transform 0.2s 0.14s ease-out;
  transition: transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out;
  transition: transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out, -webkit-transform 0.2s 0.14s ease-out;
}


.menu-btm-wrap{position: fixed; bottom: -140%; height:70px; background:#111518; width: 100%; z-index: 9999; transition: all 0.7s ease-in-out;}
.menu-btm-wrap-show{position: fixed; bottom: 0; transition: all 0.7s ease-in-out;}
.social-wrap{margin: 180px 20px 10px; padding:20px; text-align: center;}
.show-menus .social-wrap{margin: 30px 20px 10px; transition: all 1.5s ease-in-out;}
.social{
	position:relative;
	text-decoration: none; 
	display: inline-block;
	color: #ff8a14; 
	text-align: center;
	font-size: 1.5em; 
	margin: 10px 20px 10px;
	width:30px; 
	height:30px; 
	line-height: 30px; 
	border-radius: 50%;
}
.social::before{
	content: ""; 
	position: absolute; 
	left: 0;
	color:#fff;  
	transform: scale(1);
	width:30px; height:30px;
	border-radius: 50%;
	
}
.social:hover::before{
	background:#ff8a14;
	animation-name: opct;
  	animation-duration: 1.1s;
  	animation-fill-mode: forwards;
  	animation-iteration-count: infinite; 
	z-index: -1;
}
.social:hover{text-decoration: none; color: #fff; font-size: 1.5em; }
.hashtag-wrap{padding:20px; text-align: center;}
.hashtag{margin:20px 40px; padding:10px 30px; font-family: 'Averta'; font-size: 1.4em; text-decoration: none; color: #ff8a14;}
.hashtag:hover{text-decoration: none; color: #fff;}

.page-disapear{
	animation-name: zoomout;
  	animation-duration: 450ms;
  	animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.section, .other_section, .footer, .half-section, .map{position:relative; min-height:100%; width:100%; background:#111517; display: block; vertical-align: middle; background-position: center; background-size: cover; transition: all 0.6s ease-in-out; overflow:hidden;}
.half-section{min-height:70%;}
.normal{position:relative; min-height: 400px; height:auto; width:100%; background:#111517; display: block;}
.black-layor{
	position: absolute;
	top: 0; left: 0; 
	width:100%; 
	height:100%; 
	background:rgba(0,0,0,0.6); 
	background-image: url("../images/bggg.svg"); 
	background-size: cover; 
	background-position: center; 
	overflow: hidden;
	z-index: 1;
}
.home-block{ 
	position:absolute;
	top: 50%;
	transform: translateY(-50%);
	display: block; 
	width:inherit; 
	z-index: 2; 
}

.cont-block{ 
	padding:8% 0;
	display: block; 
	margin: 0 auto;
	width:inherit;  
}
.normal-block{ 
	padding:10% 0 10%;
	display: block; 
	margin: 0 auto;
	width:inherit;  
}
.read-block{ 
	padding:0.5% 0 5%;
}
.footer-block{
	padding:12% 0;
	display: block; 
	margin: 0 auto;
	width:inherit;  
}

.home-block h1, .home-block h2{position:relative; line-height: 1.1; font-weight: 300; font-size: 12vh; color: #fff; margin-bottom: 20px; font-family: 'trump_gothic_east_bold';  text-transform: uppercase;}
.home-block h1::before, .home-block h2:before{content: ""; position: absolute; top: 0%; height: 100%; width:40px; border-bottom: 6px solid #ff8a14;}
.home-block h2{font-size: 8vh;}

.home-block p{padding:30px 0 10px; margin:20px 0; color:#fff; font-size:2.5vh; font-weight: 200; max-width: 600px; font-family: 'Averta-Light';}
.box-space{padding:0px;}
.bttm-award-box{position:absolute; bottom: 0px; padding:10px 0; width:inherit;display: block; border-top:1px solid #111;background:rgba(0,0,0,0.9); }
.award-logos{ border-top:0px solid #555; display: block; padding-top:10px;}
.awardss{ text-align: right; width: 100%; border: 1px solid #fff;  text-align: center; padding: 10px 0;}
.moving{display: block; font-family: 'PlayfairDisplay-Italic'; color: #fff; padding-top:15px; font-size:1.4em;}
.aw-logo{position: relative; height: 65px; overflow: hidden;}
.aw-top, .aw-focus{width:auto; height: 100%; margin: 0 auto;}
.aw-logo .aw-top{position: absolute; left:0; right:0; top: -115%; vertical-align: middle; transition: all 0.4s ease-in-out;}
.aw-logo .aw-focus{position: absolute; left:0; right:0; top: 0; vertical-align: middle; filter: grayscale(100%); transition: all 0.4s ease-in-out;}
.aw-logo:hover .aw-top{position: absolute; top: 0%; transition: all 0.4s ease-in-out;}
.aw-logo:hover .aw-focus{position: absolute; top: 115%; transition: all 0.4s ease-in-out; }

.title-wrapper{margin-bottom: 20px; }
.titles{position:relative; font-size:10vh; display: inline-block; font-family: 'trump_gothic_east_bold'; line-height: 1; padding: 10px; text-transform: uppercase;}
.titles::before{content: ""; position: absolute; top: 0; width: 100%; height: 100%; width:40px; border-bottom: 4px solid #ff8a14;}
.title-1{ font-size:4.5vh; font-family: 'trump_gothic_east_bold'; line-height: 1; padding:15px 0; text-transform: uppercase;}
.title-2{ font-family: 'trump_gothic_east_bold'; font-size: 1.6em;}
.contact-2{ font-family: 'PlayfairDisplay-Italic'; font-size: 1.3em;}
.work-titles{ position: relative; font-size:8vh; display: block; font-family: 'trump_gothic_east_bold';  line-height: 1; padding:10px; text-transform: uppercase;}
.work-titles::before{content: ""; position: absolute; bottom: 0%; height:100%; width:40px; border-bottom: 4px solid #ff8a14;}

.black{background: #070b0e; color: #fff !important;}
.dack{color: #111517 !important;}
.white{background: #fff; color: #111517 !important;}
.the-grey{background: #111517; color: #fff !important;}
.white-grey{background: #ddd; color: #000 !important;}
.servicez{padding:10px 15px; transition: all 0.4s ease-in-out; marging-top:40px; margin-bottom:10px; background:#111;}
.servicez:hover{box-shadow:1px 1px 8px 3px inset #222; transition: all 0.4s ease-in-out; background:#222; box-shadow: -7px 12px 1px #000;}
.service-icon{padding:0px; border:0px solid #ff8a14; display: inline-block; border-radius: 50%; margin:30px 0 10px; }
.service-icon img{width: 100px;}
.service-cont{ font-size:1.5em; display: block; font-family: 'PlayfairDisplay-Italic'; font-weight: 200; color: #fff; padding:15px 0; min-height:130px; max-width:98%; height:240px; overflow: hidden;}
.cont-2{ font-family: 'Averta-Light';}
.more{position:relative; text-decoration: none; display:block; font-weight: bold; color: #fff; border:1px solid #fff; text-transform: uppercase; text-decoration: none; text-align: center; padding: 6px 10px; width: 120px; margin: 20px 0; overflow: hidden;}
.more:hover{ border:1px solid transparent; background:#111;}
.more-2{ border:1px solid #111517; color:#111517;}
.more-2:hover{ border:1px solid transparent; color:#fff;}
.more:hover{color: #fff; text-decoration: none;}

.more::before{content:""; position:absolute; top: 0; left: -110%; width:100%; height:100%; color: #fff;  background:rgba(255,255,255,0.2); transition: all 0.4s ease-in-out; z-index: -1;}
.more:hover::before{content:""; position:absolute; top: 0; left: 110%; width:100%; height:100%;  background:rgba(255,255,255,0.2); transition: all 0.4s ease-in-out; -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);}

.more::after{content:""; position:absolute; top: 0; left: 0%; width:0%; height:100%; color: #fff;  background: #ff8a14; transition: all 0.2s ease-in-out; z-index: -2;}
.more:hover::after{content:""; position:absolute; top: 0; left: 0%; width:100%; height:100%; background: #ff8a14; transition: all 0.2s ease-in-out;}

.contents{padding:0 5px; color:#fff;}
.contents h2{font-family: 'PlayfairDisplay-Regular'; font-size: 5vh; line-height: 1.1; margin-bottom: 10px;}
.contents p{ font-family: 'Averta-Light', Serif; font-size: 1.4em; margin-bottom: 10px;}

.works-logo{position:relative; width:100%; height:350px; text-decoration:none; display: block;}
.works-logo img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 190px; filter: grayscale(99%); -moz-filter:grayscale(99%);}
.works-logo:hover img{ filter: grayscale(1%); -moz-filter:grayscale(1%);}

.work-bg:nth-child(2n+1){background: #888888;}
.work-bg:nth-child(even){background: #404040;}
.work-bg:hover{background: #ddd;}

.client-logo{
    padding: 20px 10px;
    width: 100%;
    text-align: center;
    height: 70px;
    margin-bottom: 40px;
}
.client-logo img{max-height: 70px; width:auto; max-width: 80%; margin: 0 auto; filter: grayscale(99%);  -moz-filter: grayscale(99%);  -webkit-filter: grayscale(99%);}
.client-logo:hover img{ filter: grayscale(0%);  -moz-filter: grayscale(0%);  -webkit-filter: grayscale(0%); cursor: pointer;}

.sub-title{padding:0 15px; font-family: 'trump_gothic_east_bold'; font-size: 2em; font-weight: 200; text-transform:uppercase; padding-top:25px; margin-top: 15px; letter-spacing: 2px; }
.sub-tag{padding:0 15px; font-family: 'PlayfairDisplay-Italic'; font-size: 1.2em; padding-bottom:15px;}
.sub-cont{padding:0 15px; font-family: 'Averta'; font-size: 1.3em; color: #eee; }
.project-title{ font-size:1.5em; font-family: 'Averta-Bold'; line-height: 1; padding:10px 0; text-transform: uppercase;}
.project-title::before{content: ""; position: absolute; top: 2.2em; width:30px; border-bottom: 4px solid #ff8a14;}
.projsub-title{ font-family: 'PlayfairDisplay-Italic'; font-size: 1.5em; padding-top:15px;padding-left:10px;  }
.proj-cont{font-size: 1.2em; font-family: 'Averta'; padding: 15px 0; color: #555;}
.project-banner img{width:100%; margin: 0 auto;}
.videos{width:100%;}
.videos iframe{width:100%; height:550px; margin: 20px auto;}

.results{position:relative; text-align: center; }
.result-title{ font-size:1.5em; font-family: 'Averta-Bold'; line-height: 1; padding:10px 0; display: inline-block; text-transform: uppercase;}
.result-title::before{content: ""; position: absolute; top: 1.7em; left: 49%; width:30px; border-bottom: 4px solid #ff8a14;}
.result-list{ text-align: center; margin: 30px auto; display: table; }
.result-list ul{ margin: 0 auto; padding: 0; }
.result-list ul li{list-style: none; display: table-cell; width:250px; border-left:1px solid #999; padding: 20px;}
.result-list ul li:first-child{border-left:1px solid transparent;}
.result-list ul li .numbers{font-family: 'trump_gothic_east_bold'; font-size: 10.5vh; text-align: center; padding: 10px; text-transform: uppercase;}
.result-list ul li .caption{font-family: 'Averta-Light'; font-size: 1.2em; width:80%; margin: 0 auto;}

.next-proj-wrap{position: relative; min-height:600px; background: #fff; width: 100%;}
.next-project{position:absolute; bottom: 0; left: 0; right: 0; width:100%; height:100%; background:#eee; margin:0 auto; transition: all 0.5s ease-in-out;}
.next-project h1{position:absolute; font-size: 10vw; width: 100%; font-family: 'trump_gothic_east_bold'; font-weight: 900; padding:10px; line-height: 1; color: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); text-transform: uppercase; text-align:center; z-index: 99;}
.next-project h4{position:relative; font-size: 2em; width: 100%; font-family: 'Averta-Bold'; padding:10px; line-height: 1; color: #111517; top: 14%; left: 0%; text-transform: uppercase; text-align:center; z-index: 190;}
.next-project:hover{ width:80%; height:80%; background:#eee; margin:0 auto; transition: all 0.5s ease-in-out;}


.join-the-flock{text-align:center; margin:10px auto; max-width:600px; padding:50px 10px 20px;}
.join-top-bar{max-width:100px; height:3px; background:#ff8a14; display: block; margin:5px auto;}
.join-the-flock h3{padding:10px; color:#333;font-family: 'trump_gothic_east_bold'; font-size:2.2em;}
.join-the-flock p{color:#444; margin:15px 0;font-family: 'Averta-Light'; font-size:1.3em;}
.join-the-flock a{border: none;background:#ff8a14; text-decoration:none; display: inline-block;color:#fff;padding: 10px 28px; margin: 10px 0; transition: all 0.3s ease-in-out;}
.join-the-flock a:hover{border: none; background:#111517; text-decoration:none; display: inline-block;color:#fff;padding: 10px 34px; margin: 10px 0; transition: all 0.3s ease-in-out;}
.lr-5{padding:6px 10px;}
.value-icon{display:inline-block; height:75px; padding-right:7px;}

.the-flock{ padding:10px 0; min-height: 420px;}
.the-flock-img{ position: relative; overflow: hidden; max-height: 463px;}
.the-flock-img img{ max-width: 100%; height: auto; margin: 0 auto; background:#ddd;}
[class*=" imghvr-"] figcaption, [class^="imghvr-"] figcaption {
    background-color: #ff8a14;
    padding: 30px;
}
[class*=" imghvr-shutter-in-"]::after, [class*=" imghvr-shutter-in-"]::before, [class^="imghvr-shutter-in-"]::after, [class^="imghvr-shutter-in-"]::before {
    background: #ff8a14;
}
/*.memberz{filter: grayscale(0%); -moz-filter: grayscale(0%); -webkit-filter: grayscale(0%); -o-filter: grayscale(0%);}*/
.flock-fun-fact{ padding-top:7%; text-align: left; }
.flock-fun-fact h4{font-size: 1.7em;font-family: 'trump_gothic_east_bold'; text-transform: uppercase; }
.flock-fun-fact p{font-size: 1.5em; font-family: 'PlayfairDisplay-Regular'; }
.flock-name{ font-family: 'trump_gothic_east_bold';  text-transform: uppercase; font-size: 2em; padding:0 2px; line-height:1.2; text-align:center;}
.flock-title{font-family: 'PlayfairDisplay-Italic'; font-size: 1.4em; padding:0 2px; line-height:1.2; text-align:center;}

/*video background display*/
.myVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
}
.video-btn{padding-top:30%; display: block; text-align: center;}
.myBtn{
    width: 100px;
    height: 100px;
    text-align: center;
    border-radius: 50%;
    font-size: 2em;
    line-height: 95px;
    border: 3px solid #ff8a14;
    background:transparent;
    color: #ff8a14;
    cursor: pointer;
    padding-left:9px;
    padding-top:2px;
}
.myBtn:hover {
    animation-name: bounceOut;
  	animation-duration: 450ms;
  	animation-timing-function: linear;
    animation-fill-mode: forwards; 
}

.hideall{display: none;}
.stillshow{opacity: 1;}
.popup-wraper{ display:none; position:fixed; width:100%; height:100%; background: rgba(0,0,0,0.9); z-index: 9999;}
.popup-box{
	position:absolute; 
	top:50%; left: 50%; 
	transform: translate(-50%,-50%); 
	/*background: #111517; */
	min-height: 70%;
	width: 80%; 
	padding:0px; z-index: 9999; 
	overflow: hidden; 
}
#popup-box iframe{position:absolute; height: 100%; width:100%;}
.bg{display:block; min-width:100%; min-height:105%; margin-top: -30px; margin-left:-130px; z-index: 5;}

.popup-wraper .cancel-video{
	opacity: 1;
	position:absolute; 
	top:15px; right: 21px; 
	font-size: 4vh;
	color: #fff;
	border-radius: 50%;
	display: inline-block;
	z-index: 999;
	cursor: pointer;
	transition: all 0.5s;
	z-index:99990;
}

.popup-wraper:hover .cancel-video{
	opacity: 1;
	transition: all 0.5s;
}

.st0, .st1, .st2{
	stroke-dashoffset:0%;
	stroke-dasharray: 140%;
}
.st0{
	stroke-dashoffset:0%;
	stroke-dasharray: 140%;
	animation: dash 3.9s 2.1s forwards;
	animation-iteration-count: infinite;
}
.st1{
	stroke-dashoffset:0%;
	stroke-dasharray: 140%;
	animation: dash 4.9s 1.1s forwards;
	animation-iteration-count: infinite;
}
.st2{
	stroke-dashoffset:0%;
	stroke-dasharray: 140%;
	animation: dash 5.9s 0.5s forwards;
	animation-iteration-count: infinite;
}

.down-line{position: absolute; left: 3%; bottom: 0px; width: 15px; height:30px; background:#000; z-index: 980; overflow: hidden; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; display: none;}
.down-line::before{content:""; position: absolute; top: 0; width: 100%; height:50%; background:#ff8a14; z-index: 990; animation-name: line;
 animation-duration: 2500ms; animation-iteration-count: infinite;}
.down-line::after{content:""; position: absolute; top: 0; width: 100%; height:50%; background:#ff8a14; z-index: 990; animation-name: line;
 animation-duration: 2700ms; animation-iteration-count: infinite;}

.arrow-down{position: relative; display: block;}
.double-arrows{position:absolute; top:-55px; line-height: 1; font-size: 2em; padding:5px; color: #fff; display: inline-block; border-radius: 50%; width: 40px; height: 40px; text-align: center;}

.footer-title{position:relative; font-size:10.5vh; font-family: 'trump_gothic_east_bold'; text-align: center; display: inline-block; color:#fff; line-height: 1; padding:10px; margin:20px 0 40px; text-transform: uppercase;}
.footer-title::before{content: ""; position: absolute; top: 102%; left:40%; width:40px; border-bottom: 4px solid #ff8a14;}
.contact-email{ font-family: 'PlayfairDisplay-Italic'; color: #ff8a14; font-size: 1.2em; text-decoration: none; }
.contact-email:hover{ font-family: 'PlayfairDisplay-Italic'; color: #ccc; font-size: 1.2em; text-decoration: none; }
.map{position: fixed; bottom: -100%; left: 0%; transition: all 0.4s ease-in-out; overflow:hidden; z-index: 999;}
.show-map{bottom: 0%; transition: all 0.4s ease-in-out;}
.show-litle-map{bottom: -90%; transition: all 0.4s ease-in-out;}
.map-btn{
	width:40px;
	height:40px;
	margin: 30px 0 10px;
	line-height: 37px;
	text-align: center;
	display: inline-block; 
	cursor: pointer; 
	color: #ff8a14;
	font-size: 3.4em;
	transform: scale(1);
	animation-name: pin;
  	animation-duration: 1.4s;
  	animation-iteration-count: infinite; 
}
.cancel-map{
	position: absolute; 
	top: 17px; 
	left: 49%; 
	width:40px;
	height:40px;
	line-height: 34px;
	text-align: center;
	display: inline-block; 
	cursor: pointer; 
	color: #fff; 
	background:#ff8a14;
	border:2px solid #ff8a14; 
	font-size: 1.4em;
	border-radius: 50%;
	z-index: 55;
}

.down{position:absolute; transform: rotate(180deg); width:100%; height:100%; top: 0; left: 0; transition: all 0.8s ease-in-out;}
.up{transform: rotate(180deg); transition: all 0.8s ease-in-out;}

.map iframe{position:absolute; width:100%; min-height: 100%;}

input.brief-input{width:100%; border:1px solid #ccc; padding:5px 20px; height:45px; margin: 5px 0;}
textarea.brief-input{width:100%; border:1px solid #ccc; padding:15px 20px; min-height:120px; margin: 5px 0;}
/*input.brief-btn{width:100%; border:none; background: #ff8a14; color: #fff; padding:5px 20px; height:45px; margin: 5px 0;}
input.brief-btn:hover{width:100%; border:none; background: #d61313; color: #fff; padding:5px 20px; height:45px; margin: 5px 0;}*/

input.brief-input:hover, input.brief-input:focus{border:1px solid #ff8a14; box-shadow: none;} 
textarea.brief-input:focus, textarea.brief-input:hover{border:1px solid #ff8a14; box-shadow: none;}

.red{border:2px solid #ff8a14 !important; transition: all 0.8s ease-in-out;}
.green{border:2px solid #ff8a14 !important; transition: all 0.8s ease-in-out;}

#myProgress {
  position:relative;
  width: 100%;
  background-color: #ff8a14;
  margin-bottom:30px;

}

#myBar, #feedbacky{
  position:absolute;
  top: 5px;
  width: 0%;
  height: 45px;
  padding-top: 8px;
  background-color: #111517;
  text-align: center;
  line-height: 30px;
  color: white;
}
input.brief-btn{ position: absolute; width:100%; border:none; background: #ff8a14; max-width:100%; display: block; color: #fff; padding:5px 20px; height:45px; margin: 5px 0;}
input.brief-btn:hover{width:100%; border:none; background: #ff8a14; color: #fff; padding:5px 20px; height:45px; margin: 5px 0;} 
.brief-btns{
  position:relative;
  transform:scale(1);
  border: none;
  background: #ff8a14;
  text-decoration: none;
  display: inline-block;
  font-size:17px;
  font-weight:600;
  color: #fff;
  padding: 11px 32px;
  margin: 10px 5px 0px 0;
  transition: all 0.3s ease-in-out;
}
.brief-btns:hover{
  position:relative;
  transform:scale(1.1);
}

.waa-bg, .waa-bg1{background-color:#888; background-size:cover; background-position:top center; display:block; width:100%; height:280px;}
.waa-bg1{height:600px;}

.flexible{display:table; width: 100%;}
.flexy{display: table-cell; max-width:50px;}
.inner-flexy{padding:7%; margin: 0 auto;}
.in-flex-l{padding-left:33%;}
.in-flex-r{padding-right:33%;}
.inner-flexy h1{ font-family: 'Averta'; margin-bottom: 20px;}
.inner-flexy h2{ font-family: 'PlayfairDisplay-Italic'; color: #444; line-height: 1.4;}
.inner-flexy h2 sup{color: #999; padding:0 5px;}
.author{margin-top: 10px;}
.author h4{ line-height: 1; font-weight: bold; font-family: 'Averta';}
.author h5{ line-height: 1; font-weight: bold; font-family: 'Averta-Light'; color: #444;}

.tgif{ background:#111517; padding:40px 20px 40px 40px; width:100%; text-transform: uppercase; }
#demo{ font-size:6.5vh; font-family: 'trump_gothic_east_bold';color:#fff; line-height: 1.2;} 
.joinup{color:#ff8a14; font-size: 1.2em; font-family: 'Averta'; text-align: left; text-transform: uppercase; margin-top:20px;}

.blogs{padding:10px; margin:10px 0;}
.blog-img{position:relative; height:350px; width:100%; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all 0.5s ease-in-out; overflow: hidden;}
.blog-img::before{content:""; position:absolute; top: 0%; left:-150%; width: 100%; height:100%; background:rgba(255,13,51,0.2); transform: skew(-50deg); transition: all 0.5s ease-in-out;}
.blog-img:hover::before{top: 0%; left:150%; transition: all 0.5s ease-in-out;}
.blog-cont{padding:10px 0; min-height:200px;}
.blog-cont h5{padding:1px 0; font-size: 1em; color:#ddd; font-family: 'Averta'; text-transform: uppercase;}
.blog-cont h1{padding:0; /*font-size: 2.5em;*/ font-size:2.2rem; color:#111517; font-family: 'Averta-Extra-Bold'; line-height: 1.2; text-transform: uppercase;}
.blog-cont p {
    padding: 2px 0;
    font-size: 1.4em !important;
    color: #111517;
    font-family: 'Averta' !important;
    font-weight: 300;
    line-height: 1.4;
    padding: 2px 0;
    text-align: justify;
}
.blog-cont li{font-size: 1.3em !important; color:#111517; font-family: 'Averta' !important; font-weight: 300; line-height: 1.4; padding:1px 0;} 
.blog-cont p iframe{width:100% !important; height: 500px !important; background: #000;}
.blog-cont p img{width:100% !important; height: auto !important;}
.blog-cont ul a, .blog-cont p a, .blog-cont p strong a{color: #ff8a14 !important;}

#feedbackz{}
.shadows{position: absolute; top: 0; left:0; width:100%; height:100%; background: rgba(101,102,102,0.2);}
#message{position: absolute; top: 25%; left: 0; right: 0; display: block; background:#ff8a14; color: #fff; font-family: 'Averta'; text-align: center; font-size:3vh; min-height: 200px; max-width: 450px; margin: 0 auto; border-radius: 5px; box-shadow: 2px 3px 13px #555; padding:30px; z-index: 99;}

.foot-normal-block{
    padding: 3% 0 10%;
}
.footer-logo{position: relative; top: 20px; text-align: center; padding:10px;}
.footer-logo img{position: relative; top: 0; max-width: 85px; margin: 10 auto; filter: grayscale(98%);}


.testimonial{max-width: 700px; text-align: center; margin: 20px auto; padding:10px 20px;}
.testimonial img{width:120px; height:120px; border-radius: 50%; margin: 15px auto;}
.testimonial h5{ font-family: 'Averta'; font-size: 1.1em; color:#999; max-width:500px; margin:10px auto; }
.testimonial p{ font-family: 'PlayfairDisplay-Italic'; font-size: 1.4em; color: #555; }

.successy{position:absolute; top:0px; padding:7px; text-align:center; width:100%; color:#fff; background:#111517; z-index:99;}

canvas{
	position:absolute;top:0;left:0
	/* background-image: linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
	background-image: -o-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
	background-image: -moz-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
	background-image: -webkit-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
	background-image: -ms-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);*/
		    
	background-image: -webkit-gradient(
	     linear,
		left bottom,
		left top,
	        color-stop(0, transparent),
		color-stop(0.84, transparent)
	 );
	z-index:1;
}

.video-block{width:100%; display:block; position:relative; background:#999; min-height:400px; background-size:cover; bacground-posistion:center;}
.play-btns{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:50px; height:50px; line-height:50px; cursor: pointer; color:#ff8a14; font-size:1.9rem; border-radius:50%; border:2px solid #ff8a14; text-align:center; }
.play-btns:hover{ top:50%; left:50%; transform:translate(-50%, -50%);}

.kazi{position:relative; width:100%; margin:10px 0; min-height:150px;}
.kazi a{display:block; text-decoration:none; border:1px solid #333; color:#333; font-size:1.6rem; font-weight:700; min-height:90px; padding:20px;}
.kazi a:hover{border:1px solid #ff8a14; color:#ff8a14;}

/*---panorama slide--*/
.tech-slideshow {
		  height: 600px;
		  max-width: 100%;
		  margin: 0 auto;
		  position: relative;
		  overflow: hidden;
		  transform: translate3d(0, 0, 0);
		}

		.tech-slideshow > div {
		  height: 600px;
		  width: 2526px;
		  background-size: cover;
		  background-repeat: no-repeat;
		  background-position: top;
		  background-image: url('../images/sc-panorama.jpg');
		  position: absolute;
		  top: 0;
		  left: 0;
		  height: 100%;
		  transform: translate3d(0, 0, 0);
		}
		.tech-slideshow .mover-1 {
		  animation: moveSlideshow 20s linear infinite;
		}
		.tech-slideshow .mover-2 {
			position: absolute;
		  opacity: 0;
		  transition: opacity 0.5s ease-out;
		  background-position: 0 -200px;
		  animation: moveSlideshow 20s linear infinite;
		}
		.tech-slideshow:hover .mover-2 {
		  opacity: 1;
		}

		@keyframes moveSlideshow {
		  100% { 
		    transform: translateX(-16.6666%);  
		  }
		}
/*========//========*/
.drop-title{padding:7px 10px; border-bottom:0.05rem solid #ccc; font-size:2.4rem; font-weight:700; color:#333; margin-top: 9px; cursor: pointer;}
.drop-title:hover{background-color:#f9f9f9;}
.drop-body{padding:15px 1px; background:#fff; display: none; margin-bottom:15px;} 

/*-----featured*/
.features {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
.flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
/*-------------*/
/*======panorama========*/
article {
  display: flex;
  width: 200%;
  animation: bannermove 20s linear infinite;
  -webkit-animation: bannermove 20s linear infinite;
}

article.paused {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.panorama {
  width: 100%;
}

.panorama ul {
  display: flex;
  background: red;
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.panorama ul li {
  width: 100%;
  background: blue;
}

.panorama ul li img {
  display: block;
  min-width: 100%;
  min-height:300px;
}

/*li:nth-child(2) {
  background: green;
}

li:nth-child(3) {
  background: yellow;
}*/

@keyframes "bannermove" {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/*-------------------*/

@media(max-width: 1390px){
        .home-block h1{ font-size: 13vh;}
	.home-block h5{font-size:3.5vh; }
	.logos img{max-width: 130px;}
	.titles{ font-size: 8.5vh;}
	.title-1{ font-size: 7vh;}
	.cont-block{ padding:12% 0;}
	.popup-box{ width: 80%; min-height:80%;}
	.service-cont{ font-size:1.3em;}
	.service-icon{padding:15px 0; margin:40px 0 10px; }
	.service-icon img{max-width: 70px;}
	.contents h2{font-size: 6vh;}
	.works-logo{width:100%; height:300px; }
	.project-banner img{min-width:100%;}
	.footer-title{ font-size: 8.5vh;}
	.in-flex-l{padding-left:20%;}
	.in-flex-r{padding-right:20%;}
	.joinup{color:#ff8a14; font-size: 1.1em; }
	.next-proj-wrap{ min-height:450px;}
}
@media(max-width: 1189px){
	.service-cont{height: 200px;}
}

@media(max-width: 992px){
	.logos img{max-width: 85px;}
	.video-btn{padding-top:20%;}
	.menu-list ul li{ list-style: none; text-align: center; display: block; width: 100%;}
	.menu-list ul li a {
		display:block;
   		margin-bottom: 8px;
    		margin-top: 8px;
	}
	.home-block h1{font-size: 10vh;}
	.myBtn {width: 50px;height: 50px; font-size: 1.4em;line-height: 45px;}
	.service-cont{ font-size:1.2em;max-width:95%; height:100px;}
	.works-logo{width:100%; height:250px; }
	.footer-title{ font-size: 8.5vh; margin:20px 0 30px;}
	.result-list ul li{width:200px; border-left:1px solid #999; padding: 20px;}
	.result-list ul li .numbers{font-family: 'trump_gothic_east_bold'; font-size: 7.5vh;}
	.result-list ul li .caption{font-family: 'Averta-Light'; font-size: 1.1em;}
	.in-flex-l{padding-left:3%;}
	.in-flex-r{padding-right:3%;}

	.inner-flexy h1{ font-size:1.5em;}
	.inner-flexy h2{ font-size:1.4em ;}
	.inner-flexy h2 sup{ font-size: 1.1em;}
	.author h4{  font-size: 1.1em;}
	.author h5{ font-size: 1em;}

	.blog-img{position:relative; height:300px;}
	.blog-cont h1{font-size: 2.5em;}
	.blog-cont p iframe{width:100% !important; height: 400px !important;}
        .footer-logo img{max-width: 80px;}
	.social-wrap{margin: 160px 20px 10px;}
	.testimonial p{ font-size: 1.2em;}
}

@media(max-width: 768px){
	.top-header{ background: transparent;padding: 0px 10px 10px;}
	.logos{ padding:10px 5px;}
	.menu-btn{ width:40px; height:40px; margin-top: 10px; }
	.menus{padding-top: 15%;}
	.logos img{max-width: 70px;}
	.video-btn{padding-top:1%;}
	.titles{ font-size: 7.5vh;}
	.title-1{ font-size: 6vh;}
	.box-space{padding:15px;}
	.lr{padding:3px 20px; margin:1px 0;}
	.other_section{min-height: 300px; height:auto; width:100%; background:#111517;}
	.myBtn {width: 50px;height: 50px; font-size: 1.4em;line-height: 45px;}
	.moving{display: none;}
	.aw-logo{position: relative; height: 70px;}
	.aw-top, .aw-focus{max-width:99%;}
	.normal{min-height: 100px;}
	.service-icon{padding:10px 0; margin:10px 0 10px; }
	.service-icon img{max-width: 65px;}
	.service-cont{ font-size:1.1em; height:auto; height: auto;}
	.works-logo{width:100%; height:250px; }
	.contents h2{ font-size: 4vh;}
	.contents p{ font-size: 1.3em; margin-bottom: 10px;}
	.popup-box{width: 90%; }
	.footer-title{margin:20px 0;}

	.proj-name{padding:30px 20px 10px;}
	.project-title{padding-top: 20px;}
	.project-title::before{top: 2.1em;}
	.result-list ul li{width:150px; border-left:1px solid #999; padding: 20px 10px;}
	.result-list ul li .numbers{font-family: 'trump_gothic_east_bold'; font-size: 6vh;}
	.result-list ul li .caption{font-family: 'Averta-Light'; font-size: 1.1em;}
	.next-proj-wrap{min-height:250px;}
	.next-project h1{font-size: 15vw; padding:0 10px; top: 45%;}
	.next-project h4{font-size: 1.5em;}
	.the-margin{margin-bottom: 0%;}
	.fix-footer{position: relative; top: 0; z-index: 1;}

	.flexy{display: table-row;}
	.features {display: block;}
	.flex-box{display: block;}

	.blog-img{position:relative; height:auto; min-height: 250px;}
	.blog-cont h1{font-size: 2em;}
	.blog-cont p iframe{width:100% !important; height: 300px !important; font-size: 1.3em;}
        .footer-logo img{max-width: 70px;}
	.social-wrap{margin: 180px 10px 10px; padding:20px 10px; text-align: center;}
	.social {margin: 10px 10px 10px;}

}

@media(max-width: 480px){
	.top-header{ background: transparent;padding: 0px 10px 10px; }
	.logos{ padding:10px 5px;}
	.logos img{max-width: 60px;}
	.menu-btn{ width:40px; height:40px; margin-top: 10px; }
	.menu-btn::before{ width:40px; height:40px; line-height: 40px; }
	.menus{padding-top: 20%; }
	.titles{ font-size: 6.5vh;}
	.title-1{ font-size: 5vh;}
	.home-block h1{font-size: 7vh; }
	.aw-logo{position: relative; height: 40px;}
	.bg{display:none; }
	.myBtn {width: 50px;height: 50px; font-size: 1.4em;line-height: 45px;padding-left:3px; padding-top:0px;}
	.video-btn{padding-top:5%;margin-bottom:3px;}
	.service-icon{padding:10px 0; margin:10px 0 10px; }
	.service-icon img{max-width: 60px;}
	.service-cont{ font-size:1em; min-height:100px;}
	.sub-title{font-size: 1.6em;}
	.more{margin: 10px 0;}
	.contents h2{ font-size: 3vh;}
	.contents p{ font-size: 1em;}
	.cancel-map{ line-height: 39px; display: block;}
	.popup-box{width: 100%; }
	.popup-box iframe{height: 250px;}
	.footer-title{margin:10px 0;}
	.bttm-award-box{background:rgba(0,0,0,0.4);}

	.proj-name{padding:50px 20px 10px;}
	.result-list ul li{width:60px; border-left:1px solid #999; padding: 20px 20px;}
	.result-list ul li .numbers{font-family: 'trump_gothic_east_bold'; font-size: 3.5vh;}
	.result-list ul li .caption{font-family: 'Averta-Light'; font-size: 0.9em;}
	.next-proj-wrap{min-height:200px;}
	.next-project h1{font-size: 15vw; padding:0 10px; top: 45%;}
	.next-project h4{font-size: 1.2em;}
	.the-margin{margin-bottom: 0%;}
	.arrow-down{position: relative; display: none;}

	.blog-cont h5{padding:10px 0 5px;}
	.blog-cont h1{font-size: 1.7em;}
	.blog-cont p iframe{width:100% !important; height: 250px !important; font-size: 1.2em;}
        .footer-logo img{max-width: 60px;}
	.waa-bg1{height:280px;}
}

@media(max-width: 360px){
	.video-btn{padding-top:1%;}
	.result-list ul li{width:50px; border-left:1px solid #999; padding: 20px 10px;}
	.result-list ul li .numbers{font-family: 'trump_gothic_east_bold'; font-size: 3.5vh;}
	.result-list ul li .caption{font-family: 'Averta-Light'; font-size: 0.9em;}
}



/*-----------Custom Chake and Radio buttons-----------------*/


/* The check & Radio */
.radios {
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 12px 0;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radios input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radiomark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #ddd;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radios:hover input[type=radio] ~ .radiomark {
    background-color: #ff8a14;
}

/* When the radio button is checked, add a blue background */
.radios input[type=radio]:checked ~ .radiomark {
    background-color: black;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radios input[type=radio]:checked ~ .radiomark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radios .radiomark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: black;
}
/*------------------------*/

.check {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.check:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:before {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.check input:checked ~ .checkmark:before {
    display: block;
}

/* Style the checkmark/indicator */
.check .checkmark:before {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.career-form{font-family: 'Averta'; color: #333;}
.the-uploads{position: relative; width: 100%; height:45px; border: 1px solid #ccc; text-align: center; }
.the-uploads:hover{border: 1px solid #ff8a14;}
.the-uploads input[type=file]{position:absolute; top: 0px; display: block; width:100%; height: 100%; opacity: 0; cursor: pointer;}
.the-uploads .mylabel{position: absolute;top: 0; left: 0; width:100%; height:100%; text-align: center; font-size:2em; color:111517; font-family: 'trump_gothic_east_bold';}

/*----------End of Custom Check and Radio Button----------------*/


#map {
        position:absolute;
        min-height: 100%;
        width: 100%;
}

/*-------Keyframe animations--------------*/
@keyframes dash{
	0%{
		stroke-dashoffset:140%;
	}
	100%{
		stroke-dashoffset:0%;
	}
	
}

@keyframes bounceOut{
  0%{
    transform: scale(1) translate3d(0,0,0);
  }
  50%{
    transform: scale(1.1);
  }
  80%{
    transform: scale(0.89);
  }
  100%{
    transform: scale(1) translate3d(0,0,0);
  }
}

@keyframes opct{
  0%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes line{
  0%{
    top:-110%;
  }
  100%{
    top:110%;
  }
}

@keyframes pin{
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(0.95);
  }
   0%{
    transform: scale(1);
  }
}


@keyframes zoomout{
  0%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: 0;
    transform: scale(0);
  }
}

@-webkit-keyframes rotation {
	from {
	    -webkit-transform: rotate(0deg);
	}
	to {
	    -webkit-transform: rotate(359deg);
	}
}