@font-face{
font-family: "maison neue";
src: url('../fonts/1.woff') format('woff'),
url('../fonts/1.ttf')  format('truetype'),
url('../fonts/1.svg') format('svg');
font-style:normal;
font-weight:400;
}











.mc3{
font-size:14px;
}
.mc4{
line-height:24px;
font-size:13px;
text-transform:uppercase;
letter-spacing:3px;
margin-left:40%;
top:10%;
color: #C4C4C4;
margin-top:80px;
}
.mc5{
font-size:20px;
letter-spacing:4px;
}
.mc6{
float:left; 
margin-right:20px;
width:50%;
}
.mc7{ 
overflow:hidden;
margin-right:5%;
}
@media screen and (max-width: 768px){
.mc4{
line-height:24px;
font-size:13px;
top:0;
margin-top:0px;
margin-left:0;
padding-bottom:40px;
}
.mc6{ 
float: none;
margin-left:20px;
width:100%;
}
.mc7{ 
margin-right:20px;
margin-left:20px;
overflow:hidden;
}
}








html,body {
width:100%;
height:100%;
min-height:100%;
position: relative;
top: -1px;
-webkit-overflow-scrolling: touch;
}




body {
margin:0;
padding:0;
font-weight:400;
font-style:normal;
text-align:left;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
background:#fff;
color:#66666c;
font-family: "maison neue", "Helvetica Neu", Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
line-height:22px;
font-size:16px;
font-weight: normal;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-overflow-scrolling: touch;
}

a {
text-decoration:none;
color:#696c7b;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-ms-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease;
padding-bottom: 1px;
border-bottom: solid 1px transparent;
}

a:hover {
text-decoration:none;
color:#20202c;
border-bottom: solid 1px #20202c;
}

a:visited {
color:#696c7b;
}


header#header .panelToggle {

display:block;
position: relative;
top: 0;
left: 10px;
		-webkit-transition:opacity 0.6s ease, -webkit-transform 0.6s ease;
-moz-transition:opacity 0.6s ease, -moz-transform 0.6s ease;
transition:opacity 0.6s ease, transform 0.6s ease;



outline: none;
border: none;
width: 60px;

}


img.headerLogo {
width: 120px;
float: right;
position: absolute;
right: 10px;
top: 0;
}
.clearHeader{
opacity: 0;
}


.darkHeader {
height: 60px; 
background-color: #fff;
z-index: 999999;
position: fixed;

width: 100%;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
opacity: 1;
box-sizing: border-box;
padding: 20px 0px 0px 0px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.15);
}



img.logo {
display:block;
width:10%;
height:auto;

top:0px;
right:70px;
position:absolute;
z-index:150;
-webkit-transition:opacity 0.6s ease, -webkit-transform 0.6s ease;
-moz-transition:opacity 0.6s ease, -moz-transform 0.6s ease;
transition:opacity 0.6s ease, transform 0.6s ease;
}

img.logow {

display:block;
width:10%;
height:auto;
fill:#fff;
top:0px;
right:70px;
position:absolute;
z-index:50;
-webkit-transition:opacity 0.6s ease, -webkit-transform 0.6s ease;
-moz-transition:opacity 0.6s ease, -moz-transform 0.6s ease;
transition:opacity 0.6s ease, transform 0.6s ease;
}

img.whiteLogo {
display: none;
}

ul.social {
text-align:left;
}

ul.social li {
display:inline;
color:#24253E;
margin-right:10px;
font-size:10px;
text-align:left;
}

ul.social li:last-child {
margin-right:0;
}

ul.social li a {
color:#24253E;
text-align:right;
}

ul.social li a:hover {
color:#24253E;
}


/**** Splash ****/

div#splash {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: #fff;

animation: wipe 2s forwards;
animation-delay: 2s;
}

@keyframes wipe {
0% {  opacity:1; }
90% {opacity: 0; }
100% { transform: translateY(-100%);}
}


/**** Panel ****/

/**** PrimaryNav ****/

div#primaryContainer {

width: 100%;
height: 100%;
display: table;
vertical-align: middle;

z-index: 6;
position: absolute;
}

div#secondaryContainer {

position: absolute;
left: 0;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}


ul.primaryNav {
list-style: none;
margin: 0px;
padding: 0px;
}

ul.primaryNav li {
font-family: "maison neue", "Helvetica Neu", Helvetica, Arial, sans-serif;
font-size: 40px;
color: #FFFFFF;
line-height: 1.2;
margin-bottom: 10px;
}

ul.primaryNav li a {
color: #fff;
}


