*{
  transition: 200ms;
  
}

:root{
  --gris_fondo : rgba(107, 107, 107, 0.250);
  --fondo_hover : rgba(64, 40, 197, 0.477);
}

body, html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:visible;
    background-image: url(".images/bg-intro-desktop.png");
    background-color: black; 
    scroll-behavior: smooth; 
  }




#header {
    transition: 500ms;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-decoration: none;
    font-family: 'Alata', sans-serif;
    font-weight: 500;
    position: relative;
    /*background-color: rgb(255, 255, 255);*/
    background-image: url("../images/yamaha_keyboard1.png");
    background: linear-gradient(180deg, #373dff, transparent);
    background-size: 1900px;
    background-position-y: 60%;
  }

  #header:hover {
    transition: 1000ms;
    /*background-color: rgb(255, 255, 255);*/
    /*background-image: url("../images/yamaha_keyboard1.png");
    /*background: linear-gradient(180deg, #000000, transparent);*/
    background-color: #a10046;
  }

  #header #logo {
    position: relative;
    /*padding: 20px 0;*/
    margin: auto;
    width: 350px;
  }

  #header li {
    display: inline-block;
    position: relative;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-right: 5%;
  }
  
  /*#header li::after {
    content: '';
    position: absolute;
    height: 2px;
    background: rgb(255, 255, 255);
    width: 0%;
    left: 0;
    bottom: -4px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  */
  #header li:hover::after {
    width: 100%;
  }
  
  #header a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    padding: 10px;
    font-size: 20PX;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 10px;
  }

  #header a:hover {
    text-decoration: none;
    color: rgb(255, 255, 255);
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.185);
    border-radius: 10px;
  }

  #header ul {
    position: relative;
    width: 60%;
    list-style: none;
  }

#mid{
    width: 100%;
    height: auto;
    background-image: url("../images/keyboard_bg.png");
    background-size: 3000px;
    padding: 3% 0;
}

#text_mid1 {
  position: relative;
  display: flow-root;
  background-color: var(--gris_fondo);
  height: auto;
  width: 39%;
  font-family: 'Josefin Sans', sans-serif;
  color: #ffffff;
  font-size: 300%;
  padding: 3% 3%;
  left: 3%;
  margin-top: 0%;
  text-align: center;
}

#text_mid1:hover {
  background-color: var(--fondo_hover);
  left: 5%;
  font-weight: 900;
  /* border-top-right-radius: 25px;
  border-bottom-right-radius: 25px; */
}

#text_mid1 #tmid1 {
  margin-top: 4%;
  font-family: 'Alata', sans-serif;
  color: #ffffff;
  font-size: 25px;
  text-align: justify;
  text-indent: 40px;
}

#text_mid2 {
  position: relative;
  display: flow-root;
  grid-row: 1;
  grid-column: 2;
  background-color: var(--gris_fondo);
  height: auto;
  width: 39%;
  font-family: 'Josefin Sans', sans-serif;
  color: #ffffff;
  font-size: 300%;
  padding: 3% 3%;
  left: 52%;
  margin-top: -380px;
  text-align: center;
}

#text_mid2:hover {
  background-color: var(--fondo_hover);
  left: 50%;
  font-weight: 900;
  /* border-top-right-radius: 25px;
  border-bottom-right-radius: 25px; */
}

#text_mid2 #tmid2 {
  margin-top: 4%;
  font-family: 'Alata', sans-serif;
  color: #ffffff;
  font-size: 25px;
  text-align: justify;
  text-indent: 40px;
}

#text_mid3 {
  display: flow-root;
  position: relative;
  background-color: var(--gris_fondo);
  height: auto;
  width: 39%;
  font-family: 'Josefin Sans', sans-serif;
  color: #ffffff;
  font-size: 300%;
  padding: 3% 3%;
  left: 3%;
  margin-top: -360px;
  text-align: center;
}

#text_mid3:hover {
  background-color: var(--fondo_hover);
  left:5%;
  font-weight: 900;
  /* border-top-right-radius: 25px;
  border-bottom-right-radius: 25px; */
}

  #text_mid3 #tmid3 {
    margin-top: 4%;
    margin-bottom: 3%;
    font-family: 'Alata', sans-serif;
    color: #ffffff;
    font-size: 25px;
    text-align: justify;
    text-indent: 40px;
  }

#text_mid3 #mapa {
  margin-top: 4%;
  width: 100%;
}

#fotos_mid {
  position: relative;
  display: flow-root;
  background-color: var(--gris_fondo);
  height: auto;
  width: 31%;
  font-family: 'Josefin Sans', sans-serif;
  color: #ffffff;
  font-size: 300%;
  padding: 4% 6%;
  left: 52%;
  margin-top: 50px;
  
}

#fotos_mid:hover {
  background-color: var(--fondo_hover);
  left:50%;
  /* border-top-right-radius: 25px;
  border-bottom-right-radius: 25px; */
  
}

div.scroll-container {
  background-color: #ff4b7200;
  overflow: auto;
  white-space: nowrap;
  padding: 0;
}

