@font-face{font-family: "Montserrat";src: url("/fonts/Montserrat/Montserrat-Regular.woff2") format("woff2");font-display: swap;}
@font-face{font-family: "Montserrat";src: url("/fonts/Montserrat/Montserrat-SemiBold.woff2") format("woff2");font-weight: 600;font-display: swap;}
@font-face{font-family: "Montserrat";src: url("/fonts/Montserrat/Montserrat-Bold.woff2") format("woff2");font-weight: bold;font-display: swap;}
@font-face{font-family: "Maven Pro";src: url("/fonts/Maven_Pro/MavenPro-Regular.woff2") format("woff2");font-display: swap;}
@font-face{font-family: "Maven Pro";src: url("/fonts/Maven_Pro/MavenPro-SemiBold.woff2") format("woff2");font-weight: 600;font-display: swap;}
@font-face{font-family: "Maven Pro";src: url("/fonts/Maven_Pro/MavenPro-Bold.woff2") format("woff2");font-weight: bold;font-display: swap;}
* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
	color:white;
	touch-action: manipulation;
	}
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #4c4b55;}
::-webkit-scrollbar-thumb:hover {background: #333;}
body {margin:0; background: #000016;}
h1,h2,h3,h4,h5,h6 {font-family: "Maven Pro", sans-serif}
h1 {font-size: 1.9rem;}
h3 {font-size: 1.5rem;}
a {text-decoration:none; color: #3c82b7;}
a:hover, .Index_Best_Casinos a:hover, #BreadCrumbs a:hover {color:#ffae3f;}
ol, ul, figure {list-style: none; margin:0; padding:0;}
button {font-family: "Maven Pro", sans-serif; font-size: 1rem; border: none;}
p {line-height: 1.5;}
.CasinoOfTheMonth::before, .CasinoOfTheMonth::after, #IndexMain::before, #IndexMain::after, #TopMenu::before, #TopMenu::after,
#IndexMain header::after, #MainMenu ul::before, #MainMenu ul::after, #Index_SwedishLicense::before, #Index_SwedishLicense::after,
#MobileMenuButton.open ~ ul::before, #TopHeader > aside::before, #TopHeader > aside::after, .Rank::after {
	content:"";
	position: absolute;
	left:0.4rem;
	top:0.4rem;
	height: calc(100% - 0.8rem);
	pointer-events:none;
	}
.CasinoOfTheMonth::after, #IndexMain::after, #TopMenu::after, #IndexMain header::after, #MainMenu ul::after,
#Index_SwedishLicense::after, #GameProviders li::after, #MobileMenuButton.open ~ ul::after, #TopHeader > aside::after,
.Rank::after
{/*width: 50%; background: rgba(255,255,255,0.1);*/}

	/* BREADCRUMBS*/
#BreadCrumbs {margin: 0 auto; width:60%;}
#BreadCrumbs a {
    padding: 1rem 0;
    text-decoration: underline;
    display: inline-block;
    font-weight: 600;
	color: white;
	}
#BreadCrumbs span {
    padding: 1rem 0.2rem;
    font-weight: 600;
	}
	/*HALF WHITE IN BOXES DESIGN*/
.PrimaryMenuSlider > ul::before,
#SidebarToMainTopSliderBox section::before,
#IndexDidYouKnow article::before, #FooterPagesTopBorder::before, 
#SidebarToMainTopSliderBox button::before {
	content:"";
	position: absolute;
	left:0;
	top:0;
	width: 50%;
	height: 100%;
	background: rgba(255,255,255,0.1);
	pointer-events:none;
	}
#TopHeader > aside {
	background: linear-gradient(45deg, #ffbc00, #ff0058);
	box-shadow: 0 0 0.4rem #000;
	z-index:2;
	height: 4.5rem;
	position: relative;
	padding: 0 0 0.4rem 0;
	text-align: center;
	}
#TopHeader > aside::before, #TopHeader > aside::after, #TopMenu::before, #TopMenu::after{
	z-index: -1;
	left:0;
	top:0;
	height: calc(100% - 0.4rem);
	}
#TopHeader > aside::before, #TopMenu::before {background: rgba(0,0,0,0.6); width: 100%; box-shadow: 0 0 10px 0 #111 inset;}
#TopHeader > aside a {
    display: inline-block;
    font-family: "Maven Pro", sans-serif;
    color: #ffae3f;
    height: 100%;
    align-content: center;
    padding: 0 0.5rem;
	}
