*{box-sizing:border-box;margin:0;padding:0}html,body,#root,main{color:#fff;background-color:#000;width:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow-x:clip}body.menu-open,html.menu-open{overflow:hidden!important}.dev-credit{z-index:45;opacity:.6;color:#fff;font-size:.8rem;position:fixed;bottom:1rem;right:1.5rem}.dev-credit a{color:#fff;border-bottom:1px solid #fff6;text-decoration:none;transition:opacity .2s}.dev-credit a:hover{opacity:1}::-webkit-scrollbar{display:none}main{position:relative}#canvas-elem:after{content:"";z-index:1;background-image:url(/backgrounds/background-l.png);background-position:50%;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;transition:opacity .3s linear;position:absolute;top:0;left:0}main.menu-open #canvas-elem:after{opacity:0}section{z-index:2;min-height:100vh;transition:opacity .5s;position:relative}main.menu-open section{opacity:0;pointer-events:none}.main-nav{z-index:100;pointer-events:auto;justify-content:space-between;align-items:center;width:100%;padding:3.5rem 2.5rem 1.5rem;display:flex;position:fixed;top:0;left:0}.main-nav .nav-elem i,.main-nav .nav-elem:nth-child(2){cursor:pointer}.main-nav .nav-elem:nth-child(2) i{color:red}.main-nav svg{cursor:pointer;width:100%;max-width:5rem;height:100%}.main-nav svg.dept-logo{max-width:11rem;height:auto}#section1{--gap:5rem;position:relative}#section1 .middle{gap:var(--gap);display:flex}#section1 .middle .left,#section1 .middle .right{width:50%}#section1 .middle .left{justify-content:flex-end;align-items:center;padding-block:7rem;display:flex}#section1 .middle .left h1{text-align:right;opacity:.9;font-size:5rem;line-height:.8}#section1 .bottom{gap:var(--gap);display:flex}#section1 .bottom .left,#section1 .bottom .right{width:50%}#section1 .bottom .right p{font-weight:200;line-height:1.5}#section1 .first-line{background-color:#ff00008c;width:30rem;height:1px;position:absolute;transform:rotate(45deg)translateY(-18rem)}#section1 .second-line{background-color:#ff00008c;width:10rem;height:1px;position:absolute;top:28%;right:12%;transform:rotate(135deg)}.menu-toggle-btn{cursor:pointer;z-index:120;padding:.5rem}.hamburger-icon{flex-direction:column;justify-content:space-between;width:26px;height:14px;display:flex;position:relative}.hamburger-icon span{transform-origin:50%;background-color:#fff;width:100%;height:2px;transition:all .3s ease-in-out;display:block}.hamburger-icon.open span:first-child{transform:translateY(6px)rotate(45deg)}.hamburger-icon.open span:nth-child(2){transform:translateY(-6px)rotate(-45deg)}.menu-overlay{z-index:50;opacity:0;pointer-events:none;background:radial-gradient(circle at 25%,#150f24 0%,#08080f 70%);flex-direction:column;justify-content:space-between;width:100%;height:100vh;padding:8rem 6rem 4rem 8rem;transition:opacity .5s ease-in-out;display:flex;position:fixed;top:0;left:0;overflow:hidden}.menu-overlay.active{opacity:1;pointer-events:auto}.menu-links{z-index:80;flex-direction:column;gap:1.2rem;display:flex;position:relative}.menu-item{cursor:pointer;z-index:85;align-items:baseline;gap:1.5rem;width:fit-content;display:flex;position:relative}.menu-item small{opacity:.4;font-size:.75rem;font-weight:300}.menu-item h2{letter-spacing:-.5px;opacity:.5;font-size:3.2rem;font-weight:200;line-height:1;transition:all .3s}.menu-item:hover h2{opacity:1;transform:translate(10px)}.menu-footer{z-index:80;justify-content:space-between;align-items:flex-end;width:100%;font-size:.85rem;display:flex;position:relative}.showreel-btn{color:#f33;cursor:pointer;align-items:center;gap:.5rem;font-weight:500;display:flex}.social-links{opacity:.6;z-index:85;position:relative}.social-links a{color:#fff;margin:0 .3rem;text-decoration:none;transition:opacity .2s}.social-links a:hover{opacity:1}#section2 .titles{flex-direction:column;margin-block:10rem;padding-left:17rem;display:flex}#section2 .titles .title{opacity:.3;cursor:pointer;gap:4rem;padding-block:2rem;transition:all .3s linear;display:flex}#section2 .titles .title:hover{opacity:1}#section2 .titles .title h1{font-size:4.5rem;font-weight:100;line-height:1}#section2 .titles .title small{margin-top:.6rem;font-size:.5rem}main:has(#section2 .title:hover) #canvas-elem:after{opacity:0}.images{width:100%;height:100%;position:fixed;top:0;left:0}.images img{opacity:0;object-fit:cover;width:100%;height:100%;transition:all .3s linear;position:absolute;top:0;left:0}main:has(#section2 .title[img-title=tomorrowland]:hover) .images #tomorrowland{opacity:1;background-color:#040718}main:has(#section2 .title[img-title=navy-pier]:hover) .images #navy-pier{opacity:1;background-color:#040718}main:has(#section2 .title[img-title=msi-chicago]:hover) .images #msi-chicago{opacity:1;background-color:#040718}main:has(#section2 .title[img-title=phone]:hover) .images #phone{opacity:1;background-color:#040718}main:has(#section2 .title[img-title=kikk]:hover) .images #kikk{opacity:1;background-color:#010f5cad}main:has(#section2 .title[img-title=kennedy]:hover) .images #kennedy{opacity:1;background-color:#040718}main:has(#section2 .title[img-title=opera]:hover) .images #opera{opacity:1;background-color:#ac0b0b}#section3{z-index:auto;padding-block:10rem;padding-inline:10rem}#section3 .top,#section3 .bottom{gap:4rem;width:100%;display:flex}#section3 .top .left{padding-left:5rem}#section3 .top .left h3{z-index:0;font-size:2.5rem;font-weight:100;line-height:1.1;position:relative}#section3 .left,#section3 .right{width:50%}#section3 .bottom .right{display:flex}#section3 .bottom .right p{z-index:2;opacity:.5;font-size:.6rem;font-weight:200;position:relative}@media (width<=768px){.menu-overlay{padding:6rem 2rem 3rem}.menu-links{gap:1rem}.menu-item h2{font-size:2.2rem;line-height:1}.menu-footer{flex-direction:column;align-items:flex-start;gap:1.5rem}.social-links{font-size:.75rem}#section1{--gap:1.5rem;flex-direction:column;display:flex}#section1 .middle{width:100%}#section1 .middle .right{display:none}#section1 .middle .left{padding-block:0;justify-content:flex-start;align-items:flex-start;width:100%;padding-top:7.5rem;padding-left:1.5rem}#section1 .middle .left h1{text-align:left;width:100%;font-size:3.4rem;line-height:.9}#section1 .bottom{width:100%}#section1 .bottom .left{display:none}#section1 .bottom .right{width:100%;margin-top:2.5rem;padding-bottom:2rem;padding-left:1.5rem}#section1 .bottom .right p{width:100%;font-size:1.05rem;line-height:1.6}#section2 .titles{margin-block:5rem;padding-left:1.5rem}#section2 .titles .title{gap:1rem;padding-block:1.3rem}#section2 .titles .title h1{font-size:2.4rem;line-height:1.05}#section2 .titles .title small{margin-top:.3rem;font-size:.55rem}#section3{padding-block:5rem;padding-inline:1.5rem}#section3 .top,#section3 .bottom{flex-direction:column;gap:2rem}#section3 .top .left{padding-left:0}#section3 .top .left h3{font-size:1.9rem;line-height:1.2}#section3 .left,#section3 .right{width:100%}#section3 .bottom .right{flex-direction:column;gap:1rem}}@media (width<=480px){.our-show-reel{display:none}.menu-overlay{justify-content:flex-start;gap:2.5rem;padding:5.5rem 1.5rem 2.5rem}.menu-links{gap:.7rem;margin-top:25vh}.menu-item h2{font-size:1.8rem;line-height:1}.menu-item{gap:1rem}.social-links{margin-top:10vh;font-size:.7rem;line-height:1.8}#section1 .middle .left{padding-block:0;padding-top:7rem;padding-left:1.5rem}#section1 .middle .left h1{width:100%;font-size:3rem}.bottom .right{width:100%;margin-top:2.5rem;padding-left:1.5rem;padding-right:10px}.bottom .right p{width:100%;font-size:1.1rem}#section2 .titles{padding-left:1rem}#section2 .titles .title h1{font-size:2rem}#section3{padding-block:4rem;padding-inline:1rem}#section3 .top .left h3{font-size:1.6rem}#section3 .bottom .right p{font-size:.75rem}}
