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


html,
body {
	  height: 100%;
	  margin: 0;
	  padding: 0;

}

*{
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	transition-duration:0.5s
}

body {
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../img/hdbg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #000;
}
	
.wrapper {
	display: table;
	width: 100%;
	height: 100%;
}

.menu-container{
	width: 100%;
	max-width: 900px;
	height: 50px;
	margin: 0 auto;
    }
	
.menucontent{
	float: right;		
}


img {
    max-width:100%;
	height:auto;
}

#topadd:hover{
	filter:alpha(opacity=70);
	-moz-opacity: 0.7; 
	opacity: 0.7;
	-khtml-opacity: 0.7;
}
	
.grid-container{
        width: 100%; 
        max-width: 900px;
		margin: 0 auto; 
		height: auto;	  
    }

    /*-- our cleafix hack -- */ 
    .row:before, 
    .row:after {
        content:"";
        display: table ;
        clear:both;
    }

	[class*='col-'] {
        float: left; 
        min-height: 1px; 
        width: 16.66%; 
        /*-- our gutter -- */
        padding: 0; 
    }

    .col-1{ width: 60%;} /*-- >900px = 540px -- */
    .col-2{ width: 40%;} /*-- >900px = 360px -- */
    .col-3{ width: 33.33%;} /*-- >900px = 300px -- */
	.col-4{ width: 50%;} /*-- >8900px = 450px -- */
    .col-5{ width: 100%;} /*-- >900px = 900px -- */

	
.clear{
	 width: 100%;
	 height: 15px;	
}

#endstroke{
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #9a7a51;
	margin: 15px;
}

#fullstroke{
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #9a7a51;
	margin-top: 30px;
	margin-right: 0px;
	margin-bottom: 30px;
	margin-left: 0px;
}

.item{
	padding: 15px;
	margin: 15px;	
}

.mediaitem{
	padding: 15px;
	
}

#transblack{
	background: rgba(0,0,0,0.5);
}

#black{
	background: #000;
}
   
/* sticky footer css */

footer {
	display: table-row;
	height: 1px;
	
}

.content{
	width: 100%; 
    max-width: 900px;
	margin: 0 auto;	
	background-color: #333;
}


/* scale youtube video */

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:0px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* form */


#submitbtn{
	background-image: url(../img/btn_submit1.png);
	height: 30px;
	width: 60px;
	border-style: none;
	cursor: pointer;
}
#submitbtn:hover{
	background-image: url(../img/btn_submit2.png);
}

.forminput{
	width:95%;
	padding:5px;
	background-color: #fff;
	border: thin solid #9a7a51;
	border-radius: 5px;
	font-family: latoregular;
	font-size: 12px;
	color: #9a7a51;
	text-align: left;
}

.sent{
	padding: 15px;
	background-color: #9a7a51;

}

	
@media all and (max-width:800px){
    .col-1{ width: 50%;}
    .col-2{ width: 50%;}
    .col-3{ width: 33.33%;}
	.col-4{ width: 50%;}
    .col-5{ width: 100%;}

	.row .col-5 ~ .col-1{
            width: 100%; 
     }
	 
	.menu-container{
	background-color:#333;
    }
	 
	.menucontent{
	float: right;		
	}
}
	
@media all and (max-width:600px){
	
	body {
	width: 100%;
	background-color: #222;
	background-image: none;
	}

    .col-1{ width: 100%;}
    .col-2{ width: 100%;}
    .col-3{ width: 100%;}
    .col-4{ width: 100%;}
	.col-5{ width: 100%;}
	
	.item, .mediaitem{
	margin: 0px;
	}
	
	#transblack{
	background: rgba(0,0,0,1);
	}
	
	
	
}