/* ------------------------- Fonts -------------------------------------------------- */

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: auto;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: auto;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: auto;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: auto;
}

@font-face {
    font-family: 'Mondwest';
    src: url('../fonts/Mondwest-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: auto;
}


/* ------------------------- Colors -------------------------------------------------- */

:root {

    --color-dark: #000000;
    --color-dark-dark: #000000;
    --color-light: #FFFFFF;
    --color-white: #FFFFFF;
    --color-primary: #000000;
    --color-secondary: #CCFF1B;
    --color-inactive: rgba(131, 131, 131, 0.3);
    
    --color-border: var(--color-dark);
    --color-border-light: var(--color-white);

    --color-text: var(--color-dark);
    --color-text-light: var(--color-white);

    --alert-error: #ff4444;
    --alert-success: #24C958;

    --animation-primary: .5s cubic-bezier(.7, 0, .3, 1);
    --animation-ultra: .1s cubic-bezier(.7, 0, .3, 1);
    --animation-fast: .3s cubic-bezier(.7, 0, .3, 1);
    --animation-smooth: .7s cubic-bezier(.7, 0, .3, 1);
    --animation-slow: .9s cubic-bezier(.7, 0, .3, 1);

    --section-padding: 18vh;
    --section-padding-small: max(1em, 3vw);
    --container-padding: 11vw;
    --gap-padding: max(1em, 3.5vw);
    --gap-padding-em: 1.75em;

    --title-size: 13vw;

    --columns: 1;
  
}

@media screen and (min-width: 1440px){

}

@media screen and (max-width: 1024px){
    :root { 
        --section-padding: 10vw;
        --container-padding: 4vw;
        --section-padding-small: 6vw;
    }
}

@media screen and (max-width: 720px){

    :root { 
        --section-padding: 10vh;
        --section-padding-small: 8vw;
    }
}


/* ------------------------- Body -------------------------------------------------- */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
li, ul {padding: 0; margin: 0; list-style: none;}

html {
    scroll-behavior: auto;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'DM Sans', sans-serif;
    color: var(--color-text);
    line-height: 1.6;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: clamp(16px, 1.2vw, 19px);
    background-color: var(--color-light);
}

html, body {
    width: 100%;
    -webkit-font-smoothing: antialiased;
    position: relative;
    background-color: var(--color-light);
}

/* Selection */
::selection {
    background-color: var(--color-primary); 
    color: var(--color-secondary); 
    text-shadow: none;
}

::-moz-selection {
    background-color: var(--color-primary); 
    color: var(--color-secondary); 
    text-shadow: none;
}

/* General */
canvas, img, video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
}

audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}

/* ------------------------- Typography -------------------------------------------------- */

h1, h2, h3, h4, h5, h6, p, a, li, ul, ol, span, strong, em  {padding: 0; margin: 0; font-style: normal; font-weight: 400; letter-spacing: normal;}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, p:last-child, p.big:last-child, p.small:last-child, a:last-child, strong:last-child  {margin-bottom: 0;}

h1, h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--title-size) * 1);
    line-height: 0.91;
    color: var(--text);
}

h1 span.normal,
h2 span.normal {
    letter-spacing: -0.04em;
}

h1 span.small,
h2 span.small {
   font-size: .15em;
}

h1 span.alt,
h2 span.alt {
    font-family: 'Mondwest', sans-serif;
    font-size: 1.11em;
    line-height: .91;
    margin-bottom: -.1em;
}

h1 span.alt.big,
h2 span.alt.big {
    font-size: 1.495em;
}

@media screen and (max-width: 1024px){

    h1 span.alt.big,
    h2 span.alt.big {
        font-size: 1.6em;
    }
}

@media screen and (max-width: 540px){

    h1, h2 {
        font-size: calc(var(--title-size) * 1.075);
    }
}
  
h3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--title-size) * .4825);
    line-height: 0.91;
    color: var(--text);
}

@media screen and (max-width: 540px){

    h3 {
        font-size: calc(var(--title-size) * .7);
    }
}

h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: calc(var(--title-size) * .15);
    line-height: 1;
    color: var(--text);
    text-transform: uppercase;
}

h4 span {
    font-weight: 500;
}

@media screen and (max-width: 1024px){

    h4 {
        font-size: calc(var(--title-size) * .25);
    }
}

@media screen and (max-width: 540px){

    h4 {
        font-size: calc(var(--title-size) * .3);
    }
}

