@charset "UTF-8";
/* CSS Document */



/*---------------------------------- Core ------------------------------*/


:root {
--cubic: all 0.44s cubic-bezier(0,.82,.22,1);
--cubique: all 0.66s cubic-bezier(.66,0,.44,1);
--thispeach: #ffad89;
--thismint: #1ec674;
--thisnight: #5f5fff;
--closed: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
--closedleft: polygon(0 100%, 0 100%, 0 0, 0 0);
--open: polygon(0 100%, 100% 100%, 100% 0, 0 0);
--manrope: "Manrope", sans-serif;
--shadowtop: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,.55));
--shadowtop: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}



/*---------------------- Global Colours  ------------------------------*/


.bgblack { background-color: #111111; }
.bgwhite { background-color: white; }
.bgnight { background-color: var(--thisnight); }
.bgmint { background-color: var(--thismint); }
.bgpeach { background-color: var(--thispeach); }

.black { color: black; }
.white { color: white; }
.night { color: var(--thisnight); }
.mint { color: var(--thismint); }
.peach { color: var(--thispeach); }



.bgblack .button a { border: white solid 2px; }
.bgblack .button a:hover { border: black solid 2px; background-color: black; }

.bgwhite .button a { border: black solid 2px; }
.bgwhite .button a:hover { border: white solid 2px; background-color: white; }

.bgnight .button a { border: white solid 2px; }
.bgnight .button a:hover { border: black solid 2px; background-color: black; }


.bgnight .button a { border: white solid 2px; }
.bgnight .button a:hover { border: black solid 2px; background-color: black; }


.bgpeach .collapsible {  border-bottom: 3px solid var(--thismint); }
.bgnight .collapsible {  border-bottom: 3px solid var(--thispeach); }
.bgwhite .collapsible {  border-bottom: 3px solid var(--thisnight); }
.bgmint .collapsible {  border-bottom: 3px solid white }
.bgblack .collapsible {  border-bottom: 3px solid white }

.bgpeach .collapsible .header h5 .number { color: var(--thismint); }
.bgnight .collapsible .header h5 .number { color: var(--thispeach); }
.bgwhite .collapsible .header h5 .number { color: var(--thisnight); }
.bgmint .collapsible .header h5 .number { color: var(--thispeach); }
.bgblack .collapsible .header h5 .number { color: var(--thispeach); }



.bgblack .services .core-services .line { background-color: white; }
.bgnight .services .core-services .line { background-color: white; }


.peach .button a { border: 2px solid var(--thispeach); }
.white .button a { border: 2px solid white; }
.mint .button a { border: 2px solid var(--thismint); }

.night .button a { border: 2px solid var(--thisnight); }
.night .button a:hover { color:black; }







/*-------------------------- Master ----------------------------------*/


html {
margin:0px;
scroll-behavior: smooth;
}



body {
position: relative;
margin:0px;
color:white;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 1.0em;
}


button {
display: grid;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-size: 1.2em;
color: white;
margin-right: 25px;
text-decoration: none;
background: transparent;
border: white solid 2px;
border-radius: 25px;
padding: 10px 20px;
grid-template-columns: auto auto;
gap: 10px;
cursor: pointer;
align-items: center;
transition: var(--cubic);
}



button:hover {
position: relative;
border: black solid 2px;
background-color: black;
filter: invert(1);
transform: translateY(-5px);
}






p {
font-family: "Manrope", sans-serif;
font-weight: 500;
font-size: 1.25em;
line-height: 1.5em;
margin:0px;
margin-bottom:20px;
}


a {
position: relative;
color:inherit;	
}


p strong {
font-family: "Manrope", sans-serif;
font-weight: 800;	
}


h1 {
font-family: acumin-variable, sans-serif;
font-variation-settings: "slnt" -12, "wdth" 115, "wght" 900;
font-size: 7.2em;
line-height: 0.85em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}

h2 {
/* for welcome intro */
font-family: acumin-variable, sans-serif;
font-variation-settings: "slnt" -12, "wdth" 120, "wght" 700;
font-size: 3.6em;
line-height: 0.85em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}

h2 strong {
font-variation-settings: "slnt" -12, "wdth" 120, "wght" 900;
}


h2 header {
/* for work - case study overview - NOTE: 3.6em x 1.4em ----- */
font-family: acumin-variable, sans-serif;
font-variation-settings: "slnt" -12, "wdth" 120, "wght" 800;
font-size: 1.4em;
line-height: 0.85em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}





h3 {
font-family: acumin-variable, sans-serif;
font-variation-settings: "slnt" -12, "wdth" 115, "wght" 900;
font-size: 3.2em;
line-height: 0.85em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}



h4 {
font-family: acumin-variable, sans-serif;
font-variation-settings: "slnt" -6, "wdth" 115, "wght" 900;
font-size: 2.2em;
line-height: 1.1em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}



h5 {
/* for horizontals */
font-family: acumin-variable, sans-serif;
font-variation-settings: 'wght' 700, 'wdth' 100, 'slnt' -6;
font-size: 2.2em;
line-height: 1.0em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}





h6 {
/* for work overview */
font-family: acumin-variable, sans-serif;
font-variation-settings: 'wght' 500, 'wdth' 600, 'slnt' -0;
font-size: 2.0em;
line-height: 1.2em;
margin: 0px;
margin-bottom: 25px;
}




h7 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 1.4em;
line-height: 1.0em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}





footer {
position: fixed;
bottom: 0px;
width: 100vw;
height: 640px;
display: flex;
align-items: center;
justify-content: center;
background-color: #000000; 
flex-direction: column;
transition: var(--cubic);
z-index: 0;
}



main {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
transition: var(--cubic);
margin-bottom: 640px;
z-index: 1;
}


nav {
position: fixed;
display: flex;
flex-direction: row;
left:50px;
top:50px;
z-index: 111;
transition: var(--cubic);
}

