a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,header,hgroup,main,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body { margin:0; padding:0; font-family: brandon-grotesque, sans-serif; }
article, aside, details, figcaption, figure, header, hgroup, menu, nav, section {display: block;}
a {color:#121618;cursor:pointer;text-decoration:none; -webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;}
::-moz-selection {background: #333; color: #ffffff; text-shadow: none;}
::selection {background: #333; color: #ffffff; text-shadow: none;}

a.logo { background:url(../img/logo.svg) no-repeat; width: 95px; height: 38px; background-size: 100%; text-indent:-999999px; left: 40px; top:40px; position:relative; float:left; }

.banner { width:100%; height:100vh; min-height: 940px; float:left; position:relative; display:table; left:0; z-index:1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow:hidden; background-color:#1A1A1A; }
.banner.landing { min-height:inherit; max-height: 600px; min-height: 600px;  }
.banner:before { content:''; background-color: rgba(0, 0, 0, 0.5); position:absolute; width:100%; height:100vh; z-index:2 }
.banner .text { max-width: 695px; position: absolute; top: 25%; transform: translateY(-25%); padding:0 40px; margin: 40px 0 0 0; z-index:2;}
.banner.landing .text { top:50%; transform: translateY(-50%);  }
.banner .text h1 { font-size:54px; line-height:70px; color:#FFF; font-weight:900; text-align:left; margin:0 0 10px 0; text-transform:uppercase; }
.banner .text h1 strong:after { content:''; border-bottom:2px solid red; }
.banner .text h2 { font-size:64px; line-height:82px; color:#FFF; font-weight:900; text-align:left; margin:0; text-transform:uppercase; }
.banner .text a { float:left; color:#E34022; font-size:24px; font-weight:600; text-transform:uppercase; line-height:50px; padding:5px 20px; letter-spacing:1px; border:3px solid #E34022; -webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s; border-radius:3px; }
.banner .text a:hover { border-bottom:3px solid #E34022; }
.banner .text p { font-size:24px; line-height:33px; color:#D9DADB; text-align:left; margin:10px 0 20px 0; display:block; }
.banner #video_background{right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; position:absolute;}
.banner #video_background:after { content:''; background-color: rgba(0, 0, 0, 0.8); width:100%; height:100%; position: absolute; top: 0; left: 0; z-index:-100;}
.banner img { z-index:1; position:relative; opacity: 1; height: 100vh; object-fit: cover; width: 100%; max-height: 800px; }
.banner .line { width:80px; height: 4px; background: #e24123; display: block; margin: 15px 0; }
.banner.sub { min-height:auto; max-height: 570px; display:block; } 
.banner.sub .text { max-width: 565px; top: 45%; transform: translateY(-45%); }
.banner.sub:after { content:''; background-color: rgba(0, 0, 0, 0.5); width:100%; height:100%; position: absolute; top: 0; left: 0; z-index:1;}


.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}
.no-js .cd-words-wrapper b {
  opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}


/* -------------------------------- 

xloading-bar 

-------------------------------- */
.cd-headline.loading-bar span {
  display: inline-block;
  padding: 0;
}
.cd-headline.loading-bar .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.loading-bar .cd-words-wrapper::after {
  /* loading bar */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #E34022;
  z-index: 2;
  -webkit-transition: width 0.3s -0.1s;
  -moz-transition: width 0.3s -0.1s;
  transition: width 0.3s -0.1s;
}
.cd-headline.loading-bar .cd-words-wrapper.is-loading::after {
  width: 100%;
  -webkit-transition: width 3s;
  -moz-transition: width 3s;
  transition: width 3s;
}
.cd-headline.loading-bar b {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.cd-headline.loading-bar b.is-visible {
  opacity: 1;
  top: 0;
}

.arrows { float:right; z-index: 5; position: relative; bottom: 400px; right: 10%;}
.arrows .prev-arrow, .arrows .next-arrow { font-size:40px; color:#FFF; margin: 0 10px; }
.arrows .prev-arrow:hover, .arrows .next-arrow:hover { color:#E34022; }

#work { float:left; width:100%; clear:both; position:relative; overflow: hidden; padding: 50px 0; bottom:430px; z-index: 1; }
#work .item { border-radius:3px; outline: none; margin: 50px 50px; overflow: hidden; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); }
#work .item a { width:100%; height: 100%; display: block; position: relative; }
/*#work .item a:before { content:''; background: rgba(227, 64, 34, 0); position: absolute; left: 0; right: 0; bottom: 0; top: 0; opacity: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
#work .item a:hover:before { opacity: 1; content: ''; background: rgba(227, 64, 34, .8); position: absolute; left: 0; right: 0; bottom: 0; top: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }*/
#work .item img { width: 100%; height: 100%; object-fit: cover; outline: none; }

.work { float:left; width:100%; }
.work .item img { width:100%; vertical-align: bottom;}
.work h1 { font-size:40px; text-transform: uppercase; font-weight: 900; margin-bottom: 100px; text-align: center; }

.profile { /*flex-shrink: 1; flex-grow: 1; flex-basis: 23.5%; max-width: 23.5%;*/ position: relative; float: left; display: inline-block; overflow: hidden; text-align: center; cursor: pointer; vertical-align: bottom; }
.profile img { width:100%; vertical-align: bottom; display: block; }
.profile:before { content:""; width: 100%; height: 100%; display: block; position: absolute; top: 0;  }
.profile img { position: relative; display: block; max-width: 100%; width:100%; }
.profile .text { color: #fff; text-transform: capitalize; font-size: 40px; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; }
.profile .text::before, .profile .text::after { pointer-events: none; }
.profile .text, .profile .text > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.profile .text > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }

/*-- Grid Effect --*/
.profile.effect .text::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .9); content: ''; opacity: 0; }
.profile.effect h2 { font-size:30px;font-weight: 700; text-transform: uppercase; position: absolute; bottom:-100px; left: 0; width: 100%; color: #FFF; -webkit-transition: -webkit-transform 0.55s, color 0.55s; -ms-transition: transform 0.55s, color 0.55s; transition: transform 0.55s, color 0.55s; }
.profile.effect .text::before { -webkit-transition: opacity 0.55s, -webkit-transform 0.55s; transition: opacity 0.55s, transform 0.55s; }

/*-- Grid Hover Effect --*/
.profile.effect:hover h2 { top:58%; bottom:auto; color: #fff; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); -ms-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); }
.profile.effect:hover .text::before { opacity: 1; -webkit-transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform: translate3d(0,0,0); }

.project { background:#FFF; }
.project .container { padding-top:100px; padding-bottom:100px; }
.project .container .text-block { margin-top:20px; margin-bottom:20px; }
.project .container .text-block h1 { color:#121618; font-size:16px; font-weight:800; text-transform:uppercase; text-align:left; margin:10px 0; padding:0; }
.project .container .text-block p { color:#121618; font-size:20px; font-weight:400; text-align:left; line-height:32px; display:block; margin:0; padding:0; }
.project .container .text-block p a:link { color:#E34022; font-weight:800; }
.project .container .text-block p a:active { color:#E34022; font-weight:800; }
.project .container .text-block p a:hover { color:#E34022; font-weight:800; }
.project .container .text-block p a:visited { color:#E34022; font-weight:800; }
.items { float:left; width:100%; background:#FFF; }
.items img { width:100%; margin:0 auto; display:block; }

.container { max-width: 1200px; height:100%; margin: 0 auto; clear:both; float:none; padding:0 20px; top:0; }
.container:after,.row:after, .col:after, .clr:after, .group:after { content: ""; display: table; clear: both; }								  
.col { display: block;float: left;width: 100%;}
@media ( min-width : 768px ) {.gutters .col { margin-left: 2%;}.gutters .col:first-child { margin-left: 0; }}
@media ( min-width : 768px ) {.span_1{width:8.33333333333%}.span_2{width:16.6666666667%}.span_3{width:25%}.span_4{width:33.3333333333%}.span_5{width:41.6666666667%}.span_6{width:50%}.span_7{width:58.3333333333%}.span_8{width:66.6666666667%}.span_9{width:75%}.span_10{width:83.3333333333%}.span_11{width:91.6666666667%}.span_12{width:100%}.gutters .span_1{width:6.5%}.gutters .span_2{width:15%}.gutters .span_3{width:23.5%}.gutters .span_4{width:32%}.gutters .span_5{width:40.5%}.gutters .span_6{width:49%}.gutters .span_7{width:57.5%}.gutters .span_8{width:66%}.gutters .span_9{width:74.5%}.gutters .span_10{width:83%}.gutters .span_11{width:91.5%}.gutters .span_12{width:100%}}

/* Sweep To Right */
.banner .text a, #work .item .text a { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.banner .text a:before, #work .item .text a:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #E34022; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.banner .text a:hover, .banner .text a:focus, .banner .text a:active, #work .item .text a:hover, #work .item .text a:focus, #work .item .text a:active { color: white; }
.banner .text a:hover:before, .banner .text a:focus:before, .banner .text a:active:before, #work .item .text a:hover:before, #work .item .text a:focus:before, #work .item .text a:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); }

#services { float:left; width:100%; bottom: 300px; position: relative; }
#services.landing { bottom:0; padding: 115px 0; }
#services h1 { font-size:40px; text-transform: uppercase; font-weight: 900; margin-bottom: 100px; }
#services .block { display:inline-block; position: relative; margin: 20px 0 30px 0; min-height: 170px; }
#services .block h1 { font-size:28px; line-height: 34px; color:#000; margin: 0 0 10px 0; text-transform: capitalize; font-weight: 700; }
#services .block p { font-size: 24px; line-height: 31px; color:#666; text-align: left; margin: 0; }
#services .block .icon { float:left; max-width: 85px; position: absolute; left: 0; }
#services .block .icon img { display: block; max-width: 85px; width: 100%; }
#services .block .text { padding:0 20px 20px 125px; }

#testimonials { float:left; width:100%; background:#E34022; bottom:120px; position: relative; padding:150px 0; }
#testimonials.sub { bottom:0; background:#000; }
#testimonials .review h1 { font-size:50px; line-height: 62px; font-weight: 900; text-transform: uppercase; color:#FFF; margin: 0 0 43px 0; }
#testimonials .review p { font-size:19px; color:#FFF; font-weight: 900; text-transform: uppercase; margin: 0; padding: 8px 0; text-align: left; }
#testimonials .review span { font-size:16px; color:#FFF; font-weight: 700; text-transform: uppercase; margin: 0; padding: 0; }

footer { float:left; width:100%; position: relative; padding: 50px 0; }
footer.sub { bottom:0; padding: 50px 0; }
footer p.copyright { float:left; color:#000; font-size:18px; text-transform: uppercase; font-weight: 700;  margin:8px 0 0 0; }
footer ul.social { float:right; padding: 0; }
footer ul.social li { display: inline-block; color:#000; margin: 0 10px; text-align: center;}
footer ul.social li a { color:#000; font-size:30px; }
footer ul.social li a:hover { color:#E34022; }

ul.projects { float:left; width:100%; }
ul.projects li { float:left; display:inline-block; max-width:50%; width:100%; background:#333; height:480px; }

@media only screen and ( max-width: 768px ) {
#work .item { max-width:none; }
.banner.sub .text h1, .banner .text h2 { font-size:30px; } 
.banner.sub .text p { font-size: 20px; line-height: 30px; }
	#work .item { margin:20px 30px; }
	.banner { min-height: 600px; }
	#work { bottom: 195px; }
	#services { bottom: 150px; padding-bottom: 50px; }
	#services h1, .work h1 { font-size:34px; text-align: left; }
	.banner .text { top: 35%; transform: translateY(-35%); }
	#services .block { min-height:auto; }
	footer ul.social { float: right; padding:20px 0 0 0; text-align: center; left: 0; right: 0; margin: 0 auto; top:0; position: relative; width: 100%;}
	.arrows { bottom: 190px; }
}

@media only screen and ( max-width: 710px ) {
.banner .text h1 { font-size:44px; line-height: 58px; margin:0; }
.banner .text p { font-size:21px; line-height:34px; margin:0 0 20px 0; }
.banner .text a { font-size:18px; }
ul.social { text-align: left; margin: 0; display: block; float: left; position: absolute; z-index: 1; top: 200px; right: 0; width: 260px; height: auto;}
ul.social li { float:none; margin:0 0 0 10px; }
p { float:left; width:100%; text-align:center; padding:10px 0 0 0; }
}

@media only screen and ( max-width: 640px ) {
	.banner { height: 440px; min-height: 550px; }
	#work { bottom:200px; }
	.arrows { bottom:250px; }
	#work .item { margin:30px 10px; }
	#testimonials .review h1 { font-size: 30px; line-height: 40px; }
	.banner .text h1 { font-size:34px; line-height: 51px; margin:0; }
	.arrows { bottom: 150px; }
	a.logo { left:20px; }
	.nav-trigger { right:20px !important; }
	.banner .text { padding:0 20px; }
	#services .block .icon img { max-width:65px; }
	#services .block .text { padding:0 20px 20px 105px; }
	#testimonials { padding:100px 0; }
}