//COMMON IMPORTS
@import "../config/imports";

body {
	font-size: 18px;
}

.row > *,
.custom-ws-initial {
	white-space: initial !important;
}

// Width / Height
$step    : 5;
$from    : ceil( 1 /$step);
$through : ceil( 100 /$step);

@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-up($breakpoint) {
		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

		@for $i from $from through $through {
		  	$i : $i * $step;

			.vw#{$infix}-#{$i} {
				width: unquote($i + 'vw') !important;
			}

			.min-vw#{$infix}-#{$i} {
				min-width: unquote($i + 'vw') !important;
			}

			.max-vw#{$infix}-#{$i} {
				max-width: unquote($i + 'vw') !important;
			}

		}

		.min-vh#{$infix}-100 {
			min-height: 100vh !important;
		}

		.vh#{$infix}-100 {
			height: 100vh !important;
		}

	}
}

// Font
.custom-font-1 {
	font-family: 'Cormorant', serif !important;
}

// Typo
h1, h2, h3 {
	font-family: 'Cormorant', serif !important;
	color: var(--secondary);
	font-weight: bold;
	line-height: 1;
}

h2 {
	font-size: 3em;
	margin-bottom: 0.5em;
}

h3 {
	font-size: 2.5em;
	margin-bottom: 0.4em;
	text-transform: none;
}

h5 {
	color: var(--default);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 0.8em;
	font-weight: 500;
	font-size: 0.9em;
}

.text-0-5 {
	font-size: 0.8rem;
}

p {
	line-height: 1.8rem;
	&.lead {
		font-size: 1.3em;
		font-weight: 500;
		line-height: 2.3rem;
		color: var(--tertiary);
	}
}

.custom-text-1 {
	mix-blend-mode: difference;
	font-weight: bold;
	font-size: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
	line-height: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
}

.custom-link-1 {
	display: inline-block;
	position: relative;
	&:after {
		bottom: 0;
		content: "";
		display: block;
		height: 1px;
		left: 0;
		position: absolute;
		background: var(--primary);
		transition: cubic-bezier(.55,0,.1,1) transform 300ms;
		width: 100%;
		transform: translateY(0px);
	}
	&.custom-link-1-light {
		&:after {
			background: var(--light);
		}
	}
	&:hover {
		text-decoration: none !important;
		&:after {
			transform: translateY(3px);
		}
	}
}

.custom-list-1 {
	li {
		padding: 4px 0;
	}
}

// Border Radius
.custom-border-radius-1 {
	border-radius: var(--border-radius2x) !important;
}

// Border
@media (min-width: 1199px) {
	.custom-border-left-1 {
	    border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
	}

	.custom-border-right-1 {
	    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
	}

	.custom-border-top-1 {
	    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
	}

	.custom-border-bottom-1 {
	    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
	}

	.custom-border-bottom-2 {
		background-image: linear-gradient(to right, #999 0 10%, rgba(255, 255, 255, 0) 10%);
		background-position: bottom;
		background-size: 8px 1px;
		background-repeat: repeat-x;
	}
}

// Header
#header {
	position: absolute;
	width: 100vw;
	.header-body {
		background: transparent;
		border: 0;
	}
}

// Custom Elements
.custom-stroke-text-effect-1 {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: var(--light);
	white-space: nowrap;
}

.custom-hero-font-1 {
	font-size: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
	line-height: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
}

.custom-hero-font-2 {
	font-size: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
	line-height: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
}

.custom-el-1 {
	margin-right: -30vw;
	border-radius: 50%;
	width: 30vw;
	height: 30vw;
}

.custom-el-2 {
	width: 43vw;
	height: 35vw;
	margin-left: -2px;
}

.custom-el-3 {
	bottom: 30%;
}

.custom-el-4 {
	width: 2px;
	background: var(--light);
	height: 150px;
	display: block;
	margin-right: 14px;
	float: left;
}

.custom-el-5 {
	top: -100px;
	left: 14px;
}

.custom-el-6 {
	bottom: -100px;
	right: 14px;
}

// Animations
@keyframes arrowMove {
	0% {
		transform: translateY(5px);
	}
	50% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(5px);
	}
}

.custom-arrow-anim {
	animation: arrowMove 600ms ease;
	animation-iteration-count: infinite;
}