/*



Theme Name: City Creative

Theme URI: http://www.linkdigital.co.uk/

Author: Link Digital

Author URI: http://www.linkdigital.co.uk

Description: Custom responsive theme by Link Digital.

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: city

Tags:





This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.



City is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.



Normalizing styles have been helped along thanks to the fine work of

Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/



*/







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



>>> TABLE OF CONTENTS:



----------------------------------------------------------------



# Normalize



# Typography



# Elements



# Forms



# Navigation



	## Links



	## Menus



# Accessibility



# Alignments



# Clearings



# Widgets



# Content



    ## Posts and pages



	## Asides



	## Comments



# Infinite scroll



# Media



	## Captions



	## Galleries



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







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



# Normalize



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



html {

	font-family: sans-serif;

	-webkit-text-size-adjust: 100%;

	-ms-text-size-adjust: 100%;

}

body {

	margin: 0;

}

article,  aside,  details,  figcaption,  figure,  footer,  header,  main,  menu,  nav,  section,  summary {

	display: block;

}

audio,  canvas,  progress,  video {

	display: inline-block;

	vertical-align: baseline;

}

audio:not([controls]) {

	display: none;

	height: 0;

}

[hidden],  template {

	display: none;

}

a {

	background-color: transparent;

}

a:active,  a:hover {

	outline: 0;

}

abbr[title] {

	border-bottom: 1px dotted;

}

b,  strong, .strong {

	font-weight: bold;

}

dfn {

	font-style: italic;

}

h1 {

	font-size: 2em;

	margin: 0.67em 0;

}

mark {

	background: #ff0;

	color: #000;

}

small {

	font-size: 80%;

}

sub,  sup {

	font-size: 75%;

	line-height: 0;

	position: relative;

	vertical-align: baseline;

}

sup {

	top: -0.5em;

}

sub {

	bottom: -0.25em;

}

img {

	border: 0;

}

svg:not(:root) {

	overflow: hidden;

}

figure {

	margin: 1em 40px;

}

hr {

	box-sizing: content-box;

	height: 0;

}

pre {

	overflow: auto;

}

code,  kbd,  pre,  samp {

	font-family: monospace, monospace;

	font-size: 1em;

}

button,  input,  optgroup,  select,  textarea {

	color: inherit;

	font: inherit;

	margin: 0;

}

button {

	overflow: visible;

}

button,  select {

	text-transform: none;

}

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

	-webkit-appearance: button;

	cursor: pointer;

}

button[disabled],  html input[disabled] {

	cursor: default;

}

 button::-moz-focus-inner,  input::-moz-focus-inner {

 border: 0;

 padding: 0;

}

input {

	line-height: normal;

}

input[type="checkbox"],  input[type="radio"] {

	box-sizing: border-box;

	padding: 0;

}

 input[type="number"]::-webkit-inner-spin-button,  input[type="number"]::-webkit-outer-spin-button {

 height: auto;

}

input[type="search"] {

	-webkit-appearance: textfield;

	box-sizing: content-box;

}

 input[type="search"]::-webkit-search-cancel-button,  input[type="search"]::-webkit-search-decoration {

 -webkit-appearance: none;

}

fieldset {

	border: 1px solid #c0c0c0;

	margin: 0 2px;

	padding: 0.35em 0.625em 0.75em;

}

legend {

	border: 0;

	padding: 0;

}

textarea {

	overflow: auto;

}

optgroup {

	font-weight: bold;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}

td,  th {

	padding: 0;

}

/* Custom Style ========================================================== */







h1, h2, h3, h4, h5 {

	font-family: 'Roboto', sans-serif;

}

h2 {

	font-size: 35px;

}

.left {

	text-align: left

}

.center {

	text-align: center

}

.right {

	text-align: right

}

.fading {

	-o-transition: color 0.2s ease-out, background 0.2s ease-in;

	-ms-transition: color 0.2s ease-out, background 0.2s ease-in;

	-moz-transition: color 0.2s ease-out, background 0.2s ease-in;

	-webkit-transition: color 0.2s ease-out, background 0.2s ease-in;

	transition: color 0.2s ease-out, background 0.2s ease-in;

}

/* Margin and padding ========================================================== */







.noma {

	margin: 0px !important;

}

.nopa {

	padding: 0px !important;

}

.relative {

	position: relative !important;

}

.absolute {

	position: absolute !important;

}

.m5 {

	margin: 5px

}

.m10 {

	margin: 10px

}

.m20 {

	margin: 20px

}

.m30 {

	margin: 30px

}

.m40 {

	margin: 40px

}

.mt5 {

	margin-top: 5px

}

.mt10 {

	margin-top: 10px

}

.mt15 {

	margin-top: 15px

}

.mt20 {

	margin-top: 20px

}

.mt30 {

	margin-top: 30px

}

.mt40 {

	margin-top: 40px

}

.mb5 {

	margin-bottom: 5px

}

.mb10 {

	margin-bottom: 10px

}

.mb20 {

	margin-bottom: 20px

}

