/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

body[data-pagetype="home"] .scrolling {
    display: none;
}
/*===============Hero SECTION==================*/
.isMobile nav.frame__works ,.isMobile .frame ,.isMobile .background.backgroundSection{
    display:none;
    visibility:hidden;
}
section.heroSectionWrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    min-height: 100vh;
}
.videoHeroSection {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
}
.isDesktop .videoHeroSection {
    display: none;
}
.videoHeroSection video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
/*body.loaded section.heroSectionWrapper {*/
/*    opacity: 1;*/
/*    -webkit-transform: translateY(0);*/
/*    -ms-transform: translateY(0);*/
/*    transform: translateY(0);*/
/*}*/
.frame__works a *{
    pointer-events: none;
}
.heroSectionInfoContent p {
    margin: 0;
}
.frame__works a:first-child {
    padding: 0;
}
img.piano-thumb {
    width: 5.2rem;
    height: 4.5rem;
    -o-object-fit: contain;
    object-fit: contain;
}

img.piano-brand {
    width: 6.5rem;
    height: 2rem;
    object-fit: contain;
}
.heroSectionInfoWrapper {
    position: absolute;
    width: 25vw;
    bottom: 5rem;
    right: var(--spaceX);
    z-index: 1;
}
section.heroSectionWrapper.isMobile::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--black);
    z-index: 1;
    opacity: .4;
}
.cadence-logo-hero-section {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 0;
}

