/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
:root{
    --timeline-width: 20vw;
    --timeline-gap: 3.8rem;
    --timeline-gap-y: 3.6rem
}
*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body.loaded .heroSectionAboutInfo {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
body.loaded .video-overlay-gallery.video-overlay-hero-section,
body.loaded section.videoGalleryContainer.aboutHeroSectionContainer .playGallery,
body.loaded .cadence-hero-logo,
body.loaded .scrolling {
    opacity: 1;
}
/*=================HERO SECTION======================*/
.video-overlay-gallery.video-overlay-hero-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--black);
    opacity: .5;
}
section.videoGalleryContainer.aboutHeroSectionContainer {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-right: var(--spaceX);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.cadence-hero-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}
.cadence-hero-logo img {
    vertical-align: middle;
    width: 17.848rem;
    height: auto;
    aspect-ratio: auto 67 / 73;
}
.heroSectionAboutInfo {
    position: relative;
    z-index: 1;
    width: 30vw;
    padding-bottom: 5rem;
}
.heroSectionAboutInfo p {
    margin-bottom: 0;
}
/*=================HERO SECTION======================*/
/*==================CEO SECTION======================*/
section.ceoContainer {
    position: relative;
    margin: var(--spaceY) 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: .4fr 4rem 1fr;
    grid-template-columns: .4fr 1fr;
    grid-gap: 4rem;
    color:var(--middleGray)
}
section.ceoContainer .ceoNameWrap {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.ceoMediaInfoWrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2.813rem 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2.813rem;
}

.ceoMedia {
    position: relative;
    width: 100%;
    height: 68vh;
    overflow: hidden;
}

.ceoMedia img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ceoInfoWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    text-align: left;
}

.ceoInfoWrap p {
    margin: 0;
}
/*==================CEO SECTION======================*/
/*================TIMELINE SECTION===================*/
section.timelineContainer h2 {
    margin-top: 0;
    padding-right: var(--spaceX);
    color: var(--gray);
    margin-bottom: 0;
}
.time-line-section {
    position: relative;
    direction: ltr;
    width: 100%;
    display: block;
}

.timelineWrapper {
    overflow: hidden;
    height: 100vh;
    min-height: 100vh;
    position: relative;
    direction: ltr;
}

