@font-face {
    font-family: "mainFontBannerSlider";
    src: url('fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: "titleFontBannerSlider";
    src: url('fonts/Roboto-Regular.ttf');
}

:root {
    --bannerSliderHeight: clamp(200px, 30vw, 450px);
	--bannerSliderWrapperWidth: 100%;
	--ribbonContainerDisplay: block;
}

@media screen and (max-width: 1000px) {
    :root {
       --ribbonContainerDisplay: none;
    }
}

/* Remove all default styles for the <a> tag */
.bannerSliderUIcontainer a {
    color: inherit;        /* Inherits the color of its parent */
    text-decoration: none; /* Removes the underline */
    background-color: transparent; /* Removes any background color */
    outline: none;         /* Removes the outline that may appear on focus */
}

/* Additional styles for visited, hover, focus, and active states */
.bannerSliderUIcontainer a:visited,
.bannerSliderUIcontainer a:hover,
.bannerSliderUIcontainer a:focus,
.bannerSliderUIcontainer a:active {
    color: inherit;        /* Keep the inherited color */
    text-decoration: none; /* No underline */
    background-color: transparent; /* No background color */
    outline: none;         /* No outline */
}

.bannerSliderUIcontainer {
	position: absolute;	
	top: inherit;
	left: 0;
	
	width: var(--bannerSliderWrapperWidth);
	height: var(--bannerSliderHeight);
	overflow: hidden;
}

.bannerSliderWrapper {
	width: var(--bannerSliderWrapperWidth);
	overflow: hidden;
	position: relative;
	z-index: -1;
	
	/*clip-path: polygon(
	  0 0,
	  0 95%,

	  2.5% 95.49%,  5% 95.95%,  7.5% 96.39%,
	  10% 96.8%,    12.5% 97.19%, 15% 97.55%,
	  17.5% 97.89%, 20% 98.2%,   22.5% 98.49%,
	  25% 98.75%,   27.5% 98.99%, 30% 99.2%,
	  32.5% 99.39%, 35% 99.55%,  37.5% 99.69%,
	  40% 99.8%,    42.5% 99.89%, 45% 99.95%,
	  47.5% 99.99%, 50% 100%,
	  
	  52.5% 99.99%, 55% 99.95%,  57.5% 99.89%,
	  60% 99.8%,    62.5% 99.69%, 65% 99.55%,
	  67.5% 99.39%, 70% 99.2%,   72.5% 98.99%,
	  75% 98.75%,   77.5% 98.49%, 80% 98.2%,
	  82.5% 97.89%, 85% 97.55%,  87.5% 97.19%,
	  90% 96.8%,    92.5% 96.39%, 95% 95.95%,
	  97.5% 95.49%, 100% 95%,
	  100% 0
	);*/
}

.bannerSlider {
	width: 200%;
    height: var(--bannerSliderHeight);    
	position: relative;
	overflow: visible;
	user-select: none;
	column-count: 2;
	column-gap: 0;		
	overflow: hidden;
}

.bannerSlide {
	width: 100%;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	color: RGBA(255, 255, 255, 1);
	text-shadow: 0px 0px 2px RGBA(0, 0, 0, 0.3), 0px 0px 30px RGBA(0, 0, 0, 0.6);
	font-size: 72px;
	letter-spacing: 0.1vw;
	overflow: hidden;
}

.bannerSlide .bannerTitle {
	position: relative;
	font-family: "titleFontBannerSlider";
	font-size: clamp(24px, 4vw, 0.7em);
	text-transform: uppercase;
	font-weight: bold;
	padding-top: calc(var(--bannerSliderHeight) * 0.15);
	padding-left: 18%;
	letter-spacing: 0.1vw;
}

.bannerSlide .bannerText {
	position: absolute;
	bottom: calc(var(--bannerSliderHeight) * 0.2);	
	font-size: clamp(14px, 2.5vw, 0.4em);
	font-weight: normal;	
	padding-left: 18%;
	padding-right: 18%;
	text-align: left;
	font-family: "mainFontBannerSlider";
}

.bannerSlide .bannerBackgroundImage {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -9;
	top: 0;
	left: 0;
	
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left top;
    background-size: cover;
	
	transform-origin: top left;
	transition: transform 16s linear;
	overflow: hidden;
}

.bannerSlide.inView .bannerBackgroundImage {
	transform: scale(1.02) translate3d( 0, 0, 0) perspective(1px); /* Perspective is required for Firefox to be smooth. */
	overflow: hidden;
}

.bannerSliderDotContainer {
	position: absolute;
	width: 100%;
	left: 50%;
    transform: translateX(-50%);
	top: clamp(3px, calc(2vw - 10px), 30px);
	
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.bannerSliderDot {
	--bannerSliderDotWidth: clamp(10px, 1vw, 15px);
	
	display: inline-block;
	
	margin-left: 3px;
	margin-right: 3px;
	
	border-radius: 100%;
	background: RGBA(200, 200, 200, 0.9);
	border: 1px solid RGBA(0, 0, 0, 0.1);
	
	height: var(--bannerSliderDotWidth);
	width: var(--bannerSliderDotWidth);
	min-height: var(--bannerSliderDotWidth);
	min-width: var(--bannerSliderDotWidth);
	
	cursor: pointer;
	transition: transform 0.5s ease-in-out;
	position: relative;
	z-index: 3;
}

.bannerSliderDot:hover {
	background: RGBA(255, 255, 255, 0.8);
}

.bannerSliderDot.activeDot {
	background: RGBA(255, 255, 255, 0.9);
	transform: scale(1.2);
}

.downArrowContainer {
	--downArrowContainerWidth: 40px;
	
	position: absolute; 
	
	left: 50%;
    transform: translateX(-50%);
	
	bottom: 10px; 	
    border-radius: 999px; 
	border: 2px solid white;
	width: var(--downArrowContainerWidth); 
	height: var(--downArrowContainerWidth);    
    font-size: 36px;
    box-shadow: initial;										
    opacity: 0.4;
    transition: opacity 1s;
	cursor: pointer;
	color: white;
	text-align: center;
	z-index: 90;
	font-weight: bold;
	user-select: none;
}

.downArrowContainer:hover {
    opacity: 0.8;
}

.downArrowContainer .bannerSliderDownArrow {
	position: relative;	
	color: white; 
	background-image: url('down_arrow.png'); /* It is actually an up arrow . . . */
	background-repeat: no-repeat; width: 100%; 
	height: 100%; 
	left: 5px;
	top: -4px;
    right: 0;
    margin-left: auto;
    margin-right: auto; 
	filter: invert(1) brightness(2);
	transform: scaleY(-1); /* so we need to transform it upside down. */
}

.ribbonContainer {
	display: var(--ribbonContainerDisplay);
	
	width: clamp(200px, 20vw, 20vw);
	
	position: absolute;
	top: calc(var(--bannerSliderHeight) * 0.15);
	right: 0;
}

.ribbon {
	background: RGBA(245, 245, 245, 0.9);
	padding: 15px;
	padding-left: 30px;
	padding-right: 0;
	margin-top: 10px;
	margin-bottom: 30px;
	font-size: 24px;
	font-weight: bold;
	color: RGB(25, 0, 102);
	user-select: none;
	transition: 0.3s;
	transform-origin: 100% 50%;
}

.ribbon:nth-child(2) {
	position: relative;
	margin-left: auto;
	width: 66%;
	
}

.ribbon a {
	text-decoration: none;
}

.ribbon:hover {
	background: RGBA(255, 255, 255, 0.9);
	color: RGB(128, 0, 0);
	transform: scale(1.1);
	cursor: pointer;
}

.bannerSlide ul {
	list-style-type: disc;
	list-style-position: outside;
	margin: 0;
	padding: 0;
	margin-left: clamp(2vw, calc(2vw + 5px), calc(2vw + 5px));
}