.mb30 {

	margin-bottom: 30px

}

.mb40 {

	margin-bottom: 40px

}

.ml5 {

	margin-left: 5px

}

.ml10 {

	margin-left: 10px

}

.ml20 {

	margin-left: 20px

}

.ml30 {

	margin-left: 30px

}

.ml40 {

	margin-left: 40px

}

.mr5 {

	margin-right: 5px

}

.mr10 {

	margin-right: 10px

}

.mr20 {

	margin-right: 20px

}

.mr30 {

	margin-right: 30px

}

.mr40 {

	margin-right: 40px

}

.p5 {

	padding: 5px

}

.p10 {

	padding: 10px

}

.p20 {

	padding: 20px

}

.p30 {

	padding: 30px

}

.p40 {

	padding: 40px

}

.pt5 {

	padding-top: 5px

}

.pt10 {

	padding-top: 10px

}

.pt20 {

	padding-top: 20px

}

.pt30 {

	padding-top: 30px

}

.pt40 {

	padding-top: 40px

}

.pt93 {

	padding-top: 93px

}

.pb5 {

	padding-bottom: 5px

}

.pb10 {

	padding-bottom: 10px

}

.pb20 {

	padding-bottom: 20px

}

.pb30 {

	padding-bottom: 30px

}

.pb40 {

	padding-bottom: 40px

}

.pl5 {

	padding-left: 5px

}

.pl10 {

	padding-left: 10px

}

.pl20 {

	padding-left: 20px

}

.pl30 {

	padding-left: 30px

}

.pl40 {

	padding-left: 40px

}

.pr5 {

	padding-right: 5px

}

.pr10 {

	padding-right: 10px

}

.pr20 {

	padding-right: 20px

}

.pr30 {

	padding-right: 30px

}

.pr40 {

	padding-right: 40px

}



.mobile {display:none;}





/* Header ========================================================== */







#header {

	height: 100px;

}

#phone {

	font-family: 'Roboto', sans-serif;

	font-size: 32px;

	color: #4c5c52;

	padding-top: 25px;

	text-align: right;

	font-weight: bold;

}

#phone img {

	margin-top: -7px;

}

/* Navigation Menu ========================================================== */







.navbar {

	background: url(img/menu-bg-right.jpg) right no-repeat #ee4035;

	position: relative;

	min-height: 64px;

	margin-bottom: 0;

	border: 0;

	border-radius: 0;

	box-shadow: 0px 7px 12px #383838;

	z-index: 100;

}

.nav-bg-left {

	background: url(img/menu-bg-left.jpg) left no-repeat #ee4035;

	height: 64px;

	width: 500px;

	position: absolute;

	left: 0;

}

.navbar-default .navbar-nav > li > a {

	font-family: 'Roboto', sans-serif;

	color: #fff;

	font-size: 16px;

	font-weight: 500;

	text-transform: lowercase;

	line-height: 34px;
	

}
.navbar-default .navbar-nav > li > a:active {
	background:#383838;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

	color: #fff;

	background-color: #383838;

	border: 0;

}

.nav > li > a {

	padding: 15px 25px;

}

.navdiv {

	width: 1px;

	height: 64px;

	background: url(img/menu-div.jpg) no-repeat;

}

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

    .navbar-default .navbar-nav > li > a:hover {

		color: #fff;

		background-color: #d03228;/*

	

		-webkit-box-shadow: inset 3px 3px 7px 0px rgba(0,0,0,0.42);

	

		-moz-box-shadow: inset 3px 3px 7px 0px rgba(0,0,0,0.42);

	

		box-shadow: inset 3px 3px 7px 0px rgba(0,0,0,0.42);

	

		*/

	

	}	

}

.navbar-default .navbar-nav > li > a:focus {

	color: #fff;

}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover {

	color: #fff;

	background-color: #d03228;/*



	-webkit-box-shadow: inset 3px 3px 7px 0px rgba(0,0,0,0.42);



	-moz-box-shadow: inset 3px 3px 7px 0px rgba(0,0,0,0.42);



	box-shadow: inset 3px 3px 7px 0px rgba(0,0,0,0.42);



	*/



}

.navbar-collapse {

	padding-left: 0px;

	padding-right: 0px;

}

#search-container {

	background-color: #383838;

	float: right;

	width: 74px;

	position: relative;

}

#search-field {

	display: none;

	width: 300px;

	position: absolute;

	right: -30px;

	top: 15px

}

#search-btn {

	cursor: pointer;

}

#search-field input[type=text] {

	width: 195px;

	float: left;

	margin-right: 10px;

}

li.dropdown {

	position: static;

}

.dropdown-menu {

	width: 100%;

	background-color: rgba(43, 43, 43, 0.63);

	border: 0px;

	height: 64px;

	padding: 0px;

	box-shadow: none;

	text-align: center;

}





.submenuitems {

	margin-left: auto; 

	margin-right: auto; 

	max-width: 1140px; 

	text-align: left;

	height: 64px;

	padding: 0px;

}



.submenuitems > li {

	display: inline-block;

	height: 100%;

}

