/* te */

:root {
    --white: #fff;
    --black: #000;
    --darktext: #000;
    --te-color-orange: #E98300;
    --te-color-dot: #E98300;
    --te-color-w1: #E98300;
    --te-color-w2: #2F4A58;
    --te-color-w3: #8DB83F;
    --te-color-w4: #A3D3E4;
    --te-color-w5: #767779;
    --te-color-w6: #187B86;
    --te-color-w7: #1F285A;
    --te-color-w8: #85267A;
    --te-color-popupback: #2E4957;
    --te-color-popupbuttonback: #2E4957;
    --te-color-popupborder: #9B9C9F;
    --te-color-popupdevider: #767779;
    --te-color-popuptext: #767779;
    --te-color-centerspot: #E98201;
    --te-color-glow: #ffe2a4;
    --te-color-backbody: #9B9C9F;
    --te-blur-glow: 1.2em;
    --te-blur-listing: 2em;
    --te-color-glow: #E98300; /*#ffe2a4;*/
    --te-color-glow2: #ffe2a4;
    --te-size-footerbutton: 2.5em;
    --te-color-viewerborder: #9B9C9F;
}
* {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.hide {
    display: none;
}
.shadow {
    -webkit-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25); box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
}

body.web .local {display: none;}
body.local .web {display: none;}

.drawinglegend {
    position: absolute;
    left: 5em;
    bottom: 4em;
    width: auto;
    height: auto;
    font-size: 0.25em;
    line-height: 1.5em;
    color: #767779;
    z-index: 90;
}
#viewer {
    /*display: none;*/
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*background-color: #fff;*/
    padding: 2em;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
body:not(.viewer) #viewer {
    display: none;
}
body.viewer main, body.viewer .drawinglegend, body.viewer aside .navbuttons, body.viewer aside nav {
    display: none;
}
#viewer iframe {
    position: absolute;
    left: 3rem;
    top: 10rem;
    width: calc(100% - 6rem);
    height: calc(100% - 16rem);
    background-color: #fff;
    border: 1px solid var(--te-color-viewerborder);
}
#viewer button.close {
    position: absolute;
    right: 2.9rem;
    bottom: 2.5rem;
    font-size: 1.1rem;
    margin: 0;
}

button {
    background-color: var(--te-color-popupbuttonback);
    color: #fff;
    border: none;
    padding: 0.5em;
    text-transform: uppercase;
    cursor: pointer;
}
button.icon {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 25% auto;
    animation: 1s linear infinite normal buttonblink;
    margin: 0;
}
button.icon.more {
    border-top: 0.1em solid #fff;
    border-left: 0.1em solid #fff;
    background-image: url(/content/dam/te-com/custom/images/interactive-evtol-experience/arrow_white.png);
}
button.icon.more:hover {
    background-image: url(/content/dam/te-com/custom/images/interactive-evtol-experienceg/arrow_green.png);
    animation: none;
}
html, body {
    height: 100%;
    width: 100%;
}
body {
    display:-webkit-flex;display:flex;-webkit-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;
    background-color: var(--te-color-backbody);
    font-size: 3.3vh;
    line-height: 1.9em;
    color: var(--darktext);
    font-family: 'Avenir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.navbuttons {
    display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;align-items:center;
    position: absolute;
    left: -7.3em;
    bottom: 1.2em;
    width: 6em;
    height: auto;
}
.navbutton {
    flex: 0 0 auto;-webkit-flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    height: 5em;
    width: 5em;
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
    border: 0.1em solid #75767e;
    cursor: pointer;
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    margin-left: 2em;
}
.navbutton.burger {
    background-size: 50%;
    background-image: url(/content/dam/te-com/custom/images/interactive-evtol-experience/burger.png);
}
body.local .navbutton.burger, body.web .navbutton.burger {
    display: none;
}
body.screensaver .navbutton.burger {
    display: none;
}
.navbutton.rocket {
    background-size: 50%;
    background-image: url(/content/dam/te-com/custom/images/interactive-evtol-experience/rocket.png);
}
body:not(.subpage) .navbutton.rocket {
    display: none;
}

