.section-canvas-container {
    width: 100%;
    height: 200vh;
}

.canvas-txts-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    will-change: transform, opacity;
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
}

.canvas-txts-container.ral-txts-container {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

.canvas-txts-container.tt-active {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transition: transform 1s ease-out 0.5s, opacity 1.5s ease-out 0.5s;
    -webkit-transition: transform 1s ease-out 0.5s, opacity 1.5s ease-out 0.5s;
    -moz-transition: transform 1s ease-out 0.5s, opacity 1.5s ease-out 0.5s;
    -ms-transition: transform 1s ease-out 0.5s, opacity 1.5s ease-out 0.5s;
    -o-transition: transform 1s ease-out 0.5s, opacity 1.5s ease-out 0.5s;
}

.canvas-title-container {
    position: relative;
    display: flex;
    top: 2vw;
    justify-content: center;
}

.teton-section-3 .canvas-title-container {
    top: 31vh;
}

.canvas-title-container .canvas-left-title,
.canvas-title-container .canvas-right-title {
    display: flex;
    width: 50%;
    overflow: hidden;
}

.canvas-title-container .canvas-left-title {
    padding-right: 1.6vw;
    justify-content: right;
    justify-content: flex-end;
}

.canvas-title-container .canvas-left-title h3 {
    margin-right: 1.4vw;
    will-change: transform;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transition: transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -ms-transition: transform 1s;
    -o-transition: transform 1s;
}

.canvas-title-container .canvas-right-title {
    padding-left: 5.3vw;
    justify-content: left;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.canvas-title-container .canvas-right-title h3 {
    will-change: transform;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transition: transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -ms-transition: transform 1s;
    -o-transition: transform 1s;
}

.tt-active .canvas-title-container .canvas-left-title h3,
.tt-active .canvas-title-container .canvas-right-title h3 {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

.canvas-txt-container {
    position: absolute;
    display: flex;
    width: 100%;
    bottom: 0vw;
    justify-content: center;
}

.ral-txts-container .canvas-txt-container {
    bottom: -1vw;
}

.canvas-txt-container .canvas-txt {
    width: 55.208vw;
    text-align: center;
}

.ral-txts-container .canvas-txt-container {
    will-change: transform;
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transition: transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -ms-transition: transform 1s;
    -o-transition: transform 1s;
}

.ral-txts-container.tt-active .canvas-txt-container {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

.ral-txts-container .canvas-txt-container .canvas-txt {
    width: 50vw;
}

.canvas-txts-container.static-txts-container {
    z-index: 3;
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}

.static-txts-container .canvas-title-container {
    top: 2vw;
}

.static-txts-container .canvas-txt-container {
    bottom: 4vw;
    opacity: 0;
    will-change: transform, opacity;
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transition: transform 1s ease-out, opacity 0.6s ease-out;
    -webkit-transition: transform 1s ease-out, opacity 0.6s ease-out;
    -moz-transition: transform 1s ease-out, opacity 0.6s ease-out;
    -ms-transition: transform 1s ease-out, opacity 0.6s ease-out;
    -o-transition: transform 1s ease-out, opacity 0.6s ease-out;
}

.static-txts-container.tt-active .canvas-txt-container {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

.c-trigger {
    position: absolute;
    height: 1px;
    width: 100%;
    z-index: 999;
}

.c-triggerStart {
    top: 0;
}

.c-triggerEnd {
    top: 200vh;
}

.canvas-sticky-container {
    position: -webkit-sticky;
    position: sticky;
    display: flex;
    flex-direction: column;
    top: 76px;
    width: 100%;
    height: calc(100vh - 76px);
    margin: 0 auto;
}

.canvas-container {
    position: relative;
    display: block;
    width: 100%;
    flex-grow: 1;
    margin: auto;
    z-index: 2;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}

.canvas-container canvas {
    transform-origin: 50% 33%;
    transition: transform 0.5s;
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -ms-transition: transform 0.5s;
    -o-transition: transform 0.5s;
}

.canvas-container canvas.tt-active {
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
}

.tt-canvas {
    display: block;
}

.canvas-fallback-container {
    position: relative;
    display: none;
    z-index: 2;
}

.teton-section-2 .canvas-title-container>div {
    position: relative;
}

.teton-section-2 .canvas-title-container img {
    position: absolute;
    left: 0;
    bottom: 0;
}

.teton-section-3 .canvas-txt-container .canvas-txt {
    color: #898989;
}

@media (min-width: 1580px) and (max-width: 1900px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.56);
        -webkit-transform: scale(0.56);
        -moz-transform: scale(0.56);
        -ms-transform: scale(0.56);
        -o-transform: scale(0.56);
    }
    .canvas-container canvas {
        transform-origin: 50% 34%;
    }
    .teton-section-3 .canvas-txt-container {
        bottom: -4vw;
    }
}

@media (min-width: 1480px) and (max-width: 1579px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.88);
        -webkit-transform: scale(0.88);
        -moz-transform: scale(0.88);
        -ms-transform: scale(0.88);
        -o-transform: scale(0.88);
    }
    .canvas-container canvas {
        transform-origin: 50% 55%;
    }
}

@media (min-width: 1380px) and (max-width: 1479px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.68);
        -webkit-transform: scale(0.68);
        -moz-transform: scale(0.68);
        -ms-transform: scale(0.68);
        -o-transform: scale(0.68);
    }
    .canvas-container canvas {
        transform-origin: 50% 38%;
    }
}

