@font-face {
    font-family: Black;
    src: url(../media/fuentes/Roboto-Black.otf);
}

@font-face {
    font-family: Bold;
    src: url(../media/fuentes/Roboto-Bold.ttf);
}

@font-face {
    font-family: Medium;
    src: url(../media/fuentes/Roboto-Medium.ttf);
}
@font-face {
    font-family: Thin;
    src: url(../media/fuentes/Roboto-Thin.ttf);
}
::-webkit-scrollbar {width: .8vw;}
::-webkit-scrollbar-thumb {background: #440044; border-radius: 10px;}
::-webkit-scrollbar-track {background: #000;}
*{
	margin: 0;
	padding: 0;
}
body {
  background-image: url(../img/aurysalonnoisy.jpg);
}
a {
  text-decoration: none;
}
#container {
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}
menu {
  position: fixed;
  mix-blend-mode:difference;
  top: 3vw;
  left: 4vw;
  z-index: 9999;
}
menu ul li {
  display: inline-block;
  color: white;
  padding-left: 1vw;
}
menu ul li p {
  display: inline-block;
  color: white;
  font-family: Bold;
  font-size: .92vw;
  letter-spacing: .3vw;
  font-weight: bolder;
  transition:all 0.2s;
}
menu ul li p:hover {
  transform: translateY(-4px);
  cursor: pointer;
  color: #ffcc00;
}
menu ul li:first-child p {
  font-size: 1vw;
  transform: scale(4);
  margin: 0;
  text-shadow: 0 0 0 #ffffff;
}
menu ul li:first-child p:hover {
  /*transform: scaleX(4.2);
  text-shadow: 0 0 3px #ffff00, 0 0 5px #ff0000;*/
}
#corner {
  /*mix-blend-mode:dissolve;*/
  position: fixed;
  top: 0;
  right: 0;
  transition:all 0.4s;
  width: 9.65vw;
  z-index: 9999
}
#logo {
  mix-blend-mode:normal;
  margin-top: 17em;
  transition:all .6s;
  display: none;
}
#logo:hover {
  /*mix-blend-mode:difference;*/
  transform: scale(1.06);
}
#redes {
  position: fixed;
  mix-blend-mode:difference;
  bottom: 1.2vw;
  left: 2vw;
  z-index: 999;
}
#redes ul li {
  display: inline-block;
  padding-left: 1.7vw;
}
#redes ul li img {
  width: 2.3vw;
  transition:all 0.4s;
  /*-webkit-filter: drop-shadow(3px 3px 3px rgba(255,255,255,0.4));
  filter: drop-shadow(3px 3px 3px rgba(255,255,255,0.4));*/
}
#redes ul li img:hover {
  transform: scale(1.3);
  cursor: pointer;
}
#next {
  width: 3vw;
  position: fixed;
  mix-blend-mode:difference;
  bottom: 1vw;
  margin-left: -1.5vw;
  /*right: 3vw;*/
  transition:all 0.4s;
  z-index: 980;
  cursor: pointer;
  transition:all 0.2s;
}
#next:hover {
  transform: translateY(-.2vw);
}
#location {
  position: fixed;
  /*mix-blend-mode:difference;*/
  bottom: 1vw;
  width: 2.5vw;
  right: 3vw;
  transition:all 0.4s;
  z-index: 990;
  -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
}
#location:hover {
  transform: scale(1.2) translateY(-4px);
}
#desarrollo {
  position: fixed;
  bottom: 0;
  width: 100vw;
  background: black;
  color: #999;
  font-family: Bold;
  font-weight: bolder;
  font-size: 3.3vw;
  letter-spacing: .8vw;
  line-height: 7vw;
  text-transform: uppercase;
  text-align: center;
  display: none;
  z-index: 9;
}
#home {
  width: 100%;
  height: 98.5vh;
  background-color: black;
  background-image: url(../img/AurySalonNavidad.jpg);
  background-size: cover;
  /*box-shadow: 0 0 600px rgba(0,0,0,0.2) inset;*/
  border: 1.5vh solid transparent;
  border-image: url(../img/borde3.png) 22 6 round;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
#maquillaje {
  width: 100%;
  height: 100vh;
  background-color: black;
  background-image: url(../img/maquillaje1.jpg);
  box-shadow: 0 0 600px rgba(0,0,0,0.2) inset;
  transition:all 2s;
  /*background-size: 104% 104%;*/
  background-size: cover;
  /*border: 1.5vh solid transparent;
  border-image: url(../img/borde4.png) 22 6 round;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;*/
}
/*#maquillaje:hover {
  background-size: 100% 100%;
}*/
h1, h2, h3 {
  font-family: Black;
  font-weight: bolder;
}
h1 {
  cursor: default;
}
#maquillaje h1 {
  padding-top: 21%;
  font-size: 12em;
  color: white;
  mix-blend-mode:difference;
  transition:all 4s;
  text-shadow: 5px 5px 10px rgba(255,255,255,0.2);
}
#maquillaje h1:hover {
  letter-spacing: .13em;
}
#maquillaje h3 {
  font-size: 2.5em;
  color: white;
  margin-top: -20px;
  text-shadow: 4px 4px 7px rgba(0,0,0,0.6);
  transition:all 0.2s;
  mix-blend-mode:overlay;
}
#maquillaje h3:hover {
  transform: translateY(-4px);
  color: #00ffff;
}
#peinados {
  width: 100%;
  height: 100vh;
  background-color: black;
  background-image: url(../img/PEINADOS.jpg);
  transition:all 2s;
  /*background-size: 100% 100%;*/
  background-size: cover;
  box-shadow: 0 0 600px rgba(0,0,0,0.2) inset;
}
/*#peinados:hover {
  background-size: 104% 104%;
}*/
#peinados h1 {
  padding-top: 21%;
  font-size: 10em;
  color: white;
  margin-left: 5vw;
  mix-blend-mode:overlay;
  transition:all 4s;
  text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}