nav picture {
position: relative;
width: 80px;
height: 80px;
}

nav picture img {
width: 80px;
height: auto;
}


section {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: calc(100vh - 100px);
padding:50px 0px;
overflow: hidden;
align-items: center;
justify-content: center;
}


video {
width: 100%;
height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}


blockquote {
padding: 33px;
margin: 0px;
border: 2px solid;
margin-bottom: 25px;
}


blockquote p {
font-family: "Manrope", sans-serif;
margin: 0px;
margin-bottom: 0px;
}


ol {
font-family: "Manrope", sans-serif;
font-weight: 500;
font-size: 1.25em;
padding-left:0px;
margin:0px;
margin-bottom: 25px;
}


ul {
list-style-type: none;
font-family: "Manrope", sans-serif;
font-weight: 500;
font-size: 1.25em;
padding-left:0px;
margin:0px;
margin-bottom: 25px;
}

ul ul {
list-style-type: none;
font-size: 1.0em;
padding-left:25px;
margin:0px;
}

ul ul ul {
list-style-type: none;
font-size: 1.0em;
padding-left:50px;
margin:0px;
}



ul li {
position: relative;
margin-bottom: 5px;
}


ul li::before {
content: '+';
position: relative;
margin-left: -15px;
margin-right: 5px;
}

ul li {
position: relative;
margin-bottom: 5px;
}


ul li ul li::before {
content: '-';
position: relative;
margin-left: -15px;
margin-right: 5px;
}

ul li ul li ul li::before {
content: '●';
position: relative;
margin-left: -15px;
margin-right: 5px;
}


/*------------------------ Quick Navigation -----------------------*/


.navq  {
position: fixed;
display: flex;
right:50px;
top:50px;	
align-items: center;
z-index: 111;
}

.navq ul {
position: relative;
display: flex;
align-items: center;
list-style: none;
margin-bottom: 0px;
margin-right: 0px;
}

.navq ul li {
position: relative;
display: flex;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
color: white;
margin-right: 25px;
}

.navq ul li::before {
content: '';
position: relative;
}



.navq ul li a {
position: relative;
color:inherit;
text-decoration: none;
background: transparent;
border:white solid 2px;
border-radius: 25px;
padding: 10px 20px;
transition: var(--cubic);
}

.navq ul li a:hover {
position: relative;
border:black solid 2px;
background-color: black;
filter: invert(1);
transform: translateY(-5px)
}

.navq ul li:last-of-type a:hover {
position: relative;
border:transparent solid 2px;
color:black;
background-color: var(--thispeach);
filter: invert(0);
transform: translateY(-5px)
}


.overlay {
position: fixed;
display: flex;
width:100vw;
height: 100vh;
z-index: 2;
align-items: flex-end;
justify-content: center;
transition: var(--cubic);
clip-path: var(--closed);
}

.overlay .navigation {
position: relative;
display: flex;
width: calc(100% - 100px);
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
padding-bottom: 50px;
transition: var(--cubic);
z-index: 2;
}





.overlay .bgcolor {
position: fixed;
width:100vw;
height: 100vh;	
clip-path: var(--closed);
transition: var(--cubic);
z-index: 1;
}


.overlay .bgcolor:nth-of-type(1) { background-color: var(--thispeach); transition-delay: 0.0s;}
.overlay .bgcolor:nth-of-type(2) { background-color: var(--thismint);  transition-delay: 0.2s;}
.overlay .bgcolor:nth-of-type(3) { background-color: var(--thisnight); transition-delay: 0.4s;}
.overlay .bgcolor:nth-of-type(4) { background-color: black; transition-delay: 0.6s }


.overlay.open {
position: fixed;
clip-path: var(--open);
}

.overlay.open .bgcolor:nth-of-type(1),
.overlay.open .bgcolor:nth-of-type(2),
.overlay.open .bgcolor:nth-of-type(3),
.overlay.open .bgcolor:nth-of-type(4) {
position: fixed;
clip-path: var(--open);
}

.overlay.open .navigation {
clip-path: var(--open);
transition-delay: 0.8s;
}



.overlay .navigation ul {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
list-style: none;
margin:0px;
padding: 0px;
}


.overlay .navigation ul li  {
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: 0px;
}


.overlay .navigation ul li a {
font-family: acumin-variable, sans-serif;
font-variation-settings: "slnt" -12, "wdth" 115, "wght" 900;
font-size: 6.0em;
line-height:0.7em;
color:white;
margin-right:20px;
text-transform: uppercase;
text-decoration: none;
margin-bottom: 15px;
transition: var(--cubic);
}

.overlay .navigation ul li a:hover {
text-decoration: none;
color: var(--thispeach);
}


.overlay .navigation ul li ul {
position: relative;
display: grid;
grid-column-gap: 20px;
justify-items: start;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
clip-path: var(--closedleft);
transition: var(--cubic);
}


.overlay .navigation ul li:hover ul {
position: relative;
clip-path: var(--open);
}



.overlay .navigation ul li ul li {
position: relative;
}


.overlay .navigation ul li ul li:before {
content: '';
position: relative;
margin-left: 0px;
margin-right: 0px;
}

.overlay .navigation ul li ul li a::after {
content: '';
position: absolute;
bottom:0px;
left:0px;
width: 0%;
height: 1px;
transition: var(--cubic);
background-color: var(--thispeach);
}

.overlay .navigation ul li ul li a:hover::after {
width: 100%;
height: 1px;

}


.overlay .navigation ul li ul li a {
font-family: var(--manrope);
font-variation-settings: normal;
font-weight: 400;
font-size: 1.2em;
line-height:1.25em;
color:white;
margin-right: 0px;
text-transform: none;
margin-bottom: 0px;
}