div.scroll-container img {
  padding: 10px;
}


#text_mid4 {
  position: relative;
  display: flow-root;
  background-color: var(--gris_fondo);
  height: auto;
  width: 33%;
  font-family: 'Josefin Sans', sans-serif;
  color: #ffffff;
  font-size: 300%;
  padding: 3% 6%;
  left: 52%;
  margin-top: 100px;
  text-align: justify;
}

#text_mid4:hover{
  background-color: var(--fondo_hover);
  left:50%;
  font-weight: 900;
  /* border-top-right-radius: 25px;
  border-bottom-right-radius: 25px; */
}

#text_mid4 #redes {
  margin-top: 4%;
  font-family: 'Alata', sans-serif;
  font-size: 25px;
  text-decoration: none;
}

#text_mid4 a{
  text-decoration:none;
    color: rgb(255, 255, 255);
    padding: 1px;
}

#text_mid4 ul{
  position: relative;
      width: -webkit-fill-available;
      list-style: none;
      font-family: 'Alata', sans-serif;
  }

#text_mid4 #insta_icon{
  width: 30px;
  position: absolute;
  margin-left: -32px;
  margin-top: 5px;
  text-decoration: none;
}
#text_mid4 #whatsapp_icon{
  width: 35px;
    position: absolute;
    margin-left: -36px;
    margin-top: 6px;
    text-decoration: none;
}

#text_mid4 #mail_icon{
  width: 30px;
  position: absolute;
  margin-left: -32px;
  margin-top: 8px;
  text-decoration: none;
}/*
.block .form-block{
    width: 30%;
    height: 60%;
    position: relative;
    margin: auto;
    padding: 2%;
    background-color:bisque;
}

.block .form-block p{
    font-family: 'Alata', sans-serif;
    text-decoration: none;
    color: black;
    padding: 10px 0;
    position:relative;
 }

 #status{
    position: relative;
    width: 100%;
    padding: 17px 0px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-color: var(--grayish-blue);
    border-style: double;
    border-width: 1px;
    text-indent: 6%;
    font-weight: 600;
    font-size: 16px;
 }

 #code{
    position: relative;
    width: 100%;
    padding: 17px 0px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-color:antiquewhite;
    border-style: double;
    border-width: 1px;
    text-indent: 6%;
    font-weight: 600;
    font-size: 16px;
}

#code:focus{
    position: relative;
    width: 100%;
    padding: 17px 0px;
    margin-bottom: 20px;
    border-radius: 8px;
    outline: none;
    border-color: brown;
    border-style: double;
    border-width: 1px;
    text-indent: 6%;
    font-weight: 600;
    font-size: 16px;
}

#error_code{
    font-size: 15px;
    text-align: left;
    margin-top: -15px;
    font-weight: 500;
    font-style: italic;
    color: red;
    margin-bottom: 20px;
}

#code.true{
    position: relative;
    width: 100%;
    padding: 17px 0px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-color: red;
    border-style: double;
    border-width: 2px;
    text-indent: 6%;
    font-weight: 600;
    font-size: 16px;
    color: red;
    transition: 0s;
}

.submit{
    width: 100%;
    height: 55px;
    border-radius: 5px;
    border-style: none;
    background-color: brown;
    font-size: 105%;
    color: white;
    font-weight: 400;
    box-shadow: black;
    text-decoration: none;
}
.submit:hover{
    width: 100%;
    height: 55px;
    border-radius: 5px;
    border-style: none;
    background-color: lightcoral;
    font-size: 105%;
    color: white;
    font-weight: 400;
    box-shadow: brown;
    cursor: pointer;
    text-decoration: none;
}*/


#bot_block{
    display:flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-decoration: none;
    font-weight: 400;
    position: relative;
    background-color: black;
}

#bot_block ul{
position: relative;
    width: -webkit-fill-available;
    list-style: none;
    font-family: 'Alata', sans-serif;
}

#bot_block li {
    display: inline-block;
    position: relative;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-right: 5%;
  }

#bot_block #insta_icon{
  width: 30px;
  position: absolute;
  margin-left: -32px;
  margin-top: -4px;
}
#bot_block #whatsapp_icon{
  width: 30px;
  position: absolute;
  margin-left: -32px;
}
  #bot_block a {
    text-decoration: none;
    color: rgb(151, 151, 151);
    padding: 10px;
  }

  #bot_block a:hover{
    text-decoration:double;
    color: white;
    
    padding: 10px;
  }

