/*Global*/
 @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);

 body {
 	font-family: 'Roboto', sans-serif;
 	background: #f0f0f0;
 }

 .content {
 	padding-bottom: 50px;
 }
 /*Naigation*/
 .navbar {
 	background: #152440;
 	margin-bottom: 0;
 	border-radius: 0;
 }

.navbar.fixed-top.bg-dark {
	background-color: #152440 !important;
}
 .navbar-nav>li {
 	float: left;
 }
 .navbar-default .navbar-toggle {
 	border-color: transparent; 
 }
 .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
 	background-color: transparent; 
 }
 .navbar-default .navbar-toggle .icon-bar {
 	background-color: #f0f0f0;
 }
.bot-nav li.dropdown {
	list-style: none;
}
.bot-nav {
	min-height: 0;
	background: #8c8c8c;
	position: fixed;
	top: 56px; /* directly beneath the fixed top navbar (approx 56px high) */
	left: 0;
	right: 0;
	z-index: 1030;
	border: none!important;
	padding: 2px 0;
}

.bot-nav.navbar {
	min-height: 0;
	padding-top: 2px;
	padding-bottom: 2px;
}

.bot-nav .container-fluid,
.bot-nav .navbar-indieplaya {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.navbar-indieplaya {
	background-color: #8c8c8c !important;
	border: none !important;
	min-height: 0;
}

.bot-nav .btn.btn-primary.dropdown-toggle {
	background-color: #8c8c8c;
	border-color: #8c8c8c;
	color: #ffffff;
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
	line-height: 1.1;
}

.bot-nav .btn.btn-primary.dropdown-toggle:hover,
.bot-nav .btn.btn-primary.dropdown-toggle:focus,
.bot-nav .btn.btn-primary.dropdown-toggle:active,
.bot-nav .btn.btn-primary.dropdown-toggle.show {
	background-color: #7f7f7f;
	border-color: #7f7f7f;
	color: #ffffff;
}

.bot-nav .dropdown-menu > li > a {
	color: #496bb2;
}

.bot-nav .dropdown-menu > li > a:hover,
.bot-nav .dropdown-menu > li > a:focus,
.bot-nav .dropdown-menu > li > a:active {
	color: #496bb2;
}

 .navbar-form {
 	border-bottom: none;
 	-webkit-box-shadow:none;
 	box-shadow: none; 
 }
 #bs-example-navbar-collapse-1 > ul > li {
 	border:none;
 }
 #bs-example-navbar-collapse-1 > ul > li > a {
 	color: #f0f0f0;
 }
 #bs-example-navbar-collapse-1 > ul > li > a:hover,#bs-example-navbar-collapse-1 > ul > li > a:active,#bs-example-navbar-collapse-1 > ul > li > a:focus {
 	background-color: #575757;
 }
 .navbar-default .navbar-nav>.open>a {
 	background: #575757;
 }
 .bot-nav > .container > ul > li > a {	
 	background: #575757;
 }

 .navbar-brand {
 	float: left;
 	height: 50px;
 	padding: 8px 15px;
 }

 .navbar-brand > img {
 	max-width: 170px;
 }

 .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
 	background-color: transparent;
 	border-color: #d5d5d5;
 }
 .navbar-nav>li>.dropdown-menu {
 	background: #f8f8f8;
 	color: #f0f0f0;
 }
 .navbar-nav>li>a {
 	text-decoration: none !important;
 }
 .dropdown-menu>li>a {
 	display: block;
 	padding: 3px 20px;
 	clear: both;
 	font-weight: 400;
 	line-height: 1.42857143;
 	color: #242a6f;
 	white-space: nowrap;
 }
 .dropdown-menu>li>a:hover {
 	color: #242a6f;
 	text-decoration: underline;
 	background: transparent;
 }
 .nav>li {
 	border-right: 1px solid #274275;  
 }
 .nav>li:first-child {
 	border-left: 1px solid #274275;
 }
 .nav > li > a {
 	color: #d5d5d5;
 	font-size: 15px;
 }
 .form-group {
 	position: relative;
 }
 .search-btn {
 	background: #496bb2;
 	margin-left: -5px;
 	border-radius: 0 4px 4px 0;
 	position: absolute;
 	right: -5px;
 	top: 0;
 }
 .search-btn i {
 	color: #f0f0f0;
 }
 .form-control.search-input {
 	border-radius:4px 0 0 4px;
 	width: 100%;
 }
 /* content */
 .mid-section {
 	padding-bottom:40px;
 }
 .nav-tabs >  li {
 	border: none;
 }
 .nav-tabs >  li:first-child {
 	border: none;
 }

 .nav-tabs >  li > a {
 	font-size: 16px;
 	color: #575757;
 	font-weight: 500;
 }
 .my-icon {
 	position: relative;
 }
 .my-icon > i {
 	position: absolute;
 	display: inline-block;
 	width: 0;
 	height: 0;
 	line-height: 0;
 	border: 1.5em solid #f0f0f0;
 	border-bottom: 1.5em solid transparent;
 	left: 0em;
 	top: 0em;
 }
 .bookmark {
 	width: 42px;
 	height: 42px;
 	position: absolute;
 	top: 0;
 	right: 50px;
 }
 .yung-unknows {
 	border-radius: 0 20px 0 0;
 }
 .star-bookmark {
 	position: absolute;
 	top: 5px;
 	left: 11px;
 }
 /*** basic styles ***/

 label { font-size: 22px; }

 /*** custom checkboxes ***/

 .star-bookmark input[type=checkbox] { display:none; } /* hide checkbox only for star-bookmark UI */
 .star-bookmark input[type=checkbox] + label:before {
 	font-family: FontAwesome;
 	display: inline-block;
 }

 .star-bookmark input[type=checkbox] + label:before { content: "\f005";color: #31497e; } /* unchecked icon */
 .star-bookmark input[type=checkbox]:checked + label:before {  content: "\f005"; color: #f7cb00;} /* checked icon */
 .side-bar img {
 	margin: 40px auto
 }
 .side-bar h2 {
 	color: #242a6f;
 	font-size: 26px;
 }
 .side-bar p {
 	color: #575757;
 	font-size: 16px;
 } 
 .slider {
 	background: #fff;
 	border-radius: 0 5px 5px 5px;
 	border:1px solid #ddd;
 	border-top: none;
 	padding: 25px;
 	margin-bottom: 20px;
 }
 .slide-headline-overlayer {
 	color: #575757;
 	font-size: 16px;
 }
 .slide-headline-overlayer p {
 	margin-bottom: 30px;
 }
 .rate  {
 	position: absolute;
 	bottom: 0;
 	margin-bottom: 5px;
 }
 .rate .starrr i {
 	color: #f7cb00;
 	margin-right: 6px;
 	font-size: 18px;
 }
 .custom-fa {
 	color: #e3e4de!important;
 }
 .item:focus,.item:active {
 	outline: none!important;
 }
 .item img {
 	width: 100%;
 }
 .slick-prev {
 	height: 60px;
 	width: 25px;
 	position: absolute;
 	top: 35%;
 	left: -29px;
 	border: none;
 	background: #31497e;
 	color: #f0f0f0;

 }
 .slick-next {
 	height: 60px;
 	width: 25px;
 	position: absolute;
 	top: 40%;
 	right: -29px;
 	border: none;
 	background: #31497e;
 	color: #f0f0f0;

 }
 .flex-row > div > .bookmark {
 	right: 2px;
 	top:4px;
 }
 .flex-row > div > .bookmark > .star-bookmark {
 	font-size: 18px;
 	left: 6px;
 	top: 1px;
 }
 .flex-row > div > .bookmark > .star-bookmark > input[type=checkbox] + label:before { content: "\f005";color: #c9c9c9; font-size: 18px; } /* unchecked icon */
 .flex-row > div > .bookmark > .star-bookmark > input[type=checkbox]:checked + label:before {  content: "\f005"; color: #f7cb00; font-size: 18px;} /* checked icon */

 .star-bookmark input[type=checkbox] + label:before { content: "\f005";color: #31497e; } /* unchecked icon */
 .star-bookmark input[type=checkbox]:checked + label:before {  content: "\f005"; color: #f7cb00;} /* checked icon */

/* Restore standard Bootstrap/crispy checkboxes hidden by the global rule above. */
.form-check-input[type=checkbox],
input[type=checkbox].form-check-input,
.form-check input[type=checkbox] {
	display: inline-block !important;
}

.form-check-input[type=checkbox] + .form-check-label:before,
input[type=checkbox].form-check-input + .form-check-label:before,
.form-check input[type=checkbox] + .form-check-label:before {
	content: none !important;
	display: none !important;
}

 @media (min-width: 768px){
 	.slick-initialized .flex-row {
 		display: flex;
 		flex-wrap: wrap;
 	}

 	.slick-initialized .flex-row  [class*='col-'] {
 		align-self: auto;
 		margin: -.5px;
 		padding:5px;
 	}
 }
 .footer {
 	background: #152440;
 	padding: 30px 15px;
 }

.footer.bg-dark {
	background-color: #152440 !important;
}
 .footer  .list-inline > li {
 	padding-right: 20px;
 	padding-left: 20px;
 }
 .footer  .list-inline > li > a {
 	color: #f0f0f0;
 	font-size: 14px;
 	font-weight: 700;
 }
 .footer  .list-inline > li > a:hover {
 	text-decoration: none;
 }
 .footer  h3 {
 	font-size: 14px;
 	color: #f0f0f0;
 	text-decoration: underline;
 	font-weight: normal;
 }
 .footer  h4 {
 	font-size: 14px;
 	color: #f0f0f0;
 	text-decoration: underline;
 	font-weight: normal;
 }
 @media (min-width: 1200px){
 	.navbar-form .form-group {
 		display: inline-block;
 		margin-bottom: 0;
 		vertical-align: middle;
 		width: 450px;
 		margin-left: 120px;
 	}
 }
 @media (max-width: 1200px){
 	.navbar-form .form-group {
 		display: inline-block;
 		margin-bottom: 0;
 		vertical-align: middle;
 		width: 250px;
 		margin-left: 40px;
 	}
 }
 @media (max-width:768px){
 	.navbar-form .form-group {
 		display: inline-block;
 		margin-bottom: 0;
 		vertical-align: middle;
 		width: 100%;
 		margin-left: 0;
 	}
 	.slick-prev {
 		top: 35%;
 		left: -10px;
 		z-index: 1000000;
 	}
 	.slick-next {	
 		right: -10px;
 		top: 35%;
 		z-index: 1000000;
 	}
 	#bs-example-navbar-collapse-1 > ul > li {
 		float: none;
 	}
 	.navbar-default .navbar-nav .open .dropdown-menu>li>a {
 		color: #f0f0f0;
 	}
 	.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
 		color: #f0f0f0;
 		background-color: transparent;
 	}
 }	
 @media (max-width:490px){
 	.nav-tabs > li > a {
 		font-size: 14px;
 	}

 }
 .tab-content > .tab-pane:not(.active), 
 .pill-content > .pill-pane:not(.active) {
 	display: block;
 	height: 0;
 	overflow-y: hidden;
 } 

 .tab-content > .active {
 	opacity: 1;
 	height: auto;
 }
 /*Inner*/
 .mid-section {
 	margin-top: 40px;
 }
 .carousel-card {
	position: relative;
	border: 2px solid #0d0d0d;
	border-radius: 22px;
	padding: 34px 92px 38px;
	display: inline-block;
	background: #152440;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	overflow: visible;
 }

 .carousel-card::before,
 .carousel-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 16px;
	border-radius: 8px;
	pointer-events: none;
	/* Dark strip with evenly spaced square cutouts (full squares only). */
	background-color: #152440;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='25.3' viewBox='0 0 28 25.3'%3E%3Crect x='6' y='3.45' width='16' height='18.4' rx='2' ry='2' fill='%23496BB2'/%3E%3C/svg%3E");
	background-size: 28px 25.3px;
	background-position: left center;
	background-repeat: repeat-x;
	box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.7);
 }

 .carousel-card::before {
	top: 9px;
 }

 .carousel-card::after {
	content: none;
 }

.carousel-card .mt-2 {
	position: relative;
	padding-top: 26px;
}

.carousel-card .mt-2::before {
	content: "";
	position: absolute;
	left: -92px;
	right: -92px;
	top: 2px;
	height: 16px;
	border-radius: 8px;
	pointer-events: none;
	background-color: #152440;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='25.3' viewBox='0 0 28 25.3'%3E%3Crect x='6' y='3.45' width='16' height='18.4' rx='2' ry='2' fill='%23496BB2'/%3E%3C/svg%3E");
	background-size: 28px 25.3px;
	background-position: left center;
	background-repeat: repeat-x;
	box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.7);
}

 #video-wrapper {
	position: relative;
	display: inline-block;
 }

 #video-wrapper::before,
 #video-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 30px;
	border-radius: 10px;
	pointer-events: none;
	background-image:
		linear-gradient(180deg, #2f2f2f 0%, #171717 52%, #2f2f2f 100%),
		repeating-linear-gradient(to bottom, rgba(73, 107, 178, 0.28) 0 13px, transparent 13px 28px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.55);
 }

 #video-wrapper::before {
	left: -42px;
	/* Leading edge of next frame on the left */
	border-left: 1px solid rgba(0, 0, 0, 0.8);
	border-right: 3px solid #496bb2;
 }

 #video-wrapper::after {
	right: -42px;
	/* Trailing edge of previous frame on the right */
	border-right: 1px solid rgba(0, 0, 0, 0.8);
	border-left: 3px solid #496bb2;
 }

 #carousel-video {
	display: block;
	background: #000000;
	border: 8px solid #0f0f0f;
	border-radius: 16px;
	outline: 2px solid #496bb2;
	outline-offset: -2px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
 }
 #video-title {
	color: #ffffff;
 }
 .blue {
 	background: #31497e;
 	padding: 30px 0;
 	border-radius: 0 20px 0 0 ;
 }

 .blue .rate {
 	position: static;

 }
 .blue h2 {
 	color: #f0f0f0;
 	margin-bottom: 20px;
 	margin-top: 0;
 }

 /*right section */
 .fa.pull-left {
 	margin-right: .3em;
 	margin-top: 0; 
 	font-size: 18px;
 }
 .right-section .buy-btn {
 	display: inline-block;
 	width: 110px;
 	border-radius: 5px;
 	text-align: center;
 	padding: 8px 8px;
 	text-decoration: none;
 	font-size: 14px;
 	background: #26599a;
 	color: #fff;
 	font-weight: 600;
 	float: right;
 	transition: all 0.4s ease 0s;
 }
 .right-section .buy-btn:hover {
 	opacity: 0.8;
 }

 .right-section h3 {
 	font-size: 22px;
 	margin-bottom: 15px;
 	color: #28416f;
 	font-weight: 600;
 }
 .right-section h4 {
 	font-size: 15px;
 	margin-bottom: 15px;
 	color: #28416f;
 }
 .right-section span {
 	font-size: 16px;
 	margin-bottom: 15px;
 	color: #28416f;
 	font-weight: 600;
 }
 .right-section p {
 	font-size: 14px;
 	color: #263758;
 	margin: 50px 0 20px;
 }
 /*tabs*/
 /* custom inclusion of right, left and below tabs */

 @media(min-width: 768px){
 	.tabs-right > .nav-tabs {
 		border-bottom: 0;
 	}

 	.tab-content > .tab-pane,
 	.pill-content > .pill-pane {
 		display: none;
 	}

 	.tab-content > .active,
 	.pill-content > .active {
 		display: block;
 		text-decoration: none;
 	}

 	.tabs-below > .nav-tabs {
 		border-top: 1px solid #ddd;
 	}

 	.tabs-below > .nav-tabs > li {
 		margin-top: -1px;
 		margin-bottom: 0;
 	}

 	.tabs-below > .nav-tabs > li > a {
 		-webkit-border-radius: 0 0 4px 4px;
 		-moz-border-radius: 0 0 4px 4px;
 		border-radius: 0 0 4px 4px;
 	}

 	.tabs-right > .nav-tabs > li {
 		float: none;
 	}

 	.tabs-right > .nav-tabs > li > a {
 		min-width: 74px;
 		margin-right: 0;
 		margin-bottom: 3px;
 	}

 	.tabs-right > .nav-tabs {
 		float: right;
 		margin-left: 19px;
 		border-left: 1px solid #ddd;
 	}

 	.tabs-right > .nav-tabs > li > a {
 		margin-left: -1px;
 		-webkit-border-radius: 0 4px 4px 0;
 		-moz-border-radius: 0 4px 4px 0;
 		border-radius: 0 4px 4px 0;
 	}

 	.tabs-right > .nav-tabs > li > a:hover,
 	.tabs-right > .nav-tabs > li > a:focus {
 		border-color: #eeeeee #eeeeee #eeeeee #dddddd;
 		text-decoration: none;
 	}

 	.tabs-right > .nav-tabs .active > a,
 	.tabs-right > .nav-tabs .active > a:hover,
 	.tabs-right > .nav-tabs .active > a:focus {
 		border-color: #ddd #ddd #ddd transparent;
 		*border-left-color: #ffffff;
 	}
 }
 .tab-radius {
 	background: #f0f0f0;
 	margin-top: 20px;
 	padding: 20px 15px;
 }
 .blue .tab-content h2 {
 	color: #FFCE00;
 }

