/* Smartphones (portrait and landscape) ---------- */

@media screen and (min-width: 320px) and (max-width: 480px) {
    .navbar-nav {
        float: left;
    }
    .navbar-nav {
        margin-top: 0px;
        width: 100%;
        margin: 0px;
    }
    .navbar-collapse {
        overflow-x: visible;
        background-color: #c6242f;
    }
}


/* Smartphones (portrait) ---------- */

@media screen and (max-width: 320px) {
    .navbar-nav {
        float: left;
    }
    .navbar-nav {
        margin-top: 0px;
    }
    .navbar-collapse {
        overflow-x: visible;
        background-color: #c6242f;
    }
}


/* Smartphones (landscape) ---------- */

@media screen and (min-width: 321px) {
    .navbar-nav {
        float: left;
    }
    .navbar-nav {
        margin-top: 0px;
        /* width: 100%; */
        margin: 0px;
    }
    .navbar-collapse {
        overflow-x: visible;
        background-color: #c6242f;
        /* margin-top: -7vh; */
    }
}


/* Tablets, iPads (portrait and landscape) ---------- */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar-nav {
        float: left;
    }
    .navbar-nav {
        margin-top: 0px;
    }
    .navbar-collapse {
        overflow-x: visible;
        background-color: #c6242f;
    }
    
}


/* Tablets, iPads (portrait) ---------- */

@media screen and (min-width: 768px) {
    .navbar-nav {
        float: left;
    }
    .navbar-nav {
        margin-top: 0px;
    }
    .navbar-collapse {
        overflow-x: visible;
        background-color: #c6242f;
    }
}


/* Tablets, iPads (landscape) ---------- */

@media screen and (min-width: 1024px) {
    .navbar-nav {
        float: right;
    }
    .navbar-nav {
        margin-top: 17px;
    }
    .navbar-collapse {
        overflow-x: visible;
        background-color: transparent;
    }
}


/* Desktops and laptops ---------- */

@media screen and (min-width: 1224px) {
    .navbar-nav {
        float: right;
    }
    .navbar-nav {
        margin-top: 10px;
    }
    .navbar-collapse {
        overflow-x: visible;
        background-color: transparent;
    }
}


/* Large screens ---------- */

@media screen and (min-width: 1824px) {
    .navbar-nav {
        float: right;
    }
    .navbar-nav {
        margin-top: 17px;
    }
    .navbar-collapse {
        overflow-x: visible;
        background-color: transparent;
    }
}