#peinados h1:hover {
  letter-spacing: .06em;
}
#peinados h3 {
  font-size: 2.1em;
  margin: -1.2em 0 0 17%;
  color: white;
  mix-blend-mode:overlay;
  transition:all 0.4s;
  text-shadow: 4px 4px 7px rgba(0,0,0,1);
}
#peinados h3:hover {
  transform: translateY(-4px);
  color: #77dd77;
}
#permanente {
  width: 100%;
  height: 93vw;
  background-color: black;
  background-image: url(../img/aurysalonpermanente.jpg);
  /*background-size: 103% auto;*/
  background-size: cover;
  box-shadow: 0 0 600px rgba(0,0,0,1) inset;
  z-index: -2;
  position: absolute;
  transition:all 2s;
}
/*#permanente:hover {
  background-size: 100% auto;
}*/
#permanente h1 {
  padding-top: 44%;
  font-size: 9.4em;
  color: white;
  margin-left: 9.5vw;
  mix-blend-mode: difference;
  transition:all 6s;
  text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}
#permanente h1:hover {
  letter-spacing: .08em;
}
#permanente h2 {
  font-size: 4em;
  text-transform: uppercase;
  color: white;
  letter-spacing: 1.6vw;
  margin-left: 8vw;
  margin-top: -2.8vw;
  mix-blend-mode:difference;
  transition:all 4s;
  text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}
#permanente h3 {
  font-size: 2.1em;
  margin: -.7em 0 0 11em;
  color: white;
  transition:all 0.4s;
  text-shadow: 4px 4px 7px rgba(0,0,0,1);
}
#permanente h3:hover {
  transform: translateY(-4px);
  color: #ff2222;
}
#cero {
  position: fixed;
  mix-blend-mode: difference;
  left: 8.5vw;
  top: 39%;
  z-index: -1;
}
#cero h1 {
  /*padding-top: 44%;*/
  font-size: 9.4em;
  color: white;
  margin-left: 1.5vw;
  transition:all 6s;
  text-shadow: 2.5vw 1vw .5vw rgba(255,255,255,0.25);
}
#cero h1:hover {
  letter-spacing: .08em;
}
#cero h2 {
  font-size: 4em;
  text-transform: uppercase;
  color: white;
  letter-spacing: 1.3vw;
  margin-top: -2.8vw;
  transition:all 4s;
  text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}
#cero h3 {
  font-size: 2em;
  margin: -.6em 0 0 7em;
  color: #ff4444;
  transition:all 0.4s;
  text-shadow: 4px 4px 7px rgba(0,0,0,1);
}
#cero h3:hover {
  transform: translateY(-4px);
  color: #ff2222;
}
#none {
  display: none;
}
#servicios {
  width: 100%;
  height: 100vh;
  background-color: black;
  background-image: url(../img/aurysalonnoise.jpg);
  margin-top: 92vw;
  box-shadow: 0 0 40vw rgba(0,0,0,1) inset;
  overflow: hidden;
}
#servicios h1 {
  font-family: Thin;
  text-transform: uppercase;
  font-size: 1vw;
  letter-spacing: 3vw;
  text-align: center;
  padding-top: 10%;
  margin-left: 4vw;
  color: #909;
}
/*#servicios p {
  font-family: Roboto Black;
  font-size: 2.4vw;
  width: 300vw;
  letter-spacing: 10vw;
  line-height: 2.7vw;
  text-align: center;
  margin-top: 2vw;
  margin-left: -95vw;
  color: #888;
  mix-blend-mode: difference;
  transition:all 10s;
  background-color: rgba(0,0,0,0);
  transition:all 8s;
}*/
#servicios p {
  font-family: Black;
  font-size: 2.4vw;
  width: 100vw;
  letter-spacing: -.1vw;
  line-height: 2.7vw;
  text-align: center;
  margin-top: 2vw;
  margin-left: 0;
  color: #888;
  mix-blend-mode: difference;
  transition:all 2s;
  background-color: rgba(0,0,0,0);
}
#servicios p span {
  background: -webkit-linear-gradient(#888, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: default;
  transition: all 1s;
}
.pointer {
  cursor: pointer !important;
}
#servicios p span:hover {
  letter-spacing: .07vw;
}
#servicios:hover > p {
  width: 100vw;
  letter-spacing: -.1vw;
  margin-left: 0;
}
#galeria {
  width: 100%;
  height: 100vh;
  background-color: black;
  background-image: url(../img/aurysalonnoisy.jpg);
  border: .5vh solid transparent;
  border-image: url(../img/borde2.png) 22 6 round;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