/*----------CELULAR----------*/

  @media (max-width: 1100px){

    body, html{
      width: 100%;
      height: 100%;
      overflow-x:hidden;
      margin: 0;
      padding: 0;
      background-image: url(".images/bg-intro-desktop.png");
      background-color: black; 
    }

    #header{
      display: block;
      padding: 0%;
    }

    #header #logo {
      display: block;
      position: relative;
      padding: 10px 0;
      width: 250px;
      left: 0px;
    }

    #header ul {
      position: relative;
      width: 100%;
      list-style: none;
      display: grid;
      margin: 0;
      margin-left: 0px;
      padding: 0;
      justify-items: center;
    }

    #header li {
      display: inline-block;
      position: relative;
      margin-top: 2%;
      margin-bottom: 2%;
      padding: 1%;
      margin-right: 0;
    }

    #header a {
      display: flow-root;
      text-decoration: none;
      color: rgb(255, 255, 255);
      padding: 0%;
      font-size: 22PX;
      background-color: rgba(255, 255, 255, 0);
      border-radius: 10px;
    }

 
    #mid {
      display: block;
    width: 100%;
    padding: 0;
    align-content: center;
    text-align: -webkit-center;
    background-size: 3500px;
    background-position-x: -1000px;
    }

    #text_mid1 {
      display: flex;
      text-align: center;
      flex-direction: column;
      position: relative;
      background-color: rgba(139, 139, 139, 0);
      height: auto;
      width: 100%;
      font-family: 'Josefin Sans', sans-serif;
      color: #ffffff;
      font-size: 230%;
      padding: 4% 0%;
      left: 0;
      margin-top: 0%;
    }

    #text_mid1 #tmid1 {
      margin-top: 4%;
      font-family: 'Alata', sans-serif;
      color: #ffffff;
      font-size: 20px;
      padding: 3%;
    }
    #text_mid1:hover {
      background-color: var(--fondo_hover);
      left: 0%;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    #text_mid2 {
      display: flex;
      text-align: center;
      flex-direction: column;
      position: relative;
      background-color: rgba(139, 139, 139, 0);
      height: auto;
      width: 100%;
      font-family: 'Josefin Sans', sans-serif;
      color: #ffffff;
      font-size: 230%;
      padding: 6% 0%;
      left: 0;
      margin-top: 0%;
      }
      #text_mid2 #tmid2 {
        margin-top: 4%;
        font-family: 'Alata', sans-serif;
        color: #ffffff;
        font-size: 20px;
        padding: 3%;
      }
      #text_mid2:hover {
        background-color: var(--fondo_hover);
        left: 0%;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
      }

    #text_mid3 {
      display: flex;
      text-align: center;
      align-items: center;
      flex-direction: column;
      position: relative;
      background-color: rgba(139, 139, 139, 0);
      height: auto;
      width: 100%;
      font-family: 'Josefin Sans', sans-serif;
      color: #ffffff;
      font-size: 230%;
      padding: 4% 0%;
      left: 0;
      margin-top: 0%;
    }

    #text_mid3 #tmid3 {
      margin-top: 4%;
      font-family: 'Alata', sans-serif;
      color: #ffffff;
      font-size: 20px;
      padding: 3%;
    }
    #text_mid3:hover {
      background-color: var(--fondo_hover);
      left: 0%;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    #text_mid3 #mapa{
      width: 92%;
    }

    #text_mid4 {
      display: flex;
      text-align: center;
      flex-direction: column;
      position: relative;
      background-color: rgba(139, 139, 139, 0);
      height: auto;
      width: 100%;
      font-family: 'Josefin Sans', sans-serif;
      color: #ffffff;
      font-size: 230%;
      padding: 4% 0%;
      left: 0;
      margin-top: 0%;
    }

    #text_mid4 ul{
    position: relative;
    width: -webkit-fill-available;
    list-style: none;
    font-family: 'Alata', sans-serif;
    margin-left: 0%;
    padding: 0;
  }
    #text_mid4 #tmid4 {
      margin-top: 4%;
      font-family: 'Alata', sans-serif;
      color: #ffffff;
      font-size: 20px;
      padding: 3%;
    }
    #text_mid4:hover {
      background-color: var(--fondo_hover);
      left: 0%;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }

    #text_mid4 #redes {
      margin-top: 4%;
      font-family: 'Alata', sans-serif;
      font-size: 20px;
      text-decoration: none;
  }

    #text_mid4 #mail_icon{
      display: none;
      width: 30px;
      position: absolute;
      margin-left: -32px;
      margin-top: 4px;
      text-decoration: none;
    }

    #text_mid4 #insta_icon{
      display: none;
  width: 30px;
  position: absolute;
  margin-left: -32px;
  margin-top: 5px;
  text-decoration: none;
}
    #text_mid4 #whatsapp_icon{
      display: none;
      width: 36px;
      position: absolute;
      margin-left: -39px;
      margin-top: 6px;
      text-decoration: none;
}

    #fotos_mid {
      display: flex;
      text-align: center;
      flex-direction: column;
      position: relative;
      background-color: rgba(139, 139, 139, 0);
      height: auto;
      width: 100%;
      font-family: 'Josefin Sans', sans-serif;
      color: #ffffff;
      font-size: 230%;
      padding: 4% 0%;
      left: 0;
      margin-top: 0%;
    }

    #fotos_mid #tmid1 {
      margin-top: 4%;
      font-family: 'Alata', sans-serif;
      color: #ffffff;
      font-size: 20px;
      padding: 1%;
    }
    #fotos_mid:hover {
      background-color: var(--fondo_hover);
      left: 0%;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }


  }