:root {
  --green: #A8FF30;
  --white: #ECECEC;
  --grey: #333333;
  --blue: #152349;
  --red: #B20D08;
}

/* RESET */

body {
    background: #25292C;
    margin: 0;
    padding: 0;
    font-family: 'Glacial Indifference', 'Arial', sans-serif; 	
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
header nav ul li:nth-child(10) {display:none;}
.owl-dots {background: #25292C;}

.hide {display:none;}

/* HEADER */

header {width:100%; height:110px; line-height:104px; background-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 20%, rgba(0,0,0,1) 100%); position:absolute; top:0; left:0; z-index:10;}
.logo  {width:80px; height:40px; display:inline-block; background-position:0px 0px; position:absolute; top:15px; left:10px; text-indent:-5000px;}
header nav {background:#252525; position:absolute; right:0; /* width:40%; */ z-index:10; box-shadow: 5px 5px 345px 245px #000;}
header nav ul {list-style:none;}
header nav ul li {display:block; position:relative; line-height: 76px;}
header nav ul li a {text-decoration:none; color: #a8fe30; padding-left: 20px;}
header nav ul li a.active {color:#999999;}
header nav ul li a {color:#464646;font-size:20px;margin-right:37px;}

header a, footer a, ul, li, a, div, span, i {font-family: 'Glacial Indifference', 'Arial', sans-serif;}
header .right {position:absolute; top:0; right:0;}
.search, .subscribe, .bell {margin-top:20px; margin-right:10px; display:inline-block; cursor: pointer;}
.subscribe {cursor:pointer; background-color:#a8fe30; font-size:14px; border:1px solid #a8fe30; color:var(--black); padding:10px; border-radius:20px; line-height:16px; position:relative; top:-10px; transition: all 0.5s ease 0s;}
a.subscribe:hover {color:#000; box-shadow:0px 4px 24px 4px rgba(168, 254, 48,1);}


.login-regis {
    display:inline-block;
    background: none;
    color: var(--white);
    font-size: 0.9em;
    border-radius: 20px;
    margin-top: 5px;
    width:130px;
}
#display_name {
    border-radius: 20px;
    margin-left: 10px;
    margin-top: -10px;
    font-size: 1em;
    max-width:100%;
    overflow:hidden;
}
.login-regis img {position:absolute; top:0px; left:0; width:40px !important; height:40px !important; border-radius:20px;}

#search_box {position:absolute;height:100%;background:rgba(0,0,0,0.5);z-index:20;top:0;left:0;}
#search_box_overlay {position:absolute; top:0; left:0; width:100%; height:100px; z-index:-1; background:black;}
#search_box form {padding:0 40px;}
#q {margin:20px auto; padding:1rem; border-radius:20px; font-size:1.5rem; float:left; width:85%;}

.toggle {
  display: inline-block;
  cursor: pointer;
  margin:0 20px 0 10px;
  position:relative;
  z-index:20;
}

.b1, .b2, .b3 {  
  width: 35px;
  height: 5px;
  background-color: #666;
  margin: 6px 0;
  transition: 0.4s;
}

.change .b1 {transform: translate(0, 11px) rotate(-45deg);}
.change .b2 {opacity: 0;}
.change .b3 {transform: translate(0, -11px) rotate(45deg);}

.cross {
  position: absolute;
  right: 32px;
  top: 25px;
  width: 32px;
  height: 32px;
  opacity: 1;
  color:#FFF;
}
.cross:hover {
  opacity: 1;
}
.cross:before, .cross:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #FFF;
}
.cross:before {
  transform: rotate(45deg);
}
.cross:after {
  transform: rotate(-45deg);
}

#search_box {transition:4.4s; width:100%; opacity:1;}
#search_box.hide {width:0%; opacity:0;}

sup.free {
    background: #FFF;
    color: #333;
    font-size: 18px;
    padding: 10px;
    border-radius: 10px;
}
sup.sub {
    background: purple;
    font-size: 18px;
    padding: 10px;
    border-radius: 10px;
}
sup.vc {
    background: gold;
    color: #333;
    font-size: 18px;
    padding: 10px;
    border-radius: 10px;
}

.cms-content {max-width:1000px; margin:auto; margin-top:50px;}
.cms-content h1 {font-size:36px;}
#inner {margin-bottom:55px;}

.glow {background:var(--green);color:var(--black); animation: glow 1s ease-in-out infinite alternate;}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #456859, 0 0 40px #456859, 0 0 50px #456859, 0 0 60px #456859, 0 0 70px #456859;
	  box-shadow:0 0 20px 20px #0e3301;
	  background:#456859;
	  color:#FFF;
  }
  
  to {
    text-shadow: 0 0 310px #fff, 0 0 30px var(--green), 0 0 40px var(--green), 0 0 50px var(--green), 0 0 60px var(--green), 0 0 70px var(--green), 0 0 80px var(--green);
	  box-shadow:0 0 120px 20px var(--green);
	  background:var(--green);
	  color:#000;
  }
}


/* FOOTER */
footer {background:#212121; position:relative; text-align: center; padding: 2rem; color:var(--white); padding-bottom:50px; margin-top: auto;}
footer ul {padding-left:0;}
footer li {display:inline-block; margin-right:2.5rem;}
footer li:last-child, .social a:last-child {margin-right:0;}
footer li a {color:var(--green); font-size:1.05rem; text-decoration:none; transition: all 0.5s ease 0s;}
footer li a:hover {color:var(--white);}

.social {text-align:center; margin:20px 0 10px;}
.social .sprite {margin-bottom:10px; transition: all 0.5s ease 0s;}
.social .sprite:hover {filter: brightness(1.75); filter: saturate(0);}
.copyright {color:#ccc; text-align:center; font-size:1.05rem; letter-spacing:3px;}

#mobile {display: none; margin-top:50px;}

/* SPRITES */

.sprite {background:url(https://samuh.global.ssl.fastly.net/images/samuh-sprite.webp) no-repeat; border:0px solid #FFF;}

.play 	{width:53px; height:50px; display:inline-block; background-position:0px -66px;}
.trash 	{width:45px; height:50px; display:inline-block; background-position:-56px -66px;}

footer .fb,.insta,.x,.yt {margin-right:2.5rem;}

.f-logo {width:170px; height:80px; display:inline-block; background-position:-150px 0px; position:relative; left:0 top:0; text-indent:-5000px; margin-bottom:20px; transform: scale(0.7);}
.cloud 	{width:60px; height:32px; display:inline-block; background-position:-342px 0px;}
footer .fb 	{width:38px; height:32px; display:inline-block; background-position:-185px -118px;}
.insta 	{width:38px; height:32px; display:inline-block; background-position:-218px -120px;}
.x 		{width:38px; height:32px; display:inline-block; background-position:-260px -118px;}
.yt 	{width:38px; height:32px; display:inline-block; background-position:-141px -118px;}
.tiktok {width:38px; height:32px; display:inline-block; background-position:-297px -118px; margin-right:0;}
.search {width:38px; height:32px; display:inline-block; background-position:-330px -118px;}
.bell 	{width:38px; height:32px; display:inline-block; background-position:-367px -115px;}

#overlay {position:fixed; top:0px; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75);}

.banner {position:relative; width:100%; height:100%;}
.overview {color:#fff; position:relative; left:60px; width:600px; top:45%; text-wrap:wrap;}
.overview ul {display:block; margin-right:200px; margin-left:0; padding-left:0;}
.overview ul li {float:left; margin-left:30px; font-size:18px;}
.overview ul li:first-child {margin-left:0; padding-left:0; list-style:none;}
.overview heading {font-size:48px; font-weight:600; clear:both; display:block; position:relative; top:12px;}
.overview p {font-size:23px;}
.overview .actions {position:relative; top:30px;}
.overview .actions a {background:rgba(255,255,255,0.25); box-shadow: 0 0 10px 0px #fff; text-decoration:none; font-size:22px; color:#ccc; padding:8px 20px; border:1px solid #ccc; border-radius:20px; margin-right:20px;}
.actions a:hover {background:#a8fe30; color:#000; box-shadow:0px 4px 24px -4px rgba(168, 254, 48,1);}

.add-to-fav.selected {background:var(--green) !important; color:var(--black) !important;}

.hslider .slider-img .volume, .hslider .slider-img .close a {
    background-color: rgba(0, 255, 0, 0.5);
    padding: 27px 31px;
    border-radius: 20px;
	border:0;
}

.volume {box-shadow:none !important;}

/* RESPONSIVE */

@media only screen and (max-width: 1200px) 
{ 
	html,body { font-size:1rem; }
	footer li {margin-right:10px;}
	.logo {top:16px; left:16px;}
	.social .sprite {margin-right:2rem; margin-bottom:10px;}
	.right {zoom:75%;}
	.right .btn:nth-child(1) {padding:10px !important; margin-top: -7px !important;}
	header .right {top:-10px !important;}
	.bell {margin-right:0 !important;}
	#profile-menu {top:81px !important;}
	section.hero-section {margin-top:-70px !important;}
	header nav ul li {display:block; position:relative; line-height: 76px; border-bottom:1px solid #494949;}
	header nav ul li a {text-decoration:none; color: #999999; padding-left: 20px;}
	.weekend-faq-list.show-faq {width:340px !important;}
	.player-assets {display:none;}

	#display_name {padding-left:24px;}

	.home-slider.owl-carousel {
	    max-height: 400px;
	}
	.slider-content {
	    scale: 0.75;
	    top: 60px !important;
	    left: -100px;
	}

	sup.sub {
	    font-size: 14px;
	    padding: 6px;
	    position: relative;
	    top: -1px;
	}


}
@media only screen and (min-width: 600px) {...}
@media only screen and (min-width: 768px) {...}
@media only screen and (min-width: 992px) {
	.f-logo {position:relative; top:0; left:0;}
}
@media screen and (min-width: 1024px) {
  #mobile {
    display: none; /* Ensure #mobile is hidden on desktops */
  }
}
@media screen and (max-width: 1023px) {
  section, header, footer {
  /*  display: none; */
  }
  #mobile {
    display: block;
  }
}
@media only screen and (min-width: 1200px) {
	.logo 	{width:80px; height:40px; display:inline-block; background-position:0px 0px; float:left; position:relative; top:30px; left:40px;}
	.f-logo {transform: scale(1);}
	.toggle {display:none;}

	.player-assets {
	        position: relative;
        	top: 20px;
		left: -20px;
	}

	ul.category li:not(:last-child):after {
	    top: -15px;
	}	
	.login-regis {width: 160px;}

/*	section.movies .owl-carousel.owl-drag .owl-item {margin-right:-5px !important;} */

	.hide-caption .player-assets {
	    position: absolute;
	    top: 67vh;
	    left: -20px;
	    max-width: 1735px;
	    width: 100%;
	    padding: 0 15px;
	    z-index: 11;
	    margin: auto;
	}
	
	header nav {float:left; margin-left: 100px; display:block; background:transparent; /* max-width:780px; */ position:relative; box-shadow:none;}
	header nav.hide {display:block;}
	header nav ul {list-style:none; float:left;}
	header nav ul li {display:inline-block; position:relative;}
	header nav ul li a {text-decoration:none; color: #a8fe30; padding-left:0;}
	header nav ul li a.active {color:#a8fe30;}
	header nav ul li a {color:#ccc; font-size:20px; margin-right:1vw;}
	header nav a:hover {color:a8fe30;}
	header nav li a::before {
		content: "";
		position: absolute;
		left: 5%;
		bottom: -10px;
		width: 56px;
		height: 30px;
		background: url(https://samuh.global.ssl.fastly.net/images/active-menu.png) no-repeat 0 0;	
		display:none;
	}
	header nav li a.active::before,header nav li a:hover::before {    
		display:block;
	}
	#q {float:none;}
	header .cross {top:37px;}

	.search, .subscribe, .bell {margin-top:33px; margin-right:30px; display:inline-block;}
	.subscribe {background:var(--black); cursor:pointer; font-size:18px; border:1px solid #a8fe30; color:#CCC; padding:10px 40px; border-radius:20px; line-height:20px; position:relative; top:-10px;}
	a.subscribe:hover {background-color:var(--green); color:#000; box-shadow:0px 4px 24px 4px rgba(168, 254, 48,1);}
	
}

@media only screen and (min-width: 1900px) {
	header nav ul li a {color:#ccc; font-size:22px; margin-right:2.2vw;}
}