html,
body {
	background-color: #f2f1e7 !important;
	font-family: 'LC Web Normal', sans-serif !important;
	font-weight: 500 !important;
	color: #332e30;
	scroll-behavior: smooth;
}

.row {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.container-fluid {
	padding-right: 8px !important;
	padding-left: 8px !important;
}

a {
	text-decoration: none !important;
}

button {
	outline: none !important;
}

.top-0 {
	top: 0;
}

#message {
	position: relative;
	top: 0;
	left: 0;
	width: 99%;
	margin: 0 auto;
	border-radius: 0 0 5px 5px;
	padding: 5px 20px 0px 15px;
	overflow: hidden;
	transition: height 0.45s ease-out;
}

/* Announcement banner (#message) entrance: it slides open in the normal flow,
   pressing the page content down. The nav is absolutely positioned and its
   static position is dragged downward by the content's collapsing top margin
   on some pages, which made the logo/menu overlap the page header. Pin the nav
   explicitly below the banner instead so it can never overlap the content.
   The `.has-banner` class is added by JS once the banner height is measured. */
body.has-banner nav {
	top: var(--banner-h, 88px);
}

#message-inner-box {
	min-height: 80px;
	height: auto;
	flex-flow: column;
	/* Match the size that <p> banner copy (Adtext1/Adtext2) gets from the
	   global `p { font-size: 2.2vh }` rule, so plain-text banners (Adtext3,
	   which has no <p> wrapper) render at the same size and don't look smaller. */
	font-size: 2.2vh;
}

#message-inner-box p {
	margin-bottom: 0;
}

#close-message {
	position: absolute;
	top: 20px;
	right: 10px;
}

#close-message .close-btn {
	top: 26px !important;
	right: 0 !important;
}

#message a {
	color: inherit;
	font-weight: bold;
}

#logo svg {
	width: 160px;
	height: 80px;
	float: left;
	margin: 6px 32px;
	position: relative;
	fill: #3B3232
}

#member-logo {
	width: 100%;
	object-fit: contain;
	padding-left: 8px !important;
	position: absolute;
}

#index #logo svg {
	fill: #f2f1e7 !important;
}

nav {
	width: 100%;
	background: transparent;
	height: 70px;
	position: absolute;
	top: 0;
	z-index: 3;
	transition: top 0.45s ease-out;
}

.header-nav ul {
	margin: 25px 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.header-nav li {
	float: none;
	clear: both;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	text-transform: uppercase;
	position: relative;
}

#loginMenuItem {
	display: block !important;
}

#main-page .header-nav li:first-of-type {
	display: block !important;
}

nav a,
.menu a {
	color: #f2f1e7;
}

nav a:hover,
.menu a:hover {
	text-decoration: none;
}

#index nav a:hover,
#index .menu a:hover {
	color: #f2f1e7 !important;
}

nav a li:hover,
.menu a li:hover {
	background: #2d94c1 !important;
}

nav .logo {
	display: block;
	float: left;
	font-size: 2em;
	padding: 10px 20px;
	text-decoration: none;
}

nav .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
}

.nav-bg {
	max-height: 0;
}

/* menu icon */

nav .menu-icon {
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 3rem 2rem;
	position: relative;
	user-select: none;
}

nav .menu-icon .navicon {
	background: #f2f1e7;
	display: block;
	height: 3px;
	position: relative;
	transition: background .2s ease-out;
	width: 22px;
	border-radius: 5px;
}

nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {
	background: #f2f1e7;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
	border-radius: 5px;
}

#black .navicon,
#black .navicon:before,
#black .navicon:after {
	background: #332e30;
}

nav .menu-icon .navicon:before {
	top: 6px;
}

nav .menu-icon .navicon:after {
	top: -6px;
}

/* menu btn */

nav .menu-btn {
	display: none;
}

nav .menu-btn:checked ~ .nav-bg {
	min-height: 300vh;
	overflow-y: scroll;
	width: 100%;
	background: #f2f1e7;
	opacity: 0.9;
	position: absolute;
	z-index: 2;
	margin-top: 6rem;
}

nav .menu-btn:checked ~ .menu {
	min-height: 200vh;
	overflow-y: scroll;
	width: 100%;
	position: absolute;
	z-index: 10;
	top: 70px;
	right: 0;
	left: 0;
}

nav .menu-btn:checked ~ .menu-icon .navicon,
#black .menu-btn:checked ~ .menu-icon .navicon {
	background: transparent;
}

nav .menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);
}

nav .menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);
}

nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top: 0;
}

.second-menu {
	display: none;
}

.hide {
	display: none !important;
}


.show {
	display: block !important;
}

@media (min-width: 1050px) and (max-width: 1150px) {
	#black .menu a {
		font-size: 1.6vh !important;
	}
}

@media (min-width: 1700px) {
	.second-menu ul li {
		width: 24.55% !important;
	}
}


@media (min-width: 1250px) and (max-width: 1699px) {
	.second-menu ul li {
		width: 24.4% !important;
	}
}

@media (min-width: 1250px) {
	#black .menu a {
		color: #332e30;
		font-size: 2.2vh;
	}

	#black .menu a:last-of-type {
		padding: 0 20px 5px 20px !important;
	}

	.desktop-disappear {
		display: none !important;
	}

	.header-nav ul {
		padding: 8px 0 0 10px;
	}

	.header-nav li {
		float: right;
		clear: none;
		background: transparent;
		margin-right: 30px;
	}

	#index .header-nav li:first-of-type {
		left: 0 !important;
	}

	.header-nav li:first-of-type {
		left: 30px;
	}

	#main-page .header-nav li:first-of-type {
		left: 0 !important;
	}

	nav li a {
		padding: 20px 20px 5px 20px;
	}

	.menu a li {
		padding: 0 20px;
	}

	.menu-alignment {
		margin: 0 auto;
		display: table;
		direction: rtl;
	}

	.menu-alignment a {
		display: table-cell;
	}

	.menu-alignment a li {
		border-bottom: solid 3px transparent;
	}

	nav .menu {
		clear: none;
		max-height: none;
		margin-right: 40px;
	}

	.menu li a span,
	.menu-alignment a li span {
		border-bottom: solid 3px transparent;
	}

	.menu li a span:hover,
	.menu-alignment a li span:hover {
		border-bottom: solid 3px;
	}

	nav a li:hover,
	.menu a li:hover {
		background: transparent !important;
	}

	#index nav .menu {
		clear: none;
		float: none;
		display: table;
		margin: 25px auto;
	}

	#main-page nav .menu {
		margin-right: 0 !important;
	}

	nav .menu-icon {
		display: none;
	}

	.hidden-nav {
		display: none;
	}

	.show-spacing {
		margin-top: 6px !important;
	}

	.hide-spacing {
		margin-top: 100px;
	}

	.second-menu {
		display: block;
		margin-top: 90px;
	}

	.second-menu ul {
		margin: 0 5px;
	}

	.second-menu ul li {
		font-family: 'LC Web Heading', 'Impact', sans-serif;
		text-transform: uppercase;
		display: inline-block;
		font-size: 30px;
		line-height: 40px;
		text-align: center;
		background: #463956;
		border-radius: 5px;
		margin: 0 2px;
		color: #ecece0;
	}

	.second-menu a li:hover {
		background: #2d94c1 !important;
	}

	.second-menu a:hover {
		text-decoration: none;
		color: #ecece0;
	}

	/* second menu icon */

	.second-menu-icon {
		cursor: pointer;
		display: inline-block;
		position: absolute;
		user-select: none;
		top: -3px;
		right: 0;
		padding: 1rem 0;
	}

	.second-menu-icon .second-navicon {
		background: #332e30;
		display: block;
		height: 3px;
		position: relative;
		transition: background .2s ease-out;
		width: 22px;
		border-radius: 5px;
	}

	.second-menu-icon .second-navicon:before,
	.second-menu-icon .second-navicon:after {
		background: #332e30;
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		transition: all .2s ease-out;
		width: 100%;
		border-radius: 5px;
	}

	.second-menu-icon .second-navicon:before {
		top: 6px;
	}

	.second-menu-icon .second-navicon:after {
		top: -6px;
	}

	.carousel-inner {
		width: 100%;
		min-height: 25vh;
	}
}

h1 {
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	font-size: 6vh !important;
	text-transform: uppercase;
}

h2 {
	font-family: 'LC Web Normal', sans-serif;
	font-weight: 600 !important;
	font-size: 2.5vh !important;
}

h3 {
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	font-size: 3.5vh !important;
	text-transform: uppercase;
}

h4 {
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	text-transform: uppercase;
	font-size: 2vw;
}

p,
ul li,
ol li {
	font-size: 2.2vh !important;
}

/*Main page css*/

#page-container {
	position: relative;
	min-height: 83vh;
}

main {
	padding-bottom: 2.5rem;
}

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 2.5rem;
}

main {
	margin-top: 100px;
}

#index {
	margin-top: 0 !important;
}

header {
	background: url(../images/main/LearningChess.net-main-bg-1600x740-min.jpg) no-repeat center;
	background-size: cover;
	width: 99%;
	height: 75vh;
	position: relative;
	top: 5px;
	border-radius: 5px;
	margin: 0 auto;
}

#header-text {
	color: #f2f1e7;
	text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5);
	text-align: center;
	position: relative;
	flex-direction: column;
	justify-content: center;
	display: flex;
	height: 75vh;
}

#nav-boxes {
	position: absolute;
	bottom: 132px;
	text-align: center;
	width: 100%;
	height: 110px;
	bottom: 0;
}

.nav-box {
	color: #332e30;
	width: 16%;
	height: 110px;
	background: #f2f1e7;
	display: inline-block;
	margin-right: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.nav-box h3 {
	font-size: 2.6vh !important;
}

#nav-boxes a .nav-box:hover {
	position: relative;
	bottom: 5px;
	height: 115px;
}

#home-study {
	background: url(../images/main/LearningChess.net-boy-top-1600x417-min.jpg) no-repeat center;
	background-size: cover;
	width: 99%;
	height: 50vh;
	margin: 10px auto 5px auto;
	border-radius: 5px;
}

#home-study-text {
	color: #f2f1e7;
	text-align: right;
	position: relative;
	flex-direction: column;
	justify-content: center;
	display: flex;
	height: 50vh;
	padding-top: 60px;
}

#home-study-text a,
#chess-club-text a {
	color: #f2f1e7;
}

#home-study-text a,
#chess-club-text a,
#trial-text a,
#win-text a,
.colored-box a {
	margin-bottom: 0;
	transition: ease-in-out 0.5s;
}

#home-study-text a:hover,
#chess-club-text a:hover,
#trial-text a:hover,
#win-text a:hover {
	margin-bottom: 20px;
	transition: ease-in-out 0.5s;
}

#home-study-text h1 {
	position: relative;
	margin-right: 5vh;
	display: inline-block;
}

#trial-text h1 {
	position: relative;
	display: inline-block;
}

#chess-club {
	background: url(../images/main/LearningChess.net-boy-bottom-1600x417-min.jpg) no-repeat center;
	background-size: cover;
	width: 99%;
	height: 50vh;
	margin: 5px auto 5px auto;
	border-radius: 5px;
	overflow: hidden;
}

#chess-club-text {
	color: #f2f1e7;
	position: relative;
	flex-direction: column;
	justify-content: center;
	display: flex;
	height: 50vh;
	padding-top: 60px;
	margin-left: 45%;
}

#chess-club-text h1 {
	position: relative;
	display: inline-block;
}

#testimonials {
	height: 30vh;
	margin: 50px;
}

#testimonials-text h1 {
	font-size: 3vh !important;
}

#testimonials h1,
#testimonial {
	color: #332e30;
}

.carousel {
	height: 30vh !important;
}

.carousel-inner {
	width: 70% !important;
	margin: 0 100px;
}

.carousel-item {
	width: 100% !important;
}

.carousel-item p {
	font-family: 'LC Web Normal', sans-serif;
	font-size: 2vh;
}

.carousel-item p:nth-child(3),
.carousel-item p:nth-child(4) {
	font-size: 2vh !important;
	line-height: 2vh !important;
	margin-bottom: 0.5rem;
}

.carousel-control-next {
	right: -20px !important;
}

.carousel-control-prev {
	left: -20px !important;
}

.carousel-control-prev,
.carousel-control-next {
	opacity: 1 !important;
	justify-items: normal !important;
}


.carousel-control-next-icon {
	background-image: url(../images/main/LearningChess.net-black-arrow-right.svg) !important;
}

.carousel-control-prev-icon {
	background-image: url(../images/main/LearningChess.net-black-arrow-left.svg) !important;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
	width: 50px !important;
	height: 50px !important;
}

#trial {
	width: 99.5%;
	background: url(../images/main/LearningChess.net-trial-1600x377-min.jpg) no-repeat center center;
	background-size: cover;
	height: 45vh;
	margin: 5px auto 0 auto;
	border-radius: 8px;
	overflow: hidden;
}

#trial a {
	color: #f2f1e7;
	text-decoration: none;
}

#trial-text {
	color: #f2f1e7;
	position: relative;
	flex-direction: column;
	justify-content: center;
	display: flex;
	height: 45vh;
}

footer .row {
	margin: 0 20px !important;
}

#footerNav {
	z-index: 1 !important;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	text-transform: uppercase;
}

#footerNav a {
	color: #332e30 !important;
}

#footerNav a:hover {
	border-bottom: solid 3px;
}

#footerNav ul {
	margin-top: 20px;
}

#footerNav ul li {
	position: relative;
	display: inline-block;
	margin-right: 40px;
}

#footerNav ul li::after {
	content: "|";
	font-weight: 600;
	position: absolute;
	top: 0px;
	right: -25px;
}

#footerNav ul li:last-of-type::after {
	display: none;
}

#socials {
	text-align: right;
	margin-top: 10px;
}

#socials a:hover {
	opacity: 0.7;
}

/*Icons*/

#lock,
#world,
#person,
#member,
#arrow,
#back-arrow {
	width: 6vh;
	height: 6vh;
	position: absolute;
	left: -3.2vh;
	top: -1.5vh;
	fill: #f2f1e7;
}

#black #lock,
#black #world,
#black #person,
#black #member,
#black #arrow,
#black #back-arrow {
	fill: #332e30;
}

#nav-book,
#nav-horse,
#nav-head,
#nav-logic,
#nav-account,
#nav-progress,
#nav-password,
#nav-lm,
#nav-cm,
#nav-admin,
#nav-logout,
#nav-language,
#nav-unlock,
#nav-language-black,
#nav-unlock-black {
	width: 6vh;
	height: 6vh;
	margin: 0 auto;
	position: absolute;
	left: -3.2vh;
	top: -1.5vh;
}

#nav-book {
	background: url(../images/book_light.svg) no-repeat center;
	background-size: cover;
}

#nav-horse {
	background: url(../images/horse_light.svg) no-repeat center;
	background-size: cover;
}

#nav-head {
	background: url(../images/head_light.svg) no-repeat center;
	background-size: cover;
}

#nav-logic {
	background: url(../images/logic_light.svg) no-repeat center;
}

#nav-account {
	background: url(../images/my_account.svg) no-repeat center;
	background-size: cover;
}

#nav-progress {
	background: url(../images/my_progress.svg) no-repeat center;
	background-size: cover;
}

#nav-password {
	background: url(../images/change_password.svg) no-repeat center;
	background-size: cover;
}

#nav-lm {
	background: url(../images/learning_management.svg) no-repeat center;
	background-size: cover;
}

#nav-cm {
	background: url(../images/learning_management.svg) no-repeat center;
	background-size: cover;
}

#nav-admin {
	background: url(../images/my_account.svg) no-repeat center;
	background-size: cover;
}

#nav-logout {
	background: url(../images/logout.svg) no-repeat center;
	background-size: cover;
}

#nav-language {
	background: url(../images/language_top.svg) no-repeat center;
	background-size: cover;
}

#nav-unlock {
	background: url(../images/unlock_top.svg) no-repeat center;
	background-size: cover;
}

#nav-language-black {
	background: url(../images/language_top_black.svg) no-repeat center;
	background-size: cover;
}

#nav-unlock-black {
	background: url(../images/unlock_top_black.svg) no-repeat center;
	background-size: cover;
}

#book {
	background: url(../images/book.svg) no-repeat center;
	background-size: cover;
	width: 60px;
	height: 60px;
	margin: 0 auto;
}

#horse {
	background: url(../images/horse.svg) no-repeat center;
	background-size: cover;
	width: 60px;
	height: 60px;
	margin: 0 auto;
}

#head {
	background: url(../images/head.svg) no-repeat center;
	background-size: cover;
	width: 60px;
	height: 60px;
	margin: 0 auto;
}

#logic {
	background: url(../images/logic.svg) no-repeat center;
	background-size: cover;
	width: 60px;
	height: 60px;
	margin: 0 auto;
}

#home-study-text h1::before {
	content: "";
	background: url(../images/house.svg) no-repeat center;
	background-size: cover;
	width: 60px;
	height: 60px;
	top: -60px;
	right: -10px;
	position: absolute;
}

#chess-club-text h1::before {
	content: "";
	background: url(../images/hat.svg) no-repeat center;
	background-size: cover;
	width: 60px;
	height: 60px;
	top: -60px;
	left: 0px;
	position: absolute;
}

#home-study-text h1::after {
	content: "";
	background: url(../images/main/LearningChess.net-arrow-right.svg) no-repeat center;
	background-size: cover;
	width: 5vh;
	height: 5vh;
	top: 1vh;
	right: -5vh;
	position: absolute;
}

#chess-club-text h1::after {
	content: "";
	background: url(../images/main/LearningChess.net-arrow-right.svg) no-repeat center;
	background-size: cover;
	width: 5vh;
	height: 5vh;
	top: 1vh;
	right: -5vh;
	position: absolute;
}

#quotation {
	background: url(../images/quotation.svg) no-repeat center;
	background-size: contain;
	width: 60px;
	height: 60px;
}

#rate {
	background: url(../images/rate.svg) no-repeat center;
	background-size: cover;
	width: 60px;
	height: 60px;
}

#trial-text h1::after {
	content: "";
	background: url(../images/main/LearningChess.net-arrow-right.svg) no-repeat center;
	background-size: cover;
	width: 5vh;
	height: 5vh;
	top: 1vh;
	right: -5vh;
	position: absolute;
}

#fb {
	background: url(../images/fb.svg) no-repeat center;
	background-size: cover;
	width: 40px;
	height: 40px;
	display: inline-block;
}

#twitter {
	background: url(../images/twitter.svg) no-repeat center;
	background-size: cover;
	width: 40px;
	height: 40px;
	display: inline-block;
}

#pin {
	background: url(../images/pinterest.svg) no-repeat center;
	background-size: cover;
	width: 40px;
	height: 40px;
	display: inline-block;
}

.lang-bg {
	height: 120vh;
	width: 100%;
	background: #f2f1e7;
	opacity: 0.9;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
}

#langBox {
	position: absolute;
	left: 40%;
}

#index #langBox {
	top: 10%;
}

#accountBox {
	position: absolute;
	left: 40%;
}

#index #accountBox {
	top: 10%;
}

.lang-box {
	width: 200%;
	left: -40%;
	top: 10%;
	position: relative;
	z-index: 5;
}

.lang-box h2 {
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	text-transform: uppercase;
	padding: 0 20px;
}

.close-lang {
	position: absolute;
	cursor: pointer;
	width: 35px;
	height: 35px;
	top: -8px;
	right: 15px;
}

.close-btn {
	float: right;
	background: transparent;
	display: block;
	height: 4px;
	position: relative;
	transition: background .2s ease-out;
	width: 22px;
	border-radius: 5px;
	top: 38px;
	right: 5px;
	cursor: pointer;
}

.close-btn2 {
	float: right;
	background: transparent;
	display: block;
	height: 4px;
	position: relative;
	transition: background .2s ease-out;
	width: 22px;
	border-radius: 5px;
	top: 22px;
	right: 0px;
	cursor: pointer;
}

