/*
LOGO COLORS I'VE FOUND:
PINE GREEN:	507515
NEW PINE:	70a011 old green links and hr
LIGHT GREEN BG:	ced9b9
NEW LOGO GREEN: 30A341
*/

/*******************PRELOAD**********************/
.preload{
	position:absolute;
	width:1px;
	height:1px;
	top:-1px;
	left:-1px;
}

#preload-1{background-image:url('images/12.jpg');}
#preload-2{background-image:url('images/8.jpg');}

/*
#preload-service-1{background-image:url('images/10.jpg');}
#preload-service-2{background-image:url('images/13.jpg');}
*/


@font-face{
	font-family:logo;
	/*
	src:url('Rubik-Black.ttf');
	*/
	src:url('HelveticaLTStd-Blk.ttf');
}
@font-face{
	font-family:main;
	/*
	src:url('Rubik-Regular.ttf');
	*/
	src:url('HelveticaLTStd-Light.ttf');
}

*{
	margin:0px;
	padding:0px;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}
::-webkit-file-upload-button { cursor:pointer; }
html{
	height:100%;
}
body{
	position:relative;
	background-color:#ffffff;
	min-height:100%;
	padding-bottom:150px;
	font-family:main;
}
h1{
	width:100%;
	text-align:center;
	font-family:main;
	margin-top:30px;
	margin-bottom:30px;
}
h2{
	margin-top:20px;
	margin-bottom:10px;
	font-family:main;
}
hr{
	border:1px solid;
	border-color:#30A341;
	margin-top:10px;
	margin-bottom:10px;
}
b{
	font-family:main;
}
p{
	display:inline-block;
	vertical-align:top;
	width:30%;
	padding:15px;
	margin-top:5px;
	border-radius:5px;
	font-family:main;
}
a{
	text-decoration:none;
	cursor:pointer;
	font-weight:bold;
	color:#30A341;
}
ul{
	padding-left:40px;
}
.body-text{
	padding-left:10px;
	padding-right:10px;
	margin-bottom:20px;
	margin-top:20px;
	font-family:main;
	font-size:120%;
	overflow:auto;
}
#header{
	background-image:url('images/background1.jpg');
	background-position:200px center;
	background-size:cover;
	box-shadow:0px 5px 10px 0px #a0a0a0;
	position:relative;
	width:100%;
	/*original
	height:240px;
	*/
	height:300px;
	background-color:#ffffff;
	/*
	border-bottom:10px solid;
	border-color:#70a011;
	*/
}

.header-slideshow{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:300px;
	background-position:400px center;
	background-size:cover;
	transition:opacity 1s;
}

#header-gradient{
	position:relative;
	width:100%;
	height:100%;
	background-color:#ffffff;
	background-image:-webkit-gradient(linear, right,rgba(255,255,255,1),rgba(255,255,255,1) 600px, rgba(255,255,255,0.001) 1200px, 255,255,255,0.001));
	background:linear-gradient(to right,rgba(255,255,255,1), rgba(255,255,255,1) 600px, rgba(255,255,255,0.001) 1200px, rgba(255,255,255,0.001));
}
	#logo{
		display:table;
		font-size:300%;
		font-family:logo;
		height:100%;
		width:600px;
		background-image:url('images/logo.png');
		background-size:99%;
		background-position:right;
		background-repeat:no-repeat;
	}
		.logo-text-shadow{
			text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff;
		}
	#header-contact{
		position:absolute;
		text-align:right;
		left:250px;
		top:5px;
		padding:10px;
		font-family:main;
		opacity:0.75;
	}
		.header-icon{
			display:inline-block;
			vertical-align:middle;
			width:auto;
			height:1em;
		}
	#header-bullets{
		position:absolute;
		bottom:35px;
		left:175px;
		font-size:120%;
		color:#505050;
		font-family:logo;
	}
	#menu-container{
		position:absolute;
		bottom:0px;
		right:0px;
		width:100%;
		line-height:50px;
		height:50px;
		text-align:right;
		/*old
		background-color:#ffffff;
		border-radius:10px 0px 0px 0px;
		opacity:0.8;
		*/
	}
	#menu-container-background{
		position:absolute;
		bottom:0px;
		right:0px;
		width:100%;
		height:50px;
		background-color:#30A341;
		/*
		background-color:#70a011;
		*/
		opacity:0.7;
	}
	.menu-element{
		vertical-align:top;
		transition:0.5s;
		font-size:130%;
		padding-right:15px;
		padding-left:15px;
		color:#dfdfdf;
		border:none;
		font-family:logo;
		text-shadow:-1px 0px 3px #000, 1px 0px 3px #000, 0px -1px 3px #000, 0px 1px 3px #000;
	}
	.menu-element-current{
		vertical-align:top;
		font-size:140%;
		padding-right:15px;
		padding-left:15px;
		color:#ffffff;
		font-family:logo;
		font-weight:bold;
		cursor:default;
		text-shadow:-1px 0px 3px #000, 1px 0px 3px #000, 0px -1px 3px #000, 0px 1px 3px #000;
	}
	.menu-element:hover{
		font-size:140%;
		color:#ffffff;
		cursor:pointer;
	}
