*
{

margin: 0px;  /* sin margenes en el documento. Ningún elemento tendrá márgenes.*/
padding: 0px;    
    
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;

}

/* FAMILIA PARA todo EL TEXTO */
h1, h2, h3, h4, h5, h6, p, a {

    font-family: 'Oswald', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
  
}


/* <uniquifier>: Use a unique and descriptive class name  */
/* <weight>: Use a value from 100 to 800 */

.jetbrains-mono {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}




/* HEADER */


/* Menu */

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.navigation {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  list-style: none; 
  padding: 0 0 0 30px ; 
}

.navigation li a {
  color: #000;
  font-size: 20px;
  font-weight: 100;
  padding-right: 15px;
  text-decoration: none;
}

.navigation li .useless {
  pointer-events: none;
  color: #606060;
}

.navigation li .uselesspeak {
  pointer-events: none;
  color: #606060;
  font-weight: 100;
  font-size: 20px;
}

.navigation li a.speak {
  color: #D3220B;
  font-weight: 200;
}

.navigation li .fa-home {
  font-size: 24px;
  font-weight: 24px;
}



/* Logo */

.logo img {
  width: 30px;
}

.logo h5 {
  font-size: 18px;
  font-weight: 100;
  color: #000;
  line-height: 30px;
  padding-left: 4px;
}

.logo {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items:start;
  padding: 20px;
}


/* CONTAINERS */

.flex-container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-item-prin {
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 25px;
}

.dancers img {
  width: 100%;
  max-width: 350px; 
}

.dancers {
  padding: 10px 0px 25px 0px;
}


/* TITLE AND SIGN UP WINDOW (WITH OUT IMAGE) */

.textsection {
  width: 100%;
  max-width: 350px;
  text-align: center;
  padding: 30px;
}


.textsection h1 {
  font-weight: 300;
  line-height: 70px;
  font-size: 80px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(173, 172, 167, .4);
}

.textsection h3 {
  font-weight: 200;
  font-size: 40px;
  padding-bottom: 50px;
}

h3 {
  font-weight: 200;
  font-size: 40px;
}


.openclass {
  width: 100%;
  max-width: 350px;
  border: none;
  cursor: pointer;
  margin-bottom: 40px;
}

.openclass h4 {
  background-color: #b7000d;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  padding: 5px 0px 5px 0px;
  color: rgb(255, 255, 255);
  font-weight: 100;
}

.openclass h5 {
  background-color: #efefef;
  text-align: center;
  font-size: 16px;
  line-height: 18px;
  border-bottom: 1px solid rgba(173, 172, 167, .2);
  padding: 5px 0px 5px 0px;
  color: rgba(0, 0, 0, 1);
  font-weight: 400;
}

.openclass h6 {
  background-color: #efefef;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  padding: 5px 0px 5px 0px;
  color: rgba(0, 0, 0, 1);
  font-weight: 100;
}


.openclass a {
  display: flex;
  justify-content: center;
  background-color: #efefef;
  padding-top: 5px;
  padding-bottom: 10px;
  text-decoration: none;
  font-size: 34px;
  color: #b7000d;

}

.group-lessons-info {
  padding-bottom: 20px;
}

.group-lessons-info h5 {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.group-lessons-info h6 {
  font-size: 14px;
  font-weight: 100;
  line-height: 24px;
}

/* Section title */

.section-title {
  padding: 15px 0 0 0;
  text-align: center;
}

.section-title h4 {
  padding-bottom: 10px;
}

.section-title h5 {
  font-size: 14px;
  font-weight: 200;
  line-height: 18px;

}

/* CHANGE DIRECTION FROM ROW TO COLUMN */

.flex-item-kp img {
    width: 100%;
    max-width: 1200px;
    padding: 30px;
}

.flex-item-kp {
  margin: auto;
  padding-bottom: 30px;

}


.flex-item-kp h4 {
  text-align: center;
  font-weight: 100;
  font-size: 20px; 
}


/* -------LODZ---FIRST 2 IMAGES------ */


.flex-container-duo {
    display: flex; /* aquí cambié el flex por el none */
    flex-direction: row;  
    align-items: center; 
}

.flex-item-1, .flex-item-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
}


.flex-item-1 .image-1 img, .flex-item-2 .image-2 img {
    width: 100%;
    max-width: 600px; /* before was 350px */
    padding: 30px;
}

.flex-item-1 h4, .flex-item-2 h4 {
  text-align: center;
  font-weight: 100;
  font-size: 20px;  
}

.flex-item-1 .section-title h5 {
  width: 100%;
  max-width: 500px;
  text-align:justify;
}