.close-btn:before,
.close-btn:after,
.close-btn2:before,
.close-btn2:after {
	background: #332e30;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
	border-radius: 5px;
	top: -23px;
}

.close-btn:before {
	transform: rotate(-45deg);
}

.close-btn:after {
	transform: rotate(45deg);
}

.close-btn2:before {
	transform: rotate(-45deg);
	top: 0 !important;
}

.close-btn2:after {
	transform: rotate(45deg);
	top: 0 !important;
}

.lang-box ul li {
	width: 96%;
	margin: 2.5px 10px;
	background: #d62a49;
	padding: 0 20px;
	line-height: 40px;
	border-radius: 2.5px;
}

.lang-box ul li:hover {
	background: #463956;
}

.lang-box a {
	color: #f2f1e7 !important;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
}

.lang-box a:hover {
	color: #f2f1e7 !important;
	text-decoration: none;
}

/*Legal css*/

.legal-tabs ul {
	margin-bottom: 0;
}

.legal-tabs ul li {
	background: #d62a49;
	margin: 2.5px 20px;
	color: #f2f1e7;
	border-radius: 5px;
}

#blank {
	height: 170px;
}

b {
	font-weight: 600;
}

.legal-tabs ul li ul {
	font-family: 'LC Web Normal', sans-serif;
	font-weight: 600 !important;
	padding-bottom: 20px;
	padding-left: 20px;
}

.legal-tabs ul li a {
	text-decoration: none;
	color: #f2f1e7 !important;
}

.legal-tabs ul li a:hover {
	opacity: 0.8;
}

.legal-tabs ul li button {
	background: transparent;
	border: none;
	color: #f2f1e7;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	text-transform: uppercase;
	padding: 10px 20px;
	font-size: 1.8vw;
	text-align: left;

}

#scroll-box {
	height: 90vh;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

#scroll-box a {
	color: #d62a49;
}

.legal-tabcontent h2 {
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	text-transform: uppercase;
	font-size: 40px !important;
	color: #d62a49;
}

.legal-tabcontent h3 {
	font-family: 'LC Web Normal', sans-serif;
	text-transform: uppercase;
	font-size: 20px !important;
	color: #d62a49;
	font-weight: 800 !important;
}

.legal-tabcontent ul li {
	margin-left: 20px;
	position: relative;
}

.legal-tabcontent ul li::before {
	content: "";
	width: 5px;
	height: 5px;
	background: #332e30;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: -20px;
}

.legal-tabs ul li ul li {
	position: relative;
	background: transparent;
}

.legal-tabs ul li ul li::before {
	content: "";
	width: 5px;
	height: 5px;
	background: #f2f1e7;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: -20px;
}

.show-tabcontent {
	display: block;
}

.hide-tabcontent {
	display: none;
}

.active-tab,
.active-lang {
	background: #463956 !important;
}

#nav-boxes,
.nav-box {
	height: 130px;
}

#nav-boxes a .nav-box:hover {
	height: 135px;
}

.nav-box {
	padding-top: 10px;
}

#centralManagement table tbody td {
	font-size: 17px !important;
}

#centralManagement .table td,
.table th {
	padding: 0.45rem !important;
}

.teacherNotification {
	display: none;
}

.teacherNotificationHover:hover + .teacherNotification {
	display: block;
}

@media screen and (min-width: 1601px) {
	.container {
		max-width: 1400px !important;
	}

	#nav-unlock-black {
		background: url(../images/unlock_top_black.svg) no-repeat center;
		background-size: cover;
		width: 6vh;
		height: 6vh;
		margin: 0 auto;
		position: absolute;
		left: -3vh;
		top: -1.5vh;
	}

	.restart a::before {
		top: 4px;
	}

	.text-box-equal h3,
	.text-box h3 {
		font-size: 3vh !important;
	}

	.text-box-equal a h3::after,
	.text-box a h3::after {
		top: 7px !important;
	}

	.progress-menu-box .col-lg-3 h5 {
		padding: 10px 20px 0 20px !important;
	}

	.progress-box h1,
	.progress-box ul {
		margin: 15px 0 !important;
	}

	.rank-box {
		margin-top: 60px !important;
	}

	#signUpLine::before,
	#avaliableLine::before,
	#lockedLine::before,
	#progressLine::before,
	#completedLine::before,
	#iron::before,
	#bronze::before,
	#silver::before,
	#gold::before,
	#diamond::before {
		top: 14px !important;
	}

	.close-lang {
		top: -2px;
	}
}

/*Main page & Legal - Tablet & Mobil view*/
@media screen and (max-width: 1249px) {
	#logo svg {
		margin: 10px;
	}

	.nav-box {
		width: 20%;
	}

	#person,
	#arrow {
		fill: #f2f1e7 !important;
	}

	#nav-language-black {
		background: url(../images/language_top.svg) no-repeat center;
	}

	#nav-unlock-black {
		background: url(../images/unlock_top.svg) no-repeat center;
	}

	.header-nav li {
		background: #d62a49;
		margin: 2px 3px;
		height: 5rem;
		line-height: 5rem;
		font-size: 30px;
		padding: 0 0 0 100px;
		border-radius: 5px;
		opacity: 1 !important;
	}

	.hidden-nav {
		background: #463956 !important;
	}

	#lock,
	#world,
	#person,
	#member,
	#arrow,
	#back-arrow,
	#nav-book,
	#nav-horse,
	#nav-head,
	#nav-logic,
	#nav-account,
	#nav-progress,
	#nav-password,
	#nav-lm,
	#nav-cm,
	#nav-admin,
	#nav-logout,
	#nav-language,
	#nav-unlock,
	#nav-language-black,
	#nav-unlock-black {
		width: 50px;
		height: 50px;
		left: 40px;
		top: 15px;
	}

	.till-tablet-disappear,
	.hide-element {
		display: none !important;
	}
}

@media screen and (max-width: 1049px) {

	#trial-text h1,
	#win-text h1,
	#cert-text h1 {
		font-size: 5vh !important;
	}
}

@media screen and (max-width: 1049px) and (max-height: 800px) {
	.carousel-inner {
		margin-left: 80px;
	}

	.carousel-control-next {
		right: -20px;
	}

	#trial {
		margin: 5px auto;
	}
}

@media screen and (max-width: 991px) {
	#home-study-text {
		padding-right: 40vh;
	}

	.carousel-item p {
		font-size: 1.8vh !important;
	}

	#home-study-text h1::after,
	#chess-club-text h1::after,
	#trial-text h1::after {
		top: 0.5vh;
	}
}

@media screen and (max-width: 910px) {
	#chess-club-text {
		margin-left: 38%;
	}

	h1 {
		font-size: 3.5vh !important;
	}
}

@media screen and (max-width: 800px) {

	/*Manage groups - Tablet view*/
	#manage form label {
		font-size: 1.5vh !important;
	}

	#manage input[type=submit] {
		width: 88% !important;
		padding: 10px 0px;
	}

	#manage #btn_Cancel {
		padding: 10px;
	}

	.nav-box {
		width: 22%;
	}

	.nav-box h3 {
		font-size: 2.2vh !important;
	}

	h2 {
		font-size: 2.5vh !important;
	}

	#signup-text,
	#login-text {
		margin: 40px 0;
	}

	#lock,
	#world,
	#person,
	#member,
	#arrow,
	#back-arrow {
		width: 60px;
		height: 60px;
		fill: #f2f1e7 !important;
	}

	#lock path,
	#world path,
	#person path,
	#member path,
	#arrow path,
	#back-arrow path {
		fill: #f2f1e7 !important;
	}

	#chess-club-text {
		margin-left: 15px;
	}

	.carousel {
		margin-left: -50px;
		margin-right: 20px;
	}

	.carousel-inner {
		width: 75% !important;
		margin-left: 100px;
	}

	.carousel-item {
		width: 100% !important;
	}

	.carousel-control-prev {
		left: 10px !important;
	}

	.carousel-control-next {
		right: -50px !important;
	}

	#blank {
		height: 220px;
	}

	#scroll-box {
		height: 80vh;
	}

	.lang-box {
		width: 150%;
	}

	.legal-tabs ul li button {
		font-size: 4.8vw;
	}

	#header-text h1,
	#home-study-text h1,
	#chess-club-text h1 {
		font-size: 5vh !important;
	}

	#home-study-text ul li,
	#chess-club-text ul li {
		font-size: 2vh !important;
	}

	#home-study-text {
		padding-right: 40px;
	}

	#home-study {
		background: url(../images/main/LearningChess.net-boy-top-flip-800x241-min.jpg) no-repeat center;
		background-size: cover;
	}

	#chess-club {
		background: url(../images/main/LearningChess.net-boy-bottom-flip-800x241-min.jpg) no-repeat center;
		background-size: cover;
	}

	#testimonials-text {
		height: auto;
	}

	#trial {
		background: url(../images/main/LearningChess.net-trial-mobil-866x1102-min.jpg) no-repeat center center;
		background-size: cover;
		height: 58vh;
		position: relative;
	}

	#trial-text {
		height: 80vh;
		margin: 10px;
		height: auto;
		position: absolute;
		bottom: 0;
		padding-bottom: 40px;
		padding-left: 0;
		left: 28%;
	}

	#home_study #trial-text {
		left: 11%;
	}

	#rate {
		width: 40px;
		height: 40px;
	}
}

@media screen and (max-width: 767px) {
	#scroll-box {
		margin-left: 20px;
	}

	.carousel {
		height: auto;
	}

	#testimonials {
		height: 45vh;
	}

	#forgotten .right-login-box {
		margin-left: 0 !important;
	}

	#socials {
		text-align: center;
	}
}

@media screen and (max-width: 700px) and (min-width: 559px) {

	#home-study-text ul li,
	#chess-club-text ul li {
		font-size: 2vh !important;
	}
}

@media screen and (max-width: 601px) {
	#backMenuItem {
		display: none;
	}

	header,
	#header-text {
		height: 60vh;
	}

	#header-text h1 {
		font-size: 3.5vh !important;
	}

	#nav-boxes {
		bottom: -1px;
	}

	#logo {
		margin: 10px;
	}

	h1 {
		font-size: 4vh !important;
	}

	#nav-boxes,
	.nav-box {
		height: 110px;
	}

	#nav-boxes a .nav-box:hover {
		height: 115px;
	}

	.nav-box h3 {
		font-size: 2.2vh !important;
	}

	#book,
	#horse,
	#logic,
	#head {
		width: 45px;
		height: 45px;
	}

	#home-study,
	#home-study-text,
	#chess-club,
	#chess-club-text {
		height: 60vh;
	}

	#home-study-text {
		padding-right: 30px;
	}

	#home-study-text h1,
	#chess-club-text h1 {
		font-size: 5vh !important;
	}

	#home-study-text h1::before,
	#chess-club-text h1::before {
		width: 40px;
		height: 40px;
		top: -40px;
	}

	#home-study-text ul li,
	#chess-club-text ul li {
		font-size: 1.7vh;
	}

	#header-text h1 {
		margin: 0 20px;
	}

	#header-text h2 {
		display: none;
	}

	.nav-box {
		width: 23%;
		margin-right: 0;
	}

	#chess-club-text {
		margin: 0 10px;
	}

	.carousel {
		margin: 0;
		height: 41vh;
	}

	.carousel-inner {
		margin: 0;
		width: 100% !important;
	}

	.carousel-item {
		width: 96% !important;
		margin-left: 10px !important;
	}

	.carousel-control-prev {
		left: -60px !important;
	}

	.carousel-item p {
		font-size: 11px;
	}

	#footerNav {
		text-align: center;
		font-size: 15px;
	}

	#privacy-list,
	#blank {
		display: none;
	}

	#scroll-box {
		max-width: 85%;
		margin-left: 30px !important;
		height: 60vh;
		margin-top: 8px;
	}

	#scroll-box p,
	#scroll-box ul li {
		text-align: justify;
	}

	#langBox {
		left: 40%;
	}

	#accountBox {
		left: 40%;
	}

	.lang-box {
		left: -58%;
	}

	.mobil-legal .btn {
		padding: 0;
	}

	.mobil-legal .card-header {
		background-color: #d62a49 !important;
		padding: 10px 20px !important;
	}

	.mobil-legal .card-header:active {
		background-color: #463956 !important;
	}

	.mobil-legal .btn-link {
		color: #ecece0;
		text-transform: uppercase;
		text-align: left;
	}

	.mobil-legal .btn-link:hover {
		color: #ecece0;
		text-decoration: none;
	}

	.mobil-legal .btn.focus,
	.mobil-legal .btn:focus {
		box-shadow: none;
	}

	.mobil-legal .card-body {
		text-align: left;
		padding: 10px;
	}

	.mobil-legal .card a {
		color: #d62a49;
		font-weight: 800;
	}
}

@media screen and (max-width: 500px) {

	#trial-text h1,
	#win-text h1,
	#cert-text h1 {
		font-size: 4vh !important;
	}

	#tactic #trial-text,
	#trial-text {
		left: 0% !important;
	}

	#home_study #trial-text {
		left: 5px;
	}

	#win-text,
	#cert-text {
		left: 0 !important;
	}
}

@media screen and (max-width: 376px) and (max-height: 668px) {
	#chess-club-text h1::after {
		right: -5vh;
	}
}

/*Courses css*/

.left-course-box {
	padding: 40px;
	background: #463956;
	color: #ecece0;
	height: 100%;
	margin-right: 5px;
	border-radius: 5px;
}

.left-course-box h2,
.left-course-box p {
	margin-bottom: 50px;
}

.left-course-box ul li {
	display: inline-block;
	position: relative;
}

#courses .right-course-box .card:last-of-type .card-header {
	margin-bottom: 0 !important;
}

#signUpLine,
#avaliableLine,
#lockedLine,
#progressLine,
#completedLine {
	margin-left: 80px;
	position: relative;
	font-size: 2vh !important;
	font-weight: 800;
}

#signUpLine::before,
#avaliableLine::before,
#lockedLine::before,
#progressLine::before,
#completedLine::before {
	content: "";
	width: 50px;
	height: 7px;
	border-radius: 10px;
	position: absolute;
	left: -60px;
	top: 6px;
}

#signUpLine::before {
	background: #82b8da;
}

#avaliableLine::before {
	background: #2d94c1;
}

#lockedLine::before {
	background: #acadac;
}

#progressLine::before {
	background: #2d94c1;
}

#completedLine::before {
	background: #22c3a3;
}

.courseStatus,
.lessonStatus {
	position: absolute;
	background: #2d70a0;
	top: 0;
	left: 0;
	z-index: 1;
	height: 200px;
}

.completedCourse,
.completedLesson,
.lockedLesson,
.freeLesson {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 200px;
}

.completedCourse,
.completedLesson,
.completedCourse .number,
.completedLesson .number {
	background: #22c3a3 !important;
}

.completedCourse.goldCompleted,
.completedCourse.goldCompleted .number {
	background: #D3AF37 !important;
}

.lockedLesson,
.lockedLesson .number {
	background: #acadac !important;
}

.freeLesson,
.freeLesson .number {
	background: #82b8da !important;
}

.card-header {
	background-color: #2d94c1 !important;
	border-radius: 5px !important;
	margin-bottom: 8px !important;
	position: relative;
	overflow: hidden;
	border: none !important;
	z-index: 1;
	min-height: 56px;
	max-height: 70px;
	overflow: hidden;
	padding: .75rem 0.7rem !important;
}

.card-header:hover {
	background-color: #463956 !important;
}

.card-header:hover .courseStatus,
.card-header:hover .lessonStatus,
.card-header:hover .completedCourse,
.card-header:hover .completedLesson,
.card-header:hover .completedCourse .number,
.card-header:hover .completedLesson .number,
.card-header:hover .number,
.card-header:hover .freeLesson,
.card-header:hover .freeLesson .number {
	background: #463956 !important;
}

.card-header:hover .lockedLesson .number {
	background: #acadac !important;
}

.card h5 {
	position: relative;
	z-index: 2;
	padding: 10px 100px 10px 20px;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	font-size: 2.4vh;
	text-align: left;
}

.card a {
	color: #ecece0;
	text-decoration: none;
}

.card a:hover {
	color: #ecece0;
	text-decoration: none;
}

.card-body > p a,
.card-body > p a:hover {
	color: #2A93C3;
	text-decoration: underline;
}

.tab-open button {
	background: url(../images/main/LearningChess.net-arrow-down.svg) no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 20px;
	right: 10px;
	outline: none !important;
	z-index: 2;
}

.tab-close button {
	background: url(../images/main/LearningChess.net-arrow-up.svg) no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 20px;
	right: 10px;
	outline: none !important;
	z-index: 2;
}

.card {
	background-color: transparent !important;
	border: none !important;
}

.card-body {
	padding: 1.25rem 0 6px 7px !important;
}

.card-body .col-8 {
	-ms-flex: 0 0 66.7%;
	flex: 0 0 66.7%;
	max-width: 66.7%;
}

.courseInfo {
	background: #463956;
	border-radius: 5px;
	color: #ecece0;
	padding: 10px 20px;
	margin: 2px 2px 2px 0;
}

.last .courseInfo:first-of-type {
	border-radius: 5px 5px 5px 20px;
}

.last .courseInfo:last-of-type {
	border-radius: 5px 5px 20px 5px;
}

.courseInfo:first-of-type {
	margin-left: -7px;
}

.courseInfo p:first-of-type {
	font-size: 1.5vh !important;
}

.courseInfo p {
	margin-bottom: 0 !important;
	padding: 0 15px;
}

.unlocked {
	background: #22c3a3;
	width: 100%;
	min-height: 96%;
	text-align: center;
	border-radius: 5px;
	padding: 20px;
	margin: 2px 2px 2px 2px;
}

.locked {
	background: #d62a49;
	width: 100%;
	min-height: 96%;
	text-align: center;
	border-radius: 5px;
	padding: 20px;
	margin: 2px 2px 2px 2px;
}

.view {
	background: #2d94c1;
	width: 100%;
	min-height: 96%;
	text-align: center;
	border-radius: 5px;
	padding: 20px;
	margin: 2px 2px 2px 2px;
}

.unlocked img,
.locked img,
.view img {
	width: 40px;
	height: 40px;
}

.view img {
	margin: 20px auto;
}

/*Courses - Tablet & Mobil view*/

@media screen and (max-width: 800px) {
	.left-course-box {
		padding: 80px 20px;
	}

	.courseInfo p:first-of-type {
		font-size: 1.5vh !important;
	}
}

@media screen and (max-width: 992px) {

	.carousel,
	#testimonials {
		height: 37vh !important;
	}

	.left-course-box {
		height: auto;
		padding: 20px;
		margin: 0 0 7px 0;
	}

	.right-course-box,
	.right-progress-box {
		margin: 0 0 20px 0;
	}

	.card-header {
		margin-bottom: 7px !important;
	}

	.card .tab-open button,
	.card .tab-close button {
		right: 15px;
	}

	.tab-open button {
		top: 17px;
		width: 30px;
		height: 30px;
	}

	.tab-close button {
		top: 17px;
		width: 30px;
		height: 30px;
	}

	.left-contact-box {
		margin-right: 0 !important;
	}
}

@media screen and (max-width: 650px) {

	.tab-open button,
	.tab-close button {
		width: 20px;
		height: 20px;
	}
}

/*Lessons css*/

.main-lesson {
	background: #463956;
	border-radius: 5px;
	color: #ecece0;
	padding: 30px 40px;
	margin-bottom: 8px;
}

.main-lesson h2 {
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	margin-bottom: 20px;
	font-size: 4.5vh !important;
}

.main-lesson ul {
	text-align: right;
}

#progress-list {
	text-align: left;
}

#progress-list li {
	margin: 20px 20px 0 20px;
}

.main-lesson ul li {
	display: inline-block;
	position: relative;
}

.statusInfo p {
	display: inline-block;
	margin-right: 40px;
}

.restart {
	display: inline-block;
	background: #463956;
	text-align: right;
	border-radius: 20px 5px 5px 20px;
	color: #ecece0;
	padding: 10px 20px 10px 40px;
	margin: -20px 0 10px 0;
	position: relative;
	float: right;
}

