:root { --white: rgba(255, 255, 255, 0.9); }
#overview { background-color: #000; overflow-x: hidden; }
.title-par { font-size: 24px; font-weight: bold; }
.med-title { font-size:30px; font-weight: bold; }
.big-title { font-size: 3.56rem; font-weight: bold; line-height: 1.3; }
.huge-title { font-size: 4.2rem; font-weight: bold; line-height: 1.3; overflow: hidden; }
.main-par { font-weight: 500; margin-left: auto; margin-right: auto; max-width: 900px; }
.gradient-text { -webkit-background-clip: text !important; background-clip: text !important; color: transparent; }

#p0 { background-color: #000; color: var(--white); font-weight: 500; padding-bottom: 30px; padding-top: 60px; text-align: center; }
#p0 .product-logo { max-width: 620px; width: 100%; }
#p0 .tagline { font-size: 28px; }
#p0 picture { display: block; margin-bottom: 60px; }

#p0b{ font-weight: 500; padding-bottom: 30px; padding-top: 60px; text-align: center; background-color: #fff; }
#p0b .tagline { font-size: 28px; color: #2d2d2d; }
#p0b .main-par { color: #464646; }
#p0b .background { max-width: 1280px; margin-left: auto; margin-right: auto; overflow: hidden; }
@media only screen and (max-width: 600px){
    #p0b .background img{ max-width: 200%; transform: translateX(-51%); }
}

#p1 { background-color: #000; color: var(--white); padding-bottom: 1px; text-align: center; max-width: 1800px; margin-left: auto; margin-right: auto; }
#p1 img { width: 150%; max-width: 150%; }

#p-ux-logo { background-color: #000; color: var(--white); text-align: center;}
#scrolltext { display: block; color: #fff; font-size: 70px; font-weight: bold; line-height: 80px; padding-bottom: 0px; margin-bottom: 0px; }
#scrolltext .ux-logo { width: 300px; }
#scrolltext .med-title { opacity: 0; transition: opacity 0.2s ease-in; }
#scrolltext .med-title.opacity { opacity: 1; }

#p-ux-panel { background-color: #000; color: var(--white); }
#p-ux-panel .text-wrap { padding-bottom: 20px; padding-top: 1px; position: relative; }
#p-ux-panel .text-wrap > div { background-color: #000; height: 100%; padding-bottom: 20px; padding-top: 30px; transition: opacity 0.2s ease-in; }
#p-ux-panel .image-wrap { margin-left: auto; margin-right: auto; max-width: 1920px; overflow: hidden; position: relative; }
#p-ux-panel .text-wrap > div:not(:first-of-type), #p-ux-panel .image-wrap > img:not(:first-of-type) { left: 0; position: absolute; top: 0; transition: opacity 0.2s ease-in; }
#p-ux-panel .text-wrap > div, #p-ux-panel .image-wrap > img { opacity: 0; }
#p-ux-panel .text-wrap > div.visible, #p-ux-panel .image-wrap > img.visible { opacity: 1; }

#p-engine { color: var(--white); }
#p-engine-logos { filter: drop-shadow( 0px 0px 20px rgba(255, 255, 255, 0.5)); text-align: center; transition: 1.5s; }
#p-engine-logos.shadow{ filter: drop-shadow( 0px 0px 20px rgb(255, 255, 255)); }
#p-engine-logos .col { padding: 30px; }
#p-engine-logos img { max-width: 230px; }
#p-engine-trigger { z-index: 1; }
#p-engine-sideback { background-position: center bottom; background-color: #000; background-repeat: no-repeat; background-size: cover; box-shadow: 0px 50px 50px 5px #000, 0px 50px 50px 5px #000 inset; position: absolute; height: 60vh; width: 100%; }
#p-engine-features { height: 1000px; margin-top : -115vh; position: relative; }
#p-engine-features .big-title { -webkit-background-clip: text !important; background-clip: text !important; color: transparent; display: inline-block; line-height: 1.1; margin-top: 30px; }
#p-engine-features .feature-subtitle { color:rgb(163, 163, 163); display: block; }
#p-engine-features .feature-subtitle:last-of-type { margin-bottom: 50px; }

#p-manager { color: var(--white); }

#p-keyboard { color: var(--white); padding-bottom: 200px; padding-top: 200px;}
#p-keyboard .main-par { border-radius: 30px; overflow: hidden; }
#p-keyboard img { max-width: 150%; }

#p-in { color: var(--white); }
#p-in-backside { background-position: center; background-repeat: no-repeat; background-size: cover; height: 300px; }
#p-in-animation .title-par { height: 36px; margin-top: -20px; }
#p-in-animation .title-par span { left: 0; position: absolute; transition: 0.5s; width: 100%; }
#p-in-animation .title-par span.hidden { opacity: 0; }
#p-engine-features .subtitle { color:rgb(163, 163, 163); display: block; }
#p-in-animation .row { max-width: 500px; padding: 0 50px; }
#p-in-animation .col { padding: 23px 20px 0px 20px }
#p-in-animation svg { max-width: 50px; }
#p-in-animation svg path { fill: var(--white); transition: 0.1s; }
#p-in-animation .subtitle { color:rgb(163, 163, 163); display: block; font-weight: 500; }

#p-mixer { color: var(--white); padding-bottom: 200px; padding-top: 200px;}
#p-mixer .main-par { border-radius: 30px; overflow: hidden; }
#p-mixer img { border-radius: 2vw; margin: 20px 1% 10px 1%; width: 98%;}

#p-guys { width: 100%; height: calc(100vh + 300px); color: var(--white); opacity: 0; }
#p-guys .video-resizer { min-width: 70%; min-height: 400px; width: 100%; height: 100vh; margin-left: auto; margin-right: auto; }
#p-guys video { width: 100%; height: 100%; opacity: 0.85; object-fit: cover; object-position: 70%; }
#p-guys .main-par { max-width: 600px; }

#p-stuff { color: var(--white); padding-top: 200px; padding-bottom: 200px; background-color: #1e1e1e; }
#p-stuff .main-par { display: grid; grid-template-columns: auto auto; grid-gap: 20px 9%; color: #bdbdbd }
#p-stuff .big-title { grid-column: 1 / 3; }
#p-stuff img { filter: invert(1); height: 95px; width: 70px; }

#p-final-logo { display: none; padding-bottom: 410px; }
#p-final-logo img { width: 100%; }
#p-final-logo p { font-size: 28px; color: var(--white); text-align: center; }

@media only screen and (min-width: 2354px){
    #p-in-backside { background-size: contain; }
}
@media only screen and (min-width: 1601px){
    #p-engine-sideback { background-size: contain; }
}
@media only screen and (max-width: 1900px){
    #p-ux-panel .image-wrap img { max-width: 110%; transform: translateX(-6%); }
}
@media only screen and (max-width: 900px){
    #p-ux-panel .image-wrap { overflow: hidden; }
    #p-ux-panel .image-wrap img { max-width: 320%; transform: translateX(-6%); }
}
@media only screen and (max-width: 600px){
    #p0 .tagline { font-size: 19px; }
}