.timelines {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-column-gap: 5rem;
    -moz-column-gap: 5rem;
    column-gap: 5rem;
    height: 100vh;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.timeline-wrap {
    width: var(--timeline-width);
    position: relative;
}
.timeline-wrap::before{
    content: '';
    background-image: var(--wpr-bg-81b55e8c-5246-4411-8246-7174120e4f12);
    height: var(--timeline-gap-y);
    width: var(--timeline-gap-y);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 50%;
}
.timelineItems.odd .timeline-wrap::before{
    bottom: 0;
    -webkit-transform: translate(-50%, 100%);
    -ms-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
}
.timelineItems.even .timeline-wrap::before{
    top: 0;
    -webkit-transform: translate(-50%,-100%);
    -ms-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%);
}
.timelineItems.odd{
    margin-left: calc(var(--spaceX) + 0);
    padding-bottom: var(--timeline-gap-y);
}
.timelineItems.even{
    margin-left: calc(var(--spaceX) + (var(--timeline-width) / 2) + var(--timeline-gap));
    padding-top: var(--timeline-gap-y);
}
.time__line__wrapper {
    position: relative;
    display: block;
}
.timelineItems {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-column-gap: var(--timeline-gap);
    -moz-column-gap: var(--timeline-gap);
    column-gap: var(--timeline-gap);
    color: var(--gray);
    padding-right: var(--spaceM);
}
.timeline-wrap h3 {
    text-align: center;
    font-size: 1.25rem;
    margin-top: 0;
}
.timelineItems.odd .timeline-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 2rem;
}
.timelines span.line {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--lightGray);
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.timeline-text {
    text-align: justify;
    direction: rtl;
}
.timeline-text p {
    font-size: .75rem;
}
.timelineItems.even .timeline-wrap {
    padding-top: 2rem;
}
/*================TIMELINE SECTION===================*/
.timelines {
    width: 100%;
}
.timelineItems.even{
    margin-left: 0;
}
@media only screen and (max-width: 768px){
    :root{
        --timeline-width: 50vw;
        --timeline-gap: 2.5rem;
        --timeline-gap-y: 2rem;
    }
    /*==========ABOUT HERO SECTION============*/
    .cadence-hero-logo img {
        width: 7.848rem;
        height: 7.848rem;
        -o-object-fit: contain;
        object-fit: contain;
        vertical-align: middle;
        margin: auto;
        display: block;
    }

    .heroSectionAboutInfo {
        width: 100%;
        font-size: .875rem;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        padding-bottom: 3rem;
    }

    section.videoGalleryContainer.aboutHeroSectionContainer {
        padding-left: calc(var(--spaceX)*2);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        row-gap: 1rem;
        padding-right: calc(var(--spaceX)*2);
        height: calc(var(--vh, 1vh)* 100);
        padding-bottom: 3rem;
    }

    section.videoGalleryContainer.aboutHeroSectionContainer .playGallery {
        position: relative;
        top: auto;
        left: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        bottom: auto;
    }

    .cadence-hero-logo {
        position: relative;
        top: auto;
        left: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    /*==========ABOUT HERO SECTION============*/
    /*==========CEO SECTION============*/
    section.ceoContainer {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-gap: 2rem;
    }
    .ceoMediaInfoWrap {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
    .ceoMedia {
        height: 60vh;
    }
    /*==========CEO SECTION============*/
    /*==========TIMELINE SECTION============*/
    .timelines {
        height: auto;
        overflow-x: auto;
        width: auto;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .timeline-wrap {
        width: var(--timeline-width);
        min-width: var(--timeline-width);
    }
    .timelineItems.odd {
        margin-left: var(--spaceX);
    }

    .timeline-text p {
        margin-bottom: 0;
    }

    .timelineItems.odd .timeline-wrap {
        padding-bottom: .875rem;
    }

    .timeline-wrap h3 {
        font-size: 1.1rem;
        margin-bottom: .5rem;
    }
    .timelineItems {
        height: 48vh;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .timelines span.line {
        height: 1px;
    }
    .timelineItems.even::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: var(--lightGray);
        top: 0;
    }
    /*==========TIMELINE SECTION============*/
    .timelineItems.even {
        margin-left: calc(var(--spaceX) + (var(--timeline-width) / 2) + var(--timeline-gap));
    }
}
@media only screen and (min-width: 640px) and (max-width: 768px){
    :root {
        --timeline-width: 35vw;
    }
    /*===========HOME ABOUT HERO==============*/
    section.videoGalleryContainer.aboutHeroSectionContainer {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: calc(var(--spaceX)* 3);
    }
    .cadence-hero-logo img {
        width: 11.848rem;
        height: 11.848rem;
    }
    .heroSectionAboutInfo {
        width: 70%;
    }
    /*===========HOME ABOUT HERO==============*/
}
@media only screen and (min-width: 769px) and (max-width: 1199px){
    :root{
        --timeline-gap: 3rem;
        --timeline-gap-y: 3rem;
    }
    /*===========HOME ABOUT HERO==============*/
    section.videoGalleryContainer.aboutHeroSectionContainer {
        height: calc(var(--vh, 1vh)* 100);
    }
    /*===========HOME ABOUT HERO==============*/
    .cadence-hero-logo img {
        width: 14.848rem;
    }
    .ceoMedia {
        height: 31vh;
    }
    section.ceoContainer {
        grid-gap: 3rem;
    }
    .ceoMediaInfoWrap {
        grid-gap: 1.813rem;
    }
    .timelines {
        width: auto;
        overflow: hidden;
        overflow-x: auto;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        height: auto;
    }
    .timelineItems.odd {
        margin-left: var(--spaceX);
    }
    .timeline-wrap {
        min-width: var(--timeline-width);
    }
    .timelineItems {
        height: 35vh;
    }
    .timelineWrapper {
        height: auto;
        min-height: auto;
    }
    .timelines span.line {
        height: 1px;
    }
    .timelineItems.even::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: var(--lightGray);
        top: 0;
    }
    body[data-pagetype="about"] section.servicesContainer {
        margin-top: 1rem;
    }
    .timelineItems.even {
        margin-left: calc(var(--spaceX) + (var(--timeline-width) / 2) + var(--timeline-gap));
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px){
    :root{
        --timeline-width: 22vw;
        --timeline-gap: 2.8rem;
        --timeline-gap-y: 2.6rem;
    }
    .cadence-hero-logo img {
        width: 12.848rem;
    }
    .timelines span.line {
        height: 1px;
    }
    .timelineItems.odd .timeline-wrap {
        padding-bottom: 1rem;
    }
}
@media only screen and (min-width: 1401px) and (max-width: 1600px){
    :root{
        --timeline-width: 21vw;
        --timeline-gap: 2.6rem;
        --timeline-gap-y: 2.7rem;
    }
    .cadence-hero-logo img {
        width: 14.848rem;
    }
    .timelines span.line {
        height: 1px;
    }
    .timelineItems.odd .timeline-wrap {
        padding-bottom: 1rem;
    }
}