/* Please ❤ this if you like it! */


/* ========================================= * 
		        BEST VIEWED FULLSCREEN
   https://codepen.io/ig_design/full/qBbdMRJ
 * ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,900;1,900&display=swap');


:root {
	--dark-blue: #102770;
	--white-gr: #c4c3ca;
	--yellow: #ffeba7;
}
body{
	color: var(--white-gr);
	background-color: var(--dark-blue);
	overflow-x: hidden;
}

/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	mix-blend-mode: difference;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	z-index: 9999999;
}
.cursor{
	background-color: var(--white-gr);
	height: 0;
	width: 0;
	z-index: 9999999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid var(--white-gr);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cursor2.hover{
	background: rgba(255,255,255,1);
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}

.logo {
	position: absolute;
	top: 30px;
	right: 30px;
	display: block;
	z-index: 100;
	transition: all 250ms linear;
}
.logo img {
	height: 26px;
	width: auto;
	display: block;
}

a {
	font-size: 65px;
	line-height: 1;
    font-family: 'Roboto', sans-serif;
	margin-bottom: 0.6rem;
	font-weight: 900;	
	color: var(--white-gr);
	transition: all 250ms linear;
}
a:hover {
	color: var(--yellow);
	text-decoration: none;
}
a span {
	white-space: nowrap;
	padding: 0.3vw;
}

.section{
	position: relative;
	width: 100%;
	display: block;
	overflow-x: hidden;
}
.section {
	--initial: 0;
	--final: -20%;
	--initial-2: 30%;
	--final-2: 50%;
}
.full-height{
	height: 100vh;
}
.section ul,
.section li{
	position: relative;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.section ul{
	padding: 40px 0;
}
.section ul li a {
	width: fit-content;
	display: flex;
	position: relative;
	transform: translate3d(var(--initial), 0, 0);
	animation: slide 5s linear infinite;
	animation-play-state: running;
	opacity: 0.2;
}
.section ul li:nth-child(2) a,
.section ul li:nth-child(4) a {
	transform: translate3d(var(--initial-2), 0, 0);
	animation: slide-2 5s linear infinite;
	left: -100%;
}
.section ul li.active a, 
.section ul li a:hover {
	transition-duration: 0.4s;
	animation-play-state: paused;
	opacity: 1;
	color: var(--yellow);
	text-decoration: none;
}
@keyframes slide {
	0% {
		transform: translate3d(var(--initial), 0, 0);
	}

	100% {
		transform: translate3d(var(--final), 0, 0);
	}
}
@keyframes slide-2 {
	0% {
		transform: translate3d(var(--initial-2), 0, 0);
	}

	100% {
		transform: translate3d(var(--final-2), 0, 0);
	}
}


.left-side-shadow{
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 100%;
	z-index: 2;
	display: block;
	background-image: linear-gradient(to right, var(--dark-blue) , rgba(255,255,255,0));
	pointer-events: none;
}
.right-side-shadow{
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 100%;
	z-index: 2;
	display: block;
	background-image: linear-gradient(to left, var(--dark-blue) , rgba(255,255,255,0));
	pointer-events: none;
}

.section ul.img-list {
	position: absolute;
	padding: 0;
	top: 50%;
	left: 50%;
	margin-left: -180px;
	margin-top: -180px;
	z-index: -1;
}
.img-list li {
	position: absolute;
	display: block;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	background-image: url('https://assets.codepen.io/1462889/menu-1.jpg');
	opacity: 0;
  transform: scale(0.95) rotate(10deg);
	transition: all 350ms linear;
}
.img-list li.show {
	opacity: 0.5;
  transform: scale(1) rotate(0deg);
}
.img-list li:nth-child(2) {
	background-image: url('https://assets.codepen.io/1462889/menu-2.jpg');
}
.img-list li:nth-child(3) {
	background-image: url('https://assets.codepen.io/1462889/menu-3.jpg');
}
.img-list li:nth-child(4) {
	background-image: url('https://assets.codepen.io/1462889/menu-4.jpg');
}
.img-list li:nth-child(5) {
	background-image: url('https://assets.codepen.io/1462889/menu-5.jpg');
}




/* #Media
================================================== */

@media (max-width: 991px) { 
	.section {
		--initial-2: 20%;
		--final-2: 40%;
	}
	a {
		font-size: 60px;
	}
	.cursor,
	.cursor2,
	.cursor3{
		display: none;
	}
	.section ul.img-list {
		margin-left: -140px;
		margin-top: -140px;
	}
	.img-list li {
		width: 280px;
		height: 280px;
	}
}

@media (max-width: 767px) {
	.section {
		--initial-2: 10%;
		--final-2: 30%;
	}
}

@media (max-width: 575px) {
	.section {
		--initial-2: -20%;
		--final-2: 0;
	}
	a {
		font-size: 50px;
	}
}