/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

@import url('//fast.fonts.net/cssapi/c3f55cdb-0b3e-416b-be30-cdd361b854cf.css');


html {
    font-size: 62.5%;
    line-height: 1.4;
    height: 100%;
	-webkit-font-smoothing: antialiased;
}

html,
button,
input,
select,
textarea {
    color: #000000;
    font-family: 'Helvetica Neue LT W01_65 Md', Helvetica Neue, Helvetica, Arial, sans-serif;
}


/*
 * Stop textarea rounding on ios
 */

input,
textarea {
    -webkit-border-radius: 0;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/*
 * Responsive video
 */

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	float: left;
	width: 100%;
	margin: 0 0 30px 0;
}
.video-wrapper object,
.video-wrapper embed,
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


a{
    text-decoration: none;
    }

/*
 * Use new box sizing model
 */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

strong{
	font-weight: normal;
	font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


.browserupgrade{
	float: left;
	width: 100%;
	text-align: center;
	padding: 10px;
	font-size: 18px;
}

.browserupgrade a{
	color: #000;
	text-decoration: underline;
	}


/*--- rows ---*/

.row{
    float: left;
    width: 100%;
    position: relative;
    }


.row .inner{
    max-width: 1280px;
    padding: 0;
    margin: 0 auto;
    position: relative;
    }


/*--- intro ---*/

#intro .mwa{
    position: absolute;
    top: 50%;
    left: -9999px;
    margin: -168px 0 0 -396px;
    z-index: 999;
    }

#intro .mwa img{
    float: left;
    width: 100%;
    max-width: 792px;
}

#intro .mwa h2{
	float: left;
	width: 100%;
	max-width: 792px;
    color: #FFF;
    font-size: 47px;
    font-weight: bold;
    text-align: center;
    margin: 30px 0 0 0;
    
}

#intro a:hover .mwa{
	
	}

#intro .down{
    position: absolute;
    top: 75%;
    left: 50%;
    float: left;
    width: 60px;
    height: 27px;
    margin: 35px 0 0 -30px;
    background: url("../img/arrow-down.png") no-repeat 50% 50%;
    }

#intro .slide,
#intro .section{
	background-size: cover;
    position: relative;
    }

 #intro #section0 .slide{   
	background: url("../img/bg1.jpg");   
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 1000px;
	}


@media only screen and (min-width: 1100px) {
	#intro #section0 .slide{ 
		background-attachment:fixed;
 	}
}


#myVideo{
    position: absolute;
    right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
 	background-color: black; /* in case the video doesn't fit the whole page*/
  	background-image: /* our video */;
  	background-position: center center;
  	background-size: contain;
   	object-fit: cover; /*cover video background */
   	z-index:3;
	}


/*--- navigation ---*/

#navigation{
    background-color: #FFF;
    background-color:rgba(255,255,255,0.9);
    padding: 30px 0;
    }

#navigation.moving{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    }

#navigation #logo{
    float: left;
    opacity: 1;
    -webkit-transition: opacity 200ms linear;
	-moz-transition: opacity 200ms linear;
	-o-transition: opacity 200ms linear;
	transition: opacity 200ms linear;
    }

#navigation #logo:hover{
    opacity: 0.7;	
	}
    
    

#navigation #nav,
#navigation #nav ul{
    float: right;
    }

#navigation #nav ul li{
    float: left;
    }

#navigation #nav ul li a{
    float: left;
    margin: 0 0 0 30px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #000000;
    -webkit-transition: color 200ms linear;
	-moz-transition: color 200ms linear;
	-o-transition: color 200ms linear;
	transition: color 200ms linear;
    }

#navigation #nav ul li a:hover{
    color: #666;
    }

#navigation #menu{
    display: none;
    float: right;
    width: 26px;
    height: 22px;
    background: url("../img/bars.png") no-repeat 0 0;
    background-size: 26px auto;
    margin: -3px 0 0 0;
    cursor: pointer;
    text-indent: -9999px;
    }

#navigation #menu.open{
	background-position: 0 -22px;
	}