#TopHeader > aside img {
    padding: 0.3rem 0rem;
    height: 100%;
	}
	/*TOP MENU*/
.block {display: block !important;}
#TopMenu {
	background: linear-gradient(45deg, #4b310e, #700127);
	box-shadow: 0 0 0.4rem #000;
	z-index:1;
	position: relative;
	padding: 0 0 0.4rem 0;
	font-weight: 600;
	height: 3.5rem;
	}
#MainMenu{display:flex; justify-content: center; height: 100%;}
#MainMenu button{height:100%; width: 100%; color:#ffae3f; background-color: unset; position: relative; font-weight: 600;}
#MainMenu button:hover, #MainMenu a:hover {color:#ffcf69;}
#MainMenu button.focus{color:#ffcf69; background-color:rgba(0,0,0,0.6);}
#MainMenu button svg{
	width:1rem;
	height:1rem;
	margin:0 0 0 0.5rem ;
	display: inline-block;
	vertical-align:top;
	transition: all 0.8s ease;
	}
.rotate {transform: rotate(180deg);}
.st0.filler {fill: rgb(255, 229, 143);}
#MainMenu > li > a {
	display: inline-block;
	font-family: "Maven Pro", sans-serif;
	color:#ffae3f;
	height:100%;
	width: 100%;
	align-content: center;
	text-align: center;
	padding: 0 0.5rem;
}
#MainMenu ul{
	display: none;
	background: linear-gradient(45deg, #ffbc00, #ff0058);
	position:absolute;
	top:100%;
	padding: 0.4rem 0;
	box-shadow: 0 0.1rem 0.25rem #000;
	z-index:1;
	}
#MainMenu ul::before, #MainMenu ul::after {left:0;}
#MainMenu ul::before {
	background:rgba(0,0,0,0.6);
	width:100%;
	box-shadow: 0 0 10px 0 #000 inset;
	z-index:-1;
	}
#MainMenu ul a {
	color:#ffae3f;
	border-top: thin solid black;
	display:block;
	padding: 0.75rem 0.75rem 0.75rem 0.5rem;
	white-space: nowrap;
	}
	/*MOBILE MENU*/
#MobileMenuButton {
	background: none;
	display: none;
	position: absolute;
    top: 0;
    right: 0;
    height: 4rem;
    padding: 0;
    z-index: 2;
	}
#MobileMenuButton:hover {background:#ffae3f;;}
#MobileMenuButton svg {height: 100%; aspect-ratio: 1;}
#MobileMenuButton line { stroke:#03030b; stroke-width:10; transition: 0.6s ease; transform-origin: 50% 50%;}
#MobileMenuButton.open line:first-of-type {transform: rotate(45deg) translateY(25px);}
#MobileMenuButton.open line:nth-of-type(2) {transform: scaleX(0);}
#MobileMenuButton.open line:last-of-type {transform: rotate(-45deg) translateY(-25px);}

	/*INDEX TOP SLIDER SECTION*/
#MainTopSlider, #MainTopHeader { width: 60%; margin: auto;}
#MainTopSlider {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-rows: auto auto;
	}
#MainTopHeader {display: flex;}
#MainTopSlider, #MainTopSlider::before, #MainTopHeader, #MainTopHeader::before {background: linear-gradient(45deg, #f4b132, #ff0058);}
.IndexSlider {margin:0 0.4rem 0 0; position: relative;}
.MainTopSliderPictures, .CasinoOfTheMonth img {width: 100%; display:block;}
#MainTopSliderPrev, #MainTopSliderNext {
/*background-image: url(../Images/arrow_slide_right_2.png);*/
background-color: rgba(0,0,0,0.6);
/*background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
background-position: center;*/
width:10%;
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
padding-left:1%;
padding-right:1%;
position:absolute;
top: 0;
bottom: 0.4rem;
transition:0.5s;
}
/*#MainTopSliderPrev{transform: rotate(180deg);}*/
#MainTopSliderNext{right: 0;}
#MainTopSliderPrev:hover, #MainTopSliderNext:hover {
	background-color: rgba(0,0,0,0.8);
	/*background-image: url(../Images/Arrow_Slide_Index.webp);*/
	}