.restart a::before {
	content: "";
	background: url(../images/restart.svg) no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 0;
	left: -35px;
}

.restart a {
	display: inline-block;
	color: #ecece0;
	position: relative;
	text-decoration: none;
}

.restart a:hover {
	color: #dad4c6;
	text-decoration: none;
}

.restart p {
	margin-bottom: 0;
}

.restart-text,
.delete-text {
	background: #463956;
}

.restart-text,
.delete-text,
.start-text {
	padding: 10px 20px;
	border-radius: 5px;
	color: #ecece0;
	margin-bottom: 5px;
}

.accept {
	background: #22c3a3;
	color: #ecece0;
	text-align: center;
	padding: 15px 40px;
	border-radius: 5px;
	border-right: 2.5px solid #ecece0;
	border-bottom-left-radius: 30px;
	margin-bottom: 20px;
}

.reject {
	background: #2d94c1;
	color: #ecece0;
	text-align: center;
	padding: 15px 40px;
	border-radius: 5px;
	border-left: 2.5px solid #ecece0;
	border-bottom-right-radius: 30px;
	margin-bottom: 20px;
}

.accept h1,
.reject h1 {
	font-size: 28px !important;
	text-transform: capitalize;
	margin: 0;
}

.accept a,
.reject a {
	color: #ecece0;
}

.accept a:hover,
.reject a:hover {
	color: #463956;
	text-decoration: none;
}

.big-percent-area {}

.big-percent circle:nth-child(2) {
	stroke: #ecece0;
	transform: rotate(270deg);
	transform-origin: 50% 50%;
}

.big-percent circle:nth-child(1) {
	stroke: #ecece0;
	opacity: 0.1;
}

circle {
	fill: none;
	stroke-width: 5;
}

.big-percent,
.big-percent svg,
.big-percent svg circle {
	width: 100px;
	height: 100px;
}

.big-round,
.big-inner-box {
	position: absolute;
	border-radius: 50%;
	width: 100px;
	height: 100px;
}

.big-round {
	clip: rect(0px, 200px, 200px, 50px);
}

.big-inner-box {
	clip: rect(0px, 50px, 200px, 0px);
	background-color: #ecece0;
}

.big-round.outer,
.big-inner-box {
	animation: animate ease 3s;
	transform: rotate(155deg);
}

.big-number {
	width: 90px;
	height: 90px;
	background: #463956;
	line-height: 90px;
	text-align: center;
	margin-top: -95px;
	margin-left: 5px;
	font-size: 15px;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	color: #ecece0;
	position: absolute;
	z-index: 2;
	font-weight: 900;
	border-radius: 50%;
}

@keyframes animate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(155deg);
	}
}

.tab-open button::after {
	content: "";
	position: absolute;
	top: -14px;
	right: -8px;
	background: #ecece0;
	z-index: 2;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	opacity: 0;
}

.tab-close button::after {
	content: "";
	position: absolute;
	top: -10px;
	right: -8px;
	background: #ecece0;
	z-index: 2;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	opacity: 0;
}

@media screen and (min-width: 992px) {

	.tab-open button,
	.tab-close button {
		opacity: 0.5;
	}

	.tab-open button:hover,
	.tab-close button:hover {
		opacity: 1;
	}

	.tab-open button:hover::after,
	.tab-close button:hover::after {
		opacity: 0.2;
	}
}

@media screen and (min-width: 801px) {

	.left-lesson-box {
		padding-right: 4px !important;
	}

	.right-lesson-box {
		padding-left: 4px !important;
	}
}

/*Lessons - Tablet & Mobil view*/

@media screen and (max-width: 800px) {
	.main-lesson ul {
		text-align: left;
	}
}

@media screen and (max-width: 500px) {
	.statusInfo p {
		margin-right: 6px;
	}

	b {
		font-size: 4vw;
	}

	#progress-list li {
		margin: 20px 5px 0 5px;
	}

	.main-lesson {
		margin-bottom: 7px;
	}

	.restart a::before {
		top: -2px;
	}

	.card-header {
		max-height: 56px;
	}
}

/*Progress css*/

.progress-box {
	padding: 10px 40px;
	background: #463956;
	color: #ecece0;
	margin-right: 5px;
	border-radius: 5px;
}

.progress-box .col-lg-12 {
	text-align: center;
}

.progress-box .col-lg-12 img {
	height: 170px;
}

.progress-box .col-lg-12:nth-child(2) {
	margin-top: 20px;
	margin-bottom: 10px;
	text-align: left;
	margin-left: 130px;
}

@media screen and (min-width: 1500px) {
	.progress-box .col-lg-12:nth-child(2) {
		margin-left: 180px;
	}
}

.progress-box h1,
.progress-box ul {
	margin: 10px 0;
}

.progress-box ul li {
	display: inline-block;
	position: relative;
}

.progress-box img {
	height: 140px;
	margin-bottom: 10px;
	margin-top: -10px;
}

.rank-box {
	margin-top: 80px;
	margin-bottom: -20px;
}

.rank-box p:first-of-type {
	text-transform: uppercase;
	margin-bottom: 0;
}

.rank-box b {
	font-size: 23px;
}

.status-lines {
	margin-top: -20px;
}

.progress-menu-box .col-md-3,
.progress-menu-box .col-lg-3 {
	padding-left: 10px;
	padding-right: 10px;
}

.progress-menu-box .col-12:first-of-type {
	padding-right: 2px !important;
}

.progress-menu-box .col-12:nth-child(2) {
	padding: 0 !important;
}

.progress-menu-box .col-12:last-of-type {
	padding-left: 2px !important;
}

.progress-menu-box .col-md-3:last-of-type,
.progress-menu-box .col-lg-3:last-of-type {
	padding-left: 0;
	padding-right: 15px;
}

.purple {
	position: relative;
	height: 68px;
	background: #463956 !important;
	padding: .75rem 0rem !important;
}

.purple::after {
	content: "";
	position: absolute;
	background: url(../images/main/LearningChess.net-arrow-right.svg) no-repeat;
	width: 30px;
	height: 30px;
	right: 5px;
	top: 22px;
}

.purple h5 {
	position: relative;
	z-index: 2;
	padding: 10px 60px 10px 20px;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
}

.progress-menu-box .col-md-3 h5,
.progress-menu-box .col-lg-3 h5 {
	padding: 0 20px;
	text-align: right;
}

.progress-menu-box a,
.play a {
	color: #ecece0;
}

.progress-menu-box a:hover,
.play a:hover {
	color: #ecece0;
	text-decoration: none;
	opacity: 0.5;
}

.play .card-header {
	margin-bottom: 0 !important;
}

.purple:hover {
	opacity: 0.9;
}

.progress-menu-box .col-md-6,
.progress-menu-box .col-lg-6 {
	padding-right: 0;
}

.left-rating-header {
	background: #463956;
	border-radius: 5px !important;
	margin-bottom: 7px !important;
	margin: 8px 0;
	margin-right: 4px;
}

.right-rating-header {
	background: #22c3a3;
	border-radius: 5px !important;
	margin-bottom: 7px !important;
	margin: 8px 0 8px 4px;
	text-align: center;
}

.left-rating-header h1,
.right-rating-header h1 {
	color: #ecece0;
	padding: 25px 40px;
}

.right-rating-header h1 {
	position: relative;
	display: inline-block;
}

.right-rating-header h1::before {
	content: "";
	background: url(../images/star.svg) no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 5vh;
	left: -2vh;
}

#iron,
#bronze,
#silver,
#gold,
#diamond {
	margin-left: 80px;
	position: relative;
}

#iron::before,
#bronze::before,
#silver::before,
#gold::before,
#diamond::before {
	content: "";
	width: 50px;
	height: 5px;
	border-radius: 10px;
	position: absolute;
	left: -60px;
	top: 8px;
}

#iron::before {
	background: #636466;
}

#bronze::before {
	background: #ca672d;
}

#silver::before {
	background: #acadac;
}

#gold::before {
	background: #cba22e;
}

#diamond::before {
	background: #ffffff;
}

.achievements,
.statistics {
	margin-bottom: 8px;
	padding: 20px 40px;
	background: #463956;
	color: #ecece0;
	border-radius: 5px;
}

.achievements ul li {
	display: inline-block;
}

.achievements a,
.statistics a {
	color: #ecece0;
	text-decoration: none;
}

.achievements a:hover,
.statistics a:hover {
	color: #ffffff;
}

.medals {
	text-align: center;
}

.medals .row {
	margin: 10px 0;
}

.medals .col-4 {
	cursor: pointer;
	max-height: 180px;
	margin-bottom: 40px;
}

.medals img {
	width: 150px;
	position: relative;
}

.hide-medal {
	opacity: 0.2;
}

.show-medal {
	opacity: 1;
}

.info-box {
	position: absolute;
	top: 0;
	left: 0;
	text-align: left;
}

.info-box p {
	position: relative;
	font-size: 1.4vw;
}

.info-box button {
	background: url(../images/cross.svg) no-repeat;
	width: 15px;
	height: 15px;
	position: absolute;
	top: -20px;
	left: 0;
	border: none;
}

.info-box span {
	color: #22c3a3;
	font-weight: bold;
}

.levels,
.tactics {
	margin-left: 20px;
	padding: 20px 40px;
	color: #463956;
	margin-bottom: 10px;
}

.levels h2,
.tactics h2 {
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	letter-spacing: 2px;
	margin-bottom: -5px;
}

.levels p:first-of-type,
.tactics p:first-of-type {
	font-weight: bold;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
}

.levels span,
.tactics span {
	color: #22c3a3;
	font-size: 24px;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	margin-left: 5px;
	letter-spacing: 2px;
}

.levels thead th,
.levels tbody td,
.tactics thead th,
.tactics tbody td {
	text-align: center;
	font-weight: bold;
}

.levels tbody th,
.tactics tbody th {
	text-align: right;
	font-weight: bold;
}

.levels tbody tr:nth-child(even) td,
.tactics tbody tr:nth-child(even) td {
	background: #d2d0d1;
	border-radius: 5px;
	font-size: 20px;
}

.levels tbody tr:nth-child(odd) td,
.tactics tbody tr:nth-child(odd) td {
	background: #dfdbd9;
	border-radius: 5px;
	font-size: 20px;
}

.last-row td {
	background: #22c3a3 !important;
	color: #ecece0;
}

.table td,
.table th {
	border: 2px solid #f2f1e7 !important;
}

.hide-info {
	opacity: 0;
	transition: opacity 1s;
}

.show-info {
	opacity: 1;
	transition: opacity 1s;
}

.fadein {
	opacity: 1;
	transition: opacity 1s;
}

.fadeout {
	opacity: 0.2;
	transition: opacity 1s;
}

.show_info_fadeout {
	opacity: 0.2;
	transition: opacity 1s;
}

.percent-area {
	float: right;
	position: absolute;
	top: 5px;
	right: 45px;
	z-index: 2;
}

.percent circle:nth-child(2) {
	stroke: #ecece0;
	transform: rotate(270deg);
	transform-origin: 50% 50%;
}

.percent circle:nth-child(1) {
	stroke: #ecece0;
	opacity: 0.1;
}

.percent,
.percent svg,
.percent svg circle {
	width: 55px;
	height: 55px;
}

.round,
.inner-box {
	position: absolute;
	border-radius: 50%;
	width: 55px;
	height: 55px;
}

.round {
	clip: rect(0px, 200px, 200px, 27px);
}

.inner-box {
	clip: rect(0px, 30px, 60px, 0px);
	background-color: #ecece0;
}

.round.outer,
.inner-box {
	animation: animate ease 3s;
	transform: rotate(155deg);
}

.number {
	width: 45px;
	height: 45px;
	background: #2d94c1;
	line-height: 50px;
	text-align: center;
	margin-top: -50px;
	margin-left: 5px;
	font-size: 15px;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	color: #ecece0;
	position: absolute;
	font-weight: 900;
	border-radius: 50%;
}

@keyframes animate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(180deg);
	}
}

/*Progress - Tablet & Mobil view*/

@media screen and (max-width: 992px) {

	.achievements,
	.statistics {
		padding: 20px;
	}

	.progress-box {
		margin: 7px auto;
	}

	.progress-box .col-12 {
		text-align: center;
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}

	.progress-box .col-12 img {
		width: 180px;
	}

	.progress-menu-box .col-md-3 h5,
	.progress-menu-box .col-lg-3 h5 {
		padding: 10px 20px !important;
	}

	.left-rating-header,
	.right-rating-header,
	.right-course-box,
	.right-progress-box {
		margin: 0;
	}

	.left-rating-header h1,
	.right-rating-header h1 {
		padding: 42px 20px;
		text-align: center;
	}

	.achievements,
	.statistics {
		margin: 0 0 7px 0;
	}

	.card h5 {
		padding: 8px 20px 8px 0;
		font-size: 2.5vh;
	}

	.purple h5 {
		padding: 8px 20px 8px 10px;
		font-size: 2.5vh;
	}

	.card-header {
		padding-right: 50px !important;
	}

	.levels,
	.tactics {
		margin-left: 0;
	}

	.levels .col-12,
	.tactics .col-12 {
		width: 320px;
	}

	.table {
		margin-left: -20px;
	}

	#centralManagement .table,
	#centralLicenses .table,
	#manageTeacher .table {
		margin-left: -5px;
	}

	#lm-stud {
		margin-left: 0;
	}

	.table td,
	.table th {
		padding: 5px !important;
		font-size: 2.2vh;
	}

	.table thead,
	.levels tbody tr:nth-child(even) td,
	.tactics tbody tr:nth-child(even) td,
	.levels tbody tr:nth-child(odd) td,
	.tactics tbody tr:nth-child(odd) td {
		font-size: 3vw;
	}

	#student-table tbody tr:nth-child(even) td,
	#student-table tbody tr:nth-child(odd) td {
		font-size: 20px;
	}

	.levels tbody th,
	.tactics tbody th {
		line-height: 1.45vh;
		vertical-align: middle;
	}

	.info-box p {
		width: 150px;
	}

	.play .card-header {
		margin-bottom: 7px !important;
	}

	.progress-box .col-lg-12 img {
		height: 200px;
	}

	.progress-box .col-lg-12:nth-child(2) {
		margin-left: 60px;
	}

	.levels,
	.tactics {
		padding: 20px;
	}

	.progress-menu-box .col-12:first-of-type {
		padding-right: 0 !important;
	}

	.progress-menu-box .col-12:last-of-type {
		padding-left: 0 !important;
	}
}

@media screen and (max-width: 800px) {
	.tab-open button {
		top: 20px;
	}

	.progress-menu-box .col-md-6,
	.progress-menu-box .col-lg-6 {
		padding-right: 15px;
	}

	.progress-menu-box .col-md-3,
	.progress-menu-box .col-lg-3 {
		padding-left: 15px;
		padding-right: 15px;
	}

	.progress-menu-box .col-md-3:last-of-type,
	.progress-menu-box .col-lg-3:last-of-type {
		padding-left: 15px;
		padding-right: 15px;
	}

	.progress-menu-box .col-md-3 h5,
	.progress-menu-box .col-lg-3 h5 {
		padding: 10px 60px 10px 20px !important;
		text-align: left;
	}

	.progress-box .col-12 img {
		margin-bottom: -50px;
	}

	.card-header {
		padding-right: 85px !important;
	}

	.progress-box .col-lg-12:nth-child(2) {
		margin-top: 80px;
		margin-left: 0;
	}
}

@media screen and (max-width: 600px) {
	.card h5 {
		padding: 8px 0;
		font-size: 2vh;
	}

	.purple h5 {
		padding: 8px 12px;
		font-size: 2vh;
	}

	.myProgress .purple::after {
		top: 16px;
	}

	.medals img {
		width: 75px;
		position: relative;
	}

	.medals .col-4 {
		padding-right: 0;
		padding-left: 0;
	}

	.medals .fadein b {
		font-size: 3.4vw;
	}

	.medals .col-6 {
		margin: 20px auto;
	}

	.percent-area {
		top: 0;
	}

	.info-box p {
		width: 95px;
		font-size: 1.5vh !important;
	}

	#manage .levels tbody th,
	#manage tbody th {
		line-height: 2.45vh;
	}

	#manage .levels tbody tr:nth-child(even) td,
	#manage .tactics tbody tr:nth-child(even) td,
	#manage.levels tbody tr:nth-child(odd) td,
	#manage .tactics tbody tr:nth-child(odd) td {
		border: 2px solid #f2f1e7 !important;
		font-size: 2vh;
		padding: 10px 30px;
	}
}

@media screen and (max-width: 380px) and (min-height: 812px) {
	.left-rating-header h1 {
		padding: 20px;
	}

	/* Learning management ihopne x*/
	.select-items div {
		font-size: 1.5vh !important;
	}
}

/* Sign up css */

signup .row [class*="col-"] {
	margin-bottom: -99999px;
	padding-bottom: 99999px;
}

.top {
	margin-bottom: 5px;
	height: 60%;
}

.bottom {
	height: 39.3%;
}

.light-bg-anchor a {
	color: #212529 !important;
	font-weight: 800;
}

.left-signup-box,
.left-login-box,
.left-account-box,
.left-contact-box {
	padding: 40px;
	background: #463956;
	color: #ecece0;
	border-radius: 5px;
	margin-right: 5px;
}

.left-signup-box p,
.left-login-box p,
.left-account-box p {
	font-size: 2.2vh !important;
}

.right-signup-box .row {
	margin: 0;
}

.left-signup-box a:hover {
	text-decoration: none;
}

.left-signup-box .fb-button p {
	display: inline-block;
}

.fb-button {
	background: #425E9C;
	color: #ecece0;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
}

.fb-button:hover {
	background: #2D94C1;
}

.fb-button svg {
	width: 60px;
	height: 60px;
	fill: #ecece0;
}

#validateCheck {
	background: url(../images/validate-check.svg) no-repeat center;
	width: 25px;
	height: 25px;
	border: 3px solid #332E30;
	border-radius: 50%;
	float: right;
	margin-left: 10px;
}

#signup-text,
#login-text {
	margin: 40px 0;
}

#signup-text a,
#login-text a,
#contact-text a {
	color: #ecece0;
	text-decoration: none;
	font-weight: 800;
}

#signup-text a:hover,
#login-text a:hover,
#contact-text a:hover,
.check-container a:hover {
	color: #2D94C1;
}

.left-signup-box .row {
	margin: 5px 0;
}

.left-login-box a:hover,
.left-account-box a:hover {
	text-decoration: none;
}

.right-signup-box .form-box {
	margin: 20px 80px;
}

.right-signup-box button {
	position: absolute;
	bottom: 0;
}

.right-tactic-box .form-box {
	margin: 0 60px 20px 60px;
}

.form-box a,
.form-box a:hover {
	text-decoration: none;
}

form label,
label {
	text-transform: uppercase;
	font-weight: bold;
	color: #332E30;
	margin-left: 10px;
	margin-bottom: 0;
	font-size: 1.8vh
}

.error,
.number-error {
	color: #D62A49;
	float: left;
	margin-right: 10px;
}

.number-error {
	width: 50%;
	clear: left;
}

form img {
	width: 50px;
	height: 50px;
	margin-left: 20px;
}

#count-label {
	color: #332E30;
	float: left;
}

input[type=text],
input[type=password],
textarea {
	width: 100%;
	padding: 10px 20px;
	margin-bottom: 10px;
	background: #ecece0;
	border: 3px solid #463956;
	border-radius: 5px;
	font-weight: 800;
	margin-bottom: 7px !important;
}

input[type=text]:active,
input[type=email]:active,
input[type=date]:active,
input[type=number]:active {
	border: 3px solid #2A93C3 !important;
	border-radius: 5px !important;
}

/* The container must be positioned relative: */
.custom-select {
	position: relative;
	font-family: inherit;
	background-color: #ecece0 !important;
	border: 3px solid #463956 !important;
	margin-bottom: 12px;
	height: calc(1.5em + .75rem + 15px) !important;
}

.custom-select:active {
	border: 3px solid #2A93C3 !important;
}

