@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);
--closed: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
--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));
}


* {
cursor: none;
}


/*---------------------- Grtsk Tera  ------------------------------*/


@font-face {
font-family: 'Grtsk Tera Regular';
src: url('/contents/themes/friendly/typefaces/GrtskTera-Regular.woff2') format('woff2'),
url('/contents/themes/friendly/typefaces//GrtskTera-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Grtsk Tera Medium';
src: url('/contents/themes/friendly/typefaces/GrtskTera-Medium.woff2') format('woff2'),
url('/contents/themes/friendly/typefaces/GrtskTera-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}


@font-face {
font-family: 'Grtsk Tera Semi';
src: url('/contents/themes/friendly/typefaces/GrtskTera-Semibold.woff2') format('woff2'),
url('/contents/themes/friendly/typefaces/GrtskTera-Semibold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}



/*-------------------------- Holding Themes -------------------------------*/

.black { color: black; }
.white { color: white; }



.neutral {    		background-color: #d1b3ff; 				}
.dusk {    			background-color: beige; 				}
.ocean {    		background-color: greenyellow; 			}
.lime {    			background-color: #bfffe8; 				}
.stoney {    		background-color: #c3b39b; 				}
.whisk {    		background-color: #ff9ec9; 				}


.neutral .letters {     	mix-blend-mode: screen;      		filter: hue-rotate(118deg);     		} 
.dusk .letters {     		mix-blend-mode: saturation;     	filter: hue-rotate(58deg);     			} 
.ocean .letters {     		mix-blend-mode: screen;      		filter: hue-rotate(233deg);     		} 
.lime .letters {     		mix-blend-mode: hue;      			filter: hue-rotate(67deg);     			} 
.stoney .letters {     		mix-blend-mode: hue;      			filter: hue-rotate(145deg);     		} 
.whisk .letters {     		mix-blend-mode: soft-light;			filter: hue-rotate(135deg);  			} 




/*-------------------------- NEW Holding Themes -------------------------------*/


.blue {    					background-color: #bac8f7; 					}
.purp {    					background-color: #bc89ae; 					}
.bronze {    				background-color: #b99933;  				}
.tangerine {    			background-color: #f49a5d;  				}
.dust {    					background-color: #c7aa82;  				}
.limon {    				background-color: #daff9a;  				}

.color-blue {    				color: #bac8f7; 				}
.color-purp {    				color: #bc89ae; 				}
.color-bronze {    				color: #b99933;  				}
.color-tangerine {    			color: #f49a5d;  				}
.color-dust {    				color: #c7aa82;  				}
.color-limon {    				color: #daff9a;  				}


.blue .letters {     		mix-blend-mode: soft-light;  		filter: hue-rotate(265deg);   			} 
.purp .letters {     		mix-blend-mode: hue;  				filter: hue-rotate(298deg);    			} 
.bronze .letters {     		mix-blend-mode: color;  			filter: hue-rotate(55deg);;     		} 
.tangerine .letters {       mix-blend-mode: exclusion; 			filter: hue-rotate(169deg);    			} 
.dust .letters {     		mix-blend-mode: soft-light;			filter: hue-rotate(65deg); 				} 
.limon .letters {     		mix-blend-mode: saturation;  		filter: hue-rotate(135deg);				} 




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


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



body {
position: relative;
margin:0px;
font-size: 2.2em;
font-family: 'Grtsk Tera Regular';
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color:black;
}


p {
font-family: 'Grtsk Tera Regular';
font-weight: 500;
font-size: 0.85em;
line-height: 1.5em;
margin:0px;
margin-bottom:20px;
}


a {
position: relative;
color:inherit;	
}


h1 b {
font-family: 'Grtsk Tera Semi';
font-size: 1.0em;
line-height: 1.0em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}


h1 {
font-family: 'Grtsk Tera Medium';
font-size: 1.6em;
line-height: 1.0em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}

h2 {
font-size: 1.4em;
line-height: 1.0em;
margin: 0px;
margin-bottom: 25px;
}

h3 {
font-size: 1.2em;
line-height: 1.0em;
margin: 0px;
margin-bottom: 25px;
}

h4 {
font-size: 1.0em;
line-height: 1.0em;
margin: 0px;
}




img {
position: relative;
display: block;
}

main {
position: relative;
min-height: 100dvh;
overflow: hidden;
z-index: 1;
}


footer {
width: 100%;
min-height: 77vh;
z-index: 2;
background-color: black;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: flex-start;
}

footer section {
position: relative;
padding: 60px 0px;
width: calc(100vw - 60px);
display: grid;
gap:60px;
grid-template-columns: 1fr 1fr;	
filter: invert(1);
}

footer section p {
font-weight: 500;
margin: 0px;
}

footer section .logo img {
position: relative;
width: 240px;
height: auto;
}

footer section .legal{
position: relative;
display: block;
grid-column: 2;	
filter: invert(.777);
}

footer section .credits {
position: relative;
display: block;
grid-column: 2;	
filter: invert(.777);
}

footer section .newsletter {
position: relative;
display: flex;
border-top: 2px solid grey;
margin:25px 0px;
padding:25px 0px;
grid-column: span 2;
font-size: 0.85em;
}





footer form {
position: relative;
display: flex;
align-items: center;
font-family: 'Grtsk Tera Medium';
gap: 10px;

}

footer form label {
position: relative;
display: flex;
gap: 10px;
align-items: center;
}

footer form label span {
position: relative;
display: flex;
align-items: center;
}

footer form input {
font-family: 'Grtsk Tera Regular';
position: relative;
padding:10px;
}









nav {
position: fixed;
width: 100vw;
z-index: 111;
}


nav .logo {
position: absolute;
display: flex;
align-items: center;
width: 200px;
height: 50px;
top: 30px;
left: 30px;
transition: var(--cubique);
}


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



nav .menu {
position: absolute;
display: flex;
top: 30px;
right: 30px;
margin:0px;
flex-direction: column;
align-items: flex-end;
transition: var(--cubique);
}



nav .menu.active {
position: absolute;
display: flex;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}




nav .menu .nav-menu  {
display: flex;
align-items: flex-end;
justify-content: flex-start;
flex-direction: column;
align-content: flex-end;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: var(--cubic);
}


nav .menu .nav-menu.active {
display: flex;
align-items: flex-end;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}






nav .menu .nav-menu h4 {
font-size: .75em;
line-height: 1.0em;
margin: 0px; 
padding: 10px;
padding-left: 20px;
text-transform: uppercase;
}

nav .menu .nav-menu h4 a {
position: relative;
text-decoration: none;
}


nav .menu .mobile-menu {
display: flex;
width: 50px;
height: 18px;
padding:16px 10px;
flex-direction: column;
justify-content: space-between;
}


nav .menu .mobile-menu .line {
width: auto;	
height: 3px;
background-color: black;
transition: var(--cubic);
}





section {
position: relative;
display: flex;
flex-direction: column;	
width:100%;
height: auto;
z-index: 0;
align-items: center;
}





#thetop {
position: relative;
left:0px;
visibility: hidden;
}

#theme {
position: relative;
left:0px;
visibility: hidden;
}






/*-------------------------- Holding ----------------------------------*/



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


.c::after {
content: '\e09f';
font-family: 'Font Awesome 7 Pro';
font-weight: 100;
-webkit-font-smoothing: antialiased;
position: relative;
color: lime;
font-size: 1.6em;
z-index: 1;
}





.holding {
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
width: 100dvw;
height: 100dvh;	
overflow: hidden;
z-index: 0;
}


.holding .flip {
position: relative;
transition: var(--cubic);
z-index: 1;
}

.holding img.logo {
position: relative;
width: 225px;
padding: 50px 0px;
height: auto;
}

.holding .promo {
position: relative;
display: flex;
flex-direction: column;
padding-top: 50px;
align-items: center;
z-index: 1;
}

.holding .promo .row {
position: relative;
display: flex;
}

.holding .promo .row p {
position: relative;
text-transform: uppercase;
margin: 0px 33px;
}


.holding .promo .row p a {
position: relative;
font-family: 'Grtsk Tera Medium';
text-decoration: none;
cursor: none;
}

.holding .promo .row p i {
position: relative;
font-size: 1.2em;
}


.holding .promo .row p a::after {
content: '';
position: absolute;
left:0px;
bottom:-5px;
height: 3px;
width: 0%;
background-color: black;
transition: var(--cubic);
z-index: -1;
}


.holding .promo .row p a:hover::after {
position: absolute;
height: 3px;
width: 100%;
}


.holding .promo .row:nth-of-type(1) {
display: flex;
}


.holding .letters {
position:absolute;
left:0px;
top:0px;
width: 100vw;
height: 100vh;
z-index: -1;
overflow: hidden;
}



.holding .letters div {
display: block;
position: absolute;
height: 27vh;
width: auto;
transition: var(--cubique);
}



.holding .letters div img {
position: relative;
display: inline-block;
height: 100%;
width:auto;
}



.holding .letters .f { left:0%; top:0%; transform: translateX(-0%); }
.holding .letters .r { left:50%; top:-5%; transform: translateX(-50%);}
.holding .letters .i { left:100%; top:0%;  transform: translateX(-100%);}


.holding .letters .e { left:22%; top:45%; transform: translate(-50%,-50%); }
.holding .letters .n { right:12%; top:52%; transform: translate(-0%,-50%);}

.holding .letters .d { left:0%; bottom:0%; transform: translateX(-0%); }
.holding .letters .l { left:50%; bottom:5%; transform: translateX(-50%);}
.holding .letters .y { left:104%; bottom:-3%;  transform: translateX(-100%);}











/*-------------------------- A - Z  ----------------------------------*/



.big {
position: relative;
display: flex;
flex-direction: column;
width: calc(100% - 300px);
padding: 75px 150px;
max-width: 1600px;
height: calc(100dvh - 150px);
align-content: center;
align-items: center;
justify-content: center;	
}


.big h1:hover {
position: relative;	
filter: invert(0);
transition: var(--cubic);
}

.big h1:hover {
position: relative;	
filter: invert(1);	
}



.collapsibles {
position: relative;
width: calc(100vw - 60px);
padding: 90px 30px;		
}


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

.collapsibles .collapsible {
position: relative;
display: flex;
flex-direction: column;
cursor: none;
border-bottom: 3px solid black;
}




.collapsibles .collapsible .header {
position: relative;
display: flex;
padding: 25px 0 0 0px;	
justify-content: space-between;
align-items: center;
cursor: none;
transition: var(--cubic);
}


.collapsibles .collapsible .header:hover {
position: relative;
filter: invert(0.3333)
}





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

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









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



.carousel img {
position: relative;
height: 100vh;
width: auto;
}



.carousel .mastercard {
position: absolute;
z-index: 111;
display: flex;
gap:30px;
align-items: center;
bottom: 30px;
left: 30px;
filter: invert(1);
}


.carousel .mastercard h2 {
position: relative;
margin: 0px;
}


.carousel .mastercard .carousel-arrow img {
position: relative;
width: 540px;
height: 40px;
}










.features {
position: relative;
width: calc(100vw - 60px);
padding: 90px 30px;
}

.features-grid {
display: grid;
margin-top:75px;
position: relative;
grid-template-columns: auto auto auto;
gap:60px;
}

.features-grid h2 {
position: relative;
margin:0px;
}

.features-grid h2:last-of-type {
position: relative;
grid-column: span 2;
}










.goog {
position: relative;
width: calc(100vw - 60px);
padding: 90px 30px;	
display: grid;
grid-template-columns: 1fr 2fr;
gap:60px;
padding-bottom: 50px;
}




.google {
position: relative;
padding-bottom: 0px;
width: 100vw;
height: 100%;
}





.google .map {
position: relative;
width: 100%;
height: 720px;
margin: 0;
cursor: none;
filter: grayscale(1) invert(1);
}

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



















.hero {
position: relative;
display: flex;
flex-direction: column;
width: calc(100% - 60px);
padding: 0px 30px;
max-width: 1600px;
height: 100dvh;
align-content: center;
align-items: center;
overflow: hidden;
}



.hero .fliphoto {
position: relative;
height: auto;
}

.hero .fliphoto img {
height: 100%;
width: auto;	
}

.hero .headers {
position: relative;
display: flex;
justify-content: space-between;
gap: 30px;
padding:25px 0px;
}

.hero .headers header {
font-family: 'Grtsk Tera Semi';
font-size: 0.6em;
position: relative;
text-transform: uppercase;
}






.instagram {
position: relative;
width: calc(100vw - 60px);
padding: 90px 30px 60px 30px;	
display: flex;
flex-direction: column;
align-items: center;
}









.main {
position: relative;
display: flex;
flex-direction: row;
z-index: 0;
padding: 90px 30px 60px 30px;
}

.main.right{
position: relative;
display: flex;
flex-direction: row-reverse;
}

.main .details {
padding: 50px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column;
width: 50%;	
}


.main .image {
position: relative;
flex: 1;
width: -webkit-fill-available;
height: -webkit-fill-available;	
}

.main .image img {
width: calc(100% - 100px);
min-height: calc(100vh - 150px);
object-fit: cover;
}

.main .details .button {
position: relative;
padding: 15px 30px;
border: 3px solid black;
}


.main .details .button::after {
content: '';
position: absolute;
left:7px;
top:7px;
background-color: black;
width:100%;
height: 100%;
z-index: -1;
transform: translate(0,0);
transition: var(--cubic);

}


.main .details .button:hover::after {
left:0px;
top:0px;
}


.main .details .button a {
text-decoration: none;
font-size: 0.85em;
line-height: 1.0em;
cursor: none;
}





.picture {
position: relative;
display: block;
height: 100dvh;
}

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


.sorry {
position: relative;
display: flex;]
width: calc(100vw - 60px);
min-height: 100dvh;
flex-direction: row;
z-index: 0;
padding: 30px;
align-items: center;
}