@media (min-width: 1346px) and (max-width: 1379px) and (min-aspect-ratio: 3/2) {
    .canvas-container canvas.tt-active {
        transform: scale(0.52);
        -webkit-transform: scale(0.52);
        -moz-transform: scale(0.52);
        -ms-transform: scale(0.52);
        -o-transform: scale(0.52);
    }
    .canvas-container canvas {
        transform-origin: 50% 28%;
    }
}

@media (min-width: 1346px) and (max-width: 1379px) and (max-aspect-ratio: 3/2) {
    .canvas-container canvas.tt-active {
        transform: scale(0.93);
        -webkit-transform: scale(0.93);
        -moz-transform: scale(0.93);
        -ms-transform: scale(0.93);
        -o-transform: scale(0.93);
    }
    .canvas-container canvas {
        transform-origin: 50% 66%;
    }
}

@media (min-width: 1174px) and (max-width: 1345px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
    }
    .canvas-container canvas {
        transform-origin: 50% 49%;
    }
}

@media (min-width: 1004px) and (max-width: 1173px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
    }
    .canvas-container canvas {
        transform-origin: 50% 55%;
    }
}

@media (min-width: 1004px) and (max-width: 1173px) and (min-aspect-ratio: 15/10) {
    .canvas-container canvas.tt-active {
        transform: scale(0.74);
        -webkit-transform: scale(0.74);
        -moz-transform: scale(0.74);
        -ms-transform: scale(0.74);
        -o-transform: scale(0.74);
    }
    .canvas-container canvas {
        transform-origin: 50% 41%;
    }
}

@media (min-width: 1004px) and (max-width: 1173px) and (min-aspect-ratio: 18/10) {
    .canvas-container canvas.tt-active {
        transform: scale(0.6);
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        -o-transform: scale(0.6);
    }
    .canvas-container canvas {
        transform-origin: 50% 34%;
    }
}

@media (min-aspect-ratio: 14/10) and (max-aspect-ratio: 15/10) {
    .canvas-txt-container {
        bottom: 11vh;
    }
}

@media (min-width: 1004px) and (max-width: 1366px) and (min-aspect-ratio: 1/1) {
    .teton-section-3 .canvas-txt-container {
        bottom: 2vw;
    }
}

@media (min-width:1480px) and (max-width: 1500px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.85);
        -webkit-transform: scale(0.85);
        -moz-transform: scale(0.85);
        -ms-transform: scale(0.85);
        -o-transform: scale(0.85);
    }
    .canvas-container canvas {
        transform-origin: 50% 59%;
    }
    .teton-section-2 .canvas-txt-container {
        bottom: -2vw;
    }
    .teton-section-2 {
        z-index: 2;
    }
    .ral-txts-container .canvas-txt-container {
        bottom: 3vw;
    }
    .static-canvas .ral-txts-container .canvas-txt-container {
        bottom: 2vw;
    }
    .static-canvas .teton-section-3 {
        padding-bottom: 3vw;
    }
}