.nav-icon {
position: relative;
width:20px;
height: 20px;
border:transparent solid 2px;
border-radius: 50%;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
transition: var(--cubic);
}

.nav-icon:hover {
border:white solid 2px;
border-radius: 50%;
cursor: pointer;
}


.nav-icon .line {
width: 45px;	
height: 2px;
background-color: white;
transition: var(--cubic);
}

.nav-icon:hover .line {
width: 35px;	
height: 2px;
}

.nav-icon.active {
border:transparent solid 2px;
cursor: pointer;
filter: invert(1);
background-color: black;
}

.nav-icon.active .line {
width: 40px;	
height: 2px;
}


.nav-icon.active .line:nth-of-type(1) {
transform: rotate(45deg) translate(1px, -8px);
transform-origin: center left;
}

.nav-icon.active .line:nth-of-type(2) {
width: 0px;	
height: 2px;
}

.nav-icon.active .line:nth-of-type(3) {
transform: rotate(-45deg) translate(1px, 8px);
transform-origin: center left;
}






/*------------------------------- Main ------------------------------------*/



.anchor {
position: absolute;
left: 0px;
top: 0px;
}






.button {
position: relative;
display: flex;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-size: 1.2em;
}

.button a {
position: relative;
color: inherit;
text-decoration: none;
background: transparent;
border: black solid 2px;
border-radius: 25px;
padding: 10px 20px;
transition: var(--cubic);
}

.button a:hover {
position: relative;
filter: invert(1);
transform: translateY(-5px);
}








.bento {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 50px;
transform: translateY(50px);
transition: var(--cubic);
}


.bento:hover {
position: relative;
transform: translateY(0px);
}





.bento .project {
position: relative;
width: auto;
height: 50vh;
margin:0px;
overflow: hidden;
}


.bento a:nth-of-type(2) .project  {
/* just for gass */
position: absolute;
height: 60vh;
bottom: 0px;
width: 100%;
}



.bento a {
position: relative;
cursor: none;
}



.bento .project .shadow {
position: absolute;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.66));
z-index: 1;
}

.bento .project .pdc {
position: absolute;
display: flex;
top: 0;
left: 0;
width: calc(100% - 50px);
height: calc(100% - 50px);
padding: 25px;
align-items: stretch;
justify-content: space-between;
flex-direction: column;
z-index: 2;
color:white;
}


.bento .project .pdc .deets {
position: relative;
transform: translateY(50px);
transition: var(--cubic);
}


.bento .project:hover .pdc .deets {
position: relative;
transform: translateY(0px);
}




.bento .project .pdc h5 {
/* slightly smaller */
font-size: 1.4em;
line-height: 1.1em;
transition: var(--cubic);
opacity: 0;
}

.bento .project:hover .pdc h5 {
font-size: 1.4em;
line-height: 1.1em;
opacity: 1;
}




.bento .project .pdc p {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 10px;
font-size: 1.2em;
line-height: 1.0em;
transition: var(--cubic);
opacity: 0;
}

.bento .project:hover .pdc p {
position: relative;
display: grid;
opacity: 1;
}



.bento .project img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--cubic);
}

.bento .project:hover img {
position: relative;
transform: scale(1.0555);
}



.bento .project video {
position: relative;
width: 100%;
height: 100%;
left: auto;
top: auto;
transform: none;
object-fit: cover;
transition: var(--cubic);
}

.bento .project:hover video {
position: relative;
transform: scale(1.1111);
}







.bento .project .pdc .logo img {
position: relative;
filter: invert(1);
width: clamp(50px, 100px, 125px);
height: auto;
margin-bottom: 15px;
}

.bento .project:hover .pdc .logo img {
position: relative;
filter: invert(1);
transform: scale(1);

}



/* column and row spans  */
.bento .cs1 { }
.bento .cs2 { grid-column: span 2; }
.bento .cs3 { grid-column: span 3; }

.bento .rs1 {  }
.bento .rs2 { grid-row: span 2; }
.bento .rs2 .project { height: 100vh; }













.centerised {
justify-content: center;
margin: 25px 0px;
}








.contacts {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
}

.contacts .handles p {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 5px;
}

.contacts .handles p i {
position: relative;
font-size: 1.5em;
}

.contacts .handles p a {
position: relative;
text-decoration: none;
}






.comments {
position: relative;
text-align: center;
}




.carousel {
display: flex;
flex-wrap: nowrap;
height: 100vh;
}


.carousel .card .mastercard {
position: relative;
display: grid;
min-width: fit-content; /* fit content makes the font awesome icon clamo */
}



.carousel .mastercard .details {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: flex-end;	
}


