/**
* @description
*
* CONTENTS:
*
*  1. BLOCK COMMON STYLES
*
*      1.1 CONTENT (includes pics, cards, text)
*      1.1.1 HEADER
*      1.2 CONTROLS (buttons containers)
*
*  2. BLOCK VARIANTS
*
*      2.1 CENTERED
*           2.1.1 VARIANT 1 ( pic centered )
*      2.2 RIGHT SIDED
*           2.2.1 VARIANT 2 ( pic right )
*           2.2.2 VARIANT 3 ( pic right, cards in column )
*      2.3 LEFT SIDED
*           2.3.1 VARIANT 4 ( pic left, cards in a mixed column grid )
*
* @see http://trueconf.ru/downloads/android.html
*/


/*****************************
     1. BLOCK COMMON STYLES
 *****************************/
.features-wrapper--touch {
    --features--touch__button-container-side-padding: 36px;
    --features--touch__slider-button-width: 56px;
    --features--touch__slide-image-padding: 24px;
    --features--touch__container-side-padding: 20px;
}

@media (max-width: 576px) {
    .features-wrapper--touch {
        margin-top: 80px;
        margin-bottom: 80px;
        --features--touch__button-container-side-padding: 16px;
        --features--touch__slider-button-width: 44px;
        --features--touch__slide-image-padding: 8px;
        --features--touch__container-side-padding: 18px;
    }
}

/* prevents menu stickiness on the page bug 234873 */
/*html, body {
    overflow-x: hidden;
}*/

/* 1.1 CONTENT */
.features--touch {
    display: grid;
    gap: 24px;
}

@media (max-width: 576px) {
    .features-wrapper--touch .ui-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* 1.1.1 HEADER */
.features--touch__group--head {

}

/* Reset heading/paragraph margins */
.features--touch__group--head > :first-child {
    margin-top: 0;
}

.features--touch__group--head > :last-child {
    margin-bottom: 0;
}

/* END HEADER */

.features--touch__group {

}

.features--touch__group--info {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    row-gap: 24px;
}

.features--touch__group--media {
    display: flex;
    justify-content: center;
    align-items: center;
}

.features--touch__group--media > * {
    max-width: 412px;
}

.features--touch__card {
    padding: 24px;
    border-radius: 12px;
    cursor: pointer;
    /*background-color: rgba(255, 255, 255, 0.7);*/
    display: grid;
    gap: 8px;
    grid-auto-rows: min-content;

}

.features--touch__card:hover,
.features--touch__card:focus,
.features--touch__card:active,
.features--touch__card--active {
    background-color: #EFF4FA;
}

.features--touch__card--active {
    position: relative!important;
    z-index: 5!important;
    display: grid;
}

.features--touch__slide {
    position: relative;
    display: none;
}

.features--touch__slide--active {
    display: block;
}

.features--touch__slide-background {
    max-width: 100%;
}

.features--touch__slide-overlay {
    position: absolute;
    z-index: 2;
    max-height: 89%;
    top: 5%;
    left: 25%;
}

.features--touch__slide--asymmetric .features--touch__slide-background {
    position: relative;
    left: -6%;
}

.features--touch__slide--asymmetric .features--touch__slide-overlay {
    left: 18%;
}

.features--touch__icon {
    /*width: min-content;*/
}

.features--touch__text {

}

.features--touch__text > * + * {
    margin-top: 12px;
}

/* Reset headers and paragraphs margins */
.features--touch__text > :first-child {
    margin-top: 0;
}

.features--touch__text > * {
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .features--touch__card {
        display: flex;
    }

    .features--touch__icon {
        display: none;
    }
}

/* END CONTENT */

/* 1.2 CONTROLS */
.features--touch__group--controls {
    display: none;

}

.features--touch__group--controls-active {
    display: block !important;
}

.features--touch__button {
    position: absolute;
    height: fit-content;
    bottom: 35%;
    /*height: 100%;*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    z-index: 10;
}

.features--touch__button--forward {
    right: var(--features--touch__button-container-side-padding);
}

.features--touch__button--backward {
    left: var(--features--touch__button-container-side-padding);
}

@media (max-width: 576px) {
    .features--touch__button--forward [class*="button"],
    .features--touch__button--backward [class*="button"] {
        padding-right: unset;
        padding-left: unset;
        min-width: unset;
        width: var(--features--touch__slider-button-width);
    }
}
/* END CONTROLS */
/* END COMMON */

/*************************
     2. BLOCK VARIANTS
*************************/

/*************************
     2.1 CENTERED
*************************/

/* 2.1.1 VARIANT 1 */
.features--touch-center {
    grid-template-columns: 1fr minmax(350px, 412px) 1fr;
}

.features--touch-center .features--touch__slide {
    padding-left: var(--features--touch__slide-image-padding);
    padding-right: var(--features--touch__slide-image-padding);
    -webkit-filter: drop-shadow(33px 38px 20px rgba(0, 0, 0, 0.02)) drop-shadow(19px 21px 17px rgba(0, 0, 0, 0.06)) drop-shadow(8px 9px 13px rgba(0, 0, 0, 0.1)) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.12));
    filter: drop-shadow(33px 38px 20px rgba(0, 0, 0, 0.02)) drop-shadow(19px 21px 17px rgba(0, 0, 0, 0.06)) drop-shadow(8px 9px 13px rgba(0, 0, 0, 0.1)) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.12));
}

