@import url('../fonts/Lobster/lobster.css');
@import url('../fonts/Lato/lato.css');

:root {
  --azul: #1e6c93;
  --header: #212121;
  --rgba: rgba(100, 100, 100, .3);
  --rgba2: rgba(40, 40, 40, .5);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato';
  outline: none;
}

html, body { height: 100%; }

header {
  position: fixed;
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  z-index: 10;
  transition: all 300ms;
}
header.fondo {
  background: var(--header);
}
header .logo {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-size: 14pt;
  padding: 8px 0;
}
header .logo img {
  max-height: 55px;
  height: 100%;
}
header nav#menuPC > ul {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 30px;
}
header #menuPC > ul li a,
header #menuPC > ul li p {
  color: #fff;
  text-decoration: none;
  padding: 8px 5px;
  font-size: 12pt;
  display: block;
}
header #menuPC > ul li p:hover + ul.submenu,
header #menuPC ul.submenu:hover {
  display: block;
}
header #menuPC ul.submenu {
  display: none;
  position: absolute;
  padding: 5px;
  background: var(--header);
  list-style: none;
  left: 0;
}
header #menuPC ul.submenu a {
  display: block;
  padding: 8px 15px;
}
header #menuPC ul.submenu a:hover {
  color: rgb(73,170,212);
}
header #buttonCel {
  display: none;
  cursor: pointer;
  grid-auto-flow: column;
  align-items: center;
  grid-gap: 15px;
  background: none;
  border: none;
  padding: 5px 10px;
  color: #fff;
  font-size: 14pt;
}
header #menuCel { position: absolute; }
header #menuCel .fondo {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0,0,0,0.3);
}
header #menuCel nav {
  padding: 5px 10px;
  background: var(--header);
  height: 100%;
  position: fixed;
  top: 0;
  right: -220px;
  z-index: 11;
}
header #menuCel nav > div { text-align: right;}
header #menuCel nav .cerrar {
  padding: 10px;
  cursor: pointer;
  background: none;
  border: none;
}
header #menuCel nav ul {
  list-style: none;
}
header #menuCel nav ul li a,
header #menuCel nav ul li p {
  display: block;
  padding: 8px 20px 8px 8px;
  text-decoration: none;
  color: #fff;
}
header #menuCel nav ul li a:hover {
  color: rgb(73,170,212);
}

header #menuCel nav .cerrar path { fill: #fff; }

footer {
  margin: 0 auto;
  padding: 100px 50px;
  background:linear-gradient(0deg, var(--rgba), var(--rgba)), url('../img/fondo.jpg');
  background-size: cover;
  display: grid;
  grid-gap: 50px;
}
footer h3 {
  text-align: center;
  color: #fff;
  font-size: 18pt;
  line-height: 30pt;
}
footer h3.underline { text-decoration: underline; }


main.index {
  height: 100%;
  background:linear-gradient(0deg, var(--rgba), var(--rgba)), url('../img/fondo.jpg');
  background-size:cover;
  display: grid;
  align-items: center;
}
main.index .contenido {
  padding: 0 20px;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  grid-gap: 100px;
}
main.index .contenido h1 {
  font-family: 'Lobster';
  color: #fff;
  max-width: 450px;
  font-size: 65pt;
  text-align: center;
}
main.index .contenido img {
  max-width: 425px;
  width: 100%;
}

section.index {
  padding: 50px 20px;
  background: var(--azul);
}
section.index .contenido {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 50px;
}
section.index h2 {
  color: #fff;
  font-family: 'Arial';
  text-align: center;
}
section.index .texto {
  display: grid;
  grid-gap: 20px;
}
section.index .texto h2.uno { font-size: 22pt; }
section.index .texto h2.dos { font-size: 24pt; }
section.index .slide { overflow: hidden; }
section.index .slide .swiper-slide {
  height: 525px;
  background-position: center;
  background-size: cover;
}
section.index .slide .swiper-btn {
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 100%;
}
section.index .slide .swiper-btn::after {
  content: unset !important;
}
section.index .slide .swiper-btn path {
  fill: var(--azul);
}
section.index .videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
}
section.index .videos iframe { width: 100%; }




main.quienes-somos {
  height: 100%;
  background:linear-gradient(0deg, var(--rgba), var(--rgba)), url('../img/fondo.jpg');
  background-size:cover;
  display: grid;
  align-items: center;
}
main.quienes-somos .contenido {
  padding: 20px;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  grid-gap: 150px;
}
main.quienes-somos .contenido h2 {
  font-family: 'Lobster';
  color: #fff;
  max-width: 450px;
  font-size: 36pt;
  text-align: center;
  line-height: 60pt;
  margin-bottom: 50px;
}
main.quienes-somos .contenido p {
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 18pt;
  line-height: 40pt;
}
main.quienes-somos .contenido img {
  max-width: 425px;
  width: 100%;
}

