@font-face {
	font-family: "Gilroy";
	src: url("gilroy/Gilroy-Bold.otf") format("opentype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Gilroy";
	src: url("gilroy/Gilroy-Regular.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}
	
body, html {width: 100%; height: 100%; color: grey; background-color: black; margin: 0px; font-family: 'Gilroy', sans-serif; text-align: center; line-height: 1.5em; font-weight: normal; scroll-behavior: smooth; }

a { color: inherit; text-decoration: none; }	
a:hover {color: white; transition: .5s ease;}
.menu {width: 100%; padding-top: 30px; padding-bottom: 30px; position: fixed; top: 0px; text-align: center; background-color: rgba(0, 0, 0, 0); z-index: 999;}
.menu a {color: #a4a4a4; font-size: .85em;  text-decoration: none; text-transform: uppercase; letter-spacing: .2em; margin: 0 1em 0 1em;  border-bottom: 2px solid rgba(0, 0, 0, 0); padding-bottom: .5em;  }
.menu a:hover {color: white; border-bottom: 2px solid rgba(255, 255, 255, .5); transition: .5s ease; }
.menu img {height: 14px; margin-bottom: -.15em;}

.splash {height: 100%; width: 100%; overflow: hidden; background-color: black; margin-bottom: 0em; position: relative;}
.splash #splashvideo {top:0; min-width: 100%; min-height: 100%;  width: auto; height: auto;   }
.splash .logoblock { display: block; margin-left: auto; margin-right: auto; width: 100%; position: absolute; top:50%;}
.splash .logo {width: 350px; }
.content, .content-visit {width: 75%;  margin: 0px auto 0px auto; font-weight: normal;  margin-top: 3em; clear: both; }
.content-full {background-color: #111111; width: 100%; height: auto; display: block; font-weight: normal; margin-top: 3em; padding: 2em 0em 3em 0em; }
.content-visit {text-align: left;}

h1 {font-weight: normal; font-size: 1.25em; line-height: 2em; margin-bottom: 3em; color: white;}
h2 {font-weight: bold; font-size: 1.25em; text-transform: uppercase; letter-spacing: .2em; color: white; }
h3, .appointments strong, .content-visit strong, .bios strong {font-weight: bold; font-size: .85em; text-transform: uppercase; letter-spacing: .2em; display: block; text-align: inherit; color: white;}
.content-visit strong {padding-top: 2em; color: white;}

h2::before { 
  display: block; 
  content: " "; 
  margin-top: -120px; 
  height: 120px; 
  visibility: hidden; 
  pointer-events: none;
}

h3 {display: block; position: absolute; width: 100%; bottom: 1em; color: grey; text-align: center; font-weight: normal; }

.special {width: 100%; clear: both; margin-bottom: 2em; color: white;}

ul {text-align: left; margin-left: -1.5em; clear: both;}
li {padding-left: 0;}

.cta, .cta-inline { background-color: #353535; background-image: linear-gradient(-45deg, #191919, #353535); padding: .5em 1em .5em 1em; max-width: 200px; display: block; text-align: center; margin: 1em auto 1em auto; text-decoration: none; text-transform: uppercase; color: white; letter-spacing: .2em; font-size: .75em; line-height: 1.75em; border-radius: 1em; transition: 1s ease; border: 1px solid black;}

.cta:hover, .cta-inline:hover { background-image: linear-gradient(-45deg, #4a4a4a, #868686); color:white; border-radius: 1em; transition: 1s ease; border: 1px solid black; }

.cta-inline {display: inline-block;}

span.clear { clear: left; display: block; }

.services {color: grey;   margin-bottom: 2em; width: 75%; margin-left: auto; margin-right: auto; margin-top: 2em;}
.services ul {column-count: 3;}
.blurb {color: grey;}

.appointments, .bios {width: 75%; margin-left: auto; margin-right: auto; margin-bottom:1em; }
.appointment, .appointment2 {width: 40%; display: block; float: left; padding: 1em;}
.appointment2  {float: right; }

appointments:hover {color:inherit;}

.appointment2 .cta {width:150px; display: inline-block; margin: 1em .5em 1em auto;}

.bio, .bio2 {width: 45%; float: left; padding: 1em; text-align: left;}
.bio2 {float: right; min-height: 100%;}
.bios em {color: #4c4c4c; font-style: normal; display: block; margin-bottom: 1em; text-transform: uppercase; letter-spacing: .2em; font-size: .75em;}
.bios img {width: 100%; margin-bottom: 1em;}
.inlinebook {color: white;}
.inlinebook .cta {display: block; margin-left: 0em;}

.inline-link {text-decoration: underline;}

.footer {margin-top: 5em; text-align: left; display: block; padding: 0 5% 5% 5%; font-size: .85em; color: grey;}
.footer .logo {width: 150px; display: block; margin-bottom: 1em;} 
.footer .icon {width: 20px; margin: 1em 1em 0 0;}

.greencircle {float: right;}

.footer a {transition: .5s ease;}

.legal {margin-top: 3em; color: #4c4c4c;}
.legal a {text-decoration: underline;}
.footer a img {opacity: .5; transition: 1s ease;}
.footer a:hover img {opacity: 1; transition: .5s ease;}



.menubk { 
           width: 100%; padding-top: 30px; padding-bottom: 30px; position: fixed; top: 0px; text-align: center; background-color: rgba(0, 0, 0, .0); z-index: 990; height: 1.5em;
        } 
  
.menubkfinal { 
           width: 100%; padding-top: 30px; padding-bottom: 30px; position: fixed; top: 0px; text-align: center; background-color: rgba(0, 0, 0, .85); z-index: 990; height: 1.5em;
        } 


@media only screen and (max-width: 600px) {
	
.menu a { font-size: .8em;  text-decoration: none; text-transform: uppercase; letter-spacing: .07em; margin: .35em .5em 0 .35em;  border-bottom: 2px solid rgba(0, 0, 0, 0); padding-bottom: .25em;}
.menu img {height: 12px; margin-bottom: -.1em;}


.visit {display: none;}
	
.splash {background-image: url("../img/SalonM.gif"); background-size: cover;}	
#splashvideo {display: none;}	
.splash .logo {width: 250px; }

h3 {font-size: .65em;}

.content, .content-visit {width: 85%;  margin: 0px auto 0px auto; font-weight: normal;  margin-top: 3em;  }
.content-full { width: 100%; }

.services {color: #b7b7b7;  column-count: 1; margin-bottom: 1em;}

.services ul {column-count: 2;}
	
.appointments, .bios {width: 100%; margin-left: auto; margin-right: auto; text-align: center;  }
.appointment, .appointment2 {width: auto; display: block; float: none; padding: 1em;}
.appointment2  {float: none; margin-top: 1em;}

.bios {width: 90%;}
.bio, .bio2 {width: auto; float: none; padding: 1em; text-align: left;}
.bio2 {float: none; margin-top: 1em;}

	}
	
	
@media (max-width: 850px) {
		
.services {color: #b7b7b7;  column-count: 1; margin-bottom: 1em;}

h3 {font-size: .75em;}

.appointments, .bios {width: 100%; margin-left: auto; margin-right: auto; text-align: center;  }
.appointment, .appointment2 {width: auto; display: block; float: none; padding: 1em;}
.appointment2  {float: none; margin-top: 1em;}

.bios {width: 90%;}
.bio, .bio2 {width: auto; float: none; padding: 1em; text-align: left;}
.bio2 {float: none; margin-top: 1em;}
		
		
		}


@media only screen and (device-width: 768px) {
  /* For general iPad layouts */

.splash {background-image: url("../img/SalonM.gif"); background-size: cover;}	
#splashvideo {display: none;}	
.splash .logo {width: 350px; }

h3 {font-size: .75em;}

.content, .content-visit {width: 85%;  margin: 0px auto 0px auto; font-weight: normal;  margin-top: 3em;  }
.content-full { width: 100%; }

.services {color: #b7b7b7;  column-count: 1; margin-bottom: 1em;}

.appointments, .bios {width: 100%; margin-left: auto; margin-right: auto; text-align: center;  }
.appointment, .appointment2 {width: auto; display: block; float: none; padding: 1em;}
.appointment2  {float: none; margin-top: 1em;}

.bios {width: 90%;}
.bio, .bio2 {width: auto; float: none; padding: 1em; text-align: left;}
.bio2 {float: none; margin-top: 1em;}

	}