#galeria div {
  transition: all 1s;
  overflow: hidden;
}
#gal div:hover {
  box-shadow: 0 0 6vw rgba(0,0,0,0) inset;
}
#gal {
}
#gal div div {
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: all 1.4s;
}
#gal div div:hover {
  transform: scale(1.2);
  filter: grayscale(0.3);
  box-shadow: 0 0 6vw rgba(0,0,0,1) inset;
}
#gal div div h3 {
  text-transform: uppercase;
  font-size: .9vw;
  text-shadow: 2px 2px 6px black;
  -webkit-filter: drop-shadow(2px 2px 6px black);
  filter: drop-shadow(2px 2px 6px black);
  letter-spacing: .3vw;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  width: 100%;
  height: 100%;
  transition: all 2s;
  opacity: 0;
}
#gal div div:hover > h3 {
  opacity: 1;
  box-shadow: 0 0 6vw rgba(0,0,0,1) inset;
}
#uno h3:hover, #cinco h3:hover, #once h3:hover, #quince h3:hover {
  display: none !important;
}
#uno:hover, #cinco:hover, #once:hover, #quince:hover {
  display: none !important;
}
#uno {
  background-image: url(../img/galeria/.jpg);
}
#dos {
  background-image: url(../img/galeria/nanosereshada.jpg);  
}
#tres {
  background-image: url(../img/galeria/trenzasbebe.jpg);
}
#cuatro {
  background-image: url(../img/galeria/cortebordado.jpg);
}
#cinco {
  background-image: url(../img/galeria/.jpg);
}
#seis {
  background-image: url(../img/galeria/trenzagimnacia.jpg);
}
#siete {
  background-image: url(../img/galeria/superpeinadoniña.jpg);
}
#ocho {
  background-image: url(../img/galeria/promopermanente.jpg);
}
#nueve {
  background-image: url(../img/galeria/nanoplastiadulce.jpg);
}
#diez {
  background-image: url(../img/galeria/trenzaadornada.jpg);
}
#once {
  background-image: url(../img/galeria/.jpg);
}
#doce {
  background-image: url(../img/galeria/color3.jpg);
}
#trece {
  background-image: url(../img/galeria/arregloparacompetencia.jpg);
}
#catorce {
  background-image: url(../img/galeria/aury.jpg);
}
#quince {
  background-image: url(../img/galeria/.jpg);
}
.vertical {
  width: 15%;
  height: 33.33333333333333333333vh;
  float: left;
}
.horizontal {
  width: 30%;
  height: 33.33333333333333333333vh;
  float: left;
}
/*.horizontal img {
  height: 100%;
  width: auto;
}*/
.square {
  width: 20%;
  height: 33.33333333333333333333vh;
  float: left;
}
.vertical img, .square img, .horizontal img {
  width: 100%;
  transition: all 1s;
}
.vertical img:hover, .square img:hover, .horizontal img:hover {
  transform: scale(1.2);
}
#contacto {
  width: 100%;
  height: 66vh;
  padding-top: 4vw;
  /*background: -webkit-linear-gradient(#606, #303);*/
  background: #fff;
  background-image: url(../img/aurysalonnoise.jpg);
  /*border: 15px solid transparent;
  border-image: url(../img/borde.png) 20 6 round;
  border-image-outset: 1;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;*/
  border: 1.5vh solid transparent;
  border-image: url(../img/borde.png) 22 6 round;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  /*display: flex;
  justify-content: center;
  align-items: center;  */
}
form {
  width: 60%;
  height: 80%;
  margin-top: 2vw;
  mix-blend-mode:multiply;
}
form label {
	background: none;
	color: #222;
}
form input, textarea, label, #listaservicios {
  background: #bbb;
  /*mix-blend-mode:difference;*/
  border: none;
  border-radius: 1.3vw;
  line-height: 2.4vw;
  color: #555;
  font-family: Black;
  font-size: 1vw;
  letter-spacing: .1vw;
  resize: none;
  padding: 0 1%;
  margin: 1vw 0;
}
form input:enabled, textarea:enabled, label:enabled, #listaservicios:enabled {
  border: none;
  outline: none;
}
form input:focus, textarea:focus, label:focus {
  background: #ec8;
}
#nombre {
  width: 50%;
  margin: 0 1% 0 0;
}
#email {
  width: 20%;
  margin: 0 1%;
}
#phone {
  width: 19%;
  margin: 0 0 0 1%;
}
#listaservicios {
  height: 2.4vw;
  width: 34%;
  background-color: #555;
  color: #ddd;
  margin: 1vw 1% 0 0;
}
option {
  background-color: #888;
}
#citas {
  background-color: #555;
  color: #ddd;
  width: 32%;
  margin: 1vw 3% 0 1%;
}
#efectivo {
  width: 2.5%;
  margin: 0 1% 0 0;
}
#tarjeta {
  width: 2.5%;
  margin: 0 1% 0 0;
}
textarea {
	width: 98%;
	line-height: 1.8vw;
	border-radius: 2vw;
	margin: 1vw 1% 0 0;
	overflow-y: hidden;
}
#reset {
  width: 15%;
  margin: 1vw 1% 0 0;
  background-color: #000;
  color: white;
  transition: all .2s;
}
#submit {
  width: 15%;
  margin: 1vw 0 0 0;
  background-color: #000;
  color: white;
  transition: all .2s;
}
#reset:hover, #submit:hover {
  background-color: #707;
}
#contacto h1 {
	font-family: Black;
	width: 59%;
	color: #555;
	font-size: 2vw;
	line-height: 2vw;
	border: 2px dashed #ccc;
	border-left: 0;
	border-right: 0;
	padding-bottom: 2vw;
	border-top: 0;
}
/*#contacto h1 span {
	color: #747;
}*/
#contacto h2 {
	font-family: Black;
	color: #707;
	font-size: 1.2vw;
	line-height: 2vw;
}
#datos {
	width: 59%;
	margin-top: 2vw;
}
#datos h3 {
	color: #707;
	font-size: 1.2vw;
	border: 2px dashed #ccc;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	padding: 1.5vw 0 .5vw 0;
}
#contacto p {
	font-family: Bold;
	color: #888;
	font-size: 1vw;
	line-height: 2vw;
	border: 2px dashed #ccc;
	border-left: 0;
	border-right: 0;
	/*border-bottom: 0;*/
	letter-spacing: .05vw;
	text-align: left;
	margin-top: .06vw;
}
#contacto p span {
	float: right;
	cursor: pointer;
	transition: all .5s;
}
#contacto p span:hover {
	float: right;
	cursor: pointer;
	color: #a06;
}
#descripcion {
	width: 100%;
	height: 14.2vh;
	/*background: rgb(51,0,51);
	background: linear-gradient(8deg, rgba(51,0,51,1) 50%, rgba(85,0,85,1) 50%);*/
	background-image: url(../img/aurysalonnoisy.jpg);
	display: flex;
  justify-content: center;
  align-items: center;
}
#descripcion h1 {
	width: 75%;
	padding: .5vw 2vw 0 2vw;
	mix-blend-mode:difference;
	color: white;
	font-family: medium;
	font-size: 1.15vw;
	border: .5vw solid rgba(255,255,255,0.15);
	border-top: 0;
	border-bottom: 0;
	letter-spacing: .3vw;
	text-align: center;
	margin: 0 auto;
}
#descripcion span {
	background: -webkit-linear-gradient(#f0f, #f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1vw;
	font-size: 1.4vw;
}
#clients{
  width: 100%;
  height: auto;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 4vw;
  /*border: .5vh solid transparent;
  border-image: url(../img/borde2.png) 22 6 round;
  border-top: 0;
  border-left: 0;
  border-right: 0;*/
  box-shadow: 0 0 600px rgba(0,0,0,.3) inset;
  background-image: url(../img/aurysalonnoise.jpg);
}
#pic {
  width: 14.5vw;
  height: 50vh;
  margin: 1vw 1vw;
  overflow: hidden;
  /*background-image: url(../img/aurysalonnoise.jpg);*/
  background: #222; 
  border-radius: 1vw;
  display: inline-block;
  box-shadow: .3vw .3vw 1vw rgba(0,0,0,0.8);
  /*position: absolute;*/
}
#pic img {
  width: 100%;
}
#pic .uno {
  width: 80%;
  color: #999;
  font-family: Black;
  font-size: 1.1vw;
  background: linear-gradient(to right, #ea5, #828);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 2vw;
}
#grad {
  width: 80%;
  height: .7vw;
  background: #454545;
  border-radius: 1vw;
}
#pic .dos {
  width: 100%;
  color: #999;
  font-family: Medium;
  font-size: .75vw;
  letter-spacing: 1px;
  margin-bottom: .55vw;
}
/*#servicios p span {
  border-radius: 7px;
}
#servicios p span:hover {
  background-color: rgba(0,90,255,1);
}*/
/*------------------------------------------*/
/*@media screen and (min-width: 1921px) {
  body {
    background-color: black;
  }
#container {
	width: 1920px;
} 
#home, #maquillaje, #peinados {
  height: 1080px;
}
}
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}*/
/*--------------------------------------------------------------------------------------------*/
@media only screen and (orientation: landscape) {

#logo {
  /*mix-blend-mode:difference;*/
  width: 30vw;
  margin-top: 17vw;
  transition:all .6s;
}
#location {
  -webkit-filter: drop-shadow(.2vw .2vw .2vw rgba(0,0,0,0.7));
  filter: drop-shadow(.2vw .2vw .2vw rgba(0,0,0,0.7));
}
#location:hover {
  transform: scale(1.2) translateY(-.4vw);
}
#home {
  /*box-shadow: 0 0 20vw rgba(0,0,0,0.2) inset;*/
}
#maquillaje {
  box-shadow: 0 0 20vw rgba(0,0,0,0.2) inset;
}

