:root{--scale: 0.5}*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Poppins",sans-serif}.navbar{position:fixed;left:0;top:0;width:100%;z-index:10;height:.3rem}.navbar .menu{max-width:72rem;width:100%;margin:0 auto;padding:0 2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}.navbar .menu .logo{font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;line-height:4rem}.navbar .menu .logo span{font-weight:300;font-size:.8rem}.navbar .menu .burger{height:4rem;width:3rem;display:-webkit-box;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.navbar .menu .burger .bar{width:1.9rem;height:3.5px;border-radius:2px;background-color:#eee;-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;position:relative}.navbar .menu .burger .bar::after,.navbar .menu .burger .bar::before{content:"";position:absolute;width:inherit;height:inherit;background-color:#eee;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}.navbar .menu .burger .bar::after{-webkit-transform:translateY(9px);transform:translateY(9px)}.navbar .menu .burger .bar::before{-webkit-transform:translateY(-9px);transform:translateY(-9px)}.container{min-height:100vh;width:100%;background-color:#485461;background-image:linear-gradient(135deg, #485461 0%, #28313b 74%);overflow:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.container .main{position:relative;width:100%;left:0;z-index:5;overflow:hidden;-webkit-transform-origin:left;transform-origin:left;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:.5s;transition:.5s}.container .main header{min-height:100vh;width:100%;position:relative}.container .main header.header__one{background:url(../img/bg-one.jpg) no-repeat top center/cover}.container .main header.header__two{background:url(../img/bg-two.jpg) no-repeat top center/cover}.container .main header.header__three{background:url(../img/bg-three.jpg) no-repeat top center/cover}.container .main header.header__four{background:url(../img/bg-four.jpg) no-repeat top center/cover}.container .main header.header__five{background:url(../img/bg-five.jpg) no-repeat top center/cover}.container .main header.header__six{background:url(../img/bg-six.jpg) no-repeat top center/cover}.container .main header .header{position:absolute;width:100%;height:100%;top:0;left:0;background-color:rgba(43,51,59,.5);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.container .main header .header__item{max-width:500px;text-align:center;color:#fff;padding:0 32px}.container .main header .header__item .title{font-size:40px;line-height:80px}.container .main header .header__item .botton{margin:1rem;padding:.6rem 1.6rem;border:2px solid #fff;outline:none;border-radius:35px;text-transform:uppercase;cursor:pointer;background:rgba(255,255,255,.2039215686);color:#fff;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-transition:scale .5s ease-in-out;transition:scale .5s ease-in-out;text-decoration:none}.container .main header .header__item .botton:hover{scale:1.2}.container .shadow{position:absolute;width:100%;height:100vh;top:0;left:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:left;transform-origin:left;-webkit-transition:.5s;transition:.5s;background:#fff}.container .shadow.one{z-index:-1;opacity:.15}.container .shadow.two{z-index:-2;opacity:.1}.container .links{position:absolute;width:30%;right:0;top:0;height:100vh;z-index:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.container .links ul{list-style:none}.container .links a{text-decoration:none;color:#fff;padding:.07rem 0;font-size:1rem;display:inline-block;font-weight:300;text-transform:uppercase;letter-spacing:1px;-webkit-transition:.3s;transition:.3s;opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-animation:hide .5s forwards ease;animation:hide .5s forwards ease}.container .links li{display:block;margin-bottom:8px}.container.active .bar{-webkit-transform:rotate(360deg);transform:rotate(360deg);background-color:rgba(0,0,0,0)}.container.active .bar::after{-webkit-transform:translateY(0) rotate(-45deg);transform:translateY(0) rotate(-45deg)}.container.active .bar::before{-webkit-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg)}.container.active .main{-webkit-animation:main-animation 1s ease;animation:main-animation 1s ease;cursor:pointer;-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(var(--scale));transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(var(--scale))}.container.active .main:hover{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(340px) scale(0.5);transform:perspective(1300px) rotateY(20deg) translateZ(340px) scale(0.5)}.container.active .main:hover+.shadow.one{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(230px) scale(0.5);transform:perspective(1300px) rotateY(20deg) translateZ(230px) scale(0.5)}.container.active .shadow.one{-webkit-animation:shadow-one .6s ease-in-out;animation:shadow-one .6s ease-in-out;-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);transform:perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5)}.container.active .shadow.two{-webkit-animation:shadow-two .6s ease-in-out;animation:shadow-two .6s ease-in-out;-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);transform:perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5)}.container.active .links a{-webkit-animation:appear .5s forwards ease var(--i);animation:appear .5s forwards ease var(--i)}@-webkit-keyframes main-animation{from{-webkit-transform:translate(0);transform:translate(0)}to{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(var(--scale));transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(var(--scale))}}@keyframes main-animation{from{-webkit-transform:translate(0);transform:translate(0)}to{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(var(--scale));transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(var(--scale))}}@-webkit-keyframes shadow-one{0%{-webkit-transform:translate(0);transform:translate(0)}5%{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5)}100%{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(215px) scale(scale(0.5));transform:perspective(1300px) rotateY(20deg) translateZ(215px) scale(scale(0.5))}}@keyframes shadow-one{0%{-webkit-transform:translate(0);transform:translate(0)}5%{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5)}100%{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(215px) scale(scale(0.5));transform:perspective(1300px) rotateY(20deg) translateZ(215px) scale(scale(0.5))}}@-webkit-keyframes shadow-two{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(scale(0.5));transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(scale(0.5))}100%{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(120px) scale(scale(0.5));transform:perspective(1300px) rotateY(20deg) translateZ(120px) scale(scale(0.5))}}@keyframes shadow-two{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(scale(0.5));transform:perspective(1300px) rotateY(20deg) translateZ(310px) scale(scale(0.5))}100%{-webkit-transform:perspective(1300px) rotateY(20deg) translateZ(120px) scale(scale(0.5));transform:perspective(1300px) rotateY(20deg) translateZ(120px) scale(scale(0.5))}}@-webkit-keyframes hide{from{opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px)}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes hide{from{opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px)}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes appear{from{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px)}}@keyframes appear{from{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px)}}