/*MOBILE HEADER*/
#header-mobile{
	display:none;
	box-shadow:0px 5px 10px 0px #a0a0a0;
	position:relative;
	width:100%;
	background-color:#ffffff;
}
	#logo-mobile{
		width:100%;
		font-size:300%;
		font-family:logo;
		/*height:170px;*/
	}
	#header-contact-mobile{
		padding:10px;
		text-align:center;
		font-family:main;
		width:100%;
	}
#mobile-menu{
	display:none;
	width:100%;
	background-color:#ffffff;
	height:50px;
	line-height:50px;
	margin:0 auto;
	font-family:main;
	font-weight:bold;
	overflow:hidden;
	transition:0.5s;
	/*box-shadow:0px 2px 5px 0px #505050;*/
}
	.menu-hr{
		width:100%;
		background-color:#e0e0e0;
		font-size:0%;
		height:2px;
	}
	.menu-element-mobile{
		width:100%;
		height:50px;
		line-height:50px;
		font-size:110%;
		text-align:left;
		padding-left:30px;
	}
	.menu-element-current-mobile{
		/*background-color:#507515;*/
		color:#ffffff;
		padding-left:30px;
	}
	.menu-divider{
		height:1px;
		width:95%;
		margin:0 auto;
		background-color:#e0e0e0;
	}
#dummy-wrapper{
	position:relative;
	max-width:100%;
	max-height:100%;
	margin:0px;
	padding:0px;
}
#dummy-old{
	position:absolute;
	visibility:hidden;
	top:0px;
	left:0%;
	width:100%;
	height:100%;
	background-color:white;
	transition:transform 0.5s;
	padding-left:5px;
	padding-right:5px;
}
#dummy-new{
	position:absolute;
	visibility:hidden;
	top:0px;
	left:100%;
	width:100%;
	height:100%;
	background-color:white;
	transition:transform 0.5s;
	padding-left:5px;
	padding-right:5px;
}
#main-1{/****************************HOME*/
}
	#main-contact{
	}
	#main-video{
		display:block;
		margin:0 auto;
		margin-top:20px;
		margin-bottom:20px;
		width:100%;
		max-width:640px;
		height:auto;
		border-radius:10px
	}
#main-2{/****************************SERVICES*/
}
	.collage-picture-container{
		display:inline-block;
		width:49%;
		font-size:0;
		/*box-shadow:inset 0px 0px 20px 5px #fff;*/
		padding:2px;
		background-color:white;
	}
	.collage-picture{
		width:100%;
		padding-bottom:70%;
		background-position:center;
		background-size:cover;
		border-radius:20px;
	}
	.service-container{
		font-size:120%;
		margin-bottom:10px;
	}
	.infobox{
		display:inline-block;
		width:25%;
		padding-bottom:25%;
		margin-right:10px;
		margin-left:10px;
		background-size:cover;
		background-position:center;
		overflow:hidden;
		border-radius:50%;
		vertical-align:middle;
		background-color:grey;
	}
	.infobox-text{
		display:inline-block;
		width:60%;
		vertical-align:middle;
	}
		.infobox-opacity-overlay{
			position:absolute;
			width:100%;
			padding-bottom:100%;
			opacity:0.4;
			background-color:#505050;
			border-radius:0px 40px 0px 0px;
		}
	.service-h2{
		font-size:130%;
		font-weight:bold;
		padding-right:20px;
		padding-top:5px;
	}
	.infobox-title{
		font-family:logo;
		font-size:150%;
	}
	.infobox-hr{
		margin-top:0px;
	}

#main-3{/****************************ABOUT*/
}
	.about-photo{
		background-color:red;
		display:inline-block;
		width:50%;
		padding-bottom:40%;
		margin:5px;
		background-size:cover;
		background-position:center;
	}