.submenuitems > li > a {

	display: inline-block;

	height: 64px;

	font-family: 'Roboto', sans-serif;

	color: #fff;

	font-size: 16px;

	font-weight: 500;

	text-transform: lowercase;

	line-height: 34px;

	padding: 13px 0px;

    text-align: center;

    margin:0;

}



.submenuitems > li > a:hover {

	background-color: rgba(81, 81, 81, 0.63);

	text-decoration: none;

}



.submenuitems > li a.design {

	width: 91px;

  	margin-left: 1px;

}

.submenuitems > li a.exhibitions {

	width: 114px;

	margin-left:-4px;

}

.submenuitems > li a.events {

	width: 111px;

	margin-left:-4px;

}

.submenuitems > li a.graphics {

	width: 107px;

	margin-left:-4px;

}

.submenuitems > li a.d2p {

	width: 110px;

	margin-left:-4px;

}

.submenuitems > li a.retail {

	width: 115px;

	margin-left:-4px;

}

.submenuitems > li a.interiors {

	width: 107px;

	margin-left:-4px;

}

.submenuitems > li a.manufacture {

	width: 115px;

	margin-left:-4px;

}

.submenuitems > li a.build {

	width: 100px;

	margin-left:-4px;

}

.submenuitems > li a.video {

	width: 100px;

	margin-left:-4px;

}

.submenuitems > li a.copywriting {

	width: 100px;

	margin-left:-4px;

}







/* Carousel ========================================================== */







.carousel-control.left, .carousel-control.right {

	background-image: none;

}

.carousel-inner > .item {

	height: 571px;

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

}

.carousel-caption {

	top: 100px;

}

.carousel-indicators {

	top: 415px;

}

.carousel-footer {

	background: url(img/carousel-cut-footer.png) no-repeat center;

	height: 90px;

	width: 100%;

	background-size: 100% 100%;

	position: absolute;

	bottom: 0px;

}

/* Services ========================================================== */



#services {

	background-color: #474747;

	color: #fff;

}

#services-slider {

	height: 1%;

	overflow: hidden;

	padding: 0 0 10px;

}

#services-slider .viewport {

	float: left;

	width: 900px;

	height: 200px;

	overflow: hidden;

	position: relative;

}

#services-slider .buttons {

	display: block;

	float: left;

	width: 75px;

	height: 122px;

	position: relative;

}

#services-slider .prev {

	margin: 5px 50px 0 0;

	background: url(img/service-prev.png) no-repeat;

}

#services-slider .next {

	margin: 5px 0 0 40px;

	background: url(img/service-next.png) no-repeat;

}

#services-slider .buttons:hover {

	opacity: 0.5;

}

#services-slider .disable {

	visibility: hidden;

}



.img {

	width: 100%;

	height: auto;

}



#services-slider .overview {

	list-style: none;

	position: absolute;

	padding: 0;

	margin: 0;

	width: 210px;

	left: 0;

	top: 0;

}

#services-slider .overview li {

	float: left;

	margin: 0 20px 0 0;

	padding: 1px;

	height: 121px;

	width: 206px;

	text-align: center

}

#services-slider .overview li a.more {

	display: block;

	border: 1px solid #fff;

	width: 80px;

	margin-left: auto;

	margin-right: auto;

	color: #fff;

	padding: 10px;

	margin-top: 35px;

	font-weight: bold

}

#services-slider .overview li a.more:hover {

	text-decoration: none;

	background-color: #323232;

	border: 1px solid #323232

}

#services-slider .overview li a.srv-link {

	opacity: 1;

	color: #fff

}

#services-slider .overview li a.srv-link:hover {

	opacity: 0.7;

	color: #fff;

	text-decoration: none

}

/* Our Process ========================================================== */



#process {

	background: url(img/process-bg-1.gif) no-repeat center #231f20;

	color: #fff;

	position: relative;

}

#process .container {

	background: url(img/process-bg-2.gif) no-repeat center;

	height: 516px;

}

.process-bg-right {

	background: url(img/process-bg-right.jpg) no-repeat;

	width: 313px;

	height: 516px;

	position: absolute;

	right: 0px;

	top: 0px;

}

#process-1-text, #process-2-text, #process-3-text, #process-4-text, #process-5-text, #process-6-text, #process-7-text, #process-8-text, #process-9-text {

	display: none;

}

.process-heading {width:auto; height:auto; padding-bottom:30px; overflow: visible !important;}





/* Contact Us ========================================================== */



#contact {

	background-color: #363636;

	color: #fff;

}

#contact input {

	color: #4c5c52;

	width: 355px;

	height: 48px;

	margin-bottom: 20px;

	padding-left: 15px;

}

#contact textarea {

	color: #4c5c52;

	width: 355px;

	height: 113px;

	padding: 10px;

}

#contact input[type=submit] {

	padding: 5px 15px;

	background: #363636;

	border: 1px solid #fff;

	cursor: pointer;

	color: #fff;

	width: 90px;

	height: 50px;

	margin-top: 10px;

}