.features--touch__group--head ~ .features--touch-center {
    margin-top: 32px;
}

@media (max-width: 1024px) {
    .features--touch-center {
        border-radius: 12px;
        height: fit-content;
        background-color: #EFF4FA;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 1fr max-content;
        grid-template-areas: "info" "media";
    }

    .features--touch-center .features--touch__card {
        position: absolute;
        z-index: -1;
    }

    .features--touch-center * :not(.features--touch__card):not(.features--touch__card *):not(.features--touch__card--active):not(.features--touch__card--active *):not(.features--touch__slide--active):not(.features--touch__group--media) {
        display: none;
    }

    .features--touch-center .features--touch__slide {
        max-width: 67%!important;
        margin-bottom: 72px;
    }

    .features--touch-center .features--touch__card {
        padding: 20px;
        gap: 12px;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: auto;
        height: fit-content;
    }

    .features--touch-center .features--touch__card--active {
        background: unset;
    }

    .features--touch-center .features--touch__group--info {
        grid-template-rows: min-content;
        grid-area: info;
    }

    .features--touch-center .features--touch__group--media {
        grid-area: media;
    }

}

@media (min-width: 771px) {
    .features--touch__group--head ~ .features--touch-center {
        margin-top: 64px;
    }

    .features--touch-center .features--touch__slide {
        max-width: 412px !important;
    }

}

/* END VARIANT 1 */

/*************************
     2.1 RIGHT SIDED
*************************/

/* 2.2.1 VARIANT 2 */
.features--touch-right {
    grid-template-columns: 1fr 1fr minmax(364px, 412px);
    grid-template-rows: auto auto;
    grid-template-areas:
                        "head head media"
                        "info-1 info-2 media";
}
.features--touch-right__group--head-mobile {
    display: none;
}

.features--touch-right__group--head-desktop {
    grid-area: head;
    padding: 24px;
    max-width: 628px;
}

.features--touch-right .features--touch__slide {
    padding-left: var(--features--touch__slide-image-padding);
    padding-right: var(--features--touch__slide-image-padding);
}

.features--touch-right .features--touch__slide-background {
    -webkit-filter: drop-shadow(33px 38px 20px rgba(0, 0, 0, 0.02)) drop-shadow(19px 21px 17px rgba(0, 0, 0, 0.06)) drop-shadow(8px 9px 13px rgba(0, 0, 0, 0.1)) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.12));
    filter: drop-shadow(33px 38px 20px rgba(0, 0, 0, 0.02)) drop-shadow(19px 21px 17px rgba(0, 0, 0, 0.06)) drop-shadow(8px 9px 13px rgba(0, 0, 0, 0.1)) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.12));
}

.features--touch-right__group--info:nth-child(2) {
    grid-area: info-1;
}

.features--touch-right__group--info:nth-child(3) {
    grid-area: info-2;
}

.features--touch-right__group--media {
    grid-area: media;
}

/* SLIDES MENU PARTICULAR CASES */
/* BACKGROUND PARTS */
.features--touch-right [src*=slide-overlay--chat] {
    top: unset;
    bottom: 8%;
    left: 0;
}

.features--touch-right [src*=slide-overlay--active-speaker-v2] {
    top: unset;
    bottom: 18%;
    left: -8%;
}

@media (min-width: 771px) {
    .features--touch-right .features--touch__slide {
        padding-left: 10%;
        padding-right: 10%;
    }

    .features--touch-right .features--touch__slide:nth-child(1),
    .features--touch-right .features--touch__slide:nth-child(3) {
        padding-right: 20%;
        padding-left: 0;
    }
    .features--touch-right [src*=slide-overlay--reactions],
    .features--touch-right [src*=slide-overlay--answer-menu] {
        padding-left: 5%;
        padding-right: 5%;
    }
    .features--touch-right [src*=slide-overlay--chat] {
        max-width: 92%;
        top: unset;
        bottom: 7%;
        left: 5%;
    }
    .features--touch-right [src*=slide-overlay--active-speaker-v2] {
        max-width: 90%;
        top: unset;
        bottom: 15%;
        left: -5%;
    }
}
/* OVERLAY PARTS */
.features--touch-right [src*=slide-overlay--answer-menu] {
    max-width: 100%;
    left: 0;
}