/*--- text ---*/

#text:before { 
  display: block; 
  content: " "; 
  margin-top: -78px; 
  height: 78px; 
  visibility: hidden; 
}


#text{
    padding: 120px 0 10px 0;
    }

#text.moving{
	padding: 200px 0 10px 0;
	}

#text.work{
    background: #eee;
    padding: 120px 0 20px 0;
    }
    
#text.title{
    background: #eee;
    padding: 70px 0 0px 0;
    }    

#text.title h1{
	padding: 0 0 40px 0;
}

#text.clients-title{
    background: #eee;
    padding: 70px 0 50px 0;
    }    

#text.clients-title h1{
	padding: 0 0 30px 0;
}

#text .controls{
    float: right;
    height:
    text-align: right;
    }

#text .controls a{
    float: left;
    width: 16px;
    height: 16px;
    margin: 0 0 0 20px;
    background: url("../img/controls-small.png") no-repeat 0 0;
    }

#text .controls a:hover{
    background-position: 0 -16px;
}

#text .controls .next a{
    background-position: -16px 0;
    }

#text .controls .next a:hover{
    background-position: -16px -16px;
    }

#text .controls a.close{
    background-position: -32px 0;
    }
    
#text .controls a:hover.close{
    background-position: -32px -16px;
    }    

#text h1{
    font-size: 20px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0 0 5px 0;
    }

#text h2{
    font-size: 20px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0 0 40px 0;
    }

#text h3{
    font-size: 20px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0 0 40px 0;
    }

#text p{
    font-size: 14px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 1.5em;
    padding: 0 0 40px 0;
    color: #878787;
    }

#text.clients-title h1{
    font-size: 36px;
    padding: 0 0 30px 0;
    }

#text.clients-title p{
    font-size: 18px;
    padding: 0 0 30px 0;
    }

#about h1,
#about h2,
#about h3,
#about h4{
    font-size: 36px;
    padding: 0 0 30px 0;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }



#text p a{
    color: #000;
    -webkit-transition: color 200ms linear;
	-moz-transition: color 200ms linear;
	-o-transition: color 200ms linear;
	transition: color 200ms linear;
    }

#text p a:hover{
    color: #666;
    }

#text .col{
    float: left;
    width: 50%;
    padding: 0 10px 0 0;
    }

#text.work .col{
    padding: 0 80px 0 0;
    }

#text .list{
    color: #878787;
    padding: 0 0 40px 0;
    }



/*--- service ---*/

.service{
	padding: 0 0 80px 0;
	overflow: hidden;
}

.service .inner{
	padding-top: 190px;
    }

.service h2{
	font-size: 190px;
	line-height: 1em;
	color: #EEE;
	font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
	position: absolute;
	top: 60px;
	left: 0;
	z-index: 0;
	}

.service.alt{
	background: #EEE;
}

.service.alt h2{
	color: #FFF;
}

.service h3{
	font-size: 36px;
	line-height: 1.3em;
	color: #000;
	z-index: 1;
	position: relative;
	font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
	}
	
.service h4{
	font-size: 36px;
	line-height: 1.3em;
	padding: 0 0 65px 0;
	color: #999;
	z-index: 1;
	position: relative;
	font-family:'Helvetica Neue LT W01_45 Light', Helvetica Neue, Helvetica, Arial, sans-serif;
	}	


.service ul{
	font-size: 18px;
}

.service ul li{
	padding: 0 0 15px 0;
}

.service h6{
	position: absolute;
	bottom: 15px;
	right: 5%;
	float: left;
	width: 430px;
	padding: 0 0 0 60px;
	font-size: 18px;
	font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
}

.service h6 em{
	font-size: 72px;
	position: absolute;
	top: 0;
	left: 0;
	font-style: normal;
	line-height: 0.9em;
}


/*--- examples ---*/

#examples{
    float: left;
    width: 100%;
    }

#examples img{
    float: left;
    width: 100%;
    height: auto !important;
    padding: 0 0 20px 0;
    }

