/* Responsive Sizing for Mobile Devices */

@media only screen and (min-width: 1025px) {
    canvas {
        width: 50% !important;
    }

    .ui {
        width: 50% !important;
        float: right;
        margin-top: 0px;
        padding-top: 60px !important;
    }
}

@media only screen and (max-width: 1024px) {
    canvas {
        width: 100%;
    }

    .navbar {
        margin-top: 700px;
        width: 100% !important;
    }

    .ui {
        margin: 0px !important;
        margin-top: 780px !important;
    }

    .nav-pills {
        margin-top: 50px !important;
    }

    .choose-hairstyle-container {
        width: 80% !important;
    }

}


@media only screen and (max-width: 600px) {
    .navbar {
        margin-top: 400px !important;
    }

    .ui {
        margin-top: 480px !important;
    }
}


@media only screen and (max-width: 500px) {
    .navbar {
        margin-top: 350px !important;
    }

    .ui {
        margin-top: 420px !important;
    }
}

@media only screen and (max-width: 450px) {
    .navbar {
        margin-top: 290px !important;
    }

    .ui {
        margin-top: 350px !important;
    }
}

@media only screen and (max-width: 375px) {
    .navbar {
        margin-top: 270px !important;
    }

    .ui {
        margin-top: 330px !important;
    }
}

@media only screen and (max-width: 350px) {
    .navbar {
        margin-top: 220px !important;
    }

    .ui {
        margin-top: 280px !important;
    }
}

@media only screen and (max-width: 300px) {
    .navbar {
        margin-top: 200px !important;
    }

    .ui {
        margin-top: 270px !important;
    }
}