@charset "utf-8";
/* CSS Document */
body {font-family:"Arial";
font-size:18px;
line-height: 1.5;
color:#772F1A;
}
#logo img {width:250px}
ul {list-style: none;
display: inline;
font-family:"times New Roman";
font-size:25px;
padding-left:0;
}
a:hover {color:chocolate}

a:active {color:darkred}

li {display: inline;
margin-left:15px;
margin-right:15px;
}

a {text-decoration: none;
color:#772F1A}

#header {}

#logo {display:inline-block}

#navigation {display:inline-block;
text-align: center;
float:right;
margin-top:10px;
margin-right:30px}

.hamburger {display:inline-block;}

.hamburger img {width:50px}

#imgandvalue {background-image: url("images/lamp.jpg");
	width:100%;
	height:auto;
	background-size:cover
}

#value prop {background-image:url("images/lamp.jpg");}

#maintext {;
font-size:28px;
line-height:1.5;
margin-bottom:50px;
}

#maintext p {text-align: center;
max-width: 500px;
margin-left: auto;
margin-right: auto}

h1 {color:wheat;
font-family:"times new roman";
font-size: 75px;
font-weight:200;
padding-top:15%;
padding-left:30px
 }

h2 {font-size:45px;
font-weight:400;
}
h3 {color:wheat;
font-family:"times new roman";
font-size:32px;
font-weight:300;
}

#story1,#story2,#story3 {list-style:none;
display:inline-block;
background-color:burlywood;
width:31%;
height:620px;
cursor:pointer;
margin-left: auto;
margin-right: auto} 
#story1 {background-image: url("images/1-3-template.jpg")
;background-size:cover}

#story2 {background-image: url("images/tea.jpg");
background-size:cover;}

#story3 {background-image:url("images/pastry.jpg");
background-size:cover}

#story1 h3,#story2 h3,#story3 h3 {font-size:80px;
text-align:center;
padding-top:120px}

.hamburger {display:none}
img {height:auto;}

#form {background-color:#EDB37A;
	text-align: center;
	width:70%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px
}


input[type=text] {
  background-color: #9E6B49;
  color: white;
width:30%;
height:30px;
border: none;
cursor: pointer;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: #772F1A;
  border: none;
  color: #EDB37A;
  padding: 16px 32px ;
  text-decoration: none;
  margin: 30px;
  cursor: pointer;
}
#icons {margin-bottom:50px;padding-left:none}

#icons,#links {text-align: center;
cursor: pointer}

#links a {display: block;
}

#links {background-color:#F58549;
font-size:50px;
line-height:1;
font-weight:bold}
#form h2 {padding-top:40px}





@media only screen and (max-width: 600px) {
	#navigation {display:none}
	.hamburger {display:inline;
	float:right;
	margin-top:20px;
	margin-right:20px;}
	h1 {font-size: 52px;
	text-align:center}
	h3 {margin:0;
	}
	}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 850px) {
	#story1,#story2,#story3 
	{display:block;
	width:100%;
	height:250px;
		padding:none
	
	}
	#story1 {background-image: url("images/mobileroom.jpg");background-size:cover}
	#story2 {background-image: url("images/mobiletea.jpg");background-size:cover}
	#story3 {background-image: url("images/mobilepastry.jpg");background-size:cover;}
	
	h1 {font-size: 62px}
	#navigation {display:none}
	.hamburger {display:inline;
	float:right}
	
	input[type=text] {
		width:70%
	}
	#stories li {
	margin:0;
	line-height:0;
	
	
	}
	

	
	
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}