#MainTopSliderProgressBar {height:0.4rem; background: #111;}
#MainTopSliderProgressBar div
{
height:100%;
width: 0%;
background: linear-gradient(45deg, #ffbc00,90%, #ffffff);
}

#IndexSliderSpan
{
position: absolute;
bottom: 0.7rem;
width:100%;
height:1rem;
text-align:center;
}

#IndexSliderSpan span
{
height:100%;
width:1.4rem;
display: inline-block;
background-color: #707070;
z-index:2;
margin: 0 0.1rem;
}
#IndexSliderSpan span.active{
	background: #ffbc00;
	animation: IndexSpanAni 0.7s ease-in-out;
	transform: scale(0.6);
}
@keyframes IndexSpanAni {
	from {transform: scale(0);}
	80% {transform: scale(0.65);}
	to {transform: scale(0.6);}
}
		/*INDEX MAIN TITLE*/
#IndexMainTitle, #MainTopHeader section, #MainTopHeader figure {
	background: rgba(0,0,0,0.8);
	box-shadow: 0 0 20px 0 #000 inset;
	grid-column: 1/3;
	margin: 0.4rem;
	flex-basis: 66.66%;
	}
#IndexMainTitle {padding: 1rem 2rem;}
#MainTopHeader figure {margin-left: 0; flex-basis: 33.34%;}
#MainTopHeader figcaption, #MainTopHeader caption {
	font-weight: bold;
    font-size: 1.5rem;
    font-family: "Maven Pro", sans-serif;
	background: rgba(0, 0, 0, 0.6);
    padding: 1rem 0;
	text-align: center;
	}
#MainTopHeader dl {display: grid; grid-template-columns: auto auto; padding: 1rem;}
#MainTopHeader dt {white-space: nowrap; font-weight: bold; padding: 0.5rem;}
#MainTopHeader dd {margin: 0; padding: 0.5rem;}
#MainTopHeader dt:nth-of-type(even), #MainTopHeader dd:nth-of-type(even) {background: #0000006b;}
#MainTopHeader section h2 {font-size: 2.5rem; margin: 2rem;}
#MainTopHeader p {padding: 0 2rem 2rem 2rem; margin: 0;}
#MainTopHeader img {
    width: 250px;
    aspect-ratio: 1;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.4);
    float: right;
	margin: 0 0 1rem 1rem;
	}
.UpperCase {text-transform: uppercase;}
		/*OUR CASINO OF CHOICE*/
.CasinoOfTheMonth{
	padding: 1rem 2rem;
	text-align: center;
	font-size:0.8rem;
	z-index:0;
	position: relative;
	}
.CasinoOfTheMonth header {text-wrap: nowrap;}
.CasinoOfTheMonth figure{border: 0.2rem solid #ff9d1a;}
.CasinoOfTheMonth a:first-of-type{
	font-weight:bold;
	background: linear-gradient(#ffbc00, #ff8e21);
	padding: 1rem;
	display:block;
	margin-bottom:1.3rem;
	color:#fff;
	border:0.3rem solid #ffae3f;
	transition: 0.5s;
	}
.CasinoOfTheMonth a:first-of-type:hover {
	background: linear-gradient(#ff8e21, #ffbc00);
	border:0.3rem solid #ffae3f;
	box-shadow: 0 2px 2px 0 #151515 inset;
}
.CasinoOfTheMonth::before{
	background: rgba(0,0,0,0.6);
	box-shadow: 0 0 20px 0 #000 inset;
	width: calc(100% - 0.8rem);
	z-index: -1;
	}
.CasinoOfTheMonth::before, .CasinoOfTheMonth::after {top: 0; height: 100%;}
	/*INDEX HEADER SLIDER*/
.IndexSlider aside{
	display: flex;
	height: calc(100% - 0.4rem);
    overflow-x: scroll;
	-ms-overflow-style: none;
  	scrollbar-width: none;
	}
.IndexSlider aside::-webkit-scrollbar{display: none;}
.IndexSliderImg{width: 100%;}
		/*INDEX MAIN CONTENT LIST*/
#IndexMain, #Index_SwedishLicense {
	position: relative;
	z-index:0;
	width:60%;
	margin: 0 auto 1rem auto;
	padding: 2rem 3rem;
	}
#IndexMain {background: linear-gradient(-45deg, #f4324f, #f4b132);}
#IndexMain::before, #Index_SwedishLicense::before {
	background: rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 20px 0 #111 inset;
    width: calc(100% - 0.8rem);
    z-index: -1;
	}
#IndexMain.ExtraMargin {margin: 2rem auto 1rem auto;}
.IndexA {margin: 2rem 0 1rem 0; display: block;}
/*
#IndexTopTenListContainer
{
padding: 2rem 3rem;
background: rgba(0,0,0,0.6);
box-shadow: 0 0 20px 0 #111 inset;
}
*/
#IndexTopTenListContainer p:nth-last-of-type(2) {font-style: italic;font-size: 0.9rem;}
					/*INDEX TOP TEN LIST CASINO*/
#TopTen li {
	background-color: rgba(22,22,22,0.5);
	/*font-family: "Maven Pro", sans-serif;*/
	height:9rem;
	display:grid; grid-template-columns: 6% min-content min-content 1fr 1fr 180px;
	margin: 1rem 0;
	font-size: 0.8rem;
	box-shadow: 0 2px 5px 0 #151515;
	}