#examples img.alignleft{
	float: left;
    width: 50%;
    padding: 0 10px 20px 0;
    }

#examples img.alignright{
	float: right;
    width: 50%;
    padding: 0 0 20px 10px;
    }

#examples blockquote{
	float: left;
	width: 50%;
	padding: 0 80px 20px 0;
	color: #858585;
	}

#examples blockquote p{
	padding: 0;
	}

/*--- pagination ---*/

#pagination{
    float: left;
    width: 100%;
    padding: 20px 0;
    font-size: 14px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#pagination .prev,
#pagination .next{
    float: left;
    height: 16px;
    line-height: 16px;
    color: #000;
    }

#pagination .prev a,
#pagination .next a{
    color: #000;
    }	

#pagination .prev a em,
#pagination .next a em{
    float: left;
    width: 16px;
    height: 16px;
    margin: 0 5px 0 0;
    background: url("../img/controls-small.png") no-repeat 0 0;
    }

#pagination .prev a:hover em{
	background-position: 0 -16px;
}

#pagination .next{
    float: right;
    }

#pagination .next a em{
    float: right;
    margin: 0 0 0 5px;
    background: url("../img/controls-small.png") no-repeat -16px 0;
    }

#pagination .next a:hover em{
	background-position: -16px -16px;
}

/*--- work ---*/

#work{
    background: #FFF;
    padding: 60px 0 60px 0;
    }

#work .job{
    float: left;
    width: 50%;
    padding: 0 10px 20px 0;
    }

#work .job.alt{
    padding: 0 0 20px 10px;
    }

#work .job a{
    float: left;
    width: 100%;
    font-size: 20px;
    color: #FFF;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    position: relative;
    }

#work .job img{
    float: left;
    width: 100%;
    height: auto;
    }

#work .job a span{
    float: left;
    width: 100%;
    padding: 40px 30px;
    position: absolute;
    top: 0;
    left: -9999px;
    bottom: 0;
    right: 0;
    opacity: 0;
    background-color:rgba(0,0,0,0.65);
    }

#work .job a:hover span{
    left: 0;
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    opacity: 1;
    }

#work .job a span h3{
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0 0 20px 0;
    }

#work .job a span h4{
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0 0 20px 0;
    color: #CCC;
    }

.more{
    float: left;
    width: 100%;
    padding: 30px 0 40px 0;
    text-align: center;
    font-size: 20px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #000;
    cursor: pointer;
    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -o-transition: color 200ms linear;
    transition: color 200ms linear;
    }

.more a{
    color: #000;
    }

.more:hover,
.more a:hover{
    color: #666;
    }


/*--- case-studies ---*/

#case-studies{
    background: #FFF;
    padding: 0;
    }
    
#case-studies h3{
    float: left;
    width: 100%;
    font-size: 36px;
    padding: 80px 0;
    color: #000;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#case-studies .job{
    float: left;
    width: 33.333%;
    padding: 0;
    }


#case-studies .job a{
    float: left;
    width: 100%;
    font-size: 20px;
    color: #FFF;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    position: relative;
    }

#case-studies .job img{
    float: left;
    width: 100%;
    height: auto;
    }

#case-studies .job a span{
    float: left;
    width: 100%;
    padding: 40px 30px;
    position: absolute;
    top: 0;
    left: -9999px;
    bottom: 0;
    right: 0;
    opacity: 0;
    background-color:rgba(0,0,0,0.45);
    }

#case-studies .job a:hover span{
    left: 0;
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    opacity: 1;
    }

#case-studies .job a span h4{
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0 0 20px 0;
    display: none;
    }

#case-studies .job a span h5{
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0 0 20px 0;
    color: #CCC;
    display: none;
    }

#case-studies .more{
	margin: 0;
	padding: 0;
}

#case-studies .more a{
    float: left;
    width: 100%;
    padding: 45px 0 40px 0;
    text-align: center;
    font-size: 20px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #000;
    background: #EEEEEE;
    color: #000;
    cursor: pointer;
    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -o-transition: color 200ms linear;
    transition: color 200ms linear;
    }


