body{
	margin: 0;
	padding: 0;
	background-color: white;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

main{
	width: 992px;
	margin: 0 auto;
	position: relative;
}

.clear{
	clear: both;
}

.center{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.elms-sans-thin {
  font-family: Elms Sans, sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.elms-sans-regular {
  font-family: Elms Sans, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.elms-sans-bold {
  font-family: Elms Sans, sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.elms-sans-black {
  font-family: Elms Sans, sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

h1{
	color:#664655;
}
.navbar{
	background-color: #664655;
	height: 70px;
}

.navbuttons{
	width: 90%;
}

ul li a:link, a:visited{
	background-color: transparent;
	color: black;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display:inline-block;
}

ul li a:hover, a:active{
	background-color: #3d2a33;
	color: 	#f8f5f2;
} 

div h2 a:link, a:visited{
	background-color: #664655;
	color: #f8f5f2;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;	
	border-radius: 20px;
}

div h2 a:hover, a:active{
	background-color: #3d2a33;
	color: #f8f5f2;
}
a{
	text-decoration: none;
}

.logo{
	width: 10%;
	height: 70px;
	float: left;
	padding: 5px;
	text-align:center;
	display: block;
	font-family: "Elms Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
}

ul{ 
	margin: 0 auto;
	width: 50%;
	height: 60px;
	list-style: none;
	text-align: center;
	padding: 15px;
}

li{
	display: inline;
}

.titlecontainer{
	padding: 15px;
	text-align: center;
	background: #f8f5f2;
}
#hero{
	background-image: url('../img/hero.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 50vh;
	position: relative;
}

#herobutton{
	margin: 0;
	padding: 15px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: transparent;
	
}

.reviewpic{
	float: left;
	width: 50%;
}

#reviewpic1{
	width: 100%;
}

#reviewpic2{
	width: 100%;
}
#review1{
	font-size: 20px;
	width: 100%;
	float: left;
	text-align: center;
	color: #664655;
}

#review2{
	font-size: 20px;
	width: 100%;
	float: left;
	text-align: center;
	color: #664655;
}

#pricehero{
	background-image: url('../img/reformershot.jpg');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	height: 50vh;
	position: relative;
}

.pricebox{
	float: left;
	width: 30%;
	display: inline;
	margin: 15px;
	text-align: center;
	border-radius: 20px;
	height: 250px;
}

.pricebox h2{
	color: #f8f5f2;
	background: #664655;
	border-radius: 20px 20px 0px 0px;
	padding: 10px;
}

.pricebox p{
	color: 	#7a6a70;
	background-color: #f8f5f2;
	padding: 10px;
	border-radius: 0px 0px 20px 20px;
}
.classcontainer{
	width: 50%;
	float: left;
	height: 950px;
	border-radius: 20px;
	border: 2px solid #664655;
}

.classtitle{
	font-family: "Elms Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	background-color: #664655;
	color: #f8f5f2;
	padding: 10px 20px;
	text-align: center;
	display: inline-block;	
	border-radius: 20px;
}
.description{
	color: #664655;
	font-size: 23px;
}
#class1, #class2, #class3, #class4, .description{
	height:50%;
	position: relative;
}

#class1 h2, #class2 h2, #class3 h2, #class4 h2, .description p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#class1{
	background-image: url('../img/reformer.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
	border-radius: 20px 20px 0px 0px;
}

#class2{
	background-image: url('../img/pilates.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 20px 20px 0px 0px;
}

#class3{
	background-image: url('../img/yogasit.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 20px 20px 0px 0px;
}

#class4{
	background-image: url('../img/yoga.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 20px 20px 0px 0px;
}

.faqimages{
	width: 25%;
	float: left;
}

.faqpic{
	width: 100%;
	object-fit: contain;
}
.divfaq{
	clear: both;
}

.faqbox1{ /*light background color*/
	margin: 15px 0px;
	padding: 10px;
}

.faqbox1 h2{
	color:#664655;
}
.faqbox2{ /*darker background color*/
	margin: 15px 0px;
	background: #f8f5f2;
	padding: 10px;
}

.faqbox2 h2{
	color:#664655;
}

footer{
	text-align: center;
	clear:both;
	height: 70px;
	margin: 40px;
	padding: 50px;
}