body {
	margin: 0 auto;
	font-family: "Inter", Arial, sans-serif;
	color:#EBE6DE; /* change to white */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;}

li {
	font-size:25px;
	color:#B78C71;}

p {
	font-size:18px;}

a, a:visited {
	color:#A89880 ;
	text-decoration:none;}

a:hover {
	font-weight: 530;}

.wrapper {
	margin:0 auto;
	max-width: 1366px;
	width:99%;}


/* header */
header {
	background-color:#EBE6DE;
	text-align:center;
	padding:20px 0 0}

#hero p {
	color:white;
	line-height:1.3em;}

#desktop ul{
	margin:0;
	padding:0;}

#desktop li{
	margin:15px;
	padding:0;
	list-style: none;
	font-size:18px;
	display:inline-block;}

.logo {
	width:125px;
	margin-bottom: -10px;}

#hamburger {display: none;
padding-bottom:20px;}

#hero {
	background-color:#EBE6DE;
	background-image:url('images/hero.jpg');
	height:530px;
	background-size:cover;
	background-position:35% 50%;
	position:relative;}

#valueprop {
	width:43.9238653%;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	text-align:center;
	left:20px;}

h1 {
	font-size: 50px;
	font-weight:500;
	line-height:.9em;
	margin:0;
	color: white;}

.button, .button:visited {
	color:white;
	padding: 10px;
	font-size: 18px ;
	border:3px solid #EBE6DE;
	border-radius: 15px ;
	text-transform: uppercase;
	font-weight: 600;
	display:inline-block;}

.button:hover {
	opacity: 80%;}


/* services (vases) */
#services {
	background-color: #CFB39B;
	text-align: center;
	width:100%;}

.vase {
	width:14.421%;
	display:inline-block;
	margin:4%;
	vertical-align: top;}

.vase p {
	color:white;
	font-size:20px;}


/* upcoming events */

#events {
	background-color:#B78C71;
	text-align:center;
	color:white;
	padding-bottom: 20px;}

.event {
	display:inline-block;
	width: 26.86%;
	margin:0 30px 30px 30px;
	vertical-align: top;}

.event img {
	width:95%;
	height:auto;}

h2 {font-size: 45px;
	font-weight: 500;
	text-align: center;
	margin-top:0;
	padding-top: 30px;}

.event p {
	font-size: 17px;}



/* reviews */
#reviews {
	background-color: #879BAA;
	margin-top:-30px;
	padding-bottom: 50px;
	text-align: center;}

h3 {font-size: 30px;
	font-weight:300;
	color:white;
	padding-top: 30px;
	text-align:center;}

.bubble p, cite {
	font-size:16px;
	color: #707070;
	margin-left:-18px;
	margin-right:-18px;
	text-align:left;}

.bubble {
	max-width:944px;
	padding: 0; margin: 10px;
	background-color:#EBE6DE;
	color:#474954;
	font-size: 20px ;
	border:3px solid #EBE6DE;
	border-radius: 40px;
	display:inline-block;
	width:230px;
	vertical-align: top;}

cite {
	font-weight:500;
	text-align:left;
	margin-left:-115px;}



/* footer */
   /* left (address & logo) */
footer {
	background-color:#474954; 
	padding: 60px;}

#left, .form {
	display:inline-block;
	vertical-align: middle;}

#left {
	width:45%;
	margin-left:20px;}

#mobile {display:none;}

#mobile ul{
	margin:0;
	padding:0;}

#mobile li{
	margin:8px;
	padding:5px;
	list-style: none;
	font-size:25px;}

.mobile {
	color:#EBE6DE;}

address {
	font-size:15px;
	font-style: normal;
	margin-top:12px;}

#mobile:visited {
	color:#EBE6DE;}



   /* form */

h4 {
	font-size: 25px;
	font-weight:600;
	margin-bottom:-10px;}

.form {
	width:45%;
	margin-left:40px;}

input:focus {
	outline:none; 
	border:1.5px solid #EBE6DE;}

.button2, .button2:visited {
	background-color:#EBE6DE;
	color:#474954;
	padding: 16px;
	font-size: 15px ;
	border:3px solid #EBE6DE;
	border-radius: 30px ;
	display:inline-block;
	margin: 20px 0;}

.button2:hover {
	font-weight:530;
	opacity: 80%;}

input, textarea {
	display:block;
	color:white;
	width:90%;
	padding: 18px;
	box-size:border-box;
	font-size: 16px;
	border:1.5px solid #EBE6DE;
	border-radius: 40px ;
	background-color:#474954;
	font-family:"Inter", Arial, sans-serif;}

input.button2 {
	display:inline-block;
	width:auto;
	margin: 0;}


   /* socials */
.copyright p {
	font-size:12px;
	font-weight:200;
	line-height:.2em;}

#socials {
	padding:0;
	margin:0;
	margin-top: 55px;}

#socials li:hover {
	opacity: 80%;}