#case-studies .more:hover,
#case-studies .more a:hover{
    color: #666;
    }




/*--- services ---*/

#services{
    padding: 50px 0;
    background-color: #000;
    background-image: url("../img/bg1.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	position: relative;
	font-size: 14px;
	color: #DDDDDD;
    }

@media only screen and (min-width: 1100px) {
    #services{background-attachment: fixed;}
    }

#services h3{
    float: left;
    width: 100%;
    font-size: 20px;
    padding: 0 0 50px 0;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#services .text{
    float: left;
    width: 50%;
    padding: 0 10px 0 0;
    padding: 0 80px 0 0;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#services .text p{
    line-height: 1.5em;
    padding: 0 0 20px 0;
    }

.list{
    float: right;
    width: 50%;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding: 0 0 20px 10px;
    }

.list ul{
    float: left;
    width: 47%;
    }

.list ul.alt{
    float: right;
    width: 47%;
    }


/*--- brands-title ---*/

#brands-title{
    padding: 80px 0;
    background-color: #000;
    background-image: url("../img/bg1.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	position: relative;
	font-size: 14px;
	color: #FFF;
    }

#brands-title h3{
    float: left;
    width: 100%;
    font-size: 36px;
    padding: 0;
    color: #FFF;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }


/*--- brands ---*/

#brands{
    padding: 70px 0 30px 0;
    }

#brands ul{
    float: left;
    width: 100%;
    }

#brands ul li{
    text-align: center;
    }

#brands .more{
    float: left;
    padding: 20px 0 0 0;
    width: 100%;
    }

#brands .owl-prev{
    position: absolute;
    top: 18px;
    left: -10px;
    height: 32px;
    text-indent: -9999px;
    background: url("../img/controls.png") no-repeat 0 0;
    }

#brands .owl-next{
    position: absolute;
    top: 18px;
    right: -10px;
    height: 32px;
    text-indent: -9999px;
    background: url("../img/controls.png") no-repeat -54px 0;
    }


#list{
    float: left;
    width: 100%;
    padding: 80px 0 80px 0;
    }

#list li{
    float: left;
    width: 25%;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: center;
    }

#list li img{
    width: 98%;
    max-width: 195px;
    height: auto;
    }


/*--- award ---*/

#award{
    padding: 80px 0;
    background-color: #000;
    background-image: url("../img/bg1.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	position: relative;
	font-size: 14px;
	color: #DDDDDD;
    }

@media only screen and (min-width: 1100px) {
    #award{background-attachment: fixed;}
    }

#award h3{
    float: left;
    width: 100%;
    font-size: 36px;
    padding: 0;
    color: #FFF;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#award ul{
    float: left;
    width: 100%;
    padding: 80px 0 65px 0;
    }

#award ul li{
    float: left;
    width: 20%;
    text-align: center;
    }


/*--- about ---*/

#about{
    padding: 80px 0;
    }

#about .text{
    float: left;
    width: 100%;
    padding: 0 0 0 0;
    }

#about h2,
#about h3,
#about h4{
    font-size: 36px;
    padding: 0 0 30px 0;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#about p{
    font-size: 18px;
    padding: 0 0 20px 0;
    line-height: 1.5em;
    color: #878787;
    }

#about .image{
	float: right;
	width: 35%;
	height: 340px;
	margin: 80px 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}


#contact-form form{
    float: right;
    width: 100%;
    padding: 20px;
    }

#contact-form form h4{
    font-size: 36px;
    padding: 0 0 30px 0;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#contact-form form p{
    font-size: 18px;
    padding: 0 0 20px 0;
    line-height: 1.5em;
    color: #878787;
    }


#contact-form form .field{
    float: left;
    width: 100%;
    padding: 13px 0 0 0;
    position: relative;
    }

#contact-form form .field label{
    float: left;
    width: 20%;
    }

#contact-form form .field input,
#contact-form form .field textarea{
    float: right;
    width: 78%;
    font-size: 14px;
    padding: 5px;
    border: 1px solid #666666;
    }
    