.custom-select select {
	display: none;
	/*hide original SELECT element: */
}

.select-selected {
	background-color: transparent;
	border: 2px solid transparent;
	border-radius: 5px;
}

/* Style the arrow inside the select element: */
.select-selected:after {
	position: absolute;
	content: "";
	background: url(../images/main/LearningChess.net-black-arrow-down.svg);
	top: 7px;
	right: -3px;
	width: 40px;
	height: 40px;
}

#select-group .select-selected:after {
	top: 10px !important;
}

#select-group .select-selected.select-arrow-active:after {
	top: 5px !important;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
	transform: rotate(180deg);
	top: 2px !important;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
	color: #463956;
	padding: 3px 16px;
	cursor: pointer;
}

.select-items div {
	border: 3px solid #2A93C3;
	margin: 5px auto 0 auto;
	border-radius: 5px;
}

/* Style items (options): */
.select-items {
	position: absolute;
	background-color: #ecece0;
	top: 110%;
	left: -4px;
	right: 0;
	z-index: 99;
	width: 102%;
}

/* Hide the items when the select box is closed: */
.select-hide {
	display: none;
}

.select-items div:hover,
.same-as-selected {
	background-color: rgba(0, 0, 0, 0.1);
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Remove default arrow */
	background: url(../images/main/LearningChess.net-black-arrow-down.svg) no-repeat;
	/* Add custom arrow */
	background-position: right;
}

input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus {
	border: 3px solid #2D94C1;
	border-color: #2D94C1 !important;
	outline: none !important;
}

input[type=number] {
	width: 50%;
	padding: 10px 20px;
	margin-bottom: 10px;
	background: transparent;
	border: 3px solid #463956;
	border-radius: 5px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
	float: left
}

.check-container {
	text-align: justify;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-transform: none;
	font-weight: 300;
	color: #332E30;
	padding: 5px 0 5px 40px;
}

.check-container a {
	color: #332E30;
	font-weight: 800;
}

form p {
	position: relative;
}

/* Hide the browser's default checkbox */
.check-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 12px;
	left: -10px;
	height: 25px;
	width: 25px;
	background: transparent;
	border: 3px solid #463956;
	border-radius: 5px;
}

.checkmark-error {
	border: 3px solid #D62A49 !important;
}


/* When the checkbox is checked, add a purple background */
.check-container input:checked ~ .checkmark {
	background-color: #463956;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
	left: 6px;
	top: 2px;
	width: 9px;
	height: 15px;
	border: solid white;
	border-width: 0 3px 3px 0;
	border-radius: 1px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

input[type=submit],
button[type=submit] {
	width: 100%;
	padding: 15px 20px;
	background: #2D94C1;
	border: none;
	border-radius: 5px;
	text-transform: uppercase;
	color: #ecece0;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	font-size: 3vh;
}

input[type=submit]:hover,
button[type=submit]:hover {
	background: #463956;
}

.left-accordion-box .card-header h5 {
	color: #ecece0;
}

.card .btn:focus,
.card-header .btn:focus {
	box-shadow: none;
}

/* Sign up - Tablet & Mobil view */
@media screen and (max-width: 1049px) {
	.right-signup-box .form-box {
		margin: 20px;
	}

	.right-login-box .form-box {
		margin: 20px !important;
	}

	.check-container p {
		font-size: 1.7vh !important;
	}
}

@media screen and (max-width: 1049px) and (min-height: 800px) {

	.left-signup-box p,
	.left-login-box p,
	.left-account-box p {
		font-size: 1.7vh !important;
	}
}

@media screen and (max-width: 800px) {
	.check-container {
		padding: 5px 0 0 50px;
	}

	.number-error {
		width: 65%;
		margin-top: 0;
	}

	input[type=submit],
	button[type=submit] {
		font-size: 3vh;
	}

	#change .left-login-box {
		margin-right: -20px;
	}
}

@media screen and (max-width: 767px) {

	.left-signup-box,
	.left-login-box,
	.left-account-box {
		margin-right: 0;
	}
}

@media screen and (max-width: 500px) {
	#signup .row [class*="col-"] {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.number-error {
		width: 50%;
	}

	input[type=submit],
	button[type=submit] {
		font-size: 7vw;
	}

	.top {
		height: 100%;
	}

	.left-signup-box .fb-button p {
		font-size: 2.3vh !important;
	}

	.fb-button svg {
		width: 48px;
		height: 48px;
	}

	.left-signup-box,
	.left-login-box,
	.left-account-box,
	.left-contact-box {
		padding: 30px;
	}

	#signup .card-header h5 {
		padding: 6px 0 !important;
	}
}

/* Tactics css */

.left-tactic-box {
	background: #2A93C3;
	padding: 20px 40px;
	color: #ecece0;
	border-radius: 5px;
	margin-right: 5px;
	height: 100%;
}

.left-tactic-box h1 {
	margin-bottom: 10px;
}

.left-tactic-box a {
	color: #ecece0;
	text-decoration: none;
	font-weight: 800;
}

.left-tactic-box a:hover {
	color: #463956 !important;
	text-decoration: none !important;
}

.right-tactic-box .row {
	margin: 0;
}

.right-tactic-box label {
	margin-left: 35px;
	margin-right: -35px;
}

.right-tactic-box .checkmark {
	left: -20px !important;
}

.right-tactic-box h4 {
	color: #2A93C3;
}

.right-tactic-box .custom-select {
	border: 2px solid #2A93C3 !important;
	font-weight: 800;
	font-size: 1.25rem;
}

.right-tactic-box .select-selected:after {
	top: 10px;
}

#tactic .right-tactic-box .custom-select {
	width: 60%;
}

.containers {
	margin: 20px auto;
}

.disabled-select {
	color: #B7B4B3;
}

.form-box {
	margin: 10px 80px 40px 80px;
}

/* The container */
.right-tactic-box .container {
	font-family: 'LC Web Normal', sans-serif;
	display: block;
	width: 50%;
	float: left;
	position: relative;
	padding-left: 15px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.right-tactic-box .container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */
.right-tactic-box .checkmark {
	position: absolute;
	top: 2px;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #2A93C3;
	border-radius: 50%;
	border: none;
}

.disabled-select .checkmark {
	background-color: #B7B4B3 !important;
}

/* On mouse-over, add a grey background color */
.right-tactic-box .container:hover input ~ .checkmark {
	background-color: #D4203E;
}

/* When the radio button is checked, add a blue background */
.right-tactic-box .container input:checked ~ .checkmark {
	background-color: #D4203E;
}

.active-select {
	color: #D4203E !important;
}

.right-tactic-box input[type=submit],
.right-tactic-box button[type=submit] {
	background: #D4203E !important;
	position: relative;
	padding: 15px 20px;
	font-size: 2vw;
}

.right-tactic-box input[type=submit]:hover,
.right-tactic-box button[type=submit]:hover {
	background: #463956 !important;
}

.right-tactic-box botton {
	position: relative;
}

.right-tactic-box botton::after {
	content: "";
	background: url(../images/main/LearningChess.net-arrow-right.svg) no-repeat center;
	background-size: cover;
	width: 20px;
	height: 20px;
	bottom: 3px;
	right: 22vw;
	position: absolute;
}

.start-text {
	background: #2A93C3;
}

.start .accept {
	background: #22c3a3;
	color: #ecece0;
	text-align: left;
	padding: 15px 40px;
	border-radius: 5px;
	border-right: 2.5px solid #ecece0;
	border-bottom-left-radius: 30px;
	margin-bottom: 5px;
	position: relative;
}

.start .accept h1::after {
	content: '';
	position: absolute;
	background: url(../images/tick.svg) no-repeat;
	width: 30px;
	height: 30px;
	bottom: 15px;
	right: 20px;
}

.start .reject {
	background: #d42d4c;
	color: #ecece0;
	text-align: left;
	padding: 15px 40px;
	border-radius: 5px;
	border-left: 2.5px solid #ecece0;
	border-bottom-right-radius: 30px;
	margin-bottom: 5px;
	position: relative;
}

.start .reject h1::after {
	content: '';
	position: absolute;
	background: url(../images/x.svg) no-repeat;
	width: 30px;
	height: 30px;
	bottom: 15px;
	right: 20px;
}

.start .accept:hover,
.start .reject:hover {
	background: #463956;
}

.start .accept h1,
.start .reject h1 {
	font-size: 28px !important;
	text-transform: capitalize;
	margin: 0;
}

.start .accept a,
.start .reject a {
	color: #ecece0;
}

.start .accept a:hover,
.start .reject a:hover {
	text-decoration: none;
}

#win {
	width: 99.5%;
	background: url(../images/main/LearningChess.net-think&win-1600x377-min.jpg) no-repeat center center;
	background-size: cover;
	height: 45vh;
	margin: 3px auto;
	border-radius: 8px;
}

#win-text {
	color: #f2f1e7;
	position: relative;
	flex-direction: column;
	justify-content: center;
	display: flex;
	height: 45vh;
}

#win-text h1 {
	position: relative;
	display: inline-block;
}

#win-text h1::after {
	content: "";
	background: url(../images/main/LearningChess.net-arrow-right.svg) no-repeat center;
	background-size: cover;
	width: 5vh;
	height: 5vh;
	bottom: 1vh;
	right: -5vh;
	position: absolute;
}

#win a {
	color: #f2f1e7;
	text-decoration: none;
}

/* Certificate banner on index.php — mirrors #win layout (text overlays the
   right half of a wide hero) but points at the cert artwork. Mobile rule
   below in the @media (max-width:1024px) block swaps to the portrait crop. */
#cert {
	width: 99.5%;
	background: url(../images/main/LearningChess.net-cert-1600x377.jpg) no-repeat center center;
	background-size: cover;
	height: 45vh;
	margin: 3px auto;
	border-radius: 8px;
}

#cert-text {
	color: #f2f1e7;
	position: relative;
	flex-direction: column;
	justify-content: center;
	display: flex;
	height: 45vh;
}

#cert-text h1 {
	position: relative;
	display: inline-block;
}

#cert-text h1::after {
	content: "";
	background: url(../images/main/LearningChess.net-arrow-right.svg) no-repeat center;
	background-size: cover;
	width: 5vh;
	height: 5vh;
	bottom: 1vh;
	right: -5vh;
	position: absolute;
}

#cert a {
	color: #f2f1e7;
	text-decoration: none;
}

#lightning {
	background: url(../images/lightning.svg) no-repeat;
	width: 60px;
	height: 60px;
	display: inline-block;
	position: relative;
	top: 15px;
	right: 5px;
}

#tactic-select-mobil {
	display: none;
}

@media screen and (max-width: 1024px) {
	.left-tactic-box {
		margin-left: -5px;
		padding: 20px;
	}

	.right-tactic-box {
		margin-right: -5px;
	}

	/*Learning management - tablet rotated view*/
	.lm-btn-select {
		margin-top: -1px !important;
	}

	#manage form label {
		font-size: 1.5vh !important;
	}
}

@media screen and (max-width: 1024px) and (max-height: 768px) {
	.lm-btn-select {
		margin-top: -1px !important;
	}
}

/*Tactics - Tablet & Mobil view*/

@media screen and (max-width: 800px) {

	.left-tactic-box {
		padding: 20px;
	}

	.right-tactic-box .form-box {
		margin: 20px;
	}

	.right-tactic-box botton::after {
		right: 100px;
	}

	.right-tactic-box input[type=submit],
	.right-tactic-box button[type=submit] {
		font-size: 3vw;
	}

	#tactic .right-tactic-box .custom-select {
		width: 100%;
	}

	p,
	ol li,
	.mobil-legal ul li {
		font-size: 2vh !important;
	}

	ul li,
	.menu p {
		font-size: 3vh !important;
	}

	#trial {
		margin: 5px auto;
	}

	#win {
		background: url(../images/main/LearningChess.net-think&win-mobil-866x990.jpg) no-repeat center center;
		background-size: cover;
		margin-top: -2px;
		height: 58vh;
		position: relative;
		overflow: hidden;
	}

	#win-text {
		height: 30vh;
		margin: 10px;
		left: 24%;
	}

	#cert {
		background: url(../images/main/LearningChess.net-cert-mobil-750x900.jpg) no-repeat center center;
		background-size: cover;
		margin-top: -2px;
		height: 58vh;
		position: relative;
		overflow: hidden;
	}

	#cert-text {
		height: 30vh;
		margin: 10px;
		left: 24%;
	}

	#tactic #win-text {
		left: 28%;
	}
}

@media screen and (max-width: 767px) {

	.right-tactic-box {
		margin-left: -6px;
		margin-right: -6px;
	}

	#tactic #win-text,
	#tactic #trial-text {
		left: 19%;
	}
}

@media screen and (max-width: 500px) {
	#tactic #win-text {
		left: 2%;
	}

	#tactic-select {
		display: none;
	}

	#tactic-select-mobil {
		display: block;
		margin-top: 20px;
	}

	.right-tactic-box botton::after {
		right: 40px;
	}

	.right-tactic-box .container {
		width: 100%;
		float: none;
	}

	.right-tactic-box input[type=submit],
	.right-tactic-box button[type=submit] {
		font-size: 7vw;
	}
}

/*Login css*/

#login .left-login-box,
.left-contact-box {
	height: 100%;
}

.right-login-box button[type=submit] {
	bottom: 0;
	width: 100%;
}

#login .right-login-box button[type=submit] {
	bottom: 0;
	position: absolute;
	width: 48vw;
}

.right-login-box .form-box,
.error-box {
	margin: 0 80px 20px 80px;
}

#login .form-box .error-box {
	margin: 0 0 0 -15px;
}

.error-box p {
	color: red;
}

.error-box p a {
	color: red;
	font-weight: 600;
}

.error-box p a:hover {
	text-decoration: none;
	font-weight: 800;
}

.password,
.current-password,
.new-password,
.confirm-password {
	position: relative;
}

.password .eye,
.current-password .eye,
.new-password .eye,
.confirm-password .eye {
	background: url(../images/eye.svg) no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 18px;
	right: 20px;
	cursor: pointer;
}

.password .no-eye,
.current-password .no-eye,
.new-password .no-eye,
.confirm-password .no-eye {
	background: url(../images/no_eye.svg) no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 12px;
	right: 20px;
	cursor: pointer;
}

.confirmation {
	width: 100%;
	color: #463956;
	text-align: center;
}

.confirmation-box {
	display: inline-block;
	margin: 20px auto -20px auto;
}

.confirmation svg {
	width: 30px;
	height: 30px;
	border: 3px solid #463956;
	padding: 3px;
	border-radius: 50%;
}

.confirmation h1 {
	color: #463956;
	display: inline-block;
	line-height: 40px;
	font-size: 2.8vw !important;
	position: relative;
}

.confirmation-box p {
	margin-left: 90px;
}

.mobil-show {
	display: none;
}

/*Login - Tablet & Mobil view*/

@media screen and (max-width: 1049px) {
	.top {
		margin-bottom: 0;
		height: 100%;
	}

	.bottom {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	.confirmation h1 {
		font-size: 3.8vw !important;
	}
}

@media screen and (max-width: 767px) {
	#login .right-login-box button[type=submit] {
		position: relative;
		width: 100%;
	}
}

@media screen and (max-width: 670px) {

	.right-login-box button[type=submit] {
		bottom: 0;
		position: relative;
	}
}

@media screen and (max-width: 500px) {

	.confirmation h1 {
		font-size: 8.8vw !important;
	}

	.mobil-disappear {
		display: none !important;
	}

	.mobil-show {
		display: block;
		margin: 20px;
		text-align: center;
	}

	.mobil-show img {
		width: 50px;
		height: 50px;
	}

	.mobil-show-button {
		display: inline-block;
	}

	.right-login-box button[type=submit] {
		bottom: 0;
		position: relative;
	}
}

/*Sign-up welcome css*/

#signup .card-header,
#forgotten .card-header {
	background-color: #463956 !important;
	margin-bottom: 5px !important;
}

#signup .card-header h5,
#forgotten .card-header h5 {
	padding: 10px 16px 10px 0;
}

.left-welcome-box {
	min-height: 150px;
}

#forgotten .card-header h5 a {
	color: #ecece0 !important;
}

.left-welcome-box,
#forgotten .left-pass-box {
	padding: 40px;
	background: #463956;
	color: #ecece0;
	border-radius: 5px;
	margin-bottom: 5px;
	margin-right: -5px;
}

#forgotten .left-pass-box {
	height: 100%;
}

.left-accordion-box {
	margin-right: -5px;
}

.right-welcome-box {
	text-align: center;
	margin-left: 10px;
}

.right-welcome-box p {
	padding: 20px;
}

/*Sign-up welcome - Tablet & Mobil view*/


@media screen and (max-width: 992px) {
	.left-welcome-box h1 {
		font-size: 3.5vh !important;
	}
}

@media screen and (max-width: 500px) {
	.right-welcome-box {
		margin: 20px auto;
	}
}

/*Forgotten Password css*/

#forgotten_pass .col-12,
#forgotten_pass .left-login-box {
	min-height: 261px;
}

#forgotten_pass input[type=submit],
#forgotten_pass button[type=submit] {
	margin-top: 50px;
	position: absolute;
}

#forgotten_pass .left-login-box {
	margin-bottom: 0;
}

#forgotten_pass .right-login-box .form-box {
	margin: 0 60px 28px 60px;
}

/*Sign-up welcome - Tablet & Mobil view*/

@media screen and (max-width: 500px) {

	#forgotten_pass input[type=submit],
	#forgotten_pass button[type=submit] {
		margin-top: 0;
	}

	#forgotten p {
		margin-top: 10px;
		margin-bottom: 1rem;
	}
}

/*Forgotten Password Success css*/

#forgotten .right-login-box {
	margin-left: -20px;
}

.my-btn {
	width: 100%;
	padding: 15px 20px;
	margin: 0 auto;
	background: #2D94C1;
	border: none;
	border-radius: 5px;
	text-transform: uppercase;
	color: #ecece0;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	font-size: 3vh;
	text-align: center;
}

.my-btn:hover {
	background: #2d70a0;
}

.my-btn a {
	color: #ecece0 !important;
}

#forgotten a,
#change a {
	color: #212529;
}

#forgotten a:hover,
#change a:hover {
	color: #2D94C1;
	text-decoration: none;
}

/*Forgotten Password Success - Tablet & Mobil view*/

@media screen and (max-width: 800px) {
	#forgotten .right-login-box p {
		font-size: 2.2vh !important;
	}
}

@media screen and (max-width: 500px) {

	#forgotten .right-login-box,
	.right-welcome-box {
		margin-left: 0;
	}

	#forgotten .left-pass-box {
		height: auto;
	}
}

/*Change Password css*/

#change-pass .col-12,
#change-pass .left-login-box {
	min-height: 100%;
}

/*Change Password - Tablet & Mobil view*/

@media screen and (max-width: 800px) {
	.right-login-box .my-btn {
		width: 93% !important;
	}
}

@media screen and (max-width: 500px) {

	#change-pass .col-12,
	#change-pass .left-login-box {
		min-height: auto;
	}

	#change-pass .right-login-box {
		margin: 20px auto;
	}

	#change-pass .right-login-box button[type=submit] {
		bottom: 0;
		position: relative;
		width: 92vw !important;
	}
}

/*Change Password Success css*/

#change .right-login-box {
	margin: 35px auto 20px auto;
}

#change .col-12,
#change .left-login-box {
	min-height: 160px;
}

/*Change Password Success - Tablet & Mobil view*/

.right-login-box .my-btn {
	width: 95%;
	margin: 0;
	position: absolute;
	bottom: 0;
}

@media screen and (min-width: 1050px) {
	#change {
		margin-bottom: 60vh;
	}
}

@media screen and (max-width: 1150px) {
	#change h1 {
		font-size: 4vh !important;
	}

	#contactForm .form-box {
		margin: 10px 20px 40px 20px;
	}
}

@media screen and (max-width: 800px) {
	#change .right-login-box {
		margin: 20px auto;
	}

	#contact-success .form-box {
		margin: 20px;
	}
}

