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

 @media only screen and (max-width: 1411px){
img.content_img {
 	margin-bottom:10%;
 	}
 	
 }

 @media only screen and (max-width: 1366px){
 .leftpic {
	width:350px;
}

.rightpic {
	width:350px;
}

.page {
	margin-left: 110px !important;
}
 
 }
 
  @media only screen and (max-width: 1372px) and (min-width: 1026px ) {
	.content_mob {
		margin-bottom: 15% !important;
	}
 
 }

 @media only screen and (max-width: 1026px){
	 
	 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	height:auto;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */

body {
    position:absolute;
	background:url(../images/treehugger_bg.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: fixed !important;
	background-size:cover;
	margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: center; /* Centers the page content container in IE 5 browsers. */
	height:auto;
	width:100%;
	/*max-height:1300px;*/
}

#main	{
	display:block;
	margin:0 auto;
	width:100%;
	min-width:350px;
	max-width:100%;
	height:auto;
	background-color:#faffe1;
}

#header	{
	width:100%;
	text-align:center;
	/*z-index:300;*/
	height:20%;
	background:#000;
	background:linear-gradient(to top, rgba(255,255,255,.3) 3%, rgba(0,0,0,0) 25%), #000;
	position:relative;
}

#main_logo	{
	width:100%;
	margin:0;
	display:block;
	float:none;
	
	}

img.logo	{
	width:75%;
	min-width:100px;
	height:auto;
}

#tagline	{
	width:100%;
	height:auto;
	padding:0;
	padding-top:15px;

}

img.tagline	{
	
	width:75%;
	height:auto;
}

img#floor_img	{
	display:none;
}

.ie10 img#floor_img	{
	
	display:none;
	
	
}



/*----------------------------------------------------- NAV ---------------------------------------------------------*/

li a	{
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:.7em;
	font-weight:500;
}

#main_nav	{
	float:none;
	width:80%;
	height:auto;
	text-align:center;
	display:block;
	padding:0;
	margin:0 10%;
}

#main_nav ul	{
	margin-top:0 !important ;
	width:100%;
	height:auto;
	padding:0;
	float:none;
	
	list-style:none;
	text-decoration:none;
	-webkit-padding-start:0;
}

#main_nav ul li	{
	display:inline;
	padding:15px 18px;
	float:none;
	margin-top:2% !important;
}

#main_nav ul li a	{
	text-decoration:none;
	color:#FFFFFF;
}

/*----------------------------------------------------- END NAV ---------------------------------------------------------*/

img.img_100	{
	width:100%;
	height:auto;
}

img.products	{
	border:#FFFFFF 5px solid;
	-webkit-transition: all .4s ease-in-out;
	
}

img.products:hover	{
	-webkit-transform: scale(1.1);
		
}

.btn	{
	float:left;
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:1em;
	font-weight:500;
	width:110px;
	min_width:100px;
	padding:5px 10px;
	border:solid 2px #FFFFFF;
	background-color:rgba(0,204,153,.7), #009966;
	margin-left:5px;
}

.btn:hover	{
	background-color:#009966;
}

.btn2	{
	float:left;
	font-family: 'Roboto', sans-serif;
	color:#666666;
	font-size:1em;
	font-weight:500;
	width:110px;
	min_width:100px;
	padding:5px 10px;
	border:solid 2px #666666;
	background-color:rgba(0,204,153,.7), #666666;
	margin-left:5px;
	margin-top:-15px;
}

.btn2:hover	{
	background-color:#009966;
	color:#fff;
}

#products	{
	position:relative;
	background:url(../images/wood_bg.jpg) no-repeat;
	background-size:cover;
	max-width:100%;
	height: 450px;
	padding:0 5%;
	overflow:hidden;
/*	margin-top:-5%;*/
	z-index:100;
	clear:both;
}

#product_detail_first, #product_detail_last	{
	width:22.5%;
	/*max-width:260px;*/
	float:left;	
}

#product_detail_first	{
	margin-right:3.3333%;
}

p.product_description	{
	text-align:left;
	color:#FFFFFF;
	margin-left:5px;
}

#product_detail_first h3, #product_detail_last h3	{
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:18px;
	font-weight:500;
	margin-top:10px;
	margin-bottom:0px;
	margin-left:5px;
	text-align:left;
}


#green_bar	{
	width:100%;
	background-color:#009966;
	background:linear-gradient(to right, rgba(0,0,0,.7) 3%, rgba(0,153,153,0) 45%), linear-gradient(to left, rgba(0,0,0,.7) 3%, rgba(0,153,153,0) 45%), #009966;
	
	/*background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0) 25%), linear-gradient(to left, rgba(0,0,0,.4), rgba(0,0,0,0) 25%),url(../images/cyan_bg.jpg) repeat ;*/
	height:12%;
	margin-left:0%;
	
	font-size:1em;
	
}

