body {
	margin: 0;
	overflow: hidden;
	-webkit-text-size-adjust: 100%;
}

a {
	text-decoration: none;
}

/*-----------------------------------------
	Top navigation
-----------------------------------------*/
#top-menu {
	z-index: 200;
	font-weight: 600;
	font-size: .6em;
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 18%;
}

#top-menu>a {
	color: #fff;
	transition: all .3s ease-out;
}

#top-menu>a:hover {
	transform: scale(1.5);
	color: #333;
	cursor: pointer;
}

@media screen and (max-width: 768px) {
	#top-menu {
		width: 100%;
		justify-content: flex-end;
	}

	#top-menu>a {
		display: none;
	}

	#top-menu>a:first-child {
		display: block;
	}
}

#logo {
	position: absolute;
	left: 15px;
	top: 15px;
	width: 40px;
	z-index: 200;
}

#logo>img {
	width: 100%;
}

#socials {
	position: absolute;
	left: 15px;
	bottom: 15px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	z-index: 200;
}

#socials>a>img {
	margin-top: 10px;
	width: 100%;
	cursor: pointer;
	transition: all .4s ease;
}

#socials>a>img:hover {
	transform: scale(1.5);
}

@media screen and (max-width: 768px) {
	#socials {
		display: none;
	}

	#logo {
		left: 8px;
	}

	#socials {
		left: 8px;
	}
}

@media screen and (max-height: 414px) {
	#socials {
		display: initial;
	}
}

/*-----------------------------------------
	Main content block
-----------------------------------------*/
#content {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 100;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

@media screen and (max-width: 768px) {
	#content {
		flex-direction: column;
		flex-flow: column-reverse;
		justify-content: center;
	}
}

/* Left container with logo and title */
#title-container {
	width: 6%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/*animation: slideIn .6s ease forwards;*/
}

/*@keyframes slideIn {
	0%{ transform: translateX(-100px) }
	100%{ transform: translateX(0) }
}*/

#placeholder {
	width: 6%;
	height: 100%;
}

#title-container>#title {
	margin: auto;
	height: 300px;
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	transform-origin: center center 0;
	transform: rotate(-90deg);
	width: 300px;
}

#title-container>#title>h1 {
	text-align: center;
	letter-spacing: 3.5px;
	font-size: 1.5em;
	font-weight: 700;
	margin-top: 5px;
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
	#title-container {
		display: none;
	}

	#placeholder {
		display: none;
	}
}

/* Container with main text*/
#text-box {
	font-family: "Manrope";
	z-index: 100;	
	margin: auto;
	height: 60%;	
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#text-box.slide-left {
	animation: flyForward .6s;
	animation-direction: reverse;
	animation-timing-function: ease-in;
}

#text-box.slide-right {
	animation: flyForward .6s ease;
}

@keyframes flyForward {
	0% {
		transform: scale(1);
		opacity: 1;
		filter: blur(0px);
	}

	49% {
		transform: scale(1.2);
	}

	50% {
		transform: scale(.8);
		opacity: 0;
		filter: blur(10px);
	}

	100% {
		transform: scale(1);
		opacity: 1;
		filter: blur(0px);
	}
}

@media screen and (max-width: 768px) {
	@keyframes flyForward {
		0% {
			transform: translateX(0px);
			opacity: 1;
			filter: blur(0px);
		}

		49% {
			transform: translateX(50px);
		}

		50% {
			transform: translateX(-50px);
			opacity: 0;
			filter: blur(10px);
		}

		100% {
			transform: translateX(0px);
			opacity: 1;
			filter: blur(0px);
		}
	}
}

#text-box>h1 {
	margin-bottom: 5px;
	font-weight: 700;
	font-size: 2em;
	line-height: 1.2em;
}

#text-box>p {
	font-weight: 400;
	font-size: 1em;
}

@media screen and (max-width: 768px) {
	#text-box {
		height: 55%;
		overflow: scroll;
		justify-content: flex-start;
		width: 90%;
		margin-top: 0;
	}

	#text-box>h1 {
		font-size: 1.2em;
	}

	#text-box>p {
		font-size: .9em;
	}
}

@media screen and (max-height: 414px) {
	#text-box {
		height: 90%;
		width: 75%;
	}
}

/* Container for main image */
#image-box {	
	z-index: 100;
	/*margin: auto*/;
	height: 100%;
	width: 44%;	
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (orientation: portrait) {
	#image-box {
		height: 75%;
	}
}

