/* vertical tabbed content
   ============================ */

.vertical-tabbed-content .wrapper {
    padding-bottom: 40px;
    padding-top: 40px;
}

/* tabs */
.vertical-tabbed-content .tabs {
    position: relative;
    -moz-transition: 0.6s ease;
    -ms-transition: 0.6s ease;
    -o-transition: 0.6s ease;
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
}
.vertical-tabbed-content .tabs .tab {
    display: flex;
    -webkit-flex-flow: column;
    flex-flow: column;
}

.ie9 .vertical-tabbed-content .tabs .tab {
    display: block;
}

/* tab heading */
.vertical-tabbed-content .tab-heading {
    clear: left;
    width: 33%;
}
.vertical-tabbed-content .tab-heading button {
    color: #6b6b6b;
    display: block;
    font-family: "Freight Sans W03 Medium", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 3rem;
    padding: 0 20px;
    position: relative;
    text-align: left;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    width: 100%;
}
.ru .vertical-tabbed-content .tab-heading button {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 500;
}
.vertical-tabbed-content .tab-heading button::after {
    background: #f2f2f2;
    bottom: 0;
    clear: both;
    content: "";
    display: block;
    left: 50%;
    height: 2px;
    margin-left: -47.5%;
    position: absolute;
    width: 95%;
}
.vertical-tabbed-content .tab-heading button span {
    -ms-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    height: 4px;
    opacity: 0;
    position: absolute;
    right: 21px;
    top: 55%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    visibility: hidden;
    width: 4px;
}
.vertical-tabbed-content .tab-heading.active button {
    background: #21016b;
    color: #ffffff;
    font-family: "Freight Sans W01 Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.ru .vertical-tabbed-content .tab-heading.active button {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 600;
}
.vertical-tabbed-content .tab-heading.active button::after {
    display: none;
}
.vertical-tabbed-content .tab-heading button:focus span,
.vertical-tabbed-content .tab-heading.active button span {
    opacity: 1;
    -ms-filter: alpha(opacity=100);
    filter: alpha(opacity=100);
    visibility: visible;
}
.vertical-tabbed-content .tab-heading button span::before,
.vertical-tabbed-content .tab-heading button span::after,
.vertical-tabbed-content .tab-heading.active button:focus span::before,
.vertical-tabbed-content .tab-heading.active button:focus span::after {
    background: #ffffff;
    content: "";
    display: block;
    height: 2px;
    position: relative;
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 6px;
}
.vertical-tabbed-content .tab-heading button span::after,
.vertical-tabbed-content .tab-heading.active button:focus span::after {
    top: -5px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.vertical-tabbed-content .tab-heading button:focus span::before,
.vertical-tabbed-content .tab-heading button:focus span::after {
    background: #12003b;
}

.ie9 .vertical-tabbed-content .tab-heading {
    float: left;
}

/* tab content */
.vertical-tabbed-content .tab-content {
    display: flex;
    flex-flow: row-reverse;
    width: 67%;
}
.vertical-tabbed-content .tab-content.full-height {
    height: 100%;
}
.vertical-tabbed-content .tab-content .image,
.vertical-tabbed-content .tab-content .description {
    color: #ffffff;
    height: 100%;
    min-height: 529px;
}
.vertical-tabbed-content .tab-content .image {
    overflow: hidden;
}
.vertical-tabbed-content .tab-content .image > img {
    height: 100%;
    min-width: 100%;
    object-fit: cover;
}
.vertical-tabbed-content .tab-content .description .inner {
    height: 100%;
    padding: 50px 50px 71px 70px;
}
.vertical-tabbed-content .tab-content .description .inner h3 {
    margin-bottom: 18px;
}
.vertical-tabbed-content .tab-content .description .inner h3 a {
    color: #ffffff;
}
.vertical-tabbed-content .tab-content .description .inner h3 a:focus {
    text-decoration: underline;
}
.vertical-tabbed-content .tab-content .description .inner .cta {
    padding-top: 33px;
}

.ie9 .vertical-tabbed-content .tab-content {
    display: block;
    float: right;
}

/* responsive
   ============================ */

@media screen and (max-width: 1024px) {

    /* tab content */
    .vertical-tabbed-content .tab-content .description .inner {
        padding: 30px 40px 50px 30px;
    }
}

@media screen and (max-width: 880px) {

    /* tab content */
    .vertical-tabbed-content .tab-content .image {
        width: 40%;
    }
    .vertical-tabbed-content .tab-content .image > img {
        margin-left: -40%;
        min-width: 200%;
    }
    .vertical-tabbed-content .tab-content .description {
        width: 60%;
    }
}

@media screen and (max-width: 736px) {

    /* tabs */
    .vertical-tabbed-content .tabs .tab {
        display: block;
    }

    /* tab heading */
    .vertical-tabbed-content .tab-heading {
        border-bottom: 1px solid #ffffff;
        clear: both;
        position: relative;
        width: 100%;
    }
    .vertical-tabbed-content .tab-heading button {
        padding: 8px 20px;
    }
    .vertical-tabbed-content .tab-heading button span {
        opacity: 1;
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        right: 25px;
        top: 50%;
        visibility: visible;
    }
    .vertical-tabbed-content .tab-heading button span::before,
    .vertical-tabbed-content .tab-heading button span::after {
        background: #320452;
    }
    .vertical-tabbed-content .tab-heading.active button span {
        right: 21px;
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .vertical-tabbed-content .tab-heading.active button span::before,
    .vertical-tabbed-content .tab-heading.active button span::after {
        background: #ffffff;
    }

    /* tab content */
    .vertical-tabbed-content .tab-content {
        clear: both;
        display: none;
        float: none;
        opacity: 1;
        position: relative;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        -webkit-transition: none;
        transition: none;
        visibility: visible;
        width: 100%;
    }
    .vertical-tabbed-content .tab-content .image {
        max-height: 360px;
    }
    .vertical-tabbed-content .tab-content .image,
    .vertical-tabbed-content .tab-content .description {
        float: none;
        height: auto;
        min-height: 0;
        min-width: 0;
        width: 100%;
    }
    .vertical-tabbed-content .tab-content .image > img {
        height: auto;
        margin-left: 0;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
    .vertical-tabbed-content .tab-content .description {
        width: 100%;
    }
}

@media screen and (max-width: 578px) {

    /* tab content */
    .vertical-tabbed-content .tab-content .image {
        max-height: 180px;
    }
}
