/*
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV
*/

@media only screen and (max-width: 480px) {
    html {
        font-size: 13px;
    }

    body {
        display: grid;
    }

    .home-banner {
        height: 250px;
        background-image: url('imgs/home-banner-01.jpg');
        background-position: center;
        background-size: auto 100%;
    }

    body {
        width: 100%;
        padding-top: 60px;
    }

    header {
        height: 60px;
    }

    .body-content {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .centered {
        width: 100%;
    }

    body.auth .home-banner {
        height: 150px;
        display: none;
    }

    #navbarNav ul li.admin {
        display: none;
    }

    #logo {
        width: 90px;
        position: absolute;
        background: url(imgs/pratic.svg) no-repeat;
        background-size: 80px 31px;
        background-position: 10px 50%;
        height: 60px;
        top: 0;
        left: 0;
    }

    #navbarNav ul li a.account {
        background-image: url("imgs/user.svg");
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-position: 50% 50%;
        font-size: 1px;
        color: transparent;
        padding: 20px 15px 10px 15px;
    }

        #navbarNav ul li a.account span {
            color: transparent;
            font-size: 1px;
        }

    #navbarNav ul li a.logoff {
        background-image: url("imgs/logout.svg");
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-position: 50% 50%;
        font-size: 1px;
        color: transparent;
        padding: 20px 15px 10px 15px;
    }

        #navbarNav ul li a.logoff span {
            color: transparent;
            font-size: 1px;
        }

    .cs-menu {
        padding: 0;
    }

        .cs-menu .cs-menu-item {
            width: 100%;
            border-style: none none solid none;
            border-width: 0 0 2px 0;
            position: static;
            display: block;
            /*padding: 1em 0em;*/
            margin: 0;
            /*line-height: 16px;*/
        }

            .cs-menu .cs-menu-item:last-child {
                width: 100%;
                border: none;
            }

            .cs-menu .cs-menu-item.current {
            }

    .columns {
    }

        .columns .column.c1 {
            max-width: 740px;
            margin: 0 auto;
        }

        .columns .column.c2 {
            display: block;
            clear: none;
            padding: 1rem;
            width: 100%;
            margin: 0 auto;
        }

        .columns.half {
            width: 100%;
        }

        .columns .column.c2 .column.c2 {
            clear: none;
            width: 50%;
            display: table-cell;
            padding: 0;
        }

        .columns .column > div.contents {
            padding: 0;
        }

    button, a.button {
        padding: 0.8rem;
        font-size: 1rem;
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .home-banner {
        height: 250px;
        background-image: url('imgs/home-banner-01.jpg');
        background-position: center;
    }

    body {
        width: 100%;
        padding-top: 60px;
    }

    header {
        height: 60px;
    }

    .body-content {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .centered {
        width: 100%;
    }

    body.auth .home-banner {
        height: 150px;
        display: none;
    }

    #navbarNav ul li.admin {
        display: none;
    }

    #logo {
        width: 90px;
        position: absolute;
        background: url(imgs/pratic.svg) no-repeat;
        background-size: 80px 31px;
        background-position: 10px 50%;
        height: 60px;
        top: 0;
        left: 0;
    }

    #navbarNav ul li a.account {
        background-image: url("imgs/user.svg");
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-position: 50% 50%;
        font-size: 1px;
        color: transparent;
        padding: 20px 15px 10px 15px;
    }

        #navbarNav ul li a.account span {
            color: transparent;
            font-size: 1px;
        }

    #navbarNav ul li a.logoff {
        background-image: url("imgs/logout.svg");
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-position: 50% 50%;
        font-size: 1px;
        color: transparent;
        padding: 20px 15px 10px 15px;
    }

        #navbarNav ul li a.logoff span {
            color: transparent;
            font-size: 1px;
        }

    .cs-menu {
        padding: 0;
    }

        .cs-menu .cs-menu-item {
            width: 100%;
            border-style: none none solid none;
            border-width: 0 0 2px 0;
            position: static;
            display: block;
            /*padding: 1em 0em;*/
            margin: 0;
            /*line-height: 16px;*/
        }

            .cs-menu .cs-menu-item:last-child {
                width: 100%;
                border: none;
            }

            .cs-menu .cs-menu-item.current {
            }

    .columns {
    }

        .columns .column.c1 {
            max-width: 740px;
            margin: 0 auto;
        }

        .columns .column.c2 {
            display: block;
            clear: none;
            padding: 1rem;
            width: 100%;
            margin: 0 auto;
        }

        .columns.half {
            width: 100%;
        }

        .columns .column.c2 .column.c2 {
            clear: none;
            width: 50%;
            display: table-cell;
            padding: 0;
        }

        .columns .column > div.contents {
            padding: 0;
        }

    button, a.button {
        padding: 0.8rem;
        font-size: 1rem;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        width: 100%;
        padding-top: 60px;
    }

    header {
        height: 60px;
    }

    .body-content {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .centered {
        width: 100%;
    }

    body.auth .home-banner {
        height: 150px;
        display: none;
    }

    #navbarNav ul li.admin {
        display: none;
    }

    #logo {
        width: 90px;
        position: absolute;
        background: url(imgs/pratic.svg) no-repeat;
        background-size: 80px 31px;
        background-position: 10px 50%;
        height: 60px;
        top: 0;
        left: 0;
    }

    #navbarNav ul li a.account {
        background-image: url("imgs/user.svg");
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-position: 50% 50%;
        font-size: 1px;
        color: transparent;
        padding: 20px 15px 10px 15px;
    }

        #navbarNav ul li a.account span {
            color: transparent;
            font-size: 1px;
        }

    #navbarNav ul li a.logoff {
        background-image: url("imgs/logout.svg");
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-position: 50% 50%;
        font-size: 1px;
        color: transparent;
        padding: 20px 15px 10px 15px;
    }

        #navbarNav ul li a.logoff span {
            color: transparent;
            font-size: 1px;
        }

    .cs-menu {
        padding: 0;
    }

        .cs-menu .cs-menu-item {
            width: 100%;
            border-style: none none solid none;
            border-width: 0 0 2px 0;
            position: static;
            display: block;
            /*padding: 1em 0em;*/
            margin: 0;
            /*line-height: 16px;*/
        }

            .cs-menu .cs-menu-item:last-child {
                width: 100%;
                border: none;
            }

            .cs-menu .cs-menu-item.current {
            }

    .columns {
    }

        .columns .column.c1 {
            max-width: 740px;
            margin: 0 auto;
        }

        .columns .column.c2 {
            display: block;
            clear: none;
            padding: 1rem;
            width: 100%;
            margin: 0 auto;
        }

        .columns.half {
            width: 100%;
        }

        .columns .column.c2 .column.c2 {
            clear: none;
            width: 50%;
            display: table-cell;
            padding: 0;
        }

        .columns .column > div.contents {
            padding: 0;
        }

    button, a.button {
        padding: 0.8rem;
        font-size: 1rem;
    }
}