/* This styling is for browsing on desktop. */

@media only screen and (min-width: 768px) {

    :root {
        --width-of-carousel-control: 48px;
    }

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    .modal-dialog {
        width: 99%;
    }

    .ic-close-button-div {
        margin:15px;
    }
    .ic-btn-close-modal-carousel {
        font-size: 20px; 
    }
    .carousel-control {
        width: var(--width-of-carousel-control);
    }
    .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
        right: 10px;
    }
    .carousel-control .glyphicon-chevron-left, .carousel-control .icon-next {
        left: 10px;
    }
    .ic-glyphicon-modal-carousel {
        position: absolute;
        top: 5px;
        right: 5px;
    }

}