.carousel .mastercard .arrow {
position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.carousel .mastercard .arrow i {
position: relative;
font-size: clamp(6vw, 8vw, 15vw);
font-weight: 100;
}





.carousel .card {
position: relative;
display: grid;
min-width: clamp(31vw, 44vw, 55vw);
padding: 50px;
overflow: hidden;
color: white;
}


.carousel .card:first-of-type {
position: relative;
color:inherit;
}


.carousel .card:last-of-type {
position: relative;
min-width: 50vw;
padding: 50px;
}


.carousel .card .img {
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
}

.carousel .card .img img {
height: 100%;
width: 100%;
transform: scale(1.2) translateY(-0px);
object-fit: cover;
object-position: top center;
transition: var(--cubic);
}

.carousel .card:hover .img img {
height: 100%;
width: 100%;
transform: scale(1.2) translateY(-10px);
}



.carousel .card .card-details {
position: relative;
display: flex;
z-index: 2;
flex-direction: column;
justify-content: flex-end;
transform: translateY(50px);
transition: var(--cubic);
}

.carousel .card:hover .card-details {
position: relative;
transform: translateY(0px);
}


.carousel .card .card-details .cta {
position: relative;
filter: opacity(0);
transition: var(--cubic);
}


.carousel .card:hover .card-details .cta {
position: relative;
filter: opacity(1);
}



.carousel .card .card-details .services {
position: relative;
display: flex;
margin-bottom: 15px;
}


.carousel .card .card-details .services p {
position: relative;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-size: 0.85em;
font-weight: 500;
color: lightgrey;
text-decoration: none;
background: transparent;
border: lightgrey solid 2px;
border-radius: 25px;
padding: 5px 10px;
margin-right: 10px;
margin-bottom: 0px;
}




.carousel .card .card-details .logo img {
position: relative;
filter: invert(1);
width: calc(150px);
height: auto;
margin-bottom: 15px;
}













.counters {
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: row;
padding: 50px 0px;
}


.counters .counter {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0px 50px;
}


.counters .counter h3 {
font-size: 7.2em;
line-height: 0.85em;
margin-bottom: 10px;
}

.counters .counter p {
font-size: 1.25em;
line-height: 1.25em;
margin-bottom: 0px;
}







.cta p {
position: relative;
font-weight: 800;
margin-bottom: 0px;
}

.cta p a {
position: relative;
text-decoration: none;
color:inherit;
}

.cta p a::after {
position: absolute;
content: '';
bottom: -5px;
left: 0px;
width: 0%;
height: 2px;
transition: var(--cubic);
background-color: white;
}	

.cta p a:hover::after {
width: 100%;
height: 2px;
}







.collapsibles {
/* minmax(240px, 400px) */
position: relative;
grid-template-columns: 1fr;	
}

.collapsibles .main {
position: relative;
margin-top: -25px;
}

.collapsibles .collapsible {
position: relative;
display: flex;
flex-direction: column;
}




.collapsibles .collapsible .header {
position: relative;
display: flex;
padding: 25px 0 0 0px;	
justify-content: space-between;
align-items: center;	
}


.collapsibles .collapsible .header:hover {
display: flex;
cursor: pointer;
transition: var(--cubic);
}

.collapsibles .collapsible .header i {
font-size: 2.8em;
font-weight: 100;
margin-bottom: 25px;
transition: var(--cubic);
}


.collapsibles .collapsible .header h5 .number {
font-family: acumin-variable, sans-serif;
font-variation-settings: 'wght' 200, 'wdth' 200, 'slnt' -6;
margin-right: 10px;
}

.collapsibles .collapsible.active .header i {
font-size: 2.8em;
font-weight: 100;
transform: rotate(-135deg);
}

.collapsibles .collapsible .header:hover i {
font-size: 2.8em;
font-weight: 100;
transform: rotate(45deg);
}

.collapsibles .collapsible .header::after {
content: '';
position: absolute;
background-color: white;
width: 0%;
height: 3px;
left:0px;
bottom:-3px;
z-index: 1;
transition: var(--cubic);
}


.collapsibles .collapsible .header:hover::after {
position: absolute;
width: 100%;
height: 3px;
}

.collapsibles .collapsible.active .header::after {
position: absolute;
width: 100%;
height: 3px;
}




.collapsibles .collapsible .expander {
position: relative;
padding: 25px 0 0 0px;
display: none;
margin-bottom: 50px;
}

.collapsibles .collapsible.active .expander {
position: relative;
display: block;
}














.cursordx {
height: 111px;
width: 111px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--thispeach);
pointer-events: none;
position: fixed;
top: 0;
left: 0; 
transform: translate(-50%, -50%) scale(0.001);
z-index: 100;
}


.cursordx::after {
content: '\f07e';
font-family: 'Font Awesome 7 Pro';
font-weight: 100;
-webkit-font-smoothing: antialiased;
position: relative;
color: var(--thisnight);
font-size: 2.2em;
z-index: 1;
}

.cursordy {
height: 111px;
width: 111px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--thisnight);
pointer-events: none;
position: fixed;
top: 0;
left: 0; 
transform: translate(-50%, -50%) scale(0.001);
z-index: 100;
}


.cursordy::after {
content: '\e09f';
font-family: 'Font Awesome 7 Pro';
font-weight: 100;
-webkit-font-smoothing: antialiased;
position: relative;
color: var(--thispeach);
font-size: 2.2em;
z-index: 1;
}






.content {
/* NOTE  width: calc(100% - 300px); 
this makes sure the tfg logo doesn't go over the copy */
position: relative;
display: flex;
width: calc(100% - 300px); 
padding: 50px 0px;
max-width: 1200px;
flex-direction: column;
z-index: 1;
}


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


.content.wider {
position: relative;
display: flex;
width: calc(100% - 100px); 
padding: 50px 0px;
max-width: 1610px;
flex-direction: column;
z-index: 1;
}



.content.max {
position: relative;
display: flex;
justify-content: center;
width: calc(100% - 300px); 
height: 100vh;
padding: 50px 0px;
max-width: initial;
flex-direction: column;
}



.content.xwide {
position: relative;
display: flex;
width: calc(100% - 0px);
padding: 50px 0px;
max-width: initial;
flex-direction: column;
}

.content.widestrict {
position: relative;
display: flex;
width: calc(100% - 0px);
height: 100%;
max-width: inherit;
padding: 0px;
flex-direction: column;
}

.content.xwide.nobm {
position: relative;
display: flex;
width: calc(100% - 0px);
padding: 0px 0px;
padding-top: 50px;
max-width: initial;
flex-direction: column;
}

.content.nobm {
position: relative;
display: flex;
padding: 0px 0px;
padding-top: 50px;
}

.content.notm {
position: relative;
display: flex;
padding: 0px 0px;
padding-bottom: 50px;
}


.content.nb {
position: relative;
display: flex;
padding: 0px 0px;
padding-top: 0px;
}


.content.instagram {
position: relative;
display: flex;
max-width: inherit;
width: calc(100% - 0px);
padding: 0px 0px;
}

.content.nopadding {
position: relative;
display: flex;
padding: 0px 0px;
}







