:root {
    --SM-Blue-Grad: linear-gradient(180deg, #5ec0ed 47.12%, #1082c4 100%);
    --SM-Blue: #003a70;
    --SM-Green: #3F9043;
    --SM-Red: #961919;
    --SM-Red-Hover: #d30015;
    --Yellow: #E1BB00;
    /*#fdd409;*/
    --White: #fff;
    --StandardTransition: opacity 0.6s ease, transform 0.6s ease;
}

html,
body {
    margin: 0 auto;
    background: #111;
    overflow: hidden;
    font-family: "myriad-pro", Arial, Helvetica, sans-serif;
}
button{
    background: none; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    font: inherit; /* Inherit font styles */
    color: inherit; /* Inherit text color */
    cursor: pointer; /* Change cursor to pointer */
}
#container {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    _transform: translate(-50%, -50%);
    transform-origin: top left;
}

/* 4K vertical stage */
#slides {
    width: 1920px;
    height: 1080px;
    position: relative;
    margin: 0 auto;
    __background: var(--SM-Blue);
}

.opaque {

    background-color: rgba(0, 58, 112, 0.85);
    box-shadow: 0 10px 120px 0 rgba(0, 19, 63, 0.35) inset;
    backdrop-filter: blur(10px);
}

/* Each slide is a full-frame layer */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
    /* can comment transition out to remove the transition */
    transition: opacity 0.6s ease;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* Background image fills the slide */
.bg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.supermicro-logo {
    width: 376px;
    height: 193px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.amd-logo {
    width: 331px;
    height: 79px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.tray {
    position: absolute;
    z-index: 5;
    left: 0;
    bottom: 0;
    width: 650px;
    min-height: 1080px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transition: var(--StandardTransition);
    background: linear-gradient(90deg, rgba(24, 25, 28, 0.920) 40%, rgba(24, 25, 28, 0.7) 70%, rgba(24, 25, 28, 0.5) 80%, rgba(24, 25, 28, 0.05) 100%);
    backdrop-filter: blur(5px);
}

.tray>* {
    width: 450px;
}

.tray.show {
    opacity: 1;
    visibility: visible;
}

.tray_icons {
    position: absolute;
    top: 585px;
    display: flex;
    margin: 0 35px 70px;
    align-items: center;
    gap: 20px;
}

.tray_icons>.next,
.tray_icons>.prev {
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 3px;
    background-blend-mode: screen;
    cursor: pointer;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;

    border: 1px solid #666;
    transition: background .35s, border-color .35s;
}

.tray_icons>.prev {
    margin-left: auto;
}

.tray_icons .next:hover:not(.disabled),
.tray_icons .prev:hover:not(.disabled) {
    border-color: var(--SM-Green);
}

.tray_icons .contact {
    border-radius: 3px;
    border: 1px solid #666;
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 2.13em;
    letter-spacing: 0.75px;
    display: flex;
    width: 150px;
    height: 48px;
    padding-top: 2px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    cursor: pointer;
    transition: background .35s, border-color .35s;
}

.tray_icons .contact:hover {
    border-color: var(--SM-Green);
}

.tray_icons .next:active,
.tray_icons .prev:active,
.tray_icons .contact:active {
    background-color: rgba(37, 195, 98, 0.5);
}

.tray_icons .progress_bar {
    position: absolute;
    right: 0;
    bottom: -20px;
    border-radius: 7px;
    background: #B2B2B2;
    height: 4px;
    width: 124px;
}

.tray_icons .progress {
    position: relative;
    border-radius: 7px;
    height: 4px;
    background: var(--SM-Green);
    transition: width .35s;
}

.tray_icons .home {
    border: 2px solid rgba(11, 119, 221, 0.5);
    width: 75px;
}

.tray_icons .home:active {
    background-color: rgba(11, 119, 221, 0.5);
}

.tray .step {
    position: relative;
    top: 0;
    display: none;
    opacity: 0;
    visibility: hidden;
}

.tray .step.show {
    opacity: 1;
    z-index: 5;
    display: block;
    visibility: visible;
}

.tray .headline {
    color: var(--White);
    font-family: "myriad-pro-cond", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 94px;
    letter-spacing: 0.82px;
    background: linear-gradient(90deg, rgba(37, 95, 211, 0.33) 60.58%, rgba(37, 95, 211, 0.00) 95.19%);
    width: 600px;
    padding: 5px 35px 6px;
    margin-top: 50px;
}

.tray .copy {
    padding-top: 100px;
    flex-grow: 1;
    color: var(--White);
    padding: 18px 35px;
    font-size: 22px;
    font-style: normal;
    line-height: 1.77em;
    letter-spacing: 0.36px;
}

.tray .copy .title {
    color: var(--Yellow);
    font-family: "myriad-pro-cond", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 62px;
    /* 103.333% */
}

.tray .copy .subtitle {
    color: var(--White);
    font-family: "myriad-pro-cond", sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    margin-top: 0.5em;
    line-height: 1em;
    /* 103.333% */
}

.tray .copy p {
    margin-top: 0;
}

.tray .footnotes {
    position: absolute;
    top: 660px;
    color: var(--White);
    padding: 18px 35px;
    font-size: 14px;
    font-style: normal;
    line-height: 1.5em;
}

.tray .footnote {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: var(--StandardTransition);
}

.tray .footnote.show {
    height: auto;
    opacity: 1;
}

.tray .footnotes a {
    color: #fff;
}

/* Example clickable element */
.debug {
    font-size: 80px;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 40px;
    padding-top: 40px;
    position: absolute;
    z-index: 9998;
}

.debug .button {
    padding: 20px 40px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 48px;
    cursor: pointer;
    border-radius: 20px;
}

#fsSwitch {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    z-index: 999999;
}

#fsSwitch.vis {
    border: 10px solid #f00;
    background: #f00;
}