#container {
    position: relative;
    /*display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:flex-start;align-items:flex-start;*/
    /*flex: 0 0 auto;-webkit-flex: 0 0 auto;*/
    background-color: #fff;
    aspect-ratio: 16 / 9;
    height: 100%;
    width: auto;
    overflow: hidden;
}
main {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*flex: 1 1 auto; -webkit-flex: 1 1 auto;*/
    display:-webkit-flex;display:flex;-webkit-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-justify-content:stretch;justify-content:stretch;-webkit-align-items:flex-start;align-items:flex-start;
    height: 100%;
    overflow: hidden;
    transition: right 0.5s ease-in-out;
}
#container.navopen main {
    right: 21%;
}
#container.navopen.page_1 main {right: 25%;}
#container.navopen.page_2 main {right: 31%;}
#container.navopen.page_3 main {right: 37%;}
#container.navopen.page_4 main {right: 28%;}
#container.navopen.page_5 main {right: 29%;}
#container.navopen.page_6 main {right: 29%;}
aside {
    position: absolute;
    background-color: #75767e;
    height: 100%;
    width: 0;
    top: 0;
    right: 0;
    transition: width 0.5s ease-in-out;
    z-index: 30;
}
#container.navopen aside {
    width: 33%;
}
aside .background {
    position: absolute;
    width: 100%;
    height: 120%;
    top: -10%;
    left: 0;
    background-color: #75767e;
    -webkit-box-shadow: inset 0.5em 0 0.5em rgba(0,0,0,0.5); -moz-box-shadow:  inset 0.5em 0 0.5em rgba(0,0,0,0.5); box-shadow:  inset 0.5em 0 0.5em rgba(0,0,0,0.5);
}
aside nav {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0;
    color: #fff;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
    padding: 4em 2em 3em 5em;
    font-size: 0.3em;
    line-height: 1.25em;
}
aside nav h2 {
    white-space: nowrap;
    width: 100%;
    margin: 0 0 .2em;
}
aside nav ul {
    padding-left: 1.5em;
    margin: 0;
    font-size: 1em;
    color: #fff;
}
aside nav .page {
    margin-bottom: 2.5em;
    cursor: pointer;
}
aside nav .page.home {
    font-size: 1.2em;
}
aside nav .page:not(.home) {
    margin-left: 3em;
}
aside nav .page .legend {
    margin-top: 1em;
    padding-left: 6%;
}
aside nav .page .item {
    display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:flex-start;align-items:flex-start;
    margin-top: 1em;
    overflow: hidden;
}
aside nav .page .item {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
aside nav .page .items {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: margin 1s ease-in-out, max-height 1s ease-in-out;
}
aside nav .page .items.showitems {
    margin: 2em 0;
    max-height: 80vh;
}
aside nav .page .item .number {
    display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;
    flex: 0 0 4%; -webkit-flex: 0 0 4%;
    margin-right: 0.75em;
    width: 100%;
    aspect-ratio: 1 / 1;
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
    border: 0.1em solid #fff;
    background-color: var(--te-color-dot);
    color: #fff;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1.5em;
    overflow: hidden;
}
aside nav .page .item .number > div {
    flex: 0 0 auto; -webkit-flex: 0 0 auto;
    /*padding-top: 0.7em;*/
}
aside nav .page .item .image {
    flex: 0 0 8em; -webkit-flex: 0 0 8em;
}
aside nav .page .item .image img {
    width: 100%;
    height: auto
}
aside nav .page .item .text {
    flex: 1 1 auto; -webkit-flex: 1 1 auto;
    padding: 0.2em 1em;
}
aside nav .page .itemtitle {
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 0.25em;
}
aside nav .page .item li {
    white-space: nowrap;
}

article {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
    font-size: 0.65em;
    line-height: 1.4em;
    z-index: 7;
}
article ul {
    margin: 0;
    padding: 0;
}
article li {
    list-style-type: none;
    margin: 0 0 1em;
    padding: 0.05em 0 0 1.25em;
}
article .listing {
    padding: 8em;
    padding-left: 3rem;
    opacity: 0;
    -webkit-filter: blur(var(--te-blur-listing)); -moz-filter: blur(var(--te-blur-listing)); -ms-filter: blur(var(--te-blur-listing)); -o-filter:blur(var(--te-blur-listing)); filter: blur(var(--te-blur-listing));
    transition: opacity 1s ease-in-out, -webkit-filter 1s ease-in-out, -moz-filter 1s ease-in-out, -ms-filter 1s ease-in-out, -o-filter 1s ease-in-out, filter 1s ease-in-out;
}
#container:not(.navopen) article .listing.in {
    opacity: 1;
    -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); -o-filter:blur(0); filter: blur(0);
}
article .listing ul {
    max-width: 36%;
}
article .listing li {
    background: url(/content/dam/te-com/custom/images/interactive-evtol-experience/li-dot.png) left center / 0.75em 0.75em no-repeat;
}
article .listing h1 {
    font-size: 2em;
    color: var(--te-color-orange);
    margin: 0 0 1em;
    text-transform: uppercase;
}