@media (min-width:2140px) and (max-width: 2160px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
    }
    .canvas-container canvas {
        transform-origin: 50% 42%;
    }
    .canvas-txt-container {
        bottom: 4vw;
    }
    .ral-txts-container .canvas-txt-container {
        bottom: 5vw;
    }
    .static-canvas .canvas-txt-container {
        bottom: 0vw;
    }
    .static-canvas .ral-txts-container .canvas-txt-container {
        bottom: 1vw;
    }
}

@media (min-width:1420px) and (max-width: 1440px) and (min-aspect-ratio: 16/10) {
    .canvas-container canvas.tt-active {
        transform: scale(0.75);
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -o-transform: scale(0.75);
    }
    .canvas-container canvas {
        transform-origin: 50% 40%;
    }
    .canvas-txt-container {
        bottom: 6vw;
    }
}

@media (min-width:1346px) and (max-width: 1366px) and (min-aspect-ratio: 1/1) {
    .teton-section-3 .canvas-txt-container {
        bottom: -6vw;
    }
    .static-canvas .teton-section-3 .canvas-txt-container {
        bottom: 0vw;
    }
}


/* MOB */

@media (max-width: 640px),
(max-aspect-ratio: 1/1) and (max-width: 1200px) {
    .section-canvas-container {
        text-align: center;
    }
    .canvas-sticky-container {
        top: 96px;
        height: calc(100vh - 96px);
    }
    .canvas-txt-container .canvas-txt,
    .ral-txts-container .canvas-txt-container .canvas-txt {
        width: auto;
        padding: 0 var(--teton-section-padding-lr);
    }
    .static-txts-container .canvas-title-container {
        top: 10vw;
    }
    .static-txts-container .canvas-txt-container {
        bottom: 10vw;
    }
    .teton-section-3 .canvas-title-container {
        top: 39vh;
    }
    .canvas-title-container .canvas-left-title {
        padding-right: 9vw;
    }
    .canvas-title-container .canvas-right-title {
        padding-left: 8vw;
    }
    .canvas-title-container .canvas-left-title h3 {
        margin-right: 3.5vw;
    }
    .canvas-container canvas {
        transform-origin: 50% -90%;
    }
    .canvas-container canvas.tt-active {
        transform: scale(0.88);
        -webkit-transform: scale(0.88);
        -moz-transform: scale(0.88);
        -ms-transform: scale(0.88);
        -o-transform: scale(0.88);
    }
    .teton-section-2 .canvas-title-container {
        top: 2vh;
    }
    .canvas-txt-container {
        bottom: 2vh;
    }
    .teton-section-2 .canvas-title-container img {
        height: 50%;
    }
    .teton-section-2 .canvas-title {
        text-align: left;
        /* padding-left: 10vw; */
    }
}

@media (min-width: 748px) and (max-width: 768px) {
    .teton-section-3 .canvas-txt-container {
        bottom: -1vw;
    }
}

@media (min-width: 748px) and (max-width: 1004px) and (min-aspect-ratio: 83/100) {
    .canvas-container canvas.tt-active {
        transform: scale(0.55);
        -webkit-transform: scale(0.55);
        -moz-transform: scale(0.55);
        -ms-transform: scale(0.55);
        -o-transform: scale(0.55);
    }
    .canvas-container canvas {
        transform-origin: 50% 5%;
    }
}

@media (min-width: 620px) and (max-width: 660px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        -o-transform: scale(0.95);
    }
    .canvas-container canvas {
        transform-origin: 50% -180%;
    }
}

@media (min-width: 700px) and (max-width: 760px) and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .teton-section-2 .canvas-title-container .canvas-title {
        font-size: 8.888889vw;
    }
    .teton-section-2 .canvas-txt-container .canvas-txt {
        font-size: 3.055556vw;
    }
    .canvas-container canvas.tt-active {
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -o-transform: scale(0.7);
    }
    .canvas-container canvas {
        transform-origin: 50% 23%;
    }
    .teton-section-3 .canvas-container {
        z-index: 0;
    }
    .teton-section-3 .canvas-txt-container {
        bottom: -12vh;
    }
}

