@charset "UTF-8";
/**utilities**/
/*familias de fuentes*/
/*tamaños de fuentes*/
/**base**/
@import url("https://fonts.googleapis.com/css2?family=Allerta&family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  font-family: none; }

main p {
  font-family: allerta;
  font-size: 1.7rem;
  font-weight: 100;
  text-transform: none;
  color: #333333;
  text-shadow: none; }
  main p:first-letter {
    text-transform: capitalize; }

main button {
  background-color: #61d0b4;
  padding: .9375rem;
  border-width: .125rem;
  border-color: white;
  border-radius: 1.25rem;
  margin: 1rem; }
  main button a {
    text-decoration: none;
    font-family: amaranth;
    font-size: 1.7rem;
    font-weight: 100;
    text-transform: capitalize;
    color: white;
    text-shadow: 0.125rem 0.125rem rgba(51, 51, 51, 0.36); }

main h2 {
  width: 100%;
  padding: 1rem 0rem;
  font-family: amaranth;
  font-size: 2rem;
  font-weight: 200;
  text-transform: uppercase;
  color: white;
  text-shadow: 0.125rem 0.125rem rgba(51, 51, 51, 0.36);
  background-color: #61d0b4;
  text-align: center; }

/**layout**/
header div {
  background-color: #61d0b4;
  height: 5rem;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5rem; }

header #menu-check {
  display: none; }

header #menu {
  display: none; }