.flexible {
position: relative;
padding-top: 50px!important;
}


.full-bleed {
position: relative;
display: flex;
overflow: hidden;
min-height: 100vh;
flex-direction: column;
}


.full-bleed-bg {
position: absolute;
width: 100vw;
z-index: -1;
min-height: 100vh;
object-position: center center;
}


.full-bleed-bg img {
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: top;
transform: scale(1.22222);
}






.full-bleed.duo {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: auto;
}

.full-bleed.duo .case {
overflow: hidden;
aspect-ratio: 5 / 4;	
}

.full-bleed.duo .full-bleed-bg { 
position: relative; 
width: 100%;      
overflow: hidden; 
}

.full-bleed.duo .full-bleed-bg img { 
width: 100%; 
height: auto; 
}





.full-bleed.trio {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;	
min-height: auto;
}

.full-bleed.trio .case {
overflow: hidden;
aspect-ratio: 5 / 6;	
}

.full-bleed.trio .full-bleed-bg { 
position: relative; 
width: auto; 
min-height: auto; 
}

.full-bleed.trio .full-bleed-bg img { 
width: 100%; 
height: auto; 
}











.google {
position: relative;
padding-bottom: 50px;

}

.google .map {
position: relative;
width: 100%;
height: 720px;
margin: 0;
}

.google .map img {
/* Fixes potential theme css conflict. */
max-width: inherit !important;
}
















.grid {
display: grid;
position: relative;
margin-bottom: 50px;
gap: 50px;
}

.grid.two {
grid-template-columns: 1fr 1fr;
grid-column-gap: 50px;
margin-bottom: 0px;
}

.grid.four {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 30px;
margin-bottom: 0px;
}

.grid.grid-press.four {
  justify-items: center;
}
  

.grid.four .comments {
grid-column: 1 / 4 span;
}

.grid .press {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
gap: 30px;
align-items: start;
justify-items: start;
}

.grid .press img {
width: 100%;
height: auto;
}









.hero {
position: relative;
width: 100%;
height: 100vh;
object-fit: cover;
overflow: hidden;
display: flex;
}

.hero.video video {
width: 100%;
height: 100%;
filter: brightness(0.77);
object-fit: cover;
}











.hero-work {
display: grid;
position: relative;
grid-template-columns: 1fr 5fr;
gap: 50px;
}


.hero-work .logo {
position: relative;
width: 125px;
height: 125px;
display: flex;
align-items: center;
justify-content: center;
}


.hero-work .logo img {
width: 100%;
height: auto;
object-fit: contain;
}

.hero-work .details .services {
position: relative;
display: flex;
margin-bottom: 15px;
}

.hero-work .details .services p {
position: relative;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-size: 0.85em;
font-weight: 500;
color: inherit;
text-decoration: none;
background: transparent;
grid-template-columns: auto;
border: black solid 2px;
border-radius: 25px;
padding: 5px 10px;
margin-right: 10px;
margin-bottom: 15px;
opacity: 1;
}




























.maxheight {
min-height: auto;
height: 100vh;
}

.maino {
position: relative;
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr;
height: 100%;
}

.maino .details {
position: relative;
display: flex;
margin:50px;
flex-direction: column;
}


.maino .image {
position: relative;
display: flex;	
height: 100%;
overflow: hidden;
}

.maino .image img {
width: 100%;
height: 100%;
object-fit: cover;
}





.mnv {
position: relative;
display: grid;
align-items: center;
align-items: stretch;
grid-template-columns: 1fr 1fr;
gap:50px;
height: 100%;
}

.mnv .details {
position: relative;
display: flex;
margin:0px;
flex-direction: column;
}


.mnv .video {
position: relative;
display: flex;	
width: 100%;
overflow: hidden;
}

.mnv .video video {
width: 100%;
height: 100%;
object-fit: cover;
}







.mmt {
/* marquee for iphones and tablets */
font-family: acumin-variable, sans-serif;
font-variation-settings: "slnt" -12, "wdth" 115, "wght" 900;
margin-right: 44px;
font-size: 9.0em;
line-height: 0.77em;
position: absolute;
left: 0px;
bottom: 0px;
display: none;
}


.marquee {
position: absolute;
display: flex;
flex-flow: row nowrap;
align-items: center;
overflow: hidden;
z-index: 1;
bottom: 0;
left: 0;
}


.marquee span {
font-family: acumin-variable, sans-serif;
font-variation-settings: "slnt" -12, "wdth" 115, "wght" 900;
margin-right: 44px;
font-size: 9.0em;
line-height: 0.77em;
}

.marquee span {
white-space: nowrap;
animation: marquee 33s ease-in-out infinite;
max-width: none;
}

@keyframes marquee {
0% { transform: translate(0, 0); }
50% { transform: translate(-100%, 0); }
100% { transform: translate(0, 0); }
}






.marqcase {
width: 100%;
overflow: hidden;
}


.marqcase .inner {
height: 100%;
width: 100%;
}

.marqcase .qqq {
gsap: "class for gsap only";
width: fit-content;
}


.marqcase .marq {
height: 100%;
width: fit-content;
align-items: center;
display: flex;
position: relative;
will-change: transform;
}


.marqcase .marq a { 
cursor: none;	
color:inherit; 
}








.marqcase .marq .project {
position: relative;
width: auto;
height: 100%;
aspect-ratio: 4 / 5;
margin:0px;
margin-right: 50px;
overflow: hidden;
}


.marqcase .marq a:last-of-type .project {
position: relative;
width: auto;
margin-right: 0px;
}



.marqcase .marq .project .shadow {
position: absolute;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
z-index: 1;
}

.marqcase .marq .project .pdc {
position: absolute;
display: flex;
top: 0;
left: 0;
width: calc(100% - 50px);
height: calc(100% - 50px);
padding: 25px;
align-items: stretch;
justify-content: flex-end;
flex-direction: column;
transform: translateY(25px);
transition: var(--cubic);
z-index: 2;
}

