@charset "utf-8";
/* CSS Document */

@font-face{
	font-family: "Ubuntu Regular";
	src: url("webfonts/Ubuntu/Ubuntu-Regular.ttf");
}

@font-face{
	font-family: "Exo Regular";
	src: url("webfonts/Exo/Exo-Regular.ttf");
}

*{
	margin: 0;
	padding: 0;
	/*color: #333;*/
	text-decoration: none;
	font-family: "Ubuntu Regular";
	box-sizing: border-box;
}

html{
	scroll-behavior: smooth;
}

body{
	background-color: #333;
	height: 100%;
	overflow-x: hidden;
	width: 100%;
}

input:focus { 
    outline: none !important;
    border-color: #00ed33;
    box-shadow: 0 0 10px #00ed33;
}
textarea:focus { 
    outline: none !important;
    border-color: #00ed33;
    box-shadow: 0 0 10px #00ed33;
}

#close_cookie{display:none;}
	#close_cookie:checked + #cookie_consent_popup{display:none;}	
#cookie_consent_popup{
	position:fixed;
	bottom:30px;left:30px;
	width:460px;
	height:220px;
	background-color:#afafaf;
	padding:20px;
	border-radius: 10px;
	border: solid medium #FF9100;
	box-shadow: 2px 2px 2px 1px #333;
	 z-index:200;
}
	#cookie_consent_popup h1{
		font-size:22px;
	}
		#cookie_consent_popup h1:before{
			content:"";
			padding:0;
		}
	#cookie_consent_popup p{
		font-size:15px;
	}
	#cookie_consent_popup #close_cookie_box{
		position:absolute;
		top:20px;right:20px;
		cursor:pointer;
		font-size:1.3em;
	}
	#cookie_consent_popup #ok_cookie_box{
		position:absolute;
		bottom:20px;right:20px;
		cursor:pointer;
		font-size:24px;
		padding:10px 20px;
		font-weight:700;
		color:white;
		background-color: rgba(0,237,51,0.72);
		border-radius: 6px;
	}

.cookieH2{
	text-shadow: 2px 2px 1px #000;
}

.cookieH3{
	padding: 0;
	margin: 10px 0 5px 0;
	color: #00ed33;
}

.cookieP{
	color: #f2f2f2;
	font-size: 16px;
}

.imageBackground{
	min-height: 100vh;
	background-image: url("images/all.jpg");
	background-size: cover;
	background-attachment: fixed;
}

.flex{
	display: flex;
	min-width: 100vw;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #C1C1C1;
	border: none;
	border-radius: 5px;
	padding-right: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  	background-color: #6E6E6E;
	border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #000;
}

video::-webkit-media-controls {
     visibility: hidden;
}

video::-webkit-media-controls-enclosure {
     visibility: visible;
}

h1{
	font-family: "Exo Regular";
}

h2{
	color: #00ed33;
	font-family: "Exo Regular";
	margin-bottom: 20px;
	text-shadow: 1px 1px 2px #333;
}

h3{
	color: #f2f2f2;
	font-family: "Exo Regular";
	margin: 10px;
}

a h3:hover{
	color: #fff;
	text-shadow: 1px 1px 2px #333;
}

.signUpContainer{
	background-image: url("images/Asset 28-50.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	min-height: 100vh;
	max-height: 1400px;
	align-items: center;
	justify-content: center;
	overflow-y: hidden;
}

.column{
	min-height: 250px;
	max-height: 1600px;
	width: 500px;
	padding: 20px 45px;
	background-color: #f2f2f2;
	border-radius: 20px;
	overflow-y: auto;
	margin: 20px;
}

.column form{
	display: flex;
	flex-direction: column;
}

 .column form input[type="text"],
 .column form input[type="email"],
 .column form input[type="password"]{
	font-size: 16px;
	margin: 12px 0;
	border: none;
	border-bottom: 1px solid #808080;
	background-color: #f2f2f2;
	color: #808080;
}

.column form input[type="checkbox"]{
	margin: 12px 6px;
}

.column form input[type="submit"]{
	background-color: #808080;
	color: #00ED33;
	height: 36px;
	width: 110px;
	border: none;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 600;
	margin: 10px auto 20px auto;
}

.column form input[type="submit"]:hover{
	transform: scale(1.1, 1.1);
	box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
	cursor: pointer;
}

.settingsContainer{
	padding-top: 60px;
	background-color: transparent;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	overflow-y: hidden;
}

.settingsContainer .formSection{
	display: flex;
	flex-direction: column;
	margin: 20px 0;
	border-bottom: 2px solid #f2f2f2;
	padding-bottom: 20px;
}

.settingsContainer form input[type="text"],
.settingsContainer form input[type="email"],
.settingsContainer form input[type="password"]{
	height: 40px;
	font-size: 16px;
	margin: 5px 0;
	border: none;
	border-radius: 4px;
	padding: 0 5px;
}

.settingsContainer form textarea{
	font-size: 16px;
	margin: 5px 0;
	border: none;
	border-radius: 4px;
	padding: 5px;
	overflow-y: auto;
	resize: none;
}

.socials{
	color: #f2f2f2;
}

.alertSuccess,
.alertError{
	margin: 10px 0;
}

.alertError{
	color: #dc1928;
	font-size: 18px;
}

.alertSuccess{
	color: #2ecc71;
	font-size: 18px;
}

.header{
	padding: 20px 0;
}

.header h1{
	color: #00ed33;
	font-weight: 600;
	text-shadow: 1px 1px 2px #333;
}

.header h3{
	font-size: 24px;
	font-weight: 600;
	font-family: "Ubuntu Regular";
	line-height: 32px;
	margin: 0;
	padding-top: 16px;
	color: #070707;
}

.logo{
	position: relative;
	height: 60px;
	margin-right: 40px;
	float: right;
}

.signInMessage{
	text-decoration: none;
	color: #00ed33;
	padding-bottom: 20px;
}

.errorMessage{
	color: #f00;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.blankError{
	color: #f00;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	margin: 450px auto;
}

.successMessage{
	color: #00C820;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.contactUsSuccess{
	padding: 4px;
	background-color: #808080;
	border-radius: 2px;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.4) 3px 2px 8px 0;
}

.container{
	height: 650px;
	width: 100vw;
	margin: 0;
	background-color: rgba(0, 237, 51, 0.9);
}

.topBar{
	position: relative;
	background-color: #070707;
	width: 100%;
	max-width: 1200px;
	height: 120px;
	padding: 10px;
	margin: auto;
	top: 20px;
	border-radius: 5px;
}

.headerLogo{
	height: 100px;
	margin-left: 30px;
	float: left;
}

.mobileNav{
	display: none;
}

.mobile{
	display: none;
}

.loginRegisterButton{
	color: #00ED33;
	background-color: #808080;
	height: 45px;
	width: 100px;
	margin: 25px 20px;
	padding: 12px;
	text-align: center;
	border-radius: 8px;
	float: right;
}

