html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{background:#f8f8ff;color:#212121;font-family:"Lato",sans-serif;font-optical-sizing:auto;font-size:16px;margin:0}h1,h2,h3,h4{line-height:1}h1{font-size:3rem}h2{font-size:2.5rem}h3{font-size:2.25rem}h4{font-size:1.5rem}p{line-height:1.5rem;margin:1rem 0 0}.container{margin:0 auto;padding-left:1.5rem;padding-right:1.5rem;width:100%}@media screen and (min-width: 768px){.container{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1100px){.container{padding-left:2.25rem;padding-right:2.25rem}}.font-light{font-weight:300}.btn{align-items:center;border:2px solid #212121;color:#212121;display:flex;font-weight:700;justify-content:center;letter-spacing:.1rem;line-height:1;min-width:160px;overflow:hidden;padding:.5rem;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;transition:background-color .4s ease,color .4s ease;width:100%}.btn::before{background:#212121;content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .4s ease;width:100%;z-index:0}.btn span{display:block;position:relative;z-index:1}.btn svg{position:relative;left:0;transition:left .4s ease;width:1.5rem}@media screen and (min-width: 768px){.btn{width:auto}}.btn:hover{color:#fff}.btn:hover::before{left:0}.btn:hover svg{left:.25rem}.header{position:relative}.header::after{animation-name:width100;animation-duration:1s;animation-delay:.4s;animation-fill-mode:forwards;background:#212121;bottom:0;content:"";height:3px;position:absolute;width:0}.header .container{display:flex;align-items:center;justify-content:space-between;flex-direction:column;padding-bottom:2rem;padding-top:1.5rem}@media screen and (min-width: 768px){.header .container{flex-direction:row}}.header h1,.header h2{margin:0}.header__titles{text-align:center}@media screen and (min-width: 768px){.header__titles{text-align:left}}.header__links{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.5rem;width:100%}@media screen and (min-width: 768px){.header__links{grid-template-columns:repeat(2, 1fr);margin:0;width:auto}}.intro .container{padding-top:2.5rem}.intro h3{margin:0}.intro p{line-height:2rem}@media screen and (min-width: 768px){.intro p{font-size:1.25rem;max-width:85%}}.work .container{min-height:600px;padding-bottom:2.5rem;padding-top:2.5rem}.work__card-container{display:flex;flex-wrap:nowrap;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}.work__card-container::-webkit-scrollbar{display:none}@media screen and (min-width: 768px){.work__card-container{display:grid;gap:1rem;grid-template-columns:1fr;width:100%}}@media screen and (min-width: 768px){.work__card-container{grid-template-columns:repeat(2, 1fr)}}@media screen and (min-width: 1100px){.work__card-container{grid-template-columns:repeat(4, 1fr)}}.work__card{border:2px solid #212121;flex:0 0 100%;padding:1.25rem 1.25rem 5.5rem;opacity:1;position:relative;scroll-snap-align:center;transition:opacity .6s ease-out,transform .6s ease-out;width:100%}@media screen and (min-width: 768px){.work__card{margin-right:0;opacity:0}.work__card.fade-in{opacity:1}}.work__card figure{background:#212121;border:2px solid #212121;margin:0 auto;height:200px;width:100%}.work__card figure img{display:block;height:100%;object-fit:cover;width:100%}.work__card h4{margin:1.5rem 0 0;padding-bottom:1rem;position:relative}.work__card h4::after{bottom:0;background:#212121;content:"";height:1px;left:0;position:absolute;width:20%}.work__card p{line-height:1.5rem}.work__card .btn{bottom:1.25rem;left:0;margin:auto;position:absolute;right:0;width:90%}.work__card-nav{display:flex;justify-content:center;gap:1rem;margin-top:1rem}@media screen and (min-width: 768px){.work__card-nav{display:none}}.work__card-nav button{background:rgba(0,0,0,0);border:0;color:#212121;padding:.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .4s ease}.work__card-nav button:disabled{opacity:.3;cursor:not-allowed}.work__card-nav .slide-btn.prev-slide{transform:rotate(180deg)}.footer{background:#212121;padding-bottom:5rem}@media screen and (min-width: 768px){.footer{margin-top:2.5rem;padding-bottom:10rem}}.footer hr{background:#212121;border:0;height:3px}@keyframes width100{0%{width:0px}100%{width:100%}}