@charset "UTF-8";
/* Body */
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
body {
    font-family: Roboto, Arial Rounded MT, arial, helvetica, lucida;
	font-size: 18px;
	line-height: 32px;
    background-color: #99CC33;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-style: normal;
	width: 100%;
	overflow-x: hidden;
}

/* Container */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height:auto;
    background-color: #FFFFFF;
}
/* Navigation */
.header {
    height: 120px;
    width: 100%;
    background-color: #0099CC;
	display: grid;
	grid-template-columns: auto 200px auto;
	justify-content: center;
}
.logo {
    height: 120px;
    display: grid;
	justify-content: center;
	align-items: center;
}
.logo img {
	height: 110px;
	width: 110px;
}
.navpagina {
	grid-column: 3 / 4;
	justify-content: left;
	height: 120px;
    width: 100%;
    display: grid;
	align-content: end;
}
.navpagina nav {
	height: 100%;
	width: 100%;
	align-items: center;
}
.navpagina nav ul {
 	list-style: none;
	display: grid;
	grid-template-columns: auto auto auto;
}
.navpagina nav ul li {
	width: 100%;
	font-family: roboto medium;
	color: #FFFFFF;
	font-size: 18px;
	text-align: center;
	margin-right: 0px;
	transition: all 0.3s linear;
}
ul li a {
	color: #FFFFFF;
	text-decoration: none;
}
ul li:hover a {
	color: #cc0066;
}

/* Hero Section */
.hero {
	background-color: #FFFFFF;
	height: 80vh;
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: 30px auto 30px;
	align-content: center;
	justify-content: center;
}
.hero_header {
    grid-column: 2 / 3;
	font-family: roboto Black;
	color: #E6007E;
    padding-bottom: 20px;
	font-size: 2rem;
	text-align: center;
}
.hero #logorosales {
	grid-area: 2 / 2 / 3 / 3 ;
	margin-left: auto;
	margin-right: auto;
	width: auto;
	height: auto;
}
.hero #manosycorazon {
	width: 50px;
	height: auto;
}
.tagline {
	grid-area: 3 / 2 / 4 / 3 ;
	font-family: roboto light;
	text-align: center;
	color: #E6007E;
	font-weight: normal;
	font-size: 1.5rem;
	line-height: 2rem;
	display:block;
	padding-top: 20px;
}

	/* Directora Section */
.banner1 {
	background-image: url("../images/nido1.png");
	height: 100vh;
	width: 100%;
	background-size:cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: left center;
	display: grid;
	grid-template-columns: 50px 30% 1fr;
	grid-template-rows: auto auto;
	justify-content: center;
	align-content: center;
}
.parallax1 {
	grid-area: 1 / 2 / 2 / 3;
	color: #E6007E;
	text-align: left;
	padding-bottom: 20px;
}
.parallax_description1 {
	grid-area: 2 / 2 / 3 / 3;
	color: #E6007E;
	text-align: left;
}

/* Aulas por edades */
.about {
	height: auto;
	width: 100%;
	background-color: #BBE3F9;
	display: grid;
	grid-template-rows: auto auto auto;
	justify-content: center;
	align-content: center;
	gap: 50px;
	padding: 50px;
}
#aula1 { grid-row: 1/2;}
#aula2 { grid-row: 2/3;}
#aula3 { grid-row: 3/4;}

#aula1, #aula2, #aula3 {
	height: auto;
	display: grid;
	grid-template-columns: auto 550px;
	align-content: start;
	gap: 30px;
	background-color: #BBE3F9;
}
.fotoaula {
	grid-column: 1/2;
	width: 350px;
	height: auto;
}
.textoaula {
	grid-column: 2/3;
	display: grid;
	grid-template-row: auto auto;
	align-content: center;
	gap: 30px;
}
.stats {
	color: #fff;
	background-color: #E6007E;
	border-radius: 15px;
	font-family: roboto black;
	text-align: center;
	padding: 10px;
}
.about li {
	color: #006699;
	margin-left: 20px;
	text-align: left;
}

/* Nuestra Metodología */
.banner2 {
	background-image: url("../images/metodologia1.jpg");
	width: 100%;
	height: 100vh;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	display: grid;
	grid-template-columns: 1fr 40% 1fr;
	align-content: center;
	justify-content: center;
}
.banner2 div {
	grid-column: 2 / 3;
}
.parallax2 {
	padding-bottom: 50px;
	width: 100%;
	color: white;
	text-align: center;
	font-size: 2.5rem;
	font-family: roboto black;
	text-shadow: -1px -1px 2px #999, 0 0 1px darkred, 1px 1px 1px red, 2px 2px 1px #555, 3px 3px 1px #222, 4px 4px 1px #000;
}
.parallax_description2 {
    color: #fff;
    font-family: roboto medium;
    text-align: center;
    width: 100%;
    font-size: 1.5rem;
    line-height: 2.5rem;
    background-color: rgba(230,0,126,0.75);
    padding: 55px;
    border-radius: 17px;
    border-style: none;
}

  /* Metodologia del Amor */
