@charset "UTF-8";
/* CSS Document */
body {
	margin: 0px;
	font-family: "PT Sans", Trebuchet, sans-serif;
	font-size: 16px;
	color: #FFDBC9;
	height:400px;
	width: auto;
	background-color: #342424; /*this is just for now to be able to see stuff*/
}
img#logo {
	margin: 15px 0px 0px 20px;
	width: 120px
}

.banner {
	background-image: url("images/banner.jpg");
	background-size: cover;
	background-position: center top;
	background-position-x: 55%;
	width: 100%;
	height: 780px;
	margin: 0px;
	padding: 0px;
	z-index: 15;
	background-repeat: no-repeat;

}
img {height: auto}

h1 , h2 , h3, h4, h5{
	font-family: "Bebas Neue", sans-serif;
	color: #FFDBC9
}
h1 {
	font-size: 130px;
	font-weight: 80;
	text-shadow: 1px 2px #1D1515;
	letter-spacing: 4px;
	margin: 60px 0px 0px 40px;
	max-width: 250px;
	line-height: 140px
}
div.value_prop2 {
	font-size: 80px;
	color: #866F6F;
	font-weight: 80;
	margin: 4px 0px 40px 40px;
}
p.value_prop2 {
	font-size: 32px;
	font-style: italic
}
h4 {
	font-size: 28px;
	font-weight: 100;
	color: #FFDBC9;
	margin: 30px auto 20px;
}
p , li {
	font-size: 19px;
	line-height: 1.5em;
	display: inline	
}
a , ul , a:visited {
	color: #EFE4E4;
	font-weight: 550px;
	text-decoration: none;
}
a:hover {
	color:#433838;
}
nav, #nav{
	text-transform: uppercase;
	list-style: none;
	margin: 0;
	padding: 5px;
	background-color: rgba(134, 111, 111, 0.5);
	max-width: 620px;
	width: 80%;
	float: right;
}
ul#nav{
  	width: 95%;
	background-color: transparent
}
li.header{
	margin: 5px 10px 5px 7px;
	padding: 9px 7px 5px;
	float: left
}
#hamburg{ /* hide for now*/
	display: none;
	max-width: 150px;
	width: 80%;
	float: right
}	

.button {
	text-transform: uppercase;
	color: #F2E2E2;
	font-size: 20px;
	padding: 7px 12px;
	margin: 20px auto;
	border: medium solid #866F6F;
	letter-spacing: 1px;
	font-weight: 200;
	background-color: transparent;
	width: 200px;
	display: table /*or do inline block, see how goes later*/
}
a.button {text-align: center}
.button:hover {
	background-color: #866F6F;
	color: #F2E2E2;
}
.button.header {
	border-color: #403838;
	border-width: 2px;
	max-width:150px;
	width: 16%;
	margin: 8px 4px;
	padding: 1% 2%;
	font-size: 19px;
}
.button.header:hover {
	border-color: #F2E2E2;
	background-color: transparent
}
/*****************************************Services****/
.wrapper{
	margin: 0px auto; max-width: 1243.42px; padding: 0px 0px
}
h2 { /*services and testimonials*/
	font-size: 48px;
	font-weight: 100;
	letter-spacing: 0.08em;
	margin: 30px auto 20px;
	text-align: center;
	padding: 8px	
}
div.features {
	max-width: 1480px;
	width: 100%;
	height: 500px;
	text-align: center;	
	margin: 20px auto 50px
}
.box {
	max-width: 270px;
	width: 20%;
	height:auto;
	display: inline-block;
	padding: 10px;
	vertical-align: top
}

.features img{max-width: 250px; width:90%; height: auto}

.features p {font-size: 13.5px; padding: 7px; margin:0px 15px 15px; display: inline-block;}