@media (max-width: 639px) and (max-aspect-ratio: 60/100) {
    .teton-section-2 .canvas-txt-container {
        bottom: 10vh;
    }
}

@media (max-width: 639px) and (min-aspect-ratio: 60/100) {
    .canvas-container canvas.tt-active {
        transform: scale(0.94);
        -webkit-transform: scale(0.94);
        -moz-transform: scale(0.94);
        -ms-transform: scale(0.94);
        -o-transform: scale(0.94);
    }
    .canvas-container canvas {
        transform-origin: 50% -200%;
    }
}

@media (min-width: 1023px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 768px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.77);
        -webkit-transform: scale(0.77);
        -moz-transform: scale(0.77);
        -ms-transform: scale(0.77);
        -o-transform: scale(0.77);
    }
    .canvas-container canvas {
        transform-origin: 50% 39%;
    }
}

@media (min-width: 1023px) and (max-width: 1024px) and (min-height: 450px) and (max-height: 600px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.75);
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -o-transform: scale(0.75);
    }
    .canvas-container canvas {
        transform-origin: 50% 39%;
    }
}

@media (width:768px) and (min-aspect-ratio: 80/100) and (max-aspect-ratio: 84/100) {
    .teton-section-3 .canvas-txt-container {
        bottom: -9vh;
    }
    .canvas-container canvas.tt-active {
        transform: scale(0.72);
        -webkit-transform: scale(0.72);
        -moz-transform: scale(0.72);
        -ms-transform: scale(0.72);
        -o-transform: scale(0.72);
    }
    .canvas-container canvas {
        transform-origin: 50% -13%;
    }
}

@media (min-width:1420px) and (max-width: 1440px) and (min-height: 840px) {
    .teton-section-2 .canvas-txt-container {
        bottom: 2vw;
    }
    .static-canvas .ral-txts-container .canvas-txt-container {
        bottom: 2vw;
    }
}

@media (min-width:1420px) and (max-width: 1440px) and (max-height: 839px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.67);
        -webkit-transform: scale(0.67);
        -moz-transform: scale(0.67);
        -ms-transform: scale(0.67);
        -o-transform: scale(0.67);
    }
    .canvas-container canvas {
        transform-origin: 50% 37%;
    }
    .canvas-txt-container {
        bottom: 0vw;
    }
}

@media (min-width:2540px) and (max-width: 2560px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -o-transform: scale(0.7);
    }
    .canvas-container canvas {
        transform-origin: 50% 38%;
    }
}

@media (min-width:814px) and (max-width: 834px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
    }
    .canvas-container canvas {
        transform-origin: 50% -96%;
    }
    .ral-txts-container .canvas-txt-container {
        bottom: -4vw;
    }
}


/* Edge Old */


/* IE */

.static-canvas .section-canvas-container {
    height: auto;
}

.static-canvas .canvas-sticky-container {
    position: relative;
    height: auto;
    flex-direction: row;
}