#main-4{/****************************IMAGES*/
}
	#instagram-feed{
		width:100%;
		font-size:0%;
	}
	.instagram-image-container{
		display:inline-block;
		width:33.3%;
		padding:10px;
	}
	.instagram-image{
		position:relative;
		width:100%;
		padding-bottom:100%;
		/*box-shadow:0px 0px 5px 0px #b0b0b0;*/
		background-size:cover;
		cursor:pointer;
	}
		.instagram-image-icon{
			position:absolute;
			top:0px;
			right:0px;
			width:48px;
			height:48px;
			/*drop shadow is lagging everything out
			background-position:center;
			background-size:50%;
			background-repeat:no-repeat;
			background-color:black;
			
			-webkit-filter: drop-shadow(0px 0px 10px #000);
			filter: drop-shadow(0px 0px 10px #000);
			*/
		}
	.instagram-video > video{
		display:block;
		margin:0px;
		padding:0px;
	}
	.instagram-video{
		font-size:0px;
		width:100%;
		height:100%;
	}
	
#main-5{/****************************ESTIMATES*/
}
	#form-container{
		display:block;
		margin-top:10px;
		padding:10px;
		border-radius:10px;
		width:70%;
		margin:0 auto;
		text-align:center;
		/*could use some color here
		background-image:url('images/pine_scaled.png');
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		*/
	}
	.form-style{
		margin-top:2px;
		border:1px solid;
		border-color:#000000;
		padding:5px 10px 10px 5px;
		border-radius:5px;
		font-size:150%;
		font-family:main;
		width:100%;
		background-color:#efefef;
	}
	.file-button-wrapper{
		width:32%;
		padding:1px;
		position:relative;
		overflow:hidden;
		display:inline-block;
	}
	.file-button{
		position:relative;
		width:100%;
		padding-bottom:100%;
		margin:1px;
		background-color:#efefef;
		border:2px dashed;
		border-color:black;
		background-image:url('images/upload.png');
		background-size:25%;
		background-position:center;
		background-repeat:no-repeat;
	}
	.label-button{
		display:inline-block;
		width:32%;
		padding-bottom:32%;
		margin:1px;
		background-color:#efefef;
		border:2px dashed;
		border-color:black;
		background-image:url('images/upload.png');
		background-size:25%;
		background-position:center;
		background-repeat:no-repeat;
		cursor:pointer;
	}
	.image-preview{
		display:inline-block;
		font-size:0%;
		margin:1px;
		width:32%;
		padding-bottom:32%;
		background-position:center;
		background-size:cover;
		cursor:pointer;
		background-color:#a0a0a0;
	}
	.image-preview:hover{
		background-image:url('images/close.png') !important;
		background-size:64px 64px !important;
		background-repeat:no-repeat !important;
	}
	#estimate-submit{
		display:inline-block;
		color:#000000;
		padding:10px 20px 10px 20px;
		font-size:200%;
		font-family:main;
		border:1px solid;
		border-color:#000000;
		background-color:#efefef;
		border-radius:5px;
		cursor:pointer;
		box-shadow:inset 0px -20px 20px 0px #c0c0c0;
	}
	#estimate-error{
		display:none;
		width:100%;
		padding:10px;
		margin-top:10px;
		margin-bottom:10px;
		text-align:left;
		border-radius:10px;
		background-color:#ffbaba;
		color:#d8000c;
		font-size:120%;
	}
#main-6{/****************************CONTACT*/
}
#fake-page-top{
	width:100%;
	max-width:960px;
	height:60px;
	margin:0 auto;
	background-color:#ffffff;
}
#fake-page-bottom{
	width:100%;
	max-width:960px;
	height:150px;
	margin:0 auto;
	margin-bottom:-150px;
	background-color:#ffffff;
}
#main{
	position:relative;
	width:100%;
	max-width:960px;
	background-color:white;
	margin-left:auto;
	margin-right:auto;
	padding-left:5px;
	padding-right:5px;
	font-family:main;
	transition:0.5s;
	overflow:hidden;
}
	.copy-thin{
		width:100%;
		text-align:center;
		font-family:main;
		padding:10px 25% 20px 25%;
		font-size:170%;
	}
	.copy-thick{
		display:inline-block;
		text-align:left;
		font-family:main;
		padding:10px;
		font-size:170%;
	}
	.p-container{
		width:100%;
		text-align:center;
	}
	.icon-container{
		width:100%;
		text-align:center;
	}
	.icon-with-caption{
		padding:5px;
		display:inline-block;
		width:24%;
		text-align:center;
		vertical-align:top;
		font-weight:bold;
		font-family:main;
	}
		.circle-icon{
			display:inline-block;
			width:100%;
			padding-bottom:100%;
			margin-bottom:5px;
			background-size:cover;
			background-position:center;
			border-radius:50%;
			box-shadow:0px 0px 5px 0px #b0b0b0;
		}