section.quienes-somos {
  padding: 0 20px;
  background: var(--azul);
}
section.quienes-somos * {
  font-family: 'Caveat';
  font-size: 24pt;
  line-height: 40pt;
  font-weight: 700;
  color: #fff;
  text-align: justify;
}
section.quienes-somos p { margin: 30px 0; }
section.quienes-somos p.center { text-align: center; }
section.quienes-somos .contenido > div p:first-child { margin-top: 0; }
section.quienes-somos .contenido > div p:last-child { margin-bottom: 0; }
section.quienes-somos h2 {
  font-size: 50pt;
  text-align: center;
  margin-bottom: 50px;
}
section.quienes-somos h3 {
  margin: 60px 0;
  font-size: 28pt;
  text-decoration: underline;
  text-align: center;
}

section.quienes-somos .contenido {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
section.quienes-somos .contenido > div {
  padding: 50px 0;
}
section.quienes-somos .contenido .border {
  border-bottom: 1px solid #fff;
}
section.quienes-somos .contenido .dos {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 50px;
}
section.quienes-somos .contenido .dos h3 {
  text-align: center;
  align-self: center;
  font-size: 30pt;
  line-height: 40pt;
}
section.quienes-somos .contenido .dos img {
  max-height: 500px;
}





main.avisos {
  padding: 100px 0 50px 0;
  background:linear-gradient(0deg, var(--rgba2), var(--rgba2)), url('../img/fondo.jpg');
  background-size:cover;
}
main.avisos  h1 {
  font-family: 'Lobster';
  color: #fff;
  font-size: 48pt;
  text-align: center;
}
section.avisos .aviso { background-size: cover; }
section.avisos .a1 { background-image: url('../img/aviso_fondo_1.jpg'); }
section.avisos .a3 { background-image: url('../img/aviso_fondo_3.jpg'); }
section.avisos .a2 { background-image: url('../img/aviso_fondo_2.jpg'); }
section.avisos .aviso .contenido {
  padding: 40px 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 375px);
  align-items: center;
}
section.avisos .aviso .contenido p {
  text-align: center;
  font-size: 19pt;
  font-weight: 700;
  line-height: 35pt;
}
section.avisos .aviso .contenido p.fecha { font-size: 12pt; }
section.avisos .aviso .contenido img {
  max-width: 100%;
  width: 100%;
}





main.clases {
  padding: 100px 0 50px 0;
  background:linear-gradient(0deg, var(--rgba2), var(--rgba2)), url('../img/fondo.jpg');
  background-size:cover;
}
main.clases  h1 {
  font-family: 'Lobster';
  color: #fff;
  font-size: 48pt;
  text-align: center;
}