#socials ul{
	margin:0;
	padding:0;}


#socials li{
	margin-left:10px;
	margin-right:10px;
	padding:0;
	list-style: none;
	display:inline-block;
	text-align: left;}




/* MEDIA QUERIES */

@media screen and (max-width:1100px){
	
	.vase {width:33%;}
	
	#vase1, #vase2 {margin-top:40px;}
	
	.bubbles {max-width:700px;
		margin:auto;}	

} /* end 1100px */


@media screen and (max-width:1000px){
	
	.event {
		width: 80%;
		height:auto;
		margin:20px 0 30px;}
	
} /* end 1000px */


@media screen and (max-width:800px){
	
	.form {
		position: relative;
		top:-300px;
		width:99%;
		margin:0;}
	
	#left {
		position:relative;
		left:35%;
		top:220px;
		margin:0 auto;
		transform:translateY(15%);}
	
	
	address, #mobile, #socials, .copyright {
		margin:20px 0;
		align-content: center;}

	#socials {
		margin-top:60px;}
	
	.copyright {
		margin-top:-15px;
		margin-bottom:-30px;}
	
} /* end 800px */


@media screen and (max-width:700px){
	
	#valueprop {
		width:80%;
		padding-top:95px;
		position:static;
		transform:none;
		left:20px;
		margin:0 auto;}
	
	.event {
		width: 85%;}
	
		
} /* end 700px */


@media screen and (max-width:600px){
	#hamburger {
		display:inline-block;
		float:right;
		padding:20px;
		margin:10px 18px;}
	
	#hamburger img {width:55px;}
	
	header {text-align:left;}
	
	.logo {
		width:145px;
		margin:10px 18px 15px;
		padding:0;}
	
	.mobile {
		color: #EBE6DE;}
	
	#desktop {display:none}
	
	#mobile {display:block;}
	
	.bubbles {margin:0;}
	
	.bubble cite {
		padding:0;
		margin-left:-80%;}
	
	.bubble {width:65%;}
	
	.bubble p, cite {
		text-align:left;}
	
	h3 {margin-left:50px;
		margin-right:50px;}
	
	.form {
		top:-550px;}
	
	#left .logo {
		margin:0;}
	
	#left {
		top:150px;}
	
	#socials {
		margin-top:30px;}
	
	.copyright {
		margin-top:-15px;
		margin-bottom:-70px;}
	
	#mobile {
		text-align:center;
		margin-left:-50px;}

	
} /* end 600px */
	

@media screen and (max-width:500px){
	
	.vase {width:180px;}
	
	#vase1, #vase3 {
		margin-left:-30px;
		margin-right:0px;
	}
	
	#vase1 {
		margin-right: 5px;}
	
	#vase2, #vase4 {
		margin-left:2%;
		margin-right:0;}
	
	
	footer {
		padding: 60px 20px;}
	
	
} /* end 500px */

@media screen and (max-width:490px){
	
	#valueprop {
		padding-top:60px;}
	
} /* end 490px */

@media screen and (max-width:400px){

	footer {
		padding-bottom:120px;
	}
	
	#left {
		margin-top:50px;
		position:relative;
		left:33%;
		top:200px;
		margin:0 0;
		width:200px;}
	
} /* end 400px */


@media screen and (max-width:380px){
	
	.vase img {height:140px;}
	
	#hero {height:600px;}
		
	.vase {width:150px;}
	
	#left {
		width:50px;
		left:0;}
	
} /* end 380px */


@media screen and (max-width:320px){
	
	#hero {height:670px;}
	
	#valueprop {padding-top:35px;}
	
	#left {
		margin-top:50px;
		position:relative;
		left:50px;
		width:170px;}
	
	#hamburger {
		display:inline-block;
		float:right;
		padding:20px;
		margin:10px 10px;}
	
	#hamburger img {
		width:40px;}
	
	.logo {
		width:115px;}
	
} /* end 320px */