.loginRegisterButton a {
	background-color: #808080;
	text-decoration: none;
}

.loginRegisterButton:hover{
	transform: scale(1.1, 1.1);
}

.profileButton{
	color: #00ED33;
	background-color: #808080;
	height: 45px;
	width: 120px;
	margin: 25px 20px;
	padding: 12px;
	text-align: center;
	border-radius: 8px;
	float: right;
}

.profileButton a {
	background-color: #808080;
	text-decoration: none;
}

.profileButton:hover{
	transform: scale(1.1, 1.1);
}

.profileIcon{
	color: #00ed33;
}

.meerOorOnsButton{
	background-color: #808080;
	height: 45px;
	width: 125px;
	margin: 25px 20px;
	padding: 12px;
	text-align: center;
	border-radius: 8px;
	float: right;
	color: #00ED33;
}

.meerOorOnsButton a{
	background-color: #808080;
	text-decoration: none;
}

.meerOorOnsButton:hover{
	transform: scale(1.1, 1.1);
}

.accountAvatar{
	float: right;
	height: 45px;
	margin: 24px 10px auto 0px;
	transition: transform 0.3s;
}

.accountAvatar:hover{
	transform: scale(1.1, 1.1);
}

.homeLink{
	float: left;
	font-size: 18px;
	margin: 36px 0px 36px 30px;
	text-decoration: none;
	color: #BFBFBF;
}

.homeLink:hover{
	color: #fff;
}

.homeIcon{
	color: #bfbfbf;
	margin-right: 5px;
}

.slogan{
	color: #f2f2f2;
	font-size: 60px;
	margin: 80px 140px 0px 140px;
}

.descBox{
	position: relative;
	background-color: #cbcbcb;
	font-size: 18px;
	margin: 60px auto 40px auto;
	padding: 30px 30px 60px 30px;
	width: 100%;
	max-width: 1100px;
	border: none;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 3px 2px 8px 0;
	z-index: 100;
}

.descBox ul{
	text-align: left;
}

.descBox, .heading{
	text-align: center;
}

.heading{
	background-color: #333;
	max-width: 800px;
	padding: 20px;
	margin-top: -60px;
}

.heading h1{
	color: #00ed33;
	text-shadow: 1px 1px 2px #333;
}

.pakketHeading{
    clear: both;
	position: relative;
	background-color: #333;
	font-size: 18px;
	text-align: center;
	margin: -30px auto 0px auto;
	padding: 20px;
	width: 100%;
	max-width: 800px;
	border: none;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 3px 2px 8px 0;
	z-index: 100;
}

.pakketHeading h1{
	color: #00ed33;
	text-shadow: 1px 1px 2px #333;
}

.subjects{
	position: relative;
	clear: both;
	width: 100%;
	height: 930px;
	padding: 20px;
	margin: 0px auto;
	background-image: url("images/AfriCamb-Book-80.jpg");
	background-size: cover;
	text-align: center;
}

.leftSubjects{
	float: left;
	margin-top: 600px;
	width: 50%;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.leftSubjects a{
	text-decoration: none;
}

.rightSubjects{
	float: right;
	margin-top: 600px;
	width: 50%;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.rightSubjects a{
	text-decoration: none;
}

.subject{
	position: relative;
	width: 90%;
	padding: 10px;
	margin: 20px auto;
	background-color: #ECECEC;
	border-radius: 6px;
	box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.4);
	transition: transform 0.5s;
}

.greysubject{
	position: relative;
	width: 90%;
	padding: 10px;
	margin: 20px auto;
	background-color: #8F8F8F;
	border-radius: 6px;
	box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.4);
}

.greysubject .new{
	position: absolute;
	top: -8px;
	left: -6px;
	height: 24px;
	padding: 4px;
	border-radius: 10px;
	background-color: rgba(42,115,255,1.00);
	color: #fff;
	text-align: center;
	
}

.subject .new{
	position: absolute;
	top: -8px;
	left: -6px;
	height: 24px;
	padding: 4px;
	border-radius: 10px;
	background-color: rgba(42,115,255,1.00);
	color: #fff;
	text-align: center;
}

.subject:hover{
	background-color: #fff;
	transform: scale(1.1, 1.1);
}

.subject h4{
	font-size: 24px;
	color: #00ed33;
	text-shadow: 1px 1px 2px #333;
}

.subject span{
	color: #333;
}

.subjectPrice{
	color: #00A6F0;
	font-size: 18px;
	font-weight: 600;
	margin: 4px 40px;
	padding: 0;
}

.businessPackage{
	position: relative;
	float: left;
	width: 50%;
	height: 640px;
	padding: 20px;
	margin: 0px auto;
	background-image: url("images/business.jpg");
	background-size: cover;
	text-align: center;
}

.sciencePackage{
	position: relative;
	float: right;
	width: 50%;
	height: 640px;
	padding: 20px;
	margin: 0px auto;
	background-image: url("images/science.jpg");
	background-size: cover;
	text-align: center;
}

.allPackage{
	position: relative;
	clear: both;
	width: 100%;
	height: 550px;
	padding: 20px;
	margin: 0px auto;
	background-image: url("images/all.jpg");
	background-size: cover;
	text-align: center;
}

.product{
	width: 400px;
	height: 270px;
	margin: 160px auto 30px auto;
	padding: 20px;
	background-color: rgba(203,203,203,0.80);
	border-radius: 16px;
	text-align: center;
}

.product h2{
	font-size: 30px;
	text-shadow: 1px 1px 2px #333;
}

.product ul{
	list-style: none;
	font-size: 20px;
	font-weight: 800;
}

.product li{
	margin: 5px;
}

.allProduct{
	width: 600px;
	height: 390px;
	margin: 30px auto 30px auto;
	padding: 20px;
	background-color: rgba(203,203,203,0.80);
	border-radius: 16px;
	text-align: center;
}

.allProduct h2{
	font-size: 30px;
	text-shadow: 1px 1px 2px #333;
}

.allProduct ul{
	list-style: none;
	font-size: 20px;
	font-weight: 800;
}

.allProduct li{
	margin: 5px;
}

.green{
	color: #00ed33;
}

.green:hover{
	cursor: pointer;
}

.registerButton{
	position: relative;
	background-color: #333;
	color: #00ED33;
	height: 36px;
	border: none;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 600;
	margin: 10px auto 20px auto;
	padding: 12px 150px;
	text-decoration: none;
	transition: color 0.3s;
}

.registerButton:hover{
	color: #fff;
}

.allRegisterButton{
	position: relative;
	background-color: #333;
	color: #00ED33;
	height: 44px;
	border: none;
	border-radius: 5px;
	font-size: 24px;
	font-weight: 600;
	margin: 10px auto;
	padding: 12px 230px;
	text-decoration: none;
	transition: color 0.3s;
}

.allRegisterButton:hover{
	color: #fff;
}

