@import "nav.css";
@import "fonts.css";
@import "gallery.css";
@import "colors.css";
@import "lightbox.css";

body {
    background-image: url(../assets/img/bg-mobile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    margin: auto;
}

.margin-auto {
    margin-right: auto;
    margin-left: auto;
}

.main-container {
    background-color: #FFFFFF;
    width: 70vw;
    min-height: 50vh;
    padding: 8%;
}

.body-list {
    list-style: none;
    padding: 0;
    letter-spacing: 0.75;
}

.body-list-dotted{
    padding: 10px;
    margin-bottom: 5px;
}

.body-list-dotted > li {
    margin-bottom: 5px;
}

.body-box{
    padding: 8px;
    border: 2px solid #0fa976;
    line-height: 1.1em;
    font-size: 1.15em;
    letter-spacing: 0.25;
    font-family: 'AndaleMono';
}

.main-container-image{
    margin: auto auto 25px auto;
}

.main-container-image-consejos{
    margin: 25px auto 25px auto;
}

.link-style-none {
    text-decoration: none;
}

/* MEDIA QUERIES */  
@media (min-width: 501px) and (max-width: 1100px) {

    body {
        background-image: url(../assets/img/bg-mobile.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        margin: auto;
    }

    .main-container-image{
        margin: auto auto 25px auto;
    }
    
    .main-container-image-consejos{
    margin: 25px auto 25px auto;
    }


}

@media (min-width: 1101px) and (max-width: 1600px){
    
    body {
        background-image: url(../assets/img/background.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: unset;
        margin: auto;
    }

    .main-container{
        width: 50vw;
        padding: 5%;
    }

    .main-container-image{
        margin: auto auto 25px auto;
    }
    
    .main-container-image-consejos{
    margin: 25px auto 25px auto;
    }


    
}

@media (min-width: 1601px) and (max-width: 1900px){
    body {
        background-image: url(../assets/img/background.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: unset;
        margin: auto;
    }

    .main-container{
        width: 50vw;
        padding: 5%;
    }
    .main-container-image{
        margin: auto auto 25px auto; 
    }
    
    .main-container-image-consejos{
    margin: 25px auto 25px auto;
    }


   
}
@media (min-width: 1901px) {

    body {
        background-image: url(../assets/img/background.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: unset;
        margin: auto;
    }

    .main-container{
        width: 50vw;
        padding: 4%;
    }

    .main-container-image{
        margin: auto auto 25px auto;
    }
    
    .main-container-image-consejos{
    margin: 25px auto 25px auto;
    }


}