/* colors 
	purple: #8360c3 
	green: #2ebf91 
	
 pags:
 gradiente: https://uigradients.com/#KyeMeh


*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 20px;
}
body{
	font-family: Quicksand;
}
section{
	padding: 60px 0;
	width: 90%;
	max-width: 1000px;
	margin: auto;
	overflow: hidden;
}
.titulo{
	color: #8360c3;
	font-size: 60px;
	text-align: center;
	margin-bottom: 60px;
	text-transform: uppercase;
	font-family: Oswald;
}
h3{
	font-family: Oswald;
	font-size: 35px;
	padding: 5px;
}

header{
	width: 100%;
	height: 600px;
	 /* background: #8360c3;  /* fallback for old browsers */
	 /* background: -webkit-linear-gradient(to right, rgba(127, 104, 184,0.8),  rgba(222, 212, 235,0.8)),url(fotos/dj9.jpg);  /* Chrome 10-25, Safari 5.1-6 */
	 /* background: linear-gradient(to right, rgba(127, 104, 184,0.8),  rgba(222, 212, 235,0.8 )),url(fotos/dj9.jpg);

	background: #0f0c29;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, rgba(127, 104, 184,0.8), rgba(147, 144, 234,0.8), rgba(127, 104, 184,0.8)),url(fotos/consultorio.jpg);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, rgba(127, 104, 184,0.8),  rgba(147, 144, 234,0.8), rgba(127, 104, 184,0.8)),url(fotos/consultorio.jpg); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	background-size: cover;
	background-attachment: fixed;
	position: relative;
	background-position-y: center;
}

nav > div{
	text-align: right;
	padding: 30px 50px 0 0;
}
.logo{
	margin: 25px;
	text-align: left;
	width: 100px;
	position: absolute;
	border: double rgba(250,250,250,1);
	border-radius: 50%;
}
nav > div > a{
	color: white;
	font-weight: 300;
	text-decoration: none;
	margin: 10px;
}
nav > div > a:hover{
	text-decoration: underline;
}

#texto-header h1{
	margin-top: 150px;
	font-size: 50px;
	color: white;
	text-align: center;
}
#texto-header h2{
	font-size: 30px;
	color: white;

	text-align: center;
}

.wave{
	position: absolute;
	bottom: 0;
	width: 100%;
	margin:0 0 0 0;
	padding: 0px;
}

.contenedor-perfil{
	display: flex;
	justify-content: space-evenly;
	list-style: none;
}

#perfil .contenedor-texto-perfil{
	padding: 20px;
}

.imagen-perfil{
	max-width: 350px;
	max-height: 450px;
	border: double #DED4EB;
	border-radius: 45%;
	margin: auto;
	display: block;
}

.subtitulo{
	padding: 20px 5px;
	text-align: center;
	margin-bottom: 30px;
	color: white;
	background-color:#A5CF6F;
	text-transform: uppercase;

}
.contenedor-texto-perfil h3{
	margin-bottom: 15px;
}


.contenedor-texto-perfil p{
	padding: 0px 0px 30px 15px;
	text-align: justify;
}
#perfil ul{
        width: 100%;
        margin: auto;
        padding: 0 0 0 20px;
    }
#servicios
{
	width: 100%;
	max-width: 100%;
	background: #00b09b;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, rgba(150, 201, 61,0.8), rgba(0,176,155,0.8));  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, rgba(150, 201, 61,0.8), rgba(0,176,155,0.8)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	background-position-y: center;
}
#servicios .titulo{
	color: white;
}
.container-services{
   max-width: 1200px;
   margin:0 auto;
   padding:3rem 2rem;
}

.container-services .title{
   font-size: 3.5rem;
   color:#444;
   margin-bottom: 3rem;
   text-transform: uppercase;
   text-align: center;
}

.container-services .services-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   gap:2rem;
}

.container-services .services-container .services{
   text-align: center;
   padding:3rem 2rem;
   background: #fff;
   box-shadow: 0 .5rem 1rem rgba(0,176,155,0.8);
   outline-offset: -1.5rem;
   cursor: pointer;
}

.container-services .services-container .services:hover{
   outline: .2rem solid rgba(230,230,230,0.8) ;
   outline-offset: 0;
}

.container-services .services-container .services img{
   height: 11rem;
}

.container-services .services-container .services:hover img{
   transform: scale(.9);
}

.container-services .services-container .services h3{
   padding:.5rem 0;
   color:#444;
}

.container-services .services-container .services:hover h3{
   color:#27ae60;
}

.container-services .services-container .services .price{
   font-size: 2rem;
   color:#444;
}

.services-preview{
   position: fixed;
   top:0; left:0;
   width: 100%;
   background: rgba(200, 200, 200, 0.7);
   display: none;
   align-items: center;
   justify-content: center;
   height: 100%;
}

.services-preview .preview{
   display: none;
   padding:2rem;
   text-align: center;
   background: #fff;
   position: relative;
   margin:2rem;
   width: 40rem;
   max-height: 100%;
   overflow: scroll;
}

.services-preview .preview.active{
   display: inline-block;
}

.services-preview .preview img{
   max-width: 80%;
   max-height: auto;
}

.services-preview .preview .fa-times{
   position: absolute;
   top:1rem; right:1.5rem;
   cursor: pointer;
   color:#444;
   font-size: 4rem;
}

.services-preview .preview .fa-times:hover{
   transform: rotate(90deg);
}

.services-preview .preview h3{
   color:#444;
   padding:.5rem 0;
   font-size: 2.5rem;
}

.services-preview .preview p{
   line-height: 1.5;
   padding:1rem 0;
   font-size: 1.6rem;
   color:#777;
   overflow: scroll;
}

.testimonios li{
	color:black;
	padding: 30px;
	list-style: none;
	width: 400px;
	margin: auto;
	margin-bottom: 30px;
	text-align: justify;
}
.testimonios h3{
	color:#8360c3;
	margin: 10px;
	text-align: right;
}
#contacto{
	width: 100%;
	max-width: 100%;
	background: -webkit-linear-gradient(to right, rgba(127, 104, 184,0.8), rgba(147, 144, 234,0.8), rgba(127, 104, 184,0.8)),url(fotos/oficina.jpeg);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, rgba(127, 104, 184,0.8),  rgba(147, 144, 234,0.8), rgba(127, 104, 184,0.8)),url(fotos/oficina.jpeg); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	background-position-y: center;
	color: white;
}
#contacto .titulo{
	color: white;
}
.contenedor-contacto{
	margin: auto;
	padding: 20px;
	margin-bottom: 10px;
}
.contacto-ind{
	margin: auto;
	text-align: center;
	overflow: hidden;
}

#contacto iframe{
	width: 450px;	
	height: 400px;
	margin: auto;
	border-radius: 5px;
}

#contacto ul{
	width: 90%;
	display: inline-flex;
	list-style: none;
	padding-bottom: 150px;
}

#contacto li{
	width: 450px;	
	margin: auto;
	margin: 5%;
	text-align: center;
	padding-bottom: 20px;
	overflow: hidden;
}
#contacto-info{
	background: white;
	border-radius: 5px;
	color: rgba(50,50,50,0.8);
	padding: 15px;
}
footer{
	width: 100%;
	background-color: #A5CF6F;
}
.contenedor-footer{
	width: 100%;
	margin: auto;
	text-align: center;
	display: inline-flex;
	padding: 20px;
}
.contenedor-footer h3{
	color: white;
}
.contenedor-footer>div{
	width: 50%;
}
.contenedor-footer p, .contenedor-footer a{
	padding: 5px;
	font-family: Open Sans;
	font-size: 20px;
	color: white;
}
#humanitos{
	padding: 20px;
	text-align: center;
	color: rgba(250,250,250,0.8);
}
#humanitos a{
	color: white;
}
#contenedor-footer{
	margin:auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 50px;
	padding: 45px 0px;
}
.contenedor-footer a{
	text-decoration: none;
	color: white;
}

.redes-sociales{
	margin: auto;
	text-align: center;
	overflow: scroll;
}
@media (max-width:1007px){
	*{
		font-size: 15px;
		max-width: 100%;
	}
	nav div{
		display: none;
	}
	#texto-header h1{
	font-size: 40px;
	}
   .services-preview .preview img{
      max-width: 80%;
   }

   .contenedor-perfil{
	display: inline;
	justify-content: space-evenly;
	list-style: none;
   }

	.imagen-perfil{
		margin-left: 50px;
		margin: auto;
	}
	.testimonios li{
	padding: 10px;
	max-width: 90%;
}
	#contacto ul{
	display: inline-block;
	list-style: none;
	margin: auto;
	}
	#contacto li{
	margin: auto;
	text-align: center;
	overflow: scroll;
	max-width: 100%;
	}

	#contacto a{
		text-decoration: none;
	}

}