.illustration {
    position: absolute;
    left: 49%;
    top: -4%;
    height: 105%;
    width: auto;
    transform: rotate(50deg);
    z-index: 5;
    transition: height 1.5s ease-in-out;
    /*transition: transform 1.5s ease-in-out, height 1.5s ease-in-out, left 1.5s ease-in-out;*/
}
.illustration.reset {
    transition: none !important;
}
.illustration.reset img {
    transition: none !important;
}
.illustration img {
    position: absolute;
    left: 0;
    top: 125%;
    height: 100%;
    width: auto;
    transition: top 1.5s ease-in-out;
}
.illustration.out img {
    top: -170% !important;
}
.illustration.saver {
    transition: none;
}
/* offscreen start */
.illustration.saver1 {
    /*
    height: 105.1%;
    transition: height 1.5s ease-in-out;
    */
}
.illustration.saver1 img {
    top: 125.1%;
    transition: top 1.5s ease-in-out;
}
/* onscreen */
.illustration.saver2 {
    /*
    height: 105.2%;
    transition: height 1.5s ease-in-out;
    */
}
.illustration.saver2 img {
    top: -10%;
    transition: top 1.5s ease-in-out;
}
/* onscreen */
.illustration.saver3 {
    /*
    height: 120%;
    transition: height 1.5s ease-in-out;
    */
}
.illustration.saver3 img {
    top: -10.1%;
    transition: top 15s ease-in-out;
}
/* onscreen */
.illustration.saver4 {
    /*
    height: 120.1%;
    transition: height 1.5s ease-in-out;
    */
}
.illustration.saver4 img {
    top: -170%;
    transition: top 1.5s ease-in-out;
}

/*
.illustration.saver1 {left: -1%; height: 110%;}
.illustration.saver2 {left: -1%; height: 190%;}
.illustration.saver3 {left: 9%; height: 110%;}
.illustration.saver4 {left: 19%; height: 150%;}
.illustration.saver5 {left: 19%; height: 190%;}
.illustration.saver6 {left: 29%; height: 110%;}
.illustration.saver7 {left: 39%; height: 190%;}
*/
/*
.illustration.saver1 img {transition: top 2s ease-in-out;}
.illustration.saver2 img {transition: top 3s ease-in-out;}
.illustration.saver3 img {transition: top 2s ease-in-out;}
.illustration.saver4 img {transition: top 2.5s ease-in-out;}
.illustration.saver5 img {transition: top 3s ease-in-out;}
.illustration.saver6 img {transition: top 2s ease-in-out;}
.illustration.saver7 img {transition: top 3s ease-in-out;}
*/


