@media screen and (min-width: 540px) {
    .ind-sm{
        padding-left: 5%;
        padding-right: 5%;
    }
    .cuadro{
        width: 70%;
        margin-top: 10%;
    }
    .parallax-container {
    /*  this is where the magic happens:  */
    background-image: url("assets/bodega-recortada2.png");
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%; 

    text-shadow: 2px 2px 4px #424143;

    /* dimensions are important, ensure it is tall enough to scroll */ 
    min-height: 100vh;

    /* you are free to lay out the container items with flexbox or whatever means you wish */
    display: flex;
    flex-direction: column;
    align-items: center;
     justify-content: center;
    }

    .parallax-container2 {
    /*  this is where the magic happens:  */
    background-image: url("assets/IMG_5128-4.png");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-size: 100% 100%;
    
    text-shadow: 2px 2px 4px #424143;
    color:#ff6600;
    
    /* dimensions are important, ensure it is tall enough to scroll */ 
    min-height: 100vh;

    /* you are free to lay out the container items with flexbox or whatever means you wish */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
}
@media screen and (max-width: 540px) {
    .ind-lg{
        padding-left: 5%;
    }
    .cuadro{
        width: 85%;
        margin-top: 10%;
    }
    .row{
        padding: 0,0,0,0;
    }
    .parallax-container {
    /*  this is where the magic happens:  */
    background-color: #1a2ded;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%; 

    text-shadow: 2px 2px 4px #424143;

    /* dimensions are important, ensure it is tall enough to scroll */ 
    min-height: 50vh;

    /* you are free to lay out the container items with flexbox or whatever means you wish */
    display: flex;
    flex-direction: column;
    align-items: center;
     justify-content: center;
    }

    .parallax-container2 {
    /*  this is where the magic happens:  */
    background-color: #1a2ded;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-size: 100% 100%;
    
    text-shadow: 2px 2px 4px #424143;
    color:#ff6600;
    
    /* dimensions are important, ensure it is tall enough to scroll */ 
    min-height: 100vh;

    /* you are free to lay out the container items with flexbox or whatever means you wish */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
}

.nav-link{
    color:white;
}
.nav-link:hover {
    color: #4bccf9;
}
.navbar{
    position: fixed;
    top: 0;
    width: 100%;
    transition: top .5s;
    opacity: 0.9;
    z-index: 1;
}

.img-text-container {
    position: relative;
}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    padding: 30px;
}
.li1{
    margin-top: 35px;
}
li::marker {
    color: #ff6600;
    font-size: 60px;
}

.image_container{
    position: relative;
    text-align: center;
    color: white;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.reveal{
    position: relative;
    transform: translateY(75px);
    opacity: 0;
    transition: 1.5s all ease;
}

.reveal2{
    position: relative;
    transform: translateY(35px);
    opacity: 0;
    transition: 1.5s all ease;
}
.reveal2.active{
    transform: translateY(0);
    opacity: 1;
}
.reveal.active{
    transform: translateY(0);
    opacity: 1;
}
.azulito{
    color: #1a2ded;
    
    transition: 5s all ease;
    font-family: 'PT Sans Narrow', sans-serif;
    font-family: 'Unbounded', cursive;
}
.negro{
    font-weight: 500;
    transition: 5s all ease;
    font-family: 'PT Sans Narrow', sans-serif;
    font-family: 'Unbounded', cursive;
}
.bg-divided{
    width: 100%;
    background: linear-gradient(
        to right,
        #ff6600 0%,
        #ff6600 50%,
        #ffffff 50%,
        #ffffff 100%
    );
}
.float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:10px;
    right:19px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
}

.my-float{
    margin-top:16px;
}
.display-1{
    font-family: 'PT Sans Narrow', sans-serif;
    font-family: 'Unbounded', cursive;
}
.display-2{
    font-family: 'PT Sans Narrow', sans-serif;
    font-family: 'Unbounded', cursive;
}
.display-3{
    font-family: 'PT Sans Narrow', sans-serif;
    font-family: 'Unbounded', cursive;
}
.display-4{
    font-family: 'PT Sans Narrow', sans-serif;
    font-family: 'Unbounded', cursive;
}
.display-5{
    font-family: 'Raleway', sans-serif;
}
.display-6{
    font-family: 'DM Sans', sans-serif;
}
.bi:hover{
    color:#ff6600;
}
.box {
    border: 2px solid red;
    height: 100px;
    width: 100px;
    position: absolute;
}