.price{
	color: #fff;
	background-color: #00A6F0;
	font-size: 22px;
	font-weight: 500;
	margin: 20px 40px;
	padding: 6px;
	border-radius: 4px;
}

.discount{
	color: red;
	font-size: 18px;
	font-weight: 600;
}

.subjectCombinations{
	position: relative;
	width: 100%;
	height: 360px;
	background-image: url("images/all.jpg");
	background-size: cover;
	background-attachment: fixed;
	text-align: center;
}

.fade{
    position: absolute;
    bottom: 0px;

    display: block;
  
    width: 100%;
    height: 60px;
  
    background-image: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0), 
        rgba(175,175,175,1.00));
}

.combination{
	width: 600px;
	height: 140px;
	margin: 40px auto;
	padding: 0px;
	background-color: #ececec;
	border-radius: 10px;
	text-decoration: none;
	transition: transform 0.2s;
}

.combination a{
	margin: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	text-align: center;
}

.combination div{
	padding: 20px;
	text-decoration: none;
}

.combination h2{
	margin: 6px;
}

.combination h4{
	margin: 6px;
	color: #333;
}

.combination h3{
	color: #00A6F0;
	margin: 2px;
}

.combination:hover{
	transform: scale(1.1, 1.1);
	background-color: #fff;
}

.greyCombination{
	position: relative;
	width: 600px;
	height: 140px;
	margin: 40px auto;
	padding: 20px;
	background-color: #8F8F8F;
	border-radius: 10px;
	box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.4);
}

.greyCombination .new{
	position: absolute;
	top: -8px;
	left: -6px;
	height: 24px;
	padding: 4px;
	border-radius: 10px;
	background-color: rgba(42,115,255,1.00);
	color: #fff;
	text-align: center;
}

.packagePrice{
	color: #00A6F0;
	font-size: 18px;
	font-weight: 600;
	margin: 4px 40px;
	padding: 0;
}

.footerSplitBox{
	display: flex;
	height: 100%;
	width: 100%;
	margin: 10px auto;
}

.footerStyle{
	text-align: center;
	font-size: 18px;
	width: 50%;
	border-right: 3px solid #fff; 
}

.footerBGP{
	text-align: center;
	height: 160px;
	padding: 10px;
	width: 50%;
}

.footerBGP h2{
	font-size: 20px;
	color: #27a9f8;
	margin: 2px;
}

.imgBGP{
	height: 80px;
}

.icons img{
	height: 50px;
	margin: 14px auto;
}

.icons img:hover{
	transform: scale(1.1, 1.1);
}

.copyright{
	position: relative;
	color: #f2f2f2;
}

.termsOfService{
	font-size: 12px;
	text-decoration: none;
	color: #f2f2f2;
}

.termsOfService:hover{
	text-decoration: underline;
	cursor: pointer;
}

.previewContainer{
	position: relative;
	display: flex;
	float: left;
	width: 460px;
}

.previewContainer.small{
	width: 460px;
	height: 306px;
}

.previewContainer.small img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.categories{
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	background-color: #333;
	margin: -230px 200px 40px 200px;
	padding: 20px 40px;
	border-radius: 40px;
}

.categories h2{
	color: #fff;
	font-size: 30px;
	font-family: "Exo Regular";
	text-shadow: 1px 1px 2px #000;
}

.fa-lightbulb{
	color: #fff;
	text-shadow: 1px 1px 2px #000;
}

.category{
	padding: 10px 0;
}

.entities h3{
	max-width: 460px;
	float: left;
	font-size: 38px;
	font-weight: 600;
	margin: 110px 80px;
}

.entities{
	display: flex;
	float: left;
}

.category a{
	text-decoration: none;
}

.errorBanner{
	color: red;
	background-color: #f2f2f2;
	padding: 30px;
	border-radius: 10px;
	position: absolute;
	top: 25%;
	left: 42%;
	text-align: center;
	font-size: 18px;
}

.unitContainer{
	margin-top: -240px;
}

.unit{
	display: flex;
	flex-direction: column;
	padding: 10px 20px;
	margin: 10px auto;
	max-width: 1200px;
	background-color: #333;
	border-radius: 8px;
}

.unit h1{
	color: rgba(42,115,255,1.00);
	font-size: 48px;
	margin: 60px auto;
}

.videos{
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

.lessonContainer{
	display: inline-flex;
	justify-content: center;
	margin-right: 4px;
}

.lessonContainer .content{
	display: flex;
	flex-direction: column;
	width: 230px;
	position: relative;
}

.lessonContainer img{
	width: 230px;
	height: 129px;
	object-fit: cover;
}

.lessonContainer .videoInfo h4,
.lessonContainer .videoInfo span{
	color: #f2f2f2;
	width: 100%;
	max-width: 230px;
	white-space: normal;
	text-decoration: none;
	margin: 8px;
}

.watchContainer{
	display: flex;
	justify-content: center;
	padding: 40px auto;
	background-color: #131313;
	overflow-y: hidden;
}

.watchContainer video{
	height: 100vh;
}

.vidTitle{
	color: #f2f2f2;
}

.videoControls{
	position: absolute;
	width: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.3);
}

.videoControls button{
	font-size: 50px;
	padding: 50px;
	margin-left: 80px;
	margin-right:80px;
	color: #f2f2f2;
	background-color: transparent;
	border: none;
}

.fa-chevron-left{
	color: #f2f2f2;
}

.fa-chevron-left:hover{
	transform: scale(1.1, 1.1);
}

.fa-chevron-right{
	color: #f2f2f2;
	float: right;
}

.fa-chevron-right:hover{
	transform: scale(1.1, 1.1);
}

.upNext{
	height: 100%;
	justify-content: center;
	background-color: rgba(0,0,0,0.9);
}

.upNext button{
	padding: 6px;
	margin: 0 20px 0 0;
}

.upNextContainer{
	padding-left: 20px;
	border-left: solid 2px #f2f2f2;
	border-right: solid 2px #f2f2f2;
}

.upNextContainer h3{
	color: #f2f2f2;
}

.fa-redo{
	color: #f2f2f2;
}

.fa-redo:hover{
	transform: scale(1.1, 1.1)
}

.backHome{
	font-size: 50px;
	color: #f2f2f2;
	margin-left: 16px;
}

.backHome:hover{
	transform: scale(1.1, 1.1)
}

.fa-play{
	color: #f2f2f2;
	margin-right: 20px;
}

.playNext:hover{
	transform: scale(1.1, 1.1);
}

.pdfContainer{
	top: 80%;
	background-color: transparent;
}

.pdf{
	color: #f2f2f2;
	text-decoration: none;
	font-size: 24px;
}

.pdf:hover{
	color: #fff;
	text-decoration: underline;
}

.fa-download{
	color: #f2f2f2;
}

.fa-download:hover{
	color: #fff;
}

.watchNav{
	z-index: 2;
}

.videoImageBackground{
	display: block;
	height: 100%;
	padding-bottom: 40px;
	margin: 0;
	background-image: url("images/all.jpg");
	background-size: cover;
	background-attachment: fixed;
}