.illustration.page {transition: transform 1.5s ease-in-out, height 1.5s ease-in-out, left 1.5s ease-in-out, top 1.5s ease-in-out;}
.illustration.page2, .illustration.page3, .illustration.page4, .illustration.page5, .illustration.page6 {transition: transform 3s ease-in-out, height 3s ease-in-out, left 3s ease-in-out, top 3s ease-in-out;}
.illustration.page1 {left: 49%; top: -4%; height: 105%; transform: rotate(50deg);}
.illustration.page1 img {top: -10%;}
.illustration.page2 {left: 36%; top: -4%; height: 400%; transform: rotate(0deg);}
.illustration.page2 img {top: -78%;}
.illustration.page3 {left: 54%; top: -4%; height: 250%; transform: rotate(0deg);}
.illustration.page3 img {top: -18%;}
.illustration.page4 {transform: rotate(0deg); height: 500%; left: 29%;}
.illustration.page4 img {top: -27%;}
.illustration.page5 {transform: rotate(0deg); height: 600%; left: 25%;}
.illustration.page5 img {top: -20%;}
.illustration.page6 {transform: rotate(0deg); height: 600%; left: 27%;}
.illustration.page6 img {top: -6%;}

.page1 .dot1 {left: 31.7%; top: 75.5%;}
.page1 .dot2 {left: 52.5%; top: 34.5%;}
.page1 .dot3 {left: 54.5%; top: 27.5%;}
.page1 .dot4 {left: 57.2%; top: 21%;}
.page1 .dot5 {left: 67.5%; top: 15.5%;}

.page2 .dot1 {left: 49.7%; top: 37.2%;}
.page2 .dot2 {left: 66.4%; top: 42.2%;}
.page2 .dot3 {left: 53.5%; top: 28.5%;}
.page2 .dot4 {left: 71.7%; top: 40.5%;}
.page2 .dot5 {left: 54.5%; top: 34.5%;}
.page2 .dot6 {left: 69.5%; top: 34.5%;}

.page3 .dot1 {left: 55.5%; top: 58%;}
.page3 .dot2 {left: 64%; top: 40%;}
.page3 .dot3 {left: 65.5%; top: 34%;}
.page3 .dot4 {left: 58%; top: 42%;} /* 58 42  -4.5 -7 */
.page3 .dot5 {left: 60%; top: 46%;}

.page4 .dot1 {left: 57%; top: 35%;}
.page4 .dot2 {left: 39.5%; top: 31%;}
.page4 .dot3 {left: 42%; top: 36%;}
.page4 .dot4 {left: 54.5%; top: 31%;}
.page4 .dot5 {left: 63.5%; top: 23%;}
.page4 .dot6 {left: 41.5%; top: 25%;}
.page4 .dot7 {left: 43.5%; top: 30%;}
.page4 .dot8 {left: 45.5%; top: 22%;}
.page4 .dot9 {left: 64.5%; top: 37%;}

.page5 .dot1 {left: 54%; top: 51%;}
.page5 .dot2 {left: 51%; top: 47.5%;}
.page5 .dot3 {left: 49%; top: 52.5%;}
.page5 .dot4 {left: 39.5%; top: 36.5%;}
.page5 .dot5 {left: 41%; top: 31%;}
.page5 .dot6 {left: 42.7%; top: 24.8%;}

.page6 .dot1 {left: 67%; top: 50%;}
.page6 .dot2 {left: 40%; top: 42%;}
.page6 .dot3 {left: 41%; top: 37%;}
.page6 .dot4 {left: 68.5%; top: 44%;}
.page6 .dot5 {left: 67.5%; top: 38%;}
.page6 .dot6 {left: 44.5%; top: 43%;}
.page6 .dot7 {left: 41%; top: 47%;}
.page6 .dot8 {left: 42.8%; top: 53.5%;}
.page6 .dot9 {left: 70%; top: 55%;}