@media screen and (max-width: 767px) {
	#change .left-login-box {
		margin-right: 0;
	}

	#change .right-login-box .my-btn {
		width: 96% !important;
	}

	#change p {
		font-size: 2vh !important;
	}
}

@media screen and (max-width: 500px) {
	#change .right-login-box .my-btn {
		width: 94% !important;
	}

	#change p {
		font-size: 2.2vh !important;
	}
}

/*My account css*/

.newsletter-title {
	text-transform: uppercase;
	font-weight: bold;
	color: #332E30;
	margin-bottom: 0;
}

#myaccount .form-box {
	margin: 28px 80px;
}

#myaccount .left-login-box {
	height: 100%;
}

#myaccount .checkmark {
	left: 0;
}

#newsletter-cb {
	margin: 10px auto;
}

#newsletter-cb .checkmark {
	top: 5px;
}

input[type=date] {
	width: 100%;
	padding: 10px 5px 10px 20px;
	margin-bottom: 10px;
	background: #ecece0;
	border: 3px solid #463956;
	border-radius: 5px;
	min-height: 50px;
	-webkit-appearance: none;
}

form .row {
	margin: 0;
}

.left-account-box {
	min-height: 95%;
}

.delete-text {
	margin-top: 10px;
}

.delete .accept {
	background: #d42d4c;
	color: #ecece0;
	text-align: left;
	padding: 15px 40px;
	border-radius: 5px;
	border-right: 2.5px solid #ecece0;
	border-bottom-left-radius: 30px;
	margin-bottom: 20px;
	position: relative;
}

.delete .accept h1::after {
	content: '';
	position: absolute;
	background: url(../images/tick.svg) no-repeat;
	width: 30px;
	height: 30px;
	bottom: 15px;
	right: 20px;
}

.delete .reject {
	background: #2d94c1;
	color: #ecece0;
	text-align: left;
	padding: 15px 40px;
	border-radius: 5px;
	border-left: 2.5px solid #ecece0;
	border-bottom-right-radius: 30px;
	margin-bottom: 20px;
	position: relative;
}

.delete .reject h1::after {
	content: '';
	position: absolute;
	background: url(../images/x.svg) no-repeat;
	width: 30px;
	height: 30px;
	bottom: 15px;
	right: 20px;
}

.delete .accept:hover,
.delete .reject:hover {
	background: #463956;
}

.delete .accept h1,
.delete .reject h1 {
	font-size: 28px !important;
	text-transform: capitalize;
	margin: 0;
}

.delete .accept a,
.delete .reject a {
	color: #ecece0;
}

.delete .accept a:hover,
.delete .reject a:hover {
	text-decoration: none;
}

.my-btn p {
	text-transform: uppercase;
	color: #ecece0;
	font-family: 'LC Web Heading', 'Impact', sans-serif !important;
	font-size: 3vh !important;
	margin: 0;
}

/*My account - Tablet & Mobil view*/

@media screen and (max-width: 500px) {
	#newsletter-cb {
		padding: 5px 10px 20px 80px;
	}
}

/*Get Started css */

.start-box {
	padding: 40px;
	background: #463956;
	color: #ecece0;
	border-radius: 5px;
	margin-bottom: 5px;
	margin: 0 !important;
}

.start-box a {
	color: #fff;
}

.start-box a:hover {
	text-decoration: none;
	color: #3EB49C;
}

.equal {
	display: table;
}

.img-box-equal,
.text-box-equal {
	float: none;
	display: table-cell;
	vertical-align: top;
}

.img-box-equal {
	margin-bottom: 5px;
}

.left-img-box,
.right-img-box {
	margin-bottom: 5px;
}

.left-img-box {
	padding-right: 0 !important;
}

.right-img-box {
	padding-left: 0 !important;
}

.left-big-img {
	width: 100%;
	height: 520px;
	border-radius: 5px;
	background: url(../images/playing_800x520.png) no-repeat center;
	background-size: cover;
}

.left-img {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/girl-playing_800x400.png) no-repeat center;
	background-size: cover;
}

.right-img {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/player_800x400.png) no-repeat center;
	background-size: cover;
}

/* home_study page desktop pictures */
.right-img-home-study-girl {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/homestudy/girl_with_a_computer_776x400_LearningChess.net-min.jpg) no-repeat center;
	background-size: cover;
}

.left-img-home-study-father-son {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/homestudy/father_plays_chess_with_son_776x400_LearningChess.net-min.jpg) no-repeat center;
	background-size: cover;
}

/* EOT - home_study page desktop pictures */

/* Gift purchase picture */
	.right-img-gift-purchase {
		width: 100%;
		height: 300px;
		border-radius: 5px;
		background: url(../images/unlock/LearningChess_as_gift_776x400-min.jpg) no-repeat center;
		background-size: cover;
	}

/* chess_club page desktop pictures */
.right-img-chess-club-uk {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/scholastic/Coach_teaches_in_the_chess_club-LearningChess.net_776x400-min.jpg) no-repeat right;
	background-size: cover;
}

.right-img-chess-club-france {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/scholastic/Extracurricular_Activities_at_LearningChess.net_776x400-min.jpg) no-repeat center;
	background-size: cover;
}

.right-img-chess-club-usa {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/scholastic/Solution_for_school_districts_at_LearningChess.net_776x400-min.jpg) no-repeat center;
	background-size: cover;
}

.left-img-chess-club-free-student-workbook-vol1 {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/scholastic/Free_Student_Workbook_Vol1_LearningChess.net_776x400-min.jpg) no-repeat center;
	background-size: cover;
}

.left-img-chess-club-maldiv {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/scholastic/Scholastic_chess-LearningChess.net_776x400-min.jpg) no-repeat center;
	background-size: cover;
}

.left-img-chess-club-greece {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/scholastic/Summer_Camp_with_LearningChess.net_776x400-min.jpg) no-repeat center;
	background-size: cover;
}

.left-img-chess-club-country {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/scholastic/Country-wide_solution_at_LearningChess.net_776x400-min.jpg) no-repeat center;
	background-size: cover;
}

/* EOT - chess_club page desktop pictures */

.text-box-equal,
.text-box {
	padding: 20px !important;
}

.text-box-equal {
	position: relative;
	flex-direction: column;
	justify-content: center;
	display: flex;
}

.text-box-equal h1 svg,
.text-box h1 svg {
	width: 60px;
	height: 60px;
	top: -60px;
	left: -10px;
	position: absolute;
}

.text-box-equal h3 svg,
.text-box h3 svg {
	width: 60px;
	height: 60px;
	top: -60px;
	left: -10px;
	position: absolute;
}

.text-box-equal h1,
.text-box h1 {
	margin: 20px 0;
	position: relative;
}

.text-box-equal h3,
.text-box h3 {
	margin: 60px 0 0 0;
	position: relative;
	display: inline-block;
}

.text-box-equal ul,
.text-box-equal ol,
.text-box ul,
.text-box ol {
	margin-left: 30px;
}

.text-box-equal ul li,
.text-box ul li {
	list-style-type: disc;
}

.text-box-equal ol li,
.text-box ol li {
	list-style-type: decimal;
}

.text-box-equal a,
.text-box a {
	color: #212529;
	font-weight: 800;
}

.text-box-equal a:hover,
.text-box a:hover {
	color: #3EB49C;
	text-decoration: none;
}

.text-box-equal a h3::after,
.text-box a h3::after {
	content: "";
	display: inline-block;
	background: url(../images/main/LearningChess.net-arrow-right.svg) no-repeat;
	width: 4vh;
	height: 4vh;
	top: 0;
	right: -4vh;
	position: absolute;
}

.colored-box {
	padding: 0 20px;
	color: #ecece0;
	border-radius: 5px;
	margin-bottom: 5px;
}

.colored-box a {
	color: #ecece0 !important;
}

.colored-box a:hover {
	color: #ecece0;
}

.full-width-img {
	width: 100%;
	height: 400px;
	border-radius: 5px;
	background: url(../images/playing_1600x400.png) no-repeat center;
	background-size: cover;
}

/*Get Started - Tablet & Mobil view*/

@media screen and (max-width: 1049px) {

	.text-box-equal ul li,
	.text-box ul li,
	.text-box ol li,
	.text-box-equal p,
	.text-box p {
		font-size: 1.7vh !important;
	}
}

@media screen and (max-width: 800px) {

	.text-box-equal,
	.text-box {
		padding: 40px !important;
	}

	.left-big-img {
		background: url(../images/playing_800x520.png) no-repeat center;
		background-size: cover;
		background-position: right;
		height: 555px;
	}

	.left-img {
		background: url(../images/girl-playing_800x400.png) no-repeat center;
		background-size: cover;
	}

	.right-img {
		background: url(../images/player_800x400.png) no-repeat center;
		background-size: cover;
	}

	.full-width-img {
		background: url(../images/playing_1600x400.png) no-repeat center;
		background-size: cover;
	}

	.carousel-item p:nth-child(3),
	.carousel-item p:nth-child(4) {
		font-size: 1.5vh !important;
	}
}

@media screen and (max-width: 815px) and (max-height: 420px) {
	.offset-md-3 {
		margin-left: 0 !important;
	}

	input[type=submit],
	button[type=submit] {
		font-size: 7vh;
	}

	p,
	ul li,
	ol li {
		font-size: 4vh !important;
	}

	.check-container p {
		font-size: 3.7vh !important;
	}

	.courseInfo p:first-of-type {
		font-size: 3.5vh !important;
	}

	.header-nav li {
		font-size: 6vh !important;
	}

	#win-text {
		max-width: 50% !important;
		margin-left: 60%;
	}

	#testimonials {
		height: auto;
		margin: 20px 50px;
	}

	.carousel,
	#testimonials {
		height: 40vh !important;
	}

	#testimonials-text {
		max-width: 25% !important;
	}

	#testimonial {
		max-width: 75% !important;
	}

	.order-md-2 {
		-ms-flex-order: 2;
		order: 2;
	}

	.order-md-1 {
		-ms-flex-order: 1;
		order: 1;
	}

	h1 {
		font-size: 6vh !important;
	}

	h2 {
		font-size: 4.5vh !important;
	}

	.main-lesson h2 {
		font-size: 8.5vh !important;
	}

	h3 {
		font-size: 5vh !important;
	}

	.left-course-box {
		padding: 40px;
	}

	.left-contact-box {
		margin-right: 5px !important;
	}

	.help-tabs ul li button {
		font-size: 4vh !important;
	}

	.left-course-box h1 {
		font-size: 10vh !important;
	}

	.legal-tabs ul li button {
		font-size: 4vh !important;
	}

	#header-text h1,
	#home-study-text h1,
	#chess-club-text h1 {
		font-size: 7vh !important;
	}

	#home-study-text ul li,
	#chess-club-text ul li {
		font-size: 3vh !important;
	}

	.card h5,
	.purple h5 {
		font-size: 4.5vh !important;
	}

	#nav-boxes,
	.nav-box {
		height: 80px !important;
	}

	.nav-box:hover {
		height: 85px !important;
	}

	#testimonials-text h1 {
		font-size: 5vh !important;
	}

	.carousel-item p {
		font-size: 2.8vh !important;
	}

	.nav-box {
		width: 15% !important;
		padding-top: 0;
	}

	.nav-box h3 {
		font-size: 3.2vh !important;
	}

	#book,
	#horse,
	#head,
	#logic {
		width: 50px;
		height: 50px;
	}

	#chess-club-text {
		margin-left: 5vh;
	}

	#home-study-text {
		margin-left: -5vh;
	}

	#home-study-text h1::before,
	#chess-club-text h1::before {
		width: 40px;
		height: 40px;
		top: -40px;
	}

	#home-study-text h1::after,
	#chess-club-text h1::after {
		width: 6vh;
		height: 6vh;
		top: 1.3vh;
		right: -6vh;
	}

	.carousel {
		height: auto;
	}

	.carousel-item p:nth-child(3),
	.carousel-item p:nth-child(4) {
		margin-bottom: 0;
		font-size: 2.7vh !important;
		line-height: 2.7vh !important;
	}

	.carousel-control-next {
		right: -50px !important;
	}

	.left-welcome-box h1 {
		font-size: 6vh !important;
	}

	/* Learning management ihopne x rotated */
	.select-items div,
	.select-selected {
		font-size: 3vh !important;
	}

	/* home_study page 680px size pictures */
	.right-img-home-study-girl {
		width: 100%;
		height: 170px;
		border-radius: 5px;
		background: url(../images/homestudy/girl_with_a_computer_330x170_LearningChess.net-min.jpg) no-repeat center;
		background-size: cover;
	}

	.left-img-home-study-father-son {
		width: 100%;
		height: 170px;
		border-radius: 5px;
		background: url(../images/homestudy/father_plays_chess_with_son_330x170_LearningChess.net-min.jpg) no-repeat center;
		background-size: cover;
	}

	.left-signup-box p,
	.left-login-box p,
	.left-account-box p {
		font-size: 3.7vh !important;
	}

	form label,
	#manage form label {
		font-size: 3.8vh !important;
	}

	#forgotten .right-login-box p {
		font-size: 4.2vh !important;
	}

	#change h1 {
		font-size: 10vh !important;
	}

	#change p {
		font-size: 5vh !important;
	}

	.restart a::before {
		top: -4px;
	}

	.progress-box img {
		height: 140px !important;
	}

	.progress-box .col-lg-12:nth-child(2) {
		margin-top: 20px;
	}

	.percent-area {
		top: 2px;
	}

	#win {
		background: url(../images/main/LearningChess.net-think&win-1600x377-min.jpg) no-repeat center center;
		background-size: cover;
	}

	#trial {
		background: url(../images/main/LearningChess.net-trial-1600x377-min.jpg) no-repeat center center;
		background-size: cover;
	}

	#tactic #trial-text {
		right: -4% !important;
	}

	#tactic #win-text {
		left: 0;
	}

	.unlocked img {
		margin-top: 0;
	}

	/*Unlock*/

	#unlock .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1 {
		line-height: 9vh;
		font-size: 9.5vh !important;
		display: block;
	}

	#unlock h2 {
		font-size: 4vh !important;
	}

	#unlock .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h2 span {
		font-size: 8vh;
	}

	#unlock .small-price-box h1,
	.currency-box h1,
	.guarantee-box h1,
	.bonus-box h1 {
		font-size: 6vh !important;
	}

	#unlock .currency-box .custom-select {
		width: 40vh !important;
	}

	#unlock .paypal-box p {
		font-size: 3.4vh !important;
	}

	#unlock .bonus-box-inner input[type=text] {
		width: 50vh;
		min-height: 50px;
	}

	#unlock .bonus-box-inner button[type=submit]::after {
		top: 7px;
	}

	#unlock .bonus-box-inner button[type=submit] {
		font-size: 6vh;
	}

	#support {
		background: url(../images/support-mobil.png) no-repeat center center;
		background-size: cover;
	}

	#support-text h2::after {
		right: -6vh !important;
	}

	.right-welcome-box {
		margin-left: 0;
	}

	/* EOT - home_study page desktop pictures */
}

@media screen and (min-width: 1300px) {
	.currency-box .custom-select {
		min-height: 70px !important;
		margin-bottom: 60px !important;
	}

	.bonus-box-inner button[type=submit]::after {
		width: 40px !important;
		height: 40px !important;
		top: 11px !important;
		right: -30px !important;
	}

	.guarantee-box img {
		width: 160px !important;
	}

	.paypal-box img {
		width: 200px !important;
	}

	.currency-box .custom-select .select-selected:after {
		top: 23px !important;
		right: 6px !important;
	}
}

@media screen and (max-width: 992px) {
	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		left: -10px !important;
	}
}

@media screen and (max-width: 768px) {
	.bonus-box-inner {
		margin-left: 11% !important;
	}

	/*Learning management - rotated Iphone 7*/
	.lm-btn {
		min-width: 180px;
	}

	.lm-btn button[type=submit] {
		min-height: 60px;
	}

	.lm-btn-select {
		min-width: 200px;
		margin: 0 0 -2px 0;
	}
}

@media screen and (max-width: 630px) {
	.bonus-box-inner {
		margin-left: 5% !important;
	}
}

@media screen and (max-width: 590px) {
	.bonus-box-inner {
		margin-left: 0% !important;
	}

	.bonus-box-inner input[type=text] {
		width: 23vh !important;
	}
}

@media screen and (max-width: 500px) {

	.text-box-equal,
	.text-box {
		padding: 10px 20px !important;
	}

	.text-box-equal h1,
	.text-box h1 {
		margin: 0 0 10px 0;
	}

	.left-big-img {
		background: url(../images/playing_800x520.png) no-repeat center;
		background-size: cover;
		background-position: right;
		height: 400px;
	}

	.left-img {
		background: url(../images/girl-playing_800x400.png) no-repeat center;
		background-size: cover;
		height: 200px;
	}

	.right-img {
		background: url(../images/player_800x400.png) no-repeat center;
		background-size: cover;
		height: 200px;
	}

	.full-width-img {
		background: url(../images/playing_1600x400.png) no-repeat center;
		background-size: cover;
		height: 200px;
	}

	.left-img-box {
		padding-right: 15px !important;
	}

	.right-img-box {
		padding-left: 15px !important;
	}

	.img-box-equal {
		height: auto;
	}

	#testimonials {
		height: 57vh !important;
		padding: 20px 0;
		margin: 10px 50px;
	}

	.carousel-item p:nth-child(3),
	.carousel-item p:nth-child(4) {
		font-size: 3vw !important;
		line-height: 5vw !important;
		margin-bottom: 0;
	}

	.bonus-box-inner input[type=text] {
		width: 22vh !important;
		max-height: 40px !important;
	}

	.small-price-box,
	.price-details-box {
		margin-top: 3px;
	}

	.small-price-box p,
	.small-price-box h1 {
		text-align: right;
	}

	.small-price-box ul {
		margin: 0 0 0 30px !important;
	}

	.small-price-box::before {
		display: none;
	}

	#unlock .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1 {
		display: block;
		font-size: 4.5vh !important;
		line-height: 4.5vh !important;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box {
		padding: 0 0 0 20px !important;
	}

	.big-price-inner-boxes .col-6:nth-child(2) .big-price-inner-box {
		padding: 0 0 0 20px !important;
	}

	.big-price-inner-boxes .col-6:nth-child(3) .big-price-inner-box {
		padding: 0 !important;
		margin-left: -15px;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h2 {
		font-size: 2vh !important;
	}


	#trial-text h1::after {
		top: 0;
	}

	#win-text h1::after {
		bottom: 0;
	}

	/* home_study page 680px size pictures */
	.right-img-home-study-girl {
		width: 100%;
		height: 200px;
		border-radius: 5px;
		background: url(../images/homestudy/girl_with_a_computer_330x170_LearningChess.net-min.jpg) no-repeat center;
		background-size: cover;
	}

	.left-img-home-study-father-son {
		width: 100%;
		height: 200px;
		border-radius: 5px;
		background: url(../images/homestudy/father_plays_chess_with_son_330x170_LearningChess.net-min.jpg) no-repeat center;
		background-size: cover;
	}

	/* EOT - home_study page desktop pictures */

	/* Gift purchase picture */
	.right-img-gift-purchase {
		width: 100%;
		height: 300px;
		border-radius: 5px;
		background: url(../images/unlock/LearningChess_as_gift_388x200-min.jpg) no-repeat center;
		background-size: cover;
	}

	/* chess_club page desktop pictures */
	.right-img-chess-club-uk {
		width: 100%;
		height: 200px;
		border-radius: 5px;
		background: url(../images/scholastic/Coach_teaches_in_the_chess_club-LearningChess.net_388x200-min.jpg) no-repeat center;
		background-size: cover;
	}

	.right-img-chess-club-france {
		width: 100%;
		height: 200px;
		border-radius: 5px;
		background: url(../images/scholastic/Extracurricular_Activities_at_LearningChess.net_388x200-min.jpg) no-repeat center;
		background-size: cover;
	}

	.right-img-chess-club-usa {
		width: 100%;
		height: 200px;
		border-radius: 5px;
		background: url(../images/scholastic/Solution_for_school_districts_at_LearningChess.net_388x200-min.jpg) no-repeat center;
		background-size: cover;
	}

	.left-img-chess-club-free-student-workbook-vol1 {
		width: 100%;
		height: 200px;
		border-radius: 5px;
		background: url(../images/scholastic/Free_Student_Workbook_Vol1_LearningChess.net_388x200-min.jpg) no-repeat center;
		background-size: cover;
	}

	.left-img-chess-club-maldiv {
		width: 100%;
		height: 200px;
		border-radius: 5px;
		background: url(../images/scholastic/Scholastic_chess_LearningChess.net_388x200-min.jpg) no-repeat center;
		background-size: cover;
	}

	.left-img-chess-club-greece {
		width: 100%;
		height: 200px;
		border-radius: 5px;
		background: url(../images/scholastic/Summer_Camp_with_LearningChess.net_388x200-min.jpg) no-repeat center;
		background-size: cover;
	}

	.left-img-chess-club-country {
		width: 100%;
		height: 200px;
		border-radius: 5px;
		background: url(../images/scholastic/Country-wide_solution_at_LearningChess.net_388x200-min.jpg) no-repeat center;
		background-size: cover;
	}

	/* EOT - chess_club page desktop pictures */
}