#maquillaje h1 {
  padding-top: 21.5%;
  font-size: 9.4vw;
  text-shadow: 5px 5px 10px rgba(255,255,255,0.2);
}
#maquillaje h1:hover {
  letter-spacing: 1.1vw;
}
#maquillaje h3 {
  font-size: 1.7vw;
  margin-top: -20px;
  text-shadow: 4px 4px 7px rgba(0,0,0,0.6);
}
#maquillaje h3:hover {
  transform: translateY(-4px);
  color: #00ffff;
}
#peinados {
  box-shadow: 0 0 20vw rgba(0,0,0,0.2) inset;
}
#peinados h1 {
  padding-top: 21%;
  font-size: 8.2vw;
  margin-left: 5vw;
  text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}
#peinados h1:hover {
  letter-spacing: .06em;
}
#peinados h3 {
  font-size: 1.7vw;
  margin: -2.1vw 0 0 17%;
  color: white;
  mix-blend-mode:overlay;
  transition:all 0.4s;
  text-shadow: 4px 4px 7px rgba(0,0,0,1);
}
#peinados h3:hover {
  transform: translateY(-4px);
  color: #77dd77;
}
#permanente h1 {
  padding-top: 44%;
  font-size: 7.8vw;
  text-shadow: 2.5vw 1vw .5vw rgba(255,255,255,0.25);
}
#permanente h1:hover {
  letter-spacing: .08em;
}
#permanente h2 {
  font-size: 3.4vw;
  letter-spacing: 1.55vw;
  margin-left: 8vw;
  margin-top: -2.6vw;
  /*text-shadow: -2.5vw 1vw .5vw rgba(255,255,255,0.15);*/
}
#permanente h3 {
  font-size: 1.6vw;
  margin: -1.3vw 0 0 19vw;
  color: white;
  mix-blend-mode:overlay;
  transition:all 0.4s;
  text-shadow: 4px 4px 7px rgba(0,0,0,1);
}
#permanente h3:hover {
  transform: translateY(-4px);
  color: #ff2222;
}


}
/*--------------------------------------------------------------------------------------------*/
@media only screen and (orientation: portrait) {
  

::-webkit-scrollbar {width: 0;}
#container {
  width: 100%;
}
menu {
  top: 0;
  left: 0;
  padding: 6vw 4vw 6vw 4vw;
  z-index: 9999;
  mix-blend-mode:normal;
  -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
  background-image: url(../img/aurysalonnoise.jpg);
  width: 100%;
}
menu ul li {
  padding-left: 2.5vw;
}
menu ul li p {
  font-size: 3.9vw;
  letter-spacing: .6vw;
  font-family: black;
  transition:all 0.2s;
  color: #666;
} 
menu ul li p:hover {
  transform: translateY(-4px);
  cursor: pointer;
  color: #ffcc00;
}
menu ul li:first-child p {
  font-size: 3.5vw;
  transform: scale(4);
  opacity: 0;
  margin: 0;
  text-shadow: 0 0 0 #ffffff;
}
menu ul li:first-child p:hover {
  /*transform: scaleX(4.2);
  text-shadow: 0 0 3px #ffff00, 0 0 5px #ff0000;*/
}
#corner {
  /*mix-blend-mode:difference;*/
  position: fixed;
  top: 0;
  right: 0;
  transition:all 0.4s;
  width: 15vw;
  display: none;
}
#logo {
  mix-blend-mode:normal;
  width: 94%;
  margin: 32vh 3% 0 3%;
}
#logo:hover {
  /*mix-blend-mode:difference;*/
  transform: scale(1.1);
}
#redes {
  bottom: 2.5vw;
  left: 2vw;
  -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
}
#redes ul li {
  padding-left: 4vw;
}
#redes ul li img {
  width: 10vw;
}
#next {
  width: 15vw;
  bottom: 22vw;
  margin-left: -7vw;
}
#location {
  bottom: 4vw;
  width: 9.2vw;
  right: 5vw;
  -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
}
#location:hover {
  transform: scale(1.2) translateY(-4px);
}
#desarrollo {
  display: none;
}
#home {
  width: 100%;
  height: 57vh;
  border: none;
  background-image: url(../img/AurySalonNavidad.jpg);
  background-size: cover;
  background-position: 50%;
  box-shadow: 0 0 200px rgba(0,0,0,0.1) inset;
}
#maquillaje {
  width: 100%;
  height: 48vh;
  background-image: url(../img/maquillaje0.jpg);
  background-size: cover;
  background-position: 5%;
  box-shadow: 0 0 200px rgba(0,0,0,0.2) inset;
  display: flex;
  justify-content: center;
  align-items: center;
}
#maquillaje:hover {
  background-size: cover;
  background-position: 5%;
}
#maquillaje h1 {
  padding-top: 0;
  font-size: 17vw;
  text-shadow: 5px 5px 10px rgba(255,255,255,0.2);
}
#maquillaje h1:hover {
  letter-spacing: 1.5vw;
}
#maquillaje h3 {
  font-size: 5vw;
  margin-top: -20px;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.6);
  transition:all 0.2s;
  mix-blend-mode:normal;
}
#maquillaje h3:hover {
  transform: translateY(-4px);
  color: #00ffff;
}
#peinados {
  width: 100%;
  height: 52vh;
  background-image: url(../img/PEINADOS.jpg);
  background-size: cover;
  background-position: 20%;
  box-shadow: 0 0 200px rgba(0,0,0,0.2) inset;
}
#peinados:hover {
  background-size: cover;
  background-position: 20%;
}
#peinados h1 {
  padding-top: 20vh;
  font-size: 17vw;
  margin-left: 15%;
  text-shadow: 4px 4px 5px rgba(0,0,0,1);
}
#peinados h1:hover {
  letter-spacing: 1.5vw;
  margin-left: 10%;
}
#peinados h3 {
  font-size: 5vw;
  margin: -1.2em 0 0 35%;
  color: white;
  mix-blend-mode:normal;
  transition:all 0.4s;
  text-shadow: 4px 4px 7px rgba(0,0,0,1);
}
#peinados h3:hover {
  transform: translateY(-4px);
  color: #aaffaa;
}
#permanente {
  width: 100vw;
  height: 75vh;
  background-image: url(../img/aurysalonpermanente.jpg);
  background-size: cover;
  background-position: 70%;
  box-shadow: 0 0 40vw rgba(0,0,0,1) inset;
}
#permanente:hover {
  background-size: cover;
  background-position: 70%;
}
#permanente h1 {
  padding-top: 81%;
  font-size: 16vw;
  color: white;
  margin-left: 20%;
  mix-blend-mode: difference;
  transition:all 4s;
  text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}