/*
.page1 .dot1 {left: 36.7%; top: 83.5%;}
.page1 .dot2 {left: 57.5%; top: 42.5%;}
.page1 .dot3 {left: 59.5%; top: 35.5%;}
.page1 .dot4 {left: 62.3%; top: 29%;}
.page1 .dot5 {left: 72.5%; top: 23.5%;}

.page2 .dot1 {left: 54.7%; top: 45.7%;}
.page2 .dot2 {left: 71.4%; top: 50.7%;}
.page2 .dot3 {left: 58.5%; top: 37%;}
.page2 .dot4 {left: 76.7%; top: 50%;}
.page2 .dot5 {left: 59.5%; top: 43%;}
.page2 .dot6 {left: 74.5%; top: 43%;}

.page3 .dot1 {left: 60%; top: 65%;}
.page3 .dot2 {left: 68.5%; top: 47%;}
.page3 .dot3 {left: 70%; top: 41%;}
.page3 .dot4 {left: 62.5%; top: 49%;}
.page3 .dot5 {left: 64.5%; top: 53%;}

.page4 .dot1 {left: 61.5%; top: 44%;}
.page4 .dot2 {left: 44%; top: 40%;}
.page4 .dot3 {left: 46.5%; top: 45%;}
.page4 .dot4 {left: 59%; top: 40%;}
.page4 .dot5 {left: 68%; top: 32%;}
.page4 .dot6 {left: 46%; top: 34%;}
.page4 .dot7 {left: 48%; top: 39%;}
.page4 .dot8 {left: 50%; top: 31%;}
.page4 .dot9 {left: 71.7%; top: 46%;}

.page5 .dot1 {left: 59%; top: 59.5%;}
.page5 .dot2 {left: 56%; top: 56%;}
.page5 .dot3 {left: 54%; top: 61%;}
.page5 .dot4 {left: 44.5%; top: 45%;}
.page5 .dot5 {left: 46%; top: 39.5%;}
.page5 .dot6 {left: 47.7%; top: 33.3%;}

.page6 .dot1 {left: 71.5%; top: 59%;}
.page6 .dot2 {left: 44.5%; top: 51%;}
.page6 .dot3 {left: 45.5%; top: 46%;}
.page6 .dot4 {left: 73%; top: 53%;}
.page6 .dot5 {left: 72%; top: 47%;}
.page6 .dot6 {left: 49%; top: 52%;}
.page6 .dot7 {left: 45.5%; top: 56%;}
.page6 .dot8 {left: 47.3%; top: 62.5%;}
.page6 .dot9 {left: 74.5%; top: 64%;}
*/
.popup {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    max-width: 21em;
    height: auto;
    opacity: 0;
    transition: opacity 0.35s ease-in;
    color: #fff;
    z-index: 20;
}
.popup .box {
    /*border: 0.1em solid var(--te-color-popupborder);*/
    background-color: var(--te-color-popupback);
    /*-webkit-border-radius: 0.75em; -moz-border-radius: 0.75em; border-radius: 0.75em;*/
    overflow: hidden;
}
.popup.in {
    z-index: 110;
}
.popup.in.popup {
    opacity: 1;
}
/*
.popup1 {left: 21%; top: 60%;}
.popup2 {left: 66.2%; top: 42.6%;}
.popup3 {left: 67.3%; top: 33.2%;}
.popup4 {left: 52.7%; top: -1%;}
.popup5 {left: 82.1%; top: 20.1%;}
*/
.popup ul {
    list-style: disc;
}
.popup li {
    background: url(/content/dam/te-com/custom/images/interactive-evtol-experience/li-dot-white.png) left 0.4em / 0.75em 0.75em no-repeat;
    margin-bottom: 0;
}
.popup header {
    /*background-color: var(--te-color-w2);*/
    color: #fff;
    padding: 1.25em 0.75em 0.25em;
    white-space: nowrap;
    line-height: 1em;
    font-size: 0.7em;
    line-height: 1.4em;
    font-weight: bold;
}
.popup .text {
    font-size: 0.7em;
    line-height: 1.4em;
    padding: 0.5em 1.5em 0.75em 0.75em;
    max-width: 40em;
}
.popup footer {
    padding: 0;
    line-height: 1em;
    height: var(--te-size-footerbutton);
}
.popup footer .buttons {
    position: relative;
    display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:stretch;align-items:stretch;
    height: 100%;
}
.popup footer .buttons button {
    flex: 0 0 auto;-webkit-flex: 0 0 var(--te-size-footerbutton);
    aspect-ratio: 1 / 1;
    height: 100%;
}