section.clases {
  background: var(--azul);
  padding: 50px 20px 25px 20px;
}
section.clases .contenido {
  max-width: 1100px;
  margin: 0 auto;
}
section.clases .contenido h3 {
  text-align: center;
  color: #fff;
  font-size: 24pt;
  line-height: 35pt;
  margin-bottom: 50px;
}
section.clases .contenido .actividad * { color: #fff; }
section.clases .contenido .actividad {
  padding: 50px 0;
  border-bottom: 1px solid #fff;
  display: grid;
  grid-template-areas: "titulo titulo" "imagen texto";
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
}
section.clases .contenido .actividad:last-child { border-bottom: none; }
section.clases .contenido .actividad h2 {
  grid-area: titulo;
  font-family: 'Lobster';
  font-size: 36pt;
  text-align: center;
}
section.clases .contenido .actividad img {
  grid-area: imagen;
  max-width: 100%;
}
section.clases .contenido .actividad p {
  grid-area: texto;
  align-self: center;
  font-size: 24pt;
  font-weight: 700;
  text-align: justify;
  line-height: 35pt;
}





main.fotos {
  padding: 100px 20px 50px 20px;
  background: var(--azul);
}
main.fotos h1 {
  font-family: 'Lobster';
  color: #fff;
  font-size: 48pt;
  text-align: center;
  margin-bottom: 50px;
}
main.fotos .fotos {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 25px;
}
main.fotos .fotos img { width: 100%; }





main.videos {
  padding: 100px 20px 50px 20px;
  background: var(--azul);
}
main.videos h1 {
  font-family: 'Lobster';
  color: #fff;
  font-size: 48pt;
  text-align: center;
  margin-bottom: 50px;
}
main.videos .videos {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
}
main.videos .videos iframe { width: 100%; height: 300px; }





main.contactanos {
  padding: 100px 0 50px 0;
  background:linear-gradient(0deg, var(--rgba2), var(--rgba2)), url('../img/fondo.jpg');
  background-size:cover;
}
main.contactanos  h1 {
  font-family: 'Lobster';
  color: #fff;
  font-size: 48pt;
  text-align: center;
}
section.contactanos {
  background: var(--azul);
  padding: 50px 20px;
}
section.contactanos .contenido {
  max-width: 1100px;
  margin: 0 auto;
}
section.contactanos .contenido * { color: #fff; }
section.contactanos .contenido .mensaje { margin-bottom: 50px; }
section.contactanos .contenido .mensaje h3 {
  text-align: center;
  font-size: 24pt;
  line-height: 40pt;
}
section.contactanos .contenido .datos {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: 1fr 1fr;
}
section.contactanos .contenido .datos > div {
  display: grid;
  grid-template-areas: "titulo titulo" "imagen texto";
  grid-template-columns: auto 1fr;
  grid-gap: 20px 50px;
}
section.contactanos .contenido .datos > div h2 {
  grid-area: titulo;
  text-align: left;
}
section.contactanos .contenido .datos > div img {
  max-width: 100px;
}
section.contactanos .contenido .datos > div a {
  align-self: center;
  text-align: left;
  font-size: 15pt;
  word-wrap: anywhere;
}

@media screen and (max-width: 900px) {
  header #menuPC { display: none; }
  header #buttonCel { display: grid; }


  
  main.index .contenido h1 { font-size: 35pt; }
  main.index .contenido img { max-width: 300px; }
  section.index .contenido { grid-gap: 20px; }
  section.index .videos {
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }



  main.quienes-somos .contenido { grid-gap: 50px; }
  section.quienes-somos .contenido > div { padding: 20px 0; }
  main.quienes-somos .contenido img { max-width: 250px; }
  main.quienes-somos .contenido h2 {
    font-size: 30pt;
    line-height: 32pt;
  }
  main.quienes-somos .contenido p { line-height: 25pt; }
  section.quienes-somos h3 { margin: 0 0 40px 0; }
  section.quienes-somos .contenido .dos {
    display: block;
    text-align: center;
  }
  section.quienes-somos .contenido .dos img {
    max-height: unset;
    max-width: 200px;
    text-align: center;
  }



  section.avisos .aviso .contenido { grid-template-columns: 1fr minmax(auto, 275px); }



  section.clases { padding: 20px; }
  section.clases .contenido h3 {
    margin-bottom: 0;
    font-size: 22pt;
    line-height: 30pt;
  }
  section.clases .contenido .actividad { 
    grid-template-columns: minmax(auto, 350px) 1fr;
    grid-gap: 20px;
   }
  section.clases .contenido .actividad p {
    font-size: 18pt;
    line-height: 24pt;
  }



  section.contactanos .contenido .datos {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 750px) {
  footer { padding: 30px 20px; }
  footer h3 { line-height: 24pt; }



  main.index .contenido{ 
    margin-top: 75px;
    display: unset;
    text-align: center;
  }
  main.index .contenido h1 {
    max-width: unset;
    font-size: 30pt;
  }
  main.index .contenido img { max-width: 200px; }



  main.quienes-somos .contenido {
    margin-top: 75px;
    display: unset;
  }
  main.quienes-somos .contenido h2 {
    max-width: unset;
    margin-bottom: 20px;
  }
  main.quienes-somos .contenido img { display: none; }
  section.quienes-somos * { font-size: 22pt; line-height: 28pt; }
  section.quienes-somos h2 { font-size: 34pt; margin-bottom: 0; }
  section.quienes-somos .contenido .dos h3 { font-size: 22pt; line-height: 28pt;  }



  section.avisos .aviso .contenido {
    padding: 20px;
    display: block;
    text-align: center;
  }
  section.avisos .aviso .contenido img{ max-width: 250px; margin-top: 25px; }
  section.avisos .aviso .contenido p { line-height: 20pt; }



  main.clases h1 { font-size: 34pt; line-height: 34pt; }
  section.clases .contenido h3 { font-size: 20pt; line-height: 22pt; }
  section.clases .contenido .actividad {
    grid-template-areas: "titulo" "imagen" "texto";
    grid-template-columns: 1fr;
    justify-items: center;
  }
  section.clases .contenido .actividad img { max-width: 325px; }

  

  main.fotos .fotos { grid-template-columns: 1fr 1fr; }



  main.videos .videos { grid-template-columns: 1fr; }



  section.contactanos .contenido .datos > div {
    grid-gap: 20px;
  }
  section.contactanos .contenido .datos > div h2 { text-align: center; }
  section.contactanos .contenido .datos > div img { max-width: 75px; }
}
@media screen and (max-width: 550px) {
  main.fotos h1 {
    font-size: 38pt;
    margin-bottom: 20px;
  }
  main.fotos .fotos { grid-template-columns: 1fr; }



  main.videos h1 {
    font-size: 38pt;
    margin-bottom: 20px;
  }
  main.videos .videos { grid-template-columns: 1fr; grid-gap: 20px; }
}