.marqcase .marq .project:hover .pdc {
display: flex;
top: 0;
left: 0;
transform: translateY(0px);
}



.marqcase .marq .project .pdc .services {
position: relative;
display: flex;
margin-bottom: 15px;
}


.marqcase .marq .project .pdc .services p {
position: relative;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-size: 0.85em;
font-weight: 500;
color: lightgrey;
text-decoration: none;
background: transparent;
grid-template-columns: auto;
border: lightgrey solid 2px;
border-radius: 25px;
padding: 5px 10px;
margin-right: 10px;
margin-bottom: 15px;
opacity: 1;
}






.marqcase .marq .project .pdc p {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 10px;
font-size: 1.2em;
line-height: 1.0em;
transition: var(--cubic);
opacity: 0;
}

.marqcase .marq  .project:hover .pdc p {
position: relative;
display: grid;
opacity: 1;
}


.marqcase .marq .project img {
position: relative;
width: 500px;
height: 100%;
object-fit: cover;
}


.marqcase .marq .project.recent-project img {
position: relative;
width: 600px;
height: 100%;
object-fit: cover;
}


.marqcase .marq .project video {
position: relative;
width: 500px;
height: 100%;
object-fit: cover;
}


.marqcase .marq .project.recent-project video {
position: relative;
width: 600px;
height: auto;
}


.marqcase .marq .project .pdc .logo {
position: relative;
width: 105px;
height: 75px;
margin-bottom: 15px;
}



.marqcase .marq .project .pdc .logo img {
width: 105px;
height: 75px;
object-fit: contain;
filter: invert(1);
}





.marqcase .marq .shadow {
position: absolute;
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.66));
transition: var(--cubic);
z-index: 1;
}

.marqcase .marq .shadow:hover  {
position: absolute;
display: flex;
background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.44));
}


.marqcase .marq .staff {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 480px;
aspect-ratio: 5 / 7;
margin:0px;
margin-right: 50px;
overflow: hidden;
}



.marqcase .marq .staff img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transform: scale(1.3);
}



.marqcase .marq .staff .details {
position: absolute;
display: flex;
flex-direction: column;
padding:25px;
width: calc(100% - 50px);
height: calc(100% - 50px);
align-items: flex-start;
justify-content: flex-end;
z-index: 1;
transform: translateY(70px);
transition: var(--cubic);
}

.marqcase .marq .staff .details:hover {
position: absolute;
z-index: 1;
transform: translateY(0px);
}


.marqcase .marq .staff .details a {
position: relative;
margin-bottom: 20px;
}

.marqcase .marq .staff .details h3 {
position: relative;
margin-bottom: 10px;
}

.marqcase .marq .staff .details p {
position: relative;
margin-bottom: 0px;
opacity: 0;
transition: var(--cubic);
}

.marqcase .marq .staff .details:hover p {
position: relative;
margin-bottom: 0px;
opacity: 1;
}



.marqcase .marq .staff .details img.li.icon {
position: relative;
width:50px;
filter: invert(1);
}






.marqcase .mars {
/* to be used for - the work we do - section */
width: fit-content;
display: flex;
animation: marx 66s linear infinite;	
}





.marqcase .marx {
height: 100%;
width: fit-content;
align-items: center;
display: flex;
position: relative;
animation: marx 44s linear infinite;
will-change: transform;
}

.marqcase .marx:hover { animation-play-state: paused;  }

 @keyframes marx {  from { transform: translateX(0); } to { transform: translateX(-50%); }  } 


.marqcase .marx .client-logo {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
aspect-ratio: 7 / 5;
margin:0px;
margin-right: 50px;
overflow: hidden;
}


.marqcase .marx .client-logo img {
width: 100%;
height: auto;
}













.new-work-marquee {
position: relative;
}

.new-work-marquee header {
position: relative;
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: auto;
}








.other {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 50px;
gap:75px 30px;
margin-top: 50px;
}


.other h1 {
grid-column: span 3;
text-align: center;
margin-bottom: 75px;
}

.other header {
grid-column: span 3;
display: flex;
justify-content: center;
}


.other .project {
position: relative;
width: auto;
height: 50vh;
margin:0px;
overflow: hidden;
transform: translateY(0px);
transition: var(--cubic);
}

.other .project:hover {
overflow: hidden;
transform: translateY(-25px);
}



.other a:nth-of-type(2) .project  {
/* just for gass */
position: absolute;
height: 55vh;
bottom: 0px;
width: 100%;
}



.other a {
position: relative;
cursor: none;
}



.other .project .shadow {
position: absolute;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.66));
z-index: 1;
}

.other .project .pdc {
position: absolute;
display: flex;
top: 0;
left: 0;
width: calc(100% - 50px);
height: calc(100% - 50px);
padding: 25px;
align-items: stretch;
justify-content: space-between;
flex-direction: column;
z-index: 2;
color:white;
}


.other .project .pdc .deets {
position: relative;
transform: translateY(50px);
transition: var(--cubic);
}


.other .project:hover .pdc .deets {
position: relative;
transform: translateY(0px);
}




.other .project .pdc h5 {
/* slightly smaller */
font-size: 1.4em;
line-height: 1.1em;
transition: var(--cubic);
opacity: 0;
}

.other .project:hover .pdc h5 {
font-size: 1.4em;
line-height: 1.1em;
opacity: 1;
}




.other .project .pdc p {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 10px;
font-size: 1.2em;
line-height: 1.0em;
transition: var(--cubic);
opacity: 0;
}


.other .project:hover .pdc p {
position: relative;
display: grid;
opacity: 1;
}



.other .project img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--cubic);
}

.other .project:hover img {
position: relative;
transform: scale(1.0555);
}