.popup .line {
    position: absolute;
    width: 1px;
    height: 1px;
    left: 0;
    top: 0;
}
.popup.topright .line {left: auto; right: -0.15em; bottom: auto; top: 0;}
.popup.topleft .line {left: 0; right: auto; bottom: auto; top: 0;}
.popup.bottomright .line {left: auto; right: -0.15em; bottom: -0.15em; top: auto;}
.popup.bottomleft .line {left: 0; right: auto; bottom: -0.15em; top: auto;}
.popup.topright .line {transform: rotate(-45deg);}
.popup.topleft .line {transform: rotate(-135deg);}
.popup.bottomright .line {transform: rotate(45deg);}
.popup.bottomleft .line {transform: rotate(135deg);}
.popup .line > div {
    margin-top: -0.1em;
    margin-left: -0.3em;
    width: 2.75em;
    height: 1px;
    border-bottom: 0.2em solid var(--te-color-w2);
}

.dot {
    position: absolute;
    left: o;
    top: 0;
    height: 12em;
    width: 12em;
    /*transform: scale(0.5);*/
    transform: scale(1);
    opacity: 0;
    transition: transform 0.5s ease-in, opacity 0.5s ease-in;
    z-index: 10;
}
.dot.scaled {
    transition: transform 0.25s ease-in, opacity 0.25s ease-in;
    transform: scale(0.8) !important;
    z-index: 105;
}
.page1 .dot.scaled {
    transform: scale(0.33) !important;
}
.dot.in {
    transform: scale(0.17);
    opacity: 1;
}
.dot > * {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
.dot .glow {
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
    border: 0.5em solid var(--te-color-glow);
    background-color: var(--te-color-glow2);
    z-index: 100;
    transform: scale(2);
    -webkit-filter: blur(var(--te-blur-glow)); -moz-filter: blur(var(--te-blur-glow)); -ms-filter: blur(var(--te-blur-glow)); -o-filter:blur(var(--te-blur-glow)); filter: blur(var(--te-blur-glow));
    animation: 1.5s linear infinite normal glow;
}
.dot.scaled .glow {
    animation: none;
    display: none;
}
.dot .number {
    display:-webkit-flex;display:flex;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-justify-content:center;justify-content:center;-webkit-align-items:flex-end;align-items:flex-end;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
    background-color: var(--te-color-dot);
    border: 0.3em solid #fff;
    z-index: 101;
    overflow: hidden;
}
.dot.scaled .number {
    -webkit-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25); box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
}
.dot .image {
    z-index: 102;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
    border: 0.3em solid var(--te-color-dot);
    opacity: 1;
    transition: opacity 0.25s ease-in;
}
.dot:not(.scaled) .image {
    opacity: 0;
}
.dot .number > div {
    color: #fff;
    font-size: 8em;
    line-height: 1.4em;
    font-weight: bold;
}
.hidenumber .dot .number > div {
    display: none;
}



header.main {
    position: absolute;
    height: 3em;
    width: auto;
    left: 0;
    top: 0;
}
header.main .logo {
    position: absolute;
    right: 3rem;
    top: 0;
    height: 100%;
    width: auto;
}
header.main img {
    height: 100%;
    width: auto;
}
header.main .title {
    flex: 0 0 auto;-webkit-flex: 0 0 auto;
    position: relative;
}
header.main h1 {
    position: absolute;
    left: 0;
    bottom: -0.7em;
    width: auto;
    height: auto;
    font-size: 1.3em;
    color: var(--te-color-orange);
    margin: 0;
    white-space: nowrap;
    text-transform: uppercase;
    
}

@media (max-aspect-ratio: 16 / 9) {
    body {
        font-size: calc(3.3vw / 16 * 9);
    }
    #container  {
        height: auto;
        width: 100%;
    }
}

@keyframes glow {
    0% {transform: scale(1); opacity: 0;}
    25% {transform: scale(1); opacity: 1;}
    50% {transform: scale(1.75); opacity: 1;}
    100% {transform: scale(1.75); opacity: 0;}
}

@keyframes buttonblink {
    0% {background-color: transparent;}
    49% {background-color: transparent;}
    50% {background-color: var(--te-color-orange);}
    100% {background-color: var(--te-color-orange);}
}