.Rank::after {top:0; left:0; height:100%;}
.Rank {
	position: relative;
	background-color: #222222;
	font-size: 2.5rem; font-weight: bold; text-align: center; align-content: center;
	height: inherit;
	}
#TopTen li:first-child .Rank {background: #d4af37; font-size:3rem;}
#TopTen li:nth-child(2) .Rank {background-color: #aaa9ad; font-size:2.8rem;}
#TopTen li:nth-child(3) .Rank {background-color: #cd7f32; font-size:2.6rem;}
#TopTen li:nth-child(n + 10) .Rank {font-size:2rem;}
.Casino-Logo {position:relative; height: inherit;}
.Casino-Logo aside {
	position:absolute; bottom:0;
	width:100%; padding: 0.25rem 0;
	background-color: rgba(0,0,0,0.5);
	display: flex;
    justify-content: center;
    align-items: center;
	gap: 0.5rem;
    font-weight: bold;
	}
.Casino-Logo h2 {height: inherit; margin: 0; display: flex;}
.Casino-Logo img {height: inherit;}
/*#TopTen figure a {
	position: absolute;
    top: 0;
    left: 0;
    padding: 0.4rem;
    border-bottom-right-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
	}*/
.Casino-Logo aside div {font-size: 0.8rem;}
.Rating {
	height: 0.8rem;
	aspect-ratio: 5/1;
	position: relative;
	mask: url("/images/list-symbol/rating-symbol-mask.svg") no-repeat center / contain;
    -webkit-mask: url("/images/list-symbol/rating-symbol-mask.svg") no-repeat center / contain;
	background: #181818;
	}
.Rating::before {
    content: "";
    position: absolute; inset: 0;
    width: var(--rating);
    background: rgb(255, 217, 0);
	}
.Prov-Symbol {
	display: grid;
	grid-template-rows: repeat(5, 1fr);
	row-gap: 0.4rem;
	height: inherit; padding: 0.5rem 0.4rem;
	}
.Prov-Symbol figure {position:relative; height: 100%; aspect-ratio: 1;}
.Prov-Symbol figcaption {
	font-size:0.8rem; font-weight: bold; color:#000;
	position: absolute; top:0; left:130%;
	background-color: #eee;
	padding:0.25rem;
	border: thin solid black;
	white-space: nowrap;
	display: none;
	}
.Prov-Symbol figure:hover figcaption {display:inline;}
.BonusSection {
	text-align: center; font-weight: bold;
    margin: 0; padding-right: 0.4rem;
    align-content: center;
	display: flex; flex-direction: column;
	}