.flex-item-2 .section-title h5 {
  width: 100%;
  max-width: 500px;
  text-align: justify;

}

/*----------LODZ ----SECOND TWO IMAGES---- */

.flex-item-rq {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-item-rq-1, .flex-item-rq-2, .flex-item-rq-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
}

.flex-item-rq-1 .image-1 img, .flex-item-rq-2 .image-2 img, .flex-item-rq-3 .image-3 img  {
  width: 100%;
  max-width: 800px;
  padding: 30px;
}


.flex-item-rq-1 h4, .flex-item-rq-2 h4, .flex-item-rq-3 h4{
  text-align: center;
  font-weight: 100;
  font-size: 20px;
}

.flex-item-rq-1 .section-title h4 {
  width: 100%;
  max-width: 500px;
  text-align:center;
}


.flex-item-rq-1 .section-title h5 {
  width: 100%;
  max-width: 500px;
  text-align:justify;
}


.flex-item-rq-2 .section-title h4 {
  width: 100%;
  max-width: 500px;
  text-align:center;
}


.flex-item-rq-2 .section-title h5 {
  width: 100%;
  max-width: 500px;
  text-align: justify;

}

.flex-item-rq-3 .section-title h4 {
  width: 100%;
  max-width: 500px;
  text-align:center;
}


.flex-item-rq-3 .section-title h5 {
  width: 100%;
  max-width: 500px;
  text-align: justify;

}

/* termina Lodz */




/* REGULAR LESSONS BARCELONA */

.flex-item-bcn {
  padding: 30px;
}

.flex-item-bcn img {
  width: 100%;
  max-width: 800px;
}

/* Finishing here Barcelona */


/* -------------- */


/* Division line */

.divline {
  border-bottom: 1px solid rgba(64, 64, 63, 0.2);
}


/* Back to home button */

.backtohome {
  text-align: center;
  padding: 50px 0;
  
}

.takemethere {
  text-align: center;
}


.myhome {
  text-align: center;
  display: inline-block;
  min-width: 300px;
  color:#000000;
  text-decoration: none;
  padding: 20px;
  font-size: 20px;
  border: 1px solid #000000;
  border-radius: 10px;
  transition: all .5s;
}

.myhome:hover {
  cursor:pointer;
  color: #D3220B;
  border: 1px solid #D3220B;
  transition: all .5s ease-in;
}

.goback {
  text-align: center;
  display: inline-block;
  width: 200px;
  color:#000000;
  text-decoration: none;
  padding:6px;
  font-size: 20px;
  border: 1px solid #000000;
  border-radius: 10px;
  transition: all .5s;
}

.goback:hover {
  cursor:pointer;
  color: #D3220B;
  border: 1px solid #D3220B;
  transition: all .5s ease-in;
}


h1 {
  color: black;
  font-size: 50px;
  font-family: 'Roboto';
  font-weight: 400;
  text-align: center;
}

h2 {
  color: black;
  font-size: 30px;
  font-family: 'Roboto';
  font-weight: 300;
  text-align: center; 
}


/* RESPONSIVE ZONE */

@media (max-width: 900px) {
  .logo h5 {
    display: none;
  }

}



/* Happening when screen wide is lower than 1200px */


@media (max-width: 768px) {
  

  /* FONT SIZE HEADING */
  .textsection h1 {
    padding-top: 50px;
    font-size: 74px;
    line-height: 64px;
  }
  
  /* CHANGE DIRECTION FROM ROW TO COLUMN */    
  .flex-item-prin {
    flex-direction: column;
    align-items: center;

 }  

  .dancers img {
    width: 100%;
    max-width: 250px; 
    text-align: center;
  }
  
  .dancers {
      padding: 50px 0px 25px 0px;
  } 

 
  /* TITLE */
  .section-title {
    width: 350px; /* para tener dos líneas */
  }

 /* SCHEDULE CONTAINER */

.flex-item-kp {
  padding-bottom: 40px;
}

.flex-item-kp img {
  width: 100%;
  max-width: 350px;
}


/* CHANGE DIRECTION FROM ROW TO COLUMN */

.flex-container-duo {
    flex-direction: column;
    padding-bottom: 10px;
  }

  .flex-item-1 .image-1 img, .flex-item-2 .image-2 img {
    /*background-color:brown; */
    width: 100%;
    max-width: 400px;
  }

/* REGULAR LESSONS BARCELONA */

.flex-item-rq {
  flex-direction: column;
  padding-bottom: 10px;
}

.flex-item-rq-1 .image-1 img, .flex-item-rq-2 .image-2 img, .flex-item-rq-3 .image-3 img {
  width: 100%;
  max-width: 400px;
}

}