/*------------------------------------Testimonials---*/
#test {
	text-align: center;
	padding-top: 40px
}
.review {
	background-color: #1D1515;
	height: 580px
}
.revs {
	margin: 15px auto 0px;
	padding: 8px;
}
.revs p {
	display: block;
	max-width: 1280px;
	width: 100%;
	margin: 8px auto;
	text-align: center;
	background-color: #342424;
	padding:8px;
	border-radius: 50px
}
/*----------------------------------Calendar*/
#events {
	display: inline-block;
	margin: 55px auto;
	text-align: center;
	max-width: 1480px;
	width: 100%;
	height: auto

}
.calendar, .newsletter{display: inline-block; vertical-align: middle}
.calendar{
	background-color: #1D1515;
	margin-left: auto;
	margin-right: 50px;
	max-width: 300px;
	width: 100%;
	padding: 30px 10px 20px;
	
}
h3 {text-align: center; font-size: 30px}
table {
	max-width: 280px;
	width: 100%;
	text-align: center;
	margin: 5px auto
}
#week {background-color: rgb(188, 143, 143, 0.2)}
.active {padding: 1px 2px; background-color: rosybrown; color: #5C4747}
.active:hover{background:#41562E; color:#F2E2E2}

.event {color:rosybrown; font-weight: 700}
.newsletter{
	background-color: #1D1515;
	margin-left: 50px;
	margin-right: auto;
	max-width: 500px;
	width: 100%;
	padding: 30px 10px;
}
h3 {
	font-size: 28px;
	letter-spacing: 1px;
	margin: 0px auto;
	padding-bottom: 20px;
	max-width: 350px;
	
}
#keep {font-size: 38px}
input {
	dislay: block;
	margin: 10px 8px 10px 20px;
	max-width:380px;
	width:70%;
	padding: 8px 10px;
	box-sizing: border-box;
}
label {
	margin-left: 8px;
	color: #F2E2E2;
	text-transform: uppercase
}
/*-----------------------------footer---------*/
div.footer {
	background-color: #1D1515;
	height: auto;
	text-align: center;
	box-sizing: border-box;
	padding: 30px;
}
footer {
	display: inline-block;
	text-align: center;
	margin: 0px auto;
	width: 100%;
	background-color: transparent;
	font-family: "PT Sans", Trebuchet, sans-serif;
	font-size: 16px;
	color: #F2E2E2;
	text-transform: uppercase;
	box-sizing: border-box
}
footer ul{padding:0px}
.socials {
	margin: 20px auto 5px;
	text-align: center;
	display: block;
	max-width: 250px
}
.socials img{max-width: 79px; width:15%; margin: 0px auto}
#foot {margin: 20px auto; max-width: 180px; text-align: center; font-size: 17px; box-sizing: border-box; display: block}

/*----------------------------------Media Queries-------------------*/
@media screen and (max-width:1320px) {
	#foot {max-width: 250px; width: 50%; height:auto; font-size: 17px; text-align: center;}
	div.review {height:auto}
	div.revs {margin: 0px 5%}
	.revs p {padding: 3%; margin: 1% 3%}
	p#rev1, p#rev2, p#rev3 {max-width: 750px; width: 90%; margin: 1% auto}
	#see {margin: 10px auto; padding: 10px 2px}
	
}

@media screen and (max-width:970px) {
	div.features {height: auto;}
	.calendar{float:left; width:30%; height:auto; margin: 10% 2%;}
	.newsletter{float:right; width:50%; height:auto}
	div.review {height:auto}
	div.revs {margin: 0px 5%}
	.revs p {padding: 3%; margin: 1% 3%}
	p#rev1, p#rev2, p#rev3 {max-width: 555px; width: 80%; margin: 1% auto}
	#see {margin: 10px auto; padding: 10px 2px; color: #F2E2E2}
	#menu,#kitchen, #wine, #late {width: 90%;height:auto}
	#foot {max-width: 270px; width: 50%; height:auto; font-size: 17px; text-align: center;}

}
@media screen and (max-width:820px) {
nav, #nav{display: none}
	#hamburg {display: block;}
	#hamburg img{width: 60%;height: auto;margin: 20%}
	.calendar,.newsletter{float:none}
	.calendar {margin: 0px 10% 10%; text-align: center; width: 80%}
	.newsletter {margin: 0px 3% 10%; text-align: center; width: 80%}
	/*
	.calendar{float:left; width:30%; height:auto; margin: 10% auto;}
	.newsletter{float:right; width:50%; height:auto}
	*/
}
@media screen and (max-width:780px) {
	#menu,#kitchen, #wine, #late {width: 100%;height:auto; padding-top: 10%}
	.calendar,.newsletter{float:none}
	.calendar {margin: 0px 10% 10%; text-align: center; width: 80%}
	.newsletter {margin: 0px 3% 10%; text-align: center; width: 80%}
	p.value_prop2, div.value_prop2 {max-width: 280px; width: 50%; line-height: 40px}
	
	
}