.panelToggle {
display:block;
top:40px;
left:70px;
position:absolute;
z-index:50;
-webkit-transition:opacity 0.6s ease, -webkit-transform 0.6s ease;
-moz-transition:opacity 0.6s ease, -moz-transform 0.6s ease;
transition:opacity 0.6s ease, transform 0.6s ease;


font-style: normal;
letter-spacing: 2px;
padding-bottom: 2px;
text-decoration: none;

font-family: "maison neue", "Helvetica Neu", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 12px;

outline: none;
border: none;

}

a.panelToggle:hover {
border: none;
}


.panelToggle span {
display:block;
height:2px;
margin:6px 0px;
background:#696c7b;

-webkit-transition:-webkit-transform 0.6s ease, background 0.6s ease;
-moz-transition:-moz-transform 0.6s ease, background 0.6s ease;
transition:transform 0.6s ease, background 0.6s ease;
}

.panelToggle a {
text-decoration: none;
}

.panelToggle a:hover {
text-decoration: none;
}

.panel {
height:100%;
background:rgba(21,20,32,1);
position:fixed;
top:0;
left:0;
overflow:none;
-webkit-overflow-scrolling:touch;
z-index:40;
width: 100%;		
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
transition:all 0.6s ease;
opacity: 0;
visibility: hidden;

}

body.hasPanel .panel {
opacity: 1;
visibility: visible;
}

body.hasPanel img.logo {
display: none;
}

body.hasPanel img.logow {
display: block;
}


#brgr {
width: 26px;
height: 50px;
position: absolute;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

#brgr span {
display: block;
position: absolute;
height: 1px;
width: 100%;
background:#fff;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}



/* Icon 3 */

#brgr span:nth-child(1) {
top: 0px;
}

#brgr span:nth-child(2),#brgr span:nth-child(3) {
top: 6px;
}

#brgr span:nth-child(4) {
top: 12px;
}

#brgr.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}

#brgr.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

#brgr.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#brgr.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}





#mc3 {
width: 26px;
height: 50px;
position: absolute;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

#mc3 span {
display: block;
position: absolute;
height: 1px;
width: 100%;
background:#505050;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}



/* Icon 3 */

#mc3 span:nth-child(1) {
top: 0px;
}

#mc3 span:nth-child(2),#mc3 span:nth-child(3) {
top: 6px;
}

#mc3 span:nth-child(4) {
top: 12px;
}

#mc3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}

#mc3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

#mc3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#mc3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}






.tblCell {
display: table-cell;
vertical-align: middle;
position:relative;
}


/**** Panel ****/



body.hasPanel .panelToggle {
color: #fff;
border-bottom-color: #fff;
}

div.clear {
height: 20px;
clear: both;
}

div#panelFooter {
clear: both;
position: absolute;
bottom: 40px;
width: 100%;
z-index: 999999;

}

div#panelFooter  h3 {
color: #6A666C;
color: #fff;
font-size: 20px;
}
div#panelFooter p {
color: #6A666C;
line-height: 24px;
}

div#panelFooter a {
color: #6A666C;
}

div#panelFooter a:hover {
color: #fff;
}




.wow {
visibility: hidden;
}

/**** FirstContent ****/

section#firstContent {
padding: 120px 0px 70px 0px;

}

section#firstContent.aboutIntro {
padding: 180px 0px 140px 0px;
}

section#firstHero {
/* background: url("../img/firsthero.jpg") no-repeat;
background-size: cover; */
width: 100%;
height: auto;
display: block;
background-position: center center;
margin-bottom: 80px;
}

section#csFirstHero {
/* background: url("../img/firsthero.jpg") no-repeat;
background-size: cover; */
width: 100%;
height: auto;
display: block;
background-position: center center;
margin-bottom: 0px;
}


h1  {

font-family:  "Maison Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;

color: #696c7b;

}

span.firstLine {
color:#20202c;
padding-left: 150px;

font-size: 16px;
text-transform: uppercase;
}

img.mc2, video.mc2 {
width: 100%;
display: block;
height: auto;
}


img.tmImg, video.tmImg {
width: 100%;
display: block;
height: auto;
}








img.mc1 {
width: 40%;
padding-bottom: 30px;
display: block;
height: auto;
}	






div.imgBlock {
margin: 80px 0px 80px 0px;
}

div.imgBlockCs {
margin: 0px 0px 60px 0px;
}

img.thumbImg {
display: block;
width: 100%;
}

div#caseStudies div.row {
margin-bottom: 0px;
}

div.secondSlider {
margin-bottom: 60px;
}
div.clear {
height: 20px;
clear: both;
display: block;
}