#green_bar h1, #green_bar h1 a{
	font-family: 'Roboto', sans-serif;
	color:#fff;
	
	font-weight:700;
	text-decoration:none;
	letter-spacing:2px;
}

#green_bar a:hover	{
	color:#666;
	text-decoration:underline;
}

#content	{
/*	position:relative;*/
	/*padding:20px 20px;*/
	width:100%;
	height:auto;
	margin: 0;
	/*margin-left:30%;*/
    padding-top: 5%;
	background-color:#faffe1;
	background:linear-gradient(to bottom, rgba(0,0,0,.3) 1%, rgba(0,0,0,0) 6%), linear-gradient(to top, rgba(0,0,0,.3) 1%, rgba(0,0,0,0) 6%), #faffe1;
}

#content h1	{
	float:left;
	font-family: 'Roboto', sans-serif;
	color:#009966;
	font-weight:700;
	font-size:1.7em;
	text-decoration:none;
	letter-spacing:;
/*	padding-left:35%;*/
	
}

#content p	{
/*	padding-left:35%;*/
	float:left;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:.9em;
	color:#666666;
	width: 50%;
    text-align: left;
	line-height:1.8em;
	margin-bottom:3%;
}

img.content_img	{
	/*position:absolute;
	top: 1%;
	left:5px;*/

	float:left;
	width:25%;
	height:auto;
	min-width:200px;
	margin: 0;
	margin-left: 8%;
	margin-right: 5%;
	margin-bottom:20%;
	border:5px solid #009966;	
}

img.content-mob {

}

#sustain	{
	position:relative;
	max-width:100%;
	height: auto;
	padding-bottom:0;
	padding:0 5%;
	overflow:hidden;
/*	margin-top:-5%;*/
	z-index:100;
	clear:both;
}

#sustain_detail_first, #sustain_detail_last	{
	width:22.5%;
	/*max-width:260px;*/
	float:left;
}

#sustain_detail_first	{
	margin-right:3.333%;
}

p.sustain_description	{
	text-align:left;
	color:#666666;
	margin-left:0;
	width:100%;
}

#sustain_detail_first h3, #sustain_detail_last h3	{
	font-family: 'Roboto', sans-serif;
	color:#009966;
	font-size:18px;
	font-weight:500;
	margin-top:10px;
	margin-bottom:0px;
	margin-left:5px;
	text-align:left;
	
	} 

 iframe{
 
 height: 302px !important;
 
 }
 
 .page {
margin-left: 39px !important;
}


/*------------------------------ FOOTER ------------------------------------------------*/

#footer	{
	width:100%;
	margin-left:0%;
	height: auto;
	background-color:#000;
	background:linear-gradient(to top, rgba(255,255,255,.3) 3%, rgba(0,0,0,0) 25%), #000;

	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-weight:400;
	font-size:.8em;
}

.col1	{
	width:30%;
	margin-right:5%;
	float:left;
	text-align:left;
	padding:15px 20px 0px 20px;
	box-sizing:border-box;
	
}

.col2	{
	width:30%;
	margin-right:5%;
	float:left;
	text-align:left;
	padding:15px 20px 0px 20px;
	box-sizing:border-box;
	
}

.col3	{
	width:30%;
	
	float:left;
	text-align:right;
	padding:15px 50px 0px 20px;
	box-sizing:border-box;
	
}

.col1 h1, .col2 h1, .col3 h1	{
	text-align:left;
	color:#096;
	margin-bottom: 10px;
	padding-left: 40px;
	font-family: 'Roboto', sans-serif;
	font-weight:700;
	font-size:1.8em;
}

.col3 h1	{
	text-align:right;
}

.col1 ul, .col2 ul, .col3 ul	{
	list-style:none;
	color:#fff;
}

.col1 ul li, .col2 ul li, .col3 ul li	{
	margin-bottom:8px;
}

#copyright	{
	width:100%;
	text-align:center;
	padding-bottom:10px;
}
	 
 }
 
 @media only screen and (max-width: 768px) and (max-height: 1024px) {
 
 iframe {
top: 26px;
left: -8px;
height:1034px !important;
}
 
.videocaption {
top: 19px;
left: -54px;
}
 
 .woodfloor {
height: 2228px;
}

#content p {
left: 110px;
}

.videocaption {
left: -4px;
}
 
 .leftpic {
margin-left: 205px;
}
 
 
 .rightpic {
margin-right: 195px;
}

.leftpic {
margin-left: 220px;
}
 
 
 }
 
 
 @media only screen and (max-width: 1026px) and (min-width:756px){

 
 
 }
 
 
 
 
 
 
 
  @media only screen and (max-width: 755px){
	 
	 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	/*height:auto;*/
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
    position:absolute;
	margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: center; /* Centers the page content container in IE 5 browsers. */
	height:auto;
	width:100%;
	/*max-height:1300px;*/
}

