.infomercial {

}

.infomercial h2 {
    margin-bottom: 10px;
    text-align: left;
}

.infomercial .subtitleH2 {
    margin-bottom: 20px;
    text-align: left;
}

    .infomercial .introduction .container {
        margin-top: 50px;
    }


    .infomercial .video iframe {
        max-width: 100%;
        margin: 0 auto;
    }


    .infomercial .pictureListMobile {

    }

        .infomercial .pictureListMobile .pictureElement {
            max-width: 100%;
            margin-bottom: 16px;
        }
    
    .infomercial .pictureListDesktop {
        display : none;
    }




    .infomercial .iconSliderSection {
        margin-top: -20px;
        position: relative;
    }

        .infomercial .iconSliderSection .container {
            margin-bottom: 0;
        }


    .infomercial .introduction .linkBtn {
        display: none;
    }

    .infomercial .introduction .linkBtn i {
        transform: rotate(90deg);
    }



    .infomercial .modal.fade .modal-dialog {
        transition: all .6s ease-out;
        transform: translate(0, 100vh);
    }

    .infomercial .modal.show .modal-dialog {
        transform: translate(0, 0);
    }

    .infomercial .mapmodal .btn-close {
        padding-top: 20px;
        font-size: 35px;
        background: none;
        margin-left: auto;
        text-align: right;
        color: black;
        opacity: 1;
    }

    .infomercial .subCategoryList.buttonList {
        display: flex;
        flex-wrap: nowrap;
        overflow-y: auto;
    }

    .infomercial .cat {
        width: fit-content;
    }

    .infomercial .catEl {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 10px;
        height: 100%;
        width: 100%;
        min-height: 55px;
        border-radius: 3px;
        border: 1px solid #dee2e6;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
    }

        .infomercial .catEl:hover {
            background-color: rgba(170, 209, 78, 0.1);
        }

    .infomercial .active .catEl {
        border-color: #AAD14E;
    }

    .infomercial .active .catEl i {
        color: #AAD14E;
    }

.experienceListDetail {
    position: relative;
    height: 500px;
}


    .infomercial .experienceListDetail{
        padding: 0 !important;
        width: 100% !important;
        height: 400px !important;
        position: relative;
    }


        .infomercial .experienceListDetail .imgContainer,
        .experienceListing .experienceListDetail .imgContainer,
        .advertDetails .experienceListDetail .imgContainer {
            max-height: inherit !important;
            width: 100%;
            height: 100%;
        }

        .infomercial .experienceListDetail .expContent,
        .experienceListing .experienceListDetail .expContent,
        .advertDetails .experienceListDetail .expContent {
            position: absolute;
            bottom: 0;
            left: 0;
            min-height: 200px;
            width: 100%;
            background: rgba(51,67,53,0.7);
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: white;
        }

            .infomercial .experienceListDetail .expContent h4,
            .infomercial .experienceListDetail .expContent p,
            .experienceListing .experienceListDetail .expContent h4,
            .experienceListing .experienceListDetail .expContent p,
            .advertDetails .experienceListDetail .expContent h4,
            .advertDetails .experienceListDetail .expContent p {
                color: white;
            }


            .infomercial .experienceListDetail .expContent .expCategory,
            .experienceListing .experienceListDetail .expContent .expCategory,
            .advertDetails .experienceListDetail .expContent .expCategory {
                color: #73B544;
            }

    .infomercial .expsLists .list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .infomercial .expsLists .list > div {
        scroll-snap-align: start;
    }
    /* 
    
RESPONSIVE 

*/
    @media screen and (min-width:550px) {
    }


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

    .infomercial .iconSliderSection {
        margin-top: -40px;
        position: relative;
    }
    
    .infomercial .breadcrumbSection .container {
        margin-top: 0 !important;
    }

    .infomercial .pictureListMobile {
        display: none;
    }

    .infomercial .pictureListDesktop {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
        .infomercial .pictureListDesktop .pictureContainer {
            width: calc(50% - 8px);
            height: 265px;
            float: left;
            margin: 0 0 16px;
        }
            .infomercial .pictureListDesktop .pictureContainer .pictureElement {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }

    .floatHelper {
        display: none;
    }
    .infomercial .introduction .linkBtn {
        display: block;
    }
}


@media screen and (min-width:1024px) {
    .infomercial .pictureListMobile {
        display: none;
    }

    .infomercial .pictureListDesktop {
        display: block;
    }

    .floatHelper {
        display: block;
        clear: both;
    }

    .infomercial .pictureListDesktop .pictureContainer {
        width: 273px;
        height: 265px;
        float: left;
        margin: 0 8px 16px;
    }



        .infomercial .pictureListDesktop .pictureContainer:first-child, .infomercial .pictureListDesktop .pictureContainer:nth-child(4) {
            width: 561px;
            height: 265px;
        }

        .infomercial .pictureListDesktop .pictureContainer:first-child, .infomercial .pictureListDesktop .pictureContainer:nth-child(3) {
            margin-left: 0;
        }

        .infomercial .pictureListDesktop .pictureContainer:nth-child(2n) {
            margin-right: 0;
        }

        .infomercial .pictureListDesktop .pictureContainer:nth-child(3) {
            width: 273px;
            height: 546px;
        }

        .infomercial .pictureListDesktop .pictureContainer:nth-child(6) {
            margin-left: 7px;
        }

    .infomercial .subCategoryList.buttonList {
        display: flex;
        flex-wrap: wrap;
        overflow-y: hidden;
    }

    .infomercial .cat {
        width: 16.66666667%;
    }

    .infomercial .experienceListDetail {
        height: 475px !important;
    }

    .infomercial .expsLists .list {
        display: flex;
        flex-wrap: wrap;
        overflow-x: hidden;
    }
}

@media screen and (min-width:1200px) {
    .infomercial .pictureListDesktop .pictureContainer {
        width: 363px;
        height: 265px;
        float: left;
        margin: 0 8px 16px;
    }

        .infomercial .pictureListDesktop .pictureContainer:first-child, .infomercial .pictureListDesktop .pictureContainer:nth-child(4) {
            width: 741px;
            height: 265px;
        }

        .infomercial .pictureListDesktop .pictureContainer:nth-child(3) {
            width: 363px;
            height: 546px;
        }
}