#contact-form form .captcha{
    padding-left: 22%;
}    

#contact-form form .field textarea{
	max-height: 120px;
	}

#contact-form form .field input.wpcf7-not-valid,
#contact-form form .field textarea.wpcf7-not-valid{
	border-color: #990000;
	}

#contact-form form .submit{
    float: left;
    width: 100%;
    padding: 23px 0 0 22%;
    }

#contact-form form .submit input{
    font-size: 14px;
    padding: 10px;
    width: 140px;
    text-align: center;
    background: none;
    background-color: #666;
    color: #FFF;
    border: 1px solid #666666;
	-webkit-transition: background-color 200ms linear;
	-moz-transition: background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	transition: background-color 200ms linear;
    }

#contact-form form .submit input:hover{
    background-color: #FFF;
    color: #666;
    }


#contact-form form .wpcf7-not-valid-tip{
    float: right;
    width: 78%;
    font-size: 14px;
    color: #990000;
    }

#contact-form form .wpcf7-response-output{
	float: left;
	width: 100%;
	margin: 20px 0 0 0;
	padding: 10px;
	font-size: 14px;
	font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
	}




/*--- address ---*/


#address{
    background: #444444;
    }

#address .text{
    float: left;
    width: 60%;
    padding: 80px 80px 80px 0;
   	font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #FFF;
    position: relative;
    }

#address h4{
    font-size: 36px;
    padding: 0 0 30px 0;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#address p.tel{
	width: 60%;
    font-size: 24px;
    padding: 20px 0 0 0;
    line-height: 1.3em;
    color: #999999;
    font-family:'Helvetica Neue LT W01_45 Light', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#address .text a{
    color: #FFF;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    }

#address .text a:hover{
   	text-decoration: underline;
    }

#address .text .tel a{
   	text-decoration: none;
   	cursor: default;
    }
    
#address p.address{
	float: left;
	width: 40%;
	position: absolute;
	bottom: 80px;
	right: 0;
	font-size: 24px;
	line-height: 1.2em;
	color: #999999;
	font-family:'Helvetica Neue LT W01_45 Light', Helvetica Neue, Helvetica, Arial, sans-serif;
}

#address p.email{
	width: 60%;
    padding: 30px 0 0 0;
}

#address p.email a{
    font-size: 20px;
    line-height: 1.3em;
    color: #FFF;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif
    }

#address #map{
    float: right;
    width: 35%;
    }

#address #map iframe{
    float: left;
    width: 100%;
    height: 100%;
    }


/*--- footer ---*/

#footer{
    padding: 80px 0 30px 0;
    background-color: #000;
    background-image: url("../img/bg1.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	position: relative;
	font-size: 14px;
	color: #DDDDDD;
    }


@media only screen and (min-width: 1100px) {
    #footer{background-attachment: fixed;}
    }


#footer-logo{
    float: left;
    opacity: 1;
    -webkit-transition: opacity 200ms linear;
	-moz-transition: opacity 200ms linear;
	-o-transition: opacity 200ms linear;
	transition: opacity 200ms linear;
    }

#footer-logo:hover{
    opacity: 0.7;	
	}
	
#footer-logo img{
	width: 118px;
	height: auto;
	margin: 12px 0 0 0;
}
    

#footer h4{
    float: right;
    font-size: 36px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #FFF;
    }

#footer p{
    float: left;
    width: 100%;
    padding: 215px 0 0 0;
    font-size: 12px;
    font-family:'Helvetica Neue LT W01_71488914', Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #666;
    }

#footer p a{
    color: #666;
    margin: 0 0 0 15px;
    }

#footer p a:hover{
	text-decoration: underline;
	}
	

/* ==========================================================================
   Responsive
   ========================================================================== */


@media only screen and (max-width: 1340px) {

    .row .inner{float: left;width: 100%;padding: 0 5%;box-sizing: border-box;}

	.service{padding: 0 0 80px 0;}
	.service .inner{padding-top: 190px;}

	.service h2{left: 5%;}

}