h3 {
font-size: 20px;
margin-bottom: 10px;
color: #20202c;
font-family: "maison neue", "Helvetica Neu", Helvetica, Arial, sans-serif;

}

h4 {
font-size: 16px;
color: #20202c;
font-family: "maison neue", "Helvetica Neu", Helvetica, Arial, sans-serif;
margin-top: 20px;
text-align: left;
color: #6A666C;
line-height: 1.2;
}


a.cta {

line-height: 12px;
color: #20202c;
font-family: "maison neue", "Helvetica Neu", Helvetica, Arial, sans-serif;
display: inline-block;
margin-top: 20px;
padding-bottom: 2px;


}

a.cta:hover {

border-bottom: solid 1px #fff;
}

a.cta.dark:hover {

border-bottom: solid 1px #20202c;
}

a.ctaLight {

font-size: 10px;
text-transform: uppercase;
color: #20202c;
font-family: "maison neue", "Helvetica Neu", Helvetica, Arial, sans-serif;
display: inline-block;
padding-bottom: 2px;

}

/**** About ****/

section#aboutHero {

background: #151420;
height: 650px;
width: 100%;
display: block;
margin-bottom: 100px;

}
/**** GetInTouch ****/

section#contact {
margin: 40px 0px 0px 0px; 
}

section#contactPage {
margin: 0px;
}

section#contact h3.sub {
font-size: 20px;
}

/**** Tbl ****/
div.tbl {
display:table;
vertical-align:middle;
width:100%;
height: 100%;
}

div.tblCell {
display:table-cell;
vertical-align:middle;
position:relative;
}


/**** What We Do ****/

ul.listLines {
display: block;
margin-bottom: 0px;

}

ul.listLines li {
border-bottom: solid 1px #efefef;
display: block;
padding: 5px 0px 5px 0px;
font-size: 14px;
}

div.noMargin div.txtBlock {
margin-bottom: 0px!important;
}

div.clients ul.list {

}

div.clients ul.list li {

font-size: 16px;
margin-bottom: 10px;
}

/**** Hero ****/
div#hero {
background-attachment: fixed;
height:80%;
display:block;
background: #fff;
background-size:cover;
position:relative;
}




div.caseStudyOverlay {
z-index: 99999;
display: block;
position: relative;

}	

div.rel {
position: relative;
}
div.overlay {
display: block;
position: absolute;
top: 70px;
}

h2 {
font-size: 30px;
line-height: 1.2;

font-family: "maison neue", "Helvetica Neu", Helvetica, Arial, sans-serif;
font-weight: normal;

}

section.caseStudyContent p {

font-size: 14px;
}

section.caseStudyContent ul.list li {
font-size: 14px;

}

/**** Portfolio ****/

div.portfolioImg {
background: #f5f5f7;
width: 100%;
height: 100%;
padding: 60px 0px 60px 0px;
}

div.portfolioImg img {
clear: both;
display: block;
width: 100%;

}

div.txtBlock {
display: block;
margin: 60px 0px 60px 0px;
clear: both;

}

img.caseStudyHighlight {

display: block;
width: 100%;

}


/**** Case Study ****/

div.csThumb {
position: relative;
}

div.csOverlay {
position: absolute;
z-index: 999997;
background: #151420;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
}

div.csThumb:hover > div.csOverlay {
opacity: 1;
visibility: visible;


}

img.csImg {
position: relative;
}

div.tbl {
display: table;
vertical-align: middle;
}

img.csLogo {
height: 25px;
display: block;
margin: 0px auto;
}

img.csLogoTall {
height: 65px;
display: block;
margin: 0px auto;
}

img.csLogoTaller {
height: 85px;
display: block;
margin: 0px auto;
}

span.clientName {

color: #151420;
}

h4 a:hover {
color: #696c7b;
border-bottom-color: #efefef;
}

div.greyBg {

display: block;
width: 100%;
height: 100%;
min-height: 100%;
}
/**** News ****/

img.newsImg {
display: block;
width: 100%;
}

/**** Footer ****/
footer#footer {
margin-top:70px;
clear:both;
font-family: "maison neue", "Helvetica Neu", Helvetica, Arial, sans-serif;
font-size: 12px;
padding-bottom: 20px;
}

footer#footer a {
padding-bottom:2px;
border-bottom:solid 1px transparent;
color: #20202c;
}

footer#footer a:hover {

border-bottom:solid 1px #171345;
}

.txtRight {
text-align:right;
}


.light {
color: #fff!important;
}

.noTop {
margin-top: 0px!important;
}

div.newsSubContainer {
float: right;
display: block;
}
div.newsSub p {
margin-bottom: 0px;
font-size: 12px;
color: #20202c;
}

