*{
    font-family: 'Poppins', sans-serif;
}
p{
    font-size: 15px;
}
h1{
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
}

h2{
    font-size: 80px;
    font-weight: bold;
    color: white;
}
h3{
    font-weight: bold;
    font-size: 35px;
}

h4{
    font-size: 10px;
    font-weight: lighter;
    color: white;
    text-transform: capitalize;
}

h5{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
}

span{
    color: #F2861A;
}


body {
    font-family: 'Poppins', sans-serif;
}
.banner{
    display: flex;
    background-image: url(../images//IMG_6016.jpg);
    background-position: center;
    background-size: cover;
    padding-left: 10vw;
    align-items: center;
    grid-row: 1/3;
    grid-column: 1/2;
    height: 620px;
}
.logo_grande{
    height: auto;
    width: 30vw;
}
.separacion{
    background-color: white;
    height: 100px;
}
.header {
    position: fixed;
    top: 0;
    grid-column: 2/3;
    display: grid;
    height: 48px;
    background-color: white;
    grid-template-columns: repeat(7, 1fr);
    padding-left: 20vw;
    padding-right: 20vw;
    grid-row: 1/2;
    grid-column: 1/2;
    opacity: 0.9;
    width: 100vw;
}
.header a{
    display: flex;
    height: 100%;
    text-decoration: none;
    color: black;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding-top: 6px;
}
.header a:hover{
    color: white;
    background-color: #F2861A;
}
.header a.activo{
    color: #F2861A;
}
.header a:hover.activo{
    color: white;
    background-color: #F2861A;
}
.logoHeader{
    grid-row: 1/1;
    grid-column: 4/5;
    height: 35px;
    text-align: center;
    align-self: center;
}
.logoHeader img{
    height: 100%;
}
.seccionIns{
    height: 300px;
}
.tituloRow{
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}
.titulo{
    text-align: center;
    border-bottom: 3px solid #F2861A;
    padding-right: 100px;
    padding-left: 100px;
    width: auto;
    margin: 0 auto;
}
.instrumentos{
    display: flex;
    padding-left: 10vw;
    padding-right: 10vw;
    justify-content: space-between;
    padding-top: 80px;
}
.instrumentos a{
    display: grid;
    grid-template-rows: repeat(2,1fr);
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    color: black;
}
.fotoInstrumento{
display: flex;
height: 130px;
justify-content: center;
}
.textoInstrumento{
height: 6vw;
font-size: 15px;
padding-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.seccionMeto{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 100px 200px 80px;
    padding-top: 100px;
    padding-left: 5vw;
    padding-right: 5vw;
}
.subtitulo__uno{
    text-align: center;
    height: 100px;
    grid-column: 1/2;
    grid-row: 1/2;
}
.subtitulo__dos{
    text-align: center;
    height: 100px;
    grid-column: 2/3;
    grid-row: 1/2;
    }
.mediaseparacion{
    background-color: white;
    height: 20px;
}
.parrafo__uno{
    padding-left: 10vh;
    padding-right: 10vh;
    grid-column: 1/2;
    grid-row: 2/3;
    font-size: 18px;
    text-align: center;
}
.parrafo__dos{
    padding-left: 10vh;
    padding-right: 10vh;
    grid-column: 2/3;
    grid-row: 2/3;
    font-size: 13px;
    text-align: center;
}
.seccionMeto a{
    display: flex;
    height: 48px;
    text-decoration: none;
    color: white;
    background-color: #F2861A;
    align-items: center;
    text-align: center;
    justify-content: center;
    grid-row: 3/4;
    grid-column: 1/2;
    width: 150px;
    padding-top: 8px;
    justify-self: center;
    align-self: top;
    border-radius: 40px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.opiniones{
    padding-top: 50px;
    display: flex;
    padding-left: 130px;
    padding-right: 130px;
    justify-content: center;
    gap: 40px;
    padding-bottom: 150px;
}
.opinion{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    width: 300px;
    height: 400px;
    justify-content: space-between;
    padding: 5%;
    border-radius: 40px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
.textoOpinion{
    display: flex;
    text-justify: center;
    font-size: 15px;
    flex-grow: 4;
    align-items: center;
}
.nombreOpinion{
    font-size: 10px;
    display: flex;
    justify-self: center;
}
.footer{
    height: 250px;
    background-color: #F2861A;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.logoFooter{
    display: flex;
    height: 50px;
    width: auto;
    grid-column: 2/3;
    grid-row: 1/3;
    align-self: center;
}
.datosFooter{
    display: flex;
    grid-column: 4/7;
    grid-row: 1/3;
    flex-direction: column;
    justify-content: center;
}
.datoFooter{
    font-size: 13px;
    color: white;
}
.paginasFooter{
    display: flex;
    grid-column: 8/10;
    grid-row: 2/3;
    align-items: end;
    justify-content: space-between;
}
.paginasFooter a{
    display: flex;
    height: 70px;
    padding-bottom: 30px;
}
.botonArriba{
    display: flex;
    height: 10px;
    grid-column: 9/11;
    grid-row: 1/2;
    align-self: center;
    justify-self: center;
}
.botonArriba a.botona{
    display: flex;
    height: 40px;
}
.galeria{
    padding-top: 40px;
  }
.gridFotos{
    display: grid;
    grid-template-rows: 225px 225px;
    grid-template-columns: repeat(5,1fr);
    padding-right: 100px;
    padding-left: 100px;
    gap: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.horizontalDeTres{
    height: 100%;
    width: 100%;
    object-fit: cover;
    grid-column: span 3;
}
.horizontalDeDos{
    height: 100%;
    width: 100%;
    object-fit: cover;
    grid-column: span 2;
}
.panoramica{
    height: 450px;
    width: 100%;
    object-fit: cover;
    padding-top: 10px;
    padding-bottom: 10px;
}
.tresPorDos{
    height: 100%;
    width: 100%;
    object-fit: cover;
    grid-column: span 3;
    grid-row: span 2;
}
.descripcionFotos{
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    align-content: center;
    justify-items: center;
    flex-wrap: wrap;
}
.dosPorDos{
    height: 100%;
    width: 100%;
    object-fit: cover;
    grid-column: span 2;
    grid-row: span 2;
}
.instrumentosClases{
    display: flex;
    grid-template-columns: repeat(5,1fr);
    align-content: center;
    height: 92vh;
}
.instrumentosClases a{
    display: grid;
    grid-template-rows: 120 56;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    color: black;
    flex-grow: 1;
}
.instrumentosClases a:hover{
    flex-grow: 4;
}
.bannerConocenos{
    height: 620px;
    background-image: url(../images/IMGBannerConocenos.png);
    background-position: center;
    background-size: cover;
    align-content: center;
}
.tituloConocenos{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    background-color: rgba(0,0,0,0.6);
}
.textoPanoramico{
    padding: 120px;
}
.subtitulo{
    display: flex;
    padding-top: 20px;
    color: gray;
    font-size: 17px;
    padding-bottom: 10px;
    justify-content: center;
}
.divisionDeDos{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-right: 50px;
    padding-left: 50px;
}
.fotoDivDeDos{
    height: auto;
    width: 100%;
    padding: 50px;
}
.textoHighlight{
    font-size: 20px;
}
.textoDivDeDos{
    align-self: center;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
}
#dos{
    grid-column: 2/3;
    padding: 50px;
}
#dosdealto{
    grid-template-rows: 1fr 1fr;
}
#fotodedosdealto{
    grid-row: 1/3;
}
#abajo{
    padding-right: 20vw;
    padding-left: 20vw;
    color: white;
}
#abajoBanner{
    background-image: url(../images/Banner\ Final.jpeg);
}
.seleccion{
    display: flex;
    align-items: center;
    justify-content: center;
}
.divClases{
    padding: 80px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
  .img-box-uno{
    width: 100px;
    height: 450px;
    margin: 10px;
    border-radius: 50px;
    background: url(../images/ViolinClases.jpeg);
    background-size: cover;
    background-position: 40% 20%;
    transition: width 0.5s;
    text-decoration: none;
  }
  .img-box-uno:hover{
    width: 600px;
    cursor: pointer;
  }
  .img-box-dos{
    width: 100px;
    height: 450px;
    margin: 10px;
    border-radius: 50px;
    background: url(../images/PianoClases.jpg);
    background-size: cover;
    background-position: 40% 60%;
    transition: width 0.5s;
    text-decoration: none;
  }
  .img-box-dos:hover{
    width: 600px;
    cursor: pointer;
  }
  .img-box-tres{
    width: 100px;
    height: 450px;
    margin: 10px;
    border-radius: 50px;
    background: url(../images/GuitarraClases.jpeg);
    background-size: cover;
    background-position: 70% 0;
    transition: width 0.5s;
    text-decoration: none;
  }
  .img-box-tres:hover{
    width: 600px;
    cursor: pointer;
  }
  .img-box-cuatro{
    width: 100px;
    height: 450px;
    margin: 10px;
    border-radius: 50px;
    background: url(../images/CheloClases.JPG);
    background-size: cover;
    background-position: 60% 40%;
    transition: width 0.5s;
    text-decoration: none;
  }
  .img-box-cuatro:hover{
    width: 600px;
    cursor: pointer;
  }

  .img-box-cinco{
    width: 100px;
    height: 450px;
    margin: 10px;
    border-radius: 50px;
    background: url(../images/FlautaClases.jpeg);
    background-size: cover;
    background-position: 70% 0;
    transition: width 0.5s;
    text-decoration: none;
  }
  .img-box-cinco:hover{
    width: 600px;
    cursor: pointer;
  }
  .backgroundOpacity{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgba(0, 0, 0, 0.236);
    height: 100%;
    width: 100%;
    border-radius: 50px;
  }
  .backgroundOpacity h1{
    color: white;
    font-weight: bold;
    font-size: 18px;
  }
  .backgroundOpacity:hover h1{
    font-size: 38px;
    transition: 0.5s;
  }

#form {
    font-size: 14px;
    width: 300px;
    background: #FACF2D;
    border: 1px solid grey;
    border-radius: .5rem;
    margin: 2rem;
    padding: 1rem;
}
input, textarea {
    width: 100%;
    border: 1px solid grey;
    border-radius: .25rem;
    padding: 6px;
    margin-bottom: 8px;
}
.boton {
    cursor: pointer;
    border-radius: 3px;
    min-width: 96px;
    min-height: 28px;
    border: none;
    color: white;
    background-color: #F2861A;
    font-weight: bold;
    letter-spacing: 1.25px;
}
#trucazo{
    opacity: 0;
}
@media (max-width:700px) {
    .instrumentos{
        flex-wrap: wrap;
    }
    .h3 {
        font-size: 19px;

}
#segundaopinion{
    display: none;
}
.fotoInstrumento{
    height: 100px;
}
.seccionIns{
    height: 300px;
}
.paginasFooter{
    display: none;
}
p{
    font-size: 7px;
}
h3{
    font-size: 10px;
}
h1{
    font-size: 8px;
}
}
@media (max-width:380px) {
    .h3 {
        font-size: 14px;

}
.datosFooter{
    display: none;
}
.seccionIns{
    height: 600px;
}
}