@media only screen and (max-width: 1100px) {

    #intro .mwa{width: 501px;margin: -60px 0 0 -250px;}
    #intro .mwa h2{float: left;width: 100%;font-size: 29px;margin: 0;padding: 10px 0 0 0;}
    
    #award ul li{width: auto;margin: 0 30px 30px 30px;
    #award ul li img{width: auto;max-height: 60px;}

    }


@media only screen and (max-width: 960px) {

	.service{padding: 0 0 80px 0;}
	.service .inner{padding-top: 165px;}
	.service h2{font-size: 160px;top: 60px;}
	.service h3{font-size: 32px;}
	.service h4{font-size: 32px;padding: 0 0 35px 0;}	
	.service ul{font-size: 18px;}
	.service h6{width: 320px;}


    #award ul{text-align: center;padding: 90px 0 50px 0;}
    #award ul li{float: none;display: inline-block;text-align: center;width: auto;}
    #award ul li img{width: auto;}

    #about form .field label{width: 28%;}
    #about form .field input,
    #about form .field textarea{width: 72%;}
    #about form .submit{padding: 23px 0 0 28%;}

    #footer h4{width: 100%;padding: 20px 0 0 0;}

    }


@media only screen and (max-width: 880px) {

	.service{padding: 0 0 60px 0;}
	.service .inner{padding-top: 105px;}

	.service h2{font-size: 120px;top: 30px;}
	.service h3{font-size: 28px;}
	.service h4{font-size: 28px;padding: 0 0 35px 0;}	
	.service ul{font-size: 18px;padding: 0 0 30px 0;}
	.service h6{position: relative;bottom: auto;right: auto;float: left;width: 100%;padding: 0 0 0 60px;}

	.list ul{width: 100%;}
	.list ul.alt{width: 100%;}

	#case-studies .job{width: 50%;}
	#case-studies .job3{display: none;}
	
	#address{padding: 0;}
	#address .inner{float: left;width:100%;padding: 0;}
	#address .text{width: 50%;padding: 60px 40px 60px 40px;}
	#address p.tel{width: 100%;}
	#address p.address{width: 100%;position: relative;bottom: auto;right: auto;padding-top: 40px;}
	#address p.email{width: 100%;}
	#address #map{float: right;width: 50%;}

    }

@media only screen and (max-width: 700px) {

    #list li{width: 33.333%;}
    #intro .mwa{width: 300px;margin: -60px 0 0 -150px;}

    #footer h4{font-size: 28px;width: 100%;padding: 20px 0 0 0;}

    }

@media only screen and (min-width: 740px) {

    #navigation #nav ul{display: block !important;}

    }

