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

	STYLESHEET

	FF. Font Faces
	Gen. General 
	Full. Full Width Case (1080p desktop monitors)
		Full-h. Home 
		Full-m. Misc 
	1200. Responsive Cases - Scale Down to 1200 (Breakpoint 1550) (small monitors)
		1200-h. Home
		1200-m. Misc 
	960. Responsive Cases - Scale Down to 960 (Breakpoint 1285) (small monitors and tablet landscape)
		960-h. Home
		960-m. Misc 
	728. Responsive Cases - Scale Down to 728 (Breakpoint 1023) (tablet portrait)
		728-h. Home
		728-m. Misc 
	M. Responsive Cases - Scale Down Below 728 (Breakpoint 760) (mobile)
		M-h. Home
		M-m. Misc 
 
------------------------------*/


/*------------------------------
    FF. FONT FACES 
------------------------------*/

	@font-face {
        font-family: 'Knul-Light';
        src: url('../fonts/Knul-Light.eot');
        src: url('../fonts/Knul-Light.woff') format('woff'),
             url('../fonts/Knul-Light.eot'),
             url('../fonts/Knul-Light.ttf ') format('truetype');
        font-weight: normal;
        font-style: normal;
        }
	@font-face {
        font-family: 'Knul-Regular';
        src: url('../fonts/Knul-Regular.eot');
        src: url('../fonts/Knul-Regular.woff') format('woff'),
             url('../fonts/Knul-Regular.eot'),
             url('../fonts/Knul-Regular.ttf ') format('truetype');
        font-weight: normal;
        font-style: normal;
        }
	@font-face {
        font-family: 'Knul-Medium';
        src: url('../fonts/Knul-Medium.eot');
        src: url('../fonts/Knul-Medium.woff') format('woff'),
             url('../fonts/Knul-Medium.eot'),
             url('../fonts/Knul-Medium.ttf ') format('truetype');
        font-weight: normal;
        font-style: normal;
        }
	@font-face {
        font-family: 'Knul-Bold';
        src: url('../fonts/Knul-Bold.eot');
        src: url('../fonts/Knul-Bold.woff') format('woff'),
             url('../fonts/Knul-Bold.eot'),
             url('../fonts/Knul-Bold.ttf ') format('truetype');
        font-weight: normal;
        font-style: normal;
        }
	@font-face {
        font-family: 'Knul-ExtraBold';
        src: url('../fonts/Knul-ExtraBold.eot');
        src: url('../fonts/Knul-ExtraBold.woff') format('woff'),
             url('../fonts/Knul-ExtraBold.eot'),
             url('../fonts/Knul-ExtraBold.ttf ') format('truetype');
        font-weight: normal;
        font-style: normal;
        }	
	@font-face {
		font-family: 'Gotham-Bold';
		src: url('../fonts/gothambold.eot');
		src: url('../fonts/Gotham-Bold.woff') format('woff'),
			 url('../fonts/gothambold.eot'),
			 url('../fonts/gothambold.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		}
		
/*------------------------------
    Gen. GENERAL 
------------------------------*/
	
	* {				
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-text-size-adjust: none;
		}
		
	body {
		margin: 0;
		padding: 0;	
		font-family: 'Knul-Regular', arial, sans-serif;
		font-size: 18px;
		line-height: 29px;
		color: #282828;
		background: #fff url('../images/bg-top.jpg') no-repeat top center;	
		background-attachment: fixed;
		}
	
	h1,
	h2,
	h3,
	h4 {
		margin: 0;
		padding: 0;
		font-weight: normal;
		}
	
	p {		
		margin: 0 0 35px 0;
		padding: 0;
		}
	
	strong {
		font-weight: normal;
		font-family: 'Knul-Bold', arial, sans-serif;
		}
	
	hr {
		height: 2px;
		border: none;
		background: #e9e6e4;
		margin: 50px 0;
		clear: both;
		}
	
	img {
		border: 0;
		vertical-align: top;
		}

	a:hover, a:active, a:focus, object { 
		outline: none; 
		}			
	a {
		text-decoration: none;
		color: #ca1008;	
		webkit-transition: .15s ease-out;
		-moz-transition: .15s ease-out;
		-o-transition: .15s ease-out;
		-ms-transition: .15s ease-out;
		transition: .15s ease-out;
		}
	a:hover {
		text-decoration: none;
		color: #282828;
		}
		
/*------------------------------
    Full. LAYOUTS
------------------------------*/
		
	/*------------------------------
		Full-h. HOME
	------------------------------*/
	
	.paw {
		position: fixed;
		z-index: 13;
		top: 60px;
		left: 60px;
		width: auto;
		height: 87px;
		}
	.mediadog {
		position: fixed;
		z-index: 11;
		top: 100px;
		left: 160px;
		width: 139px;
		height: auto;
		}
	.logoBG {
		position: fixed;
		z-index: 11;
		top: 35px;
		left: -160px;
		width: 160px;
		height: 146px;
		background: #ca1008;
		}
	
	
	
	.nav {
		position: fixed;
		z-index: 12;
		top: 50px;
		right: 20px;
		padding: 25px 40px;
		}
		.nav .navCircle {
			position: relative;
			width: 60px;
			height: 60px;
			border: 3px solid #fff;
			border-radius: 50%;
			cursor: pointer;
			}
			.nav .navHamburger {
				position: absolute;
				left: 0;
				right: 0;
				width: 26px;
				height: 3px;
				margin: auto;
				background: #fff;
				webkit-transition: all .15s ease-out;
				-moz-transition: all .15s ease-out;
				-o-transition: all .15s ease-out;
				-ms-transition: all .15s ease-out;
				transition: all .15s ease-out;
				}
			.nav .navHamburger.bar1 {
				top: 18px;
				}
			.nav .navHamburger.bar2 {
				top: 26px;
				width: 32px;
				}
			.nav .navHamburger.bar3 {
				top: 34px;
				}
				
			/* HOVER STATE */		
		
			.nav a:hover .navHamburger.bar1 {
				width: 20px;
				transform: rotate(-45deg) translateX(-7px) translateY(-4px);
				-webkit-transform: rotate(-45deg) translateX(-7px) translateY(-4px);
				}
			.nav a:hover .navHamburger.bar2 {
				width: 24px;
				}
			.nav a:hover .navHamburger.bar3 {
				width: 20px;
				transform: rotate(45deg) translateX(-7px) translateY(4px);
				-webkit-transform: rotate(45deg) translateX(-7px) translateY(4px);
				}  
				
			/* ACTIVE STATE */			
		
			.nav a.open .navHamburger.bar1 {
				width: 32px;
				transform: rotate(45deg) translateX(6px) translateY(5px);
				-webkit-transform: rotate(45deg) translateX(6px) translateY(5px);
				}
			.nav a.open .navHamburger.bar2 {
				width: 0;
				}
			.nav a.open .navHamburger.bar3 {
				width: 32px;
				transform: rotate(-45deg) translateX(6px) translateY(-6px);
				-webkit-transform: rotate(-45deg) translateX(6px) translateY(-6px);
				}
		
	.navBG {
		position: fixed;
		z-index: 11;
		top: 35px;
		right: -160px;
		width: 160px;
		height: 146px;
		background: #ca1008;
		}	
		
	.navFlyout {
		position: fixed;
		z-index: 11;
		top: 35px;
		right: -75%;
		width: 55%;
		height: 146px;
		background: #ca1008;
		}
		.navFlyout ul {
			margin: 0;
			padding: 0 0 0 30px;
			}
		.navFlyout ul li {
			position: relative;
			float: left;
			height: 146px;
			line-height: 146px;
			padding: 0;
			margin: 0 25px;
			list-style: none;
			background: none;
			border-bottom: 5px solid #ca1008;
			overflow: hidden;
			webkit-transition: all .35s ease-out;
			-moz-transition: all .35s ease-out;
			-o-transition: all .35s ease-out;
			-ms-transition: all .35s ease-out;
			transition: all .35s ease-out;
			}															
			.navFlyout ul li:after {
				display: inline-block;
				position: absolute;
				top: -10px;
				left: 0;
				right: 0;
				width: 18px;
				height: 10px;
				margin: auto;
				content: "";
				background: url('../images/icon-arrow-down.png') no-repeat top right;				
				background-size: 18px auto;
				webkit-transition: all .35s ease-out;
				-moz-transition: all .35s ease-out;
				-o-transition: all .35s ease-out;
				-ms-transition: all .35s ease-out;
				transition: all .35s ease-out;
				}
			.navFlyout ul li:hover {
				color: #fff;
				border-bottom: 5px solid #fff;
				}															
			.navFlyout ul li:hover:after {
				top: 23px;
				}
				.navFlyout ul li a {
					display: inline-block;
					position: relative;
					vertical-align: middle;				
					color: #fff;
					font-family: 'Knul-Light', arial, sans-serif;
					font-size: 2.2vw;
					line-height: 2.2vw;
					text-transform: uppercase;
					color: #fff;
					}
	
	.title-container {
		height: 864px;
		}
		.title {
			width: 460px;
			margin: 0 auto 0 auto;
			padding: 135px 0 0 0;
			text-align: center;
			}
		.errorPage404 .title {
			padding: 125px 0 0 0;
			}
			.title-top {
				margin: 0 0 25px 0;
				font-family: 'Knul-Regular', arial, sans-serif;
				font-size: 53px;
				line-height: 53px;
				text-transform: uppercase;
				color: #fff;
				}
			.title-box {
				padding: 25px 37px 40px 37px;
				font-family: 'Gotham-Bold', arial, sans-serif;
				font-size: 110px;
				line-height: 80px;
				text-transform: uppercase;
				color: #fff;
				border: 15px solid #fff;
				}
			.errorPage404 .title-box {
				padding: 20px 25px 25px 25px;
				font-size: 90px;
				line-height: 80px;
				}
				.title-box span {
					display: block;
					font-family: 'Gotham-Bold', arial, sans-serif;
					font-size: 117px;
					line-height: 117px;
					text-transform: uppercase;
					color: #fff;
					}
			.errorPage404 .title-bottom {
				margin: 25px 0 0 0;
				font-family: 'Knul-Regular', arial, sans-serif;
				font-size: 23px;
				line-height: 30px;
				text-transform: uppercase;
				color: #fff;
				}
				.errorPage404 .title-bottom a {
					margin: 0 0 30px 0;
				    padding: 15px 25px;
				    font-family: 'Knul-Regular', arial, sans-serif;
				    font-size: 23px;
				    line-height: 23px;
				    font-style: italic;
				    text-align: center;
				    color: #fff;
				    background: #ca1008;
					}
	
	.v {
		width: 100%;
		height: 57px;
		margin-top: -57px;
		background: url('../images/v.png') no-repeat top center;
		background-size: 1920px auto;
		}
	
	.experience {
		padding: 0 0 80px 0;
		background: #fff;
		}
		.experience-left {
			float: left;
			width: 50%;
			padding: 45px 50px 0 225px;
			text-align: center;
			}
			.experience-left h1 {
				font-family: 'Knul-Light', arial, sans-serif;
				font-size: 75px;
				line-height: 90px;
				color: #282828;
				}
				.experience-left h1 span {
					color: #ca1008;
					}
		.experience-right {
			float: left;
			width: 50%;	
			padding: 75px 225px 0 100px;		
			}
			.experience-right h2 {
				margin: 0 0 30px 0;
				padding: 20px 30px;
				font-family: 'Knul-Light', arial, sans-serif;
				font-size: 24px;
				line-height: 24px;
				font-style: italic;
				text-align: center;	
				color: #fff;	
				background: #ca1008;		
				}
			.experience-right-bottom {
				padding: 0 20px 0 20px;
				text-align: center;	
				}
				.experience-right-bottom p {
					margin: 0;
					font-family: 'Knul-Regular', arial, sans-serif;
					font-size: 20px;
					line-height: 24px;
					color: rgba(0,0,0,0.7);
					}
				.experience-right-bottom p:first-child {
					margin-bottom: 20px;
					}
	
	.logos {
		padding: 50px 25px;
		background: #282828;
		}
		.logos-item {
			float: left;
			width: 10%;
			text-align: center;
			}
			.logos-item img {
				width: 100%;
				height: auto;
				}
	
	.do {
		padding: 0 0 300px 0;
		background: #f5f5f5 url('../images/bg-do.jpg') no-repeat top center;
		}
		.do-top {
			position: relative;
			padding: 65px 0 55px 0;
			}		
			.do-top h2 {
				font-family: 'Knul-Light', arial, sans-serif;
				font-size: 75px;
				line-height: 90px;
				color: #282828;
				text-align: center;
				}
				.do-top h2 span { 
					color: #ca1008;
					}
		.do-items {
			padding: 0 160px;
			}
			.do-items-table.grid-2-across {
				display: none;
				}
			.do-items-table {
				display: table;
				border-spacing: 35px;
   				border-collapse: separate;
				}
				.do-items-row {
					display: table-row;
					}
					.do-items-cell {
						display: table-cell;
						width: 25%;
						padding: 45px 30px;
						text-align: center;
						background: #fff;
						}
						.do-items-cell .circle {
							width: 11vw;
							height: 11vw;
							margin: 0 auto 40px auto;
							padding: 22% 10% 10% 10%;
							}
						.do-items-cell.item-1 .circle {
							background: url('../images/bg-circle-1.jpg') no-repeat top left;
							background-size: 100% auto;
							padding-top: 25%;
							}
						.do-items-cell.item-2 .circle {
							background: url('../images/bg-circle-2.jpg') no-repeat top left;
							background-size: 100% auto;
							}
						.do-items-cell.item-3 .circle {
							background: url('../images/bg-circle-3.jpg') no-repeat top left;
							background-size: 100% auto;
							margin-bottom: 35px;
							}
						.do-items-cell.item-4 .circle {
							background: url('../images/bg-circle-4.jpg') no-repeat top left;
							background-size: 100% auto;
							margin-bottom: 35px;
							}
							.do-items-cell .circle svg {
								width: 70%;
								height: auto;
								webkit-transition: all .15s ease-out;
								-moz-transition: all .15s ease-out;
								-o-transition: all .15s ease-out;
								-ms-transition: all .15s ease-out;
								transition: all .15s ease-out;
								}
							/*
							.do-items-cell:hover .circle svg {
								transform: scale(1.2);
								}
							*/
						.do-items-cell h3 {
							font-family: 'Knul-Bold', arial, sans-serif;
							font-size: 30px;
							line-height: 30px;
							text-transform: uppercase;
							color: #282828;
							}
						.do-items-cell hr {
							width: 115px;
							margin: 20px auto;
							background: #ca1008;
							webkit-transition: all .15s ease-out;
							-moz-transition: all .15s ease-out;
							-o-transition: all .15s ease-out;
							-ms-transition: all .15s ease-out;
							transition: all .15s ease-out;
							}
							/*
							.do-items-cell:hover hr {
								width: 155px;
								}
							*/
						.do-items-cell p {
							margin-bottom: 0;
							font-family: 'Knul-Regular', arial, sans-serif;
							font-size: 17px;
							line-height: 23px;
							color: rgba(0,0,0,0.6);
							}
	
	.work {
		
		}
		.work-top {
			position: relative;
			height: 230px;
			margin-top: -240px;
			background: rgba(255,255,255,0.15);
			}		
			.work-top h2 {
				position: absolute;
				z-index: 1;
				top: 65px;
				left: 0;
				right: 0;
				font-family: 'Knul-Light', arial, sans-serif;
				font-size: 75px;
				line-height: 90px;
				color: #282828;
				text-align: center;
				}
				.work-top h2 span { 
					color: #ca1008;
					}
			.work-top a {
				display: block;
				position: relative;
				z-index: 2;
				float: right;
				margin: 80px 0 0 0;
				padding: 20px 30px;
				font-family: 'Knul-Light', arial, sans-serif;
				font-size: 24px;
				line-height: 24px;
				font-style: italic;
				text-align: center;	
				color: #fff;	
				background: #282828;
				cursor: pointer;
				overflow: hidden;
				webkit-transition: all .15s ease-out;
				-moz-transition: all .15s ease-out;
				-o-transition: all .15s ease-out;
				-ms-transition: all .15s ease-out;
				transition: all .15s ease-out;
				}															
			.work-top a:after {
				display: inline-block;
				position: absolute;
				top: 27px;
				right: -18px;
				width: 18px;
				height: 10px;
				content: "";
				background: url('../images/icon-arrow-down.png') no-repeat top right;				
				background-size: 18px auto;
				transition: all .35s ease-out;
				}
			.work-top a:hover {
				padding-right: 60px;
				background: #ca1008;
				}														
			.work-top a:hover:after {
				right: 20px;
				}
			.work-top a.open:before {
				content: "Hide";
				}
				.work-top a.open span {
					display: none;
					}
			.work-top a.open:after {
				background: url('../images/icon-arrow-up.png') no-repeat top right;				
				background-size: 18px auto;
				}
		.work-clientList {
			display: none;
			padding: 60px 180px;
			background: #ca1008; /* Old browsers */
			background: -moz-radial-gradient(center, ellipse cover,  #da0d03 0%, #980902 100%); /* FF3.6-15 */
			background: -webkit-radial-gradient(center, ellipse cover,  #da0d03 0%,#980902 100%); /* Chrome10-25,Safari5.1-6 */
			background: radial-gradient(ellipse at center,  #da0d03 0%,#980902 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da0d03', endColorstr='#980902',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */		
			}
			.work-clientList ul {
				margin: 0;
				padding: 0;
				column-count: 4;
				}
			.work-clientList li {
				margin: 0;
				padding: 0;
				list-style: none;
				}
				.work-clientList li a {
					display: block;
					position: relative;
					padding: 10px 15px;
					margin-bottom: 3px;
					color: #fff;
					background: rgba(255,255,255,0.1);
					overflow: hidden;
					webkit-transition: all .15s ease-out;
					-moz-transition: all .15s ease-out;
					-o-transition: all .15s ease-out;
					-ms-transition: all .15s ease-out;
					transition: all .15s ease-out;
					}															
				.work-clientList li a:after {
					display: inline-block;
					position: absolute;
					top: 15px;
					right: -10px;
					width: 10px;
					height: 18px;
					content: "";
					background: url('../images/icon-arrow-red.png') no-repeat top right;				
					background-size: 10px auto;
					transition: all .15s ease-out;
					}	
				.work-clientList li a:hover {
					color: #ca1008;
					background: #fff;
					padding-left: 20px;
					}															
				.work-clientList li a:hover:after {
					right: 15px;
					}
		.work-bottom {
			background: #282828
			}
			.work-bottom-item {
				position: relative;
				float: left;
				width: 33.33333%;
				height: 510px;
				overflow: hidden;
				text-align: center;
				}						
			.work-bottom-item.ultramar {
				background: #c1a80d url('../images/work-ultramar.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.upick {
				background: #4b7c2b url('../images/work-upick.jpg') no-repeat center center;
				background-size: cover;	
				}	
			.work-bottom-item.gpt {
				background: #3e75a0 url('../images/work-gpt.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.seveng {
				background: #4b7c2b url('../images/work-7g.jpg') no-repeat center center;
				background-size: cover;	
				}							
			.work-bottom-item.parklandParent {
				background: #3e75a0 url('../images/work-parkland-parent.jpg') no-repeat center center;
				background-size: cover;	
				}					
			.work-bottom-item.step {
				background: #d96a30 url('../images/work-step.jpg') no-repeat center center;
				background-size: cover;	
				}					
			.work-bottom-item.enerplus {
				background: #c1a80d url('../images/work-enerplus.jpg') no-repeat center center;
				background-size: cover;	
				}					
			.work-bottom-item.cfm {
				background: #d96a30 url('../images/work-cfm.jpg') no-repeat center center;
				background-size: cover;	
				}	
			.work-bottom-item.vermilion {
				background: #bd2623 url('../images/work-vermilion.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.adx {
				background: #3e75a0 url('../images/work-adx.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.bellatrix {
				background: #4b7c2b url('../images/work-bellatrix.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.cwcpcn {
				background: #d96a30 url('../images/work-cwcpcn.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.vbp {
				background: #bd2623 url('../images/work-vbp.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.petronas {
				background: #219f9a url('../images/work-petronas.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.nuvista {
				background: #3e75a0 url('../images/work-nuvista.jpg') no-repeat center center;
				background-size: cover;	
				}		
			.work-bottom-item.parkland {
				background: #4b7c2b url('../images/work-parkland.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.vfc {
				background: #d96a30 url('../images/work-vfc.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.altalink {
				background: #bd2623 url('../images/work-altalink.jpg') no-repeat center center;
				background-size: cover;	
				}		
			.work-bottom-item.interpipeline {
				background: #3e75a0 url('../images/work-interpipeline.jpg') no-repeat center center;
				background-size: cover;	
				}			
			.work-bottom-item.chilis {
				background: #d96a30 url('../images/work-chilis.jpg?ver=2018-08-10') no-repeat center center;
				background-size: cover;	
				}
				.work-bottom-item-content {
					position: absolute;
					top: 32%;
					left: 0;
					right: 0;
					width: 100%;
					height: auto;
					margin: auto;
					padding: 0 40px;
					webkit-transition: all .35s ease-out;
					-moz-transition: all .35s ease-out;
					-o-transition: all .35s ease-out;
					-ms-transition: all .35s ease-out;
					transition: all .35s ease-out;	
					}
				.work-bottom-item-content {
					top: 32%;
					}									
				.work-bottom-item:hover .work-bottom-item-content {
					top: 18%;
					}
					
				/* CUSTOM TOP MARGINS FOR HOVER */					
				.work-bottom-item.vermilion:hover .work-bottom-item-content {
					top: 12%;
					}						
				.work-bottom-item.cwcpcn:hover .work-bottom-item-content {
					top: 12%;
					}						
				.work-bottom-item.petronas .work-bottom-item-content {
					top: 30%;
					}				
				.work-bottom-item.petronas:hover .work-bottom-item-content {
					top: 15%;
					}			
				.work-bottom-item.parkland:hover .work-bottom-item-content {
					top: 5%;
					}				
				.work-bottom-item.altalink:hover .work-bottom-item-content {
					top: 13%;
					}
					.work-bottom-item-content img {						
						width: 50%;
						height: auto;
						margin: 0 auto 35px auto;
						}	
					.work-bottom-item.vfc:hover .work-bottom-item-content img,
					.work-bottom-item.altalink:hover .work-bottom-item-content img,
					.work-bottom-item.interpipeline:hover .work-bottom-item-content img {
						margin-bottom: 0;
						}
					.work-bottom-item-content p {						
						opacity: 0;
						padding: 0 25px;
						margin: 0 0 35px 0;
						font-family: 'Knul-Regular', arial, sans-serif;
						font-size: 24px;
						line-height: 30px;
						color: #fff;
						webkit-transition: all .35s ease-out;
						-moz-transition: all .35s ease-out;
						-o-transition: all .35s ease-out;
						-ms-transition: all .35s ease-out;
						transition: all .35s ease-out;	
						}
					.work-bottom-item:hover .work-bottom-item-content p {						
						opacity: 1;
						}
					.work-bottom-item-content a {	
						opacity: 0;
						display: inline-block;
						padding: 15px 25px;
						margin: 0 0 10px 0;
						font-family: 'Knul-Bold', arial, sans-serif;
						font-size: 16px;
						line-height: 16px;
						text-transform: uppercase;
						color: #fff;
						border: 2px solid #fff;
						webkit-transition: all .35s ease-out;
						-moz-transition: all .35s ease-out;
						-o-transition: all .35s ease-out;
						-ms-transition: all .35s ease-out;
						transition: all .35s ease-out;
						}
					.work-bottom-item-content a:hover {	
						color: #282828;
						background: #fff;
						}
					.work-bottom-item:hover .work-bottom-item-content a {	
						opacity: 1;
						}
	
	.conductor {
		background: #282828 url('../images/bg-conductor.jpg') no-repeat bottom center;
		}
		.conductor-top {
			position: relative;
			height: 230px;
			}		
			.conductor-top h2 {
				opacity: 0;
				position: absolute;
				top: 145px;
				left: 0;
				right: 0;
				font-family: 'Knul-Light', arial, sans-serif;
				font-size: 75px;
				line-height: 90px;
				color: #fff;
				text-align: center;
				}
				.conductor-top h2 span { 
					color: #ca1008;
					}		
		.conductor-bottom {
			padding: 0 160px 160px 160px;
			}
			.conductor-bottom-left {
				float: left;
				width: 50%;
				padding: 0 100px 0 0;
				}
				.conductor-bottom-left img {
					width: 100%;
					height: auto;
					margin: -15px 0 0 0;
					}
			.conductor-bottom-right {
				float: left;
				width: 50%;
				padding: 0 0 0 100px;
				font-family: 'Knul-Light', arial, sans-serif;
				font-size: 23px;
				line-height: 31px;
				color: #fff;
				border-left: 2px solid rgba(255,255,255,0.25);
				}
	
	.contact {
		
		}
		.contact-top {
			position: relative;
			height: 178px;
			background: #da0d03 url('../images/bg-contact.jpg') no-repeat top center;
			padding-top: 40px;
			}		
			.contact-top h2 {
				font-family: 'Knul-Light', arial, sans-serif;
				font-size: 75px;
				line-height: 90px;
				color: #fff;
				text-align: center;
				}		
		.contact-bottom {
			position: relative;
			height: 515px;
			background: #fff;
			}
			.contact-bottom-left {
				float: left;
				margin: 70px 0 0 180px;
				}
			.contact-bottom-right {
				float: right;
				margin: 70px 180px 0 0;
				}
			.contact-bottom-left,
			.contact-bottom-right {
				position: relative;
				z-index: 2;
				width: 370px;
				padding: 45px;
				background: #fff;
				box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
				}
				.contact-bottom-left h3,
				.contact-bottom-right h3 {
					margin: 0 0 20px 0;
					font-family: 'Knul-Light', arial, sans-serif;
					font-size: 55px;
					line-height: 55px;
					color: #ca1008;
					}
				.contact-bottom-left p,
				.contact-bottom-right p {
					margin: 0 0 20px 0;
					font-style: italic;
					font-size: 18px;
					line-height: 24px;
					}
				.contact-bottom-left h4,
				.contact-bottom-right h4 {
					margin: 0 0 10px 0;
					font-family: 'Knul-Regular', arial, sans-serif;
					font-size: 30px;
					line-height: 33px;
					color: #282828;
					}
				.contact-bottom-left h4.small,
				.contact-bottom-right h4.small {
					margin: 0 0 20px 0;
					font-size: 20px;
					line-height: 23px;
					}
				.contact-bottom-left a,
				.contact-bottom-right a {
					font-size: 20px;
					line-height: 23px;
					}
			.contact-bottom-map {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 515px;
				}
				/* HIDE GOOGLE MAP FOOTER
				a[href^="http://maps.google.com/maps"],
				a[href^="https://maps.google.com/maps"],
				a[href^="https://www.google.com/maps"] {
					display: none !important;
				} */
				.gmnoprint:not(.gm-bundled-control) {
					display: none;
				}
				.gm-bundled-control .gmnoprint {
					display: block;
				}
			
	.foot {
		padding: 75px;
		background: #fff;
		text-align: center;
		}
		.foot img {
			width: 395px;
			height: auto;
			margin: 0 0 30px 0;
			}
		.foot p {
			margin: 0;
			font-family: 'Knul-Regular', arial, sans-serif;
			font-size: 18px;
			line-height: 18px;
			color: rgba(0,0,0,0.6);
			}
		
	.subfoot {
		padding: 25px;
		background: #282828;
		text-align: center;
		}
		.subfoot a {
			font-family: 'Knul-Regular', arial, sans-serif;
			font-size: 18px;
			line-height: 18px;
			color: #fff;
			}
		.subfoot a:hover {
			color: #ca1008;
			}
	
	.legal {
		padding: 50px 225px;
		background: #fff;
		}
		.legal h1 {
			margin: 0 0 40px 0;
			font-family: 'Knul-Light', arial, sans-serif;
			font-size: 75px;
			line-height: 90px;
			color: #ca1008;
			text-align: center;
			}
		.legal h2 {
			margin: 0 0 30px 0;
			font-family: 'Knul-Light', arial, sans-serif;
			font-size: 45px;
			line-height: 50px;
			color: #282828;
			}
		.legal p {
			margin: 0 0 30px 0;
			}

	/*------------------------------
		Full-m. MISC
	------------------------------*/
	
	/* CLEARS */
	
	.clear {
		clear: both;
		}
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
		}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	1200. RESPONSIVE CASES - SCALES SITE DOWN TO 1200
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 1550px) {
			
	/*------------------------------
		1200-h. HOME
	------------------------------*/
	
	.navFlyout ul li a {
		font-size: 2vw;
		line-height: 2vw;
		}	
	
	.experience-left {
		width: 50%;
		padding: 45px 30px 0 200px;
		}
		.experience-left h1 {
			font-size: 55px;
			line-height: 65px;
			}
	.experience-right {
		width: 50%;	
		padding: 65px 200px 0 30px;		
		}
		.experience-right-bottom p {
			font-size: 18px;
			line-height: 22px;
			}
	.do {
		padding: 0;
		}		
		.do-top {
			height: 170px;
			}	
			.do-top h2 {
				font-size: 60px;
				line-height: 60px;
				}
			.do-items-table.grid-2-across {
				display: block;
				}
			.do-items-table.grid-4-across {
				display: none;
				}
				.do-items-cell {
					width: 50%;
					}
					.do-items-cell .circle {
						width: 13vw;
						height: 13vw;
						margin: 0 auto 40px auto;
						padding: 12% 5% 5% 5%;
						}
						.do-items-cell.item-1 .circle {
							padding-top: 14%;
							}
	
	.work-top {
		height: 200px;
		margin-top: -20px;
		background: #f5f5f5;
		}	
		.work-top h2 {
			font-size: 60px;
			line-height: 60px;
			}
		.work-top a {
			margin: 70px 0 0 0;
			font-size: 20px;
			line-height: 20px;
			}

		.work-clientList ul {
			column-count: 3;
			}
			
	.conductor-top {
		height: 200px;
		}	
		.conductor-top h2 {
			font-size: 60px;
			line-height: 60px;
			}
		.conductor-bottom {
			padding: 0 230px 100px 230px;
			}
			.conductor-bottom-left {
				float: none;
				width: 100%;
				padding: 0;
				}
				.conductor-bottom-left img {
					display: block;
					width: 75%;
					height: auto;
					margin: 0 auto 40px auto;
					}
			.conductor-bottom-right {
				float: none;
				width: 100%;
				padding: 0;
				text-align: center;
				border: none;
				}
	
	.contact-top {
		height: 150px;
		}	
		.contact-top h2 {
			font-size: 60px;
			line-height: 60px;
			}			
		.contact-bottom-left,
		.contact-bottom-right {
			width: 350px;
			padding: 40px;
			}	
	
	/*------------------------------
		1200-m. MISC
	------------------------------*/
		
		
	
}


/*----------------------------------------------------------------------------------------------------------------------------------------
   	960. RESPONSIVE CASES - SCALES SITE DOWN TO 960
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 1285px) {
		
	body {
		background-size: 1500px auto;
		}

	/*------------------------------
		960-h. HOME
	------------------------------*/
	
	/* HOVER STATE */		
		
	.nav a:hover .navHamburger.bar1 {
		width: 26px;
		transform: none;
		-webkit-transform: none;
		}
	.nav a:hover .navHamburger.bar2 {
		width: 32px;
		}
	.nav a:hover .navHamburger.bar3 {
		width: 26px;
		transform: none;
		-webkit-transform: none;
		}  
	
	/* ACTIVE STATE */			
		
	.nav a.open .navHamburger.bar1 {
		width: 32px;
		transform: rotate(45deg) translateX(6px) translateY(5px);
		-webkit-transform: rotate(45deg) translateX(6px) translateY(5px);
		}
	.nav a.open .navHamburger.bar2 {
		width: 0;
		}
	.nav a.open .navHamburger.bar3 {
		width: 32px;
		transform: rotate(-45deg) translateX(6px) translateY(-6px);
		-webkit-transform: rotate(-45deg) translateX(6px) translateY(-6px);
		}
	
	.navFlyout ul li a {
		font-size: 1.75vw;
		line-height: 1.75vw;
		}
	
	.title-container {
		height: 650px;
		}
		.title {
			width: 390px;
			padding: 110px 0 0 0;
			}
		.errorPage404 .title {
			padding: 100px 0 0 0;
			}
			.title-top {
				margin: 0 0 25px 0;
				font-size: 33px;
				line-height: 33px;
				}
			.title-box {
				padding: 15px 25px 30px 25px;
				font-size: 90px;
				line-height: 60px;
				border: 12px solid #fff;
				}
				.title-box span {
					font-size: 97px;
					line-height: 97px;
					}
			.errorPage404 .title-bottom {
				margin: 23px 0 0 0;
				font-size: 18px;
				line-height: 22px;
				}
				.errorPage404 .title-bottom a {
				    font-size: 18px;
					line-height: 18px;
					}
	
	.experience-left {
		float: none;
		width: 100%;
		padding: 45px 200px;
		}	
	.experience-right {
		float: none;
		width: 100%;
		padding: 0 200px;		
		}
	
	.logos {
		padding: 50px 25px 20px 25px;
		background: #282828;
		}	
		.logos-item {
			width: 20%;
			}
			.logos-item img {
				margin-bottom: 30px;
				}
	
	.do-top {
		height: 140px;
		}	
		.do-top h2 {
			font-size: 40px;
			line-height: 40px;
			}			
			.do-items-cell .circle {
				width: 13vw;
				height: 13vw;
				margin: 0 auto 40px auto;
				padding: 13% 4% 4% 4%;
				}
				.do-items-cell.item-1 .circle {
					padding-top: 16%;
					}
	
	.work-top {
		height: 180px;
		margin-top: -20px;
		background: #f5f5f5;
		}	
		.work-top h2 {
			font-size: 40px;
			line-height: 40px;
			}
		.work-top a {
			margin: 60px 0 0 0;
			font-size: 18px;
			line-height: 18px;
			}			
		.work-clientList ul {
			column-count: 2;
			}	
	.work-bottom-item {
		width: 50%;
		height: 510px;
		}
	/* APPLY IF NUMBER OF WORK ITEMS NOT DIVISIBLE BY 2
	.work-bottom-item:last-child {
		width: 100%;
		}
		.work-bottom-item:last-child .work-bottom-item-content {
			width: 75%;
			}*/
			.work-bottom-item-content img {						
				width: 75%;
				}
			.work-bottom-item-content p {			
				font-size: 20px;
				line-height: 26px;
				}
	
	.conductor-top {
		height: 170px;
		}	
		.conductor-top h2 {
			font-size: 40px;
			line-height: 40px;
			}
	
	.contact-top {
		height: 125px;
		}	
		.contact-top h2 {
			font-size: 40px;
			line-height: 40px;
			}	
		.contact-bottom {
			height: auto;
			padding-bottom: 400px;
			}
			.contact-bottom-left {
				position: relative;
				z-index: 2;
				float: left;
				width: 50%;
				margin: 0;
				padding: 40px 20px 40px 200px;
				box-shadow: none;
				text-align: right;
				}
			.contact-bottom-right {
				position: relative;
				z-index: 2;
				float: right;
				width: 50%;
				margin: 0;
				padding: 40px 200px 40px 20px;
				box-shadow: none;
				}
			.contact-bottom-map {				
				height: 400px;
				}
			
	
	/*------------------------------
		960-m. MISC
	------------------------------*/
		
		
			
}
			
/*----------------------------------------------------------------------------------------------------------------------------------------
   	728. RESPONSIVE CASES - SCALES SITE DOWN TO 728
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 1023px) {
	
	body {
		background-size: 1050px auto;
		}
	
	/*------------------------------
		728-h. HOME
	------------------------------*/
	
	.paw {
		z-index: 13;
		left: 40px;
		width: auto;
		height: 60px;
		}
	.mediadog {
		display: none;
		}
	.logoBG {
		left: -120px;
		width: 120px;
		height: 116px;
		}
	
	.nav {
		top: 40px;
		right: 0;
		padding: 25px 30px;
		}		
		.nav .navCircle {
			width: 50px;
			height: 50px;
			}
			.nav .navHamburger {
				width: 22px;
				}
			.nav .navHamburger.bar1 {
				top: 14px;
				}
			.nav .navHamburger.bar2 {
				top: 21px;
				width: 26px;
				}
			.nav .navHamburger.bar3 {
				top: 28px;
				}
				
			/* HOVER STATE */		
		
			.nav a:hover .navHamburger.bar1 {
				width: 22px;
				transform: none;
				-webkit-transform: none;
				}
			.nav a:hover .navHamburger.bar2 {
				width: 26px;
				}
			.nav a:hover .navHamburger.bar3 {
				width: 22px;
				transform: none;
				-webkit-transform: none;
				}  
				
			/* ACTIVE STATE */			
		
			.nav a.open .navHamburger.bar1 {
				width: 26px;
				transform: rotate(45deg) translateX(5px) translateY(5px);
				-webkit-transform: rotate(45deg) translateX(5px) translateY(5px);
				}
			.nav a.open .navHamburger.bar2 {
				width: 0;
				}
			.nav a.open .navHamburger.bar3 {
				width: 26px;
				transform: rotate(-45deg) translateX(5px) translateY(-5px);
				-webkit-transform: rotate(-45deg) translateX(5px) translateY(-5px);
				}
				
	.navBG {
		right: -120px;
		width: 120px;
		height: 116px;
		}
	
	.navFlyout {
		right: -30%;
		width: 30%;
		}
		.navFlyout ul {
			float: left;
			margin: 0;
			padding: 25px 0 0 35px;
			}
			.navFlyout ul li {
				position: relative;
				float: none;
				height: auto;
				line-height: 20px;
				padding: 0;
				margin: 0;
				border-bottom: none;
				}	
			.navFlyout ul li:after {
				display: none;
				}	
			.navFlyout ul li:hover {
				color: #fff;
				border-bottom: none;
				}	
				.navFlyout ul li a {
					display: block;
					padding: 5px 0;
					font-size: 20px;
					line-height: 20px;
					text-align: center;
					}
	
	.title-container {
		height: 465px;
		}
		.title {
			width: 260px;
			padding: 80px 0 0 0;
			}
		.errorPage404 .title {
			padding: 70px 0 0 0;
			}
			.title-top {
				margin: 0 0 15px 0;
				font-size: 23px;
				line-height: 23px;
				}
			.title-box {
				padding: 10px 25px 15px 25px;
				font-size: 60px;
				line-height: 50px;
				border: 10px solid #fff;
				}
			.errorPage404 .title-box {
				padding: 10px 25px 10px 25px;
				font-size: 40px;
				line-height: 30px;
				}
				.title-box span {
					font-size: 62px;
					line-height: 62px;
					}
			.errorPage404 .title-bottom {
				font-size: 14px;
				line-height: 18px;
				}
				.errorPage404 .title-bottom a {
				    font-size: 14px;
				    line-height: 14px;
					}
	
	.experience-left {
		padding: 45px 145px;
		}	
		.experience-left h1 {
			font-size: 45px;
			line-height: 55px;
			}
	.experience-right {
		padding: 0 145px;		
		}
		.experience-right-bottom p {
			font-size: 20px;
			line-height: 26px;
			}
			
	.logos {
		padding: 50px 25px 20px 25px;
		}	
		.logos-item {
			width: 20%;
			}
			.logos-item img {
				margin-bottom: 30px;
				}
				
	.do-top {
		height: 140px;
		}	
		.do-top h2 {
			font-size: 30px;
			line-height: 30px;
			}
	.do-items {
		padding: 0 120px 40px 120px;
		}	
		.do-items-table {
			border-spacing: 15px;
			}
			.do-items-cell h3 {
				font-size: 27px;
				line-height: 27px;
				}
	
	.work-top {
		height: 160px;
		margin-top: -20px;
		}	
		.work-top h2 {
			font-size: 30px;
			line-height: 30px;
			}
		.work-top a {
			margin: 57px 0 0 0;
			font-family: 'Knul-Bold', arial, sans-serif;
			font-size: 14px;
			line-height: 14px;
			}
		.work-clientList {
			padding-left: 125px;
			padding-right: 125px;
			}
			
	
	.conductor-bottom {
		padding: 0 155px 100px 155px;
		}
		.conductor-bottom-left img {
			width: 100%;
			}
	
		
	.contact-bottom {
		
		}			
		.contact-bottom-left,
		.contact-bottom-right {
			float: none;
			width: 100%;
			text-align: center;
			}
		.contact-bottom-left {
			padding: 40px 40px 20px 40px;
			}
		.contact-bottom-right {
			padding: 20px 40px 40px 40px;
			}
	
	.legal {
		padding: 50px 175px;
		}

	/*------------------------------
		728-m. MISC
	------------------------------*/
		
		
			
}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	M. RESPONSIVE CASES - SCALES SITE DOWN BELOW 728
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 760px) {
		
	body {
		background: #fff url('../images/bg-mobile.jpg') no-repeat top center;	
		}	
		
	/*------------------------------
		M-h. HOME
	------------------------------*/
	
	.paw {
		top: 25px;
		}
	.logoBG {
		top: 0;
		width: 90px;
		height: 90px;
		}
	.nav {
		top: 8px;
		}
	.navBG {
		top: 0;
		width: 90px;
		height: 90px;
		}
	
	.navFlyout {
		top: 92px;
		right: -100%;
		width: 100%;
		height: auto;
		}
		.navFlyout ul {
			float: none;
			margin: 0 auto;
			padding: 40px;
			}
				.navFlyout ul li a {
					padding: 15px 0;
					font-size: 35px;
					line-height: 35px;
					}
	
	.title-container {
		height: 450px;
		}
		.title {
			max-width: 300px;
			width: 100%;
			padding: 120px 0 0 0;
			}
			.title-top {
				margin: 0 0 25px 0;
				font-size: 32px;
				line-height: 32px;
				}
	
	.experience-left {
		padding: 45px 45px 35px 45px;
		}	
		.experience-left h1 {
			font-size: 35px;
			line-height: 42px;
			}
	.experience-right {
		padding: 0 35px;		
		}
		.experience-right-bottom p {
			font-size: 20px;
			line-height: 26px;
			}
	
	.logos {
		padding: 35px 35px 15px 35px;
		}	
		.logos-item {
			width: 50%;
			}
			.logos-item img {
				margin-bottom: 30px;
				}
	
	.do {
		background: #f5f5f5;
		}
		.do-top {
			height: auto;
			padding: 45px;
			}	
			.do-top h2 {
				position: static;
				opacity: 1;
				}
		.do-items {
			padding: 0 35px;
			}
			.do-items-table.grid-2-across {
				display: block;
				}
				.do-items-row {
					display: block;
					}
					.do-items-cell {
						display: block;
						width: 100%;
						margin-bottom: 15px;
						}
						.do-items-cell .circle {
							width: 45vw;
							height: 45vw;
							margin: 0 auto 40px auto;
							padding: 18% 7% 7% 7%;
							}
							.do-items-cell.item-1 .circle {
								padding-top: 22%;
								}
	.work-top {
		height: auto;
		padding: 45px;
		}	
		.work-top h2 {
			position: static;
			opacity: 1;
			}
		.work-top a {
			display: none;
			}		
		.work-clientList ul {
			column-count: 1;
			}
		.work-bottom-item {
			float: none;
			width: 100%;
			height: 500px;
			}
			.work-bottom-item-content {
				position: absolute;
				top: 32%;
				left: 0;
				right: 0;
				width: 100%;
				height: auto;
				margin: auto;
				padding: 0 30px;
				}	
				/* APPLY IF NUMBER OF WORK ITEMS NOT DIVISIBLE BY 2
				.work-bottom-item:last-child .work-bottom-item-content {
					width: 100%;
					}*/	
				.work-bottom-item.vermilion:hover .work-bottom-item-content {
					top: 12%;
					}		
				.work-bottom-item.cwcpcn:hover .work-bottom-item-content {
					top: 10%;
					}
	
	.conductor {
		background: #282828;
		}	
		.conductor-top {
			height: auto;
			padding: 45px;
			}	
			.conductor-top h2 {
				position: static;
				opacity: 1;
				}	
		.conductor-bottom {
			padding: 0 35px 55px 35px;
			}
	
	.contact-top {
		height: auto;
		padding: 45px;
		}	
		.contact-top h2 {
			position: static;
			opacity: 1;
			}	
	
	.foot {
		padding: 35px;
		}
		.foot img {
			max-width: 395px;
			width: 100%;
			height: auto;
			}

	.legal {
		padding: 50px;
		background: #fff;
		}
		.legal h1 {
			margin: 0 0 40px 0;
			font-family: 'Knul-Light', arial, sans-serif;
			font-size: 45px;
			line-height: 50px;
			color: #ca1008;
			text-align: center;
			}
		.legal h2 {
			margin: 0 0 30px 0;
			font-family: 'Knul-Light', arial, sans-serif;
			font-size: 25px;
			line-height: 30px;
			color: #282828;
			}

	/*------------------------------
		M-m. MISC
	------------------------------*/
	
}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	1920+. FIXES BACKGROUND FOR 1080p+ MONITORS
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (min-width: 1921px) {

body,
.do,
.conductor {
	background-size: cover;
	}

.v {
	background-size: 100% auto;
	}

}