.cadence-logo-hero-section img {
    vertical-align: middle;
    width: 17.848rem;
    height: auto;
    aspect-ratio: auto 67 / 73;
}
.content__img-inner img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.frame {
    pointer-events: none;
    padding: calc(var(--headerHeight) + 2.813rem) var(--spaceX) 4rem;
    position: relative;
    min-height: 100vh;
    display: -ms-grid;
    display: grid;
    z-index: 1000;
    width: 100%;
    grid-row-gap: 1rem;
    grid-column-gap: 2rem;
    justify-items: start;
    -ms-grid-columns: auto 2rem auto 2rem auto;
    grid-template-columns: auto auto auto;
    -ms-grid-rows: auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto;
    grid-template-areas:
        'site year menu'
        'tagline tagline tagline'
        'contact contact contact'
        'works works works'
        'content content content'
        'title title title'
        'links links links';
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.frame__works {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-area: works;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* pointer-events: none; */
    position: absolute;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: 4rem;
    z-index: 1;
    left: var(--spaceX);
    z-index: 3;
}
.contentFrame {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    pointer-events: none;
    position: absolute;
    opacity: 0;
    grid-area: content-item;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[10];
    grid-template-columns: repeat(10,1fr);
    -ms-grid-rows: (1fr)[10];
    grid-template-rows: repeat(10,1fr);
    width: 100%;
    height: 100%;
    z-index: 0;
}
.contentFrame > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(6) {
    -ms-grid-row: 1;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(7) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(8) {
    -ms-grid-row: 1;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(9) {
    -ms-grid-row: 1;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(10) {
    -ms-grid-row: 1;
    -ms-grid-column: 10;
}
.contentFrame > *:nth-child(11) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(12) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(13) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(14) {
    -ms-grid-row: 2;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(15) {
    -ms-grid-row: 2;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(16) {
    -ms-grid-row: 2;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(17) {
    -ms-grid-row: 2;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(18) {
    -ms-grid-row: 2;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(19) {
    -ms-grid-row: 2;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(20) {
    -ms-grid-row: 2;
    -ms-grid-column: 10;
}
.contentFrame > *:nth-child(21) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(22) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(23) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(24) {
    -ms-grid-row: 3;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(25) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(26) {
    -ms-grid-row: 3;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(27) {
    -ms-grid-row: 3;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(28) {
    -ms-grid-row: 3;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(29) {
    -ms-grid-row: 3;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(30) {
    -ms-grid-row: 3;
    -ms-grid-column: 10;
}
.contentFrame > *:nth-child(31) {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(32) {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(33) {
    -ms-grid-row: 4;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(34) {
    -ms-grid-row: 4;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(35) {
    -ms-grid-row: 4;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(36) {
    -ms-grid-row: 4;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(37) {
    -ms-grid-row: 4;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(38) {
    -ms-grid-row: 4;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(39) {
    -ms-grid-row: 4;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(40) {
    -ms-grid-row: 4;
    -ms-grid-column: 10;
}
.contentFrame > *:nth-child(41) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(42) {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(43) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(44) {
    -ms-grid-row: 5;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(45) {
    -ms-grid-row: 5;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(46) {
    -ms-grid-row: 5;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(47) {
    -ms-grid-row: 5;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(48) {
    -ms-grid-row: 5;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(49) {
    -ms-grid-row: 5;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(50) {
    -ms-grid-row: 5;
    -ms-grid-column: 10;
}
.contentFrame > *:nth-child(51) {
    -ms-grid-row: 6;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(52) {
    -ms-grid-row: 6;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(53) {
    -ms-grid-row: 6;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(54) {
    -ms-grid-row: 6;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(55) {
    -ms-grid-row: 6;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(56) {
    -ms-grid-row: 6;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(57) {
    -ms-grid-row: 6;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(58) {
    -ms-grid-row: 6;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(59) {
    -ms-grid-row: 6;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(60) {
    -ms-grid-row: 6;
    -ms-grid-column: 10;
}
.contentFrame > *:nth-child(61) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(62) {
    -ms-grid-row: 7;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(63) {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(64) {
    -ms-grid-row: 7;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(65) {
    -ms-grid-row: 7;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(66) {
    -ms-grid-row: 7;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(67) {
    -ms-grid-row: 7;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(68) {
    -ms-grid-row: 7;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(69) {
    -ms-grid-row: 7;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(70) {
    -ms-grid-row: 7;
    -ms-grid-column: 10;
}
.contentFrame > *:nth-child(71) {
    -ms-grid-row: 8;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(72) {
    -ms-grid-row: 8;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(73) {
    -ms-grid-row: 8;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(74) {
    -ms-grid-row: 8;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(75) {
    -ms-grid-row: 8;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(76) {
    -ms-grid-row: 8;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(77) {
    -ms-grid-row: 8;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(78) {
    -ms-grid-row: 8;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(79) {
    -ms-grid-row: 8;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(80) {
    -ms-grid-row: 8;
    -ms-grid-column: 10;
}
.contentFrame > *:nth-child(81) {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(82) {
    -ms-grid-row: 9;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(83) {
    -ms-grid-row: 9;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(84) {
    -ms-grid-row: 9;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(85) {
    -ms-grid-row: 9;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(86) {
    -ms-grid-row: 9;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(87) {
    -ms-grid-row: 9;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(88) {
    -ms-grid-row: 9;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(89) {
    -ms-grid-row: 9;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(90) {
    -ms-grid-row: 9;
    -ms-grid-column: 10;
}
.contentFrame > *:nth-child(91) {
    -ms-grid-row: 10;
    -ms-grid-column: 1;
}
.contentFrame > *:nth-child(92) {
    -ms-grid-row: 10;
    -ms-grid-column: 2;
}
.contentFrame > *:nth-child(93) {
    -ms-grid-row: 10;
    -ms-grid-column: 3;
}
.contentFrame > *:nth-child(94) {
    -ms-grid-row: 10;
    -ms-grid-column: 4;
}
.contentFrame > *:nth-child(95) {
    -ms-grid-row: 10;
    -ms-grid-column: 5;
}
.contentFrame > *:nth-child(96) {
    -ms-grid-row: 10;
    -ms-grid-column: 6;
}
.contentFrame > *:nth-child(97) {
    -ms-grid-row: 10;
    -ms-grid-column: 7;
}
.contentFrame > *:nth-child(98) {
    -ms-grid-row: 10;
    -ms-grid-column: 8;
}
.contentFrame > *:nth-child(99) {
    -ms-grid-row: 10;
    -ms-grid-column: 9;
}
.contentFrame > *:nth-child(100) {
    -ms-grid-row: 10;
    -ms-grid-column: 10;
}

.content--current {
    opacity: 1;
}

.content__title {
    position: relative;
    z-index: 10;
    text-transform: none;
    font-weight: normal;
    grid-area: 1 / 2 / -1 / -2;
    width: 100%;
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: center;
    align-content: center;
    margin: 0;
    line-height: 1;
    font-size: clamp(2rem,10vw,9rem);
    opacity: 1;
    font-family: var(--en-font);
}
.frame__content {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-area: content;
    width: 100%;
    height: 100%;
    display: -ms-grid;
    display: grid;
    grid-template-areas:
        'content-item';
    position: relative;
    z-index: 0;
}
.frame__works a {
    pointer-events: auto;
    position: relative;
    font-size: 1.5rem;
    text-decoration: none;
    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-align: center;
    -ms-flex-align: center;
    align-items: center;
    row-gap: .75rem;
    padding-right: 3rem;
}
.content__img {
    position: relative;
    will-change: clip-path, filter;
}

.content__img-inner {
    background-size: cover;
    background-position: 50% 0%;
    width: 100%;
    height: 100%;
}

.pos-1 { -ms-grid-row: 1; -ms-grid-row-span: 4; -ms-grid-column: 1; -ms-grid-column-span: 4; grid-area: 1 / 1 / 5 / 5; }
.pos-2 { -ms-grid-row: 5; -ms-grid-row-span: 5; -ms-grid-column: 8; -ms-grid-column-span: 3; grid-area: 5 / 8 / 10 / 11; }
.pos-3 { -ms-grid-row: 8; -ms-grid-row-span: 3; -ms-grid-column: 3; -ms-grid-column-span: 2; grid-area: 8 / 3 / 11 / 5; }

.pos-4 { -ms-grid-row: 3; -ms-grid-row-span: 5; -ms-grid-column: 5; -ms-grid-column-span: 5; grid-area: 3 / 5 / 8 / 10; }
.pos-5 { -ms-grid-row: 7; -ms-grid-row-span: 3; -ms-grid-column: 4; -ms-grid-column-span: 3; grid-area: 7 / 4 / 10 / 7; }
.pos-6 { -ms-grid-row: 2; -ms-grid-row-span: 2; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-area: 2 / 2 / 4 / 4; }

.pos-7 { -ms-grid-row: 8; -ms-grid-row-span: 3; -ms-grid-column: 2; -ms-grid-column-span: 3; grid-area: 8 / 2 / 11 / 5; }
.pos-8 { -ms-grid-row: 2; -ms-grid-row-span: 6; -ms-grid-column: 8; -ms-grid-column-span: 3; grid-area: 2 / 8 / 8 / 11; }
.pos-9 { -ms-grid-row: 3; -ms-grid-row-span: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; grid-area: 3 / 3 / 6 / 6; }

.pos-10 { -ms-grid-row: 7; -ms-grid-row-span: 3; -ms-grid-column: 7; -ms-grid-column-span: 2; grid-area: 7 / 7 / 10 / 9; }
.pos-11 { -ms-grid-row: 4; -ms-grid-row-span: 6; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: 4 / 1 / 10 / 4; }
.pos-12 { -ms-grid-row: 2; -ms-grid-row-span: 4; -ms-grid-column: 5; -ms-grid-column-span: 4; grid-area: 2 / 5 / 6 / 9; }

.pos-13 { -ms-grid-row: 3; -ms-grid-row-span: 5; -ms-grid-column: 8; -ms-grid-column-span: 3; grid-area: 3 / 8 / 8 / 11; }
.pos-14 { -ms-grid-row: 1; -ms-grid-row-span: 4; -ms-grid-column: 5; -ms-grid-column-span: 2; grid-area: 1 / 5 / 5 / 7; }
.pos-15 { -ms-grid-row: 6; -ms-grid-row-span: 5; -ms-grid-column: 2; -ms-grid-column-span: 3; grid-area: 6 / 2 / 11 / 5; }

.backgroundSection {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    display: -ms-grid;
    display: grid;
    grid-template-areas:'backgroundSection';
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 100%;
    grid-template-rows: 100%;
    pointer-events: none;
    place-items: center;
    direction: ltr;
    z-index: 1;
}
.background__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.background__image {
    position: absolute;
    z-index: 0;
    grid-area: background;
    background-size: cover;
    -webkit-filter: brightness(0.2);
    filter: brightness(0.2);
    width: 100%;
    height: 100%;
    opacity: 0;
    /* transition: all cubic-bezier(0, 0.82, 0, 1.1) .4s; */
}

.background__video {
    position: relative;
    z-index: 1;
    grid-area: background;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 53em) {
    .frame {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -ms-grid-columns: 20% 15% 30% 1fr 1fr;
        grid-template-columns: 20% 15% 30% 1fr 1fr;
        -ms-grid-rows: auto auto 1fr 1fr;
        grid-template-rows: auto auto 1fr 1fr;
        -ms-flex-line-pack: justify;
        align-content: space-between;
        grid-template-areas:
            'tagline ... site year menu'
            'tagline content content content content'
            'contact content content content content'
            'works content content content content';
        direction: ltr;
        z-index: 2;
    }
    .frame__contact {
        padding-top: 3rem;
    }
    .frame__links {
        gap: 2rem;
    }
    .frame__works {
    }
    .frame__title-main {
        -ms-grid-row: 5;
        -ms-grid-row-span: -3;
        -ms-grid-column: 3;
        -ms-grid-column-span: 3;
        grid-area: 5 / 3 / 2 / 6;
    }
    .frame__works {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
    }
    .frame__content {
        -ms-grid-row: 2;
        -ms-grid-row-span: 3;
        -ms-grid-column: 2;
        -ms-grid-column-span: 4;
    }
}
.buttonBoxesHeroSection{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2.5rem 1fr;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2.5rem;
}
.buttonBoxesHeroSection > a.caBtn {
    min-width: auto;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 4px;
}
.heroSectionInfoContent {
    margin-bottom: 1rem;
}
/*===============Hero SECTION==================*/
/*=================pianoTypes============*/
.pianoType {
    position: relative;
    height: 100vh;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-areas:
        "item1 item2";
    overflow: hidden;
}

.rollingText-container {
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -1;
    -webkit-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

.rollingText{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    direction: ltr;
}
.rollingText .comm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 8rem;
    -webkit-animation: scroll 30s linear infinite;
    animation: scroll 30s linear infinite;
    cursor: pointer;
    margin: 0
}

.rollingText .comm > * {
    display: inline-block;
    font-family: var(--en-font);
    font-size: 6rem;
    font-weight: 400;
    line-height: 6rem;
    white-space: nowrap;
    margin-right: 3rem;
    -webkit-animation: scroll 30s linear infinite;
    animation: scroll 30s linear infinite;
    cursor: pointer;
}

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.pianoType_image {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    -o-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
}

.pianoType_image-background {
    width: 50%;
    height: 100%;
    margin-right: auto;
    position: relative;
    z-index: 1;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    -o-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
}
.pianoType_image-background img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.pianoType_image-main {
    position: absolute;
    width: auto;
    height: 80%;
    top: 50%;
    left: calc(var(--spaceX)*2);
    padding: 2vw;
    z-index: 3;
    -webkit-transform: translate(-150%,-50%);
    -ms-transform: translate(-150%,-50%);
    transform: translate(-150%,-50%);
    -webkit-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    -o-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
}
.pianoType_image-main:before {
    content: '';
    position: absolute;
    width: calc(50vw - var(--spaceX)* 2);
    height: calc(50vw - var(--spaceX)* 2);
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: -1;
    background: rgb(255 255 255 / 0%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
}
.pianoType_image::before {
    content: '';
    position: absolute;
    width: 35vw;
    height: 35vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: calc(var(--spaceX)* 2);
    padding: 2vw;
    border-radius: 50%;
    z-index: 1;
    background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    -o-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    opacity: 0;
}
.pianoType:nth-of-type(even) .pianoType_image::before {
    right: calc(var(--spaceX)* 2);
    left: auto;
}
.pianoType_image-main img{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.pianoType_info {
    position: relative;
    padding: 20px calc(var(--spaceX)*1) 20px calc(var(--spaceX)*2);
    -webkit-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    -o-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 1s;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}

.pianoType_info:before {
    content: '';
    position: absolute;
    width: calc(50vw - var(--spaceX)*2);
    height: calc(50vw - var(--spaceX)*2);
    top: 50%;
    right: calc(var(--spaceX)*.5);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: -1;
    background: rgba(255, 255, 255, .2);
    /*background: darkred;*/
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.pianoType:nth-child(even)  .pianoType_info:before {
    right: auto;
    left: calc(var(--spaceX)* .5);
}
.pianoType_info > * {
    margin: 2rem 0;
}
.pianoType:nth-child(even) .pianoType_image {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: item1;
}

.pianoType:nth-child(even) .pianoType_info {
    padding: 20px calc(var(--spaceX)*2) 20px calc(var(--spaceX)*1);
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

.pianoType:nth-child(even) .pianoType_image-background {
    margin-right: 0;
    margin-left: auto;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}

.pianoType:nth-child(even) .pianoType_image-main {
    right: calc(var(--spaceX)*2);
    left: auto;
    -webkit-transform: translate(150%, -50%);
    -ms-transform: translate(150%, -50%);
    transform: translate(150%, -50%);
}
.pianoType_info-title {
    font-weight: 600;
    line-height: 5.2rem;
    margin: 0;
}

.pianoType_info-title .bold {
    display: block;
    font-size: 5rem;
    line-height: 7.8rem;
}

.pianoType_info-des {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.8;
    margin: 0;
}
.move .pianoType_info{
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.pianoType:nth-child(even).move .pianoType_info{
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition-delay: .75s;
    -o-transition-delay: .75s;
    transition-delay: .75s;
}
.move .pianoType_image {
}
.pianoType:nth-child(even).move .pianoType_image{
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.move .pianoType_image-main {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition-delay: .75s;
    -o-transition-delay: .75s;
    transition-delay: .75s;
}

.move .pianoType_image::before {
    opacity: 1;
    -webkit-transition-delay: .75s;
    -o-transition-delay: .75s;
    transition-delay: .75s;
}

.move .pianoType_image-background {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
}
.move .pianoType:nth-child(even) .pianoType_image-background {}

.pianoType:nth-child(even).move  .pianoType_image-background {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.pianoType:nth-child(even).move .pianoType_image-main {
    -webkit-transition-delay: .25s;
    -o-transition-delay: .25s;
    transition-delay: .25s;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
/*=================pianoTypes============*/
/*==================BRANDS===============*/
section.productBrandsContainer {
    position: relative;
    width: 100%;
    margin-top: 4rem;
    margin-bottom: var(--spaceY);
    overflow: hidden;
}

section.productBrandsContainer h2 {
    text-align: center;
    margin: 0;
    margin-bottom: .75rem;
}

.productBrandsItemsWrapper {
    position: relative;
}

.productBrandsItemsWrap {
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3.625rem 1fr 3.625rem 1fr 3.625rem 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -webkit-column-gap: 3.625rem;
    -moz-column-gap: 3.625rem;
    column-gap: 3.625rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.productBrandWrap{
    width: 100%;
    height: 9.25rem;
}
.productBrandWrap img{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.productBrandsItemsWrap::before {
    content: '';
    position: absolute;
    width: 100vw;
    left: 50%;
    top: 0;
    background-color: var(--lightGray);
    height: 1px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
/*==================BRANDS===============*/
/*==============PORTFOLIO==============*/
section.portfolioContainer {position: relative;width: 100%;height: 100vh;}
.portfolioOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
.portfolioOverlay img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.portfolioInfoWrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr .5fr;
    grid-template-columns: 1fr .5fr;
    color: var(--white);
}
.portfolioInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 100%;
    padding-bottom: 6.5rem;
}
.portfolioInfo p {
    text-align: left;
}
.portfolioOverlay canvas#canvas {
    position: absolute;
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
}
.portfolioOverlay #gl {
    position: relative;
    width: 100%;
    height: 100%;
}
/*==============PORTFOLIO==============*/
section.servicesContainer {
    margin-bottom: 3rem;
}
@media only screen and (max-width: 768px){
    .caTitle{
        font-size: 2rem;
    }
    /*=============HERO SECTION==============*/
    img.piano-thumb {
        width: 4rem;
        height: 3rem;
    }
    img.piano-brand {
        width: 4.5rem;
        height: 1.9rem;
    }
    .frame__works a {
        padding-right: 1.85rem;
    }
    .frame__works a:first-child {
        padding-right: var(--spaceX);
    }
    .heroSectionInfoWrapper ,
    .cadence-logo-hero-section{
        position: relative;
        width: 100%;
        top: auto;
        bottom: auto;
        right: auto;
        left: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        z-index: 1;
    }
    .cadence-logo-hero-section img {
        width: 7.848rem;
        height: 7.848rem;
        -o-object-fit: contain;
        object-fit: contain;
        vertical-align: middle;
        margin: auto;
        display: block;
    }

    .heroSectionInfoContent p {
        font-size: .875rem;
    }
    section.heroSectionWrapper {
        height: calc(var(--vh, 1vh) * 100 - var(--marginWidth));
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        row-gap: 3rem;
        padding: 0 calc(var(--spaceX)*2) 6rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        min-height: calc(var(--vh, 1vh) * 100 - var(--marginWidth));
    }

    /*=============HERO SECTION==============*/
    /*==========PIANO TYPE SECTION===========*/
    .buttonBoxesHeroSection {
        grid-column-gap: 1.5rem;
    }

    .pianoType {
        height: auto;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "item1"
            "item2";
    }
    .pianoType_info-title {
        line-height: normal;
        margin-bottom: 1rem;
    }

    .pianoType_info-title .bold {
        line-height: normal;
        font-size: 2rem;
        font-weight: 700;
    }

    .pianoType_info ,
    .pianoType:nth-child(even) .pianoType_info{
        padding: 20px calc(var(--spaceX)*2);
    }

    .pianoType_info-des {
        font-size: .875rem;
    }

    .pianoType_info .caBtn {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .pianoType:nth-child(even) .pianoType_image {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
        grid-area: item2;
    }

    .rollingText .comm,.rollingText .comm > * {
        font-size: 4rem;
    }
    .pianoType_image {
        height: 40vh;
    }
    .pianoType_image-main {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        right: calc(var(--spaceX)* 2);
        left: auto;
        width: calc(40vh - var(--spaceX)* 2);
        height: calc(40vh - var(--spaceX)* 2);
    }
    .pianoType:nth-child(even) .pianoType_image-main{
        right: auto;
        left: calc(var(--spaceX)* 2);
    }
    .pianoType_image::before {
        left: calc(var(--spaceX));
        width: calc(100vw - var(--spaceX)* 2);
        padding: 0;
        height: calc(100vw - var(--spaceX)* 2);
    }
    .move .pianoType_image::before {
        opacity: 0;
    }

    .pianoType_info-link {
        width: 80%;
        margin: 2rem auto 0;
    }
    .pianoType:nth-child(even).move .pianoType_info {
        -webkit-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
    }
    .pianoType:nth-child(even).move .pianoType_image{
        -webkit-transition-delay: 0.5s;
        -o-transition-delay: 0.5s;
        transition-delay: 0.5s;
    }
    .rollingText-container:before {
        content: '';
        background: rgb(255 255 255 / 0%);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .rollingText-container {
        bottom: 45vh;
    }
    /*==========PIANO TYPE SECTION===========*/
    /*==========BRANDS SECTION===========*/
    section.productBrandsContainer h2 {
        padding: 0 var(--spaceX);
        margin-bottom: var(--spaceX);
    }
    .productBrandsItemsWrap {
        -ms-grid-columns: 1fr 1.5rem 1fr;
        grid-template-columns: 1fr 1fr;
        -webkit-column-gap: 1.5rem;
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .productBrandWrap {
        height: 4.25rem;
    }
    /*==========BRANDS SECTION===========*/
    /*============PORTFOLIO==============*/
    section.portfolioContainer {
        height: 80vh;
    }
    .portfolioInfo {
        font-size: .875rem;
        padding-bottom: 2.5rem;
    }
    .portfolioInfoWrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
    .ceoNameWrap p {
        font-size: 1rem;
        margin-top: .5rem;
    }
    .portfolioName.ceoNameWrap ,.portfolioInfo p{
        text-align: center;
    }
    /*============PORTFOLIO==============*/

    .pianoType:nth-child(even) .pianoType_image {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
}
@media only screen and (min-width: 640px) and (max-width: 768px){
    /*=============HERO SECTION===========*/
    section.heroSectionWrapper {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: calc(var(--spaceX)* 3);
    }
    .cadence-logo-hero-section img {
        width: 11.848rem;
        height: 11.848rem;
    }
    .heroSectionInfoWrapper {
        width: 70%;
    }
    /*=============HERO SECTION===========*/
    /*=============PIANO TYPE===========*/
    .pianoType_info, .pianoType:nth-child(even) .pianoType_info {
        padding: 20px var(--spaceX);
    }
    .pianoType {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-template-areas:
        "item1 item2";
    }
    .rollingText-container {
        bottom: auto;
        top: 50%;
        -webkit-transform: rotate(-7deg) translateY(-50%);
        -ms-transform: rotate(-7deg) translateY(-50%);
        transform: rotate(-7deg) translateY(-50%);
    }
    .pianoType_image::before {
        width: calc(50vw - var(--spaceX)* 2);
        height: calc(50vw - var(--spaceX)* 2);
    }
    .pianoType:nth-child(even) .pianoType_image {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        grid-area: item1;
    }
    @media only screen and (max-width: 768px) {

        .pianoType:nth-child(even) .pianoType_image {
            -ms-grid-row: 2;
            -ms-grid-column: 1;
        }

        .pianoType:nth-child(even) .pianoType_image {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
        }
    }
    @media only screen and (min-width: 640px) and (max-width: 768px) {
        .pianoType:nth-child(even) .pianoType_image {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
        }
    }
    .pianoType:nth-child(even).move .pianoType_info {
        -webkit-transition-delay: .75s;
        -o-transition-delay: .75s;
        transition-delay: .75s;
    }
    /*=============PIANO TYPE===========*/
    .pianoType:nth-child(even) .pianoType_image {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    .pianoType:nth-child(even) .pianoType_image {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
}
@media only screen and (min-width: 769px) and (max-width: 1199px){
    /*===========HERO SECTION==========*/
    .cadence-logo-hero-section {
        z-index: 1;
    }
    .cadence-logo-hero-section img {
        width: 13.848rem;
    }
    .heroSectionInfoWrapper {
        width: 30vw;
    }
    body[data-pagetype="home"] .scrolling {
        display: block;
    }
    /*===========HERO SECTION==========*/
    /*===========PIANO TYPE==========*/
    .pianoType {
        height: 55vh;
    }
    .pianoType_info-title .bold {
        font-size: 4rem;
        line-height: 6.8rem;
    }
    .rollingText .comm {
    }
    .rollingText .comm > * {
        font-size: 4rem;
        line-height: 4rem;
    }
    .pianoType_info-des {
        font-size: 1rem;
    }
    /*===========PIANO TYPE==========*/
    /*============BRANDS=============*/
    .productBrandsItemsWrap {
        -webkit-column-gap: 2.625rem;
        -moz-column-gap: 2.625rem;
        column-gap: 2.625rem;
    }
    .productBrandWrap {
        height: 7.25rem;
    }
    section.productBrandsContainer h2 {
        margin-bottom: 1.5rem;
    }
    /*============BRANDS=============*/
    /*============PORTFOLIO=============*/
    section.portfolioContainer {
        height: 70vh;
    }
    /*============PORTFOLIO=============*/
}
@media only screen and (min-width: 1200px) and (max-width: 1400px){
    /*===========HERO SECTION===========*/
    .cadence-logo-hero-section img {
        width: 12.848rem;
    }
    .buttonBoxesHeroSection > a.caBtn {
        padding-top: 2px;
    }
    img.piano-thumb {
        width: 4.2rem;
        height: 3.5rem;
    }
    img.piano-brand {
        width: 4.25rem;
        height: 1.8rem;
    }
    .frame__works a {
        padding-right: 2rem;
    }
    .content__title {
        font-size: clamp(2rem,6vw,9rem);
    }
    /*===========HERO SECTION===========*/
    /*===========PIANO SECTION===========*/
    .pianoType_info-title {
        line-height: 4.2rem;
    }

    .pianoType_info-title .bold {
        font-size: 4rem;
        line-height: 6.8rem;
    }

    .pianoType_info-des {
        font-size: 1rem;
    }

    .rollingText .comm > * {
        font-size: 4rem;
        line-height: 4rem;
    }
    /*===========PIANO SECTION===========*/
    /*===========BRANDS SECTION===========*/
    .productBrandWrap {
        height: 7.25rem;
    }
    .productBrandsItemsWrap {
        -webkit-column-gap: 3.25rem;
        -moz-column-gap: 3.25rem;
        column-gap: 3.25rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
    /*===========BRANDS SECTION===========*/
    /*==========PORTFOLIO SECTION=========*/
    .ceoNameWrap p {
        font-size: 1.1rem;
    }
    .portfolioInfo p {
        font-size: .95rem;
    }
    /*==========PORTFOLIO SECTION=========*/
}
@media only screen and (min-width: 1401px) and (max-width: 1600px){
    /*==========HERO SECTION==============*/
    .cadence-logo-hero-section img {
        width: 13.848rem;
    }
    img.piano-thumb {
        width: 4.5rem;
        height: 4rem;
    }
    img.piano-brand {
        width: 4.5rem;
        height: 1.9rem;
    }
    .content__title {
        font-size: clamp(2rem,6vw,9rem);
    }
    /*==========HERO SECTION==============*/
    /*========PIANO TYPE SECTION===========*/
    .pianoType_info-title .bold {
        font-size: 4.5rem;
        line-height: 6.8rem;
    }
    .pianoType_info-des {
        font-size: 1.1rem;
    }
    .rollingText .comm > * {
        font-size: 5rem;
        line-height: 5rem;
    }
    /*========PIANO TYPE SECTION===========*/
    /*===========BRANDS SECTION===========*/
    .productBrandsItemsWrap {
        -webkit-column-gap: 2.5rem;
        -moz-column-gap: 2.5rem;
        column-gap: 2.5rem;
    }
    .productBrandWrap {
        height: 8rem;
    }
    /*===========BRANDS SECTION===========*/
    /*===========PORTFOLIO SECTION===========*/
    .ceoNameWrap p {
        font-size: 1.15rem;
    }
    .portfolioInfo p {
        font-size: .95rem;
    }
    /*===========PORTFOLIO SECTION===========*/
}




/*
* 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;
}


/*================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-e64db658-d597-4a80-be0e-9d6aa5d64c64);
    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%);
}
.timeline-wrap p {
    font-size: 1rem;
}
.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: 0.9rem;
}
.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;
    }


    .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==============*/
}
@media only screen and (min-width: 769px) and (max-width: 1199px){
    :root{
        --timeline-gap: 3rem;
        --timeline-gap-y: 3rem;
    }

    .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;
    }
    .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;
    }
    .timelines span.line {
        height: 1px;
    }
    .timelineItems.odd .timeline-wrap {
        padding-bottom: 1rem;
    }
}