.mainIndex .backgroundIndex {
  text-align: left;
  background-image: url(../assets/fondos-h1/fondo-index.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0; }
  .mainIndex .backgroundIndex .tituloIndex {
    height: 25rem;
    width: 100%;
    padding: 14rem 0rem 0rem 4rem;
    font-family: amaranth;
    font-size: 1.7rem;
    font-weight: 100;
    text-transform: none;
    color: white;
    text-shadow: 0.125rem 0.125rem rgba(51, 51, 51, 0.36);
    margin: 0; }
    .mainIndex .backgroundIndex .tituloIndex:first-letter {
      text-transform: capitalize; }

.mainIndex .articuloLogo .viryaArt {
  background-color: #66b19f53;
  text-justify: center; }
  .mainIndex .articuloLogo .viryaArt div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem; }
    .mainIndex .articuloLogo .viryaArt div p {
      padding: 1rem 3rem;
      font-family: "Amaranth", sans-serif;
      font-size: 2rem;
      font-weight: 400;
      text-transform: none;
      color: #333333;
      text-shadow: 0.125rem 0.125rem 0.125rem 0.125rem #333333; }
    .mainIndex .articuloLogo .viryaArt div button {
      background-color: #1d9275; }
    .mainIndex .articuloLogo .viryaArt div button:hover {
      transform: scale(1.2); }

.mainIndex .section-eventos h2 {
  margin: 0; }

.mainIndex .section-eventos .eventos-car {
  background: #1d9275;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: 1rem 4rem; }
  .mainIndex .section-eventos .eventos-car .text-car-desc h3 {
    font-family: allerta;
    font-size: 1.7rem;
    font-weight: 100;
    text-transform: none;
    color: white;
    text-shadow: 0.25rem 0.25rem 0.25rem 0.25rem #333333;
    margin: 0rem 1rem; }
    .mainIndex .section-eventos .eventos-car .text-car-desc h3:first-letter {
      text-transform: capitalize; }
  .mainIndex .section-eventos .eventos-car .carousel h4 {
    font-family: amaranth;
    font-size: 1.5rem;
    font-weight: 100;
    text-transform: uppercase;
    color: white;
    text-shadow: 0.125rem 0.125rem 0.125rem 0.125rem #333333;
    background-color: rgba(255, 255, 255, 0.4); }
  .mainIndex .section-eventos .eventos-car .carousel p {
    font-family: amaranth;
    font-size: 1.7rem;
    font-weight: 100;
    text-transform: none;
    color: white;
    text-shadow: 0.125rem;
    background-color: rgba(255, 255, 255, 0.4); }
  .mainIndex .section-eventos .eventos-car .carousel .carousel-item {
    width: 25rem;
    height: 100%;
    overflow: hidden; }
  .mainIndex .section-eventos .eventos-car .carousel .carousel-inner {
    max-width: 25rem; }

.mainFormaciones .backgroundFormaciones {
  text-align: left;
  background-image: url(../assets/fondos-h1/fondo-formaciones.png);
  background-size: 100% 100%;
  background-repeat: no-repeat; }
  .mainFormaciones .backgroundFormaciones .tituloFormaciones {
    height: 25rem;
    width: 100%;
    margin: 0;
    padding: 10rem 0rem 0rem 10rem;
    font-family: amaranth;
    font-size: 1.7rem;
    font-weight: 200;
    text-transform: none;
    color: white;
    text-shadow: 0.125rem 0.125rem #333333; }
    .mainFormaciones .backgroundFormaciones .tituloFormaciones:first-letter {
      text-transform: capitalize; }

.mainFormaciones h2 {
  margin: 0; }

.mainFormaciones h3 {
  font-family: amaranth;
  font-size: 2rem;
  font-weight: 100;
  text-transform: none;
  text-shadow: 0.125rem #333333;
  align-items: center; }
  .mainFormaciones h3:first-letter {
    text-transform: capitalize; }

.mainFormaciones h4 {
  font-family: amaranth;
  font-size: 1.5rem;
  font-weight: 100;
  text-transform: none;
  text-shadow: 0.125rem 0.125rem 0.125rem 0.125rem #333333; }
  .mainFormaciones h4:first-letter {
    text-transform: capitalize; }

.mainFormaciones .profesorado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-content: center;
  align-content: center;
  grid-template-areas: "prof__desc prof__desc prof__desc" "prof__ic1 prof__ic2 prof__ic3";
  background-color: #66b19f53; }
  .mainFormaciones .profesorado .prof__desc {
    grid-area: prof__desc;
    text-align: center;
    padding: 2rem 10rem; }
    .mainFormaciones .profesorado .prof__desc .icono-prof {
      size: 100% 100%; }
  .mainFormaciones .profesorado .prof__ic1 {
    grid-area: prof__ic1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: none;
    text-align: center; }
    .mainFormaciones .profesorado .prof__ic1 .icono-prof {
      size: 100% 100%; }
  .mainFormaciones .profesorado .prof__ic2 {
    grid-area: prof__ic2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: none; }
    .mainFormaciones .profesorado .prof__ic2 .icono-prof {
      size: 100% 100%; }
  .mainFormaciones .profesorado .prof__ic3 {
    grid-area: prof__ic3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: none; }
    .mainFormaciones .profesorado .prof__ic3 .icono-prof {
      size: 100% 100%; }

.mainFormaciones .autoconocimiento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 20rem 6rem;
  justify-content: center;
  align-content: center;
  grid-template-areas: "auto__img1 auto__img2 auto__img3" "auto__desc auto__desc auto__desc";
  background: #1d9275;
  padding-top: 2rem; }
  .mainFormaciones .autoconocimiento .auto__desc {
    grid-area: auto__desc;
    text-align: center;
    color: white; }
  .mainFormaciones .autoconocimiento .auto__img1 {
    grid-area: auto__img1;
    justify-self: center;
    size: 100% 100%; }
  .mainFormaciones .autoconocimiento .auto__img2 {
    grid-area: auto__img2;
    justify-self: center;
    size: 100% 100%; }
  .mainFormaciones .autoconocimiento .auto__img3 {
    grid-area: auto__img3;
    justify-self: center;
    size: 100% 100%; }

.mainFormaciones .taller {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.3125rem;
  margin: 0rem 1rem 0.625rem 1rem;
  background-color: #66b19f53; }
  .mainFormaciones .taller h3 {
    text-align: center; }
  .mainFormaciones .taller img {
    size: 100% 100%; }

.mainHorarios .backgroundHorarios {
  text-align: left;
  background-image: url(../assets/fondos-h1/fondo-horarios.png);
  background-size: 100% 100%;
  background-repeat: no-repeat; }

.mainHorarios .tituloHorarios {
  height: 25rem;
  width: 100%;
  margin: 0;
  padding: 7rem 0rem 3rem 3rem;
  font-family: amaranth;
  font-size: 1.7rem;
  font-weight: 100;
  text-transform: none;
  color: white;
  text-shadow: 0.125rem 0.125rem rgba(51, 51, 51, 0.36); }
  .mainHorarios .tituloHorarios:first-letter {
    text-transform: capitalize; }

.mainHorarios .grid .gridHorarios {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 2.5rem 6.3rem 8rem repeat(3, 6.3rem);
  justify-content: center;
  align-content: center;
  grid-template-areas: "div1 div2 div3 div4 div5" "div6 div7 div8 . div9" ". . div10 . div11" ". div12 . div13 ." "div14 . div15 . div16" ". div17 . div18 ." "div19 div20 div21 div22 div23";
  gap: 0.5rem 0.5rem;
  margin: 0 1rem 1rem 1rem; }
  .mainHorarios .grid .gridHorarios .div1 {
    background-color: #1d9275;
    grid-area: div1; }
  .mainHorarios .grid .gridHorarios .div2 {
    background-color: #1d9275;
    grid-area: div2; }
  .mainHorarios .grid .gridHorarios .div3 {
    background-color: #1d9275;
    grid-area: div3; }
  .mainHorarios .grid .gridHorarios .div4 {
    background-color: #1d9275;
    grid-area: div4; }
  .mainHorarios .grid .gridHorarios .div5 {
    background-color: #1d9275;
    grid-area: div5; }
  .mainHorarios .grid .gridHorarios .div6 {
    background-color: #66b19f53;
    grid-area: div6; }
  .mainHorarios .grid .gridHorarios .div7 {
    background-color: #66b19f53;
    grid-area: div7; }
  .mainHorarios .grid .gridHorarios .div8 {
    background-color: #66b19f53;
    grid-area: div8; }
  .mainHorarios .grid .gridHorarios .div9 {
    background-color: #66b19f53;
    grid-area: div9; }
  .mainHorarios .grid .gridHorarios .div10 {
    background-color: #66b19f53;
    grid-area: div10; }
  .mainHorarios .grid .gridHorarios .div11 {
    background-color: #66b19f53;
    grid-area: div11; }
  .mainHorarios .grid .gridHorarios .div12 {
    background-color: #66b19f53;
    grid-area: div12; }
  .mainHorarios .grid .gridHorarios .div13 {
    background-color: #66b19f53;
    grid-area: div13; }
  .mainHorarios .grid .gridHorarios .div14 {
    background-color: #66b19f53;
    grid-area: div14; }
  .mainHorarios .grid .gridHorarios .div15 {
    background-color: #66b19f53;
    grid-area: div15; }
  .mainHorarios .grid .gridHorarios .div16 {
    background-color: #66b19f53;
    grid-area: div16; }
  .mainHorarios .grid .gridHorarios .div17 {
    background-color: #66b19f53;
    grid-area: div17; }
  .mainHorarios .grid .gridHorarios .div18 {
    background-color: #66b19f53;
    grid-area: div18; }
  .mainHorarios .grid .gridHorarios .div19 {
    grid-area: div19; }
  .mainHorarios .grid .gridHorarios .div20 {
    grid-area: div20; }
  .mainHorarios .grid .gridHorarios .div21 {
    grid-area: div21; }
  .mainHorarios .grid .gridHorarios .div22 {
    grid-area: div22; }
  .mainHorarios .grid .gridHorarios .div23 {
    grid-area: div23; }
  .mainHorarios .grid .gridHorarios div {
    border-radius: .375rem;
    object-fit: contain;
    height: 100%;
    width: 100%;
    text-align: center; }
    .mainHorarios .grid .gridHorarios div h3 {
      font-family: amaranth;
      font-size: 2rem;
      font-weight: 100;
      text-transform: uppercase;
      color: white;
      text-shadow: none; }
    .mainHorarios .grid .gridHorarios div h4 {
      font-family: amaranth;
      font-size: 1.5rem;
      font-weight: 100;
      text-transform: uppercase;
      color: #333333;
      text-shadow: none; }
    .mainHorarios .grid .gridHorarios div h5 {
      font-family: amaranth;
      font-size: 1.3rem;
      font-weight: 100;
      text-transform: capitalize;
      color: #333333;
      text-shadow: none; }
    .mainHorarios .grid .gridHorarios div p {
      font-family: amaranth;
      font-size: 1.3rem;
      font-weight: 100;
      text-transform: capitalize;
      color: #333333;
      text-shadow: none; }
      .mainHorarios .grid .gridHorarios div p .elem {
        height: 100%;
        width: 100%; }

.mainBlog .backgroundBlog {
  text-align: right;
  background-image: url(../assets/fondos-h1/fondo-blog.png);
  background-size: 100% 100%;
  background-repeat: no-repeat; }
  .mainBlog .backgroundBlog .tituloBlog {
    height: 25rem;
    width: 100%;
    margin: 0;
    padding: 20rem 3rem 0rem 0rem;
    font-family: amaranth;
    font-size: 1.7rem;
    font-weight: 100;
    text-transform: none;
    color: white;
    text-shadow: 0.125rem; }
    .mainBlog .backgroundBlog .tituloBlog:first-letter {
      text-transform: capitalize; }

.mainBlog .articulos section {
  padding: 3rem 3rem; }
  .mainBlog .articulos section img {
    width: 100%;
    height: 100%; }
  .mainBlog .articulos section article h3 {
    font-family: amaranth;
    font-size: 2rem;
    font-weight: 200;
    text-transform: none;
    color: #333333;
    text-shadow: none; }
  .mainBlog .articulos section article p {
    font-family: allerta;
    font-size: 1.3rem;
    font-weight: 100;
    text-transform: none;
    color: #333333;
    text-shadow: none; }
  .mainBlog .articulos section article:first-letter {
    text-transform: capitalize; }
  .mainBlog .articulos section article button {
    font-family: amaranth;
    font-size: 1.5rem;
    font-weight: 100;
    text-transform: none;
    color: white;
    text-shadow: 0.125rem 0.125rem rgba(51, 51, 51, 0.36); }
    .mainBlog .articulos section article button:hover {
      transform: scale(1.2); }

.mainBlog .articulos .artUno, .mainBlog .articulos .artTres {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  text-align: left;
  background-color: #66b19f53; }

.mainBlog .articulos .artDos, .mainBlog .articulos .artCuatro {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  text-align: right;
  background-image: url(../assets/img-index/mandala.png);
  background-repeat: repeat; }

.mainContacto .backgroundContacto {
  text-align: center;
  background-image: url(../assets/fondos-h1/fondo-contacto.png);
  background-size: 100% 100%;
  background-repeat: no-repeat; }
  .mainContacto .backgroundContacto .tituloContacto {
    height: 25rem;
    width: 100%;
    margin: 0;
    padding: 20rem 0rem 0rem 0rem;
    font-family: amaranth;
    font-size: 1.7rem;
    font-weight: 100;
    text-transform: none;
    color: white;
    text-shadow: 0.125rem; }
    .mainContacto .backgroundContacto .tituloContacto:first-letter {
      text-transform: capitalize; }

.mainContacto section h2 {
  margin: 0; }

.mainContacto .contacto {
  background: #1d9275;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 1rem; }

.mainContacto div {
  justify-items: left; }
  .mainContacto div p {
    text-align: left;
    margin-left: 2rem;
    color: white; }
  .mainContacto div ul {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 0.25rem; }
    .mainContacto div ul li a img {
      width: 100%;
      height: 100%;
      margin: 0; }

.mainContacto iframe {
  margin: 3rem 0; }

.mainContacto .mandala {
  margin-left: 3rem;
  height: 60%;
  width: 60%;
  animation-name: mandala-animation;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s;
  transition: all 4000ms linear; }

@keyframes mandala-animation {
  0% {
    transform: rotate(90deg); } }

footer {
  height: 5rem;
  background-color: #61d0b4;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 1.25rem; }
  footer div ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 1.25rem; }
  footer div p {
    font-family: "Amaranth", sans-serif;
    font-size: 0.5rem;
    font-weight: 100;
    text-transform: none;
    color: white;
    text-shadow: 0.125rem 0.125rem rgba(51, 51, 51, 0.36);
    text-align: right; }
  footer div .coding {
    width: 5rem;
    margin-right: .1875rem; }

@media (max-width: 768px) {
  /**generales**/
  header div {
    height: 4rem; }
    header div a {
      color: white;
      padding-right: 5rem; }
    header div #menu-check:not(:checked) ~ .navBar {
      display: none; }
    header div #menu-check:checked ~ .navBar {
      display: block; }
    header div #menu-check:checked ~ label #menu-abrir {
      display: none; }
    header div #menu-check:checked ~ label #menu-cerrar {
      display: block; }
    header div #menu {
      display: block;
      font-family: amarath;
      font-size: 1rem;
      font-weight: 800;
      text-transform: uppercase;
      color: white;
      text-shadow: 0.125rem 0.125rem 0.125rem 0.125rem #333333;
      width: 2rem;
      text-align: center;
      border: 0.1875rem solid white;
      border-radius: .3125rem;
      position: absolute;
      right: 1rem;
      top: 1rem;
      z-index: 9999; }
      header div #menu #menu-cerrar {
        display: none;
        font-family: arial;
        font-weight: 550; }
    header div .navBar {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0.8;
      color: #66b19f53;
      background-color: white;
      font-size: 1.5rem; }
      header div .navBar ul {
        display: block;
        text-align: right;
        background-color: #69A898; }
        header div .navBar ul li a {
          color: white;
          padding-right: 5rem; }
  main section h2 {
    font-size: 1.5rem; }
  main section h3 {
    font-size: 1.5rem; }
  main section p {
    font-size: 1.5rem;
    text-align: center; }
  footer {
    height: auto;
    gap: 0;
    padding: .625rem; }
    footer ul {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem; }
  /**Index**/
  .mainIndex {
    /**Formaciones**/
    /**Horarios**/
    /**Blog**/
    /**Contacto**/ }
    .mainIndex .backgroundIndex {
      background-size: 100% 100%;
      margin-bottom: 0rem;
      background-repeat: no-repeat; }
      .mainIndex .backgroundIndex .tituloIndex {
        padding: 7rem 2rem 0rem;
        font-size: 1.3rem;
        height: 75%;
        width: 100%; }
    .mainIndex .articuloLogo .viryaArt {
      background-color: #66b19f53;
      background-image: none; }
      .mainIndex .articuloLogo .viryaArt .virya {
        font-size: 1rem;
        width: 100%;
        padding: 1rem 10%; }
      .mainIndex .articuloLogo .viryaArt button a {
        font-size: 1.5rem; }
    .mainIndex .section-eventos .eventos-car {
      size: 50% 50%;
      font-size: 1.5rem; }
      .mainIndex .section-eventos .eventos-car .text-car-desc .text-car {
        font-size: 1rem; }
      .mainIndex .section-eventos .eventos-car .carousel h4 {
        font-family: amaranth;
        font-size: 1.3rem;
        font-weight: 100;
        text-transform: uppercase;
        color: white;
        text-shadow: 0.125rem 0.125rem 0.125rem 0.125rem #333333;
        background-color: rgba(255, 255, 255, 0.4); }
      .mainIndex .section-eventos .eventos-car .carousel p {
        font-family: amaranth;
        font-size: 1.5rem;
        font-weight: 100;
        text-transform: none;
        color: white;
        text-shadow: 0.125rem;
        background-color: rgba(255, 255, 255, 0.4); }
      .mainIndex .section-eventos .eventos-car .carousel .carousel-item {
        width: 15rem;
        height: 100%;
        overflow: hidden; }
      .mainIndex .section-eventos .eventos-car .carousel .carousel-inner {
        max-width: 15rem; }
    .mainIndex .mainFormaciones .backgroundFormaciones {
      background-size: 100% 100%;
      margin-bottom: 0rem;
      background-repeat: no-repeat; }
      .mainIndex .mainFormaciones .backgroundFormaciones .tituloFormaciones {
        padding: 2rem 2rem 6rem;
        font-size: 1.3rem;
        height: 75%;
        width: 100%; }
    .mainIndex .mainFormaciones .profesorado {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, 1fr);
      justify-content: center;
      align-content: center;
      grid-template-areas: "prof__desc" "prof__ic1" "prof__ic2" "prof__ic3"; }
      .mainIndex .mainFormaciones .profesorado .prof__desc {
        grid-area: prof__desc;
        padding: 2rem 0rem; }
      .mainIndex .mainFormaciones .profesorado .prof__ic1 {
        grid-area: prof__ic1; }
        .mainIndex .mainFormaciones .profesorado .prof__ic1 .icono-prof {
          size: 50% 50%; }
      .mainIndex .mainFormaciones .profesorado .prof__ic2 {
        grid-area: prof__ic2; }
        .mainIndex .mainFormaciones .profesorado .prof__ic2 .icono-prof {
          size: 50% 50%; }
      .mainIndex .mainFormaciones .profesorado .prof__ic3 {
        grid-area: prof__ic3; }
        .mainIndex .mainFormaciones .profesorado .prof__ic3 .icono-prof {
          size: 50% 50%; }
      .mainIndex .mainFormaciones .profesorado h3 {
        font-size: 1.5rem; }
      .mainIndex .mainFormaciones .profesorado div h4 {
        text-align: center; }
    .mainIndex .mainFormaciones .autoconocimiento {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 50% 50%;
      justify-content: center;
      align-content: center;
      grid-template-areas: "auto__desc" "auto__img1";
      margin-bottom: 5rem; }
      .mainIndex .mainFormaciones .autoconocimiento .auto__desc {
        grid-area: auto__desc;
        margin: 1rem 2rem; }
      .mainIndex .mainFormaciones .autoconocimiento .auto__img1 {
        grid-area: auto__img1;
        size: 50% 50%; }
      .mainIndex .mainFormaciones .autoconocimiento .auto__img2 {
        display: none; }
      .mainIndex .mainFormaciones .autoconocimiento .auto__img3 {
        display: none; }
      .mainIndex .mainFormaciones .autoconocimiento h3 {
        font-size: 1.5rem; }
    .mainIndex .mainFormaciones .taller {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 30% 70%;
      justify-content: center;
      align-content: center;
      grid-template-areas: "taller__desc" "taller__img1";
      margin: 1.5rem 1rem;
      background-color: #66b19f53;
      background-image: none; }
      .mainIndex .mainFormaciones .taller .taller__desc {
        grid-area: taller__desc; }
      .mainIndex .mainFormaciones .taller .taller__img1 {
        grid-area: taller__img1;
        height: 100%;
        width: 100%; }
      .mainIndex .mainFormaciones .taller .taller__img2 {
        display: none; }
      .mainIndex .mainFormaciones .taller h3 {
        font-size: 1.5rem; }
    .mainIndex .mainHorarios .backgroundHorarios {
      background-size: 100% 100%;
      margin-bottom: 0rem;
      background-repeat: no-repeat; }
      .mainIndex .mainHorarios .backgroundHorarios .tituloHorarios {
        padding: 3rem 0rem 4rem 0rem;
        text-align: center;
        font-size: 1.3rem;
        height: 75%;
        width: 100%; }
    .mainIndex .mainHorarios .grid .gridHorarios {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(6, 6rem) 8rem repeat(4, 6rem) 8rem 6rem;
      justify-content: center;
      align-content: center;
      grid-template-areas: "div1 div6" "div1 div14" "div2 div7" "div2 div12" "div2 div17" "div3 div8" "div3 div10" "div3 div15" "div4 div13" "div4 div18" "div5 div9" "div5 div11" "div5 div16" "div19 div20"; }
      .mainIndex .mainHorarios .grid .gridHorarios .div21 {
        display: none; }
      .mainIndex .mainHorarios .grid .gridHorarios .div22 {
        display: none; }
      .mainIndex .mainHorarios .grid .gridHorarios .div23 {
        display: none; }
      .mainIndex .mainHorarios .grid .gridHorarios h3 {
        font-size: 1.5rem;
        padding-top: 2rem; }
      .mainIndex .mainHorarios .grid .gridHorarios h4 {
        font-size: 1.3rem; }
      .mainIndex .mainHorarios .grid .gridHorarios h5 {
        font-size: 1rem; }
      .mainIndex .mainHorarios .grid .gridHorarios p {
        font-size: 1rem; }
    .mainIndex .mainBlog .backgroundBlog {
      background-size: 100% 100%;
      margin-bottom: 0rem;
      background-repeat: no-repeat; }
      .mainIndex .mainBlog .backgroundBlog .tituloBlog {
        padding: 6rem 2rem 2rem;
        font-size: 1.3rem;
        height: 75%;
        width: 100%; }
    .mainIndex .mainBlog .articulos p {
      display: none; }
    .mainIndex .mainBlog .articulos .artImg {
      height: 100%;
      width: 100%; }
    .mainIndex .mainContacto .backgroundContacto {
      background-size: 100% 100%;
      margin-bottom: 0rem;
      background-repeat: no-repeat; }
      .mainIndex .mainContacto .backgroundContacto .tituloContacto {
        padding: 5rem 2rem 2rem;
        font-size: 1.3rem;
        height: 75%;
        width: 100%; }
    .mainIndex .mainContacto .contacto {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.125rem; }
      .mainIndex .mainContacto .contacto iframe {
        width: 80%;
        height: 100%; }
      .mainIndex .mainContacto .contacto div ul {
        flex-wrap: wrap; } }

@media (max-width: 320px) {
  /**Generales**/
  header div {
    height: 4rem; }
    header div img {
      width: 100%;
      height: 100%; }
    header div #menu {
      font-size: 1rem;
      width: 1.5rem; }
    header div .navBar ul {
      font-size: 1.3rem; }
  main h1 {
    font-size: 1.3rem; }
  main h2 {
    font-size: 1.5rem; }
  main h3 {
    font-size: 1.3rem; }
  main p {
    font-size: 1rem; }
  footer {
    flex-direction: column; }
  /**Index**/
  .mainIndex .backgroundIndex .tituloIndex {
    padding: 2rem 0rem 1rem 1rem;
    font-size: 1rem;
    height: 50%;
    width: 100%; }
  .mainIndex .viryaArt button a {
    font-size: 1rem; }
  .mainIndex .section-eventos .eventos-car {
    flex-direction: column; }
  /**Formaciones**/
  .mainFormaciones .backgroundFormaciones .tituloFormaciones {
    padding: 1rem 0rem 3rem 2rem;
    font-size: 1rem;
    height: 50%;
    width: 100%; }
  .mainFormaciones .profesorado h3 {
    font-size: 1rem; }
  .mainFormaciones .profesorado div h4 {
    font-size: 1rem; }
  .mainFormaciones .autoconocimiento h3 {
    font-size: 1rem; }
  .mainFormaciones .autoconocimiento .auto__desc {
    margin: 1rem 2rem; }
  .mainFormaciones .taller h3 {
    font-size: 1rem; }
  /**Horarios**/
  .mainHorarios .backgroundHorarios .tituloHorarios {
    padding: 2rem 0rem 1rem 1rem;
    font-size: 1rem;
    height: 50%;
    width: 100%; }
  .mainHorarios .grid .gridHorarios {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-content: center;
    align-content: center;
    grid-template-areas: "div1" "div6" "div14" "div2" "div7" "div12" "div17" "div3" "div8" "div10" "div15" "div4" "div13" "div18" "div5" "div9" "div11" "div16" "div19"; }
    .mainHorarios .grid .gridHorarios .div20 {
      display: none; }
    .mainHorarios .grid .gridHorarios .div21 {
      display: none; }
    .mainHorarios .grid .gridHorarios .div22 {
      display: none; }
    .mainHorarios .grid .gridHorarios .div23 {
      display: none; }
  /**Blog**/
  .mainBlog .backgroundBlog .tituloBlog {
    padding: 3rem 0rem 1rem;
    font-size: 1rem;
    height: 50%;
    width: 100%; }
  .mainBlog .articulos h3 {
    text-align: center; }
  .mainBlog .articulos .artUno, .mainBlog .articulos .artTres {
    flex-direction: column; }
    .mainBlog .articulos .artUno h3, .mainBlog .articulos .artTres h3 {
      font-size: 1.3rem; }
    .mainBlog .articulos .artUno button, .mainBlog .articulos .artTres button {
      font-size: 1rem; }
  .mainBlog .articulos .artDos, .mainBlog .articulos .artCuatro {
    flex-direction: column; }
    .mainBlog .articulos .artDos h3, .mainBlog .articulos .artCuatro h3 {
      font-size: 1.3rem; }
    .mainBlog .articulos .artDos button, .mainBlog .articulos .artCuatro button {
      font-size: 1rem; }
  .mainBlog .articulos .artTres {
    flex-direction: column; }
    .mainBlog .articulos .artTres h3 {
      font-size: 1.3rem; }
    .mainBlog .articulos .artTres button {
      font-size: 1rem; }
  .mainBlog .articulos .artCuatro {
    flex-direction: column; }
    .mainBlog .articulos .artCuatro h3 {
      font-size: 1.3rem; }
    .mainBlog .articulos .artCuatro button {
      font-size: 1rem; }
  /**Contacto**/
  .mainContacto .backgroundContacto .tituloContacto {
    padding: 2rem 0rem 1rem;
    font-size: 1rem;
    height: 50%;
    width: 100%; }
  .mainContacto .contacto p {
    font-size: 1rem; } }

/**componentes**/
.navBar ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  list-style: none;
  width: 100%; }
  .navBar ul li a {
    text-decoration: none;
    font-family: "Amaranth", sans-serif;
    font-size: 1.3rem;
    font-weight: 100;
    text-transform: uppercase;
    color: white;
    text-shadow: 0.125rem 0.125rem rgba(51, 51, 51, 0.36); }
  .navBar ul li:hover {
    scale: 1.2; }