#permanente h1:hover {
  letter-spacing: .06em;
}
#permanente h2 {
  font-size: 5.5vw;
  text-transform: uppercase;
  color: white;
  letter-spacing: 3vw;
  margin-left: 19.2vw;
  margin-top: -8vw;
  mix-blend-mode:difference;
  transition:all 4s;
  text-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}
#permanente h3 {
  font-size: 5vw;
  margin: -1em 0 0 38%;
  color: white;
  mix-blend-mode:normal;
  transition:all 0.4s;
  text-shadow: 4px 4px 7px rgba(0,0,0,1);
}
#permanente h3:hover {
  transform: translateY(-4px);
  color: #ff2222;
}
#cero {
  display: none;
}
#none {
  display: block;
}
#servicios {
  width: 100vw;
  height: 80vh;
  margin-top: 130vw;
  box-shadow: 0 0 40vw rgba(0,0,0,1) inset;
  overflow: hidden;
}
#servicios h1 {
  font-size: 4vw;
  letter-spacing: 3vw;
  text-align: center;
  padding-top: 16vh;
  color: #505;
}
#servicios p {
  font-size: 7vw;
  width: 100vw;
  letter-spacing: -.1vw;
  line-height: 8vw;
  text-align: center;
  margin-top: 2vw;
  margin-left: 0;
  color: #888;
  mix-blend-mode: difference;
  transition:all 1.3s;
}
#servicios p:hover {
  width: 100vw;
  letter-spacing: -.1vw;
  margin-left: 0;
}
#galeria {
  width: 100%;
  height: auto;
  min-height: 50vh;
}
.vertical {
  width: 33.33333vw;
  height: 33.33333vw;
  float: left;
}
.horizontal {
  width: 33.33333vw;
  height: 33.33333vw;
  float: left;
}
/*.horizontal img {
  height: 100%;
  width: auto;
}*/
.square {
  width: 33.33333vw;
  height: 33.33333vw;
  float: left;
}
#uno {
  background-image: url(../img/galeria/vanidad2.jpg);
}
#cinco {
  background-image: url(../img/galeria/trenzasbeb.jpg);
}
#once {
  background-image: url(../img/galeria/color2.jpg);
}
#quince {
  background-image: url(../img/galeria/promopermanente2.jpg);
}
#trece, #tres {
  background-position: 50%;
}
#gal div div h3 {
  color: rgba(0,0,0,0);
  cursor: default;
}
#gal div:hover {
  box-shadow: 0 0 10vw rgba(0,0,0,1) inset;
}
#gal div div:hover {
  box-shadow: 0 0 10vw rgba(0,0,0,0) inset;
}
#gal div div:hover > h3 {
  color: rgba(0,0,0,0);
  box-shadow: 0 0 10vw rgba(0,0,0,1) inset;
}
#uno h3:hover, #cinco h3:hover, #once h3:hover, #quince h3:hover {
  display: block !important;
}
#uno:hover, #cinco:hover, #once:hover, #quince:hover {
  display: block !important;
}
#contacto {
  width: 100%;
  height: 89vh;
  padding-top: 4vw;
  border: 0 solid transparent;
  border-image: url(../img/borde.png) 22 6 round;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