.features--touch-right [src*=slide-overlay--answer-menu-1] {
    top: 7%;
}

.features--touch-right [src*=slide-overlay--answer-menu-2] {
    top: unset;
    bottom: 2%;
}

.features--touch-right [src*=slide-overlay--reactions] {
    max-width: 100%;
    top: unset;
    bottom: 2%;
    left: 0;
}

@media (max-width: 1024px) {
    .features--touch-right {
        grid-template-columns: 1fr minmax(332px, 364px);
        grid-auto-rows: auto;
        grid-template-areas:
                        "info-1 media"
                        "info-2 media";
    }

    .features--touch-right__group--head-mobile {
        display: block;
    }

    .features--touch-right__group--info .features--touch__card {
        padding: 20px;
        gap: 12px;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: auto;
    }

    .features--touch-right__group--head-desktop {
        display: none;
    }

    .features--touch-right__group--head-mobile ~ .features--touch-right {
        margin-top: 32px;
    }
}

@media (min-width: 771px) {
    .features--touch-right .features--touch__slide {
        max-width: 364px !important;
    }
}

@media (max-width: 770px) {
    .features--touch-right {
        border-radius: 12px;
        height: fit-content;
        background-color: #EFF4FA;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto max-content;
        grid-template-areas: "info" "media";
    }

    .features--touch-right .features--touch__card {
        position: absolute;
        z-index: -1;
    }

    .features--touch-right .features--touch__slide {
        max-width: 55%!important;
    }

    .features--touch-right .features--touch__slide {
        margin-bottom: 72px;
    }

    .features--touch-right .features--touch__card {
        height: fit-content;
    }

    .features--touch-right .features--touch__card--active {
        background: unset;
    }

    .features--touch-right .features--touch__text--header {
        font-size: 22px;
    }

    .features--touch-right .features--touch__text--content {
        font-size: 16px;
    }

    .features--touch-right * :not(.features--touch__card):not(.features--touch__card *):not(.features--touch-right__group--head):not(.features--touch-right__group--head *):not(.features--touch__card--active):not(.features--touch__card--active *):not(.features--touch__slide--active):not(.features--touch__slide--active *):not(.features--touch__group--media) {
        display: none;
    }

    .features--touch-right .features--touch__group--head {

    }

    .features--touch-right .features--touch__group--info {
        grid-area: info;
        grid-template-rows: auto;
    }

    .features--touch-right .features--touch__group--media {
        grid-area: media;
    }
}

/* END VARIANT 2 */

/*  2.2.2 VARIANT 3 (without main heading) */
.features--touch-right--info-column .features--touch__slide {
    -webkit-filter: drop-shadow(33px 38px 20px rgba(0, 0, 0, 0.02)) drop-shadow(19px 21px 17px rgba(0, 0, 0, 0.06)) drop-shadow(8px 9px 13px rgba(0, 0, 0, 0.1)) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.12));
    filter: drop-shadow(33px 38px 20px rgba(0, 0, 0, 0.02)) drop-shadow(19px 21px 17px rgba(0, 0, 0, 0.06)) drop-shadow(8px 9px 13px rgba(0, 0, 0, 0.1)) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.12));
}

@media (min-width: 771px) {
    .features--touch-right--info-column {
        grid-template-columns: 1fr 1fr minmax(364px, 412px);
        grid-auto-rows: auto;
        grid-template-areas:
                        "info info media"
                        "info info media";
    }

    .features--touch-right--info-column .features--touch__slide {
        padding-left: var(--features--touch__slide-image-padding) !important;
        padding-right: var(--features--touch__slide-image-padding) !important;
    }

    .features--touch-right--info-column .features--touch-right__group--info {
        grid-area: info;
    }
}

@media (max-width: 770px) {
    .features--touch-right--info-column .features--touch__slide {
        max-width: 67% !important;
    }
    @media (min-width: 576px) {
        .features--touch-right--info-column .features--touch__slide {
            max-width: 373px !important;
        }
    }
}
/* END VARIANT 3 */

/*************************
     2.3 LEFT SIDED
*************************/

/* LEFT SIDED COMMON STYLES */
.features--touch-left {
    display: grid;
    gap: 24px;
}

.features--touch-left .features--touch__group--head {
    grid-area: head;
}

.features--touch-left .features--touch__group--media {
    grid-area: media;
}

.features--touch-left__group--head-mobile {
    display: none;
}

.features--touch-left__group--head-desktop {
    padding: 24px;
    height: min-content;
}

.features--touch-left .features--touch__slide {
    padding-left: var(--features--touch__slide-image-padding) !important;
    padding-right: var(--features--touch__slide-image-padding) !important;
}