/* Map ========================================================== */



#map {

	background: url(img/map.jpg) no-repeat center;

	height: 228px;

	width: 100%;

	background-size: cover;

}







/* Inside Pages ================================================= */



#static-header {

	background-position: top center;

	background-size:100% 100% !important;

	height:570px;

}



#static-header h1 {

	font-size:56px;

	font-family: 'Roboto Condensed', sans-serif;

	color:#ffffff;

	font-weight:bold;

	padding:20px 0px;

	border:4px solid #ffffff;

	border-left:0;

	border-right:0;

	margin:50px 0px 50px 0px;

	text-transform:uppercase;

	display: inline-block;

}



.tel-icon {

	display:none;

}

#static-header .play:hover {

	opacity:0.7;

}





#intro h2 {

	font-size:26px;

}

#intro p {

	font-size:14px;

}



#diagonal {

	background-color:#d03228;

	height:516px;

}

#diagonal .redbg {

  background: url(img/process-bg-right.jpg) no-repeat;

  background-position:top right;

}



#diagonal .skew {

	color:#ffffff;

	height:516px;

	-webkit-transform: skew(21deg, 0);

	-moz-transform: skew(21deg, 0);

    -o-transform: skew(21deg, 0);

    -ms-transform: skew(21deg, 0);

    transform: skew(21deg, 0);

	overflow:hidden;

	position:relative;

	left:180px;

	width:70%;

}



#diagonal .skew h3 {

	font-size:30px;

	-webkit-transform: skew(-21deg, 0);

	-moz-transform: skew(-21deg, 0);

    -o-transform: skew(-21deg, 0);

    -ms-transform: skew(-21deg, 0);

    transform: skew(-21deg, 0);

	padding-bottom:10px;

}

#diagonal .skew p {

	line-height:26px;

	margin-bottom:30px;

	padding-left:2px;

	font-family: 'Roboto' sans-serif;

    font-weight: 100;

}



#diagonal .skew p span {

	display:inline-block;

	-webkit-transform: skew(-21deg, 0);

	-moz-transform: skew(-21deg, 0);

    -o-transform: skew(-21deg, 0);

    -ms-transform: skew(-21deg, 0);

    transform: skew(-21deg, 0);

}











#process .skew {

	color:#ffffff;

	-webkit-transform: skew(12deg, 0);

	-moz-transform: skew(12deg, 0);

    -o-transform: skew(12deg, 0);

    -ms-transform: skew(12deg, 0);

    transform: skew(12deg, 0);

	position:relative;

}



#process .skew h3 {

	-webkit-transform: skew(-12deg, 0);

	-moz-transform: skew(-12deg, 0);

    -o-transform: skew(-12deg, 0);

    -ms-transform: skew(-12deg, 0);

    transform: skew(-12deg, 0);

	padding-bottom:30px;

}

#process .skew p {

	line-height:26px;

	margin-bottom:30px;

	padding-left:2px;

	font-family: 'Roboto' sans-serif;

    font-weight: 100;

}



#process .skew p span,  #process .skew img {

	display:inline-block;

	-webkit-transform: skew(-12deg, 0);

	-moz-transform: skew(-12deg, 0);

    -o-transform: skew(-12deg, 0);

    -ms-transform: skew(-12deg, 0);

    transform: skew(-12deg, 0);

}



#process area:hover, #process area:active, #process area:focus {

    border: none;

  outline-style: none; 

  -moz-outline-style:none; 

}











.ghost-button {

	border:1px solid #ffffff;

	padding:18px 30px;

	text-transform:uppercase;

	font-size:16px;

	font-weight:100;

	color:#ffffff;

}



.ghost-button:hover {

	text-decoration:none;

	color:#ffffff;

	opacity:0.7;

}



.page-template-about #contact {

	border-top:12px solid #ffffff;

	border-bottom:12px solid #ffffff;

}



#clients {

	background: #333333 url(https://citygfvjws.nimpr.uk/images/grey-bg-left.png) no-repeat;

	min-height:431px;

	border-bottom:12px solid #ffffff;

}



#clients img {

	padding:10px 30px 50px 0;

}



#clients .testimonial {

	position:absolute;

	right:150px;

	top:100px;

	background:#ffffff;

	padding:15px 25px;

	width:460px;

	min-height:124px;

}



#clients .testimonial .text {

	overflow: hidden;

}



#clients .testimonial .arrow {

	position:relative;

}



#clients .testimonial .arrow:after {

	content: ' ';

	position: absolute;

	width: 0;

	height: 0;

	left: 15px;

	bottom: -40px;

	border: 15px solid;

	border-color: #fff transparent transparent #fff;

}



#clients .testimonial p {

	line-height:22px;

}





#clients .testimonial p:before {

	content: ' ';

	line-height:18px;

	font-size:30px;

	font-weight:bold;

	font-family:"Arial Black" sans-serif;

	background: url(https://citygfvjws.nimpr.uk/images/open-q.jpg) no-repeat;

	width:13px;

	height:9px;

	display: inline-block;

	margin-right:5px;

}