.navbar-indieplaya {
	padding-left: 0;
}

/* Reusable layout for static content pages like About/FAQ/Terms */
.static-page-shell {
	margin-top: 1.5rem;
	margin-bottom: 3rem;
}

.static-page-card {
	border: 0;
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.15);
}

.static-page-card .card-body {
	padding: 1.75rem;
}

.static-page-title {
	color: #152440;
	margin-bottom: 0.9rem;
}

.static-page-text {
	color: #1d1f22;
	line-height: 1.7;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.static-page-card .card-body {
		padding: 2.5rem;
	}
}

@media (max-width: 767.98px) {
	body {
		padding-top: 0;
	}

	/* Keep both nav rows in normal flow on phones to prevent overlap. */
	.navbar.fixed-top.bg-dark {
		position: static;
	}

	.bot-nav {
		position: static;
		top: auto;
		padding: 0.35rem 0;
	}

	.navbar.fixed-top .container-fluid {
		flex-wrap: wrap;
		row-gap: 0.5rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.navbar.fixed-top .container-fluid > div {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.navbar.fixed-top .container-fluid > .flex-grow-1 {
		order: 3;
		width: 100%;
		flex: 0 0 100% !important;
	}

	.navbar.fixed-top form.d-flex.w-75 {
		width: 100% !important;
	}

	.navbar.fixed-top form.d-flex.w-75 .form-control {
		min-width: 0;
	}

	.navbar.fixed-top .container-fluid > .d-flex.align-items-center.ms-3 {
		order: 2;
		margin-left: auto !important;
		gap: 0.5rem;
	}

	.navbar.fixed-top .navbar-nav.d-flex.flex-row {
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: 0.25rem;
	}

	.navbar.fixed-top .navbar-nav .nav-link {
		padding: 0.25rem 0.5rem;
		font-size: 0.9rem;
	}

	.cart-link {
		margin-left: 0.25rem !important;
	}

	/* Allow horizontal swipe for dense filter controls in the second nav row. */
	.bot-nav .container-fluid {
		display: block !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 0.5rem !important;
	}

	.bot-nav .navbar-indieplaya {
		display: inline-flex !important;
		width: auto;
		min-width: max-content;
	}

	.bot-nav .navbar-indieplaya > .d-flex.align-items-center,
	.bot-nav .btn-group {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.25rem;
	}

	.bot-nav .dropdown {
		margin-right: 0 !important;
		flex: 0 0 auto;
	}

	.bot-nav .btn.btn-primary.dropdown-toggle {
		white-space: nowrap;
		font-size: 0.8rem;
		padding: 0.3rem 0.5rem;
	}

	.bot-nav .text-light.small.me-2 {
		display: none;
	}

	.page-container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.container.py-5 {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}

	/* Improve form readability and touch targets on phones. */
	label {
		font-size: 16px;
	}

	.card .card-body {
		padding: 1rem;
	}

	.card .form-control,
	.card .form-select {
		font-size: 16px;
	}

	.card .btn {
		min-height: 44px;
	}

	.card .form-check {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.card .form-check-input {
		margin-top: 0.35rem;
	}

	.card .form-check-label {
		font-size: 1rem;
		line-height: 1.4;
	}

	/* Home hero and carousel: narrow-screen interaction and fit improvements. */
	#carousel-container {
		width: 100%;
	}

	.carousel-card {
		display: block;
		width: 100%;
		padding: 18px 12px 16px;
		border-radius: 16px;
	}

	.carousel-card::before {
		top: 4px;
	}

	.carousel-card .mt-2 {
		padding-top: 16px;
	}

	.carousel-card .mt-2::before {
		left: -12px;
		right: -12px;
		top: 0;
	}

	#video-wrapper {
		display: block !important;
		width: 100%;
	}

	#video-wrapper::before,
	#video-wrapper::after {
		display: none;
	}

	#carousel-video {
		width: 100% !important;
		height: auto !important;
		max-height: min(58vw, 260px);
		border-width: 5px;
		border-radius: 12px;
		object-fit: cover;
	}

	#prev-button,
	#next-button {
		font-size: 1.35rem;
		padding: 0.25rem 0.55rem;
	}

	#video-title {
		font-size: 0.95rem;
	}

	#video-tagline {
		font-size: 0.72rem !important;
	}

	.carousel-card .mt-2 .btn {
		min-height: 38px;
		padding: 0.3rem 0.55rem;
		font-size: 0.8rem;
	}

	.side-bar img {
		max-width: 72%;
		height: auto;
		margin: 1rem auto;
	}

	/* Keep home tabs usable without cramming labels on small phones. */
	#indieplayaTabs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	#indieplayaTabs .nav-item {
		flex: 0 0 auto;
	}

	#indieplayaTabs .nav-link {
		white-space: nowrap;
		font-size: 0.86rem;
		padding: 0.5rem 0.7rem;
	}

	.tab-pane .slider {
		padding: 12px;
	}
}