@media screen and (max-width: 380px) {
	.bonus-box-inner input[type=text] {
		width: 16vh !important;
		max-height: 45px !important;
	}

	.bonus-box-inner button[type=submit]::after {
		top: 5px !important;
	}

	.currency-box .custom-select {
		padding: 0 20px 0 0 !important;
	}

	.currency-box .custom-select .select-selected:after {
		top: 13px !important;
	}
}

@media screen and (max-width: 360px) {
	.bonus-box-inner input[type=text] {
		width: 22vh !important;
		max-height: 40px !important;
	}

	.currency-box .custom-select {
		padding: 6px 20px 0 0 !important;
	}
}

@media screen and (max-width: 320px) {
	.bonus-box-inner input[type=text] {
		width: 22vh !important;
		max-height: 34px !important;
	}

	.bonus-box-inner button[type=submit]::after {
		top: 1px !important;
	}

	.small-price-box img {
		width: 125px !important;
	}
}

/*Help css*/
.help-tabs ul {
	margin-bottom: 0;
}

.help-tabs ul li {
	background: #d62a49;
	margin: 2.5px 20px;
	color: #f2f1e7;
	border-radius: 5px;
}

.help-tabs ul li ul {
	font-family: 'LC Web Normal', sans-serif;
	font-weight: 600 !important;
	padding-bottom: 20px;
	padding-left: 20px;
}

.help-tabs ul li a {
	text-decoration: none;
	color: #f2f1e7 !important;
}

.help-tabs ul li a:hover {
	opacity: 0.8;
}

.help-tabs ul li button {
	background: transparent;
	border: none;
	color: #f2f1e7;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	text-transform: uppercase;
	padding: 10px 20px;
	font-size: 2vh;
	text-align: left;
}

.help-tabcontent h2 {
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	text-transform: uppercase;
	color: #d62a49;
}

.help-tabcontent h3 {
	font-family: 'LC Web Normal', sans-serif;
	text-transform: uppercase;
	font-size: 20px !important;
	color: #d62a49;
	font-weight: 800 !important;
}

.help-tabcontent ul li {
	margin-left: 20px;
	position: relative;
}

.help-tabcontent ul li::before {
	content: "";
	width: 5px;
	height: 5px;
	background: #332e30;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: -20px;
}

.help-tabs ul li ul li {
	position: relative;
	background: transparent;
}

.help-tabs ul li ul li::before {
	content: "";
	width: 5px;
	height: 5px;
	background: #f2f1e7;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: -20px;
}

.show-tabcontent {
	display: block;
}

.hide-tabcontent {
	display: none;
}

.active-help-tab {
	background: #463956 !important;
}

/*Help Tablet & Mobil view*/

.mobil-help .card-header {
	padding: 0 !important;
	background-color: #d62a49 !important;
}

.mobil-help .card-header:active {
	background-color: #463956 !important;
}

.mobil-help .card h5 {
	padding: 10px 20px !important;
}

.mobil-help .btn-link {
	color: #ecece0;
	font-size: 4vw;
	text-transform: uppercase;
	text-align: left;
}

.mobil-help .btn-link:hover {
	color: #ecece0;
	text-decoration: none;
}

.mobil-help .btn.focus,
.mobil-help .btn:focus {
	box-shadow: none;
}

.mobil-help .card-body {
	text-align: left;
	padding: 10px;
}

.mobil-help .card a {
	color: #d62a49;
	font-weight: 800;
}

/*Unlock css*/

.intro-box {
	padding: 20px 40px;
	background: #3EB49C;
	color: #ecece0;
	border-radius: 5px;
}

.intro-box h1,
.intro-box p {
	display: inline-block;
}

.intro-box h1 {
	font-size: 5vh !important;
}

.intro-box p {
	font-size: 2.4vh !important;
}

.intro-box a {
	color: #ecece0 !important;
	font-weight: 800;
}

.intro-box a:hover {
	color: #463956 !important;
	text-decoration: none;
}

.big-price-box {
	margin-top: 5px;
	padding: 20px 0;
	background: #463956;
	color: #ecece0;
	border-radius: 25px 25px 5px 5px;
}

.single-course {
	border-radius: 5px !important;
}

.big-price-inner-boxes {
	text-align: center;
	padding: 60px 0;
	margin: 0 auto;
}

.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box {
	text-align: right;
}

.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1 {
	line-height: 5.5vh;
	position: relative;
	margin-bottom: 0;
	display: flex;
}

.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
	content: "";
	position: absolute;
	background: url(../images/shine.svg) no-repeat;
	width: 40px;
	height: 40px;
	top: -30px;
	left: -30px;
}

.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h2 {
	text-transform: uppercase;
	color: #3EB49C;
	font-weight: 800 !important;
	display: flex;
}

.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h2 span {
	font-size: 5vh;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	margin-left: 5px;
}

.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box {
	padding: 0 0 0 40px;
}

.single-course .col-6:first-of-type .big-price-inner-box {
	padding: 0;
}

.big-price-inner-boxes .col-6:nth-child(2) .big-price-inner-box {
	text-align: left;
	padding: 0 0 0 40px;
	margin-left: 15px;
}

.big-price-inner-boxes .col-6:nth-child(3) .big-price-inner-box h2 {
	font-size: 4.5vh !important;
	font-family: 'LC Web Heading', cursive;
	font-weight: 800;
}

.big-price-inner-boxes .col-xl-2 {
	-ms-flex: 0 0 20%;
	flex: 0 0 20%;
	max-width: 20%;
}

.big-price-inner-box ul li,
.small-price-box ul li {
	list-style: disc;
}

.small-price-box ul {
	margin: 20px;
}

.big-price-inner-box ul li:first-of-type,
.big-price-inner-box ul li:nth-child(2) {
	color: #3EB49C;
}

.single-course .col-6:first-of-type .big-price-inner-box h1::before {
	display: none !important;
}

.single-course .col-6:first-of-type .big-price-inner-box p {
	margin: 0 !important;
	text-align: right;
}

.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1 {
	font-size: 5.5vh !important;
	line-height: 5.5vh !important;
}

.big-price-inner-box ul li {
	font-size: 2.3vh !important;
}

.small-price-box img {
	width: 200px;
}

.big-price-inner-box img {
	width: 170px;
}

.big-price-inner-boxes .col-6:nth-child(4) .big-price-inner-box img {
	width: 150px;
}

.small-price-boxes .col-12:first-of-type {
	padding-right: 3px !important;
}

.small-price-boxes .col-12:nth-child(2),
.small-price-boxes .col-12:nth-child(3) {
	padding-right: 3px !important;
	padding-left: 3px !important;
}

.small-price-boxes .col-12:nth-child(4) {
	padding-left: 3px !important;
}

.small-price-box {
	width: 100%;
	margin-top: 5px;
	padding: 20px;
	background: #463956;
	color: #ecece0;
	border-radius: 5px;
	min-height: 330px;
	position: relative;
}

.small-price-box::before {
	content: "";
	position: absolute;
	background: url(../images/up-arrow.svg) no-repeat;
	width: 25px;
	height: 25px;
	top: -20px;
	left: 49%;
}

.small-price-box h1,
.currency-box h1,
.guarantee-box h1,
.bonus-box h1 {
	font-size: 3vh !important;
}

.small-price-boxes .col-lg-4:last-of-type {
	padding-right: 0 !important;
}

.currency-box h1,
.bonus-box h1 {
	text-align: right;
	margin-right: 10px;
}

.currency-box h1,
.currency-box .custom-select,
.bonus-box h1 {
	display: inline-block;
	float: left;
}

.currency-box .custom-select {
	width: 15vh !important;
	background-color: #2A93C3 !important;
	border: 4px solid #ecece0 !important;
	min-height: 55px !important;
	margin-bottom: 0 !important;
}

.currency-box .custom-select .select-selected {
	color: #ecece0 !important;
	padding: 0 !important;
	font-weight: 800;
	font-size: 3vh;
}

.currency-box .custom-select .select-items {
	background-color: #2A93C3 !important;
	border-radius: 5px;
}

.currency-box .custom-select .select-items div {
	border: 3px solid #ecece0 !important;
	color: #ecece0 !important;
	font-weight: 800;
	font-size: 3vh;
}

.currency-box .custom-select .select-selected:after {
	position: absolute;
	content: "";
	background: url(../images/main/LearningChess.net-arrow-down.svg) no-repeat;
	top: 14px !important;
	right: 5px !important;
	width: 25px;
	height: 25px;
}

.currency-box .custom-select .select-selected.select-arrow-active:after {
	transform: rotate(180deg);
	top: 11px !important;
}

.small-price-box h3 {
	margin-bottom: 1.5rem;
}

.price-details-box {
	margin: 5px 0;
	padding: 10px 20px;
	background: #2A93C3;
	color: #ecece0;
	border-radius: 5px;
}

.guarantee-box img {
	width: 130px !important;
}

.paypal-box img {
	width: 140px !important;
}

.guarantee-box {
	text-align: right;
}

.guarantee-box img {
	margin-right: 10px;
}

.guarantee-box h1 {
	text-align: left;
	margin-bottom: 0;
}

.paypal-box {
	text-align: center;
}

.paypal-box p {
	display: inline-block;
	font-size: 2.2vh !important;
}

.paypal-box a {
	color: #ecece0 !important;
}

.paypal-box a:hover {
	text-decoration: none;
	font-weight: 600;
}

.big-price-inner-box form img,
.small-price-box form img {
	display: none;
}

.guarantee-box h1 {
	display: inline-block;
	float: right;
}

.bonus-box {
	margin-top: 5px;
	padding: 10px 20px;
	background: #3EB49C;
	color: #ecece0;
	border-radius: 5px;
	max-height: 88px;
}

.bonus-box-inner form {
	display: inline;
}

.bonus-box-inner input[type=text] {
	width: 30vh;
	padding: 10px 20px;
	margin-bottom: 10px;
	background: transparent;
	border: 4px solid #ecece0 !important;
	border-radius: 5px !important;
	color: #ecece0 !important;
	padding: 7px 10px !important;
	font-weight: 800;
	font-size: 3vh;
}

.bonus-box-inner input[type=text]:active,
.bonus-box-inner input[type=text]:focus {
	outline: none;
	border: 4px solid #ecece0 !important;
	border-radius: 5px !important;
}

.bonus-box-inner form {
	position: absolute;
}

.bonus-box-inner button[type=submit] {
	width: auto;
	padding: 0 10px;
	background: transparent;
	border: none;
	border-radius: 5px;
	text-transform: uppercase;
	color: #ecece0;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	position: relative;
}

.bonus-box-inner button[type=submit]::after {
	content: "";
	position: absolute;
	width: 25px !important;
	height: 25px !important;
	top: 5px !important;
	right: -15px !important;
	background: url(../images/arrow-right.svg) no-repeat;
}

#unlock .levels {
	margin: 0 auto;
}

#unlock .levels thead th {
	width: 15vh;
}

#unlock .levels tbody th {
	max-width: 20vh;
}

#unlock .levels td {
	position: relative;
}

#unlock .levels td svg {
	width: 35px;
	height: 35px;
}

#unlock .levels td .cross {
	width: 25px;
	height: 25px;
}

#unlock .levels span {
	font-size: inherit;
	font-family: 'LC Web Normal';
	font-weight: 100;
}

.table-number {
	position: absolute;
	top: 12px;
	right: 7px;
	font-size: 3vh;
	color: #ecece0;
	background: url(../images/green-tag.svg) no-repeat;
	background-size: cover;
	width: 60px;
}

#support {
	width: 100.5%;
	background: url(../images/support.png) no-repeat center center;
	background-size: cover;
	height: 45vh;
	margin: 0 auto;
	border-radius: 5px;
	overflow: hidden;
}

#support a {
	color: #f2f1e7;
	text-decoration: none;
}

#support-text h2 {
	font-weight: 800 !important;
	font-size: 4vh !important;
	line-height: 4vh;
	position: relative;
	display: inline-block;
	margin-bottom: 0;
}

#support-text h1 {
	font-size: 6vh !important;
	line-height: 6vh;
}

#support-text h2::after {
	content: "";
	background: url(../images/main/LearningChess.net-arrow-right.svg) no-repeat center;
	background-size: cover;
	width: 5vh;
	height: 5vh;
	top: 1vh;
	right: -5vh;
	position: absolute;
}

#support-text {
	color: #f2f1e7;
	position: relative;
	flex-direction: column;
	justify-content: center;
	display: flex;
	height: 45vh;
	right: -10%;
}

#one {
	background: url(../images/one.svg) no-repeat center;
	background-size: cover;
	width: 60px;
	height: 60px;
	top: 0;
}

.unlock-equal {
	display: flex;
	flex-wrap: wrap;
}

#unlock .price {
	font-size: 4vh !important;
}

@media screen and (min-width: 1331px) {
	.currency-box .custom-select .select-selected {
		font-size: 2.5vh;
	}

	.bonus-box-inner button[type=submit]::after {
		width: 30px !important;
		height: 30px !important;
		top: 8px !important;
		right: -20px !important;
	}

	.bonus-box input[type=submit],
	.bonus-box button[type=submit] {
		font-size: 28px;
	}
}


@media screen and (max-width: 1330px) {
	.big-price-inner-boxes .col-xl-2 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.bonus-box input[type=submit],
	.bonus-box button[type=submit] {
		font-size: 28px;
	}

	.bonus-box-inner button[type=submit]::after {
		width: 30px !important;
		height: 30px !important;
		top: 8px !important;
		right: -20px !important;
	}
}

@media screen and (max-width: 1200px) {
	#support-text {
		right: -2%;
	}

	#lms h1 {
		font-size: 250% !important;
	}

	/*Learning management - ipad rotated view*/
	#lms .select-selected,
	.lm-btn button[type=submit],
	#manage input[type=submit],
	#manage #btn_Cancel {
		font-size: 110% !important;
	}

	#lms .table th {
		font-size: 95% !important;
	}

	#lms .table td {
		font-size: 115% !important;
	}

	#lms .tactics span {
		font-size: 100% !important;
	}
}

@media screen and (max-width: 1083px) {
	.guarantee-box img {
		margin-right: 10px;
	}

	.small-price-box h1,
	.currency-box h1,
	.guarantee-box h1,
	.bonus-box h1 {
		font-size: 2.6vh !important;
	}
}

@media screen and (max-width: 1049px) {
	.big-price-inner-box img {
		width: 160px;
	}

	.big-price-inner-box {
		padding: 0;
	}

	.small-price-box img {
		width: 186px;
	}

	.paypal-box img,
	.guarantee-box img {
		width: 120px;
	}

	.bonus-box-inner button[type=submit]::after {
		width: 25px !important;
		height: 25px !important;
		top: 5px !important;
		right: -20px !important;
	}

	.bonus-box input[type=submit],
	.bonus-box button[type=submit] {
		font-size: 22px;
	}
}

@media screen and (max-width: 992px) {
	.big-price-inner-boxes .col-md-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.big-price-inner-boxes .col-6 .big-price-inner-box {
		display: inline-block;
	}

	.price-details-box {
		max-height: 100% !important;
		text-align: center;
	}

	.table-number {
		top: 3px;
	}

	#unlock .levels tbody th,
	.tactics tbody th {
		line-height: 2.45vh;
	}

	#unlock .table td,
	.table th {
		font-size: 1.5vh;
	}

	#support-text h2 {
		font-size: 2.8vh !important;
		line-height: 2.8vh;
	}

	#support-text h1 {
		font-size: 3.8vh !important;
		line-height: 3.8vh;
	}

	.guarantee-box {
		text-align: center;
	}

	.bonus-box-inner {
		margin-left: 18%;
	}

	.guarantee-box img,
	.currency-box h1 {
		float: right;
	}

	.guarantee-box h1 {
		float: left;
	}

	.paypal-box {
		margin: 20px auto;
	}
}

@media screen and (max-width: 991px) {
	.small-price-boxes .col-12:nth-child(2) {
		padding-right: 0 !important;
	}

	.small-price-boxes .col-12:nth-child(3) {
		padding-left: 0 !important;
	}

	.small-price-boxes .col-lg-4:last-of-type {
		padding-right: 0 !important;
	}
}

/*Unlock - Tablet & Mobil view*/

@media screen and (max-width: 815px) and (max-height: 420px) {

	#unlock .small-price-box h1,
	.currency-box h1,
	.guarantee-box h1,
	.bonus-box h1 {
		font-size: 6vh !important;
	}

	#unlock .table td,
	.table th {
		font-size: 3.5vh;
	}

	#unlock .levels tbody th,
	.tactics tbody th {
		line-height: 4.45vh;
	}

	#unlock .table-number {
		top: 6px;
		font-size: 6vh;
	}

	#unlock .levels td svg {
		margin-right: 40px !important;
	}

	#unlock .price {
		font-size: 10vh !important;
	}

	#signUpLine,
	#avaliableLine,
	#lockedLine,
	#progressLine,
	#completedLine {
		font-size: 3vh !important;
	}
}

@media screen and (max-width: 800px) {
	#support {
		background: url(../images/support-mobil.png) no-repeat center center;
		background-size: cover;
		height: 58vh;
		position: relative;
	}

	#support-text {
		height: 80vh;
		margin: 10px;
		height: auto;
		position: absolute;
		bottom: 0;
		padding-bottom: 20px;
		padding-left: 0;
		right: -26% !important;
		bottom: 8%;
	}

	#support-text h1 {
		font-size: 4.5vh !important;
		line-height: 4.5vh;
	}

	#one {
		width: 40px;
		height: 40px;
	}

	.small-price-box {
		min-height: auto;
	}

	.price-details-box {
		max-height: 100%;
		text-align: center;
	}

	.bonus-box-inner {
		text-align: left;
	}

	#unlock .levels td svg {
		margin-right: 80px;
	}

	.big-price-inner-box {
		padding: 0;
		margin: 10px auto;
	}
}

@media screen and (max-width: 767px) {

	.small-price-boxes .col-12:first-of-type {
		padding-right: 0 !important;
	}

	.small-price-boxes .col-12:nth-child(2) {
		padding-left: 0 !important;
	}

	.small-price-boxes .col-lg-4:last-of-type {
		padding-right: 0 !important;
	}

	.small-price-boxes .col-12:nth-child(3) {
		padding-right: 0 !important;
	}

	.small-price-boxes .col-12:nth-child(4) {
		padding-left: 0 !important;
	}

	.small-price-box {
		width: 100%;
	}

	.bonus-box-inner button[type=submit]::after {
		top: 4px !important;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1 {
		display: block;
	}
}

@media screen and (max-width: 601px) {
	#unlock .table-number {
		font-size: 2.1vh;
	}

	#unlock .levels td svg {
		width: 25px;
		height: 25px;
		margin-right: 40px;
	}

	#unlock .table td,
	.table th {
		font-size: 1.5vh;
	}

	.table-number {
		width: 40px;
	}

	#unlock .levels tbody th {
		max-width: 15vh;
	}

	.bonus-box-inner button[type=submit]::after {
		width: 25px !important;
		height: 25px !important;
		top: 4px !important;
		right: -20px !important;
	}

	.bonus-box-inner button[type=submit] {
		font-size: 19px !important;
	}
}

