html{
    scroll-behavior: smooth;
} /*estilos pagina*/


#contenedor{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

.foto_100{
    width:100%;
}

.foto_100 img{
    width: 100%;
}
#fotocelular{
    display:none;
}

#myVideocel
{display:none;}

#titulo{
    position:absolute;
    top:22%;
    left:18%;
    z-index: 2;
}

#titulo h1{
font-size:6em;
font-family: "Tagesschrift", system-ui;
color: #d4c269;
text-shadow:8px 7px 20px #000000
}

#titulo2{
    position:absolute;
    top:15%;
    left:15%;
    z-index: 2;
    margin-right:20%;
}

#titulo2 h1{
    font-size:5em;
font-family: "Tagesschrift", system-ui;
color: #d4c269;
text-shadow:10px 4px 12px #000000;
text-align:center;
}

#titulo3{
    position:absolute;
    top:35%;
    left:15%;
    z-index: 2;
    margin-right:20%;
}

#titulo3 h1{
    font-size:5em;
font-family: "Tagesschrift", system-ui;
color: #d4c269;
text-shadow:10px 4px 12px #000000;
text-align:center;
}

#titulo4{
    position:absolute;
    top:20%;
    left:25%;
    z-index: 2;
    margin-right:20%;
}

#titulo4 h1{
    font-size:5em;
font-family: "Tagesschrift", system-ui;
color: #d4c269;
text-shadow:10px 4px 12px #000000;
text-align:center;
}

h1{
    font-family: "Tagesschrift", system-ui;
    color: #305d7d;
    text-shadow:2px 2px 2px #000000;
    font-size:3em;
}

nav{
   width:100%;
   background-color:#868852;
   height: 40px;
   position:fixed;
   top:0;
   left:0;
   z-index:3;
   padding-top:10px; 
}


nav a {
    text-decoration:none;
    color:#000000;
    font-size:1.5em;
    margin-left:130px;
    font-family:"Barlow Condensed", sans-serif;
    font-weight:400;
    font-style:normal
}

nav a.active{
    border-bottom: 3px solid #f7b71d !important;
    padding-bottom: 1px;
    padding-top: 25px;
    color:#fff
}

#centrar_menu{
    width:1000px;
    margin:0 auto;
}

.centrado {
    width:100%;
    max-width:1000px;
    margin:0 auto;

}

.centrado p{
    font-family:"Barlow Condensed", sans-serif;
    font-size:1.4em;
    line-height: 1.5;
    color:#010000
}

h2{
    padding:1.25em;
    font-size:1.5em;
    font-family: "Tagesschrift", system-ui;
    line-height: 1.5;
}
h3{
    padding:1.25em;
    font-size:1.5em;
    font-family: "Tagesschrift", system-ui;
    line-height: 1.5;  
    
}
mark{
    background-color: #d4c26973;
    color: #090909;
    
}

.divisores
{width:100%;}

.divisores img{
    width:100%;
}


#scrolly {
    position: relative;
    padding: 1rem;
  }

  .scrolly-overlay {
    position: relative;
    padding: 0;
    max-width: 35rem;
    margin: 0 auto;
  }

  .sticky-thing {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 0;
    top: 0;
    height: 100vh;
    /* Center everything inside */
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: center;
  }

  .step {
    margin: 0 auto 2rem auto;
    margin-bottom: 25rem;
    background-color: #eee;
    background-color: #fff;
    color: black;
    margin-left:200px;
  }

  .step p {
    text-align: center;
    padding: 1rem;
    font-size: 1.25rem;
    font-family:"Barlow Condensed", sans-serif;

  }

  .step h1{
    font-family: "Tagesschrift", system-ui;
    color: #305d7d;
    text-shadow:2px 2px 2px #000000;
    font-size:2.5em;
    text-align:center;
  }
#prueba1{
    width:60%;
}

#prueba1 img{
    width:60%;
}
#prueba2{
    width:60%;
}

#prueba2 img{
    width:60%;
}

#prueba3{
    width:60%;
}

#prueba3 img{
    width:60%;
}

#prueba4{
    width:60%;
}

#prueba4 img{
    width:60%;
}

#prueba5{
    width:60%;
}

#prueba5 img{
    width:60%;
}

#prueba6 {
    width:60%;
}

#prueba6 img{
    width:60%;
    margin-left:50%;

}