form {
  width: 85%;
  margin-top: 2vw;
}
form input, textarea, label, #listaservicios {
  background: #bbb;
  border-radius: 20vw;
  line-height: 5vh;
  color: #555;
  font-size: 4.5vw;
  letter-spacing: .4vw;
  resize: none;
  padding: 0 1%;
  margin: 1vw 0;
}
form input:enabled, textarea:enabled, label:enabled, #listaservicios:enabled {
  border: none;
  outline: none;
}
#nombre {
  width: 100%;
  margin: 0 2vh 0 0;
}
#email {
  width: 100%;
  margin: 2vh 0;
}
#phone {
  width: 100%;
  margin: 0 0 0 0;
}
#listaservicios {
  background-color: #555;
  color: #ddd;
  height: 5vh;
  width: 102%;
  padding: 0 1%;
  margin: 2vh 0 0 0;
}
option {
  background-color: #888;
}
#citas {
  background-color: #555;
  color: #ddd;
  width: 100%;
  margin: 2vh 0 0 0;
}
#efectivo {
  width: 3%;
  margin: 0 5% 0 0;
}
#tarjeta {
  width: 3%;
  margin: 0 5% 0 3%;
}
textarea {
	width: 100%;
	height: 20vh;
	line-height: 4vh;
	border-radius: 6vw;
	margin: 0 0 0 0;
	overflow-y: hidden;
}
#reset {
  width: 48%;
  margin: 2vh 2.5% 0 auto;
  background-color: #000;
  color: white;
  transition: all .2s;
}
#submit {
  width: 48%;
  margin: 2vh auto 0 auto;
  background-color: #000;
  color: white;
  transition: all .2s;
}
#contacto h1 {
	width: 90%;
	color: #555;
	font-size: 6vw;
	line-height: 2vw;
	border: 0 dashed #ccc;
	border-left: 0;
	border-right: 0;
	padding: 5vh 0 2.5vh 0;
	border-top: 0;
}
#datos {
	width: 90%;
	margin-top: 4vh;
}
#datos h3 {
	color: #707;
	font-size: 5vw;
	border: 2px dashed #ccc;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	padding: 1.5vw 0 .5vw 0;
	display: none;
}
#contacto p {
	display: none;
}
#descripcion {
	display: none;
}
}
/*--------------------------------------------------------------------------------------------*/
@media (min-aspect-ratio: 19/9) {


#logo {
  mix-blend-mode:normal;
  width: 33vw;
  margin-top: 10vw;
}
menu {
  top: 3.5vw;
  left: 4vw;
  z-index: 9999;
}
menu ul li {
  padding-left: 2vw;
}
menu ul li p {
  font-size: 1.5vw;
  letter-spacing: .4vw;
}
menu ul li:first-child p {
  font-size: 1.4vw;
}
#corner {
  width: 11vw;
}
#redes {
  bottom: 1.4vw;
  left: 2vw;
  z-index: 999;
}
#redes ul li {
  padding-left: 2.5vw;
}
#redes ul li img {
  width: 3.5vw;
}
#redes ul li img:hover {
  transform: scale(1.3);
}
#next {
  width: 6vw;
  bottom: 2vw;
}
#next:hover {
  transform: translateY(-.2vw);
}
#location {
  bottom: 1.5vw;
  width: 4vw;
  right: 2vw;
}
#location:hover {
  transform: scale(1.2) translateY(-4px);
}
#permanente {
  background-image: url(../img/aurysalonpermanente2.jpg);
  background-size: cover;
  background-position: 60% 0;
  height: 80vw;
  transition: all 2s;
}
#permanente:hover {
  background-size: cover;
}
#cero {
  left: 21vw;
  top: 45%;
  z-index: -1;
}
#cero h1 {
  font-size: 8vw;
}
#cero h1:hover {
  letter-spacing: .9vw;
  margin-left: -1.6vw;
}
#cero h2 {
  font-size: 3.2vw;
  letter-spacing: 1.4vw;
  margin-top: -3.2vw;
}
#cero h3 {
  font-size: 2vw;
  margin-top: -2vw;
}
#servicios {
  margin-top: 80vw;
}
#servicios h1 {
  padding-top: 8%;
  letter-spacing: 2.2vw;
}
/*#servicios p {
  font-size: 2vw;
  width: 300vw;
  letter-spacing: 10vw;
  line-height: 2.1vw;
  margin-top: 2vw;
  margin-left: -95vw;
}*/
#servicios p {
  font-size: 2.5vw;
  width: 100vw;
  letter-spacing: .-1vw;
  line-height: 2.5vw;
  margin-top: 2vw;
  margin-left: 0;
}
#servicios p:hover {
  width: 100vw;
  letter-spacing: .-1vw;
  margin-left: 0;
}

}
/*--------------------------------------------------------------------------------------------*/
@media (min-aspect-ratio: 21/9) {

::-webkit-scrollbar {width: .5vw;}
#logo {
  /*mix-blend-mode:difference;*/
  width: 20vw;
  margin-top: 11%;
  margin-left: 1vw;
}
menu {
  top: 1.5vw;
  left: 2vw;
  z-index: 9999;
}
menu ul li {
  padding-left: 1vw;
}
menu ul li p {
  font-size: .55vw;
  letter-spacing: .3vw;
}
menu ul li:first-child p {
  font-size: .7vw;
}
#corner {
  width: 7vw;
}
#redes {
  bottom: .7vw;
  left: 0vw;
  z-index: 999;
}
#redes ul li {
  padding-left: 1.1vw;
}
#redes ul li img {
  width: 1.4vw;
}
#redes ul li img:hover {
  transform: scale(1.3);
}
#next {
  width: 2vw;
  bottom: 1.1vw;
  margin-left: -1vw;
}
#next:hover {
  transform: translateY(-.2vw);
}
#location {
  bottom: 1vw;
  width: 1.5vw;
  right: 1.3vw;
}
#location:hover {
  transform: scale(1.2) translateY(-4px);
}
#home {
  background-image: url(../img/AurySalonNavidad.jpg);
  background-position: 0 -9vw;
  box-shadow: 0 0 10vw rgba(0,0,0,0) inset;
}
#maquillaje {
  background-image: url(../img/maquillaje2.jpg);
  background-size: cover;
  box-shadow: 0 0 10vw rgba(0,0,0,0.5) inset;
}
#maquillaje h1 {
  padding-top: 16%;
  font-size: 7vw;
  text-shadow: 5px 5px 10px rgba(255,255,255,0.2);
}
#maquillaje h3 {
  font-size: 1.2vw;
}
#peinados {
  background-image: url(../img/PEINADOS2.jpg);
  background-size: cover;
  box-shadow: 0 0 10vw rgba(0,0,0,0.5) inset;
}
#peinados:hover {
  background-size: cover;
}
#peinados h1 {
  padding-top: 16.5%;
  font-size: 6vw;
  margin-left: 10vw;
}
#peinados h3 {
  font-size: 1.2vw;
  margin-left: 18.5vw;
  margin-top: -2vw;
}
#permanente {
  background-image: url(../img/aurysalonpermanente2.jpg);
  background-size: cover;
  background-position: 70% 0;
  width: 100%;
  height: 134.5vh;
  box-shadow: 0 0 30vw rgba(0,0,0,1) inset;
}
#permanente:hover {
  background-size: cover;
}
#cero {
  left: 30vw;
  top: 45%;
  z-index: -1;
}
#cero h1 {
  font-size: 5.4vw;
}
#cero h1:hover {
  letter-spacing: .9vw;
  margin-left: -1.6vw;
}
#cero h2 {
  font-size: 1.7vw;
  letter-spacing: 1.4vw;
  margin-top: -1.8vw;
}
#cero h3 {
  font-size: 1.3vw;
  margin-top: -1vw;
}
#servicios {
  margin-top: 130vh;
}
#servicios h1 {
  font-size: .6vw;
  letter-spacing: 2.2vw;
  padding-top: 6.4%;
}
/*#servicios p {
  font-size: 2vw;
  width: 300vw;
  letter-spacing: 7vw;
  line-height: 2vw;
  margin-top: 2vw;
  margin-left: -95vw;
}*/
#servicios p {
  font-size: 2vw;
  width: 100vw;
  letter-spacing: -.07vw;
  line-height: 2vw;
  margin-top: 2vw;
  margin-left: 0;
}
#servicios:hover > p {
  width: 100vw;
  letter-spacing: -.07vw;
  margin-left: 0;
}
#galeria {
	/*border: none; */
}






