@media screen and (min-width: 1200px) {
    .modal-dialog {
        max-width: 800px;
    }
}

@media only screen and (max-width: 992px) {

}

@media (max-width: 870px) {

}

@media (max-width: 720px) {
    .modal-dialog {
        max-width: 650px;
    }

    .carousel-caption{
        position: absolute;
        color: white;
      }

    iframe{
        width: 500px;
    }

}
@media (max-width: 400px) {

    .modal-dialog {
        max-width: 400px;
    }

    iframe{
        width: 320px;
    }

    .carousel-item img{
        width: 400px;
        height: 200px;
    }

    .carousel-caption, h2{
        font-size: 15px;
    }

    .btn_checkinfo{
        width: 130px;
        height: 30px;
        font-size: 8px;
    }
}

@media (max-width: 360px) {

    .modal-dialog {
        max-width: 360px;
    }

    iframe{
        width: 310px;
    }

    .carousel-item img{
        width: 360px;
        height: 200px;
    }
    
    .carousel-caption{        
        position: absolute;
        color: white;
      }

    .carousel-caption, h2{
        font-size: 2vh;
    }

    .btn_checkinfo{
        width: 130px;
        height: 30px;
        font-size: 8px;
    }
}


/*
    Extra small (xs) devices (portrait phones, less than 576px)
    No media query since this is the default in Bootstrap

    Small (sm) devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    Medium (md) devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    Large (lg) devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    Extra (xl) large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
    */