$yellow: #F4F46C;
$defaultTextColor: #000;
$purple: #B06CF4;

$mobileBreakpoint: 480px;
$tabletBreakpoint: 768px;
$computerBreakpoint: 1024px;
$largeMonitorBreakpoint: 1500px;
$widescreenBreakpoint: 1920px;

@import 'fonts';
@import 'animations';
@import 'intro';
@import 'navigation';
@import 'owl-controls';
			
body {
	margin: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	font-family: 'Lato', sans-serif;
	// > span {
	// 	position: fixed;
	// 	z-index: 999;
	// 	background: red;
	// 	width: 1px;
	// 	height: 100%;
	// 	top: 0;
	// 	&:nth-child(1) {
	// 		left: 12.5%;
	// 	}
	// 	&:nth-child(2) {
	// 		left: 25%;
	// 	}
	// 	&:nth-child(3) {
	// 		left: 37.5%;
	// 	}
	// 	&:nth-child(4) {
	// 		left: 50%;
	// 	}
	// 	&:nth-child(5) {
	// 		left: 62.5%;
	// 	}
	// 	&:nth-child(6) {
	// 		left: 75%;
	// 	}
	// 	&:nth-child(7) {
	// 		left: 87.5%;
	// 	}
	// }
}

.logo {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9;
	text-align: center;
	transition: opacity 0.3s;
	svg {
		margin-top: 40px;
		width: 192px;
		g {
			transition: fill 0.4s;
		}
	}
	&.white {
		svg {
			g {
				fill: #fff;
			}
		}
	}
	&.hidden {
		opacity: 0;
	}
}