.banner3 {
	background-image: url("../images/bannermetodologiaamor.jpg");
	height: 100vh;
	width: 100%;
	background-size: cover;
	background-attachment:scroll;
	background-repeat: no-repeat;
	background-position: bottom;
	font-size: 1.2rem;
	display:grid;
	grid-template-columns: 45% 55%;
	align-content: center;
	justify-content: center;
	padding: 50px;
}
.banner3 div {
	grid-column: 2 / 3;
}
.parallax3 {
	width: 100%;
	color: #E6007E;
	text-align: left;
	padding-bottom: 20px;
}
.parallax_description3 {
	color: #E6007E;
	text-align: left;
	width: 100%;
}

/* que ofrecemos */
.ofrecemos {
	background-color:#0096F0;
	padding: 50px;
	width: 100%;
	height: 100vh;
	background-image: url("../images/fondo ambientesysalones.png");
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center;
	display: grid;
	grid-template-columns: 40% auto;
	align-content: center;
	justify-content: start;
}
.locaciones {
	grid-column: 1/2;
	width: 100%;
	display: grid;
	grid-template-rows: auto auto auto;
	align-content: center;
	justify-items: center;
	gap: 30px;
}
.locaciones img {
	grid-row: 3/4;
	width: 280px;
	height: auto;
}
.locaciones h2 {
	grid-row: 1/2;
	font-family: roboto black;
	color: #FFFFFF;
	text-align: center;
}
.locaciones ul {
	grid-row: 2/3;
}
.locaciones li {
	color: #fff;
	text-align: left;
}

/* somos familia */
.somosfamilia {
	background-image: url("../images/fondo somosfamilia.png");
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-color:#fff;
	padding: 50px;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: auto 55%;
	align-content: center;
	justify-content: end;
}
.profesoras {
	grid-column: 2/3;
	display: grid;
	grid-template-rows: auto auto auto;
	align-content: center;
	justify-items: center;
	gap: 30px;
}
.profesoras img {
	grid-row: 2/3;
	width: 280px;
	height: auto;
}
.somosfamilia  h2 {
	grid-row: 1/2;
	font-family: roboto black;
	color: #0096F0;
	text-align: center;
}
.somosfamilia ul {
	grid-row: 3/4;
}
.somosfamilia  li {
	color: #0096F0;
	text-align: left;
}

/* nuestros talleres */ 
.talleres {
	margin: 0;
	padding: 0;
	background-color: #BBE3F9;
	height: 100vh;
	width: 100%;
	display: grid;
	grid-template-rows: 100px auto;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
.titulotalleres {
	grid-row: 1 / 2;
	background-color: #0096F0;
	width: 100%;
	height: 100px;
	color: white;
	display: grid;
	align-content: center;
}
.titulotalleres h2 {
	text-align: center;
	font-family: roboto black;
}
.talleres article {
	grid-row: 2 / 3;
	width: 40vw;
	height: 100%;
}
.slider-frame {
  	position: relative;
  	width: 100%;
  	height: 100%;	
}
.slider-frame > img {
  	position: absolute;
	left: calc(50% - 250px);
  	opacity: 0;
  	animation: display 28s infinite;
}

@keyframes display {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  3% {
    transform: translateX(0);
    opacity: 1;
  }
  20% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0;
  }
}

img:nth-child(2) {
  animation-delay: 7s;
}
img:nth-child(3) {
  animation-delay: 14s;
}
img:nth-child(4) {
  animation-delay: 21s;
}