.BonusSection strong {font-size:1.4rem; color: #2c85fe;}
.Plus-Minus > strong {font-size:1.2rem; font-weight: 700; color: #2c85fe;}
.BonusSection p {margin: 0; line-height: 1.2; flex: 1; align-content: center;}
.BonusTabs {display: flex;}
.BonusTabs button {
	flex: 1;
    background: #0b1633;
    padding: 0.3rem;
    font-weight: bold;
	}
.BonusTabs button:hover {cursor: pointer; background: #2c85fe;}
.BonusTabs button.active {background: linear-gradient(#008fff, #4b21ff);}
.CasinoBonus, .SportBonus {height: 100%; display: none; padding: 0.5rem;}
.BonusSection:has([data-bonus="casino"].active) .CasinoBonus {display: flex;}
.BonusSection:has([data-bonus="sport"].active) .SportBonus {display: flex;}
.Casino-Visit {
	background-color: #303030;
	font-weight: bold; font-size: 0.6rem; text-align: center;
	}
.Casino-Visit > a {
	border: 0.3rem solid #1a57ff;
	font-size: 0.8rem; color: white; align-content: center;
	height:70%;
	background: linear-gradient(#008fff, #4b21ff);
	display: block;
	transition: 0.5s;
	text-transform: uppercase;
	}
.Casino-Visit > div {align-content: center; height: 30%; padding: 0.2rem;}
.Casino-Visit > div span {display: none;}
.Casino-Visit > a:hover, #MoreCasinos:hover {
	background: linear-gradient(#4b21ff, #0b01df);
	border:0.3rem solid #2b0fef;
	box-shadow: 0 2px 2px 0 #151515 inset;
	}
.Plus-Minus > strong.StrongRed {color: #f4324f;}
#MoreCasinos {
	display: block;
    justify-self: center;
    border: 0.3rem solid #1a57ff; background: linear-gradient(#008fff, #4b21ff);
    color: white; font-weight: bold;
    padding: 1rem; margin: 2rem 0 1rem 0;
    width: 30%;
    box-shadow: 0 2px 5px 0 #151515;
	cursor: pointer;
	transition: 0.5s;
	}
#MoreCasinos[hidden] {display: none;}
#GameProviders li {
	background-color: rgba(22,22,22,0.5);
	font-family: "Maven Pro", sans-serif;
	height:9rem;
	margin: 1rem 0;
	font-size: 0.8rem;
	border-radius: 10px;
	box-shadow: 0 2px 5px 0px #151515;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
#GameProviders {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;}
#GameProviders li {box-shadow: 0 3px 10px 1px #151515 inset;}
#GameProviders figure {height: 100%; padding: 0.5rem; justify-self: center;}
#GameProviders img {height: 100%;}
#GameProviders figcaption {text-align: center; margin-top: -1rem;}
#GameProviders li::after{content:"";}
.CasinoCategories button {
	background-color: rgba(22, 22, 22, 0.5);
    display: inline-flex; gap: 5px;
	align-items: center;
    padding: 0.5rem; margin: 0.2rem;
	border-radius: 50px;
	box-shadow: 0 2px 5px 0 #151515;
	transition: 0.5s;
	cursor: pointer;
	}
.CasinoCategories button:hover {box-shadow: 0 0 0 0 #151515; background-color: rgba(50, 50, 50, 0.8);}
.CasinoCategories button.active {box-shadow: 0 2px 5px 0 #151515 inset; background-color: rgba(50, 50, 50, 1);}
.CasinoCategories svg {width: 16px; aspect-ratio: 1; display: block;}
					/*INDEX BEST CASINOS*/
.Index_Best_Casinos_Container{
	width: 68%;
	margin: 2rem auto;
	display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 3rem;
	}
.Index_Best_Casinos a {color: white; font-family: "Maven Pro", sans-serif;}
.Index_Best_Casinos_Container:nth-of-type(2){margin: 2rem auto;}
.Index_Best_Casinos_Container button {background: none; padding: 0;}
.Index_Best_Casinos_Container button svg {height: var(--after-height);}
.ArrowBig, .ArrowMedium, .ArrowSmall {transition: stroke 0.5s ease, stroke-width 0.5s ease;}
.ArrowBig {stroke:#006dff;}
.ArrowMedium {stroke:#4494ff;}
.ArrowSmall {stroke:#7fb5ff;}
.Index_Best_Casinos_Container button:hover .ArrowBig, #MainTopSliderNext:hover .ArrowBig {animation: strokeChangeBig 1.2s ease-in-out infinite alternate;}
.Index_Best_Casinos_Container button:hover .ArrowMedium, #MainTopSliderNext:hover .ArrowMedium {animation: strokeChangeMedium 1.2s ease-in-out 0.2s infinite alternate;}
.Index_Best_Casinos_Container button:hover .ArrowSmall, #MainTopSliderNext:hover .ArrowSmall {animation: strokeChangeSmall 1.2s ease-in-out 0.4s infinite alternate;}
@keyframes strokeChangeBig {0% {stroke-width: 5; stroke: #006dff;} 100% {stroke-width: 2.5; stroke: #f4324f;}}
@keyframes strokeChangeMedium {0% {stroke-width: 4; stroke: #4494ff;} 100% {stroke-width: 2; stroke: #f4324f;}}
@keyframes strokeChangeSmall {0% {stroke-width: 3; stroke: #7fb5ff;} 100% {stroke-width: 1.5; stroke: #f4324f;}}
.ArrowBig.rev {stroke:#ff0026;}
.ArrowMedium.rev {stroke:#ff4444;}
.ArrowSmall.rev {stroke:#ff7f7f;}
.Index_Best_Casinos_Container button:hover .ArrowBig.rev, #MainTopSliderPrev:hover .ArrowBig.rev {animation: strokeChangeBigRev 1.2s ease-in-out infinite alternate;}
.Index_Best_Casinos_Container button:hover .ArrowMedium.rev, #MainTopSliderPrev:hover .ArrowMedium.rev {animation: strokeChangeMediumRev 1.2s ease-in-out 0.2s infinite alternate;}
.Index_Best_Casinos_Container button:hover .ArrowSmall.rev, #MainTopSliderPrev:hover .ArrowSmall.rev {animation: strokeChangeSmallRev 1.2s ease-in-out 0.4s infinite alternate;}
@keyframes strokeChangeBigRev {0% {stroke-width: 5; stroke: #ff0026;} 100% {stroke-width: 2.5; stroke: #006dff;}}
@keyframes strokeChangeMediumRev {0% {stroke-width: 4; stroke: #ff4444;} 100% {stroke-width: 2; stroke: #006dff;}}
@keyframes strokeChangeSmallRev {0% {stroke-width: 3; stroke: #ff7f7f;} 100% {stroke-width: 1.5; stroke: #006dff;}}
.Index_Best_Casinos {
	-webkit-mask-image: linear-gradient(270deg, transparent , black 30%, black 70%, transparent);
	mask-image: linear-gradient(270deg, transparent , black 30%, black 70%, transparent);
	padding:0 0 1.5rem 0;
	position: relative;
	min-width:0;
	}
.Index_Best_Casinos::after {
	width:50%;
	background: rgba(255,255,255,0.1);
	content: "";
    position: absolute;
    left: 0;
	/*height: var(--after-height);*/
	top: var(--header-height);
    bottom: 1.5rem;
    pointer-events: none;
}
.Index_Best_Casinos > header h2 {text-align: center; padding: 0.5rem; margin: 0;}
.Index_Best_Casinos, .Index_Best_Casinos::before {background: linear-gradient(270deg, #2c85fe, #f4324f);}
.Index_Best_Casinos > ul {
	background: rgba(0,0,0,0.2);
	box-shadow: 0 0 20px 0 #111 inset;
	user-select: none;
	display: flex;
	overflow-x: scroll;
	}
.carousel-list::-webkit-scrollbar {display: none;}
/*ÄNDRAD*/
/*.carousel-list::after{
	width:50%;
	background: rgba(255,255,255,0.1);
	content: "";
    position: absolute;
    left: 0;
	height: var(--after-height);
    bottom: 1.5rem;
    pointer-events: none;
	}*/
.carousel-list li{
	flex: 0 0 calc(100% / 5);
	border-left: 0.1rem dashed rgb(255 255 255 / 20%);
    box-shadow: 0 0 2px #000 inset;
	}
.carousel-list h2{width: 13rem;}
.carousel-list a {
	display: block;
	/*width: inherit;*/
    /*height: 100%;*/
	padding:1rem 1rem 2rem 1rem;
	}
.carousel-list a figure {
	/*height: inherit;*/
	/*display: flex;
    flex-direction: column;
    justify-content: flex-end;*/
	text-align: center;
	}
.carousel-list img {width: 100%; aspect-ratio: 1;}
		/*FOOTER FOR ALL PAGES*/
#FooterPages {padding-top: 0.3rem; position: relative; z-index: 0; background: linear-gradient(45deg, #ffbc00, #ff0058);}
#FooterPages::before, #FooterPages::after {
	content: '';
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 20px 0 #111 inset;
    z-index: -1;
    position: absolute;
    top: 0.4rem;
    height: calc(100% - 0.4rem);
    pointer-events: none;
	}
#FooterPages::after {width: 50%; background: rgba(255,255,255,0.1); box-shadow: unset;}
#FooterPagesInfoUs {margin: 0 5%;}
#ResponsibleGaming {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-column-gap: 3%;
	margin: 0 5%;
	}
#ResponsibleGaming h2 { margin-bottom:0; grid-column: 1/4;}
#ResponsibleGaming p {background: rgba(0,0,0,0.3); padding:1rem;}
#FooterPagesLogos {margin: auto; width: 40%;}
#FooterPagesLogos ul{display: flex; align-items: center; gap: 3rem;}
#FooterPagesLogos img {width: 100%;}
#Copyright {background: rgba(0,0,0,0.6); text-align: center; padding: 0.5rem 0; margin: 0;}
		/* HELP SECTION */
.GamRes li {margin: 1rem 0 1rem 1rem;}
.GameSection section {
	background-color: rgba(22, 22, 22, 0.5);
    box-shadow: rgb(21, 21, 21) 0px 2px 5px 0px;
	padding: 1rem; margin: 2rem 0;
	}
.GameSection section:first-of-type{margin: 0;}
.HelpSection {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr 1fr;
	gap: 1rem;
	}
.HelpSection header {grid-column: 1 / -1;}
.HelpSection section {
	background-color: rgba(22, 22, 22, 0.5);
    box-shadow: rgb(21, 21, 21) 0px 2px 5px 0px;
    padding: 0.5rem 1rem;
	}

		/* NO PAGE 404 */
#NoPage404 main{display: flex; padding:10rem 0;}
#NoPage404 main a{
	text-align: center;
	font-size: 2rem;
	background-color: white;
	border-radius: 5% 47%;
	padding: 5rem 4rem;
	margin: auto;
	box-shadow: 6px 8px 5px #333;
	color: black;
    display: inline-block;
	}
#NoPage404 h1 {margin:0; font-size:10rem; width:unset; color: black;}

@media screen and (max-width: 2100px){
	.Index_Best_Casinos_Container {width: 74%;}
}
@media screen and (max-width: 2000px){
	html{font-size: 90%;}
	#MainTopSlider, #MainTopHeader, #IndexMain, #BreadCrumbs {width: 70%;}
}
@media screen and (max-width: 1700px){
	
}
@media screen and (max-width: 1600px){
	html{font-size:80%;}
	#MainTopSlider, #MainTopHeader, #IndexMain, #BreadCrumbs {width: 80%;}
	
	.Index_Best_Casinos_Container{width: 88%;}
	}	
@media screen and (max-width: 1439px){
	#IndexMain, #BreadCrumbs{width: 80%;}
	.Index_Best_Casinos_Container {width: 98%;}
	}
@media screen and (max-width: 1200px){
	html{font-size:75%;}
	#MainTopSlider, #MainTopHeader, #IndexMain, #BreadCrumbs {width: 90%;}
	#NoPage404 h1 {font-size:4rem;}
	#NoPage404 main a {font-size:1.5rem;}
	}
@media screen and (max-width: 1100px){
	.carousel-list li {width: 150px;}
	.Index_Best_Casinos_Container {gap: 0;}
	}
@media screen and (max-width: 1020px){
	#IndexMain{width: 90%;}
	#MainTopSlider, #MainTopHeader, #IndexMain, #BreadCrumbs {width: 96%;}
	.BonusSection strong {font-size: 1.2rem;}
	}
@media screen and (max-width: 950px){
	#IndexMainTitle {grid-column: 2;}
	.IndexSlider {grid-column: 1/3; margin: 0 0.4rem;}
	.CasinoOfTheMonth {grid-row: 2;}
	.CasinoOfTheMonth::before {width:calc(100% - 0.4rem); top: 0.4rem; height: calc(100% - 0.8rem);}
	#MainTopSlider {grid-template-columns: 33% auto;}
	#FooterPagesLogos {width: 60%;}
}
@media screen and (max-width: 770px){
	#GameProviders {grid-template-columns: repeat(3, 1fr);}
	#GameProviders li {margin: unset;}
	}
@media screen and (max-width: 767px){
	#MainTopHeader {flex-direction: column;}
	#MainTopHeader figure {margin: 0 0.4rem 0.4rem 0.4rem;}
	.HelpSection { grid-template-columns: 1fr;}
	}
@media screen and (max-width: 750px){
	#TopTen li {
		display: grid;
		/*grid-template-columns: 30% min-content 1fr;*/
		grid-template-columns: 30% 70%;
        grid-template-rows: 3rem auto auto;
		height: unset;
		}
	#TopTen li:first-child .Rank, #TopTen li:nth-child(2) .Rank, #TopTen li:nth-child(3) .Rank, .Rank {font-size: 2rem;}
	.Rank, .Casino-Visit, .Plus-Minus {grid-column: 1 / 4;}
	.BonusSection {padding: 0;}
	.Casino-Logo img, .Prov-Symbol, .BonusSection, .Plus-Minus, .Casino-Visit, .Rank {width: 100%;}
	.Casino-Visit > div {height: unset; padding: 0.5rem;}
	.Casino-Visit > div span {display: inline;}
	.Casino-Visit > a {height: unset; padding: 1.2rem;}
	.Casino-Visit br {display: none;}
	.Plus-Minus {padding: 0 2rem;}
	.Rank {box-shadow: 0 1px 2px #333; z-index: 2;}
	.Casino-Logo aside div{font-size: 1.3rem;}
	.Rating {height: 1.3rem;}
	#MoreCasinos {width: 100%;}
	.BonusTabs button {padding: 0.6rem 0.3rem;}
	.Prov-Symbol {display: none;}

	}
@media screen and (max-width: 660px){
	#MobileMenuButton {display: block;}
	#MainMenu {display: none;}
	#MobileMenuButton.open ~ ul {
		display: flex;
        flex-direction: column;
        position: fixed;
        background: linear-gradient(45deg, #ffbc00, #ff0058);
        box-shadow: 0 0.1rem 0.25rem #000;
        padding: 5rem 2rem;
        z-index: 1;
        height: 100vh;
        width: 100%;
        justify-content: flex-start;
	}
	#MobileMenuButton.open ~ ul::before {
    	background: rgba(0, 0, 0, 0.6);
    	width: calc(100% - 0.8rem);
    	box-shadow: 0 0 10px 0 #000 inset;
    	z-index: -1;
	}
	#TopMenu {height: 0; padding: 0; position: initial;}
	#MainMenu li {margin: 2rem 0 0 0;}
	#MainMenu button, #MainMenu li a {
		background: rgba(0, 0, 0, 0.4);
        height: 4rem;
		border: 0.2rem black;
		border-radius: 4px;
        box-shadow: 0 0 4px #000 inset;
		align-content: center;
	}
	#TopMenu::before, #TopMenu::after, #MainMenu ul::before, #MainMenu ul::after {content: unset;}
	#MainMenu ul {
		position: initial;
		background: none;
		box-shadow: none;
		padding: 0 0 0 2rem;
	}
	.CasinoOfTheMonth figure {width: 60%; margin: auto;}
	.CasinoOfTheMonth a:first-of-type {width: 60%; margin: 0 auto 1.3rem auto;}
	#MainMenu li li a {padding: 0 0 0 2rem;}
	#MainTopSlider {display: flex; flex-direction: column;}
	.CasinoOfTheMonth {order: 2;}
	.CasinoOfTheMonth::before {width:calc(100% - 0.8rem); height: calc(100% - 0.4rem);}
	#IndexMainTitle {order: 3;}
	.carousel-list li{flex: 0 0 calc(100% / 3);}
	.Index_Best_Casinos_Container button{display: none;}
	#TopHeader > aside.fixed {position: fixed; width: 100%;}
	#MobileMenuButton.fixed {position: fixed;}
	#ResponsibleGaming {display: flex; flex-direction: column;}
	#FooterPagesLogos {width: 70%; gap: 2rem;}
}
@media screen and (max-width: 560px){
	#MainTopHeader img {width: 45%;}

	}
@media screen and (max-width: 500px){
	.Casino-Logo aside div{font-size: 1rem;}
	.Rating {height: 1rem;}
	}
@media screen and (max-width: 426px){
	#GameProviders {grid-template-columns: repeat(2, 1fr);}
	#IndexMain {padding: 2rem 1.5rem;}
	#FooterPagesLogos {width: 95%;}
	#NoPage404 main a {padding: 5rem 2rem;}
	}
@media screen and (max-width: 380px){
	#GameProviders {grid-template-columns: repeat(1, 1fr);}
	.Casino-Logo aside div{font-size: 0.8rem;}
	.Rating {height: 0.8rem;}
	}





@media print {
	#TopMenu {display: none;}
	#MainTopSlider {display: none;}
	}