#fsConfirm {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

#fsConfirm>div {
    background: var(--SM-Blue);
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 320px;
    text-align: center;
}

#fsConfirm p {
    color: var(--White);
    margin-bottom: 20px;
    font-size: 16px;
}

#fsConfirm button {
    border: 1px solid var(--White);
    background: var(--White);
    color: var(--SM-Blue);
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 8px;
}

#fsConfirm button:active {
    background: var(--SM-Blue);
    color: var(--White);
}

#fsYes {
    margin-right: 10px;
}

.tray_icons .disabled,
.tray_icons .disabled:active {
    opacity: 0.4;
    cursor: default;
    background-color: transparent !important;
}

#btnFullscreen {
    position: absolute;
    bottom: 80px;
    left: 35px;
    width: 26px;
    height: 21px;
    z-index: 1009;
    cursor: pointer;
    background-image: url('data:image/svg+xml,<svg width="26" height="21" viewBox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_174_9)"><path d="M24.1594 0H20.1328V1.81596H24.1594V5.83204H26.0116V0H24.1594Z" fill="white" fill-opacity="0.7"/><path d="M0 0V5.83204H1.90973V1.81596H5.86726V0H0Z" fill="white" fill-opacity="0.7"/><path d="M1.90973 15.168H0V21H5.86726V19.2306H1.90973V15.168Z" fill="white" fill-opacity="0.7"/><path d="M24.1594 19.2306H20.1328V21H26.0001V15.168H24.1479V19.2306H24.1594Z" fill="white" fill-opacity="0.7"/><path d="M19.3159 6.97266H6.68408V14.0153H19.3159V6.97266Z" fill="white" fill-opacity="0.7"/></g><defs><clipPath id="clip0_174_9"><rect width="26" height="21" fill="white"/></clipPath></defs></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.fullscreen #btnFullscreen {
    background-image: url('data:image/svg+xml,<svg width="26" height="21" viewBox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_174_2)"><path d="M21.9733 5.83204H25.9999V4.01608H21.9733V0H20.1211V5.83204H21.9733Z" fill="white" fill-opacity="0.7"/><path d="M5.86726 5.83204V0H3.95752V4.01608H0V5.83204H5.86726Z" fill="white" fill-opacity="0.7"/><path d="M3.95752 21H5.86726V15.168H0V16.9374H3.95752V21Z" fill="white" fill-opacity="0.7"/><path d="M21.9735 16.9374H26.0001V15.168H20.1328V21H21.985V16.9374H21.9735Z" fill="white" fill-opacity="0.7"/><path d="M19.3159 6.97266H6.68408V14.0153H19.3159V6.97266Z" fill="white" fill-opacity="0.7"/></g><defs><clipPath id="clip0_174_2"><rect width="26" height="21" fill="white"/></clipPath></defs></svg>')
}

#btnAudioToggle {
    background-image: url('data:image/svg+xml,<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6138 0L3.39337 6.3629H0V14.6371H3.39337L10.6138 21V0Z" fill="white" fill-opacity="0.7"/><path d="M16.5634 21C15.9656 21 15.4563 20.5056 15.412 19.8465C15.3677 19.1639 15.8549 18.5754 16.497 18.5283C19.9735 18.2459 22.6971 14.7386 22.6971 10.5015C22.6971 6.26446 19.9735 2.7571 16.497 2.47463C15.8549 2.42756 15.3677 1.83908 15.412 1.15644C15.4563 0.473805 16.0099 -0.0441067 16.652 0.00297176C21.3464 0.379599 25 4.9698 25 10.5015C25 16.0332 21.3242 20.6234 16.652 21C16.6299 21 16.5856 21 16.5634 21Z" fill="white" fill-opacity="0.7"/><path d="M15.4092 6.48074C17.1814 6.48074 18.6061 8.28416 18.6061 10.5096C18.6061 12.7351 17.1814 14.5385 15.4092 14.5385V6.46154V6.48074Z" fill="white" fill-opacity="0.7"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: 80px;
    left: 85px;
    width: 25px;
    height: 21px;
    z-index: 1009;
    cursor: pointer;
}

#btnAudioToggle.muted {
    background-image: url('data:image/svg+xml,<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_152_53)"><path d="M10.61 0L3.39 6.36H0V14.63H3.39L10.61 20.99V0Z" fill="white" fill-opacity="0.7"/><path d="M15.71 8.03L18.18 10.5L15.71 12.97L17.49 14.75L19.96 12.28L22.43 14.75L24.21 12.97L21.74 10.5L24.21 8.03L22.43 6.25L19.96 8.72L17.49 6.25L15.71 8.03Z" fill="white" fill-opacity="0.7"/></g><defs><clipPath id="clip0_152_53"><rect width="24.21" height="21" fill="white"/></clipPath></defs></svg>')
}