.videoDescBox{
	background-color: #00ed33;
	width: 90%;
	max-width: 1200;
	min-height: 100px;
	margin: 0 auto;
	padding: 20px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.videoDescBox p{
	color: #f2f2f2;
	margin: 0 20px 10px 0;
	font-size: 18px;
	font-family: Ubuntu;
	text-shadow: 1px 1px 2px #333;
}

.videoDescBox h3{
	margin: 0 0 10px 0;
	color: #f2f2f2;
	font-size: 22px;
	text-shadow: 1px 1px 2px #333;
}

.videoDescBox a{
	color: #f2f2f2;
	text-shadow: 1px 1px 2px #333;
}

.tooltip .tooltiptext{
	visibility: hidden;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	width: 120px;
	top: 100%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 1s;
}

.tooltiptext{
	font-size: 12px;
}

.tooltip:hover .tooltiptext{
	visibility: visible;
	opacity: 1;
}

.seen{
	color: #5CACFF;
	font-size: 20px;
	position: absolute;
	top: 5px;
	left: 5px;
	margin-right: 5px;
	text-shadow: 1px 1px 2px #333;
}

.thumbnailTextBox{
	position: absolute;
	top: 2px;
	left: 30px;
	right: 26px;
	width: 168px;
	padding: 6px 2px;
	text-align: center;
	white-space: pre-line;
	background-image: radial-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.2) );
	border-radius: 10px;
}

.thumbnailText{
	color: #00B0FF;
	font-size: 18px;
	text-shadow: 0px 0px 3px #000;
}

.logoutIcon{
	color: #bfbfbf;
	float: right;
	font-size: 20px;
	margin: 36px 30px;
}

.logoutIcon:hover{
	color: #fff;
}

.logoutIcon i{
	color: #bfbfbf;
}

.textBoxContainer{
	padding: 90px 140px 60px 140px;
}

.searchInput{
	height: 60px;
	width: 600px;
	border: 4px solid #000;
	border-radius: 6px;
	background-color: #2B2B2B;
	color: #f2f2f2;
	font-size: 28px;
	padding: 4px 20px;
}

.results{
	background-color: #333;
	display: flex;
	width: 100%;
	max-width: 1200px;
	min-height: 400px;
	border-radius: 40px;
	margin: 20px auto;
	padding: 40px;
}

.successButton{
	font-size: 18px;
	font-weight: 600;
	padding-top: 20px; 
}

.successButton a{
	text-decoration-color: #00ed33;
}

.successButton:hover{
	cursor: pointer;
}

.backButton{
	color: #00ed33;
	font-weight: 500;
}

.backButton:hover{
	cursor: pointer;
	text-decoration: underline;
}

.vidCount{
	position: relative;
	display: flex;
	height: 220px;
	max-width: 100vw;
	background-color: #333;
	justify-content: center;
	align-content: center;
	text-align: center;
	text-shadow: 2px 2px 3px #000;
}

.countHeader{
	color: #00ed33;
	position: absolute;
	top: 10px;
}

.counter{
	height: 120px;
	width: 14%;
	margin: 80px 10px 20px 10px;
	text-align: center;
	
}

.counter h2{
	color: #f2f2f2;
	margin: 0;
}

.counterNo{
	color: #f2f2f2;
	font-size: 36px;
	margin-top: -10px;
}

.leftBorder{
	border-left: solid #f2f2f2;
}

.underConstruction{
	position: relative;
	height: 250px;
	width: 500px;
	padding: 20px 45px;
	background-color: #f2f2f2;
	border-radius: 20px;
}

.smallPayLogo{
	margin: 0 0 -10px 0;
	padding: 0;
	height: 40px;
}

.paymentMethods{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	height: 100px;
	padding: 40px 200px;
	background-color: #333;
}

.mediumPayLogo{
	margin: 0 3%;
}

.normal{
	height: 46px;
}

.small{
	height: 36px;
	margin-top: 5px;
}

.payNotice{
	padding: 16px;
	border-radius: 8px;
	background-color: rgba(249,253,75,0.80);
}

.payWarning{
	padding: 16px;
	border-radius: 8px;
	background-color: rgba(255,69,72,0.80);
}

.successNotice{
	padding: 16px;
	border-radius: 8px;
	background-color: rgba(167,254,45,0.80);
}

.errorHandle{
	background-color: #808080;
	max-height: 40px;
	width: 100%;
	text-align: center;
	padding: 10px;
}

.errorHandle span{
	color: orange;
	font-size: 20px;
}

.detailsSpan{
	color: #f2f2f2;
	margin: 6px 0;
}

.adVideoGradient{
	width: 100%;
	height: 900px;
	margin-bottom: 20px;
	background-image: linear-gradient(to bottom, #AFAFAF, #333);
}

.adVideoBox{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 400px;
	padding: 40px;
}

.adVideoTextLeft{
	float: left;
	height: 320px;
	width: 52%;
	background-color: #f2f2f2;
	border-radius: 20px;
	margin-right: 40px;
	padding: 5% 40px;
	text-align: right;
}

.adVideoRight{
	float: right;
}

.adVideoRight video{
	height: 320px;
}

.adTextLeft{
	font-size: 36px;
	line-height: 50px;
	font-weight: bold;
}

.adVideoTextRight{
	float: right;
	height: 320px;
	width: 52%;
	background-color: #f2f2f2;
	border-radius: 20px;
	margin-left: 40px;
	padding: 5% 40px;
	text-align: left;
}

.adVideoLeft{
	float: left;
}

.adVideoLeft video{
	height: 320px;
}

.adTextRight{
	font-size: 36px;
	line-height: 50px;
	font-weight: bold;
}

.adTermsLink{
	color: #333;
	cursor: pointer;
}

.lessons{
	position: relative;
	background-color: #cbcbcb;
	font-size: 18px;
	margin: 40px auto;
	padding: 30px 40px 60px 40px;
	width: 100%;
	max-width: 1100px;
	border: none;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 3px 2px 8px 0;
}

.lessons ol{
	margin: 0px 0px 20px 30px;
}

.lessons h2{
	color: #00A0F6;
}

.syllabus{
	position: relative;
	background-color: #cbcbcb;
	font-size: 18px;
	margin: -280px auto 40px auto;
	padding: 30px 40px 60px 40px;
	width: 100%;
	max-width: 1100px;
	border: none;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 3px 2px 8px 0;
}

.syllabus h2{
	color: #00A0F6;
}

.syllabus h3{
	color: #00A0F6;
	margin-left: 0;
	padding: 0;
}

.link{
	color: #333;
	text-decoration: underline;
	cursor: pointer;
	transition: .1s;
}

.link:hover{
	color: #00A0F6;
}

.CourseContainer{
	margin-top: -240px;
}

.freeCourseHead{
	
}

.freeCourseHead{
	display: flex;
	flex-direction: column;
	padding: 10px 20px;
	margin: 10px auto;
	max-width: 1200px;
	background-color: #333;
	border-radius: 8px;
}

.freeCourseHead h2{
	color: rgba(42,115,255,1.00);
	font-size: 32px;
	margin: 10px auto;
}

.contactBackground{
	background-color: #333;
	margin-top: 60px;
}

table{
	width: 100%;
	margin: 20px 0px;
}

table caption{
	font-size: 26px;
	font-weight: 700;
	font-family: "Exo Regular";
	color: #333;
}

table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
}

