/*
Theme Name: Essjay Contracting 2017
Author: FMSTUDIOS - Fenecsh Multimedia Studios
Author URI: http://www.fmstudios.com.au/
*/

body, html{
	margin: 0;
	padding: 0;
	position: relative;
	overflow-x: hidden;
	font-family: 'Ubuntu', sans-serif, Arial, Helvetica;
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.4em;
	color: #000;
}
body{background: #cecece;}
body img{border: none;}
#page{overflow: hidden;}
.white_bg{background: #fff;}
.wrap{
	margin: 0 auto 0 auto;
	position: relative;
	width: 90%;
	max-width: 1200px;
}
	
/*---------------FONT STYLES--------------*/
h1, h2, h3, h4, p, a, ol, ul, li{margin: 0; padding: 0;}
h1{
	margin: 0 0 30px 0;
	font-family: 'Raleway', sans-serif;
	font-size: 24px;
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	line-height: 1.3em;
	letter-spacing: 5px;
	color: #fff;
}
h2{
	margin: 0 0 25px 0;
	padding: 10px 0 0 0;
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	line-height: 1.3em;
	letter-spacing: 5px;
}
.white_bg h2{color: #fdb813;}
h2:first-child, h1 + h2{padding: 0;}
h3{
	margin: 0 0 10px 0;
	padding: 5px 0 0 0;
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.3em;
}
h3:first-child, h2 + h3{padding: 0;}
h4{
	margin: 0 0 10px 0;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.white_bg h4{color: #fdb813;}
p{margin: 0 0 20px 0;}
a{
	text-decoration: none;
	color: #fff;
	-webkit-transition: color 300ms ease;
	-moz-transition: color 300ms ease;
	-o-transition: color 300ms ease;
	transition: color 300ms ease;
}
a:hover{color: #000;}
a:focus{outline: none;}
.white_bg a{color: #fdb813;}
.white_bg a:hover{color: #000;}
ul li{list-style: none;}
table{margin: 0 0 20px 0; border-collapse: collapse;}
@media screen and (max-width: 960px){
	h1{font-size: 22px;}
	h2{font-size: 18px;}
	h3{font-size: 18px;}
}
	
/*---------------TOP--------------*/
#top{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#header{
	padding: 15% 0 5% 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.logo{display: block; width: 225px; height: 103px;}
#top .logo{position: absolute; top: 20px; right: 0;}
.logo object, .logo img{
	display: block;
	width: 100%;
	height: 103px;
	pointer-events: none;
}
.phone{
	padding: 3px 15px 3px 15px;
	display: none;
	position: absolute;
	top: 118px;
	right: 41px;
	width: 115px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	background: #fdb813;
	-webkit-transform: skewX(-18deg);
	-moz-transform: skewX(-18deg);
	-ms-transform: skewX(-18deg);
	-o-transform: skewX(-18deg);
	transform: skewX(-18deg);
}
.phone a{
	display: inline-block;
	color: #000;
	-webkit-transform: skewX(18deg);
	-moz-transform: skewX(18deg);
	-ms-transform: skewX(18deg);
	-o-transform: skewX(18deg);
	transform: skewX(18deg);
}
#header .header_box{
	margin: 150px auto 50px auto;
	padding-left: 5%;
	padding-right: 5%;
	width: 80%;
	max-width: 500px;
	background: #fdb813;
}
.header_box h2{color: #fff;}
#nav_toggle{
	padding: 9px 10px 0 47px;
	display: none;
	position: absolute;
	top: 15px;
	left: -10px;
	height: 29px;
	float: left;
	z-index: 1000;
	cursor: pointer;
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	color: #000;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#nav_toggle .bar{
	display: block;
	position: absolute;
	left: 10px;
	width: 27px;
	height: 3px;
	background: #000;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
#nav_toggle .bar1{top: 8px;}
#nav_toggle .bar2{top: 18px;}
#nav_toggle .bar3{top: 18px;}
#nav_toggle .bar4{top: 28px;}
.csstransforms .show_nav #nav_toggle .bar1{left: 32px; width: 0; opacity: 0;}
.csstransforms .show_nav #nav_toggle .bar4{width: 0; opacity: 0;}
.csstransforms .show_nav #nav_toggle .bar2, .csstransforms .show_nav #nav_toggle .bar3{
	-webkit-transition-delay: 150ms;
	-moz-transition-delay: 150ms;
	-o-transition-delay: 150ms;
	transition-delay: 150ms;
}
.csstransforms .show_nav #nav_toggle .bar2{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(135deg);
}
.csstransforms .show_nav #nav_toggle .bar3{
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-135deg);
}
@media screen and (max-width: 1350px){
	#top .logo{top: 70px;}
}
@media screen and (max-width: 1100px){
	#top .logo{top: 20px;}
	#nav_toggle{display: block;}
}
@media screen and (max-width: 720px){
	.logo{width: 180px; height: 82px;}
	.logo object, .logo img{height: 82px;}
	.phone{display: block;}
}
	
/*---------------NAV--------------*/
nav{
	position: absolute;
	top: 40px;
	left: -10px;
	z-index: 50;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
nav li{position: relative; float: left;}
nav > ul > li.current-menu-item:after, nav > ul > li.current-page-parent:after{
	position: absolute;
	bottom: 0;
	left: -10px;
	width: 48px;
	height: 7px;
	content: '';
	pointer-events: none;
	background: #000;
	-webkit-transform: skewX(-18deg);
	-moz-transform: skewX(-18deg);
	-ms-transform: skewX(-18deg);
	-o-transform: skewX(-18deg);
	transform: skewX(-18deg);
}
nav li a{
	padding: 10px;
	display: block;
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	color: #000;
}
nav li:hover > a{color: #e3a000;}
nav li ul{
	padding: 0;
	position: absolute;
	top: 100%;
	left: 10px;
	width: 200px;
	max-height: 0;
	overflow: hidden;
	background: #000;
	-webkit-transition: padding 300ms ease, max-height 300ms ease;
	-moz-transition: padding 300ms ease, max-height 300ms ease;
	-o-transition: padding 300ms ease, max-height 300ms ease;
	transition: padding 300ms ease, max-height 300ms ease;
}
nav li:hover ul{padding: 5px 0 5px 0; max-height: 500px;}
nav li li{float: none;}
nav li li a{
	padding: 5px 10px 5px 10px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3em;
	text-transform: none;
	color: #fff;
}
nav li li.current-menu-item a{color: #e3a000;}
nav .toggle{
	display: none;
	position: absolute;
	top: 16px;
	right: -10px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}
nav .bar1, nav .bar2{position: absolute; background: #000;}
nav .bar1{
	top: 14px;
	left: 8px;
	width: 15px;
	height: 3px;
}
nav .bar2{
	top: 8px;
	left: 14px;
	width: 3px;
	height: 15px;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
nav .opened .bar2{top: 15px; height: 0;}
@media screen and (max-width: 1350px){
	nav{top: 20px;}
}
@media screen and (max-width: 1100px){
	nav{
		padding: 0 5.555% 0 5.555%;
		top: 0;
		left: -5.555%;
		width: 180px;
		visibility: hidden;
		overflow: hidden;
		background: #fff;
		-webkit-transform: scaleX(0);
		-moz-transform: scaleX(0);
		-ms-transform: scaleX(0);
		-o-transform: scaleX(0);
		transform: scaleX(0);
		-webkit-transform-origin: center left;
		-moz-transform-origin: center left;
		-ms-transform-origin: center left;
		-o-transform-origin: center left;
		transform-origin: center left;
	}
	.show_nav nav{
		visibility: visible;
		-webkit-transform: scaleX(1);
		-moz-transform: scaleX(1);
		-ms-transform: scaleX(1);
		-o-transform: scaleX(1);
		transform: scaleX(1);
	}
	nav ul{padding: 65px 0 10px 0;}
	nav li{float: none;}
	nav li a{margin: 0 -10px 0 -10px;}
	nav li.menu-item-has-children a{padding-right: 25px;}
	nav li:hover > a, nav li a:hover{color: #000;}
	nav li ul{margin-top: -3px; position: static; background: none;}
	nav li:hover ul{padding: 0; max-height: 0;}
	nav li.opened ul{padding: 0 0 5px 0; max-height: 500px;}
	nav li li a{padding: 3px 10px 3px 10px; color: #000;}
	nav .toggle{display: block;}
}
	
/*---------------CONTENT--------------*/
main{display: block;}
main ul{margin: 0 0 20px 0;}
main p + ul{margin: -10px 0 20px 0;}
main ul li{padding: 0 0 0 18px; background: url(images/bullet.png) 8px 9px no-repeat;}
.generatedcontent main ul li{position: relative; background: none;}
.generatedcontent main ul li:before{
	position: absolute;
	top: 9px;
	left: 8px;
	width: 4px;
	height: 4px;
	content: '';
	background: #000;
	border-radius: 50%;
}
main ol{margin: 0 0 20px 0;}
main ol li{margin: 0 0 0 20px;}
.content{padding: 60px 0 40px 0;}
.center{text-align: center;}
.cols{overflow: auto;}
.cols .left{width: 48.334%; float: left;}
.cols .right{width: 48.334%; float: right;}
.cols2{
	margin-bottom: 20px;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
}
.cols2 h2, .cols2 li, .cols2 .nobreak{
	overflow: auto;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
}
.clear{clear: both;}
.btn_wrap{text-align: right;}
.btn{
	margin-right: -20%;
	padding: 5px 15px 5px 15px;
	display: inline-block;
	position: relative;
	width: 245px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: #000;
	-webkit-transform: skewX(-18deg);
	-moz-transform: skewX(-18deg);
	-ms-transform: skewX(-18deg);
	-o-transform: skewX(-18deg);
	transform: skewX(-18deg);
	-webkit-transition: color 300ms ease;
	-moz-transition: color 300ms ease;
	-o-transition: color 300ms ease;
	transition: color 300ms ease;
}
.white_bg .btn{color: #fff;}
.btn:hover, .white_bg .btn:hover{color: #fdb813;}
.btn span{
	display: inline-block;
	-webkit-transform: skewX(18deg);
	-moz-transform: skewX(18deg);
	-ms-transform: skewX(18deg);
	-o-transform: skewX(18deg);
	transform: skewX(18deg);
}
.boxes{position: relative; overflow: auto;}
.box{position: relative; width: 50%; float: left;}
.box.above{z-index: 50;}
.box.right{float: right;}
.box.full{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.box.right.full{left: 50%;}
.box.full.contact_image{height: 50%;}
.box.full.map{top: 50%; height: 50%;}
.box .inner{width: 90%; max-width: 600px; float: right;}
.box.left .content{padding-right: 10%;}
.box.right .content{padding-left: 10%;}
.tiles3{
	margin: 0 -3.25% -140px 0;
	position: relative;
	width: 103.25%;
	z-index: 100;
	overflow: auto;
}
.tile{margin: 0 3.147% 0 0; width: 30.186%; float: left;}
.featured_project{background: #fdb813;}
.featured_project img{display: block; width: 100%;}
.featured_project .text{padding: 30px 8% 15px 8%;}
.featured_project h3{text-transform: uppercase; color: #fff;}
.featured_project .btn{margin-right: -12%; width: 80%; max-width: 245px;}
.overlap_top{padding-top: 100px;}
.white_box_wrap.content{padding-top: 0;}
.white_box.content{padding-left: 5%; padding-right: 5%;}
.white_box{
	margin-bottom: -140px;
	position: relative;
	z-index: 50;
	background: #fff;
	background: rgba(255,255,255,0.75);
}
.no-rgba .white_box{background: url(images/white75.png) repeat;}
.white_box img{margin-top: 5px; max-width: 100%;}
.project{
	margin-top: 30px;
	padding: 30px 5% 20px 5%;
	position: relative;
	z-index: 50;
	overflow: auto;
	background: #fdb813;
}
.project:first-child{margin-top: 0;}
.project:last-child{margin-bottom: -140px;}
.project .img{margin: 0 0 10px 0; width: 34.63%; float: left;}
.project img{display: block; width: 100%;}
.project a:hover .btn{color: #fdb813;}
.project .btn_wrap{margin: -16px -10px 0 0;}
.project .btn{margin: 0; width: 60%;}
.project .details{width: 61.668%; float: right;}
.project h3{margin: 0 0 20px 0;}
.project h4{
	width: 30%;
	float: left;
	clear: both;
	line-height: 1.3em;
	color: #fff;
}
.project .details p{margin: -3px 0 12px 0; width: 67%; float: right;}
.project a{color: #fff;}
.project a:hover{color: #000;}
.gallery{
	margin: 0 -0.741% -0.741% 0;
	padding: 0 0 20px 0;
	width: 100.741%;
	overflow: auto;
}
.gallery img{
	margin: 0 0.735% 0.735% 0;
	width: 24.265%;
	float: left;
}
.map iframe{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}
.nf-form-fields-required{margin-bottom: 5px;}
.label-above .nf-field-label{margin-bottom: 3px !important;}
#ninja_forms_required_items, .nf-field-container{margin-bottom: 15px !important;}
input{font-family: 'Ubuntu', sans-serif, Arial, Helvetica; font-size: 14px;}
input.btn{border: none; cursor: pointer;}
@media screen and (max-width: 960px){
	.content{padding: 45px 0 25px 0;}
	.btn{margin-right: -10%;}
	.boxes{overflow: visible;}
	.box.left, .box.right{width: auto; float: none;}
	.box.full{position: relative; width: 100%; height: 250px;}
	.box.full.map, .box.full.contact_image{top: auto; height: 250px;}
	.box.right.full, .box.right.full{left: 0;}
	.box .inner{
		margin: 0 auto 0 auto;
		width: 90%;
		max-width: none;
		float: none !important;
	}
	.box.left .content, .box.left .content{padding-left: 0; padding-right: 0;}
	.box .btn{margin-right: -5.5%;}
	.tiles3{margin: 0 0 -145px 0; width: auto; overflow: visible;}
	.tile{margin: 0; width: auto; float: none; clear: both;}
	.featured_project{background: none;}
	.featured_project img{margin: 0 0 25px 0; width: 40%; float: left;}
	.featured_project .text{
		margin: 0 0 20px 0;
		padding: 30px 5% 10px 5%;
		width: 50%;
		float: right;
		background: #fdb813;
	}
	.white_box{margin-bottom: -125px;}
	.project:last-child{margin-bottom: -125px;}
	.project .img{margin:0 0 15px 0; width: 80%; max-width: 260px; float: none;}
	.project .img.no_img{display: none;}
	.project .details{width: auto; float: none;}
}
@media screen and (max-width: 720px){
	.content{padding: 30px 0 10px 0;}
	.cols .left, .cols .right{width: auto; float: none;}
	.cols2{
		margin-bottom: 0;
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	.tiles3{margin-bottom: -130px;}
	.white_box{margin-bottom: -110px;}
	.project:last-child{margin-bottom: -110px;}
	.project h4{width: auto; float: none;}
	.project .details p{width: auto; float: none;}
	.gallery img{width: 32.592%;}
}
@media screen and (max-width: 450px){
	.featured_project img{margin: 0 auto -10px auto; width: 80%; float: none;}
	.featured_project .text{padding: 40px 5% 10px 5%; float: none; width: auto;}
	.gallery img{width: 49.259%;}
}
	
/*---------------FOOTER--------------*/
footer{position: relative;}
.dirt{
	margin: -55.5% 0 0 0;
	position: absolute;
	top: -100px;
	left: -72%;
	width: 136.084%;
	max-width: 1814px;
	pointer-events: none;
}
.contact_box{
	margin-bottom: 20px;
	padding-left: 3.333%;
	padding-right: 3.333%;
	position: relative;
	width: 58.917%;
	float: right;
	z-index: 100;
}
.contact_box h2{color: #000;}
.contact_box a{color: #000;}
.contact_box a:hover{color: #fdb813;}
.social{
	margin: -170px 0 20px -20px;
	position: relative;
	left: 50%;
	width: 40px;
	overflow: auto;
}
.social img{
	margin: 10px 0 0 0;
	width: 40px;
	float: left;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.social img:hover{
	-webkit-filter: brightness(0%);
	filter: brightness(0%);
}
.contact_box .logo{margin: -121px 0 20px 0; float: right;}
#copyright{
	padding: 30px 0 35px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: 1.3em;
	border-top: 6px solid #fff;
	color: #3f4140;
}
#copyright a{color: #3f4140;}
#copyright a:hover{color: #fff;}
#copyright img{margin: 0 0 8px 0; width: 30px;}
#backtotop{
	position: fixed;
	bottom: 10%;
	right: -36px;
	width: 36px;
	height: 36px;
	opacity: 0;
	z-index: 200;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
#backtotop img{width: 100%; pointer-events: none;}
#backtotop.visible{right: 5px; opacity: 0.5;}
#backtotop.visible:hover{opacity: 1;}
@media screen and (max-width: 1150px){
	.contact_box .logo{margin: -111px 0 15px 0;}
	.social{margin: 40px 0 15px 0; left: 0; width: auto;}
	.social img{margin: 0 10px 0 0; float: left;}
}
@media screen and (max-width: 960px){
	.contact_box{padding-left: 5%; padding-right: 5%; width: 90%;}
}
@media screen and (max-width: 720px){
	.contact_box .logo{margin-top: -97px;}
	.social img{width: 30px;}
}
@media screen and (max-width: 400px){
	.social{margin: 0; width: 50px;}
	.social img{margin: 0 0 10px 0;}
}
	
/*---------------TINYMCE--------------*/
#tinymce{margin: 5px !important; background: #fff;}
#tinymce h4{color: #fdb813;}
#tinymce a{text-decoration: underline; color: #000;}
#tinymce a:hover{color: #fdb813;}
#tinymce ul, #tinymce ol{margin: 0 0 20px 0;}
#tinymce ul li{padding: 0 0 0 18px; background: url(images/bullet.png) 8px 9px no-repeat;}
#tinymce ol li{margin: 0 0 0 20px;}