/*
 * wx2click
 */

.wx2click_wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    background-size:cover;
    background-position: center;

    & .wx2click_trigger {
        padding: 20px 0px;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        box-sizing: border-box;
        max-width: 90%;
        margin: 0 auto;

        & .inner{
            background: #ffffffa8;
            border:1px solid #000;
            background: #ffffff40;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 10px;
            padding: 0 20px 20px;
            line-height: 1.3;
            font-size: 0.8em;
        }

        & .wx2click_trigger_btn {
            border:0;
            border-radius: 5px;
            padding: 8px 20px;
            font-size: 1em;
            background: #fff;
            transition: 0.3s all;

            &:hover{
                background:#000;
                color:#fff;
            }
        }
    }

    & .wx2click_layer > * {
        width: 100%;
        aspect-ratio: 16/9;
        margin:0;
        display:block;
    }
}

.wx2click_wrapper.GoogleMaps{
    background-image:url("../Images/GoogleMaps.jpg");
}
.wx2click_wrapper.Youtube {
    background-image: url(../Images/video_youtube.jpg);
}
.wx2click_wrapper.Vimeo{
    background-image: url(../Images/video_vimeo.jpg);
}
.wx2click_wrapper.iframe {
    background-image: url(../Images/iFrame.jpg);
}

@media(max-width: 786px) {
    .wx2click_wrapper.GoogleMaps,
    .wx2click_wrapper.GoogleMaps .wx2click_layer > * {aspect-ratio:9/16}
}
@media(max-width: 600px) {
    .wx2click_wrapper .wx2click_trigger{padding:20px}
}