th, td {
	text-align: center;
	 padding: 15px;
}

hr{
	height: 4px;
	width: 100%;
	max-width: 1200px;
	color: #f2f2f2;
	background-color: #f2f2f2;
	margin: auto;
	margin-top: 12px;
}

footer{
	margin-top: 0px;
	padding: 14px;
	height: 160px;
	width: 100vw;
	background-color: #333;
}

/*----------Mobile Styles----------*/

@media (max-width: 1000px){

.flex{
	display: flex;
	min-width: 100vw;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #C1C1C1;
	border: none;
	border-radius: 5px;
	padding-right: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  	background-color: #6E6E6E;
	border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #000;
}

h1{
	font-family: "Exo Regular";
	font-size: 18px;
}

h2{
	color: #00ed33;
	font-family: "Exo Regular";
	margin-bottom: 16px;
	text-shadow: 1px 1px 2px #333;
}

h3{
	color: #f2f2f2;
	font-family: "Exo Regular";
	margin: 10px;
}

a h3:hover{
	color: #fff;
	text-shadow: 1px 1px 2px #333;
}
	
#close_cookie{display:none;}
	#close_cookie:checked + #cookie_consent_popup{display:none;}	
#cookie_consent_popup{
	position:fixed;
	bottom:0;left:0;
	width:100%;
	height:380px;
	background-color:#afafaf;
	padding:40px;
	border-radius: 0px;
	border: none;
	border-top: solid medium #FF9100;
	box-shadow: none;
	 z-index:200;
}
#cookie_consent_popup h1{
	font-size:46px;
}
	#cookie_consent_popup h1:before{
		content:"";
		padding:0;
	}
#cookie_consent_popup p{
	text-align: left;
	font-size:28px;
}
#cookie_consent_popup #close_cookie_box{
	position:absolute;
	top:25px;right:40px;
	cursor:pointer;
	font-size: 50px;
}
#cookie_consent_popup #ok_cookie_box{
	position:absolute;
	bottom:20px;right:40px;
	cursor:pointer;
	font-size:42px;
	padding:20px 40px;
	font-weight:700;
	color:white;
	background-color: rgba(0,237,51,0.72);
	border-radius: 8px;
}

.cookieH2{
	text-shadow: 2px 2px 1px #000;
}

.cookieH3{
	padding: 0;
	margin: 10px 0 5px 0;
	color: #00ed33;
}
	
.cookieP{
	color: #f2f2f2;
	font-size: 16px;
}