#botonaudio{
    text-align: center;
    font-size: 1.25rem;
    font-family:"Barlow Condensed", sans-serif;
}
#audiop{
    margin-left:32%;
}
footer{
    width: 100%;
    height: 110px;
    background-color: #868852;
    text-align: center;
    padding-top: 30px;
}
footer span{
    color: #090909;
    font-size: 1.5em;
    font-style: normal;
    font-family:"Barlow Condensed", sans-serif;


}



.foto_centrado 
{width:100%;}

.foto_centrado img{
    width:100%;
}

.foto_centrado p {
    text-align:right;
    font-family:"Barlow Condensed", sans-serif;
    border-right:3px dashed #305d7d;
    padding-right:15px;
    font-size:1.2em
}

#myVideo {
    position: relative;
    right: 0;
    bottom: -70;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    object-fit: cover;
    display:block;
}

#youtube{
    margin-left:25%;
}
/*Estilos menú responsive/*
/* Add a black background color to the top navigation */
.topnav {
    background-color: #868852;
    overflow: hidden;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:200000;
    display:none;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family:"Barlow Condensed", sans-serif;

  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
    
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    background-color: #d4c269;
    color: white;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  /* Fin estilos menú responsive */
  /* When it's less than 700 pixels wide, do normal scrollytelling */
  @media only screen and (min-width: 700px) {
    #scrolly.side-by-side {
      display: flex;
    }

    #scrolly.side-by-side > div {
      flex-basis: 0;
      flex-grow: 1;
      flex-shrink: 1;
      padding: 0.75em;
    }

    #scrolly.side-by-side .scrolly-overlay {
      margin-top: 70vh;
      order: 0;
      /* Change these to adjust sizing options */
      min-width: 15rem;
      max-width: 20rem;
    }

    #scrolly.side-by-side .sticky-thing {
      order: 1;
      flex-grow: 2;
    }
  }

  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    nav{
        display:none;
    }
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav{
        display:block;
    }

  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: fixed;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }

    #fotocomputador{
        display:none;
    }
    
    #fotocelular{
        display:block;
    }

    #titulo{
        top:58%;
        left:10px;
    }
    #titulo h1{
        font-size:4em;
    }
    
    .centrado p{
        margin-left:20px;
        margin-right:20px;
    }

    h2{
        font-size:1.2em;
    }
    .step {
        margin: 0;
        margin-left: 166px;
        width: 160px;
        background-color:hsla(0, 0%, 0%, 0)
    }
    .step h1{
        font-size:2em;
        margin-left:20px;
    }
    .step p{
        width: 100%;
        margin-left: 0;
        font-size: 0.95em;
    
    }
    #prueba1{
        width:70%;
        margin-left:0px;
    }

    #prueba1 img{
        width:70%;
    }
    #prueba2{
        width:70%;
        margin-left:0;
    }

    #prueba2 img{
        width:70%;
    }
    #prueba3{
        width:70%;
        margin-left:0;
    }

    #prueba3 img{
        width:70%;
    }
    #prueba4{
        width:70%;
        margin-left:0px;
    }

    #prueba4 img{
        width:70%;
    }
    #prueba5{
        width:70%;
        margin-left:0px;
    }

    #prueba5 img{
        width:70%;
    }
    footer{
        width:100%;
        height:100%;
        padding-top:10px;
        padding-bottom:10px;
    }
    footer span{
    margin-left:20px;
    font-size:1.3em;    }
    h1{
        margin-left:20px;
        font-size:2.5em;
        margin-right:20px;
    }

    #titulo2{
        left:-3%;
    }

    #titulo2 h1{
        font-size:3em;
    }

    .foto_centrado p{
        font-size:1em;
    }

    #myVideo{
        display:none;
    }

    #myVideocel{
        display:block;
        width:100%;
    }

    #titulo3{
        left: 6%;
        top: 20%;    }

    #titulo3 h1{
        font-size:3em;
    }

    #prueba6{
        width:100%;
        margin-left:0;
    }
    #prueba6 img{
        width:100%;
        margin-left:0;

    }
    #audiop{
        margin-left:7%;
    }

    #botonaudio p{
        font-size:1.25rem;
    };

    #titulo4{
        top: 14%;
    left: 11%;
    }

    #titulo4 h1{
        font-size:4em;
    }


  }