@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic);


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, li,
dl, dt, dd, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    font-size:100%;
    
    
}

/* end reset */




/*sets box sizing to be intuitive. to remove for an element desized to compensate add box-sizing: content-box; to the class or id*/

html {

  box-sizing: border-box;

}

*:after {

  box-sizing: inherit;

}

*:before {

  box-sizing: inherit;

}

* {

  box-sizing: inherit;

}

/* general styles */

body { 
	background-color:#FFFFFF; 
	background-image:url(image.png);  
	font-family: 'Lato', sans-serif;
	}

table { 
	border:none;
	}

p { 
	margin-bottom: 15px; /* space after paragraph */ 
	}

ul { 
	margin-left:20px;
	}
	
li { 
	margin-bottom: 10px; /* space between list items */
	 }
 
ol { 
	margin-left:20px; 
	}


h1 { margin-bottom: 20px; color: #4497B0; font-family: Arial, Calibri, Helvetica, sans-serif; font-size: 18pt; font-weight: bold;}
h2 { margin-bottom: 10px; color: #2B5E6F; font-family: Arial, Calibri, Helvetica, sans-serif; font-size: 16pt; font-weight: bold;}
h3 { margin-bottom: 10px; color: #A3D063; font-family: Arial, Calibri, Helvetica, sans-serif; font-size: 14pt; font-weight: bold;}
h4 { margin-bottom: 10px; color: #2B5E6F; font-family: Arial, Calibri, Helvetica, sans-serif; font-size: 12pt; font-weight: bold;}
h5 { margin-bottom: 10px; color: #2B5E6F; font-family: Arial, Calibri, Helvetica, sans-serif; font-size: 11pt; font-weight: bold;}

/* links */

a {color: #333; background-color: transparent; text-decoration: underline}
a:link {color:#3b2314;}      /* unvisited link */

a:hover {color:##3b2314; text-decoration: none;}  /* mouse over link */


#header {
	padding:10px;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(left,  #ffffff 0%, #efefef 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #ffffff 0%,#efefef 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #ffffff 0%,#efefef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=1 ); /* IE6-9 */
	

}

.slogan  { height:98px;color:#3b2314;text-transform:uppercase;font-size:23px;float:right;vertical-align:bottom;padding-bottom:20px;padding-top:10px;font-family:Georgia,Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);}

#menu {background-color:#8bc53f;padding:10px;-webkit-box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.36);
-moz-box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.36);
box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.36);}
#menucontent {color:#ffffff;text-shadow: 0px 0px 5px rgba(150, 150, 150, 1);}
#menucontent a {text-transform:uppercase;}
#menucontent a:hover {text-transform:uppercase;}

#photo {background-image:url(../images-layout/header-exterior.jpg);background-repeat:no-repeat;background-size:cover;}
#photoone {background-image:url(../images-layout/header-projectone.jpg);background-repeat:no-repeat;background-size:cover;}
#phototwo {background-image:url(../images-layout/project2top.jpg);background-repeat:no-repeat;background-size:cover;}
#photothree {background-image:url(../images-layout/project-three.jpg);background-repeat:no-repeat;background-size:cover;}
#photofour {background-image:url(../images-layout/project-four.jpg);background-repeat:no-repeat;background-size:cover;}
#photo-summit-ridge {background-image:url(../images-layout/summit-ridge.jpg);background-repeat:no-repeat;background-size:cover;}

#photointeriorportfolio {background-image:url(../images-layout/interior-portfolio-header.jpg);background-repeat:no-repeat;background-size:cover;}
#photo img {display:block;}
#photocontent {height:460px;}
@media screen and (max-width: 1020px) { #photocontent {height:300px;} }
@media screen and (max-width: 620px) { #photocontent {height:150px;} }

#content {padding:20px;background-color:#23150d;background-image:url(../images-layout/contentbg.jpg);background-repeat:no-repeat;background-size:cover;border-top:4px solid #3b2314;}
#contentarea {color:#ffffff;}
#contentarea a {color:#ffffff;}
#contentarea a:hover {color:#ffffff;}
#contentarea p {text-align:left; font-size:18px;}

#contact {background-color:#1a1a1a;padding:20px;border-top:1px solid #3a3a3a;}
#contactcontent {color:#ffffff;font-size:33px;}
#contactcontent a { color:#ffffff;font-size:33px; text-decoration:none; }

#footer {padding:20px;}
#footercontent {color:#3b2314;font-size:14px;}

.homeportals {display:inline-block;float:right;width:165px;}
@media screen and (max-width: 1100px) {.homeportals {float:none;}}

.hometext {display:table-cell;padding-right:20px;}
@media screen and (max-width: 1100px) {.hometext {width:100%;display:table;padding-top:40px;clear:both;}}

@media screen and (max-width: 1100px) {.portalswrap {width:50%;}}


.footerlinkbox { display:inline-block;width:20%;min-width:150px;float:right;}
@media screen and (max-width: 950px) { .footerlinkbox {float:none;} }
@media screen and (max-width: 742px) { .footerlinkbox {width:100%;} }
@media screen and (max-width: 600px) { .footerlinkbox {text-align:center;margin:0px auto;} }


.footerlogo {float:left;margin-right:30px;}
@media screen and (max-width: 600px) { .footerlogo {float:none;display:block;margin:0px auto;} }

.footercopy {display:inline-block;width:20%;min-width:150px;float:right;}
@media screen and (max-width: 600px) { .footercopy {float:none;display:block;margin:0px auto;padding-top:20px;padding-bottom:20px;text-align:center;} }
.footercopy a {font-size:11px;}



/*mobile menu*/


#nav-wrap {
	margin-top: 0px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}






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

	/* nav-wrap */
	#nav-wrap {
		position: relative;
	}

	/* menu icon */
	#menu-icon {
		color: #fff;
		width: 100px;
		height: 40px;
		background: #8bc53f url(../images/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: none;
		display: block; /* show menu icon */
		font-size:16px;
	}
	#menu-icon:hover {
		background-color: #000000;
	}
	#menu-icon.active {
		background-color: #8bc53f;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 38px;
		/*width: 160px;*/
		z-index: 10000;
		padding: 5px;
		background: #8bc53f;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #ffffff;
		border: none;
		text-transform:uppercase;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #3b2314;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}
	
	ul.dropdown ul { visibility:visible !important;}
	
	ul.dropdown li {padding:0px !important;}

}

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

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}