/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */

/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {

    .banner--iphone{
        margin-top:300px;
        width: 335px;
        margin-left:auto;
        margin-right:auto;
    }

    .banner--text{
        margin-top: -280px;
        text-align: right;
    }

    .video-container{
        padding-bottom:560px;
    }

    .custom--icons{
        height: 50px;
    }    

}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .video-container h1{
        font-size:2rem;
    }

}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
    
}

/*  X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {

}

/*  XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}