@import url("https://fonts.googleapis.com/css2?family=Inter&family=Quicksand:wght@500&display=swap");
/*
|------------------------------------------
|  Variables
|------------------------------------------
*/
/*
|------------------------------------------
|  Body
|------------------------------------------
*/
.content { padding: 0 30px; }
@media screen and (min-width: 768px) { .content { padding: 0; width: 700px; margin: 0 auto; } }
@media screen and (min-width: 1100px) { .content { width: 900px; } }
@media screen and (min-width: 1500px) { .content { width: 1000px; } }
@media screen and (min-width: 1500px) { .content { width: 1300px; } }

/*
|------------------------------------------
|  Padding
|------------------------------------------
*/
.t-padding { margin-top: 50px; }
@media screen and (min-width: 768px) { .t-padding { margin-top: 80px; } }

.tb-padding { margin: 50px 0; }
@media screen and (min-width: 768px) { .tb-padding { margin: 80px 0; } }

.b-padding { margin-bottom: 50px; }
@media screen and (min-width: 768px) { .b-padding { margin-bottom: 80px; } }

/*
|------------------------------------------
|  Typography
|------------------------------------------
*/
body { line-height: 30px; overflow-x: hidden; }
@media screen and (min-width: 576px) { body { line-height: 40px; } }

h1 { font-family: "Quicksand", sans-serif; font-size: 30px; line-height: 50px; padding-bottom: 20px; }
@media screen and (min-width: 576px) { h1 { font-size: 40px; } }
@media screen and (min-width: 992px) { h1 { font-size: 50px; } }
@media screen and (min-width: 1500px) { h1 { font-size: 70px; line-height: 80px; } }

h2 { font-family: "Quicksand", sans-serif; font-size: 22px; letter-spacing: 0.2px; }
@media screen and (min-width: 576px) { h2 { font-size: 24px; } }
@media screen and (min-width: 992px) { h2 { font-size: 26px; } }
@media screen and (min-width: 1500px) { h2 { font-size: 30px; } }

h3 { font-family: "Inter", sans-serif; font-size: 16px; letter-spacing: 0.2px; }
@media screen and (min-width: 576px) { h3 { font-size: 18px; } }
@media screen and (min-width: 992px) { h3 { font-size: 20px; } }
@media screen and (min-width: 1500px) { h3 { font-size: 24px; } }

h4 { font-family: "Inter", sans-serif; font-size: 14px; letter-spacing: 0.2px; }
@media screen and (min-width: 576px) { h4 { font-size: 15px; } }
@media screen and (min-width: 992px) { h4 { font-size: 16px; } }