#footer{
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	/*height:4em;*/
	background-color:#505050;
	box-shadow:0px -5px 10px 0px #a0a0a0;
	text-align:center;
	padding-bottom:10px;
	padding-top:10px;
	color:#ffffff;
}
	.footer-third{
		display:inline-block;
		width:25%;
		text-align:center;
		padding-left:10px;
		padding-right:10px;
		padding-bottom:5px;
		vertical-align:top;
	}
	
#splash{
	display:none;
	position:fixed;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	padding-top:70px;
	padding-bottom:70px;
}
	#splash-bg{
		position:absolute;
		top:0%;
		left:0%;
		width:100%;
		height:100%;
		background-color:#000000;
		opacity:0.9;
	}
	#splash-caption{
		position:absolute;
		top:30px;
		left:30px;
		right:70px;
		font-family:main;
		color:#ffffff;
		height:60px;
	}
	#splash-content-video{
		position:absolute;
		z-index:1;
		width:100%;
		max-width:612px;
		height:auto;
		top:50%;
		left:50%;
		-webkit-transform:translate(-50%,-50%);
		transform:translate(-50%, -50%);
	}
		#splash-content-video-player{
			/*
			max-width:100%;
			max-height:100%;
			*/
			width:100%;
			height:auto;
			background-color:none;
		}
	#splash-content-image{
		/*this works but on larger screens image will strech past its actual size
		position:absolute;
		top:70px;
		left:70px;
		right:70px;
		bottom:70px;
		*/
		position:relative;
		height:100%;
		max-width:612px;
		margin:0 auto;
		background-image:url('images/3.jpg');
		background-size:contain; 
		background-repeat:no-repeat;
		background-position:center;
		z-index:1;
	}
		#splash-img{
			width:100%;
			height:auto;
		}
	#splash-close{
		position:absolute;
		top:30px;
		right:30px;
		width:30px;
		height:30px;
		cursor:pointer;
		background-image:url('images/close.png');
		background-size:100%;
		background-position:center;
		z-index:2;
	}
	#splash-carousel-left{
		position:absolute;
		visibility:hidden;
		z-index:2;
		bottom:50%;
		left:0px;
		width:64px;
		height:64px;
		-webkit-transform:translateY(-50%);
		transform:translateY(-50%);
		cursor:pointer;
		background-image:url('images/left-arrow.png');
	}
	#splash-carousel-right{
		position:absolute;
		visibility:hidden;
		z-index:2;
		bottom:50%;
		right:0px;
		width:64px;
		height:64px;
		-webkit-transform:translateY(-50%);
		transform:translateY(-50%);
		cursor:pointer;
		background-image:url('images/right-arrow.png');
	}
	
#loading{
	display:none;
	position:fixed;
	z-index:10;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	background-color:#ffffff;
	background-image:url('images/loading.png');
	background-size:480px 120px;
	background-position:center;
	background-repeat:no-repeat;
	transition:opacity 1s;
}
		
/*MEDIA QUERIES*/

@media only screen and (max-width: 890px){
	#header{
		display:none;
	}
	#mobile-menu{
		display:block;
	}
	#header-mobile{
		display:block;
	}
	#main{
		padding-left:5px;
		padding-right:5px;
	}
	#fake-page-top{
		height:20px;
	}
	.copy-thin{
		padding:20px 5px 20px 5px;
		font-size:130%;
	}
	p{
		width:100%;
	}
	.about-photo{
		width:100%;
		padding-bottom:80%;
		margin:5px 0px 5px 0px;
	}
	.instagram-image-container{
		width:50%;
		padding:1px;
	}
	.instagram-image-icon{
		width:32px;
		height:32px;
	}
	#form-container{
		width:100%;
	}
	#footer{
		/*height:8em;*/
	}
	.footer-third{
		width:100%;
	}
	#splash-caption{
		top:2px;
		left:2px;
	}
	#splash-close{
		top:2px;
		right:2px;
	}
	#splash-bg{
		opacity:0.99;
	}
	#splash-carousel-left{
		bottom:0%;
	}
	#splash-carousel-right{
		bottom:0%;
	}
	#splash-caption{
		overflow-y:scroll;
	}
	.infobox{
		width:100%;
		padding-bottom:70%;
		border-radius:0;
		margin:0px;
		margin-bottom:5px;
	}
	.infobox-text{
		width:100%;
	}
}
/***************************************MENU CONTAINER STEPS**/
@media only screen and (max-width: 1350px){
	#menu-container{
		width:500px;
		height:100px;
	}
	#menu-container-background{
		height:100px;
	}
}
@media only screen and (max-width: 1090px){
	#menu-container{
		height:150px;
		width:320px;
	}
	#menu-container-background{
		height:150px;
	}
}