div.newsPost {
margin-bottom: 40px;
}

div.newsPost h3 {
line-height: 1.4;
margin-bottom: 0px;
}

span.postDate {
font-size: 14px;
color: #66666c;
display: block;
margin-bottom: 30px;
}

video.newsVid {
margin-bottom: 40px;
}

img.newsVid {
margin-bottom: 40px;
}


/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

div.container {
margin: 0px 40px 0px 40px!important;
}

div#hero {
background-position: right center;
}

div#hero {
background-attachment: fixed;

display:block;
background: #20202c;
background-size:cover;
position:relative;
}


h1.break br {
content: " ";
margin-left: 6px;

}

.panelToggle {
left: 45px!important;
}
}

/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {


div.container {
margin: 0px 20px 0px 20px!important;
}

form {
width: 100%!important;
}


.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {

padding-left: 0px;
padding-right: 0px;
width: auto;
border-bottom: none;
color: #fff;
}


input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
display: block;
min-width: 100%;
width: 100%!important;
margin-bottom: 10px;
border-radius: 0px;
background: transparent;
color: #66666c;
border-bottom: solid 1px #66666c;

}

div#hero {
background-position: right center;
margin: 20px 0px 40px 0px;
}

div.overlay {
display: block;
position: absolute;
top: 40px;
}

div.txtBlock {
margin: 30px 0px 40px 0px;


}

section#firstHero {
margin-bottom: 40px;
}

section#getInTouch {
padding: 40px 0px 40px 0px;
background: #20202c;
}


section#firstContent {
padding: 110px 0px 40px 0px;
}


footer#footer {
margin-top:40px;
}

ul.primaryNav li {
margin-right: 21px;
}


img.logo {
margin-bottom: 20px;

}

ul.primaryNav {
text-align: left;
}

ul.primaryNav li {
text-align: left;
}

/**** new ****/

img.whiteLogo {
display: none;
}
.clearHeader{
opacity: 1;
height: 60px; 
background-color: #fff;
z-index: 999999;
position: fixed;

width: 100%;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
opacity: 1;
box-sizing: border-box;
padding: 20px 0px 0px 0px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.15);
}

body.hasPanel .clearHeader {
background: transparent;
box-shadow: none;
}

body.hasPanel img.navyLogo {
display: none;
}

body.hasPanel img.whiteLogo {
display: block;
}

img.logo, img.logow {
display: none;
}

body.hasPanel img.logow {
display: none;
}

img.whiteLogo {
display: none;
}

a.deskNav {
display: none;
}

h1 {
font-size: 20px;
line-height: 1.4;
}


h1.break br {
content: " ";
margin-left: 5px;

}



.break br {
content: " ";
margin-left: 1px;

}




h2 {
font-size: 20px;
line-height: 1.2;
}

h4 {
line-height: 1.2;
font-size: 14px;
}

p {
font-size: 14px;
}

div.imgBlockCs h4 {
margin-bottom: 40px;
}

div#secondaryContainer {
top: 100px;
transform: none;
position: relative;
}

div#panelFooter {
margin-top: 180px;
position: relative;
clear: both;
display: block;
}

div.newsSubContainer {
float: left;
}

ul.primaryNav li {
font-size: 22px;
}

div#panelFooter  h3 {
font-size: 16px;
line-height: 1.2;
}

ul.list li {
font-size: 14px;
line-height: 1.6;
}

div.newsSub p {
font-size: 14px;
}



img.csLogo {
height: 15px;
display: block;
margin: 0px auto;
}

img.csLogoTall {
height: 45px;
display: block;
margin: 0px auto;
}

img.csLogoTaller {
height: 55px;
display: block;
margin: 0px auto;
}

div.newsPost {
display: block;
margin-bottom: 30px!important;
}

.flex-direction-nav a.flex-next {
right: 0px;
display: none;
}

.flex-direction-nav a.flex-prev {
left: 0px;
display: none;
}

.panelToggle {
left: 45px;
}
img.logo {
right: 45px;
}

header#header .panelToggle {
left: 0px;
}

img.headerLogo {
right: 0px;
}

footer#footer {
background: #151420;
color: #66666c;
padding: 30px 0px 20px 0px;
}

footer#footer a {
color: #fff;
}

div.newsSubContainer {
width: 100%;
}
footer#footer div.newsSubContainer p {
color: #fff;
margin-bottom: 10px;
}

footer#footer input:focus {
color: #fff!important;
}

input:active {
color: #fff;
}

div.secondSlider {
margin-bottom: 20px;
}

div.noMargin div.txtBlock {
margin-bottom: 40px!important;
}

}