/* TRES CONTENEDORES HIJO. 3ero FOOT_ER */

.foot_er {
    background-color: #211e24;
    /*position: sticky; */
  }
  
  /* ---------------------------------------- */
  
    .containfooter {
      /*background-color: crimson; */
      background-color: none;
    }
  
      .firma {
        background-color: #211e24;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        margin: auto;
      }
  
        .firma img {
          width: 40px;
          vertical-align:bottom;
          padding: 10px;
        }
  
        .firma a {
          text-decoration: none;
          line-height: 40px;
          color: #ADACA7;
          font-size: 18px;
          font-weight: 100;
        }
  
      .rsocial {
        background-color: #211e24;
        /*background-color: darkgoldenrod; */
        display: flex;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 10px;
        list-style: none;
        text-decoration: none;
        /*border-top: 1px solid rgba(173, 172, 167, .5); */
        border-bottom: 1px solid rgba(173, 172, 167, .2);
      }
  
        .rsocial a {
          /*background-color: #A64452; */
          font-size: 24px;
          text-decoration: none;
          padding: 15px;
          color: #ADACA7;
        }
  
  
          /* --- INICIA CAMBIO DE COLOR PARA LOS ÍCONOS DE REDES SOCIALES ---*/
  
         .rsocial .fa-facebook:hover{
            cursor: pointer;
            color:#1c75bc;}
         .rsocial .fa-youtube-play:hover{
            cursor: pointer;
            color:#ed1c24;}
         .rsocial .fa-instagram:hover{
            cursor: pointer;
            color:#a97c50;}
         .rsocial .fa-twitter:hover{
            cursor: pointer;
            color:#27aae1;}
        .rsocial .fa-whatsapp:hover{
          cursor: pointer;
          color:#8af57c;}
  
        /* --- Termina cambio de color para íconos ---*/
  
      .footinfo {
        background-color: #211e24;
        text-align: center;
        padding: 25px 0px 25px 0px;
        margin: auto;
      }    
  
      .footext {
        font-size: 12px;
        color: #ADACA7;
        font-weight: 100;
      }
  
      .name_city {
        padding: 5px 0px;
        font-size: 14px;
        font-weight: 100;
        color: #ffffff;
      }
  
      .verybottom {
        font-size: 12px;
        font-weight: lighter;
        color: #ADACA7;
        line-height: 15px;
        padding-top: 5px;
  
      }
  
  
 
      /* ADAPTACIÓN < 768PX */
  
      @media(max-width:768PX){
  
        .firma {
        /*display: none;  */
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: auto;}
  
        .firma img {
          width: 30px;
          vertical-align:bottom;
          padding: 5px;}
  
        .firma a {
          text-decoration: none;
          line-height: 28px;
          color: #ADACA7;
          font-size: 12px;
          font-weight: 100;}
  
        .rsocial {
        justify-content: center;
        padding-top: 0;
        padding-bottom: 5px;
        /*border-top: 1px solid rgba(173, 172, 167, .5); */
        }
  
        .rsocial a {
          font-size: 24px;
          padding: 10px;
          color: #ADACA7;}
        
        .name_city {
          font-size: 13px;
        }  
  
        .footext {
        /*display: none; */
        font-size: 12px;
        }
  
        .verybottom {
          font-size: 10px;
          color: #ADACA7;
          font-weight: 100; 
          line-height: 12px;
    
        }
        
  
        /* ADAPTACIÓN < 460PX */
  
        @media(max-width:320PX) {
  
       .firma {
        /*display: block; */
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: auto;}
  
        .firma img {
          width: 30px;
          vertical-align:bottom;
          padding: 5px;}
  
        .firma a {
          text-decoration: none;
          line-height: 28px;
          color: #ADACA7;
          font-size: 12px;
          font-weight: 100;}
  
        .rsocial {
        justify-content: center;
        padding-top: 0;
        padding-bottom: 5px;
        /*border-top: 1px solid rgba(173, 172, 167, .5); */
        border-bottom: 1px solid rgba(173, 172, 167, .2);}
  
        .rsocial a {
          font-size: 24px;
          padding: 10px;
          color: #ADACA7;}
  
        .name_city {
            font-size: 14px;
        } 
          
        .footext {
        /*display: block;*/
        font-size: 12px;
        }
        .verybottom {
          font-size: 8px;
          color: #ADACA7;
          font-weight: 100; 
          line-height: 10px;
        }
      }
    }