.review{background:var(--clr-white);padding:1.5rem 2rem;border-radius:var(--radius);box-shadow:var(--light-shadow);transition:var(--transition);text-align:center;width:500px}.review:hover{box-shadow:var(--dark-shadow)}.review .img-container{position:relative;width:150px;height:150px;border-radius:50%;margin:0 auto;margin-bottom:1.5rem}.review .person-img{width:100%;display:block;height:100%;object-fit:cover;border-radius:50%;position:relative}.review .quote-icon{position:absolute;top:0;left:0;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:50%;transform:translateY(25%);background:var(--clr-primary-5);color:var(--clr-white)}.review .img-container:before{content:"";width:100%;height:100%;background:var(--clr-primary-5);position:absolute;top:-.25rem;right:-.5rem;border-radius:50%}.review .author{margin-bottom:.25rem}.review .job{margin-bottom:.5rem;text-transform:uppercase;color:var(--clr-primary-5);font-size:.85rem}.review .info{margin-bottom:.75rem}.review .prev-btn,.review .next-btn{color:var(--clr-primary-7);font-size:1.25rem;background:transparent;border-color:transparent;margin:0 .5rem;transition:var(--transition);cursor:pointer}.review .prev-btn:hover,.review .next-btn:hover{color:var(--clr-primary-5)}.review .random-btn{margin-top:.5rem;background:var(--clr-primary-10);color:var(--clr-primary-5);padding:.25rem .5rem;text-transform:capitalize;border-radius:var(--radius);transition:var(--transition);border-color:transparent;cursor:pointer}.review .random-btn:hover{background:var(--clr-primary-5);color:var(--clr-primary-1)}.image-container{display:flex;width:75vw}.image-container .panel{background-size:auto 100%;background-position:center;background-repeat:no-repeat;height:80vh;border-radius:50px;color:#fff;cursor:pointer;flex-grow:.5;margin:10px;position:relative;transition:all .7s ease-in;filter:grayscale(1)}.image-container .panel h3{font-size:24px;position:absolute;bottom:0;margin:0;opacity:0;transition:opacity .3s ease-in .4s;left:50%;transform:translate(-50%,-50%)}.image-container .active{flex-grow:5;filter:none}.image-container .active h3{opacity:1}@media only screen and (max-width: 820px){.panel:nth-child(4){display:none}.panel:nth-child(5){display:none}}.user-form{margin-top:1rem;width:100%;max-width:800px}.user-form input{width:100%;display:block;border:none;border-radius:10px;padding:1rem;margin-bottom:2rem;font-family:inherit;font-size:1rem;box-shadow:0 5px 10px #9aa0b90d,0 15px 40px #0000001a}.user-form input:focus{outline:none}.user-form input::placeholder{color:#000}.card{max-width:800px;background-color:#fff;box-shadow:0 5px 10px #9aa0b90d,0 15px 40px #0000001a;border-radius:20px;display:flex;padding:3rem;margin:0 1.5rem;width:800px}.avatar{border-radius:50%;border:4px solid #eaeaea;height:150px;width:150px}.user-info{margin-left:2rem}.user-info h2{margin-top:0}.user-info ul{list-style:none;display:flex;justify-content:space-between;padding:0;max-width:400px;width:400px}.user-info ul li{display:flex;align-items:center}.user-info ul li strong{font-size:.9rem;margin-left:.5rem}.repo{text-decoration:none;color:#fff;background-color:#212a72;font-size:.7rem;padding:.25rem .5rem;margin-right:.25rem;margin-bottom:.5rem;display:inline-block}@media (max-width: 500px){.card{flex-direction:row;align-items:center;max-width:85vw;flex-wrap:wrap;justify-content:center}.user-form{max-width:400px}.user-info{width:100%;display:flex;overflow-wrap:anywhere;flex-direction:column;margin-left:0}.user-info h2{text-align:center}.user-info ul{flex-direction:column;width:100%;align-items:center}}.card-upload{max-width:800px;background-color:#fff;box-shadow:0 5px 10px #9aa0b90d,0 15px 40px #0000001a;border-radius:20px;padding:3rem;margin:0 1.5rem;width:800px}.card-upload input,.card-upload .drag-area,.card-upload .on-drag,.card-upload .dragover,.card-upload .visbile{display:none}.card-upload .top{text-align:center}.card-upload p{font-weight:700;color:var(--clr-primary-5)}.card-upload button{outline:0;border:0;color:#fff;border-radius:4px;cursor:pointer;font-weight:400;padding:8px 13px;width:100%;background-color:var(--clr-primary-5)}.card-upload .drag-area{height:150px;border-radius:5px;border:2px dashed var(--clr-primary-5);background-color:var(--clr-grey-10);display:flex;justify-content:center;align-items:center;margin-top:10px;user-select:none;-webkit-user-select:none}.card-upload .drag-area .visbile{font-size:18px}.card-upload .select:hover{opacity:.6}.card-upload .container{width:100%;height:auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;max-height:200px;overflow-y:auto;margin-top:10px;margin-bottom:10px}.card-upload .container .image{width:150px;margin-right:5px;height:150px;position:relative;margin-bottom:8px}.card-upload .container .image img{width:100%;height:100%;border-radius:5px;object-fit:cover}.card-upload .container .image span{position:absolute;top:-2px;right:9px;font-size:20px;cursor:pointer}.card-upload .delete{z-index:999;color:#000}@media only screen and (max-width: 820px){.card-upload{width:100%}.drag-area{flex-direction:column}}.skeleton .user-info{width:100%}.skeleton img{background-color:var(--clr-grey-7);background:linear-gradient(to right,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) var(--clr-grey-9);background-size:200% 100%;background-position-x:180%;animation:1s loading ease-in-out infinite}.skeleton h2{background-color:var(--clr-grey-7);background:linear-gradient(to right,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) var(--clr-grey-9);background-size:200% 100%;background-position-x:180%;animation:1s loading ease-in-out infinite;height:1em;border-radius:5px;width:50%}.skeleton p{background-color:var(--clr-grey-7);background:linear-gradient(to right,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) var(--clr-grey-9);background-size:200% 100%;background-position-x:180%;animation:1s loading ease-in-out infinite;height:1.5em;border-radius:5px;width:100%}@keyframes loading{to{background-position-x:-20%}}.search-container{border-radius:5px;box-shadow:3px 3px 10px #0003;overflow:hidden;width:300px}.search-container .title{margin:0}.search-container .subtitle{display:block;margin:5px 0 20px;opacity:.8;text-align:center}.search-container .header{background-color:var(--clr-primary-4);color:#fff;padding:30px 20px}.search-container .header input{background-color:#ffffff4d;border:0;border-radius:50px;color:#fff;font-size:14px;padding:10px 15px;width:100%}.search-container .header input:focus{outline:none}.search-container .user-list{background-color:#fff;list-style:none;margin:0;max-height:400px;overflow-y:auto;padding:0}.search-container .user-list li{display:flex;padding:20px}.search-container .user-list li:not(:last-of-type){border-bottom:1px solid #eee}.search-container .user-list img{border-radius:50%;object-fit:cover;height:50px;width:50px}.search-container .user-list .user-info{margin-left:10px}.search-container .user-list .user-info h4{margin:0 0 10px}.search-container .user-list .user-info p{font-size:12px}.wrapper{background-color:#fff;overflow-x:hidden;max-width:1000px;border-radius:13px;position:relative;padding:10px}.wrapper .icon{position:absolute;top:0;height:100%;width:120px;display:flex;align-items:center}.wrapper .icon:first-child{background:linear-gradient(90deg,#fff,70%,transparent);left:0}.wrapper .icon:first-child svg{margin-left:15px}.wrapper .icon:last-child{background:linear-gradient(-90deg,#fff,70%,transparent);right:0;justify-content:flex-end}.wrapper .icon:last-child svg{margin-right:15px}.wrapper .icon svg{width:35px;height:35px;text-align:center;border-radius:50%;cursor:pointer;font-size:1.2rem;background-color:var(--clr-grey-9);border:1px solid var(--clr-grey-9)}.wrapper .icon svg:hover{background-color:var(--clr-grey-6)}.wrapper .tabs-box{display:flex;gap:12px;list-style:none;overflow-x:hidden;scroll-behavior:smooth}.wrapper .tabs-box .tab{cursor:pointer;font-size:1rem;white-space:nowrap;background:var(--clr-grey-10);padding:5px 20px;border-radius:30px;border:1px solid var(--clr-grey-9)}.wrapper .tabs-box .active{color:#fff;background:#5372F0;border-color:transparent}.wrapper .tabs-box .tab:hover{background:#efedfb}.wrapper .tabs-box.dragging .tab{user-select:none;pointer-events:none}.wrapper .tabs-box.dragging{scroll-behavior:auto;cursor:grab}.payment-wrapper{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;background-color:#fff;width:500px;padding:3em;border-radius:1em;perspective:800px}.credit-card{position:relative;width:350px;height:220px;margin:auto;transform-style:preserve-3d;transition:.3s}.card-front,.card-back{position:absolute;width:inherit;height:inherit;background:linear-gradient(#33a4f8,#206df9);border-radius:1em;backface-visibility:hidden}.card-front{padding:2em 1em}.branding{display:flex;align-items:center;justify-content:space-between}.branding img{width:50px;height:auto}.card-back{position:absolute;transform:rotateY(180deg)}.card-back .white-strip{top:3em;position:relative;text-align:right}.card-back .white-strip div{height:30px;background-color:#fff;margin-top:.5em}.card-back .white-strip span{margin-right:1em}.card-back #cvv-display{padding-right:1em}.card-back .visa-logo{position:absolute;width:50px;margin-top:4em;right:1em}.card-back .black-strip{position:relative;background-color:#000;height:50px;top:2em}.card-number{color:#fff;font-weight:600;display:flex;justify-content:space-between;margin-top:2em;margin-bottom:2em;font-size:18px;padding:0 20px}.card-number .card-number-display{margin-right:3px}.details{color:#fff;display:flex;justify-content:space-between;margin-top:1.5em;font-size:.8em}.details span{display:block}.details #card-holder-name{text-transform:uppercase}form{margin-top:2em}form .date-cvv{display:flex;justify-content:space-between}label,input{display:block}label{margin-bottom:.5em;font-weight:600}input{width:100%;border:1px solid #000000;padding:1em .5em;border-radius:.5em}input:not(:last-child){margin-bottom:1em}#page-position-container{display:flex}#page-position-container .article{width:75%;margin-bottom:50px}#page-position-container section{margin-bottom:50px}#page-position-container aside{width:25%}#page-position-container aside div{position:sticky;top:20px;padding-left:2em}#page-position-container aside div a{display:block;color:#2c3e50;text-decoration:none;border-left:1px solid #ccc;padding-left:20px;padding-bottom:10px}#page-position-container aside div a.active{color:#e74c3c;font-weight:700}:root{--clr-primary-1: hsl(205, 86%, 17%);--clr-primary-2: hsl(205, 77%, 27%);--clr-primary-3: hsl(205, 72%, 37%);--clr-primary-4: hsl(205, 63%, 48%);--clr-primary-5: hsl(205, 78%, 60%);--clr-primary-6: hsl(205, 89%, 70%);--clr-primary-7: hsl(205, 90%, 76%);--clr-primary-8: hsl(205, 86%, 81%);--clr-primary-9: hsl(205, 90%, 88%);--clr-primary-10: hsl(205, 100%, 96%);--clr-grey-1: hsl(209, 61%, 16%);--clr-grey-2: hsl(211, 39%, 23%);--clr-grey-3: hsl(209, 34%, 30%);--clr-grey-4: hsl(209, 28%, 39%);--clr-grey-5: hsl(210, 22%, 49%);--clr-grey-6: hsl(209, 23%, 60%);--clr-grey-7: hsl(211, 27%, 70%);--clr-grey-8: hsl(210, 31%, 80%);--clr-grey-9: hsl(212, 33%, 89%);--clr-grey-10: hsl(210, 36%, 96%);--clr-white: #fff;--clr-red-dark: hsl(360, 67%, 44%);--clr-red-light: hsl(360, 71%, 66%);--clr-green-dark: hsl(125, 67%, 44%);--clr-green-light: hsl(125, 71%, 66%);--clr-black: #222;--transition: all .3s linear;--spacing: .1rem;--radius: .25rem;--light-shadow: 0 5px 15px rgba(0, 0, 0, .1);--dark-shadow: 0 5px 15px rgba(0, 0, 0, .2);--max-width: 1170px;--fixed-width: 620px}.hamburger{display:none;height:50px;width:50px}.hamburger .bar{background-color:#000;height:4px;width:36px;margin:3px}nav{position:relative;margin:0 8%;text-align:right;font-weight:700}nav ul{list-style:none}nav ul li{position:relative;margin:1.2em 0}nav ul li a{line-height:5em;text-transform:uppercase;text-decoration:none;letter-spacing:.4em;color:#000;display:block;transition:all ease-out .3s}nav ul li a.active{color:var(--clr-primary-5);text-decoration:underline}nav ul li:not(.active):after{opacity:.2}nav ul li:not(.active):hover a{color:var(--clr-primary-5)}nav ul li:after{content:"";position:absolute;width:100%;height:.2em;left:0;bottom:0;background-image:linear-gradient(to right,#332f3d,var(--clr-primary-5))}@media only screen and (max-width: 820px){nav ul{text-align:center}nav ul li{position:relative;margin:0}nav ul li a{line-height:5em;text-transform:uppercase;text-decoration:none;letter-spacing:.4em;color:#000;display:block;transition:all ease-out .3s}.app-container{margin-top:60px}#sidebar{background-color:#fff;position:fixed;z-index:4;top:0;left:0;width:100%}.hide-mobile{display:none}.hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center}}.animateBar1{animation:flipBar1 1s;animation-fill-mode:forwards}.animateBar2{animation:fadeBar2 1s;animation-fill-mode:forwards}.animateBar3{animation:flipBar3 1s;animation-fill-mode:forwards}@keyframes flipBar1{0%{transform:rotate(0)}to{transform:rotate(45deg) translate(4px,10px)}}@keyframes fadeBar2{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}@keyframes flipBar3{0%{transform:rotate(0)}to{transform:rotate(-45deg) translate(4px,-10px)}}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:var(--clr-grey-10);color:var(--clr-grey-1);line-height:1.5;font-size:.875rem}ul{list-style-type:none}a{text-decoration:none}h1,h2,h3,h4{letter-spacing:var(--spacing);text-transform:capitalize;line-height:1.25;margin-bottom:.75rem}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.25rem}h4{font-size:.875rem}p{margin-bottom:1.25rem;color:var(--clr-grey-5)}@media screen and (min-width: 800px){h1{font-size:4rem}h2{font-size:2.5rem}h3{font-size:1.75rem}h4,body{font-size:1rem}h1,h2,h3,h4{line-height:1}}.section{width:90vw;margin:0 auto;max-width:var(--max-width)}@media screen and (min-width: 992px){.section{width:95vw}}main{min-height:100vh}#sidebar .nav{position:fixed;width:20%;height:100vh;background:#ffffff;font-size:.65em;margin:0;padding:0 20px}.mobile-nav{display:none}.opened{display:block}.title{margin-top:10px;text-align:center}.underline{height:.25rem;width:5rem;background:var(--clr-primary-5);margin-left:auto;margin-right:auto;margin-bottom:10px}.app-container{position:relative;width:80%;float:right;height:100vh;padding:0 2rem;display:flex;flex-direction:column;align-items:center}@media only screen and (max-width: 820px){.app-container,.app-container .review{width:100%}}