/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media (max-width: 1366px){
    /*#btnReview {*/
    /*    right: 13vw;*/
    /*    bottom: 8vh;*/
    /*    font-size: 1rem;*/
    /*}*/

    /*#btnPromo {*/
    /*    right: 13vw;*/
    /*    bottom: 17vh;*/
    /*    font-size: 1rem;*/
    /*}*/
}

@media (max-width: 991px) {
    .section .title {
        margin-left: 2rem;
        font-size: 1.25rem;
    }

    .section .caption {
        width: 40%;
    }

    .landing .title {
        font-size: 1.5rem;
    }

    .landing .caption {
        top: 70%;
        left: 10%;
        width: 50%;
        transform: translate(0, 0);
    }

    /*#btnReview {*/
    /*    font-size: 1rem;*/
    /*    transform: scale(0.8);*/
    /*    transform-origin: right;*/
    /*    right: 13vw;*/
    /*    top: 3vw;*/
    /*    bottom: unset;*/
    /*    left: unset;*/
    /*}*/

    #btnPromo {
        transform: scale(0.6) translateX(-50%);
        transform-origin: left;
        bottom: 1vw;
        font-size: 1rem;
    }

    .feature .feature-caption {
        font-size: 14px;
    }

    .feature-list .feature {
        width: calc(150px + 3vw);
    }

    .feel .feature-list {
        bottom: 0;
    }

    .safety .caption {
        top: 40%;
        left: 70%;
    }

    .comfort .caption {
        top: 40%;
        left: 35%;
    }

    .comfort .feature-list {
        bottom: 0;
    }

    .secure .caption {
        top: 20%;
        left: 35%;
    }

    .modal .modal-body .title {
        /* font-size: calc(1.325rem + .9vw); */
    }

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

    .modal #modal-prev img, .modal #modal-next img {
        width: 45px;
    }

    .gallery {
        background-image: url('../img/bg-gallery-sm.jpg');
    }
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media (max-width: 480px) {
    .section .title {
        margin-left: 40px;
        font-size: 14px;
    }

    .section .caption {
        width: 50%;
    }

    .landing .caption {
        top: 65%;
        left: 5%;
        width: 50%;
        transform: translate(0, 0);
    }

    /*#btnReview {*/
    /*    right: 3vw;*/
    /*    bottom: 3vh;*/
    /*    transform: scale(0.7);*/
    /*    transform-origin: right;*/
    /*    right: 5vw;*/
    /*}*/

    #btnPromo {
        transform: scale(0.6) translateX(-40%);
        transform-origin: left;
        font-size: 1rem;
        bottom: 0;
    }

    .section .feature-list {
        left: 0;
        transform: none;
        flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        justify-content: space-evenly;
        bottom: 0;
    }

    .feature-list .feature {
        margin: -5px 0;
        flex: 0 0 33.3333%;
        /* white-space: nowrap;
        overflow: hidden; */
    }

    .feature .feature-caption {
        /* display: none; */
        font-size: 10px;
        margin-bottom: 10px;
        padding: 0 0.5rem;
        /* overflow: hidden;
        text-overflow: ellipsis; */
    }

    .confident .caption .title { 
        margin-left: 10px;
    }

    .confident .caption {
        top: 25%;
        left: 70%;
    }

    .confident .feature-list {
        bottom: 0%;
    }

    .feel .caption {
        top: 25%;
        left: 30%;
    }

    .comfort .caption {
        top: 45%;
        left: 30%;
    }

    .comfort .feature-list {
        bottom: 0%;
    }

    .safety .caption {
        top: 40%;
        left: 70%;
    }

    .safety .feature-list {
        bottom: 0%;
    }

    .secure .caption {
        top: 20%;
        left: 35%;
        width: 60%;
    }

    .modal .modal-body .title {
        font-size: calc(1.3rem + .6vw);
        /* width: 80%; */
    }

    .modal .btn-close {
        width: 1.2rem;
        height: 1.2rem;
    }

    .modal #modal-prev img, .modal #modal-next img {
        width: 40px;
    }

    .gallery {
        background-image: url('../img/bg-gallery-sm.jpg');
    }
}