.signUpContainer{
	background-image: url("images/Asset 28-50.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	height: 100vh;
	align-items: center;
	justify-content: center;
	overflow-y: hidden;
}

.column{
	min-height: 500px;
	max-height: 2600px;
	width: 900px;
	padding: 20px 45px;
	background-color: #f2f2f2;
	border-radius: 20px;
	overflow-y: scroll;
	margin: 50px;
}

.column form{
	margin-top: 100px;
	display: flex;
	flex-direction: column;
}

 .column form input[type="text"],
 .column form input[type="email"],
 .column form input[type="password"]{
	font-size: 38px;
	margin: 16px 0;
	border: none;
	border-bottom: 1px solid #808080;
	background-color: transparent;
	box-shadow: 0 0 0 0 transparent;
	color: #333;
}

.column form input[type="checkbox"]{
	margin: 12px 6px;
	height: 38px;
	width: 38px;
}

.column form input[type="submit"]{
	background-color: #808080;
	color: #00ED33;
	height: 80px;
	width: 280px;
	border: none;
	border-radius: 4px;
	font-size: 36px;
	font-weight: 800;
	margin: 10px auto 40px auto;
}

.column form input[type="submit"]:hover{
	transform: scale(1.0, 1.0);
	box-shadow: none;
	cursor: pointer;
}
	
.column p{
	font-size: 20px;
}

.settingsContainer{
	padding-top: 0px;
	background-color: transparent;
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	overflow-y: hidden;
}

.settingsContainer .formSection{
	display: flex;
	flex-direction: column;
	margin: 20px 0;
	border-bottom: 2px solid #f2f2f2;
	padding-bottom: 20px;
}
	
.settingsContainer .formSection h2{
	font-size: 48px;
}
	
.settingsContainer .formSection h4{
	font-size: 30px;
}
	
.settingsContainer .formSection span{
	font-size: 26px;
}

.settingsContainer form input[type="text"],
.settingsContainer form input[type="email"],
.settingsContainer form input[type="password"]{
	height: auto;
	font-size: 38px;
	margin: 16px 0;
	border: none;
	border-radius: 4px;
	background-color: #fff;
	padding: 6px;
}

.settingsContainer form textarea{
	font-size: 38px;
	margin: 16px 0;
	border: none;
	border-radius: 4px;
	padding: 6px;
	overflow-y: auto;
	resize: none;
}

.socials{
	color: #f2f2f2;
	font-size: 28px;
}
	
.contactUsSocials .icons img{
	height: 100px;
	width: 100px;
	margin: 20px;
}

.alertSuccess,
.alertError{
	margin: 10px 0;
}

.alertError{
	color: #dc1928;
	font-size: 24px;
}

.alertSuccess{
	color: #2ecc71;
	font-size: 24px;
}

.header{
	padding: 20px 0;
}

.header h1{
	color: #00ed33;
	font-weight: 600;
	text-shadow: 1px 1px 2px #333;
}
	
.header h2{
	font-size: 46px;
	font-weight: 600;
	font-family: "Ubuntu Regular";
	line-height: 32px;
	margin: 0;
	padding-top: 20px;
	color: #00ed33;
}

.header h3{
	font-size: 46px;
	font-weight: 600;
	font-family: "Ubuntu Regular";
	line-height: 32px;
	margin: 0;
	padding-top: 20px;
	color: #070707;
}
	
.header h4{
	font-size: 26px;
	margin-top: 20px;
}

.logo{
	position: relative;
	height: 160px;
	margin-right: 40px;
	float: right;
}
	
.signInMessageSpan{
	font-size: 32px;
}

.signInMessage{
	text-decoration: none;
	color: #00ed33;
	font-size: 32px;
	padding-bottom: 20px;
}

.errorMessage{
	color: #f00;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}

.blankError{
	color: #f00;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	margin: 450px auto;
}

.successMessage{
	color: #00C820;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.contactUsSuccess{
	padding: 4px;
	background-color: #808080;
	border-radius: 2px;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.4) 3px 2px 8px 0;
}

.container{
	height: 650px;
	width: 100vw;
	margin: 0;
	background-color: rgba(0, 237, 51, 0.9);
	text-align: center;
}
	
.topBar{
	position: relative;
	background-color: #070707;
	width: 100%;
	height: 160px;
	padding: 10px;
	margin: auto;
	top: 0px;
	border-radius: 0;
}
	
.desktopNav{
	display: none;
	position: absolute;
	top: 159px;
	left: auto;
	right: 0;
	min-height: 360px;
	width: 400px;
	background-color: transparent;
	float: right;
	text-align: center;
	z-index: 100;
}
	
.mobileNav{
	display: block;
	float: right;
	padding: 4px;
	margin: 30px 20px;
	background-color: transparent;
	transition: background-color 0.1s;
}
	
.mobileNav:active{
	background-color: rgba(179,179,179,0.27);
}
	
.burgerIcon{
	color: #afafaf;
	font-size: 80px;
}
	
.expand{
	display: block;
}
	
.headerLogo{
	height: 100%;
	margin-left: 20px;
	float: left;
}
	
.mobile{
	display: block;
}

.loginRegisterButton{
	margin: 38px 8px;
	border-radius: 0;
	color: #f2f2f2;
	font-size: 34px;
	text-decoration: underline;
	background-color: transparent;
	height: 44px;
	width: auto;
	text-align: center;
}

.loginRegisterButton a {
	background-color: #808080;
	text-decoration: none;
}
	
.loginRegisterButton:hover{
	transform: scale(1.0, 1.0);
}
	
.profileButton{
	margin: 0;
	border-radius: 0;
	padding: 63px;
	color: #00ED33;
	font-size: 46px;
	background-color: #808080;
	height: 180px;
	width: 100%;
	text-align: center;
}

.profileButton a {
	background-color: #808080;
	text-decoration: none;
}

.profileButton:hover{
	transform: scale(1.0, 1.0);
}

.profileIcon{
	color: #00ed33;
}

.meerOorOnsButton{
	background-color: #808080;
	height: 60px;
	width: 100%;
	text-align: center;
	color: #00ED33;
}

.meerOorOnsButton a{
	background-color: #808080;
	text-decoration: none;
}

.accountAvatar{
	float: right;
	height: 45px;
	margin: 24px 10px auto 0px;
	transition: transform 0.3s;
}

.accountAvatar:hover{
	transform: scale(1.1, 1.1);
}

.homeLink{
	position: relative;
	margin: 0;
	padding: 69px 12px;
	font-size: 42px;
	height: 180px;
	width: 100%;
	text-align: center;
	text-decoration: none;
	color: #f2f2f2;
	background-color: #878787;
}

.homeIcon{
	color: #f2f2f2;
	margin-right: 5px;
}

.slogan{
	color: #f2f2f2;
	font-size: 80px;
	margin: 80px auto 0px auto;
}

.descBox{
	position: relative;
	background-color: #cbcbcb;
	font-size: 28px;
	margin: 80px auto -20px auto;
	padding: 30px 30px 60px 30px;
	width: 100%;
	max-width: 1100px;
	border: none;
	border-radius: 0px;
	box-shadow: rgba(0, 0, 0, 0.4) 3px 2px 8px 0;
	z-index: 30;
}

.descBox, .heading{
	text-align: center;
}

.heading{
	background-color: #333;
	max-width: 800px;
	padding: 20px;
	margin-top: 0;
	border-radius: 10px;
}

.heading h1{
	color: #00ed33;
	font-size: 52px;
	text-shadow: 1px 1px 2px #333;
}

.pakketHeading{
    clear: both;
	position: relative;
	background-color: #333;
	margin: -30px auto 0px auto;
	padding: 20px;
	width: 100%;
	max-width: 800px;
	border: none;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 3px 2px 8px 0;
	z-index: 20;
}

.pakketHeading h1{
	color: #00ed33;
	font-size: 52px;
	text-shadow: 1px 1px 2px #333;
}

.subjects{
	position: relative;
	clear: both;
	width: 100%;
	height: 1050px;
	padding: 20px;
	margin: 580px auto 0px auto;
	background-image: url("images/AfriCamb-Book-80.jpg");
	background-size: cover;
	text-align: center;
}

.leftSubjects{
	float: left;
	margin-top: 680px;
	width: 50%;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.leftSubjects a{
	text-decoration: none;
}
	
.spacer{
	height: 130px;
}

.rightSubjects{
	float: right;
	margin-top: 840px;
	width: 50%;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.rightSubjects a{
	text-decoration: none;
}

.subject{
	position: relative;
	right: 0;
	left: 0;
	width: 140%;
	padding: 16px;
	margin: 20px 10px;
	background-color: #ECECEC;
	border-radius: 6px;
	box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.4);
	transition: transform 0.5s;
}
	
.subject .new{
	position: absolute;
	top: -8px;
	left: -6px;
	height: 26px;
	padding: 2px 6px;
	border-radius: 10px;
	background-color: rgba(42,115,255,1.00);
	color: #fff;
	text-align: center;
	font-size: 20px;
}

.greysubject{
	position: relative;
	right: 0;
	left: 0;
	width: 140%;
	padding: 16px;
	margin: 20px 10px;
	background-color: #8F8F8F;
	border-radius: 6px;
	box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.4);
}

.greysubject .new{
	position: absolute;
	top: -8px;
	left: -6px;
	height: 24px;
	padding: 4px;
	border-radius: 10px;
	background-color: rgba(42,115,255,1.00);
	color: #fff;
	text-align: center;
	
}
	
.rightSubject{
	margin-left: -40%;
}

.leftSubject{
	margin-right: -40%;
}

.subject:hover{
	background-color: #fff;
	transform: scale(1.0, 1.0);
}

.subject h4{
	font-size: 56px;
	color: #00ed33;
	text-shadow: 1px 1px 2px #333;
}
	
.greysubject h4{
	font-size: 40px;
}
	
.subject span{
	font-size: 28px;
}
	
.greysubject span{
	font-size: 20px;
}

.subjectPrice{
	color: #00A6F0;
	font-size: 22px;
	font-weight: 600;
	margin: 4px 40px;
	padding: 0;
}

.businessPackage{
	position: relative;
	float: left;
	width: 50%;
	height: 640px;
	padding: 20px;
	margin: 0px auto;
	background-image: url("images/business.jpg");
	background-size: cover;
	text-align: center;
}

.sciencePackage{
	position: relative;
	float: right;
	width: 50%;
	height: 640px;
	padding: 20px;
	margin: 0px auto;
	background-image: url("images/science.jpg");
	background-size: cover;
	text-align: center;
}

.allPackage{
	position: relative;
	clear: both;

	width: 100%;
	height: 550px;
	padding: 20px;
	margin: 0px auto;
	background-image: url("images/all.jpg");
	background-size: cover;
	text-align: center;
}

.product{
	width: 400px;
	height: 270px;
	margin: 160px auto 30px auto;
	padding: 20px;
	background-color: rgba(203,203,203,0.80);
	border-radius: 16px;
	text-align: center;
}

.product h2{
	font-size: 30px;
	text-shadow: 1px 1px 2px #333;
}

.product ul{
	list-style: none;
	font-size: 20px;
	font-weight: 800;
}

.product li{
	margin: 5px;
}

.allProduct{
	width: 600px;
	height: 390px;
	margin: 30px auto 30px auto;
	padding: 20px;
	background-color: rgba(203,203,203,0.80);
	border-radius: 16px;
	text-align: center;
}

.allProduct h2{
	font-size: 30px;
	text-shadow: 1px 1px 2px #333;
}

.allProduct ul{
	list-style: none;
	font-size: 20px;
	font-weight: 800;
}

.allProduct li{
	margin: 5px;
}

.green{
	color: #00ed33;
}

.green:hover{
	cursor: pointer;
}

.registerButton{
	position: relative;
	background-color: #333;
	color: #00ED33;
	height: 36px;
	border: none;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 600;
	margin: 10px auto 20px auto;
	padding: 12px 150px;
	text-decoration: none;
	transition: color 0.3s;
}

.registerButton:hover{
	color: #fff;
}

.allRegisterButton{
	position: relative;
	background-color: #333;
	color: #00ED33;
	height: 44px;
	border: none;
	border-radius: 5px;
	font-size: 24px;
	font-weight: 600;
	margin: 10px auto;
	padding: 12px 230px;
	text-decoration: none;
	transition: color 0.3s;
}

.allRegisterButton:hover{
	color: #fff;
}

.price{
	color: #fff;
	background-color: #00A6F0;
	font-size: 22px;
	font-weight: 500;
	margin: 20px 40px;
	padding: 6px;
	border-radius: 4px;
}

.discount{
	color: red;
	font-size: 18px;
	font-weight: 600;
}
	
.subjectCombinations{
	width: 100%;
	height: 400px;
	background-image: url("images/all.jpg");
	background-size: cover;
	background-attachment: scroll;
	text-align: center;
}

.combination{
	width: 760px;
	height: 180px;
	margin: 40px auto;
	padding: 20px;
	background-color: #ececec;
	border-radius: 10px;
	transition: transform 0.3s;
}

.combination a{
	margin: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	text-decoration: none;
}

.combination h2{
	margin: 6px;
	font-size: 36px;
}

.combination h4{
	margin: 6px;
	font-size: 26px;
}
	
.combination p{
	font-size: 24px;
}

.combination:hover{
	transform: scale(1.1, 1.1);
	background-color: #fff;
}

.greyCombination{
	position: relative;
	width: 600px;
	height: 140px;
	margin: 40px auto;
	padding: 20px;
	background-color: #8F8F8F;
	border-radius: 10px;
	box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.4);
}