#contacto {
  width: 100%;
  height: auto;
  min-height: 25vh;
  padding: 3vw 0 1vh 0;
  background: #fff;
  background-image: url(../img/aurysalonnoise.jpg);
  border: 1.5vh solid transparent;
  border-image: url(../img/borde.png) 22 6 round;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
form {
  width: 50%;
  height: 80%;
  margin-top: 2vw;
  mix-blend-mode:multiply;
}
form label {
	background: none;
	color: #222;
}
form input, textarea, label, #listaservicios {
  background: #bbb;
  /*mix-blend-mode:difference;*/
  border: none;
  border-radius: 1.3vw;
  line-height: 1.4vw;
  color: #555;
  font-family: Black;
  font-size: .65vw;
  letter-spacing: .06vw;
  resize: none;
  padding: 0 1%;
  margin: 1vw 0;
}
form input:enabled, textarea:enabled, label:enabled, #listaservicios:enabled {
  border: none;
  outline: none;
}
#nombre {
  width: 50%;
  margin: 0 1% 0 0;
}
#email {
  width: 20%;
  margin: 0 1%;
}
#phone {
  width: 19%;
  margin: 0 0 0 1%;
}
#listaservicios {
  height: 1.4vw;
  width: 34%;
  background-color: #555;
  color: #ddd;
  margin: 1vw 1% 0 0;
}
option {
  background-color: #888;
}
#citas {
  background-color: #555;
  color: #ddd;
  width: 34%;
  margin: 1vw 3% 0 1%;
}
#efectivo {
  width: 3%;
  margin: 0 1% 0 0;
}
#tarjeta {
  width: 3%;
  margin: 0 1% 0 0;
}
textarea {
	width: 98%;
	line-height: 1vw;
	border-radius: 1vw;
	margin: 1vw 1% 0 0;
	overflow-y: hidden;
}
#reset {
  width: 15%;
  margin: 1vw 1% 0 0;
  background-color: #000;
  color: white;
  transition: all .2s;
}
#submit {
  width: 15%;
  margin: 1vw 0 0 0;
  background-color: #000;
  color: white;
  transition: all .2s;
}
#reset:hover, #submit:hover {
  background-color: #707;
}
#contacto h1 {
	font-family: Black;
	width: 50%;
	color: #555;
	font-size: 1.5vw;
	line-height: 2vw;
	border: 2px dashed #ccc;
	border-left: 0;
	border-right: 0;
	padding-bottom: 2vw;
	border-top: 0;
}
/*#contacto h1 span {
	color: #747;
}*/
#contacto h2 {
	font-family: Black;
	color: #707;
	font-size: .6vw;
	line-height: 2vw;
}
#datos {
	width: 75%;
	margin-top: 2vw;
}
#datos h3 {
	color: #707;
	width: 50vw;
	font-size: .9vw;
	border: 2px dashed #ccc;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	padding: 5vh 0 2vh 0;
}
#contacto p {
	font-family: Bold;
	color: #888;
	font-size: .65vw;
	line-height: 1vw;
	border: 2px dashed #ccc;
	border-left: 0;
	border-right: 0;
	/*border-bottom: 0;*/
	letter-spacing: .05vw;
	text-align: left;
	margin-top: .06vw;
}
#contacto p span {
	float: right;
	cursor: pointer;
	transition: all .5s;
}
#contacto p span:hover {
	float: right;
	cursor: pointer;
	color: #a06;
}
#descripcion {
	width: 100%;
	height: 13vh;
}
#descripcion h1 {
	width: 55%;
	padding: .5vw 1vw 0 1vw;
	mix-blend-mode:difference;
	color: white;
	font-family: medium;
	font-size: .7vw;
	border: .3vw solid rgba(255,255,255,0.12);
	border-top: 0;
	border-bottom: 0;
	letter-spacing: .3vw;
	text-align: center;
	margin: 0 auto;
}
#descripcion span {
	background: -webkit-linear-gradient(#f0f, #f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-size: 1vw;
}
/*@media (max-aspect-ratio: 21/9) {
#home {
display: none; 
}
}
@media (aspect-ratio: 21/9) {
#home {
display: none; 
}
}*/