#main	{
	display:block;
	margin:0 auto;
	width:100%;
	min-width:350px;
	max-width:100%;
	height:auto;
	background-color:#faffe1;
}

#header	{
	width:100%;
	text-align:center;
	z-index:0;
	height:20%;
	background:#000;
	background:linear-gradient(to top, rgba(255,255,255,.3) 3%, rgba(0,0,0,0) 25%), #000;
	position:relative;
}

#main_logo	{
	width:100%;
	margin:0;
	
	}

img.logo	{
	width:75%;
	min-width:100px;
	height:auto;
}

#tagline	{
	width:100%;
	height:auto;
	padding-top:15px;
	padding-left:0;
	padding-bottom:10%;

}

img.tagline	{
	
	width:75%;
	height:auto;
}

img#floor_img	{
	display:none;
}

.ie10 img#floor_img	{
	
	display:none;
	
	
}



/*----------------------------------------------------- NAV ---------------------------------------------------------*/

li a	{
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:1em;
	font-weight:500;
}

#main_nav	{
	position:relative;
	width:100%;
	height:10%;
	text-align:center;
}

#main_nav ul	{
	margin:0;
	float:none;
	margin-right:15px;
	list-style:none;
	text-decoration:none;
}

#main_nav ul li	{
	display:block;
	padding:15px 18px;
	
}

#main_nav ul li a	{
	text-decoration:none;
	color:#FFFFFF;
}

/*----------------------------------------------------- END NAV ---------------------------------------------------------*/

img.whatwedo {
	width:100%;
	height:auto;
}


img.img_100	{
	width:70%;
	height:auto;
	margin-top:5%;
	margin-right:15%;
	margin-left:15%;
}

img.products	{
	border:#FFFFFF 5px solid;
	-webkit-transition: all .4s ease-in-out;
	
}

img.products:hover	{
	-webkit-transform: scale(1.1);
		
}

.btn	{
	float:none;
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:1em;
	font-weight:500;
	width:70%;
	min_width:100px;
	padding:5px 10px;
	border:solid 2px #FFFFFF;
	background-color:rgba(0,204,153,.7), #009966;
	margin: 3% auto;

}

.btn:hover	{
	background-color:#009966;
}

.btn2	{
	float:none;
	font-family: 'Roboto', sans-serif;
	color:#666666;
	font-size:1em;
	font-weight:500;
	width:80%;
	
	padding:5px;
	border:solid 2px #666666;
	background-color:rgba(0,204,153,.7), #666666;
	margin-left:10%;
	margin-right:10%;
	margin-top:1.5%;
	margin-bottom:5%;
}

.btn2:hover	{
	background-color:#009966;
	color:#fff;
}

#products	{
	position:relative;
	background:url(../images/wood_bg.jpg) no-repeat;
	background-size:cover;
	max-width:100%;
	height: auto;
	/*padding:0 5%;*/
	overflow:hidden;
/*	margin-top:-5%;*/
	z-index:100;
	clear:both;
	padding:0;
	padding-bottom: 10%;
}

#product_detail_first, #product_detail_last	{
	width:100%;
	text-align:center;
	/*max-width:260px;*/
	float:none;	
	display:block;
}

p.product_description	{
	width: 80%;
	text-align: center;
	color: #FFFFFF;
	margin: 2% 10% 0 10%;
}

#product_detail_first h3, #product_detail_last h3	{
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-size:18px;
	font-weight:500;
	margin-top:10px;
	margin-bottom:0px;
	margin-left:5px;
	text-align:center;
}


#green_bar	{
display:none;
	
}

#green_bar h1, #green_bar h1 a{
	display:none;
}

#green_bar a:hover	{
	color:#666;
	text-decoration:underline;
}

#content	{
/*	position:relative;*/
	/*padding:20px 20px;*/
	width:100%;
	height:auto;
	margin: 0;
	padding:0;
	/*margin-left:30%;*/
    padding-top: 5%;
	background-color:#faffe1;
	background:linear-gradient(to bottom, rgba(0,0,0,.3) 1%, rgba(0,0,0,0) 6%), linear-gradient(to top, rgba(0,0,0,.3) 1%, rgba(0,0,0,0) 6%), #faffe1;
}

#content h1	{
	float:left;
	font-family: 'Roboto', sans-serif;
	color:#009966;
	font-weight:700;
	font-size:1.7em;
	text-decoration:none;
	width:80%;
	margin:0 10% 1.2% 10%;
/*	padding-left:35%;*/
	
}