#clients .testimonial p:after {

	content: ' ';

	line-height:18px;

	font-size:30px;

	font-weight:bold;

	font-family:"Arial Black" sans-serif;

	background: url(https://citygfvjws.nimpr.uk/images/close-q.jpg) no-repeat;

	width:13px;

	height:9px;

	display: inline-block;

	margin-left:5px;

}













#contact-address {

	background: #404040 url(https://citygfvjws.nimpr.uk/images/light-grey-bg-left.png) no-repeat;

	min-height:380px;

	border-bottom:12px solid #ffffff;

	font-size:16px;

	position:relative;

}



#contact-address .innerbg {

	background: #575756 url(https://citygfvjws.nimpr.uk/images/grey-process-bg-right.jpg) no-repeat;

	width: 313px;

	height: 368px;

	position: absolute;

	right: 0px;

	top: 0px;

}

.innerbgleft {

	background: #575756 url(https://citygfvjws.nimpr.uk/images/grey-process-bg-left.jpg) no-repeat;

	width: 313px;

	height: 368px;

	position: absolute;

	left: 0px;

	top: 0px;

}

.clientsinnerbgleft {

	background: url(https://citygfvjws.nimpr.uk/images/clients-grey-process-bg-left.jpg) no-repeat;

	width: 313px;

	height: 419px;

	position: absolute;

	left: 0px;

	top: 0px;

	opacity:0.8;

}

.darkinnerbgleft {

	background: url(https://citygfvjws.nimpr.uk/images/dark-grey-process-bg-left.jpg) no-repeat;

	width: 313px;

	height: 250px;

	position: absolute;

	left: 0px;

	top: 0px;

	opacity:0.7;

}

.bigdarkinnerbgleft {

	background: url(https://citygfvjws.nimpr.uk/images/big-dark-grey-process-bg-left.jpg) no-repeat;

	width: 313px;

	height: 488px;

	position: absolute;

	left: 0px;

	top: 0px;

	opacity:0.7;

}

#contact-address img {

	padding:10px 30px 50px 0;

}



#contact-address .message {

	position:absolute;

	right:150px;

	top:68px;

	background:#ffffff;

	padding:15px 20px;

	width:460px;

}



#contact-address .message p {

	font-size:18px;

	line-height:24px;

}



#contact-address .message:after {

	content: ' ';

	position: absolute;

	width: 0;

	height: 0;

	left: 38px;

	top: 105px;

	border: 15px solid;

	border-color: #fff transparent transparent #fff;

}





















#clients h4 {

	color:#ffffff;

	font-size:28px;

	position:absolute;

	bottom:0px;

	right:0px;

}



#clients .customer {

	min-height:320px;

}



#clients .testimonial .name {

	float: right;

	font-weight:bold;

}



/* Service */



.page-template-service .service {margin-top:60px;}



.case-box {

	width:33.33%;

	float:left;

	background:#EBEBEB;

	height:285px;

	border-right:1px solid #DFDFDF;

}

.case-box:nth-child(3n+3) {

	border:0;

}



#case-studies img {

	width:100%;

	height:auto;

	padding-bottom:20px;

}



#case-studies h2 {

	font-size:36px;

	font-family: 'Roboto Condensed', sans-serif;

	font-weight:100;

}



#case-studies h4 {

	color:#333333;

	font-size:15px;

	padding:0px 0px 0px 20px;

	margin:0;

	font-weight:200;

	font-family: 'Roboto', sans-serif;

}



#case-studies .light-grey {

	color:#666666;

}

#case-studies h4:after {

	content: '>';

	font-family:monospace;

	font-size:20px;

	font-weight:bold;

	padding-left:6px;

	opacity:0.5;

}



#case-studies a:hover {

	text-decoration:none;

}



.case-box {

	-o-transition:.5s;

 	-ms-transition:.5s;

    -moz-transition:.5s;

    -webkit-transition:.5s;

    transition:.5s;

}



.case-box:hover {

	background:#898989;

	color:#ffffff;

}







#case-studies .row:hover .case-box {

	opacity: 0.2;

	-o-transition:.5s;

 	-ms-transition:.5s;

    -moz-transition:.5s;

    -webkit-transition:.5s;

    transition:.5s;

}

.case-box:hover {

	opacity: 1 !important; 

	-o-transition:.5s;

 	-ms-transition:.5s;

    -moz-transition:.5s;

    -webkit-transition:.5s;

    transition:.5s;

}



.case-box:hover h4 {

	color:#ffffff !important;

}



.case-box:hover img {

	opacity:0.8;

}





/* Case Studies */



.grey-bg {

	background-color:#6B6B6B !important;

	border-bottom:12px solid #ffffff;

	color:#ffffff;

	background-position: 50% 50%;

	font-family: 'Roboto', sans-serif;

}



.page-template-case-study #diagonal {

	background-color:#6B6B6B;

}

.page-template-case-study .grey-bg, .page-template-case-study .grey-box {

	height:500px !important;

}