p { font-family: "Inter", sans-serif; font-size: 14px; color: #2c2c2c; margin-bottom: 20px; letter-spacing: 0.2px; }
@media screen and (min-width: 576px) { p { font-size: 15px; } }
@media screen and (min-width: 992px) { p { font-size: 16px; } }
@media screen and (min-width: 1500px) { p { font-size: 18px; } }

a { font-family: "Quicksand", sans-serif; text-decoration: none; color: #000000; font-size: 18px; }
@media screen and (min-width: 576px) { a { font-size: 20px; } }
@media screen and (min-width: 992px) { a { font-size: 22px; } }
@media screen and (min-width: 1500px) { a { font-size: 24px; } }

ol { font-family: "Inter", sans-serif; list-style-type: none; color: #2c2c2c; letter-spacing: 0.2px; }
@media screen and (min-width: 576px) { ol { font-size: 15px; } }
@media screen and (min-width: 992px) { ol { font-size: 16px; } }
@media screen and (min-width: 1500px) { ol { font-size: 18px; } }

li { padding-left: 15px; font-family: "Inter", sans-serif; color: #2c2c2c; margin-bottom: 5px; letter-spacing: 0.2px; }
@media screen and (min-width: 576px) { li { font-size: 15px; } }
@media screen and (min-width: 992px) { li { font-size: 16px; } }
@media screen and (min-width: 1500px) { li { font-size: 18px; } }

/*
|------------------------------------------
|  Utilities
|------------------------------------------
*/
.black { color: #000000; }

.pink { color: #F79292; }

.white { color: #ffff; }

.text-center { text-align: center; margin-bottom: 30px; }

.quote { font-size: 14px; border-left: 3px solid #888888; margin-top: 20px; padding-left: 20px; }
@media screen and (min-width: 576px) { .quote { font-size: 15px; } }
@media screen and (min-width: 992px) { .quote { font-size: 16px; } }

.nobull { list-style-type: none; margin: 0; padding: 0; }

.list-content { padding-left: 20px; }

.fa { color: #ffff; font-size: 16px; letter-spacing: 12px; }
@media screen and (min-width: 576px) { .fa { font-size: 18px; } }
@media screen and (min-width: 992px) { .fa { font-size: 22px; } }
@media screen and (min-width: 1500px) { .fa { font-size: 24px; } }

.bnr-sml { width: 100%; border-radius: 25px; }
@media screen and (min-width: 768px) { .bnr-sml { margin: 20px auto; } }

.btn { position: relative; display: inline-block; z-index: 0; margin: 0 auto; padding: 10px 30px; border-radius: 50px; border: 2px solid #F79292; font-family: "Quicksand", sans-serif; background-color: #ffff; color: #F79292; cursor: pointer; transition: all 0.2s ease; overflow: hidden; color: #F79292; background-color: #ffff; transition: all 0.2s; }
.btn:before { content: ""; position: absolute; top: -50px; left: -20px; right: 0; bottom: 0; height: 150px; background: #F79292; transform: scale(0); transform-origin: 0; transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease-out; border-radius: 50%; z-index: -1; }
@media screen and (min-width: 992px) { .btn:hover { color: #ffff; z-index: 0; border: 2px solid #F79292; }
  .btn:hover:before { transform: scale(2); width: 100%; background: #f79292; }
  .btn:hover svg { transform: translateX(0); } }

.grid { margin: 0 auto; }

.grid-item { text-align: center; width: 100%; margin-bottom: 25px; border-radius: 20px; }
.grid-item .main-img { width: 100%; border-radius: 20px; }
@media screen and (min-width: 576px) { .grid-item { margin-bottom: 40px; overflow: hidden; }
  .grid-item .caption { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; background-color: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; }
  .grid-item .caption h3 { font-family: "Quicksand", sans-serif; color: #f7929200; font-size: 30px; }
  .grid-item .caption p { color: #00000000; }
  .grid-item:hover .caption { background-color: rgba(255, 255, 255, 0.9); }
  .grid-item:hover .caption h3 { color: #000000; }
  .grid-item:hover .caption p { color: #000000; }
  .grid-item h3 { transform: translate(0px, 0px); transition: all 0.2s ease-in-out; }
  .grid-item p { transform: translate(0px, 0px); transition: all 0.2s ease-in-out; }
  .grid-item:hover h3 { transform: translate(0px, 40px); }
  .grid-item:hover p { transform: translate(0px, -40px); }
  .grid-item .main-img { transform: scale(1.1); transition: all 0.3s ease-in-out; }
  .grid-item:hover .main-img { transform: scale(1.2); } }
@media screen and (min-width: 768px) { .grid-item { margin-bottom: 70px; } }
@media screen and (min-width: 992px) { .grid-item { margin-bottom: 100px; } }
@media screen and (min-width: 1500px) { .grid-item { margin-bottom: 100px; }
  .grid-item:hover h3 { transform: translate(0px, 110px); }
  .grid-item:hover p { transform: translate(0px, -110px); }
  .grid-item .caption h3 { font-size: 50px; }
  .grid-item .caption p { font-size: 20px; } }

@media screen and (min-width: 768px) { .grid-item, .stamp { width: calc(50% - 50px); } }

@media screen and (min-width: 768px) { .stamp { position: absolute; height: 300px; right: 0; } }

.full-width { height: 100%; width: 100%; }

.brand-colors { height: 100vh; }

.values { font-family: "Quicksand", sans-serif; font-size: 35px; line-height: 40px; font-weight: 600; text-align: center; padding: 15px 0; }

.colour { height: 100px; width: 100px; border-radius: 50%; }
@media screen and (min-width: 576px) { .colour { height: 150px; width: 150px; } }
@media screen and (min-width: 768px) { .colour { height: 200px; width: 200px; } }
@media screen and (min-width: 1200px) { .colour { height: 200px; width: 200px; } }

.icon { border-radius: 15px; height: 90px; margin-bottom: 25px; }
@media screen and (min-width: 576px) { .icon { height: 125px; width: 125px; } }
@media screen and (min-width: 1500px) { .icon { height: 200px; width: 200px; } }

.space-evenly { display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; }

.tasks { background-color: #efefef; padding: 30px; border-radius: 30px; margin-bottom: 50px; }
.tasks h4 { margin-bottom: 20px; }
@media screen and (min-width: 576px) { .tasks { padding: 50px; } }

.methodology ol { background-color: #efefef; border-radius: 50px; display: flex; width: 100%; margin: 0 auto; justify-content: space-between; padding: 10px; color: #ffff; font-size: 10px; }
@media screen and (min-width: 400px) { .methodology ol { padding: 10px 15px; font-size: 14px; } }
@media screen and (min-width: 576px) { .methodology ol { padding: 20px 50px; font-size: 16px; } }

.gif { border: 10px solid #efefef; }
@media screen and (min-width: 992px) { .gif { border: 40px solid #efefef; } }

footer { display: flex; background-color: #F79292; height: 200px; text-align: center; color: #fff; display: flex; align-items: center; justify-content: center; bottom: 0; }
footer .fa { padding-bottom: 20px; }

footer a { color: #ffff; transition: all 0.2s ease-in-out; }
footer a:hover { color: #000000; }

.gn { position: absolute; top: 0; right: 0; width: 100%; height: 100vh; clip-path: circle(0px at calc(100% - 44px) 41px); transition: all 0.5s ease-in-out; background: #F79292; z-index: 0; display: flex; align-items: center; justify-content: center; }
@media screen and (min-width: 576px) { .gn { clip-path: circle(0px at calc(100% - 85px) 85px); } }

.gn.is-active { clip-path: circle(75%); transition: all 0.5s ease-in-out; }

.gn li { margin: 20px 0; }

.gn a { padding: 12px 25px; z-index: 4; color: #ffff; font-family: "Quicksand", sans-serif; transition: all 0.2s ease-in-out; }
.gn a:hover { color: #000000; }

.gn-items { text-align: center; }

.gn-trigger { position: relative; width: 60px; height: 60px; border: none; outline: 0; background: #F79292; border-radius: 100px; }
@media screen and (min-width: 576px) { .gn-trigger { width: 70px; height: 70px; } }

.burger { position: absolute; background: #ffff; width: 35px; height: 5px; right: 12px; top: 47%; border-radius: 5px; z-index: 2; }
@media screen and (min-width: 576px) { .burger { width: 40px; right: 14px; } }

.burger:before, .burger:after { content: ''; display: block; position: absolute; background: #ffff; border-radius: 5px; width: 35px; height: 5px; right: 0px; }
@media screen and (min-width: 576px) { .burger:before, .burger:after { width: 40px; } }

.burger:before { top: 12px; }

.burger:after { bottom: 12px; }

.burger, burger:before, burger:after { transition-property: all; transition-duration: 500ms; transform-style: ease; }

.gn-trigger.is-active .burger:before { transform: rotate(45deg); top: -1.4px; }

.gn-trigger.is-active .burger:after { transform: rotate(-45deg); top: 0.1px; }

.gn-trigger.is-active .burger { background: #F79292; }

.header { position: fixed; top: 0; left: 0; width: 100%; padding: 15px 20px; display: flex; align-items: center; will-change: right; transition: right .3s ease; z-index: 9; }
@media screen and (min-width: 576px) { .header { padding: 50px 50px; } }

.header img { height: 55px; }

.bar { width: 100%; justify-content: space-between; align-content: center; }

.display-flex { display: flex; }

.main-section { padding-top: 100px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.main-section img { width: 200px; margin: 0 auto; }
@media screen and (min-width: 565px) { .main-section { text-align: left; height: 90vh; flex-direction: row; align-items: center; justify-content: space-between; }
  .main-section img { margin: 0; } }
@media screen and (min-width: 1200px) { .main-section img { width: 400px; margin: 0; } }

.project-header { height: 85vh; display: flex; align-items: center; }

.flex-col { display: flex; justify-content: center; flex-direction: column; flex-wrap: wrap; }

@media screen and (min-width: 768px) { .col-2 { width: 47%; } }
.col-2 img { width: 100%; border-radius: 20px; }
@media screen and (min-width: 576px) { .col-2 img { margin: 20px 0; } }
@media screen and (min-width: 768px) { .col-2 img { display: block; margin: 0 auto; width: 100%; border-radius: 20px; } }
.col-2 .col-content { margin: 40px 0; }

@media screen and (min-width: 768px) { .reverse { display: flex; flex-direction: column; }
  .reverse img { order: 1; } }

@media screen and (min-width: 768px) { .mockups .left .p { padding-top: 20px; } }

@media screen and (min-width: 768px) { .header-col { width: 30%; } }

@media screen and (min-width: 768px) { .content-col { width: 60%; } }

@media screen and (min-width: 768px) { .flex-between { display: flex; justify-content: space-between; } }

.slick img { width: 100%; }

.camera .project-header { background: url(../img/camera/camera-bnr.png); background-repeat: no-repeat; background-position: center; background-size: cover; }
.camera .quote { color: #98B75C; }
.camera .methodology ol { background-color: #98B75C; }

.fable .project-header { background: url(../img/fable/fable-bnr.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }
.fable .quote { color: #5a3527; }

.home .chev { animation-duration: 2s; animation-iteration-count: infinite; transform-origin: bottom; }
@media screen and (min-width: 1500px) { .home .chev { font-size: 50px; } }

.bounce { animation: bounce 2s ease infinite; }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); } }
.mec .project-header { background: url(../img/mec/mec-banner.png); background-repeat: no-repeat; background-position: center; background-size: cover; }
.mec .quote { color: #275D32; }

.milki-colors .green { background: #98B75C; }
.milki-colors .pink { background: #f79292; }
.milki-colors .blue { background: #283F55; }

.milki .project-header { background: url(../img/milki/milki-bnr.png); background-repeat: no-repeat; background-position: center; background-size: cover; }
.milki .quote { color: #98B75C; }
.milki .methodology ol { background-color: #98B75C; }

.fishing .project-header { background: url(../img/rng/rng-bnr.png); background-repeat: no-repeat; background-position: center; background-size: cover; }

/*# sourceMappingURL=main.css.map */