#bes{
    box-sizing: border-box;
    /* font-family: 'Raleway', sans-serif; */
    width: 100%;
    /* height: 700px; */
    background: var(--dark);
    color: #fff;
    overflow: hidden;
    /* line-height: 1.7; */
    font-size: calc(var(--size-index) * .8);

}
:root {
    --dark: #070707;
    --size-index: calc(1vw + 1vh);
    --transition: .75s cubic-bezier(0.255, 0.670, 0.000, 1.010);
}

#bes .slider {
    height: 100%;
    transform: rotate(15deg);
    overflow: visible;
    top: 64vh;
}
#bes .slider__wrapper {
    transition: var(--transition) !important;
    will-change: transform;
}
/*  About whill-change css property:
The will-change CSS property hints to browsers how an element is expected to change.
Browsers may set up optimizations before an element is actually changed.
These kinds of optimizations can increase the responsiveness of a
page by doing potentially expensive work before they are actually required.

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
*/
#bes .slider__img {
    will-change: transform;
    width: 300%;
    position: absolute;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    left: -100%;
    transition: var(--transition) !important;
}
#bes .slider__item {
    max-height: 55vh;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
#bes .slider__item.opened {
    z-index: 3;
    transform: rotate(-15deg) scale(1.5);
    box-shadow: rgba(0,0,0,.75) 0 0 0 10000px;
}
#bes .slider_bg {
    z-index: 0;
    transform: rotate(-20deg) !important;
    top: -90vh;
    left: -10vh;
    opacity: .2;
    filter: blur(140px) saturate(9);
}
#bes .slider_bg .slider__item {
    max-height: 100vh;
    cursor: default;
}
#bes .description {
    position: absolute;
    font-size: calc(var(--size-index) * .8);
    top: 20vh;
    left: 8vw;
    max-width: 24vw;
    transition: opacity var(--transition), transform var(--transition);
}
#bes .description p {
    opacity: .9;
    transition: transform var(--transition);
    transition-duration: 3s;
}
#bes .description.hidden {
    opacity: 0;
    transform: translateY(5vh);
}
#bes .description.hidden p{
    transform: translateY(2vh);
}
#bes .logo {
    font-size: calc(var(--size-index) * 1.6);
    font-weight: 900;
    background: linear-gradient(45deg, #f36100, #884985, #7c1212 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* text-transform: uppercase; */
}


/* mouse scroll*/

.icon-scroll {
	position: absolute;
	top: 70%;
	left: -16%;
  width: 1em;
	height: 3.125em;
	transform: translateX(-50%) scale(2);
	z-index: 99999;
}

.icon-arrows::after,
.icon-arrows::before {
  content: '';
}
.icon-arrows span,
.icon-arrows::after,
.icon-arrows::before {
	display: block;
	width: 0.315em;
	height: 0.315em;
	border-right: 1px solid rgba(255,255,255,.8);
	border-bottom: 1px solid rgba(255,255,255,.8);
	margin: 0 0 0.125em 0.315em;
	transform: rotate(45deg);
  animation: mouse-scroll 1s infinite;
	animation-direction: alternate;
}

.icon-arrows::before {
	margin-top: 0.315em;
	animation-delay: .1s;
}

.icon-scroll span {
	animation-delay: .2s;
}

.icon-arrows::after {
	animation-delay: .3s;
}

.icon-scroll .mouse {
	height: 1.375em;
	width: .875em;
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 2em;
}

.icon-scroll .wheel {
  position: relative;
  display: block;
  height: 0.1875em;
  width: 0.1875em;
  margin: 0.1875em auto 0;
  background: rgba(255,255,255,.8);
  animation: mouse-wheel 1.2s ease infinite;
  border-radius: 50%;
}

@keyframes mouse-wheel {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(.375em);
	}
}

@keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}

/*mouse scroll yan*/

.icon-scroll2 {
	position: absolute;
	top: 80%;
	right: 30%;
  width: 1em;
	height: 3.125em;
	transform: translateX(-50%) scale(2);
	z-index: 99999;
}
.icon-arrows2{
    transform: rotate(90deg);
    display: inline-block;
}

.icon-arrows2::after,
.icon-arrows2::before {
  content: '';
}
.icon-arrows2 span,
.icon-arrows2::after,
.icon-arrows2::before {
	display: block;
	width: 0.315em;
	height: 0.315em;
	border-right: 1px solid rgba(255,255,255,.8);
	border-bottom: 1px solid rgba(255,255,255,.8);
	margin: 0 0 0.125em 0.315em;
	transform: rotate(45deg);
  animation: mouse-scroll 1s infinite;
	animation-direction: alternate;
}

.icon-arrows2::before {
	margin-top: 0.315em;
	animation-delay: .1s;
}

.icon-arrows3{
    transform: rotate(-90deg);
    display: inline-block;
    position: absolute;
    top: 6px;
    right: -45px;
}

.icon-arrows3::after,
.icon-arrows3::before {
  content: '';
}
.icon-arrows3 span,
.icon-arrows3::after,
.icon-arrows3::before {
	display: block;
	width: 0.315em;
	height: 0.315em;
	border-right: 1px solid rgba(255,255,255,.8);
	border-bottom: 1px solid rgba(255,255,255,.8);
	margin: 0 0 0.125em 0.315em;
	transform: rotate(45deg);
  animation: mouse-scroll 1s infinite;
	animation-direction: alternate;
}

.icon-arrows3::before {
	margin-top: 0.315em;
	animation-delay: .1s;
}

.icon-scroll2 span {
	animation-delay: .2s;
}

.icon-arrows2::after {
	animation-delay: .3s;
}
.icon-arrows3::after {
	animation-delay: .3s;
}

.icon-scroll2 .mouse {
	height: 1.375em;
	width: .875em;
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 2em;
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 25px;
}

.icon-scroll2 .wheel {
  position: relative;
  display: block;
  height: 0.1875em;
  width: 0.1875em;
  margin: 0.1875em auto 0;
  background: rgba(255,255,255,.8);
  animation: mouse-wheel 1.2s ease infinite;
  border-radius: 50%;
}

.third{
   
   background-image: linear-gradient(128deg,#000000,#000000,#23abf4); 
   color: white;
}

.four{
    /* background-image: linear-gradient(128deg,#000000,#00debb);  */
    background-image: linear-gradient(128deg,#000000,#000000,#67b4d5); 
    color: white;
 }

 .five{
    /* background-image: linear-gradient(128deg,#000000,#de9400);  */
    background-image: linear-gradient(128deg,#000000,#000000,#5fb7dd); 
    color: white;
 }

 .six{
    /* background-image: linear-gradient(128deg,#000000,#de4a00);  */
    background-image: linear-gradient(128deg,#000000,#000000,#93defe); 
    color: white;
 }

 .seven{
    /* background-image: linear-gradient(128deg,#000000,#9100de);  */
    background-image: linear-gradient(128deg,#000000,#000000,#409cce);
    color: white;
 }

 .eight{
    /* background-image: linear-gradient(128deg,#000000,#de0000);  */
    background-image: linear-gradient(128deg,#000000,#000000,#6abfec);
    color: white;
 }