h4.small {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1em;
    line-height: 1;
    color: var(--text);
    text-transform: uppercase;
}

p {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    line-height: 1.45;
    margin-bottom: 1em;
    color: var(--text);
}

p.big {
    font-size: 1.6em;
    line-height: 1.35;
}

@media screen and (max-width: 540px){

    p.big {
        font-size: 1.33em;
    }
}

p.small {
    font-size: .7em;
    line-height: 1.55;
}

strong {
    font-weight: 700;
}
  
a {
    color: var(--color-primary);
    text-decoration: none;
}

p a {
    text-decoration: underline;
}

.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark p, .theme-dark strong {
    color: var(--color-white);
}

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

.section {
    display: block;
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    position: relative;
    margin-top: -1px;
}

.section-wrap {
    display: block;
    position: relative;
}

.section.full-height {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.section.no-padding {
    padding-top: unset;
    padding-bottom: unset;
}

.container {
    margin: 0 auto;
    padding-left: var(--gap-padding);
    padding-right: var(--gap-padding);
    max-width: 100%;
}

.container.medium {
    padding-left: calc(var(--container-padding) * 1);
    padding-right: calc(var(--container-padding) * 1);
} 

.container.small {
    padding-left: calc(var(--container-padding) * 2);
    padding-right: calc(var(--container-padding) * 2);
} 

.container.no-padding {
    padding-left: unset;
    padding-right: unset;
}

.row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.row.no-flex {
    display: block;
}

.row.no-wrap {
    flex-wrap: nowrap;
}

.flex-col {
    display: block;
    order: 2;
    position: relative;
    width: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

img.overlay,
video.overlay {
    object-fit: cover;
}

.line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    margin-top: var(--gap-padding);
    margin-bottom: var(--gap-padding);
}

.stripe {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    transform-origin: left top;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media screen and (max-width: 540px){

    .section.full-height {
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
    }

    .container.medium,
    .container.small {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    } 
}

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

main {
	box-sizing: border-box;
	overflow: hidden;
	width: 100vw;
	position: fixed;
	height: 100%;
	background: var(--color-light);
	display: block;
}

.main-wrap {
	box-sizing: border-box;
	width: 100vw;
	will-change: transform;
	position: fixed;
	display: block;
}

main.touch {
	position: relative;
	height: auto;
}

main.touch .main-wrap {
	position: relative;
}

@media screen and (max-width: 1024px) {
	main {
		position: relative;
	}

	.main-wrap {
		position: relative;
	}
}

/* ------------------------- Buttons -------------------------------------------------- */

.btn-row {
    width: 100%;
    position: relative;
    display: flex;
}

.btn {
    margin-bottom: calc(var(--gap-padding) / 2);
    position: relative;
    z-index: 5;
    border: 0;
    outline: 0;
}

.btn input {
    cursor: pointer;
}

.btn:hover {
    z-index: 15;
}

.btn:last-child {
    margin-bottom: 0;
}

.btn-click {
	cursor: pointer;
	border: 0;
	background: transparent;
	border-radius: 2.125em;
	min-width: 1em;
	height: 4.25em;
	padding: 0;
	font-size: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
    position: relative;
    text-decoration: none;
    will-change: transform;
    outline: 0;
    transform: translateZ(0) rotate(0.001deg);
}

.btn-click:hover {
    cursor: pointer;
}

.btn-normal .btn-click {
    -webkit-box-shadow: inset 0px 0px 0px 1px var(--color-dark); 
    box-shadow: inset 0px 0px 0px 1px var(--color-dark);
}

.btn-fill {
    background: var(--color-primary);
	position: absolute;
	border-radius: 50%;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	transform: scale(1);
    will-change: transform;
    transition: background-color ease-in-out .25s;
}

.btn-text {
    display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
    padding: 0 2.5em;
    z-index: 2;
    color: var(--color-dark);
    position: relative;
    transform: rotate(0.001deg);
    pointer-events: none;
    will-change: transform, color;
}

.btn-click:hover {
    text-decoration: none;
}

/* --- Button Circle --- */

.btn-round {
    margin: 0;
    z-index: 20;
}

.btn-round .btn-click {
    width: clamp(9em, 12vw, 11em);
    height: clamp(9em, 12vw, 11em);
    border-radius: 50%;
    border: 0;
    background: var(--color-dark);
}

.btn-round .btn-text {
    padding: 0 1em;
    text-align: center;
}

.btn-round .btn-text-inner {
    overflow: hidden;
}

.btn-round .btn-text-inner-inner {
    color: #fff;
    text-transform: uppercase;
}


.btn-round .btn-text-inner-inner h4 {
    font-size: 1.5em;
}

.btn-round .btn-fill {
    background: var(--color-primary);
}

.btn-round svg {
    width: .65em;
    transform: translateY(-15%) rotate(0.001deg);
    transition: var(--animation-primary);
    display: inline-flex;
}

.btn-round .btn-click:hover svg {
    transform: translateY(-15%) rotate(-315deg);
}

.btn-round .double {
    display: inline-flex;
    position: relative;
    overflow: hidden;
}

.btn-round .double div:nth-child(1) {
    transform: translateY(0%) rotate(0.001deg);
    transition: var(--animation-primary);
}

.btn-round .double div:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100%) rotate(0.001deg);
    transition: var(--animation-primary);
}

