@charset "UTF-8";
@font-face {
    font-family: 'Gilroy';
    src: url('Gilroy-ExtraBold.eot');
    src: local("☺"), url('Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'), url('Gilroy-ExtraBold.woff2') format('woff2'), url('Gilroy-ExtraBold.woff') format('woff'), url('Gilroy-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Gilroy';
    src: url('Gilroy-Black.eot');
    src: local("☺"), url('Gilroy-Black.eot?#iefix') format('embedded-opentype'), url('Gilroy-Black.woff2') format('woff2'), url('Gilroy-Black.woff') format('woff'), url('Gilroy-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Gilroy';
    src: url('Gilroy-SemiBold.eot');
    src: local("☺"), url('Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'), url('Gilroy-SemiBold.woff2') format('woff2'), url('Gilroy-SemiBold.woff') format('woff'), url('Gilroy-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Gilroy';
    src: url('Gilroy-Bold.eot');
    src: local("☺"), url('Gilroy-Bold.eot?#iefix') format('embedded-opentype'),        url('Gilroy-Bold.woff2') format('woff2'),        url('Gilroy-Bold.woff') format('woff'),        url('Gilroy-Bold.ttf') format('truetype');
	font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Gilroy';
    src: url('Gilroy-Medium.eot');
    src: local("☺"), url('Gilroy-Medium.eot?#iefix') format('embedded-opentype'),        url('Gilroy-Medium.woff2') format('woff2'),        url('Gilroy-Medium.woff') format('woff'),        url('Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Gilroy';
    src: url('Gilroy-Regular.eot');
    src: local("☺"), url('Gilroy-Regular.eot?#iefix') format('embedded-opentype'),        url('Gilroy-Regular.woff2') format('woff2'),        url('Gilroy-Regular.woff') format('woff'),        url('Gilroy-Regular.ttf') format('truetype');
	font-weight: 400;	
    font-weight: normal;
    font-style: normal;
}
:root {
	--dark-blue: #102770;
	--white-gr: #c4c3ca;
	--green: #00A6A3;
}
body{
	background-color: var(--dark-blue);
	margin: 0;
	padding: 0;
	font-family: 'Gilroy';
	overflow-y: scroll;
	overflow-x: hidden;
	overflow: hidden; }	
	



.cursor-x,
.cursor-x2,
.cursor-x3{
	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-x{
	background-color: var(--white-gr);
	height: 0;
	width: 0;
	z-index: 9999999;
}
.cursor-x2,.cursor-x3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor-x2.hover,
.cursor-x3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor-x2{
	border: 2px solid var(--white-gr);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cursor-x2.hover{
	background: rgba(255,255,255,1);
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}



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

.sectionnn{
	position: relative;
	width: 100%;
	display: block;
	overflow-x: hidden;
}
.sectionnn {
	--initial: 0;
	--final: -20%;
	--initial-2: 30%;
	--final-2: 50%;
}
.full-height{
	height: 100vh;
}
.sectionnn ul,
.sectionnn li{
	position: relative;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.sectionnn ul{
	padding: 40px 0;
}
.sectionnn ul li a.press {
	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;
}
.sectionnn ul li:nth-child(2) a.press,
.sectionnn ul li:nth-child(4) a.press {
	transform: translate3d(var(--initial-2), 0, 0);
	animation: slide-2 5s linear infinite;
	left: -100%;
}
.sectionnn ul li.active a.press, 
.sectionnn ul li a.press:hover {
	transition-duration: 0.4s;
	animation-play-state: paused;
	opacity: 1;
	color: var(--green);
	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;
}

.sectionnn 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('../images/');
	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('../images/');
}
.img-list li:nth-child(3) {
	background-image: url('../images/');
}
.img-list li:nth-child(4) {
	background-image: url('../images/');
}
.img-list li:nth-child(5) {
	background-image: url('../images/');
}




@media (max-width: 991px) { 
	.section {
		--initial-2: 20%;
		--final-2: 40%;
	}
	a.press {
		font-size: 60px;
	}
	.cursor-x,
	.cursor-x2,
	.cursor-x3{
		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.press {
		font-size: 50px;
	}
}