.other .project video {
position: relative;
width: 100%;
height: 100%;
left: auto;
top: auto;
transform: none;
object-fit: cover;
transition: var(--cubic);
}

.other .project:hover video {
position: relative;
transform: scale(1.1111);
}



.other .project .pdc .logo img {
position: relative;
filter: invert(1);
width: clamp(50px, 100px, 125px);
height: auto;
margin-bottom: 15px;
}

.other .project:hover .pdc .logo img {
position: relative;
filter: invert(1);
transform: scale(1);
}





.oembed iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}










.pvtabs {
/* Photography Archive Tabs */
display: block;
position: relative;
	
}

.pvtabs h6:first-of-type {
color:grey;
}


.pvtabs h6 {
font-size: 2.6em;
position: relative;
display: inline;
float: left;
margin: 0;
padding-right: 22px;
}



.pvtabs h6 a {
position: relative;
text-decoration: none;
}

.pvtabs h6 a::after{
position: absolute;
content: '';
bottom: 2px;
left: 0px;
width: 0%;
height: 3px;
transition: var(--cubic);
background-color: black;
}	

.pvtabs h6 a:hover::after {
width: 100%;
height: 3px;
}







.press {
position: relative;
padding: 10px;
}


.picture img {
position: relative;
width: 100%;
height: auto;
}


.quote {
margin:0px 0px;
position: relative;
font-size: 1.2em;
}







.shorts {
display: grid;
position: relative;
grid-template-columns: auto auto auto;
gap: 50px;
}


.shorts iframe {
aspect-ratio: 9 / 16 ;
width: 100%;
height: auto;
}





.shadow {
/* solo shadow */
position: absolute;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.66));
z-index: 1;
}




.studios {
align-items: center;
justify-content: flex-end;
}

.studios .content {
position: relative;
display: grid;
grid-template-columns: 640px auto;
padding:0px;
align-items: flex-end;
justify-items: end;
justify-content: end;	
}

.studios .content .insider {
background-color: var(--thisnight);
padding: 50px;
display: flex;
color:white;
flex-direction: column;
align-items: flex-start;
}






.no-cursor {
cursor: none;
}







.services .core {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap:15px;
align-items: start;
justify-content: start;
margin: 25px 0px 50px;
}



.services .core .thumbs {
position: relative;
width: auto;
height: 540px;
margin:0px;
overflow: hidden;
background-color: darkblue;
transition: var(--cubic);
}

.services .core .thumbs:hover {
height: 540px;
transform: translateY(-20px);
}

.services .core .thumbs:nth-of-type(even) {
margin:0px;
margin-top:50px;
}

.services .core .thumbs:nth-of-type(4) {
margin:0px;
margin-top:25px;
}


.services .core .thumbs img {
width: 100%;
height: 100%;
object-fit: cover;
}



.services .core .thumbs .shadow {
position: absolute;
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.22));
z-index: 1;
}


.services .core .thumbs .svc {
position: absolute;
display: flex;
top: 0;
left: 0;
width: calc(100% - 50px);
height: calc(100% - 50px);
padding: 25px;
align-items: stretch;
justify-content: flex-end;
flex-direction: column;
color:white;
z-index: 2;
}


.services .core .thumbs .svc .header {
display: flex;
position: relative;
align-items: center;
}

.services .core .thumbs .svc .header p {
font-size: 2.0em;
font-weight: 600;
position: relative;
margin: 0px;
}

.services .core .thumbs .svc .header i {
font-size: 1.6em;
position: relative;
margin: 0px;
}

.services .core .thumbs .svc .details {
position: absolute;
display: flex;
top: 0;
left: 0;
width: calc(100% - 50px);
height: calc(100% - 50px);
padding: 25px;
align-items: stretch;
justify-content: flex-end;
flex-direction: column;
transform: translateY(100%);
transition: var(--cubic);
color:black;
background-color: white;
z-index: 3;
}


.services .core .thumbs .svc:hover .details {
position: absolute;
display: flex;
transform: translateY(0%);
}


.services .core .thumbs .svc .details .cta p {
position: relative;
display: grid;
font-weight: 800;
grid-template-columns: auto 1fr;
column-gap: 10px;
font-size: 1.2em;
line-height: 1.0em;
transition: var(--cubic);
}

.services .core .thumbs .svc .details .cta p a {
position: relative;
text-decoration: none;
color:inherit;
}

.services .core .thumbs .svc .details .cta p a::after {
position: absolute;
content: '';
bottom: -5px;
left: 0px;
width: 0%;
height: 2px;
transition: var(--cubic);
background-color: black;
}	

.services .core .thumbs .svc .details .cta p a:hover::after {
width: 100%;
height: 2px;
}






.services .core-services {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap:50px;
align-items: start;
justify-content: start;
margin: 25px 0px 50px;
}




.services .core-services .line {
grid-column: span 3;
height: 2px;
background-color: black;
}


.services .core-services .service i {
font-size: 2.4em;
line-height: 1.0em;
margin-bottom: 20px;
}


.services .core-services .service p.header {
font-size: 2.0em;
line-height: 1.0em;
font-weight: 800;
position: relative;
margin: 0px;
margin-bottom: 20px
}





.services .core-services.hci {
position: relative;
display: grid;
margin: 25px 0px 0px;
}










.strict {
position: relative;
min-height: calc(100vh - 0px);
padding:0px 0px;
}

.tight {
width: 100%;
min-height: auto;
padding: inherit;
margin:0px;
}



.waterfall {
width: 100%;
position: relative;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
text-align: center;
}

.waterfall .wf {
position: absolute;
display: block;
width: 280px;
height: auto;
z-index: 0;
}

.waterfall .wf img {
width: 100%;
height: auto;
}