.features--touch-left__group--info {
    display: grid;
    gap: 24px;
    grid-area: info;
}

@media (max-width: 770px) {
    .features--touch-left .features--touch__slide {
        max-width: 67% !important;
    }

    @media (min-width: 576px) {
        .features--touch-left .features--touch__slide {
            max-width: 373px !important;
        }
    }
}

@media (max-width: 1024px) {
    .features--touch-left {
        grid-template-columns: 1fr minmax(332px, 364px);
        grid-auto-rows: auto;
        grid-template-areas:
                        "media info"
                        "media info";
    }


        .features--touch-left__group--head-mobile {
            display: block;
        }

        .features--touch-left__group--info .features--touch__card {
            padding: 20px;
            gap: 12px;
            grid-template-columns: repeat(2, auto);
            grid-template-rows: auto;
        }

        .features--touch-left__group--head-desktop {
            display: none;
        }

        .features--touch-left__group--head-mobile ~ .features--touch-left {
            margin-top: 32px;
        }
    }


@media (min-width: 771px) {
    .features--touch-left--info-mixed .features--touch__card {
        background-color: #EFF4FA;
        cursor: default;
    }

    .features--touch-left .features--touch__slide {
        max-width: 364px !important;
    }
}

@media (max-width: 770px) {
    .features--touch-left .features--touch-left__group--info {
        display: block;
    }

    .features--touch-left {
        border-radius: 12px;
        height: fit-content;
        background-color: #EFF4FA;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto max-content;
        grid-template-areas: "info" "media";
    }

    .features--touch-left .features--touch__card {
        position: absolute;
        z-index: -1;
    }

    .features--touch-left .features--touch__slide {
        max-width: 67% !important;
    }

    .features--touch-left .features--touch__slide {
        margin-bottom: 72px;
    }

    .features--touch-left .features--touch__card {
        height: fit-content;
    }

    .features--touch-left .features--touch__card--active {
        background: unset;
    }

    .features--touch-left .features--touch__text--header {
        font-size: 22px;
    }

    .features--touch-left .features--touch__text--content {
        font-size: 16px;
    }

    .features--touch-left * :not(.features--touch__card):not(.features--touch__card *):not(.features--touch-left__group--head):not(.features--touch-left__group--head *):not(.features--touch__card--active):not(.features--touch__card--active *):not(.features--touch__slide--active):not(.features--touch__slide--active *):not(.features--touch__group--media) {
        display: none;
    }
}

/* LEFT SIDED COMMON STYLES END */

/* 2.3.1 VARIANT 4 */
/*.features--touch-left--info-mixed .features--touch__slide {*/
/*    -webkit-filter: drop-shadow(33px 38px 20px rgba(0, 0, 0, 0.02)) drop-shadow(19px 21px 17px rgba(0, 0, 0, 0.06)) drop-shadow(8px 9px 13px rgba(0, 0, 0, 0.1)) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.12));*/
/*    filter: drop-shadow(33px 38px 20px rgba(0, 0, 0, 0.02)) drop-shadow(19px 21px 17px rgba(0, 0, 0, 0.06)) drop-shadow(8px 9px 13px rgba(0, 0, 0, 0.1)) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.12));*/
/*}*/

.features--touch-left--info-mixed .features--touch-left__group--info .features--touch__card:nth-of-type(1) {
    grid-area: s-1;
}

.features--touch-left--info-mixed .features--touch-left__group--info .features--touch__card:nth-of-type(2) {
    grid-area: i-1;
}

.features--touch-left--info-mixed .features--touch-left__group--info .features--touch__card:nth-of-type(3) {
    grid-area: i-2;
}

.features--touch-left--info-mixed .features--touch-left__group--info .features--touch__card:nth-of-type(4) {
    grid-area: i-3;
}

.features--touch-left--info-mixed .features--touch-left__group--info .features--touch__card:nth-of-type(5) {
    grid-area: i-4;
}


@media (min-width: 771px) {

    .features--touch-left--info-mixed {
        grid-auto-columns: auto;
        grid-template-rows: min-content max-content;
        grid-template-areas:
            "media head head"
            "media info info";
    }

    .features--touch-left--info-mixed .features--touch-left__group--info {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content 1fr 1fr;
        grid-template-areas:
                        "s-1 s-1"
                        "i-1 i-2"
                        "i-3 i-4";
    }

    @media (max-width: 1024px) {
        .features--touch-left--info-mixed .features--touch-left__group--info {
            grid-template-columns: 1fr;
            grid-template-areas:
                        "s-1"
                        "i-1"
                        "i-2"
                        "i-3"
                        "i-4";
        }
    }
    .features--touch-left--info-mixed .features--touch__card {
        background-color: #EFF4FA;
        cursor: default;
    }
}
/* END VARIANT 4 */