@media only screen and (max-width: 740px) {

    #navigation{position: absolute !important;top: 0;left: 0;padding: 20px 0;z-index: 1001;}
    #navigation #menu{display: block;}
    #navigation #nav ul{display: none;}

    #navigation #nav,
    #navigation #nav ul,
    #navigation #nav ul li{width: 100%;}
    #navigation #nav ul{padding: 30px 0 0 0;}
    #navigation #nav ul li a{ width: 100%;margin: 0 0 0 0;padding: 15px;font-size: 20px;text-align: center;border-top: 1px solid #FFF;}

	.home #navigation{background: none;}
	.home #navigation #logo{display: none;}
	.home #navigation #nav ul li{background-color:rgba(255,255,255,0.9);}
	.home #navigation #menu{background-image: url("../img/bars-white.png");}

    #text, #text.moving{padding: 50px 0 10px 0;}

	#text.clients-title h1{font-size: 26px;margin-top: 40px;}

    #text.work .col{padding: 0 0px 0 0;}

    #examples img.alignleft{width: 100%;padding: 0 0 20px 0;}
    #examples img.alignright{width: 100%;padding: 0 0 20px 0;}

    #intro .mwa{width: 300px;margin: -30px 0 0 -150px;}
    #intro .mwa h2{font-size: 26px;}


	#brands-title h3{font-size: 26px;}

	#award{padding: 60px 0;}
	#award ul{padding: 60px 0 30px 0;}
	#award h3{font-size: 26px;}

	#case-studies h3{font-size: 26px;padding: 60px 0;}
	#case-studies .more a{padding: 35px 0 30px 0;}

	#about{padding: 60px 0;}
	#about .text{padding: 0 60px 0 0;}
	#about h1, #about h2,#about h3,#about h4{font-size: 26px;}
	#about p{font-size: 18px;}
	#about .image{width: 100%;height: 340px;margin: 20px 0 20px 0;}

	#address .text{width: 100%;padding: 60px 5%;}
	#address h4{font-size: 26px;padding: 0 0 20px 0;}
	#address p.tel{width: 100%;font-size: 22px;}
	#address p.address{width: 100%;position: relative;bottom: auto;right: auto;}
	#address p.email{width: 100%;padding: 30px 0 30px 0;}
    #address #map{width: 100%;height: 345px;margin: 0;}

    #text .col{width: 100%;}
    #text .list{width: 100%;}

    #work .job{width: 100%;padding: 0 0 20px 0;}
    #work .job.alt{padding: 0 0 20px 0;}
    #work .job a{font-size: 16px;}

    #services .text{width: 100%;padding: 0 10px 0 0;}
    #services .list{width: 100%;padding: 30px 0 0 0;}

	#examples blockquote{width: 100%;padding: 0 0 20px 0;}

    #about .text{width: 100%;padding: 0 0px 0 0;}
    #about form{width: 100%;padding: 30px 0 0 0;}


	.list ul{width: 47%;}
	.list ul.alt{width: 47%;}

    .fp-controlArrow.fp-prev {left: 15px !important;}
    .fp-controlArrow.fp-next {right: 15px !important;}


 	#intro #section0 .slide{min-height: 600px;}

    #footer h4{font-size: 20px;width: 100%;padding: 20px 0 0 0;}
	#footer{padding: 60px 0 30px 0;}
	#footer p{padding: 160px 0 0 0;}

}


@media only screen and (max-width: 660px) {    
    
    .service{padding: 0 0 60px 0;}
	.service .inner{padding-top: 95px;}
	.service h2{font-size: 80px;top: 50px;}
	.service h3{font-size: 26px;}
	.service h4{font-size: 26px;padding: 0 0 35px 0;}	
	.service ul{font-size: 16px;padding: 0 0 30px 0;}
	.service h6{font-size: 16px;padding: 0 0 0 50px;}
	.service h6 em{font-size: 62px;}

}


@media only screen and (max-width: 510px) {

    .list ul{width: 100%;}
    .list ul.alt{width: 100%;}

	#case-studies .job{width: 100%;}
	#case-studies .job2{display: none;}

	#contact-form form h4{font-size: 26px;}
	#contact-form form .field label{width: 100%;}
	#contact-form form .field input,#contact-form form .field textarea{width: 100%;}
	#contact-form form .captcha{padding-left: 0%;margin-top: 20px;}    
	#contact-form form .submit{padding: 23px 0 0 0;}
	#contact-form form .wpcf7-not-valid-tip{width: 100%;}

	}


@media only screen and (max-width: 440px) {    
    
    .service{padding: 0 0 60px 0;overflow:hidden;}
	.service .inner{padding-top: 95px;}
	.service h2{font-size: 60px;top: 65px;}
	.service h3{font-size: 22px;}
	.service h4{font-size: 22px;padding: 0 0 35px 0;}	

    #list li{width: 50%;}

    #intro .mwa{width: 240px;margin: -30px 0 0 -120px;}
    #intro .mwa h2{font-size: 20px;}

    #about form .field label{width: 100%;}
    #about form .field input,
    #about form .field textarea{width: 100%;}
    #about form .submit{padding: 23px 0 0 0;}

	#address p.tel{font-size: 20px;}
	#address p.address{font-size: 20px;}

}


.sampleClass {float:left;}
@media only screen and (max-width: 620px){
	.sampleClass {float:none;}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}