#content p	{
/*	padding-left:35%;*/
	float:left;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:.9em;
	color:#666666;
	width: 80%;
	margin:0 10%;
    text-align: left;
	line-height:1.8em;
	margin-bottom:3%;
}

img.content_img	{
	/*position:absolute;
	top: 1%;
	left:5px;*/
	width:80%;
	margin:0 10%;
	height:auto;
	min-width:200px;
	margin: 0;
	margin-left: 8%;
	margin-right: 5%;
	margin-bottom:5%;
	border:5px solid #009966;	
}


#sustain	{
	position:relative;
	width:100%;
	height: auto;
	/*padding:0 5%;*/
	overflow:hidden;
/*	margin-top:-5%;*/
	z-index:100;
	clear:both;
	padding:0;
	padding-bottom: 10%;
}

#sustain_detail_first, #sustain_detail_last	{
	width:100%;
	text-align:center;
	/*max-width:260px;*/
	float:none;	
	display:block;
	
}



p.sustain_description	{
	width: 80% !important;
	text-align: center !important;
	color: #666666;
	margin: 2% 10% 0 10%;
}

#sustain_detail_first h3, #sustain_detail_last h3	{
	font-family: 'Roboto', sans-serif;
	color:#009966;
	font-size:18px;
	font-weight:500;
	margin-top:10px;
	margin-bottom:0px;
	margin-left:5px;
	text-align:center;
}

/*------------------------------ FOOTER ------------------------------------------------*/

#footer	{
	width:100%;
	height: auto;
	background-color:#000;
	background:linear-gradient(to top, rgba(255,255,255,.3) 3%, rgba(0,0,0,0) 25%), #000;
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-weight:400;
	font-size:.8em;
	margin:0;
	padding:0;
}

.col1	{
	width:100%;
	margin:0;
	float:none;
	display:block;
	box-sizing:border-box;
	text-align:center;
	
	
}

.col2	{
	width:100%;
	margin:0;
	float:none;
	display:block;
	box-sizing:border-box;
	text-align:center;
	
}

.col3	{
	width:100%;
	margin:0;
	float:none;
	display:block;
	padding: 15px 20px 0px 20px;
	box-sizing:border-box;
	text-align:center;
	
}

.col1 h1, .col2 h1, .col3 h1	{
	
	color:#096;
	margin-bottom: 10px;
	text-align:center;
	font-family: 'Roboto', sans-serif;
	font-weight:700;
	font-size:1.8em;
	margin:0;
	padding:0;
}



.col1 ul, .col2 ul, .col3 ul	{
	list-style:none;
	color:#fff;
	text-align:center;
	width:100%;
	-webkit-padding-start:0;
}

.col1 ul li, .col2 ul li, .col3 ul li	{
	margin:0;
	padding:0;
	margin-bottom:8px;
}

.col3 h1	{
	text-align:center;
}

#copyright	{
	width:100%;
	text-align:center;
	padding:10px 0px 10px 0px;
	font-sixe:.3em;
}


html, body	{
	margin:0; 
	padding:0;
}

/*----------------------------------------------MOB MENU--------------------------*/
#main_nav	{
	display:none;
}

#div1
{
	display:block;
	position:fixed;
	font-size:1em;
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-weight:400;
	width: 100%;
    height: 40px;
	background: #000;
    background: rgba(0,0,0,.7);
	text-align:center;
   	padding-top:10px;
}
 
#div2
{
	display:block;
	position:fixed;
	font-size:1em;
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-weight:400;
	width: 100%;
    height: 150px;
    background: #000;
	background: rgba(0,0,0,.7);
	text-align:center;
    color: #fff;
}
#div2.slide
{
    height: 300px;
}
.click
{
    cursor: pointer;
    position: relative;
    z-index: 301;
}
 
.slide
{
    position: absolute;
	color:#fff;
    top: -250px;
    z-index: 300;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
}

.click:focus + .slide
{
    top: 50px;
    -webkit-transition: top 1s;
}

.click:focus
{
    outline: none;
}

/*.slide:hover
{
    top: 80px;
}*/

.slide ul li	{
color:#fff;
margin:10px;	
}

.slide ul	{
	list-style:none;
	-webkit-padding-start:0;
}





	 
 }
 
  @media only screen and (max-width: 600px) and (max-height: 1024px) {
 
.woodfloor {
	height: 472px;
}

.leftpic {
margin-left: 115px;
}

.rightpic {
margin-right: 100px;
}

#content p {
left: 0;
}
 
 
 }
 
 
  @media only screen and (max-width: 320px) and (max-height: 768px) {
 
#content h2 {
font-size: 1.0em;
}
 
 
 .leftpic {
width: 250px;
margin-left: 40px;
}


.rightpic {
width: 250px;
margin-right: 57px;
}

#content p {
left: -21px;
}

.woodfloor {
height: 381px;
}

 
 }