.static-canvas .canvas-txts-container {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

.static-canvas .canvas-container {
    display: none;
}

.static-canvas .canvas-fallback-container {
    display: block;
    width: 100%;
}

.static-canvas .teton-section-2 .canvas-fallback-container {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
}

.static-canvas .canvas-fallback-container img {
    width: 100%;
}

.static-canvas .teton-section-3 .canvas-title-container {
    top: 17vw;
}

.static-canvas .canvas-title-container .canvas-right-title h3,
.static-canvas .canvas-title-container .canvas-left-title h3 {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

.static-canvas .static-txts-container .canvas-txt-container {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}

.static-canvas .ral-txts-container .canvas-txt-container {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}


/* en */

.teton-section-2 .canvas-txt-container .canvas-txt {
    width: 74vw;
}

.canvas-container #tt-canvas-2.tt-active {
    transform: translateX(-16vw);
    -webkit-transform: translateX(-16vw);
    -moz-transform: translateX(-16vw);
    -ms-transform: translateX(-16vw);
    -o-transform: translateX(-16vw);
}

.teton-section-3 .canvas-title-container .canvas-left-title {
    width: 34vw;
    padding-right: 0;
    padding-left: 0;
    margin-left: 10vw;
    justify-content: left;
}

.teton-section-3 .canvas-title-container .canvas-left-title h3 {
    margin-right: 0;
}

.canvas-title-container .canvas-left-title h3 {
    transform: translateX(-35vw);
    -webkit-transform: translateX(-35vw);
    -moz-transform: translateX(-35vw);
    -ms-transform: translateX(-35vw);
    -o-transform: translateX(-35vw);
    transition: transform 1s 0.5s;
    -webkit-transition: transform 1s 0.5s;
    -moz-transition: transform 1s 0.5s;
    -ms-transition: transform 1s 0.5s;
    -o-transition: transform 1s 0.5s;
}

.static-canvas .teton-section-3 .canvas-fallback-container {
    transform: translateX(-15vw);
    -webkit-transform: translateX(-15vw);
    -moz-transform: translateX(-15vw);
    -ms-transform: translateX(-15vw);
    -o-transform: translateX(-15vw);
}

@media (min-aspect-ratio: 11/10) and (max-width: 1200px) {
    .canvas-container #tt-canvas-2.tt-active {
        transform: translateX(-16.5vw);
        -webkit-transform: translateX(-16.5vw);
        -moz-transform: translateX(-16.5vw);
        -ms-transform: translateX(-16.5vw);
        -o-transform: translateX(-16.5vw);
    }
}

@media (min-width: 1023px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 768px) {
    .canvas-container #tt-canvas-2.tt-active {
        transform: translateX(-17vw);
        -webkit-transform: translateX(-17vw);
        -moz-transform: translateX(-17vw);
        -ms-transform: translateX(-17vw);
        -o-transform: translateX(-17vw);
    }
}


/* MOB */

@media (max-width: 640px),
(max-aspect-ratio: 1/1) and (max-width: 1200px) {
    .canvas-container canvas {
        transform-origin: 50% -100%;
    }
    .canvas-container canvas.tt-active {
        transform: scale(0.89);
        -webkit-transform: scale(0.89);
        -moz-transform: scale(0.89);
        -ms-transform: scale(0.89);
        -o-transform: scale(0.89);
    }
    .teton-section-2 .canvas-txt-container {
        bottom: 7vh;
    }
    .teton-section-2 .canvas-txt-container .canvas-txt {
        width: 100%;
        font-size: 3.9vw;
    }
    .canvas-container #tt-canvas-2.tt-active {
        transform: translateX(-24vw);
        -webkit-transform: translateX(-24vw);
        -moz-transform: translateX(-24vw);
        -ms-transform: translateX(-24vw);
        -o-transform: translateX(-24vw);
    }
    .teton-section-3 .canvas-title-container .canvas-left-title {
        width: auto;
        margin-left: 28vw;
    }
    .ral-txts-container .canvas-txt-container {
        bottom: 0vw;
    }
}