.section {
	padding: 0 12.5%;
	position: relative;
	@media (max-width: $tabletBreakpoint) {
		padding: 0 20px;
	}
	@media (max-width: $mobileBreakpoint) {
		padding: 0 10px;
	}
	&.yellow {
		background: $yellow;
		.section__title {
			color: #fff;
		}
		.section__description {
			color: $defaultTextColor;
		}
	}
	&.yellow-bar {
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 30%;
			background: $yellow;
		}
	}
	&.video {
		video {
			position: absolute;
			left: 12.5%;
			top: 12.5%;
			height: calc(100% - 25%);
			width: calc(100% - 25%);
			@media (max-width: $tabletBreakpoint) {
				left: 20px;
				width: calc(100% - 40px);
			}
		}
	}
	&.testimonials {
		padding: 0;
		.testimonials-owl {
			height: 100%;
		}
		.owl__item {
			padding: 0 12.5%;
			height: 100vh;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			flex-direction: column;
			&.grey {
				background-color: rgba(0,0,0,0.1);
			}
			&.light-grey {
				background-color: #F2F2F2;
				.slide__bg {
					opacity: 0.3;
				}
			}
			@media (max-width: $tabletBreakpoint) {
				padding: 0 20px;
			}
			@media (max-width: $mobileBreakpoint) {
				padding: 0 10px;
			}
		}
		.slide__bg {
			position: absolute;
			z-index: 1;
			svg {
				width: 100%;
				height: 100%;
			}
			&--right {
				width: 37.5%;
				height: 80%;
				right: 12.5%;
				top: 50%;
				transform: translateY(-50%);
			}
			&--bottom {
				width: 50%;
				bottom: -50%;
				right: 12.5%;
			}
			@media (max-width: $tabletBreakpoint) {
				display: none;
			}
		}
		.slide__description {
			font-size: 16px;
			width: 60%;
			@media (max-width: $tabletBreakpoint) {
				width: 100%;
			}
		}
		.slide__description,
		.slide__title,
		.slide__subtitle {
			position: relative;
			z-index: 2;
		}
	}
	&.contact {
		background-image: url('../images/contact.jpg');
		background-size: cover;
		background-position: center;
		.section__subtitle {
			color: #fff;
		}
	}
	img {
		display: block;
		margin: 0 auto;
		@media (max-width: $tabletBreakpoint) {
			width: 100%;
		}
	}
	.section__title {
		color: $yellow;
		margin: 0;
		@media (max-width: $widescreenBreakpoint) {
			font-size: 83px;
		}
		@media (max-width: $largeMonitorBreakpoint) {
			font-size: 60px;
		}
		@media (max-width: $tabletBreakpoint) {
			font-size: 35px;
		}
	}
	.section__subtitle {
		color: $defaultTextColor;
		font-size: 60px;
		margin: 0;
		@media (max-width: $widescreenBreakpoint) {
			font-size: 60px;
		}
		@media (max-width: $largeMonitorBreakpoint) {
			font-size: 40px;
		}
		@media (max-width: $tabletBreakpoint) {
			font-size: 20px;
		}
	}
	.section__description {
		font-size: 60px;
		color: $defaultTextColor;
		@media (max-width: $widescreenBreakpoint) {
			font-size: 60px;
		}
		@media (max-width: $largeMonitorBreakpoint) {
			font-size: 40px;
		}
		@media (max-width: $tabletBreakpoint) {
			font-size: 20px;
		}
		@media (max-width: $mobileBreakpoint) {
			font-size: 16px;
		}
	}
	.section__tabs {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		margin-top: 20px;
		&:before {
			content: '';
			position: absolute;
			top: -10px;
			left: 0;
			width: 100%;
			height: 1px;
			background: #000;
			@media (max-width: $tabletBreakpoint) {
				display: none;
			}
		}
		.tabs {
			position: relative;
			.tabs__item {
				color: #000;
				opacity: 0.35;
				font-size: 20px;
				cursor: pointer;
				&:not(:first-child) {
					margin-left: 40px;
					@media (max-width: $tabletBreakpoint) {
						margin: 0;
					}
				}
				&.active {
					color: $yellow;
					opacity: 1;
					@media (max-width: $tabletBreakpoint) {
						color: #fff;
						&:after {
							background-color: $purple;
							border-color: $purple;
						}
					}
				}
				// removing span from html and adding data-step attribute
				@media (max-width: $tabletBreakpoint) {
					opacity: 1 !important;
					display: flex !important;
					align-items: center;
					justify-content: center;
					> span {
						display: none;
					}
					&:before {
						content: attr(data-step);
						position: relative;
						z-index: 2;
					}
				}
				@media (max-width: $tabletBreakpoint) {
					width: 30px;
					height: 30px;
					&:after {
						content: '';
						position: absolute;
						width: 100%;
						height: 100%;
						background: #fff;
						border: 1px solid $yellow;
						left: 0;
						top: 0;
						border-radius: 50%;
						z-index: 1;
					}
				}
			}
			@media (max-width: $tabletBreakpoint) {
				display: flex;
				justify-content: space-between;
			}
			@media (max-width: $tabletBreakpoint) {
				&:before {
					content: '';
					position: absolute;
					width: 100%;
					height: 1px;
					background-color: #000;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		.content {
			color: $defaultTextColor;
			h3 {
				font-size: 30px;
			}
			ul {
				padding-left: 20px;
			}
		}
		.owl-item {
			.owl__item {
				h3, > div {
					opacity: 0;
				}
				h3 {
					transform: translateY(-20%);
				}
				> div {
					transform: translateY(20%);
					@media (max-width: $tabletBreakpoint) {
						font-size: 14px;
					}
				}
			}
			&.active {
				.owl__item {
					h3, > div {
						opacity: 1;
					}
					h3 {
						transform: translateY(0);
						transition: all 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
					}
					> div {
						transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s;
						transform: translateY(0);
					}
				}
			}
		}
	}
}


// needs to be changed
.fp-controlArrow.fp-prev{
	border-color: transparent #000 transparent transparent;
}

.fp-controlArrow.fp-next {
	border-color: transparent transparent transparent #000;
}

.fp-tableCell {
	overflow: hidden;
}

.section {
	.section__title {
		opacity: 0;
		transform: translateX(-50%);
		transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	}
	.section__description,
	.section__subtitle {
		opacity: 0;
		transform: translateX(-50%);
		transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
		transition-delay: 0.3s;
	}
	.section__tabs {
		.tabs {
			.tabs__item {
				display: inline-block;
				opacity: 0;
				transform: translateY(-20px);
				&.active {
					opacity: 0;
				}
			}
		}
	}
	&.testimonials {
		.section__title {
			opacity: 0;
			transform: translate(0, -50%);
		}
		.section__description,
		.section__subtitle {
			opacity: 0;
			transform: translate(0, 50%);
		}
	}
	&.active {
		.section__title {
			opacity: 1;
			transform: translateX(0);
		}
		.section__description,
		.section__subtitle {
			opacity: 1;
			transform: translateX(0);
		}
		.section__tabs {
			.tabs {
				.tabs__item {
					opacity: 0.35;
					transform: translateY(0);
					&:nth-child(1) {
						transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s, opacity 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s, color 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
					}
					&:nth-child(2) {
						transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.65s, opacity 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.65s, color 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
					}
					&:nth-child(3) {
						transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.75s, opacity 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.75s, color 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
					}
					&:nth-child(4) {
						transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.85s, opacity 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.85s, color 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
					}
					&:nth-child(5) {
						transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.95s, opacity 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.95s, color 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
					}
					&.active {
						opacity: 1;
					}
				}
			}
		}
		&.testimonials {
			.section__title {
				opacity: 0;
				transform: translate(0, -50%);
			}
			.section__description,
			.section__subtitle {
				opacity: 0;
				transform: translate(0, 50%);
			}
			.owl-item {
				&.active {
					.section__title {
						opacity: 1;
						transform: translate(0, 0);
					}
					.section__description,
					.section__subtitle {
						opacity: 1;
						transform: translate(0, 0);
					}
				}
			}
		}
	}
}