@import url('https://fonts.googleapis.com/css?family=roboto');

body {

 width: 95%;
 Background-color: #d9d8b9;
 font-family: 'roboto', sans-serif;
}

nav {
 position: fixed;
 background: linear-gradient(135deg, #a69f78, #706c49);
 top: 0px;
 left: 0px;
 right: 0px;
 z-index: 1;
}

nav p {
 text-align: center;
 margin: 15px 30px 15px 30px;
}
nav a {
 display: inline;
 margin: 0 12px 0 12px;
 font-size: 16px;
}
.name {
 float: left;
 color: #1d170a;
 font-size: 16px;
}

p, a, em, strong, div, label, input, button {
 font-size: 18px;
Text-align: center;
}

button {
 
}
.green {
 color: darkgreen;
}

.about {
 
}

.aroma {
 margin-top = 30px;
margin-bottom=30px;
}

.lotus {
 color: #f4a284;
}

.profile {
 display: block;
 position: relative;
 margin: 100px 0 60px 0;
 top: 20px;
}

.therapists {
 display: flex;
 Flex-direction: column;
 Margin-top: 10px
}

h1 { 
 text-align: center;
 color: #424125;
 font-size: 40px;
}
h3 {
 text-align: center;
 color: darkslategray;
 font-size: 28px;
}
h4 {
 text-align: center;
 display: inline;
}
h5 {
 text-align: center;
}

a:link {
 color: #1d170a;
}
a:visited {
 color: #1d170a;
}

#front {
width: 45%;
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-top: 10px;
Border-radius: 2%;
}

#servicesrotate {
Width: 30%;
Display: block;
margin-left: auto;
margin-right: auto;
Margin-top: 10px;
Border-radius: 3%;
transform: rotate(90deg);
}

#services {
Width: 30%;
Display: block;
margin-left: auto;
margin-right: auto;
Margin-top: 10px;
Border-radius: 3%;
}

#profile {
 width: 35%;
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-top: 10px;
 border-radius: 45%;

h2 {
 position: relative;
 text-align: center;
 margin: 20px 0 25px 0;
 color: #5e5838;
 font-size: 30px;
}

.concerts {
 list-style-type: none;
 position: relative;
 width: 100%;
}

.upcoming h2 {
 color: #f96353;
}
.upcoming {
 position: absolute;
 width: 45%;
 top: 40px;
 left: 10px;
}
.red {
 color: red;
}
.blue {
 color: dodgerblue;
}
.green {
 color: darkGreen;
}

#ivoted {
 width: 95%;
 border-radius: 50%;
}

#backyard {
 width: 95%;
 border-radius: 5%;
}

.cabaret {
 width: 95%;
}

.announce {
 text-align: center;
}
.announce a {
 text-decoration: none;
}

.recent {
 position: absolute;
 width: 45%;
 top: 40px;
 right: 10px;
}

.maravilla {
 width: 95%;
 border-radius: 25px;
}

iframe {
 height: 300px;
 width: 95%;
}

footer {
 display: none;
 position: absolute;
 bottom: 0;
} 
.booking {
 text-align: center;
 margin: 0 20%;
 width: 60%;
}

#about {
 position: absolute;
 width: 20%;
 margin-left: 35%;
 margin-right: 35%;
 margin-top: 15px;
 border-radius: 20px 20px 20px 20px;
}

.left {
 position: absolute;
 left: 5%;
 padding: 10px;
 width: 30%;
}
.right {
 position: absolute;
 right: 5%;
 padding: 10px;
 width: 30%;
}
.bio {
 text-align: left;
 margin: 5px 5%;
 display: inline-block;
}

.channels {
 text-align: center;
}

.teaching {
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 width: 60%;
}
.students {
 text-align: left;
}
.contact {
 text-align: center;
}

form {
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 width: 35%;
}
.form {
 text-align: right;
}

input {
 margin: 5px;
 padding: 5px;
 border-radius: 10px;
}

button {
 padding: 5px;
 border-radius: 30px:
}

#message {
 margin-top: 15px;
}

@ media only screen and (max-width: 400px) {
li {
 display: block
}
.upcoming .recent .right .left {
 position: relative;
 width: 95%;
}
}
.store {
 text-align: center;
}
.blue {
 color: royalBlue;
}

Ul li ul.dropdown li {
Display: block;
}
Ul li ul.dropdown {
Width: 100%;
Background: #22438c;
Position: absolute;
Z-index: 999;
Display: none;
}
Ul li a:hover {
Background: #112c66;
}
Ul li:hover ul.dropdown {
Display: block;
}