.btn-round .btn-click:hover .double div:nth-child(1) {
    transform: translateY(-100%) rotate(0.001deg);
}

.btn-round .btn-click:hover .double div:nth-child(2) {
    transform: translateY(0%) rotate(0.001deg);
}

/* --- Button Circle - Form --- */

.apply-form .btn-round .btn-click:hover svg {
    transform: translateY(-15%) rotate(270deg);
}

/* --- Button Circle - Footer --- */

.footer-top .btn-round .btn-fill {
    background: var(--color-secondary);
}

.footer-top .btn-round h4 {
    display: inline-flex;
    align-items: center;
    text-align: left;
    color: var(--color-dark);
}

.footer-top .btn-round .btn-click svg {
    margin-right: .5em;
    transform: translate(0%, -15%) rotate(-90deg);
}

.footer-top .btn-round .btn-click svg path {
    fill: var(--color-dark);
}

.footer-top .btn-round .btn-click:hover svg {
    transform: translate(10%, -15%) rotate(225deg);
}


@media screen and (max-width: 540px) {

    .btn-round .btn-text-inner-inner h4 {
        font-size: 1.2em;
    }

}


/* ------------------------- Social Icons -------------------------------------------------- */

.s-icon {
    position: relative;
    overflow: hidden;
    width: 1.75em;
    height: 1.75em;
    margin-right: .15em;
    margin-left: .15em;
    border-radius: 50%;
    background-color: var(--primary);
    display: block;
    float: left;
}

.s-icon .s-icon-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0.0001deg);
    width: 65%;
}

.s-icon .s-icon-wrap svg {
    display: block;
    width: 100%;
}

.s-icon .s-icon-wrap svg path {
    fill: var(--color-dark);
}

.s-icon:hover {
    background: var(--color-primary);
    cursor: pointer;
}

.s-icon:hover svg path{
    fill: var(--color-light);
}


/* ------------------------- Color Box -------------------------------------------------- */

.color-box {
    width: calc(33.333% -  1.333em);
    background: var(--color-primary);
    font-weight: 500;
    color: var(--color-dark);
    margin-right: 2em;
    margin-top: 2em;
}

.color-box:nth-child(3), .color-box:nth-child(6) {
    margin-right: 0;
}

.color-box:before {
    content: "";
    display: block;
    padding-top: 40%;
}

.color-box .overlay {
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.color-box.dark {
    background: var(--color-dark);
    color: var(--color-white);
}

.color-box.white {
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.color-box.light {
    background: var(--color-light);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.color-box.primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.color-box.secondary {
    background: var(--color-secondary);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

@media screen and (max-width: 1000px){
    .color-box {
        width: calc(50% - 1em);
    }
    
    .color-box:nth-child(3), .color-box:nth-child(6) {
        margin-right: 2em;
    } 

    .color-box:nth-child(even) {
        margin-right: 0;
    } 
}

@media screen and (max-width: 720px){
    .color-box {
        width: 100%;
    }

    .color-box:nth-child(even), .color-box:nth-child(odd) {
        margin-right: 0;
    } 
}

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


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
   -webkit-text-fill-color: var(--color-primary) ;
   -webkit-box-shadow: 0 0 0px 1000px var(--color-secondary) inset;
   box-shadow: 0 0 0px 1000px var(--color-secondary)  inset;
   transition: background-color 5000s ease-in-out 0s;
}