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


/*GENERAL STYLES*/
body {
	/*background-image: url(images/light_fence_blur-49.jpg);*/
	background-color: #A49682;
	margin: auto;
}
header {
	/*padding: 5px;*/
	width: 100%;
	height: auto;
	background-color: #A49682;
	background-image:url(images/header_background_mtn.JPG);
	background-position: center 37%;
	background-size: cover;
	position: fixed;
	border-bottom: 3px solid #000000;
}

footer {
	text-align: center;
	margin: 3vh;
	/*border: 3px solid #000000;*/

}

.wood_logo {
	width: auto;
	height: 8vh;
	border: 2px solid #000000;
}

.intro {
	text-align: center;
	padding: 2vh;
}
.quote {
	text-align: center;
}
.intro p {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 2.5vh;
	color: #000000;
	padding: 0 1%;
}
#intro_title {
	font-size: 2.5vh;
	text-decoration-line: underline;
	font-weight: 700;
}
.logo {
	width: auto;
	height: 6vh;
	
}

/*NAVBAR STYLES------------------------------------------------------------------------------------*/


nav {
    display: table;
    border-top: 1px solid #357F7F;
    border-bottom: 1px solid #357F7F;
}
nav ul {
    display: table-row;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1;
}
nav ul a {
    display: block;
    color: black;
    text-decoration: none;
    padding: 10px 15px;
    font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 2vh;
}
nav ul li {
    position: relative;
    display: inline-block;
    display: table-cell;
    width: 1%;
    list-style-type: none;
    text-align: center;
	border: 1px solid #000000
}
nav ul li:hover {
    background-color: #357F7F;
}
nav ul li:hover a {
    color: white;
}
nav ul ul{
    display: none;
    position: absolute;
    background: rgba(0,0,0,0.4);
    width: 100%; 
}
nav ul ul li {
    width: 100%;
    display: inline-block;
}
nav ul li:hover > ul {
    display: block;
}


/*END OF NAVBAR STYLES------------------------------------------------------------------------------------*/


.spacer {
	width: 100%;
	height: 12vh
}
.responsive {
	clear: left;
	display: inline-block;
	border-style: solid;
    padding: 1vh;
    width: 20%;
	margin: 1vh;
	background-color: #eeeeee
    
/*  padding: 1vh;*/
/*  float: left;*/
/*  width: 23%;*/
/*	border:2px solid #000000;*/
/*  margin: 1vh;*/
}

#construction {
	color: red;
	background-color: yellow;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	border: 4px dashed red;
}


/*-----------------------------------------------------------------*/
/*GALLERY STYLE*/

.gallery {
  /*background-color: #4D1C9;*/
	border: 2px solid #4D1C92;

}
.desc {
    padding-top: 3px;
    text-align: center;
	font-size: 1.5vh;
	font-weight: bold;
	color: #000000;
	width: auto;
	/*border:2px solid #000000;*/
	/*background-color: #B1B1B1;*/
}

.gallery img{
    width: 100%;
    height: auto;
	border:2px solid #000000;
	margin: 0 auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/*------------------------------------------------------------------*/
/*CATALOG STYLES*/

.responsive_cat {
	clear: left;
	display: inline-block;
	border-style: solid;
    padding: 1vh;
    width: 99%;
	margin: 1vh;
	background-color: #eeeeee
	
}

.cat_item_name {
	padding: 3px;
	text-align: center;
	width: 300px;
	font-size: 2vh;
	font-weight: bold;
	color: #000000;
	border:2px solid #000000;
	background-color:#B1B1B1;
}

.cat_img {
	padding: .2vh;
	border-style: solid;
	float: left;
	margin-right: 1vh;
}

.cat_desc {
	font-size: 2vh;
	margin: 1vh;
}

#custom {
	font-size: 2vh
}
/*-------------------------------------------------------------------*/
/*RESPONSIVE STYLES*/
@media only screen and (max-width: 1600px){
    .responsive {
        width: 25%;
        margin: 6px 0;
    }
	.spacer {
		width: 100%;
		height: 15vh
	}
	.site-nav ul li {
		font-size: 3.8vh;
	}
	.intro p {
		font-size: 2.7vh
	}
	.desc {
		font-size: 2vh;
	}
}

@media only screen and (max-width: 1280px){
    .responsive {
        width: 25%;
        margin: 6px 0;
    }
	.spacer {
	width: 100%;
	height: 16vh
	}
	.site-nav ul li {
	font-size: 3.3vh;
	}
	.intro p {
		font-size: 2.4vh
	}
	.desc {
		font-size: 1.8vh;
	}
}

@media only screen and (max-width: 1024px){
    .responsive {
        width: 50%;
        margin: 6px 0;
    }
	.spacer {
	width: 100%;
	height: 16vh
	}
	.site-nav ul li {
	font-size: 2.8vh;
	}
	.intro p {
		font-size: 2.2vh
	}
	.desc {
		font-size: 1.5vh;
	}
}

@media only screen and (max-width: 640px){
    .responsive {
        width: 50%;
        margin: 6px 0;
    }
	.spacer {
	width: 100%;
	height: 15vh
	}
	.site-nav ul li {
	font-size: 1.8vh;
	}
	.intro p {
		font-size: 2vh
	}
	.desc {
		font-size: 1.25vh;
	}
}

@media only screen and (max-width: 400px){
    .responsive {
        width: 100%;
    }
	.spacer {
		width: 100%;
		height: 15vh
	}
	.site-nav ul li {
	font-size: 1.8vh;
	}
	.intro p {
		font-size: 1.8vh
	}
	.desc {
		font-size: 1vh;
	}
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>