@media screen and (max-width: 500px) {
	.big-price-inner-boxes {
		padding: 20px 0;
	}

	.big-price-inner-box img {
		width: 150px;
	}

	.big-price-inner-boxes .col-6:last-of-type h2 {
		font-size: 4vh !important;
	}

	#support-text h2::after {
		right: -60px;
	}

	#support-text {
		right: -50px !important;
		padding-bottom: 0;
	}

	.big-price-inner-box h1 {
		font-size: 3vh !important;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h2 span {
		font-size: 4vh;
	}

	.big-price-inner-box li {
		font-size: 1.6vh !important;
	}

	.big-price-inner-box img {
		width: 120px;
	}

	.big-price-inner-boxes .col-6:last-of-type h2 {
		font-size: 3vh !important;
	}

	.big-price-inner-boxes .col-6:nth-child(4) .big-price-inner-box img {
		width: 120px;
	}

	.small-price-box img {
		width: 155px;
	}

	.bonus-box-inner button[type=submit] {
		font-size: 2.4vh;
	}

	.bonus-box h1 {
		font-size: 2vh !important;
		margin: 5px;
	}

	.bonus-box-inner button[type=submit]::after {
		width: 20px;
		height: 20px;
		top: 4px;
	}

	.single-course .col-6:first-of-type .big-price-inner-box h1 {
		font-size: 3.5vh !important;
		line-height: 3.5vh !important;
	}

	#unlock .price {
		text-align: center;
		font-size: 3.5vh !important;
	}

	.small-price-box form {
		margin-top: 20px;
	}

	.small-price-box h3 {
		text-align: right;
		margin-bottom: 0;
		margin-top: 15px;
	}

	.single-course .big-price-inner-box ul li {
		font-size: 2vh !important;
	}

	.single-course .col-6:nth-child(2) .big-price-inner-box {
		padding: 0;
	}

	.currency-box .custom-select {
		min-height: 50px;
		margin-bottom: 20px;
	}

	.currency-box .custom-select .select-selected:after {
		top: 15px;
		width: 20px;
		height: 20px;
	}

	.bonus-box-inner button[type=submit]::after {
		top: 3px;
	}

	.intro-box h1 {
		font-size: 4vh !important;
	}

	.bonus-box {
		padding: 10px 5px;
	}

	#support-text h2::after {
		width: 30px;
		height: 30px;
		top: 44px;
	}

	#unlock .levels span {
		display: block;
	}

	#unlock .levels td .cross {
		width: 18px;
		height: 18px;
	}

	#unlock .levels tbody th,
	.tactics tbody th {
		line-height: 1.45vh;
	}

	.bonus-box-inner {
		margin-left: 0;
	}
}

@media screen and (max-width: 320px) {
	.table td {
		padding: 0 !important;
	}

	.table-number {
		width: 30px;
	}
}

/*About us css*/
.about-title-box,
.extra-details,
.purple-box {
	margin-top: 5px;
	padding: 40px;
	background: #463956;
	color: #ecece0;
	border-radius: 5px;
}

.members {
	margin-top: 5px;
	padding: 60px;
	background: #2A93C3;
	color: #ecece0;
	border-radius: 5px;
}

.member {
	text-align: center;
}

.member-1,
.member-2,
.member-3,
.member-4,
.member-5,
.member-6,
.member-7,
.member-8,
.member-9,
.member-10,
.member-11,
.member-12  {
	/* how to set special filters: https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/ */
	width: 250px;
	height: 250px;
	margin: 5px auto;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	/* Firefox 10+, Firefox on Android */
	-webkit-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	/* IE 6-9 */
}

.member-1 {
	background: url(../images/aboutus/Janos-Pallagi-CEO-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-1:hover,
.member-2:hover,
.member-3:hover,
.member-4:hover,
.member-5:hover,
.member-6:hover,
.member-7:hover,
.member-8:hover,
.member-9:hover,
.member-10:hover,
.member-11:hover,
.member-12:hover {
	-webkit-filter: none;
	-ms-filter: none;
	filter: none;
}

.member-2 {
	background: url(../images/aboutus/GM-Jozsef-Pinter-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-3 {
	background: url(../images/aboutus/IM-Gabor-Pirisi-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-4 {
	background: url(../images/aboutus/Marton-Pallagi-Software-developer-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-5 {
	background: url(../images/aboutus/Gabor-Hodosy-Software-developer-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-6 {
	background: url(../images/aboutus/Miklos-Fekete-Graphic-design-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-7 {
	background: url(../images/aboutus/Janka-Pallagi-Account-Manager-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-8 {
	background: url(../images/aboutus/Mark-Szavin-Educational-Consultant-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-9 {
	background: url(../images/aboutus/Sheila-Stanford-Oversatt-til-norsk-min.png) no-repeat;
	background-size: cover;
}

.member-10 {
	background: url(../images/aboutus/Anh-Quan-Huynh-Nguyen-Vietnamese-partner-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-11 {
	background: url(../images/aboutus/Emmanuel-JimEnez-García-Spanish-partner-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}

.member-12 {
	background: url(../images/aboutus/Pavlos-Skouroupathis-Greek-partner-LearningChess.net-min.png) no-repeat;
	background-size: cover;
}


.extra-details table,
.extra-details table td {
	border: none !important;
	color: #ecece0;
	padding: 0;
	font-family: 'LC Web Normal', sans-serif !important;
	font-weight: 100;
}

.extra-details table td:nth-child(odd) {
	color: #2A93C3;
}

.bottom-text {
	position: absolute;
	bottom: 0;
}

.bottom-text h3,
.bottom-text p {
	display: inline-block;
}

.extra-details p {
	font-size: 2.6vh !important;
}

/*About us - Tablet & Mobil view*/

@media screen and (max-width: 1150px) {
	.members {
		padding: 60px 20px;
	}

	.member-1,
	.member-2,
	.member-3,
	.member-4,
	.member-5,
	.member-6,
	.member-7,
	.member-8,
	.member-9,
	.member-10,
	.member-11,
	.member-12 {
		width: 210px;
		height: 210px;
	}
}

@media screen and (max-width: 992px) {
	.bottom-text {
		position: relative;
	}

	#about .table {
		margin-left: 0;
	}

	.single-course .col-6:nth-child(3) {
		text-align: right;
	}

	#lms .table th {
		font-size: 55% !important;
	}


	#lms .table td,
	#lms .levels span,
	#lms .tactics span {
		font-size: 85% !important;
	}
}

@media screen and (max-width: 767px) {
	.extra-details p {
		font-size: 2vh !important;
	}

	#about .table td,
	.table th {
		font-size: 1.8vh !important;
	}

	#lms .table th {
		font-size: 75% !important;
	}

	#lms .table td,
	#lms .levels span,
	#lms .tactics span {
		font-size: 95% !important;
	}
}

@media screen and (max-width: 601px) {

	.member-1,
	.member-2,
	.member-3,
	.member-4,
	.member-5,
	.member-6,
	.member-7,
	.member-8,
	.member-9,
	.member-10,
	.member-11,
	.member-12 {
		width: 180px;
		height: 180px;
	}

	#about .table td,
	.table th {
		font-size: 1.5vh !important;
	}

	#lms .table th {
		font-size: 100% !important;
	}

	#lms .table td {
		font-size: 120% !important;
	}

	#lms .tactics span {
		font-size: 100% !important;
	}
}

@media screen and (max-width: 500px) {
	.members {
		padding: 60px 10px;
	}

	.member-1,
	.member-2,
	.member-3,
	.member-4,
	.member-5,
	.member-6,
	.member-7,
	.member-8,
	.member-9,
	.member-10,
	.member-11,
	.member-12 {
		width: 150px;
		height: 150px;
	}

	#about .col-12 {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}

@media screen and (max-width: 815px) and (max-height: 420px) {
	.extra-details p {
		font-size: 4.6vh !important;
	}

	#about .table td,
	.table th {
		font-size: 3.8vh !important;
	}

	.intro-box p {
		font-size: 3.4vh !important;
	}

	.big-price-inner-box ul li {
		font-size: 4.3vh !important;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1 {
		line-height: 10vh !important;
	}

	.big-price-inner-boxes {
		padding: 0;
	}

	#win-text h1::after {
		bottom: 0.5vh;
		right: -6vh;
	}

	.text-box-equal a h3::after,
	.text-box a h3::after {
		width: 5vh;
		height: 5vh;
		top: 1vh;
		right: -5vh;
	}

	.single-course .col-6:nth-child(3) {
		text-align: right;
	}

	.currency-box .custom-select .select-selected {
		font-size: 7vh;
	}

	.currency-box .custom-select {
		margin-bottom: 33px;
	}

	#unlock .bonus-box-inner button[type=submit] {
		top: 4px;
	}

	#support-text h2 {
		font-size: 4vh !important;
		line-height: 4vh;
	}

	#support-text h1 {
		font-size: 6vh !important;
		line-height: 6vh;
	}

	#support-text {
		padding-bottom: 0;
		bottom: 0;
	}

	#unlock .levels span {
		display: block;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		width: 35px;
		height: 35px;
		top: -20px;
		left: -20px;
	}

	.text-box-equal ul li,
	.text-box ul li,
	.text-box ol li,
	.text-box-equal p,
	.text-box p {
		font-size: 3vh !important;
	}
}

/*Ipad pro*/
@media screen and (min-width: 1020px) and (max-width: 1026px) {

	h1,
	#trial-text h1,
	#win-text h1 {
		font-size: 3vh !important;
	}

	#signUpLine,
	#avaliableLine,
	#lockedLine,
	#progressLine,
	#completedLine {
		font-size: 1.5vh !important;
	}

	.card h5,
	.purple h5 {
		font-size: 1.6vh;
	}

	.courseInfo p:first-of-type {
		font-size: 1.2vh !important;
	}

	p,
	ol li,
	ul li {
		font-size: 1.8vh !important;
	}

	#nav-boxes,
	#nav-boxes a .nav-box {
		height: 160px;
	}

	#nav-boxes a .nav-box:hover {
		height: 165px;
	}

	#trial-text h1::after {
		width: 3vh;
		height: 3vh;
		top: 0.5vh;
		right: -3vh;
	}

	#win-text h1::after {
		width: 3vh;
		height: 3vh;
		top: 2vh;
		right: -3vh;
	}

	#win .offset-lg-8 {
		margin-left: 50%;
	}

	#myaccount .left-login-box h2 {
		font-size: 1.5vh !important;
	}

	.purple h5 {
		padding: 10px 20px !important;
	}

	.left-login-box h1 {
		font-size: 3.5vh !important;
	}

	#unlock #support-text h2 {
		font-size: 3vh !important;
		line-height: 3vh !important;
	}

	#unlock #support-text h1 {
		font-size: 4.5vh !important;
		line-height: 4.5vh !important;
	}

	#support-text h2::after {
		right: -58px !important;
		top: 18px !important;
	}

	#unlock .small-price-box h1 {
		font-size: 2.3vh !important;
	}

	#unlock .guarantee-box h1,
	#unlock .currency-box h1,
	#unlock .bonus-box h1 {
		font-size: 1.6vh !important;
	}

	#unlock .big-price-inner-box ul li {
		font-size: 1.3vh !important;
	}

	#unlock .currency-box .custom-select {
		width: 12vh !important;
	}

	.currency-box .custom-select .select-selected {
		font-size: 2vh !important;
	}

	#unlock .bonus-box .col-lg-6 {
		-ms-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.bonus-box-inner button[type=submit] {
		font-size: 2vh !important;
		padding: 5px 10px !important;
	}

	.table-number {
		width: 90px !important;
	}

	#chess_club h2 {
		font-size: 1.5vh !important;
	}

	#chess_club h3 {
		font-size: 2.5vh !important;
	}

	#chess_club .text-box-equal h1 {
		margin: 10px 0 !important;
	}

	#home-study-text h1,
	#chess-club-text h1 {
		font-size: 4.5vh !important;
	}

	#home-study-text ul li,
	#chess-club-text ul li,
	.carousel-inner p {
		font-size: 1.5vh !important;
	}

	.bonus-box-inner input[type=text] {
		font-size: 2vh;
	}

	.paypal-box {
		margin-top: 0px;
	}

	#unlock h3 {
		font-size: 2.5vh !important;
	}

	.paypal-box p {
		font-size: 1.4vh !important;
	}

	.bonus-box-inner button[type=submit]::after {
		top: 12px !important;
	}

	form img {
		margin-top: 17px;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1 {
		font-size: 3.5vh !important;
		line-height: 3.5vh !important;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		left: -30px;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h2 {
		font-size: 1.5vh !important;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h2 span {
		font-size: 3vh;
	}

	#unlock .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		left: 0 !important;
	}

	.right-rating-header h1::before {
		top: 2.5vh;
		left: -2vh;
	}

	.progress-box img {
		margin-top: -20px;
	}

	.rank-box {
		margin-top: 50px;
	}
}

@media screen and (min-width: 1250px) and (max-height: 770px) {
	.second-menu-icon {
		top: -7px;
	}
}

@media screen and (min-width: 1200px) and (max-height: 1100px) {

	#nav-book,
	#nav-horse,
	#nav-head,
	#nav-logic,
	#nav-account,
	#nav-progress,
	#nav-password,
	#nav-lm,
	#nav-cm,
	#nav-admin,
	#nav-logout,
	#nav-language,
	#nav-unlock,
	#nav-language-black,
	#nav-unlock-black,
	#lock,
	#world,
	#person,
	#member,
	#arrow,
	#back-arrow {
		width: 5vh;
		height: 5vh;
		left: -2.2vh;
		top: -1vh;
	}
}

@media screen and (min-width: 1365px) and (max-width: 1366px) {
	.progress-box h1 {
		margin: 5px !important;
	}
}

@media screen and (min-width: 1366px) and (min-height: 1024px) {
	#trial-text {
		left: 3vh;
	}

	.progress-box .col-lg-12 img {
		height: 130px !important;
	}

	.progress-box h1 {
		margin: 5px !important;
	}

	.big-price-inner-boxes .col-6:first-of-type .big-price-inner-box {
		padding: 0;
	}

	#unlock .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		left: 0 !important;
	}

	.small-price-box h1,
	.currency-box h1,
	.guarantee-box h1,
	.bonus-box h1 {
		font-size: 2.8vh !important;
	}

	/*Learning management - ipad pro roteted view*/
	.lm-btn button[type=submit] {
		font-size: 1.25vh !important;
	}

	/*Manage groups - ipad rotated view*/
	#manage input[type=submit],
	#manage #btn_Cancel {
		font-size: 110% !important;
	}

	#manage form label {
		font-size: 1.5vh !important;
	}
}

/*Success form sablon*/
.left-success-box {
	padding: 40px;
	background: #463956;
	color: #ecece0;
	border-radius: 5px;
	margin-right: 5px;
	height: 100%;
}

.right-success-box {
	position: relative;
	height: 100%;
}

.left-form-box a {
	color: #ecece0 !important;
}

.left-form-box p,
.left-success-box p,
.left-login-box p,
.left-contact-box p {
	margin: 40px auto;
}

.left-success-box a {
	color: #ecece0 !important;
}

.form-box a,
.form-content p a {
	color: #212529 !important;
	font-weight: 800;
}

.right-form-box .my-btn {
	position: absolute;
	bottom: 0;
	color: #ecece0 !important;
}

.right-success-box .my-btn {
	position: absolute;
	bottom: 0;
	color: #ecece0 !important;
}

.right-success-box p {
	padding: 20px;
}

@media screen and (max-width: 767px) {
	.left-success-box {
		margin-right: 0;
	}

	.right-success-box .my-btn,
	.right-form-box .my-btn {
		position: relative;
	}
}

/*Form sablon*/
.left-form-box {
	padding: 40px;
	background: #463956;
	color: #ecece0;
	border-radius: 5px;
	margin-right: 5px;
	height: 100%;
}

.right-form-box,
.right-tactic-box {
	position: relative;
	height: 100%;
}

.right-form-box button,
.right-tactic-box button {
	position: absolute !important;
	bottom: 0;
}

.right-tactic-box button {
	left: 0;
}

.form-content {
	padding-bottom: 90px;
	position: relative;
}

.right-tactic-box .form-content {
	padding-bottom: 150px;
}

.form-content .form-box {
	margin: 0 80px !important;
	padding: 20px 0;
}

@media screen and (max-width: 1000px) {
	.form-content .form-box {
		margin: 0 40px !important;
	}
}

@media screen and (max-width: 767px) {
	.left-form-box {
		margin-right: 0;
	}

	.right-form-box button,
	.right-tactic-box button {
		position: relative !important;
	}

	.form-content,
	.right-tactic-box .form-content {
		padding-bottom: 0;
	}
}

@media screen and (max-width: 500px) {
	.form-content .form-box {
		margin: 0 20px !important;
	}
}