.greyCombination .new{
	position: absolute;
	top: -8px;
	left: -6px;
	height: 24px;
	padding: 4px;
	border-radius: 10px;
	background-color: rgba(42,115,255,1.00);
	color: #fff;
	text-align: center;
}

.packagePrice{
	color: #00A6F0;
	font-size: 18px;
	font-weight: 600;
	margin: 4px 40px;
	padding: 0;
}

.footerStyle{
	text-align: center;
	font-size: 28px;
}

.icons img{
	height: 70px;
	margin: 14px auto;
}

.icons img:hover{
	transform: scale(1.0, 1.0);
}

.copyright{
	position: relative;
	color: #f2f2f2;
}

.termsOfService{
	font-size: 24px;
	text-decoration: underline;
	color: #f2f2f2;
}

.previewContainer{
	position: relative;
	display: flex;
	float: left;
	width: 460px;
}

.previewContainer.small{
	width: 460px;
	height: 306px;
}

.previewContainer.small img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.categories{
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	background-color: #333;
	margin: -230px 20px 220px 20px;
	padding: 20px 30px;
	border-radius: 40px;
}

.categories h2{
	color: #fff;
	font-size: 38px;
	font-family: "Exo Regular";
	text-shadow: 1px 1px 2px #000;
}

.fa-lightbulb{
	color: #fff;
	text-shadow: 1px 1px 2px #000;
}

.category{
	padding: 10px 0;
}

.entities h3{
	max-width: 460px;
	float: left;
	font-size: 32px;
	font-weight: 600;
	margin: 130px 40px;
}

.entities{
	display: flex;
	float: left;
}

.category a{
	text-decoration: none;
}

.errorBanner{
	color: red;
	background-color: #f2f2f2;
	padding: 30px;
	border-radius: 10px;
	position: absolute;
	top: 25%;
	left: 42%;
	text-align: center;
	font-size: 18px;
}

.unitContainer{
	margin-top: -240px;
	margin-bottom: 240px;
}

.unit{
	display: flex;
	flex-direction: column;
	padding: 16px 10px;
	margin: 30px auto;
	max-width: 960px;
	background-color: #333;
	border-radius: 8px;
}
	
.unit h3{
	font-size: 34px;
}
	
.unit h1{
	color: rgba(42,115,255,1.00);
	font-size: 48px;
	margin: 60px auto;
}

.videos{
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

.lessonContainer{
	display: inline-flex;
	justify-content: center;
	margin-right: 4px;
}

.lessonContainer .content{
	display: flex;
	flex-direction: column;
	width: 432px;
	position: relative;
}

.lessonContainer img{
	width: 432px;
	height: 243px;
	object-fit: cover;
}

.lessonContainer .videoInfo h4,
.lessonContainer .videoInfo span{
	color: #f2f2f2;
	width: 100%;
	font-size: 28px;
	max-width: 432px;
	white-space: normal;
	text-decoration: none;
	margin: 8px;
}


.watchContainer{
	display: flex;
	justify-content: center;
	padding: 40px auto;
	background-color: #131313;
	overflow-y: auto;
	height: 90vh;
}

.watchContainer video{
	height: 70%;
	width: 100vw;
	margin-top: 148px;
}

.vidTitle{
	color: #f2f2f2;
}

.videoControls{
	position: absolute;
	width: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.3);
}

.videoControls button{
	font-size: 50px;
	padding: 50px;
	margin-left: 80px;
	margin-right:80px;
	color: #f2f2f2;
	background-color: transparent;
	border: none;
}

.fa-chevron-left{
	color: #f2f2f2;
}

.fa-chevron-left:hover{
	transform: scale(1.1, 1.1);
}

.fa-chevron-right{
	color: #f2f2f2;
	float: right;
}

.fa-chevron-right:hover{
	transform: scale(1.1, 1.1);
}

.upNext{
	height: 100%;
	justify-content: center;
	background-color: rgba(0,0,0,0.9);
}

.upNext button{
	padding: 6px;
	margin: 0 20px 0 0;
}

.upNextContainer{
	padding-left: 20px;
	border-left: solid 2px #f2f2f2;
	border-right: solid 2px #f2f2f2;
}