.waterfall .wf-1 { top:14%;  left: 44%;  }
.waterfall .wf-2 { top:66%;  left: 59%;  }
.waterfall .wf-3 { top:11%;  left: 88%;  }
.waterfall .wf-4 { top:38%;  left: 3%;  }
.waterfall .wf-5 { top:60%;  left: 83%;  }
.waterfall .wf-6 { top:74%;  left: 29%;  }







.yt {
display: flex;
position: relative;
height: 100vh;
overflow: hidden;
align-items: center;
overflow: hidden;
align-items: center;
justify-content: center;
clip-path: inset(50px);
transition: var(--cubic);
}

.yt:hover {
display: flex;
clip-path: inset(0px);
}

.yt video {
width: 100%;
height: auto;
position: absolute;
left: 50%;
top: 50%;
filter: grayscale(0) brightness(0.77);	
transition: var(--cubic);
}

.yt:hover video {
transform: translate(-50%, -50%);
filter: grayscale(1) brightness(0.44);	
}

.yt .cta {
display: grid;
z-index: 1;
filter: opacity(0);
transform: translateY(25px);
transition: var(--cubic);
}


.yt:hover .cta {
display: grid;
transform: translateY(0px);
filter: opacity(1)
}















/*--------------------------- Seamless --------------------------*/


.seamless {
/* Prevent vertical gaps - used in photogrid (Amazon Bilbao) and press */
line-height: 0;
-webkit-column-count: 4;
-webkit-column-gap:   0px;
-moz-column-count:    4;
-moz-column-gap:      0px;
column-count:         4;
column-gap:           0px;  
}


.seamless .full-bleed-bg {
position: relative;
width: 100%;
min-height: auto;
}


.seamless .full-bleed-bg img {
width: 100%;
height: auto !important;
object-fit: cover;
object-position: top;
transform: scale(1.22222);
}




.seamless img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}



@media (max-width: 1200px) {
  .seamless{
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  .seamless {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  .seamless {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  .seamless {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}







/*--------------------------- Form --------------------------*/


form {
position: relative;
display: grid;
grid-template-columns: 1fr 3fr;
align-items: center;
gap: 25px;
}


form label {
font-family: "Manrope", sans-serif;
font-weight: 500;
font-size: 1.25em;
line-height: 1.25em;
margin: 0px;
padding: 0px;
}


form input {
	
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 1.25em;
line-height: 1.0em;
margin: 0px;
padding: 20px 10px;
background: none;
border: black 2px solid;
border-radius: 0;
width: calc(100% - 24px);
}

form select {
position: relative;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 1.25em;
line-height: 1.0em;
margin: 0px;
padding: 20px 10px;
background: none;
border: black 2px solid;
border-radius: 0;
width: calc(100% - 4px);
}


form input[type=submit] {
width:300px;
color:var(--thispeach);
background-color: black;
transition: var(--cubic);
}

form input[type=submit]:hover {
color:black;
border: white 2px solid;
background-color: white;
}



/*--------------------------- Footer --------------------------*/


footer ul li::before {
content: '';
position: relative;
margin-left: initial;
margin-right: inherit;
font-size: 1.0em;
}


footer ul  {
font-family: "Manrope", sans-serif;
font-weight: 400;
margin-bottom: inherit;
font-size: 1.0em;
}

footer ul li {
margin-bottom: inherit;
font-size: 1.0em;
}



footer ul li ul li {
font-family: "Manrope", sans-serif;
font-weight: 400;
margin-bottom: inherit;
}

footer ul li ul li::before {
content: '';
position: relative;
margin:0px;
}


footer section {
position: relative;
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-gap: 50px 100px;
width: calc(100% - 300px);
min-height: auto!important;
overflow: hidden;
max-width: 1600px;
justify-content: space-between;
 align-items: flex-start;
padding: 10px;
}


footer section .logo {
width:125px;
height: auto;
}

footer section .logo img {
width: 100%;
height: auto;
filter: invert(1);
}


footer section ul {
grid-column: span 3;
position: relative;
display: flex;
padding: 0px;
margin:0px;
justify-content: space-between;
}


footer p {
font-family: "Manrope", sans-serif;
font-weight: 400;
font-size: 1.0em;
line-height: auto;
}


footer section ul li {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-size: 1.0em;
color:white;
}


footer section ul li a {
color:inherit;
position: relative;
text-decoration: none;
}


footer section ul li a::after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 0%;
height: 1px;
transition: var(--cubic);
background-color: white;
}

footer section ul li a:hover::after {
width: 100%;
height: 1px;
background-color: white;
}


footer section ul li ul {
position: relative;
display: flex;
padding: 0px;
margin-top: 5px;
flex-direction: column;
}

footer section ul li ul li {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
color:white;
}

footer section .line {
grid-column: span 5;
background-color: grey;
height: 1px;
}

footer section .copyright {
grid-column: span 3;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
color: grey;
}

footer section .legals {
grid-column: span 2;
display: flex;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
color: grey;
}

footer section .legals p {
position: relative;
margin-left: 25px;
}

footer section .legals p a {
position: relative;
text-decoration: none;
color:grey;
}

footer section .legals p a::after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 0%;
height: 1px;
transition: var(--cubic);
background-color: grey;
}

footer section .legals p a:hover::after {
width: 100%;
height: 1px;
background-color: grey;
}

footer section a i {
color: white;
font-size: 1.4em;
position: relative;
transition: var(--cubic);
margin-left: 0px;
}

footer section a:hover i {
position: relative;
transform: translateY(-5px);
}

footer picture {
position: absolute;
width: 100vw;
height: 100%;
z-index: -1;
min-height: 100%;
object-position: center center;
filter: brightness(0.333333)
}

footer picture img {
width: 100%;
height: 100%;
object-fit: cover;
}

footer .socials { 
position: relative;
display: grid;
grid-template-columns: auto auto; 
justify-items: center; 
gap: 10px; 
}