.grey-box {

	position:absolute;

	top:0;

	width:100%;

}



.grey-bg h1 {

	border-bottom: 2px solid #ffffff;

	display: inline-block;

	padding-bottom:10px;

	margin:0;

	text-transform:uppercase;

}



.grey-bg h2 {

	font-size:22px;

	margin-bottom:10px;

}



.grey-bg h3 {

	font-size:22px;

	margin-bottom:20px;

}



.grey-bg p {

	font-size:13px;

    line-height:24px;

	padding-right:20px;

}







/* Blog */









article h1 {

	margin:0;

}

article p {

	font-size:14px;



}



article h1 a {

	font-size:36px;

	color:#333333;

}



article .entry-meta {

	padding:20px 0px;

}

.more-link, .entry-footer, .updated, .post-navigation {

	display:none;

}

article .entry-content img {

	margin:30px 0px;

}

article .entry-meta a {

	color:#666666;

}

article .entry-meta a:hover {

	text-decoration:none;

}

.widget li.cat-item {

	background: #E7E7E7;

	padding:20px 10px;

	list-style:none;

	margin-bottom:1px;

}

.widget li.cat-item:hover {

	background:#DBDBDB;

}

.widget li.cat-item a {

	font-size:18px;

	color:#666666;

}

.widget li.cat-item a:hover {

	text-decoration:none;

}

.widget .widget-title {

	padding-bottom:30px;

}

.widget {

	margin-bottom:40px;

}



.error404 .widget_recent_entries li {

	list-style:none;

	font-size:16px;

	padding:6px;

}



.error404 .widget_recent_entries {

	padding-top:60px;

}



.page-template-default p {

	font-size:14px;

}

.page-template-default h1 {

	font-size:28px;

	text-transform:uppercase;

	font-weight:bold;

	font-family: 'Roboto Condensed', sans-serif;

	padding:20px 0px;

}



.more-image {

	height:500px;

	background-size: 100% auto; 

}





.page-template-service .intro-image {

	position:absolute;

	right:20px;

	top:160px;

	width:500px;

	overflow:hidden;

}

.white-line {

	border-top:12px solid #ffffff;

	border-bottom:12px solid #ffffff;

}



.page-template-service #static-header h1 {

	font-size:80px;

}



#secondary h1.widget-title {

	padding-bottom:10px;

}

h1.entry-title a:hover {

	color:#666666;

}



#contact input {

	width:100%;

}



#contact p.sub {font-size:16px;}





.page-template-about #intro h2 {font-size: 35px;}




/* Footer ========================================================== */







#footer {

	background-color: #2b2b2b;

	color: #fff;

	text-transform: uppercase;

	font-size: 11px;

	padding-bottom: 20px;

}



#footer p {font-size:12px;}

#footer a {

	color: #fff;

	text-decoration: none;

	margin-right: 25px;

}

#footer a:hover {

	color: #fff;

}

#diagonal .grey-bg p {
	padding-right:30px;
}

#diagonal .container .col-md-5 {
		padding-right:30px;
	}


/* Media Queries ========================================================== */


@media (max-width: 1600px) and (min-width: 1177px) {

#diagonal .redbg {
	background: none !important;
}
.bigdarkinnerbgleft {
	background: none !important;
}


}


@media (max-width: 1450px) {
	

	

#contact-address .innerbg {

	background: none;

}



#clients .testimonial {

	right:20px;

}

	

}







@media (max-width: 1250px) {

.process-bg-right {

	display: none;

}



#clients .testimonial {

	right:20px;

}



#contact-address .innerbg {

	background: none;

}





}



@media (min-width: 670px) and (max-width: 1230px) {
	.bigdarkinnerbgleft {
		    background: rgb(107, 107, 107);
		    border-right: 10px solid #fff;
		    opacity: 1;
		    width:450px;
		    
	}
	#diagonal .container {
		width:100%;
	}
	#diagonal .container .col-md-5 {
		width:40%;
	}
}







@media (max-width: 1180px) {

	#diagonal {height:430px;}

	.page-template-about #diagonal, .page-template-service #diagonal {background:#D03228 !important}

	#diagonal .red-bg {background:none !important;}

	#diagonal .skew {-webkit-transform: skew(0, 0); height:400px;}

	#diagonal .skew h3, #diagonal .skew p span {-webkit-transform: skew(0, 0);}

	#diagonal .col-md-7 {width:90%;}

	#clients {background:#979797 !important;}

	.grey-box {background:none !important;}

	#clients .testimonial {right:0px;}

	

	.case-box {height:260px;}

	.more-image {height:380px;}

}



@media (max-width: 1200px) {

#services-slider .viewport {

	width: 700px;

}

.process-text {text-align:center;}

.process-text .process {display:block !important; position:relative;}

#process, #process .container {height: auto !important;}

#process .skew {transform: skew(0deg, 0);}

#process .skew p span, #process .skew img {transform: skew(0deg, 0);}
#process .skew, #process .skew img, #process .skew p span {transform:none; -webkit-transform:none; -o-transform:none; -ms-transform:none;}
#process .container .col-md-9 {
	display:none;
}