.upNextContainer h3{
	color: #f2f2f2;
}

.fa-redo{
	color: #f2f2f2;
}

.fa-redo:hover{
	transform: scale(1.1, 1.1)
}

.backHome{
	font-size: 50px;
	color: #f2f2f2;
	margin-left: 16px;
}

.backHome:hover{
	transform: scale(1.1, 1.1)
}

.fa-play{
	color: #f2f2f2;
	margin-right: 20px;
}

.playNext:hover{
	transform: scale(1.1, 1.1);
}

.pdfContainer{
	top: 80%;
	background-color: transparent;
}

.pdf{
	color: #f2f2f2;
	text-decoration: none;
	font-size: 24px;
}

.pdf:hover{
	color: #fff;
	text-decoration: underline;
}

.fa-download{
	color: #f2f2f2;
}

.fa-download:hover{
	color: #fff;
}

.watchNav{
	z-index: 2;
}

.tooltip .tooltiptext{
	visibility: hidden;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	width: 120px;
	top: 100%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 1s;
}

.tooltiptext{
	font-size: 12px;
}

.tooltip:hover .tooltiptext{
	visibility: visible;
	opacity: 1;
}

.seen{
	color: #5CACFF;
	font-size: 26px;
	position: absolute;
	top: 5px;
	left: 5px;
	text-shadow: 1px 1px 2px #333;
}

.thumbnailTextBox{
	position: absolute;
	top: 8px;
	left: 34px;
	right: 20px;
	width: auto;
	max-width: 380px;
	padding: 10px;
	text-align: center;
	white-space: pre-line;
}

.thumbnailText{
	color: #00B0FF;
	font-size: 32px;
	text-shadow: 1px 1px 2px #333;
}

.logoutIcon{
	margin: 0;
	border-radius: 0;
	padding: 63px;
	color: #f2f2f2;
	font-size: 46px;
	background-color: #878787;
	height: 180px;
	width: 100%;
	text-align: center;
}

.logoutIcon:hover{
	color: #f2f2f2;
}

.logoutIcon i{
	color: #f2f2f2;
}

.logoutIcon a {
	background-color: #808080;
	text-decoration: none;
}

.textBoxContainer{
	padding: 90px 140px 60px 140px;
}

.searchInput{
	height: 60px;
	width: 600px;
	border: 4px solid #000;
	border-radius: 6px;
	background-color: #2B2B2B;
	color: #f2f2f2;
	font-size: 28px;
	padding: 4px 20px;
}

.results{
	background-color: #333;
	display: flex;
	width: 100%;
	max-width: 1200px;
	min-height: 400px;
	border-radius: 40px;
	margin: 20px auto;
	padding: 40px;
}

.successButton{
	font-size: 28px;
	font-weight: 600;
	padding-top: 20px; 
}

.successButton a{
	text-decoration-color: #00ed33;
}

.successButton:hover{
	cursor: pointer;
}

.backButton{
	color: #00ed33;
	font-weight: 500;
	font-size: 32px;
}

.backButton:hover{
	cursor: pointer;
	text-decoration: underline;
}

.vidCount{
	position: relative;
	display: flex;
	height: 220px;
	max-width: 100vw;
	background-color: #333;
	justify-content: center;
	align-content: center;
	text-align: center;
	text-shadow: 2px 2px 3px #000;
}

.countHeader{
	color: #00ed33;
	position: absolute;
	top: 10px;
}

.counter{
	height: 120px;
	width: 14%;
	margin: 80px 10px 20px 10px;
	text-align: center;
	
}

.counter h2{
	font-size: 19px;
	color: #f2f2f2;
	margin: 0;
}

.counterNo{
	color: #f2f2f2;
	font-size: 36px;
	margin-top: -10px;
}

.leftBorder{
	border-left: solid #f2f2f2;
}

.underConstruction{
	position: relative;
	height: 250px;
	width: 500px;
	padding: 20px 45px;
	background-color: #f2f2f2;
	border-radius: 20px;
}

.smallPayLogo{
	margin: 0 0 -10px 0;
	padding: 0;
	height: 40px;
}

.paymentMethods{
	margin-bottom: 230px;
	width: 100%;
	height: 100px;
	padding: 20px 10px;
}

.mediumPayLogo{
	margin: 0 10px;
	float: left;
}

.normal{
	height: 56px;
	margin-top: 5px;
}

.small{
	height: 46px;
	margin-top: 10px;
}

.payNotice{
	padding: 16px;
	border-radius: 8px;
	background-color: rgba(249,253,75,0.80);
	font-size: 24px;
}

.payWarning{
	padding: 16px;
	border-radius: 8px;
	background-color: rgba(255,69,72,0.80);
}

.successNotice{
	padding: 16px;
	border-radius: 8px;
	background-color: rgba(167,254,45,0.80);
	font-size: 24px;
}

.errorHandle{
	background-color: #808080;
	max-height: 60px;
	width: 100%;
	text-align: center;
	padding: 10px;
}

.errorHandle span{
	color: orange;
	font-size: 40px;
}

.detailsSpan{
	color: #f2f2f2;
	margin: 6px 0;
}
	
.adVideoBox{
	width: 100%;
	height: 400px;
	padding: 20px 20px 40px 20px;
}

.adVideoTextLeft{
	float: left;
	height: 280px;
	width: 40%;
	background-color: #f2f2f2;
	border-radius: 20px;
	margin-right: 20px;
	padding: 20px 20px;
	text-align: right;
}

.adVideoRight{
	float: right;
}

.adVideoRight video{
	height: 280px;
	border: solid 1px #00ed33;
}

.adTextLeft{
	font-size: 30px;
	line-height: 50px;
	font-weight: bold;
}

.adVideoTextRight{
	float: right;
	height: 280px;
	width: 40%;
	background-color: #f2f2f2;
	border-radius: 20px;
	margin-right: 20px;
	padding: 20px 20px;
	text-align: left;
}

.adVideoLeft{
	float: left;
}

.adVideoLeft video{
	height: 280px;
	border: solid 1px #00ed33;
}

.adTextRight{
	font-size: 30px;
	line-height: 50px;
	font-weight: bold;
}
	
	.lessons{
		margin-bottom: 200px;
		background-color: #cbcbcb;
	}

table{
	width: 100%;
	margin: 20px 0px;
}

table caption{
	font-size: 36px;
	font-weight: 700;
	font-family: "Exo Regular";
	color: #333;
}

table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
}

th, td {
	text-align: center;
	 padding: 15px;
}

th{
	font-size: 24px;
}
	
td{
	font-size: 22px;
}

hr{
	height: 4px;
	width: 100%;
	max-width: 1200px;
	color: #f2f2f2;
	background-color: #f2f2f2;
	margin: auto;
	margin-top: 12px;
}

footer{
	position: fixed;
	bottom: -2px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 14px;
	padding-bottom: 80px;
	height: 260px;
	width: 100vw;
	background-color: #333;
	z-index: 100;
}
	
}