#image-box>img {
	height: 100%;
	width: auto;
}

#image-box>img.slide-left {
	animation: slideRight .6s;
	animation-direction: reverse;
	animation-timing-function: ease-in;
}

#image-box>img.slide-right {
	animation: slideRight .6s ease;
}

@keyframes slideRight {
	0% {
		transform: translateX(0px);
		opacity: 1;
		filter: blur(0px);
	}

	50% {
		transform: translateX(100px);
		opacity: 0;
		filter: blur(8px);
	}

	51% {
		transform: translateX(-100px);
	}

	100% {
		transform: translateX(0px);
		opacity: 1;
		filter: blur(0px);
	}
}

@media screen and (max-width: 768px) {
	#image-box {
		margin: 0 auto 0 auto;
		padding: 0;
		height: 35%;
		width: auto;		
	}
}

@media screen and (max-height: 414px) {
	#image-box {
		display: none;
	}
}

/*-----------------------------------------
	Bottom navigation
-----------------------------------------*/
#bottom-menu {
	font-weight: 600;
	z-index: 100;
	position: absolute;
	bottom: 5px;
	left: 6%;
	width: 50%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

#home-button {
	transition: all .3s ease;
	color: black;
}

#home-button:hover {
	transform: scale(1.2);
	color: #3370d7;
	cursor: pointer;
}

/* Slider navigation */
#slider-counter {
	margin: auto;
	width: 170px;
	height: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#slider-counter>.number {
	margin: auto;
	text-align: center;
	width: 30px;
	color: #666666;
	transition: all .3s ease-out;
}

#slider-counter>.number.active {
	transform: scale(1.2);
	color: #3370d7;
}

#slider-counter>.number:hover {
	transform: scale(1.5);
	cursor: pointer;
}

#slider-counter>.line {
	margin: auto;
	height: 2px;
	background-color: #666666;
	width: 10px;
	border-radius: 1px;
	transition: all .3s ease-out;
}

#slider-counter>.line.medium {
	background-color: #6677AA;
	width: 35px;
}

#slider-counter>.line.long {
	background-color: #6677AA;
	width: 60px;
}

#slider-arrows {
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center;
	font-size: 2em;
	cursor: pointer;
}

#slider-arrows>div {
	transition: all .3s ease;
}

#slider-arrows>div:hover {
	transform: scale(1.5);
	color: #3370d7;
}

@media screen and (max-width: 768px) {
	#bottom-menu {
		width: 94%;
		left: 3%;
		justify-content: space-between;
	}

	#home-button {
		width: 20%;
		font-size: .7em;
		text-align: center;
	}

	#slider-counter>.line.medium {
		width: 25px;
	}

	#slider-counter>.line.long {
		width: 40px;
	}

	#slider-arrows {
		width: 20%;		
	}
}

/*-----------------------------------------
	Background
-----------------------------------------*/
#bg-wrap {
	position: absolute;
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 110%;
	overflow: hidden;
}

#first-background {	
	width: 44%;
	background-color: #fff;
	position: relative;
}

/* Diagonal background line */
#diagonal {	
	z-index: -100;
	top: -22%;
	position: absolute;
	right: -42%;
	height: 130vh;
	width: 500px;
	background-color: #fff;
	/*transform: rotate(15deg);*/
	animation: rotate .6s ease forwards;
}

@keyframes rotate {
	0% { transform: rotate(5deg) }
	100% { transform: rotate(15deg) }
}

/* Second background color */
#second-background {
	height: 185%;
	margin-top: -10%;
	transform: rotate(15deg);
	z-index: -200;
	width: 55%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	animation: fadeIn .6s ease forwards;
}

@keyframes fadeIn {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

#second-background>div {
	height: 100%;
	width: 0%;
	transition: width .6s ease;
}

#second-background>#first {
	background-color: #3370d7;
}

#second-background>#second {
	background-color: #45efb5;
}

#second-background>#third {
	background-color: #ffc000;
}

#second-background>div.active {
	width: 100%;
}

@media screen and (max-width: 768px) {
	#bg-wrap {
		height: 35%;
		width: 100%;
	}

	#first-background {
		width: 40%;
	}

	#diagonal {
		top: -65%;
		right: -25%;
		height: 85vh;
	}

	#second-background {
		width: 70%;
		margin-right: -10%;
	}	
}

@media screen and (max-height: 414px) {
	#bg-wrap {
		display: none;
	}
}