#process .container .col-md-3 {
	width:100%;
}

}



@media (max-width: 1120px) {

.img {

	width: 100%;

	height: auto;

}

#contact input, #contact textarea {

	width: 100%;

	margin-left: 0px;

	margin-right: 0px;

}

.pt93 {

	padding-top: 10px;

}

}



@media (max-width: 1000px) {

#services-slider .viewport {

	width: 400px;

}



#contact-address .message {

	right:30px;

}

#clients .testimonial {

	display: none;

}



}



@media (max-width: 970px) {

#process {

	background-image: none;

	background-color: #231f20;

}

#process .container {

	background-image: none;

	background-color: #231f20;

}

#process-0-text {

	display: none;

}

}



@media (max-width: 910px) {

.nav-bg-left {

	display: none;

}

#search-container {

	display: none

}

}



@media (max-width: 750px) {

.img {

	width: 100%;

	height: auto;

}

footer {

	text-align: center !important;

}

#footer-links {

	margin-top: 20px;

	text-align: center !important;

}

.navbar-nav {

	background-color: #ee4035;

	margin: 0px;

	position: relative;

}

.navdiv {

	display: none;

	height: 0px

}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {

	border: none;

}

.widget ul {

	list-style: none !important;

}

li.dropdown {

	position: static;

}

.dropdown-menu {

	text-align: left;

	height: 100%

}

.dropdown-menu > li {

	display: block;

	height: 100%;

}

.dropdown-menu > li > a {

	color: #fff;

	font-weight: bold

}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {

	color: #fff

}



#contact-address .message {

	display: none;

}

}



@media (max-width: 768px) {

.mobile {display:block;}



#diagonal .col-md-7 {width:100%;}

#diagonal .skew {width:100%; left:0;}

#clients .testimonial {display:none;}

#clients {max-height:550px;}

.case-box {height:230px;}

.page-template-service .intro-image {width:300px; height:auto;}

.page-template-service .intro-image img {width:100%; height:auto;}

#static-header h1 {font-size: 50px !important; margin-left: 100px !important;}

.page-template-service .service {margin-top:40px;}

.more-image {height:250px;}

#diagonal { width:100%; height:auto; padding-bottom:30px; background-size: 100%;}

.project-text {color:#fff;}

#phone {display: none}





}



@media (max-width: 675px) {

.desktop {display:none;}

#services-slider .viewport {

	width: 175px;

}

#services-slider .buttons {

	width: 35px;

	height: 122px;

}

#services-slider .prev {

	margin: 30px 0 0 0;

	background: url(img/service-prev-small.png) no-repeat !important;

}

#services-slider .next {

	margin: 30px 0 0 0;

	background: url(img/service-next-small.png) no-repeat;

}

#services-slider .overview li {

	width: 175px;

}





#clients .logos {

	padding-top:0;

}

#clients .row.relative.pt40 {

	padding-top:0;

	text-align:center;

}

#clients .row.relative.pt40 img {

	width:43%;

	float:left;

	padding:15px 20px;

}

.tp-caption {

	text-align:center;

}



.tp-caption img {

	margin-top:50px;

	width:60% !important;

	height:auto !important;

}

.home .intro h2 {font-size:26px;}

#services-slider {text-align:center !important;}

#services-slider .prev {width:20%;}

#services-slider .next {width:20%; background-position:top right;}

#services-slider .viewport {width:60%; text-align:center;}

#services-slider .overview li {margin-right:0;}

.process-text {text-align:center;}

.process-text .process {display:block !important; position:relative;}

#process, #process .container {height: auto !important;}

#process .skew {transform: skew(0deg, 0);}

#process .skew p span, #process .skew img {transform: skew(0deg, 0);}

.heading-img {width:70% !important; height:auto !important;}

.page-template-service .intro-image .img {display:none;}

#static-header {height:400px;}

#diagonal .skew {height:auto;}

.bigdarkinnerbgleft {background:none;}

.page-template-about #intro h2 {font-size: 26px;}











/* Home */

#header {text-align:center; height:80px;}

#header #logo {width:80%; height:auto; margin:0 auto; }

.navbar {min-height: 50px;}

.submenuitems {background:#383838; height:auto;}

.submenuitems li {display:block; height:64px;}

.submenuitems li a {width:100%;}

.page-template-homepage .tp-caption img {margin-top:30px; width:50%;}

.page-template-homepage .tp-caption .vimeo {position: relative; width:100%;}





.heading-img {margin-top:0px !important; width:60% !important; margin-bottom:20px; }

#static-header { background-size: 100% 100% !important; height:auto; overflow:hidden; padding-bottom:30px;}

#static-header .video {margin-top:0; padding-top:20px; padding-bottom:40px;}

#static-header .video img {width:50px; height:auto;}

#process .skew, #process .skew img, #process .skew p span {transform:none; -webkit-transform:none; -o-transform:none; -ms-transform:none;}

#services-slider {height: auto;}

.navbar-nav {overflow: hidden;}

.submenuitems > li a {width:100% !important; text-align:left; padding-left:40px;}

.page-template-case-study .project-text h2 {font-size: 16px;}







#phone {

	display: none

}