@media screen and (min-width: 2500px) {
	h4 {
		font-size: 2.5rem !important;
	}

	#logo svg {
		width: 250px;
		height: 160px;
		margin: 10px 20px;
	}

	#nav-book,
	#nav-horse,
	#nav-head,
	#nav-logic,
	#nav-account,
	#nav-progress,
	#nav-password,
	#nav-lm,
	#nav-cm,
	#nav-admin,
	#nav-logout,
	#nav-language,
	#nav-unlock,
	#nav-language-black,
	#lock,
	#world,
	#person,
	#member,
	#arrow,
	#back-arrow,
	#black #back-arrow,
	#nav-unlock-black {
		width: 65px;
		height: 65px;
		top: -8px;
		left: -30px;
	}

	#back-arrow {
		left: -15px !important;
	}

	#nav-boxes,
	.nav-box {
		height: 180px;
	}

	#nav-boxes a .nav-box:hover {
		height: 185px;
	}

	.header-nav li {
		margin-right: 80px !important;
	}

	.second-menu-icon {
		top: 6px;
	}

	.second-menu-icon .second-navicon {
		height: 4px;
		width: 35px;
	}

	.second-menu-icon .second-navicon:before {
		top: 10px;
	}

	.second-menu-icon .second-navicon:after {
		top: -10px;
	}

	#home-study-text h1::after,
	#chess-club-text h1::after,
	#support-text h2::after,
	#trial-text h1::after,
	#win-text h1::after {
		width: 65px;
		height: 65px;
		top: 25px;
		right: -80px;
	}

	.carousel-control-next-icon,
	.carousel-control-prev-icon {
		width: 65px !important;
		height: 65px !important;
	}

	.carousel-control-prev {
		opacity: 1 !important;
		left: -100px !important;
	}

	.carousel-item h4 {
		font-size: 2.8vh;
	}

	.carousel-item p:nth-child(3),
	.carousel-item p:nth-child(4) {
		font-size: 2vh !important;
		line-height: 2.5vh !important;
	}

	.hide-spacing {
		margin-top: 180px;
	}

	.header-nav ul {
		margin: 50px 0;
	}

	.price-details-box {
		max-height: 135px !important;
	}

	.currency-box .custom-select {
		min-height: 95px !important;
		margin-bottom: 80px !important;
	}

	.currency-box .custom-select .select-selected {
		font-size: 3vh;
	}

	.currency-box .custom-select .select-selected:after {
		top: 25px !important;
		right: 0px !important;
		width: 50px;
		height: 50px;
	}

	.paypal-box img {
		width: 250px !important;
	}

	.guarantee-box img {
		margin-bottom: 85px !important;
		width: 220px !important;
	}

	.table-number {
		top: 0;
		right: 0;
		font-size: 2.5vh;
		width: 120px;
	}

	#fb,
	#twitter,
	#pin {
		width: 65px;
		height: 65px;
	}

	.lang-box ul li {
		line-height: 70px;
	}

	.close-lang {
		width: 65px;
		height: 65px;
		top: -8px;
		right: 35px;
	}

	.close-btn,
	.close-btn2 {
		height: 10px;
		width: 40px;
	}

	.second-menu {
		margin-top: 180px;
	}

	.second-menu ul li {
		line-height: 60px;
		width: 24.7% !important;
	}

	.card-header {
		min-height: 100px;
	}

	.tab-open button,
	.tab-close button {
		width: 50px;
		height: 50px;
		top: 30px;
	}

	.unlocked img,
	.locked img,
	.view img {
		width: 50px;
		height: 55px;
		margin-top: 20px;
	}

	.big-number {
		font-size: 25px;
	}

	.text-box-equal a h3::after,
	.text-box a h3::after {
		width: 45px;
		height: 45px;
		right: -50px;
	}

	.select-selected:after {
		top: 10px;
		right: -10px;
		width: 60px;
		height: 60px;
	}

	.select-items div,
	.select-selected,
	input[type=text],
	input[type=password],
	input[type=number],
	input[type=date],
	textarea,
	textarea::placeholder {
		padding: 10px 16px;
		font-size: 1.5vh;
	}

	form img {
		width: 80px;
		height: 80px;
		margin-left: 20px;
		margin-top: 20px;
	}

	#home_study #trial-text {
		right: 5% !important;
	}

	#win-text {
		flex: 100% !important;
		max-width: 100% !important;
	}

	.offset-lg-8 {
		margin-left: 60% !important;
	}

	#trial-text h1,
	#win-text h1 {
		font-size: 5vh !important;
	}

	input[type=text],
	input[type=password],
	input[type=number],
	input[type=date],
	textarea {
		padding: 20px;
	}

	.custom-select {
		height: calc(1.5em + .75rem + 40px) !important;
	}

	.help-tabs ul li {
		margin: 5px 20px;
	}

	.help-tabs ul li button {
		padding: 20px;
	}

	.legal-tabcontent h2 {
		font-size: 4vh !important;
	}

	.legal-tabcontent h3 {
		font-size: 2vh !important;
	}

	.fb-button {
		padding: 10px;
	}

	.big-price-inner-boxes .col-6:nth-child(4) .big-price-inner-box img {
		width: 250px;
	}

	.big-price-inner-box form input[type=image] {
		width: 280px;
	}

	.small-price-box form input[type=image] {
		width: 200px;
	}

	.help-tabcontent ul li::before,
	.legal-tabcontent ul li::before {
		width: 10px;
		height: 10px;
		top: 20px;
		left: -30px;
	}

	.help-tabcontent ul li,
	.legal-tabcontent ul li {
		margin-left: 40px;
	}

	.checkmark {
		height: 30px;
		width: 30px;
	}

	#newsletter-cb .checkmark {
		top: 15px;
	}

	.purple h5 {
		font-size: 2.4vh;
	}

	.left-rating-header,
	.right-rating-header {
		height: 160px;
	}

	#signUpLine::before,
	#avaliableLine::before,
	#lockedLine::before,
	#progressLine::before,
	#completedLine::before,
	#iron::before,
	#bronze::before,
	#silver::before,
	#gold::before,
	#diamond::before {
		top: 20px !important;
		height: 10px;
	}

	.table {
		font-size: 1.8vh;
	}

	#tactic #trial-text {
		left: -11vh;
	}
}

@media screen and (min-width: 830px) and (max-width: 840px) {

	#nav-boxes,
	.nav-box {
		height: 155px;
	}

	#nav-boxes a .nav-box:hover {
		height: 160px;
	}

	#chess-club-text {
		margin-left: 5px;
	}

	#home-study-text h1,
	#chess-club-text h1 {
		font-size: 4.5vh !important;
	}

	#home-study-text h1::after,
	#chess-club-text h1::after {
		width: 4vh;
		height: 4vh;
		right: -4vh;
	}

	#trial-text h1,
	#win-text h1 {
		font-size: 3.5vh !important;
	}

	#trial-text {
		left: 1vh;
	}

	#index #trial-text h1 {
		margin-right: 100px;
	}

	#testimonials {
		height: 42vh !important;
	}

	.carousel,
	#testimonials-text {
		height: 43vh;
	}

	.tab-open button,
	.tab-close button {
		top: 23px;
		width: 30px;
		height: 30px;
	}

	.currency-box .custom-select {
		min-height: 60px !important;
		padding: 0;
	}

	.paypal-box {
		margin-top: -10px;
	}

	#support-text h2::after {
		width: 4vh;
		height: 4vh;
		top: 1vh;
		right: -4vh;
	}

	#tactic #trial-text,
	#home_study #trial-text {
		left: -4vh !important;
	}

	#tactic #trial-text,
	#home_study #trial-text {
		-ms-flex: 0 0 50% !important;
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}

	.text-box-equal h3 {
		font-size: 2.8vh !important;
	}

	#win-text h1::after {
		bottom: 0;
	}

	.left-contact-box {
		margin-right: 5px !important;
	}

	.legal-tabs ul li button {
		font-size: 2vh;
	}

	.big-price-inner-box form input[type=image] {
		width: 220px;
	}

	.small-price-box form input[type=image] {
		width: 160px;
	}
}

/*Learning management*/
#lm-stud thead th {
	cursor: pointer;
}

.lm-btn-select {
	min-width: 252px;
	margin-top: 0 !important;
	margin-bottom: 0;
	height: 60px !important;
	padding: 10px 18px 10px 0 !important;
}

#lm-btns .select-items div {
	background-color: #ecece0;
	width: 100%;
}

.lm-btn {
	min-width: 220px;
	margin-left: 5px;
}

/* "NEW" badge on the Certificate button (top-right corner) */
.lm-cert-btn {
	position: relative;
}

.lm-cert-new-badge {
	position: absolute;
	top: -8px;
	right: -6px;
	z-index: 2;
	background: #d0021b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 3px 6px;
	border-radius: 3px;
	pointer-events: none;
}

.select-selected,
.lm-btn button[type=submit] {
	height: 60px;
}

.lm-btn button[type=submit] {
	font-size: 2vh !important;
}

#manage .lm-btn button[type=submit] {
	font-size: 110% !important;
}

#btn-scroll {
	overflow: scroll;
}

#lms td,
#lms th {
	padding: 3px;
}

/*Manage groups*/

#manage .lm-btn {
	min-width: 230px;
}

#manage .levels tbody tr:nth-child(even) td,
#manage .tactics tbody tr:nth-child(even) td,
#manage.levels tbody tr:nth-child(odd) td,
#manage .tactics tbody tr:nth-child(odd) td {
	border: 2px solid #f2f1e7 !important;
}

#manage form label {
	font-size: 2.25vh;
}

#manage .custom-select option {
	border: 3px solid #2A93C3;
	margin: 5px auto 0 auto;
	border-radius: 5px;
}

#manage .select-selected:after {
	top: 6px !important;
}

#manage .select-selected.select-arrow-active:after {
	top: 0 !important;
}

#manage .select-items {
	width: 101%;
}

#manage input[type=submit],
#manage #btn_Cancel {
	font-size: 110% !important;
}

#btn_Cancel {
	width: auto;
	margin: 5px 0;
	padding: 15px 20px;
	background: #d62a49;
	border: none;
	border-radius: 5px;
	text-transform: uppercase;
	color: #ecece0;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	font-size: 3vh;
}

#questionicon img {
	position: relative;
	top: -4px;
	height: 25px !important;
}

#lms,
#manageTeacher,
#centralManagement,
#centralLicenses {
	min-width: 1300px;
}

#student-table span {
	font-size: 20px !important;
	font-weight: 500;
}

@media (max-width: 1699px) and (min-height: 2300px) {
	.lm-btn button[type=submit] {
		font-size: 1vh !important;
	}
}

@media screen and (max-height: 420px) {

	#manage .select-selected,
	#manage input[type=text] {
		font-size: 4.5vh !important;
	}
}

/* Learning-management Export dropdown */
.lm-btn-dropdown {
	position: relative;
}

.lm-btn-dropdown > button {
	width: 100%;
	height: 60px;
	padding: 15px 20px;
	background: #2D94C1;
	border: none;
	border-radius: 5px;
	text-transform: uppercase;
	color: #ecece0;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	font-size: 2vh;
	cursor: pointer;
}

.lm-btn-dropdown > button:hover {
	background: #463956;
}

.lm-dropdown-caret {
	margin-left: 8px;
	font-size: 1.2em;
	vertical-align: middle;
}

.lm-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	background: #2D94C1;
	border-radius: 5px;
	z-index: 100;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.lm-dropdown-menu.open {
	display: block;
}

.lm-dropdown-menu li {
	display: block;
}

.lm-dropdown-menu li a {
	display: block;
	padding: 14px 16px;
	color: #ecece0;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	font-size: 2vh;
	white-space: nowrap;
}

.lm-dropdown-menu li a:hover {
	background: #463956;
	color: #ecece0;
}

/* student-certificates.php — teacher bulk-cert page
 * Table is wrapped in <div class="tactics"> so it inherits the same look
 * as learning-management.php: grey alternating cell backgrounds
 * (#d2d0d1 / #dfdbd9), bold + centered cells, 20px cell font.
 * Row state colors (done/missing) tint TEXT only — the alternating cell
 * backgrounds stay intact. */

#student-certificates .sc-col-check,
#student-certificates .sc-col-done {
	width: 1%;
	white-space: nowrap;
	text-align: center;
}

#student-certificates .sc-col-date {
	white-space: nowrap;
}

#student-certificates .sc-col-done {
	font-size: 18px;
	font-weight: bold;
}

#student-certificates table#stud-cert-table tbody tr.row-cert-done > td,
#student-certificates table#stud-cert-table tbody tr.row-cert-done > td a {
	color: #155724;
}

#student-certificates table#stud-cert-table tbody tr.row-cert-missing > td,
#student-certificates table#stud-cert-table tbody tr.row-cert-missing > td a {
	color: #721c24;
}

#student-certificates #stud-cert-counter {
	color: #555;
	font-size: 14px;
}

/* Loading overlay (mirrors secure-payment.php) */
#student-certificates .overlay {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background-color: rgba(255, 255, 255, 0.8);
}

#student-certificates .overlay-content {
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	left: 0;
	right: 0;
	text-align: center;
}

#student-certificates .overlay.hidden,
#student-certificates .hidden {
	display: none;
}

/* Logo upload modal (student-certificates.php) */
#stud-cert-logo-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
#stud-cert-logo-modal .stud-cert-logo-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}
#stud-cert-logo-modal .stud-cert-logo-dialog {
	position: relative;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	width: 760px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 24px 28px 20px 28px;
}
#stud-cert-logo-modal .stud-cert-logo-x {
	position: absolute;
	top: 8px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: #666;
	cursor: pointer;
	padding: 0 6px;
}
#stud-cert-logo-modal h2 {
	margin: 0 0 16px 0;
	font-size: 22px;
	font-weight: bold;
	color: #222;
}
#stud-cert-logo-modal .stud-cert-logo-picker {
	margin-bottom: 14px;
}
#stud-cert-logo-modal .stud-cert-logo-picker-label {
	display: block;
	font-weight: bold;
	margin-bottom: 6px;
}
#stud-cert-logo-modal .stud-cert-logo-info-wrap {
	display: inline-block;
	margin-left: 6px;
	padding: 4px;
	vertical-align: middle;
	cursor: help;
	position: relative;
	z-index: 2;
}
#stud-cert-logo-modal .stud-cert-logo-info-icon {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}
#stud-cert-logo-modal .stud-cert-logo-hint {
	margin: 6px 0 0 0;
	font-size: 13px;
	color: #666;
}
#stud-cert-logo-modal .stud-cert-logo-preview-tip {
	margin: 0 0 6px 0;
	font-size: 13px;
	color: #666;
}
/* Mockup: A4 landscape aspect (297:210). All inner positions are % of the
   mockup, derived from php/cert_render.php (mm/210 for top, mm/297 for width,
   pt/595 for font sizes via cqh). Tune these values here if the renderer
   layout ever changes. container-type: size enables cqh units. */
#stud-cert-logo-modal .stud-cert-logo-mockup {
	position: relative;
	width: 100%;
	aspect-ratio: 297 / 210;
	background: #f2f1e7;
	border: 1px solid #ddd;
	container-type: size;
	font-family: 'Georgia', 'Times New Roman', serif;
	color: #332D2F;
}
#stud-cert-logo-modal .stud-cert-logo-mockup-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}
#stud-cert-logo-modal .stud-cert-logo-mockup-text {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 1;
	pointer-events: none;
}
/* CERTIFICATE — 54pt at top: 18mm */
#stud-cert-logo-modal .stud-cert-logo-mockup-title1 {
	top: 8.57%;
	font-size: 9.07cqh;
	font-weight: bold;
	letter-spacing: 0.03em;
}
/* OF COMPLETION — 34pt at top: 44mm */
#stud-cert-logo-modal .stud-cert-logo-mockup-title2 {
	top: 20.95%;
	font-size: 5.71cqh;
	letter-spacing: 0.03em;
}
/* "This is to certify that" — 18pt at top: 72mm */
#stud-cert-logo-modal .stud-cert-logo-mockup-text1 {
	top: 34.29%;
	font-size: 3.02cqh;
	font-weight: bold;
}
/* "Has successfully completed the" — 18pt at top: 112mm */
#stud-cert-logo-modal .stud-cert-logo-mockup-text2 {
	top: 53.33%;
	font-size: 3.02cqh;
	font-weight: bold;
}
/* Student name — 32pt at top: 88mm, gold like the renderer */
#stud-cert-logo-modal .stud-cert-logo-mockup-name {
	top: 41.9%;
	font-size: 5.38cqh;
	font-weight: bold;
	letter-spacing: 0.02em;
	color: #D3AF37;
}
/* Course name — 32pt at top: 128mm, gold like the renderer */
#stud-cert-logo-modal .stud-cert-logo-mockup-course {
	top: 60.95%;
	font-size: 5.38cqh;
	font-weight: bold;
	letter-spacing: 0.02em;
	color: #D3AF37;
}
/* Logo box — width matches JPG renderer (23.1% of cert width), but ALSO
   capped by max-height so square/tall coach logos shrink to fit instead of
   overflowing into the footer. Use max-width + max-height (not width/height)
   so the browser keeps aspect ratio while satisfying both bounds.
   NOTE: the renderer (php/cert_render.php) currently only constrains WIDTH,
   so square logos overflow the cert. Apply the same max-height there to
   keep mockup and cert in sync. */
#stud-cert-logo-modal .stud-cert-logo-mockup-logo {
	position: absolute;
	top: 72.4%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 23.1%;
	max-height: 14%;
	width: auto;
	height: auto;
	object-fit: contain;
}
#stud-cert-logo-modal .stud-cert-logo-status {
	min-height: 1.2em;
	margin: 12px 0 8px 0;
	font-size: 14px;
	font-weight: bold;
}
#stud-cert-logo-modal .stud-cert-logo-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
}
#stud-cert-logo-modal .stud-cert-logo-actions button {
	padding: 8px 16px;
}
#stud-cert-logo-modal .stud-cert-logo-actions button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/*Chessboards css*/
#chessboards .purple-box .chess-boards a {
	color: #ecece0;
}

#chessboards .purple-box .chess-boards a:hover {
	color: #2D94C1;
}


#chessboards .purple-box .chess-boards {
	text-align: center;
}

#chessboards .purple-box .chess-boards img {
	width: 100%;
}

@media (min-width: 1024px) and (orientation:landscape) {
	.chess-boards .col-md-6 {
		max-width: 25%;
	}
}

/*Lesson Access css*/
#lesson-access .form-box {
	margin: 20px 80px;
}

#lesson-access .custom-select {
	border: 2px solid #2A93C3 !important;
	font-weight: 800;
	font-size: 1.25rem;
}

/* The container */
#lesson-access .container {
	font-family: 'LC Web Normal', sans-serif;
	display: block;
	width: 46%;
	float: left;
	position: relative;
	padding-left: 30px;
	margin-bottom: 20px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
#lesson-access .container input,
#lesson-access .recontainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */
#lesson-access .checkmark {
	position: absolute;
	top: 2px;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #B7B4B3;
	border-radius: 50%;
	border: none;
}

/* On mouse-over, add a grey background color */
#lesson-access .container:hover input ~ .checkmark {
	background-color: #D4203E;
}

/* When the radio button is checked, add a blue background */
#lesson-access .container input:checked ~ .checkmark {
	background-color: #22c3a3;
}

#lesson-access .active-select {
	color: #332E30 !important;
}

.submit-btns .accept input[type=submit],
.submit-btns .reject h1 {
	padding: 0 0 0 30px;
	color: #ecece0;
	text-align: left;
}

.submit-btns .reject {
	background: #d42d4c;
}

.submit-btns .accept,
.submit-btns .reject {
	max-height: 63px;
}

.submit-btns .accept:hover,
.submit-btns .reject:hover {
	background: #463956;
}

#lesson-access fieldset {
	border: 2px solid #2A93C3;
	border-radius: 5px;
	padding: 20px;
}

#lesson-access input[type=submit] {
	width: 90%;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 5px;
	text-transform: initial;
	color: #ecece0;
	font-family: 'LC Web Heading', 'Impact', sans-serif;
	font-size: 30px;
	position: relative;
	margin-top: -7px;
}

#lesson-access .accept::after {
	content: '';
	position: absolute;
	background: url(../images/tick.svg) no-repeat;
	width: 30px;
	height: 30px;
	bottom: 15px;
	right: 20px;
}

#lesson-access .reject::after {
	content: '';
	position: absolute;
	background: url(../images/x.svg) no-repeat;
	width: 30px;
	height: 30px;
	bottom: 15px;
	right: 20px;
}

.lesson-restart {
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 15px;
	fill: #22c3a3;
}

.lesson-restart:hover {

	fill: #D4203E;
}

.disabled,
.disabled:hover{
	fill: #B7B4B3;
}

#lesson-access .recontainer {
    font-family: 'LC Web Normal', sans-serif;
    display: block;
	width: 30px;
    float: left;
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#lesson-access .restart-checkmark {
    position: absolute;
    top: 2px;
    left: -10px;
    height: 30px;
    width: 30px;
    background: url(../images/restart-grey.svg) no-repeat;
	background-size: contain;
}

#lesson-access .recontainer:hover input ~ .restart-checkmark {
    background: url(../images/restart-red.svg) no-repeat;
	background-size: contain;
}

#lesson-access .recontainer input:checked ~ .restart-checkmark {
    background: url(../images/restart-green.svg) no-repeat;
	background-size: contain;
}

@media screen and (max-width: 1219px) {
	#lesson-access .container {
		width: 44%;
	}
}

@media screen and (max-width: 886px) {
	#lesson-access .container {
		width: 92%;
	}
}

@media screen and (max-width: 719px) {
	#lesson-access .container {
		width: 84%;
	}
}

@media screen and (max-width: 520px) {
	#lesson-access .container {
		width: 81%;
	}
}

@media screen and (max-width: 500px) {
	#lesson-access .form-box {
		margin: 20px !important;
	}
}

@media screen and (max-width: 360px) {

	.submit-btns .start .accept h1,
	.submit-btns .start .reject h1 {
		padding-left: 20px;
	}
}

.cookie-consent-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f8f9fa;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    color: black;
    padding: 15px;
    font-size: 14px;
    text-align: center;
    z-index: 1000;
}

.cookie-consent-button {
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

.cookie-consent-button:hover {
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.cookie-consent-button:active {
    opacity: .5;
}

.cookie-consent-button.btn-success {
    background-color: #34a853;
    color: white;
}

.cookie-consent-button.btn-grayscale {
    background-color: #dfe1e5;
    color: black;
}

.cookie-consent-button.btn-outline {
    background-color: #e6f4ea;
    color: #34a853;
}

.cookie-consent-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cookie-consent-options label {
    margin: 0 10px;
    font-size: 14px;
}

.cookie-consent-options input {
    margin-right: 5px;
}