/* -- footer -- */
.footer_banner {
	width: 100%;
	background-color: #fff;
	padding: 60px;
	display: flex;
}
.titulopie{
	color: #CC0067;
	font-family: roboto black;
	text-align: center;
}
.direytel {
	display:flex;
	flex-direction: column;
	width:50%;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.datoscontacto{
	padding-top: 20px;
	color: #CC0067;
	line-height: 2.5rem;
}
.escribenos {
	width: 50%;
}
.form {
	width: 70%;
	padding: 0.5em 0.5em;
	margin: auto;
	display: grid;
	gap: 1em;
	grid-auto-columns: 100%;
}
.form_input {
	font-family: inherit;
	font-size: 1.5rem;
	padding: 0.8em 1em;
	outline: none;
	border: none;
	border: 1px solid #CC0067;
	border-radius: 0.3em;
}
.form_input--message {
	resize: none;
	padding: 1.8em 1em;
	margin-bottom: 0.5em;
}
.form_cta {
	color: #fff;
	border: none;
	background-color: #CC0067;
	font-family: inherit;
	font-size: 1.5rem;
	padding: 0.7em 0;
	border-radius: 0.3em;
}
.form_cta:hover {
	background-color: #F00079;
	color: #fff;
	cursor: pointer;
}

.autorizados {
	text-align: center;
	padding: 30px;
}

/* boton whatsap */
.contenedorbotonwasap {
	width: 80px;
	height: 80px;
	background-color: darkgreen;
	border: 2px solid white;
	position: fixed;
	z-index: 999;
	border-radius: 50%;
	bottom: 30px;
	right: 30px;
	transition: 0.3s;
	animation: efectoboton infinite 1.2s;
	display: flex;
	overflow: hidden;
}
.contenedorbotonwasap:hover{
	transform: scale(1.1);
	transition: 0.3s;
}
.contenedorbotonwasap div {
	display: grid;
	justify-content: center;
	align-items: center;
}
.botonwasap {
	width: 77px;
	transition: ease 1s;
}

@keyframes efectoboton {
	0% {
		box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
	}
	100% {
		box-shadow: 0 0 0 25px rgba(0,0,0,0);
	}
}

.copyright {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-align: center;
	padding: 10px;
	background-color: royalblue;
	color: #FFFFFF;
	font-weight: bolder;
	letter-spacing: 2px;
	border-top-width: 2px;
	font-size: 1rem;
}


@media screen and (max-width: 480px) {
	.header {
	    height: 110px;
	    grid-template-columns: auto 100px auto;
		}
	.logo {
    	height: 110px;
		}
	.logo img {
		height: 70px;
		width: 70px;
		}
	.navpagina {
		height: 110px;
		}
	.navpagina nav ul {
 		grid-template-columns: 1fr;
		}
	.navpagina nav ul li {
		font-size: 15px;
		text-align: right;
		}
	
	.hero #logorosales {
		width: 90%;
		}
	.tagline {
		font-size: 1.2rem;
		line-height: 2rem;
		}
	
	/* Directora Section */
	.banner1 {
		grid-template-columns: 50px 100% 50px;
		}

	/* Nuestra Metodologia */
	.banner2 {
		grid-template-columns: 20px auto 20px;
		}
	.banner2 div {
		grid-column: 2 / 3;
		}
	.parallax2 {
		font-size: 18px;
		line-height: 50px;
		}
	.parallax_description2 {
    	font-size: 1.2rem;
    	line-height: 2rem;
    	padding: 30px;    
		}

	.banner3 {
		display: none;
		}

	.talleres {
		display: none;
		}

	.footer_banner {
		padding: 10px;
		}

	.titulopie{
		font-size: 20px;
		}
	.direytel {
		font-size: 12px;
		line-height: 30px;
		}
	.datoscontacto{
		line-height: 30px;
		}
	
	.autorizados {
		text-align: center;
		padding: 30px;
		padding-bottom: 90px;
		}
	}

@media screen and (max-width: 640px) {
	.header {
	    height: 100px;
	    grid-template-columns: auto 100px auto;
		}
	.logo {
    	height: 100px;
		}
	.logo img {
		height: 90px;
		width: 90px;
		}
	.navpagina {
		height: 100px;
		}
	/* Directora Section */
	.banner1 {
		grid-template-columns: 50px 70% 1fr;
		}

	/* Nuestra Metodologia */
	.banner2 {
		grid-template-columns: 1fr 70% 1fr;
		}

	  /* Metodologia del Amor */
	.banner3 {
		grid-template-columns: 18% auto;
		}
	
	/* que ofrecemos */
	.ofrecemos {
		grid-template-columns: 100% auto;
		}
	/* somos familia */
	.somosfamilia {
		background-image: none;
		grid-template-columns: auto 100%;
		}

	.form {
		width: 95%;
		}

	#aula1, #aula2, #aula3 {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		align-content: center;
		justify-items: center;
		}
	.fotoaula {
		grid-column: 1/2;
		grid-row: 1/2;
		width: 350px;
		height: auto;
		}
	.textoaula {
		grid-column: 1/2;
		grid-row: 2/3;
		display: grid;
		}
	}

@media screen and (max-width: 1170px) {
	.ofrecemos {
		background-position: left center;
		}
	.parallax2 {
		font-size: 2.3rem;
		}
	.parallax_description2 {
    	font-size: 1.2rem;
    	line-height: 2.1rem;
    	}
	.somosfamilia {
		background-position: left bottom;
		}
	.autorizados {
		font-size: 12px;
		}
	.form *{
		font-size: 14px;
		}
	}

@media screen and (min-width: 1171px) {
	}