.tel-icon {

	float:right;

	margin: 7px 5px 0 0;

	display:inline-block !important;

}



.page-template-about #clients .customer {

	display:none;

}

#services-slider .overview li {

	text-align: left;

	width:140px;

}



#services-slider .overview li h3 {

	text-align:center;

}



.heading-img {

	height:100px;

	width:auto;

}





}



/* Larger than mobile */







@media (max-width: 400px) {

.img {

	width: 100%;

	height: auto;

}

.desktop {

	display: none;

}

.body {

	overflow: hidden

}

#process, #process .container {

	height: 370px;

}

#logo {

	width: 100%;

}

#phone {

	display: none

}



#static-header h1 {font-size:26px !important; margin-left: 0px !important;}

#clients {min-height: 300px; overflow: hidden;}

#clients img {padding-left:80px}

#clients h4 {display: none;}

#diagonal .skew h3 {padding:0px;}

#diagonal {height:auto; }

#diagonal .col-md-7 {padding-top:0; padding-bottom:30px;}

.page-template-service .intro-image {top:200px; left:20px;}

.page-template-service #static-header h1 {font-size:40px !important; margin-left: 60px !important;}

.case-box {width:100%; height:250px;}

.more-image {height:120px;}

#case-studies h2 {font-size:28px;}

#case-studies h4 {font-size:16px;}

.heading-img {width:auto !important; height:70px !important;}



.tel-icon {

	margin: 0;

}

#services-slider .overview li {

	text-align: center;

	width:175px;

}







}









@media (max-width: 320px) {

.img {

	width: 100%;

	height: auto;

}



}

/* Contact Form 7 */



div.wpcf7 {

	margin: 0;

	padding: 0;

}

div.wpcf7-response-output {

	position: absolute;

	bottom: 20px;

	margin-left: auto;

	margin-right: auto;

	left: 0;

	right: 0;

}

div.wpcf7 .screen-reader-response {

	position: absolute;

	overflow: hidden;

	clip: rect(1px, 1px, 1px, 1px);

	height: 1px;

	width: 1px;

	margin: 0;

	padding: 0;

	border: 0;

}

div.wpcf7-mail-sent-ok {

	text-align: center;

	padding-bottom: 20px;

}

div.wpcf7-mail-sent-ng {

	text-align: center;

	padding-bottom: 20px;

}

div.wpcf7-spam-blocked {

	text-align: center;

	padding-bottom: 20px;

}

div.wpcf7-validation-errors {

	text-align: center;

	padding-bottom: 20px;

}

span.wpcf7-form-control-wrap {

	position: relative;

}

span.wpcf7-not-valid-tip {

	color: #f00;

	font-size: 1em;

	display: block;

}

.use-floating-validation-tip span.wpcf7-not-valid-tip {

	position: absolute;

	top: 20%;

	left: 20%;

	z-index: 100;

	border: 1px solid #ff0000;

	background: #fff;

	padding: .2em .8em;

}

span.wpcf7-list-item {

	margin-left: 0.5em;

}

.wpcf7-display-none {

	display: none;

}

div.wpcf7 img.ajax-loader {

	border: none;

	position: absolute;

	bottom: 40px;

	left: 50%;

}

div.wpcf7 div.ajax-error {

	display: none;

}

div.wpcf7 .placeheld {

	color: #888;

}





body.home .navbar-nav > li.home {color: #fff; background-color: #383838; border: 0;}

body.page-template-about .navbar-nav > li.about {color: #fff; background-color: #383838; border: 0;}

body.page-template-service .navbar-nav > li.services {color: #fff; background-color: #383838; border: 0;}

body.page-template-service .navbar-default .navbar-nav > li.services a {background-color: #383838;}

body.page-template-contact .navbar-nav > li.contact {color: #fff; background-color: #383838; border: 0;}

body.blog .navbar-nav > li.blog {color: #fff; background-color: #383838; border: 0;}

body.single .navbar-nav > li.blog {color: #fff; background-color: #383838; border: 0;}

body.archive .navbar-nav > li.blog {color: #fff; background-color: #383838; border: 0;}



.widget_categories ul {padding-left:0;}

.heading-img {width:auto; height:auto; margin-top:55px;}

.single h1.entry-title {font-size:40px;}



.rslides {

  position: absolute;

  list-style: none;

  overflow: hidden;

  width: 100%;

  padding: 0;

  margin: 0;

  height:488px;

}

.rslides .slide {

    padding: 350px 0px 140px 0px; 

    float: none;

    position:relarive;

 }



.transparent-btns_tabs {

    display:none;}

.zindex10 {z-index: 10}

.zindex11 {z-index: 11}

.zindex12 {z-index: 12}



#clients .logos img:hover {

	cursor: pointer;

}



.case-box.greyed {opacity: 0.4;}

.greyed.case-box:hover {opacity: 0.6; !important;}