/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Montserrat');
@font-face{font-family:"Sweetly-Broken";src:url(../fonts/Sweetly-Broken.ttf) format("truetype");}
body{margin:0; padding:0;}
p{font-family: 'Inconsolata', monospace;}
.ordenador{display:block;}
.mobile{display:none;}
.left{float:left;}
.right{float:right;}

 @media screen and (min-width: 90px){
	header{
		width:100%; height:50px;
		background-image:url(../img/header5.jpg); 
		background-size:cover; background-repeat:no-repeat; 
		text-align:center; 
		position:relative; color:white;
	}
	.espacio{
		padding-top: 335px;
	}
}

@media screen and (min-width: 900px){
	header{
		width:100%; height:500px;
		background-image:url(../img/header3.jpg); 
		background-size:cover; background-repeat:no-repeat; 
		background-position:center; text-align:center; 
		position:relative; color:white;
	}
	.boton{
		margin-top: 180px;
	}
}
.row1{width:90%; float:left; margin-left:5%;}
.row1 > div{width:33%; float:left; font-family: 'Inconsolata', monospace; color:white; font-size:14px;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
header > h1{width:100%; float:left; text-align:center;}
.titulo-header{font-family:"Sweetly-Broken"; margin-top:100px; font-size: 135px; font-weight: normal; margin-bottom: 0;}
.subtitulo-header{font-family: 'Montserrat', sans-serif; font-size:20px; font-weight:normal;}

.div-menu{position: absolute; bottom: 0; left: 0; right: 0;}
.nav-menu{font-family: 'Montserrat', sans-serif;}
.nav-menu ul{display: inline-block; list-style: none; line-height: 53px;}
.nav-menu ul li{margin-right: 50px; float:left; position:relative; color:white;}
.nav-menu > li:last-child {margin-right: 0;}
.nav-menu > li:last-child > ul {right: 0;}
.nav-menu ul li a {
	display: inline-block;
	color: #fff;
    opacity: .8;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 3px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	text-decoration: none;
    outline: none;
}

.boton {
    background-color: #008CBA; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.fixed{position:fixed;top:0px; left:0; right:0; width: 100%; height:auto; z-index:3; background-color:white;}
.fixed > ul{line-height:25px;}
.fixed > ul > li > a{color:#333;}

.section1{width:96%; padding:25px; float:left;}
.estetica > .div1,.div5{width:42%; padding-left:63px}
.hombre > .div1{width:42%; padding-left:63px;}
.mujer > .div1{width:42%; padding-right:63px}
.tratamientos > .div1{width:42%; padding-right:63px}
.div2{width:46%;}
.div3{width:45%; margin: 25px 23%;}
.div4{width: 60%; margin: 25px 16%;}
.div5 > div{width:100%; height:200px; margin:5px;}
.div6{width:45%;}
.div6 > div{width:100%; height:200px; margin:5px;}
.div1 > div{width:46%; padding:10px;}
.div2 > div{padding:0 20px; font-family: 'Montserrat', sans-serif; text-transform:uppercase;}
[id^=tituloHombre], [id^=tituloEstetica], [id^=tituloTratamientos]{float: none; display: inline;}

.estetica1{background-image:url(../img/estetica1.jpg); background-size:cover; background-position:center;}
.estetica2{background-image:url(../img/estetica2.jpg); background-size:cover; background-position:center;}

.tratamientos1{background-image:url(../img/tratamientos1.jpg); background-size:cover; background-position:center;}
.tratamientos2{background-image:url(../img/tratamientos2.jpg); background-size:cover; background-position:center;}

.titulo {
  background: #25262e;
  display: inline-block;
  padding: 0 12px 0 24px;
  text-align: center;
  position: relative;
  height: 24px;
  font-family: 'Montserrat', sans-serif;
}
.titulo h6 {color: #ffffff; letter-spacing: 3px; line-height: 24px; font-size: 16px; margin:0; text-transform:uppercase;}
.titulo:after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  border: 12px solid #25262e;
  z-index: -1;
  right: -24px;
  border-left-width: 24px;
  border-right-color: transparent;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px;
}
.explicacion{padding: 20px 70px; line-height:2}
.activo{text-decoration:underline; color:black;}
.grey{color:#666;}
.pointer{cursor:pointer;}
.block{display:block;}
.none{display:none;}
.bold{font-weight:bold;}
.hombre {float:left; margin-top:25px; width:100%;}
.mujer, .estetica, .contacto, .tratamientos {float:left; margin-top:25px; width:100%; padding-top:25px}
.map {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);
}
.recuadro-mapa{width:45%; height:350px; background-color:white; position:absolute; top:25%; left:28%;}
.recuadro-mapa > div{text-align:left; padding: 25px 70px;}
.recuadro-mapa > div > p{margin:32px 0;}
.btn-mapa:hover{background: #333;color: #fff;}
.btn-mapa{font-family: 'Montserrat', sans-serif; padding: 12px 26px;; border:1px solid #333; border-radius:4px; line-height: 36px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 3px; text-decoration:none; color:#333; cursor:pointer;}
.div-boton{width:45%; position:absolute; bottom:10%; left:28%;}
footer{background-color:#25262e; width:100%; height:200px; float:left; color:white; font-family: 'Montserrat', sans-serif;}
footer > div{margin-left:10%; width:40%;}
.titulo-footer{font-family:"Sweetly-Broken"; font-size: 60px; font-weight: normal; margin-bottom: 0; margin-top:0;}
.subtitulo-footer{font-family: 'Montserrat', sans-serif; font-size:10px; font-weight:normal;}
@media only screen and (max-width:780px){
	.ordenador{display:none;}
	.mobile{display:block;}
	header{height:auto;}
	
	.titulo-header{margin-top:20px; font-size: 85px;}
	.subtitulo-header{font-size:14px;}
	
	.fixed2 > .titulo-header{position:fixed; font-size:50px; float:left; background-color:#25262e; margin-top:0; padding:10px 0; z-index:3;}
	.fixed2 > .mobile > .menu{right:0; position:fixed; top:10px; z-index:4;}
	
	.row1 > div{width:100%; text-align:center;}
	.section1{width:94%; padding:10px;}
	.explicacion{padding: 25px 5px; line-height: 1.5em;}
	.estetica > .div1{width:100%; padding-left:0px;}
	.hombre > .div1{width:100%; padding-left:0px;}
	.mujer > .div1{width:100%; padding-right:0px;}
	.div1 > div{width:48%; padding:2px;}
	.div2, .div6, .div5{width:100%; padding:0; margin:0;}
	.div2 > div{width: 96%; margin-bottom:15px; font-size:14px; padding:5px;}
	.div3{margin:0;}
	.div4{margin:0;}
	.div5 > div{width:97%;}
	.div6 > div{width:97%;}
	.recuadro-mapa{width:80%; left:10%;}
	.recuadro-mapa > div{padding:20px; font-size:14px;}
	.recuadro-mapa > div > p{margin:12px 0;}
	.div-boton{width:60%; left:22%;}
	[id^=tituloHombre], [id^=tituloEstetica], [id^=tituloTratamientos]{float: left; border: 1px solid black; text-align:center;}
	#tituloMujer{border: 1px solid black; text-align:center;}
	footer{height:auto; width:100%;}
	footer > div{margin-left:0%; width:100%; text-align: center;}
	
	.fixed2 > .mobile > .nav-menu{position:fixed; top:71px; border-top:1px solid white;}
	.nav-menu{display:none; position: absolute; top: 300px; z-index: 4; width: 100%; text-align:center; height:auto;}
	.nav-menu ul{box-shadow:0 1px 2px rgba(0,0,0,.5);width: 100%; list-style: none; padding: 0; margin: 0;}
	.nav-menu li{background:#25262e!important; border-bottom:1px solid #333; width:100%;}
	.nav-menu li:last-child{border-bottom:0}
	.nav-menu > ul > li > a{padding:0;line-height:50px; height:55px;}
	.nav-menu a{color:white; width:100%;}
	.nav-menu ul.open-menu{max-height:400px;transition:max-height .4s}
	.nav-menu ul.close-menu{max-height:0;transition:max-height .4s}
	.fixed > nav li li a{color:white; text-decoration:none; line-height: 30px; font-family:'Playfair Display', serif; font-weight:bold; letter-spacing: 1px;}
	nav li ul {
	   display: block;
	   padding-left:0;
	   text-align:center;
	}
	.nav-menu{-webkit-animation-name:example;-webkit-animation-duration:0.8s;animation-name:example;animation-duration:0.8s;}
	.fixed2 > .mobile > .nav-menu{-webkit-animation-name:example2;-webkit-animation-duration:0.8s;animation-name:example2;animation-duration:0.8s;}
	@-webkit-keyframes example{0%{left:-300px;top:300px;}
	100%{left:0px;top:300px;}
	}
	@-webkit-keyframes example2{0%{left:-300px;top:72px;}
	100%{left:0px;top:72px;}
	}
}