/* ==========================================================================

	Page Layout and Structure

   ========================================================================== */

/* Site Base */

html { background-color: #565656; }

body { background:url(../img/area/bg_body.png) fixed repeat 0 0; }



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

	Primary Containers

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

#contain {

	position:relative;

	width:975px;

	min-height:1000px; margin:0 auto;

	padding:40px 0 430px 0;

	background-color:#fff;

	box-shadow:0px 10px 20px #7f8083;

}

#header {

	position:relative;

	height:150px; padding:0 35px 0 25px;

	background:url(../img/area/bg_header.jpg) no-repeat 0 0;

}



#content {

	position:relative;

	min-height:500px;

	padding:25px 50px;

}

#nav-main {

	position:fixed; z-index:1000;

	top:0; height:40px; left:0; right:0;

	background-color:#000;

}

#footer {

	position:absolute;

	left:0; right:0; bottom:0; min-height:250px;

	background:#231F20 url(../img/area/bg_footer.png) repeat-x 0 0;

}

#footer .inner  {

	padding:15px 0;

	border-bottom:1px solid #565656;

	background:url(../img/area/bg_footer-sep.png) no-repeat center 60px;

}



#credits { width:975px; margin:0 auto; }





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

	Slider & Prezo Banners

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

#slider {

	position:relative;

	height:350px;

	padding-bottom:16px;

	background:url(../img/slider/bg_slider.png) no-repeat center bottom;

}

#carousel {

	position:relative;

	height:150px; overflow:hidden;

	padding:12px 32px 13px 32px;

	background:url(../img/slider/bg_carousel.png) no-repeat 0 0;

}

#prezo {

	position:relative; z-index:0;

	height:350px;

	padding-bottom:16px;

	background:url(../img/slider/bg_slider.png) no-repeat center bottom;

}





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

	Area Separators

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

.inner  { position:relative; width:875px; margin:0 auto; }

.row    { display:block; float:none; clear:both; }



.column { display:block; float:left; min-height:50px; }

.column.one-half    { width:425px; }

.column.one-third   { width:275px; }

.column.two-third   { width:550px; }

.column.one-quarter { width:200px; }

.column.two-third.left  { width:600px; margin:0; padding-right:15px; }

.column.one-third.right { width:245px; margin:0; padding:0; }



.column.first  { margin-left:0; }

.column.last   { margin-right:0 !important; }

.column.left   { margin-right:25px; }

.column.right  { float:right; }

.column.mh500  { min-height:500px; }

.column.vsep   { border-right:1px solid #ccc; }

.column.one-half.vsep  { width:400px; padding-right:15px; margin-right:15px !important; }



/* Self-clearing container row */

.row:before, .row:after { content: " "; display: table; }

.row:after { clear: both; }

.lt-ie8 .row { *zoom: 1; }

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
	display:none;
	position:absolute;
	width:100%;
	max-width:100%;
	top:0;
	z-index:7777;
}
.topper {/*position:fixed;*/ width:100%; height:48px; background-color:#333; z-index: 9999;}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: none;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #b11116;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

.mobile {display:none;}
@media only screen and (max-width: 990px) {
	.mobile {display:block;}
	.desktop {display:none !important;}
	#contain {max-width:975px;width:100%;padding:50px 0 0 0;}
	#content {padding:10px;}
	#footer{position:relative;}
	#header {height:auto; background:url(../img/area/bg_header.jpg) repeat-y 0 0; display:inline-block; width:100%;}
	#header .button.contact, #header .phone {position:relative !important; top:auto !important; right:auto !important; text-align:left !important; margin:10px;}
	#header h1, #header h2 {margin:0 !important; padding:5px !important; text-align:left !important;}
	#header hgroup {width:100% !important; height:auto !important;}
	#header .logo {float:left; position:relative !important; top:auto !important; left:auto !important;}
	.mologo {max-width:270px;}
	.gologo {display:block !important; padding:0!important; float:left !important;}
	.w3-modal-content {}
	.benefits {margin-bottom:20px;}
	#slider, #carousel {display:none;}

	.column.two-third.left, .column.one-half, #content .properties li {width:100% !important; padding:0 !important; min-height:auto !important;}
	#credits, .inner {width:100%;}
	#content .properties li p, #content .properties li h4 {float:none !important; width:100% !important;}
	#content .intro p, .column.two-third.left {padding:0px !important;}
	/*.product-data td {display:block;}*/
	.product-data{font-size:x-small;}
	.product-data td.diag a.thumb img {width:75%;}
	.column img, #content .aligncenter img {width:100%;}

	.column {min-height:auto; float:none !important;}
	#footer .one-half.right h4, #footer .one-half.first h4, #footer .social {margin-left:15px !important;}
	#footer .inner {background:#231F20;}
	.copyright {float:none !important; text-align:center !important;}
	.buybutton, .request, .hangoutbutton {position:relative !important; margin:10px 0 !important; top:0!important;}
	#content h1{line-height: 1;}

	#prezo {height:auto;}
	#prezo img {width:100%; position:relative !important;}
	#content .properties li {width:100%; position:relative !important; background:none !important;}

	#content .tools li {width:auto !important;}
	#content .tools .item .thumb {max-width:50%;width:auto !important;height:auto !important;}
	.discon img {width:auto;}

	.column.two-third {width:100% !important; float:none !important;}
	.techbgr {padding:15px 0 !important; height:auto !important;}
	.techbgr p {padding:10px;}

	#benefits .right {display:none;}
	#content ul.benefit {padding:0 !important; background:none !important;}

	#content .pdf-link > img {width:100% !important; height:auto !important;}

	#slider .slides .content {position:relative !important; width:100% !important; padding:10px !important; left:0 !important; top:0!important;}
	#slider {height:auto;}

	table.species-wood .group {width:20%!important;}
	table.species-wood td dt {width:50% !important;}
	table.species-wood td dd {width:40% !important;}

	#techinfo .right {margin-top:20px;}
	#techinfo .column.one-third {width:100% !important; margin: 0 !important;}

	.formcontent {padding:0 !important;}
	.ivaform .item .info {width:auto !important;}
	.ivaform .item .option {width:90% !important;}

	.rec_lens{visibility:hidden; display:none;}

	#nav-main {position:absolute;}
	topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }

	/*.topnav.responsive {position: relative;}*/
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}