@media (min-width: 640px) and (max-width: 1200px)and (max-aspect-ratio: 9/10) {
    .teton-container .teton-section-6 .canvas-title-container {
        top: 4vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container {
        bottom: 4vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container .teton-text-2 {
        font-size: 3.2vw;
    }
}


/* ipad pro portrait */

@media (min-width:814px) and (max-width: 834px) {
    .canvas-container canvas.tt-active {
        transform: scale(0.96);
        -webkit-transform: scale(0.96);
        -moz-transform: scale(0.96);
        -ms-transform: scale(0.96);
        -o-transform: scale(0.96);
    }
    .teton-section-2 .canvas-container canvas {
        transform-origin: 50% -260%;
    }
    .teton-section-2 .canvas-txt-container {
        bottom: 6vh;
    }
    .teton-section-2 .canvas-txt-container .canvas-txt {
        font-size: 3.2vw;
    }
    .teton-section-3 .canvas-title-container .canvas-left-title {
        margin-left: 24vw;
    }
    .ral-txts-container .canvas-txt-container {
        bottom: -5vh;
    }
    .teton-section-3 {
        padding-bottom: 5vh;
    }
    .teton-container .teton-section-6 .canvas-title-container {
        top: 4vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container {
        bottom: 4vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container .teton-text-2 {
        font-size: 3.2vw;
    }
}


/* ipad  portrait */

@media (width:768px) and (min-aspect-ratio: 80/100) and (max-aspect-ratio: 84/100) {
    .teton-section-2 .canvas-txt-container .canvas-txt {
        font-size: 3.2vw;
    }
    .canvas-container canvas.tt-active {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
    }
    .teton-section-2 .canvas-container canvas {
        transform-origin: 50% -116%;
    }
    .teton-section-3 .canvas-title-container .canvas-left-title {
        padding-top: 8vw;
        margin-left: 24vw;
    }
    .ral-txts-container .canvas-txt-container {
        bottom: -15vh;
    }
    .teton-section-3 {
        padding-bottom: 15vh;
    }
    .teton-container .teton-section-6 .canvas-title-container {
        top: 4vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container {
        bottom: 4vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container .teton-text-2 {
        font-size: 3.2vw;
    }
    .teton-section-2 .canvas-txt-container {
        bottom: 2vh;
    }
}


/* matepade  portrait */

@media (min-width: 620px) and (max-width: 660px) {
    .teton-section-2 .canvas-txt-container .canvas-txt {
        font-size: 3.5vw;
    }
    .canvas-container canvas.tt-active {
        transform: scale(1) translateY(-110px);
        -webkit-transform: scale(1) translateY(-110px);
        -moz-transform: scale(1) translateY(-110px);
        -ms-transform: scale(1) translateY(-110px);
        -o-transform: scale(1) translateY(-110px);
    }
    .canvas-container canvas {
        transform-origin: 50% -185%;
    }
    .teton-section-2 .canvas-txt-container {
        bottom: 6vh;
    }
    .ral-txts-container .canvas-txt-container {
        bottom: -5vh;
    }
    .teton-section-3 {
        padding-bottom: 5vh;
    }
    .teton-container .teton-section-6 .canvas-title-container {
        top: 4vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container {
        bottom: 4vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container .teton-text-2 {
        font-size: 3.2vw;
    }
}

@media (min-width: 700px) and (max-width: 760px) and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
    .teton-section-2 .canvas-txt-container .canvas-txt {
        font-size: 2.8vw;
    }
    .teton-section-2 .canvas-title-container {
        top: 0vh;
    }
    .teton-section-2 .canvas-txt-container {
        bottom: 0vh;
    }
    .teton-section-2 .canvas-container canvas.tt-active {
        transform: scale(0.78);
        -webkit-transform: scale(0.78);
        -moz-transform: scale(0.78);
        -ms-transform: scale(0.78);
        -o-transform: scale(0.78);
    }
    .teton-section-2 .canvas-container canvas {
        transform-origin: 50% 7%;
    }
    .teton-section-3 .canvas-title-container .canvas-left-title {
        margin-left: 24vw;
    }
    .teton-section-3 .canvas-container {
        z-index: 2;
    }
    .canvas-container #tt-canvas-2.tt-active {
        transform: translateX(-23vw);
        -webkit-transform: translateX(-23vw);
        -moz-transform: translateX(-23vw);
        -ms-transform: translateX(-23vw);
        -o-transform: translateX(-23vw);
    }
    .ral-txts-container .canvas-txt-container {
        bottom: -21vw;
    }
    .teton-section-3 {
        padding-bottom: 21vw;
    }
    .teton-container .teton-section-6 .canvas-title-container {
        top: 0vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container {
        bottom: 0vw;
    }
    .teton-container .teton-section-6 .canvas-txt-container .teton-text-2 {
        font-size: 3.2vw;
    }
}

@media (max-width: 639px) and (max-aspect-ratio: 60/100) {
    .teton-section-2 .canvas-txt-container {
        bottom: 10vh;
    }
}

@media (max-width: 639px) and (min-aspect-ratio: 60/100) {
    .teton-section-2 .canvas-txt-container {
        bottom: 5vh;
    }
}