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

/* Start intro video pages     */

/* The Modal (background) */
.loginmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content */
.loginmodal-content {
  position: relative;
  background-color: #ccc;
  margin: auto;
  padding: 0;
  /* border: 1px solid #888; */
  max-width: 80%;
  max-height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

 //The Close Button 
.close {
  color: #fff;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  
}

.close:hover{
  color: #f44336;
  cursor: pointer;
}


.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}



.loginmodal-header {
  padding: 2px 16px;
  background-color: #333;
  color: white;
}

.loginmodal-header h4 {
	color: #fff;
	
}


.loginmodal-body {
  background-color: #fff;
  min-height: 226px;
  padding: 2px auto;
  /*  border: solid thin blue; */
   width: 100%;
}

.loginmodal-body span video{
  width: 70%;
  height: 500px;
  /* padding: 8px 12px; */
  margin: 6px auto; 
  float: left;
  border: solid thin green;  
	
}

.loginmodal-footer {
  padding: 2px 16px;
  background-color: #333;
  color: white;
  height: 90px;
  
}

.loginmodal-footer h3 {
	color: #fff;
	
}

.preview-desc{
   	
	border: solid thin red;
	height: 500px;
	min-width: 305px;
	float: left;
}

.author-dur{
    height: 100px;
    min-width: 50%;
    border: solid thin #ccc;
    float:left;	
	
}

#introVidrow.row {
	
	border: solid thin #ccc;
	width: 100%;
	margin: 0px auto;
}

.loginmodal-body h5{
	padding: 50px;	
}




#physics{
	/* border: solid thin green; */
	height: 100%;
	width: 100%;
	z-index: 5;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.2);
	left: 0;
	top: 0;
	overflow: auto;
	position: fixed;
	display: none;	
}

#it{
	/* border: solid thin green; */
	height: 100%;
	width: 100%;
	z-index: 5;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.2);
	left: 0;
	top: 0;
	overflow: auto;
	position: fixed;
	display: none;	
}



#maths{
	/* border: solid thin green; */
	height: 100%;
	width: 100%;
	z-index: 5;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.2);
	left: 0;
	top: 0;
	overflow: auto;
	position: fixed;
	display: none;	
}



#english{
	/* border: solid thin green; */
	height: 100%;
	width: 100%;
	z-index: 5;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.2);
	left: 0;
	top: 0;
	overflow: auto;
	position: fixed;
	display: none;	
}

#alenglish{
	/* border: solid thin green; */
	height: 100%;
	width: 100%;
	z-index: 5;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.2);
	left: 0;
	top: 0;
	overflow: auto;
	position: fixed;
	display: none;	
}


#capeEcon{
	/* border: solid thin green; */
	height: 100%;
	width: 100%;
	z-index: 5;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.2);
	left: 0;
	top: 0;
	overflow: auto;
	position: fixed;
	display: none;	
}


#capeLaw{
	/* border: solid thin green; */
	height: 100%;
	width: 100%;
	z-index: 5;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.2);
	left: 0;
	top: 0;
	overflow: auto;
	position: fixed;
	display: none;	
}


#alMaths{
	/* border: solid thin green; */
	height: 100%;
	width: 100%;
	z-index: 5;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.2);
	left: 0;
	top: 0;
	overflow: auto;
	position: fixed;
	display: none;	
}





#close{
	float: right;
	color: #666;
	padding-top: 0px;
	padding-right:5px;
	font-size: 50px;
	cursor: pointer;
}

#close:hover{
	color: red;
}

.showcontent{
	background-color: #E8E8E8;
	height: 91%;
	width: 60%;
	border: solid thin yellow;
	margin: auto;
	margin-top: 20px;
	left: 70px;	
}


@media screen and (max-width: 366px){
	.showcontent{
		max-height: 50%;
        width: 100%;
		margin-top: 0px;
		border: none;
	}
	video#videoPlayerB{
	width: 100%;	
    
	}
   
   span#closeB.closed{
    z-index: 1;
    position: absolute;
	right: 2px;
    top: 5px;
 
    }	
	
}	



@media screen and (min-width: 751px){
	.showcontent{		
		max-height: 98%;
        width: 100%;
		margin-top: 0px;
		border: none;
	}
	
    video#videoPlayerB{
	width: 100%;	
   }
 
 span#closeB.closed{
    z-index: 1;
    position: absolute;
	right: 2px;
    top: 5px;
 
    }	
	
}




.videospan{
	
	margin-top: 140px;
	border: solid thin red;
}



.videos{
	width: 100%;
	height: 92%;
	margin-top: -30px;
	margin-bottom: 8px;
	/* border: solid thin red; */
	
	
}
 
.signupsuccess{
	margin-top: 8px;
	background-color: #80ff80;
	border: solid thin #80ff80;
}

.form{
	padding-top: 15px;
	background-color: #80ff80;
	width: 100%;
	height: 110px;
	
}


 .notloggedin{
	/* background-color: #80ff80; 
	border: solid thin red;*/
	color: red;	
}
.notloggedin h5{
	color: red;
	padding-top: 10px;
}

#instructorTop{
	/*background-image: url(../images/learning.png);*/
                 background-image: url(https://chromestudy.s3.amazonaws.com/images/images/learning.png);                 
	min-height: 260px;
	width: 100%;
	margin: 0px auto;
	padding: 12px 40px;
    /*border: solid thin blue;*/
    text-align: center;
	/* background-image:url(./images/learning5.png); */
    background-repeat: no-repeat;
    background-size: cover;	
}

#instructorTop h1{
	width: 100%;
	margin: 0px auto;
	text-align: center;
	color: #663d00;
}


#instructorTop h4{
	 width: 50%;
	 margin: 40px auto 0px auto;
	 text-align: center;
	 color: #000;
 }




#instructorTop h3{
	 width: 50%;
	 margin: -80px auto 0px auto;
	 text-align: center;
	 color: #333;
 }



#formtop{
	min-height: 80px;
	background-color: f1f1f1;
	/* border: solid thin blue; */
    padding-top: 10px;
    width: 100%;
    margin: 0px auto;	
}

#discover{
	min-height: 180px;
	background-color: f1f1f1;
	border-bottom: solid thin #ccc;
    padding-top: 10px;
    width: 100%;
    margin: 0px auto;
	color: #804d00;
}

#potential{
	min-height: 184px;
	/* border: solid thin green; */
	padding: 6px auto;	
}


#potential.col-sm-4 img{
	
	/* border: solid thin yellow;  */	
	width: 40px;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

#potential.col-sm-4 h5{
	 width: 40%;
	 margin: 2px auto;
	 text-align: center;
 }



hr.formline{
	border-top: 3px solid #666;
	width: 10%;
	margin: 20px auto;
}


 
#formsection{
	margin: 0px auto;
}

#form{
	margin: 0px auto;
	background-color: #ccc;
}

 form#application_form{
	background-color: #ccc;
	padding:2px 10px;
}

.input{
	width: 100%;
	/* border: solid thin green; */
		
}

#input{
	width: 100%;
	/* border: solid thin green; */
}

#inputs{
	background-color: #666;
	width: 100%;
	/* border: solid thin blue; */
	height:50px;
	margin-top: 20px;
	margin-bottom: 10px;
}

 #success{
    width: 100%;
    height:	60px;
	margin-top: 4px;
	padding: 12px;
	background-color: #1aff1a;
 }
 
 
 
  form#payform2{
	
	width: 80%;
	border: solid thin f1f1f1;
	margin: 2px auto;
	padding: 4px 0px;
	
}




  



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=" We are an online educational resources platform, offering online training in CSEC, CAPE, and 11+ pre-secondary school subjects and other courses of studies for secondary, tertiary and professional development">
<meta name="keywords" content="Online study platform for cxc/csec,  cape, & 11 plus study">
<meta name="robots" content="">


<!--------------------------location-------------------------->
<meta name="geo.region" content="BB-C" />
<meta name="geo.placename" content="Rendezvous" />
<meta name="geo.position" content="13.08;-59.58" />
<meta name="ICBM" content="13.08, -59.58" />

<!--------------------------end location------------------->




   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>

        <!-- Popper JS -->
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
   
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">




 
         <link rel="icon"  type="image/x-icon" href="https://chromestudy.s3.amazonaws.com/images/csFavicon2.png" sizes="20x20">
  
  
  
  
  
  
  
  <!--script src='https://kit.fontawesome.com/a076d05399.js'> </script-->
  <link rel="stylesheet" type="text/css" href="stylesheets/header.css">   
  <link rel="stylesheet" type="text/css" href="stylesheets/loggedincourses.css">  
  <link rel="stylesheet" type="text/css" href="stylesheets/index-lg.css">   
  <link rel="stylesheet" type="text/css" href="stylesheets/index.css">    
  <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css"> 
  <link rel="stylesheet" type="text/css" href="stylesheets/subscriber-logged-in.css">    
  <link rel="stylesheet" type="text/css" href="stylesheets/index-xs.css">   
  <link rel="stylesheet" type="text/css" href="stylesheets/intro-videos.css">  
  <link rel="stylesheet" type="text/css" href="stylesheets/courses-offered.css">
  <link rel="stylesheet" type="text/css" href="stylesheets/support-contact-us.css"> 
  <link rel="stylesheet" type="text/css" href="stylesheets/site-feedback.css">
  <link rel="stylesheet" type="text/css" href="stylesheets/about-us.css">  
  <link rel="stylesheet" type="text/css" href="stylesheets/careers.css">  
  <link rel="stylesheet" type="text/css" href="stylesheets/payment.css"> 
  <link rel="stylesheet" type="text/css" href="stylesheets/my-account.css">  
  <link rel="stylesheet" type="text/css" href="stylesheets/profile.css">  
  <link rel="stylesheet" type="text/css" href="stylesheets/delete_account.css">  
  <link rel="stylesheet" type="text/css" href="stylesheets/close-submit.css">  
  <link rel="stylesheet" type="text/css" href="stylesheets/subscribers-main.css"> 
  <link rel="stylesheet" type="text/css" href="stylesheets/footerlinks.css"> 
  <link rel="stylesheet" type="text/css" href="stylesheets/footer.css">    
  <link rel="stylesheet" type="text/css" href="stylesheets/stylesheetXS-MD.css"> 
  <link rel="stylesheet" type="text/css" href="stylesheets/course_styles.css">  
  <link rel="stylesheet" type="text/css" href="stylesheets/renewCourse.css">
  <link rel="stylesheet" type="text/css" href="stylesheets/stylesheetXs-MD.css">
  
    
  <title>Chrome Study Home study</title>

<style>
a{
	color: #f1f1f1;
}

li #commonentrance{
  /* border: solid thin green; */
	height: 290px;
	background-color: #333;
	width: 260px;
	margin-top: -4px;
	
    	
}



#ul-iconCE{
	border:solid 1px #ccc;
	height: 45px;
	width: 48px; 
	float: left;
    margin-bottom:0px; 
		
	background-image: url(../images/common-entrance-icon.png);
	
	
	background-image: url(./images/common-entrance-icon.png);
	
	
	
    background-size:cover;
    background-repeat: no-repeat; 
	background-position: center;
    border-radius: 5px;	 	
}

#ul-iconCXC{
	border:solid 1px #ccc;
	height: 45px;
	width: 48px; 
	float: left;
    margin: 20px 2px;	
    background-image: url(https://chromestudy.s3.amazonaws.com/images/images/cxc-icon.png);	
    background-image: url(https://chromestudy.s3.amazonaws.com/images/images/cxc-icon.png);	
    background-size:cover;
    background-repeat: no-repeat;
    border-radius: 5px;	  	
}

#ul-iconGCE{
	border:solid 1px #ccc;
	height: 45px;
	width: 48px; 
	float: left;
    margin-bottom:0px;
	background-color: #f1f1f1;
	
    background-image: url(../images/gce-icon.png);
	
    background-image: url(./images/gce-icon.png);
	
    background-size:block;
    background-repeat: no-repeat; 
	background-position: center;
    border-radius: 5px;	
}

#ul-iconAL{
	border:solid 1px #ccc;
	height: 45px;
	width: 48px; 
	float: left;
    margin-bottom:0px;	
    background-image: url(../images/alevel-icon.png);	
    background-image: url(./images/alevel-icon.png);	
    background-size:cover;
    background-repeat: no-repeat; 
	background-position: center; 
    border-radius: 5px;		
}

#ul-iconCA{
	border:solid 1px #ccc;
	height: 45px;
	width: 48px; 
	float: left;
    margin-bottom:0px; 
    margin-bottom:0px; 	
    background-image: url(../images/cape-icon.png);
	
    background-image: url(./images/cape-icon.png);	
    background-size:cover;
    background-repeat: no-repeat; 
	background-position: center; 
    border-radius: 5px;	
}




li #cxc{
	 width: 450px;
	 color: white; 
	 margin-top: 63px;
	 height: 479px;	
	 
}

li #gce{ 
  width: 450px; 
  color: white;
  margin-top: 13px;
  height: 479px;
  /* border-left: solid thin #ccc; */
}

 li #alevels{
	width: 450px;
	color: white;
	margin-top: -37px;
	height: 479px;
	/* border: solid thin blue */
}

li #cape{
width: 450px; 
color: white;
height: 480px;
margin-top: -87px;
/* border-right: solid thin #ccc; */
 
}
 
.border-bottom{
	border-bottom: solid 1px f1f1f1;
}

.dropSubMenu{
	//border: solid thin blue;
	height: 110px;
}

#LogInSignUp{
	color: #ccc;
	font-size: 16px;
	position: absolute; 
	left: 4px;
	top: 6px;
	padding: 4px;
}



#Login{
	color: #ccc;
    font-size: 16px;
	position: absolute;
	top: 45px; 
	padding: 4px;
	//border: solid thin blue;
}

#signup{
 color: #ccc;
 font-size: 16px; 
 padding: 0px;
 margin-left: -232px;
 }


#arrow{
padding: 6px 2px;

}

.sidenav{
	background-color: rgba(0, 41, 102, 0.9);
	
}

#xsm{
	margin-top: 35px;
	//border: solid thin white;
}


#profileId{
color: #f1f1f1;
}	



body.vidCourseContainer {
    width: 100%;
    height: 100%;
    border: solid thin red;
 }


#searchBarButton{
   height: 46px;
   width: 60px; 
   margin-left: 0px;
   margin-top: 5px;
   //border: none;
   border-top: solid thin #0d5abd;
   border-bottom: solid thin #0d5abd;
   border-right: solid thin #0d5abd;
   border-top-right-radius: 8px;   
   border-bottom-right-radius: 8px; 
   background-color: white;
   	
}


#topSearchBar{
	height: 44px;
	display: block;
	float: left;
	margin-top: 30px;
	width: 72%;
	/*border: solid thin yellow;*/
	border-radius: 0px;
	margin: 6px -3px;
	border-bottom-left-radius: 7px;
	border-top-left-radius: 7px;
}



</style>

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '646429309253101');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=646429309253101&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->



</head>

<body>
<!---**************************88START LARGE AND MEDIUM SECTIONS**********************-------->
<div  class="d-none d-lg-block border-bottom" >

<div class="row" id="header">




<a style="cursor: pointer" href="index.php"> 
<div class="col-sm-2" id="logo" style=" min-width: 200px">
 <img src="https://chromestudy.s3.amazonaws.com/images/images/chromeLogoTransparent_2.png" alt="chromestudy Logo">
</div><!-----end logo--------->
</a>
<div class="col-sm-2" id="library">

<div class="dropdown">
  
  
  
  
  
  
  
  <div id="drop" style="">
 <ul class="library">
  
    
  
  
    
  
  
  
  
  <li class="subject-list" style="width: 110px; height: 45px">LIBRARY<i class="down"></i>

<!----- start library drop down menu ---->



<ul id="commonentrance">
     
     <li><div id="ul-iconCXC" ></div><span id="cxcFont" style=" margin: 19px 0px 2px 0px; position: absolute ; color: #000">&nbsp; CXC</span>
	      
		  
		<ul id="cxc">	   
		  <li class="subject-list"> 
			<div id="left" style="border-right: dashed thin #f2f2f2; width: 70%; float: left">  
             
			 <span ><a style="line-height: 2px; color: #000" href="cxc-english-literature.php"> English Literature</a></span>	
                  <br>			 
			    <span ><a style="color: #000" href="cxc-mathematics.php"> Mathematics</a></span>	
                   <br>				
			     <span ><a style="color: #000" href="cxc-principles-of-business.php"> P .O. B </a>  </span>			 
			  </div>                                                                      
			  <div id="right" style=" width: 80%; float: left; margin: -151px 1px 1px 190px">             
			     <span><a  style="color: #000" href="cxc-biology.php">Human & Social Biology</a>        </span>																							    
			          <br>
				   <span><a style="color: #000" href="cxc-french.php">  French</a>         </span>																							   
			           <br>
				  <span><a style="color: #000" href="cxc-spanish.php">Spanish </a>        </span>
			  </div>
              
			  
			  
			  
			  
			  
			  
			  <div id="right" style=" width: 60%; float: left; margin: -151px 1px 1px 390px; border-left: dashed thin #ccc; height: 150px; padding-left: 10px">             
			     <span><a  style="color: #000" href="cxc-geography.php">Geography </a>        </span>																							    
			       <br>				 
			      <span><a  style="color: #000" href="cxc-english.php">English </a> </span>     
				   				  
			  </div>  
			  
			  
			  
			  
			  
			  
			  
			  
			  
			  
			  
			  

			  
		  </li>	      
		</ul>	 
		  
		  
	 
     
    <!---- end drop down library menu ------>
  </div>
 </div>
</div><!-------end library------->









<!----------------- start #searchBar-------------->

<div class="col-sm-2" style=" min-width: 25%; /* border: solid thin green ; */  margin-left: 10px; margin-top: 20px" id="searchBar">
<form action="search.php" method="post" >
<input id="topSearchBar" type="text" placeholder="Search the site ..." name="search" >
<button id="searchBarButton" type="submit"><i class="fa fa-search" style="font-size:24px; color: #666"></i></button> 
</form> 
</div><!-----end- #searchBar-->

<div  id="connect" style="max-width: 130px; /* border: solid thin white */" ><!----<input type="button" class="loginButton" value="Log In" -->


<a href = 'login.php';'  class='loginButton' style='text-decoration: none'>Log In</a >


<div id="id01" class="modal">
  




  
  <form class="modal-content animate" action="login.php" method="post">
      <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="img_avatar2.png" alt="" class="avatar">
    </div>

    <div class="container">
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="username" require>
	  
	  

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="password" require>
        
      <button id="dropLogin" type="submit">Login</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
      </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>


</div><!-----------------end connect Login div---------------->



<div class="col-sm-2" id="signUp"  style="max-width: 100px; border: /* solid thin red */">

  
  
  <a href = 'sign-up.php';'  class='signupButton' >SignUp</a >  
 



<script>
// Get the modal
var modalB = document.getElementById('id01B');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modalB) {
    modalB.style.display = "none";
  }
}
</script>

  
  
  
      </div><!------------------end signUp-------------------->




<div class="col-sm-2" id="blank" style="/*  border: solid thin white ; */  height: 45px; max-width: 52px; margin: 25px 0px 25px 160px; padding: 8px 2px">
<img src="https://chromestudy.s3.amazonaws.com/images/images/barbados_flag.png" height="25" alt="Barbados Flag"> 

</div>


</div><!----- end .header -------->

</div><!------ end medium and large head display -------->










<!--**********************************************************************************************************************--->
<!--**********************************************************************************************************************--->










<div class="d-xs-block d-lg-none"><!--**************START  SMALL AND EXTRA SMALL SECTION************************------>







<div class="row" id="header">



<!------------------------------Start mini hamburger dropdown  menu------------------------------------>

<div id="mySidenav" class="sidenav" >
<div class="row">
 
  
 <div class="col-sm-12 dropSubMenu" id="dropSubMen">
  <span  id="Login"><a href="login.php"   id="arrow">Login <i class="arrow right"></i></a></span>
  <span  id="signup"><a href="sign-up.php" id="arrow">Sign Up <i class="arrow right"></i></a></span>
 
 
 
   <span  style="color: #ccc; font-size: 16px">  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></span>
 </div>   
   
  
  
  <div class=" col-sm-12" id="dropSubMenu">
  
  
  
  <h5 style="float:left" onclick="hideIT()">Course Library  <i class="down"></i></h5>

   
  <ul id="xsm">  
  
        
	    <li><a href="#"> </a></li>
	    <li><a href="cxc-french.php">cxc French </a></li>
	    <li><a href="cxc-mathematics.php">cxc Mathematics </a></li>
	    <li><a href="cxc-spanish.php">cxc Spanish </a></li>
	    <li><a href="cxc-english-literature.php">cxc English Literature </a></li>	    
	    <li><a href="cxc-geography.php">cxc Geography </a></li>
	    <li><a href="cxc-biology.php">cxc Human & Social Biology</a></li>	  
	    	  
	  
  </ul>
  
  
  


   
   
  
  </div>
  
 
  
  
</div>

  <script>
  function hideIT(){
  var x = document.getElementById("xsm");
  if(x.style.display === "block") {
	 x.style.display = "none"; 
  } else {
	x.style.display = "block";  
  }
} 
  
  </script>

</div><!-------end row------>
  
  


<span style="font-size:45px;cursor:pointer; color: #fff; margin: 12px;" onclick="openNav2()">&#9776;</span>



<script>
function openNav2() {
  document.getElementById("mySidenav").style.width = "380px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>
   
   


<!-------------------------------------------------end hamburger menu----------------------------------------->

<div class="row" id="xm-smSignUp" >
<div class=" miniLogForm" style=" margin: 10px auto; width: 90%; min-height: 50%; padding: 10px 40px; border: solid thin white">


<div class=" row">
<div class="col-sm-12" id="create" >Create an account<span  onclick="document.getElementById('xm-smSignUp').style.display='none'" ; class="closeOut" style="border: solid thin #fff;">&times;</span></div>




<button class="accordion"  style="padding: 0px; background-color: #03C; max-width: 100%;  margin: 0px auto;  cursor: pointer; display: block; " type="submit"><span style=" color: #fff; padding: px; font-size: 24px; margin-left: px"><a href="#" class="fa fa-facebook" style=" background-color: #03C; border: none"></a> </span> <span style=" padding:8px 10px 20px 10px; color: #fff; border: ; max-width: ">Continue With Facebook</span></button>





</div>
<p style=" display: block; margin: 12px auto; width: 5%">or</p>
 
 
 
 <button class="accordion"><span class="glyphicon glyphicon-envelope">Sign up with email</button>
 <div class="panel">
 
<form method="post" action=" login.php">
<label for="uname"><b>Full name</b></label>
<input style="margin 0px auto" type="text" placeholder="Enter Full Name" name="username" required >
<label for="email"><b>email</b></label>
<input style="margin 0px auto" type="text" placeholder="Enter Email" name="email" required >
<label for="pswd"><b>Password</b></label>
<input style="margin 0px " name="password" type="Password" maxlength="55" placeholder="Enter Password" required >
<button style=" margin: 1px auto; background-color: #4CAF50;  color: white; padding: 14px 20px; margin: 8px 0;   cursor: pointer;
  width: 100%;  " type="submit">Sign Up</button>
  <label>
  <input style="margin-right: 6px" type="checkbox" checked="checked" name="remember">Remember me?
  </label>
</form>

</div><!--------------end .panel----------------------->
</div>
  
  </div><!----------------end row-------------------------->



<script>
const acc = document.getElementsByClassName("accordion");
const i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    const panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>





 <div  id="logo-XS-MD" >
    <img src="https://chromestudy.s3.amazonaws.com/images/images/chromeLogoTransparent_2.png"  alt="chromestudy Logo">
 </div>





<div id="searchBar-XS-MD">
<form id="miniSearch" action=" search.php" method="post">
 <input style="  width: 155px;
  max-height: 20 px;
  
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url(./images/magnifying_glass.png);
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  background-size: 20px;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;"  id=" searchBarSmall  " type="text" name="search" placeholder="Searchs.." required> 
</form>



</div>











</div><!-----end .header----->







</div><!-----------------------------end small and extra small section-------------------------------->

<noscript>



         
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #f3f3f3;
  border-bottom: 16px solid #ccc;
  width: 120px;
  height: 120px;
  margin: 15% 45%;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader-container{
	 //border: solid thin red;
	 height: 1600px;
	 width: 100%;
	 position: absolute;
	 z-index: 2;
	 top:0px;
	 background-color: rgba(255, 99, 71, 0.2);	 
}

</style>

<div class="loader-container">


     <div class="loader"></div>



</div>




</noscript>



                                                                                                        
</div><!-------end header2---------------->  

<div class="row" style="width: 100%; margin: 0px auto">
<div class="class-sm-12" id="instructorTop">




<h1>Become an Instructor On ChromeStudy.com</h1>
  <h4>Share Your Experience and Skills With The World </h3>

</div>
</div>


<div class="row" id="formtop">
<div class="col-lg-12">
    <h2>Discover your potential</h2>
          <hr class="formline">
</div>
</div>

<div class="row" id="discover">
<div class="col-sm-4" id="potential">
 <img src="./images/money.png" alt="earn money">
<h5>Earn money</h5>
<p>Take advantage of our active community of instructors to help you through your course creation process.
</p>
</div>

<div class="col-sm-4" id="potential">
 <img src="./images/inspire-icon.png" alt="inspire students">
<h5>Inspire Students</h5>
<p>Help people learn new skills, advance their careers, and explore their hobbies by sharing your knowledge.
</p>
</div>

<div class="col-sm-4" id="potential">
  <img src="./images/community.png" height="60" alt="join our community">
<h5>Join our community</h5>
<p>Earn money every time a student purchases or subscribe your course. Get paid monthly through the method your choice.
</p>
</div>

</div>




<div class="row" id="formsection">
<div class="col-lg-7">
<br>
<p>Apply to join the passionate instructors who share their expertise and knowledge with the world. You'll be able to pass your knowledge and collaborate with editors so that your content is presented in the best possible light</p>
<h5>About Working with Us</h5>
<p>We are a team of content creators with a a passion for creating and sharing economic opportunities for our workforce and providing affordable learning opportunities  for thos who want to further them selves educationally and professionally.</p>

<h5>Apply Now!</h5>
<p>If you're interested in becoming an instructor, please apply on the Instructor Application form. After you submit the form, we will reach out to you if there's a good fit. </p>

</div>
<div class="col-lg-5" id="form">

  <form action="instructor.php" name="form_instruct" id="application_form" method="post" >
  
      
    <h2>Instructor Application</h2>
	
  
    <span id="fullnamehint" class="hint"></span>
 <input type="text" name="fullname" id="input" value="" placeholder="Enter Your Full Name"  >
   </br>
        
 <input type="text" name="email" id="input" value="" placeholder="Enter Your Email" >
   </br>
 <span id="messagehint" class="hint"></span>
 <input type="text" name="facebook" id="input" value="" placeholder="Enter Your Telephone" >
 
    
   
 <h5> Tell Us About The Course or Courses You Are Offering </h5>
  <textarea name="message" class="input" value="" placeholder="" cols="70" rows="10"></textarea>
 
  
 <h5> Give Us further Details about Your Experience </h5>
  <textarea name="details" class="input" value="" placeholder="" cols="70" rows="10"></textarea>
 </br>
 <input type="submit" name="submit" id="inputs">
  </form>
   <script>
  document.form_instruct.fullname.onfocus=function(){
  document.getElementById('fullnamehint').innerHTML = "(Last Name first, First Name last )";
} 

  document.form_instruct.fullname.onblur=function(){
  document.getElementById('fullnamehint').innerHTML = "";
} 
 </script>
  
  
  
  <script>
  document.form_instruct.facebook.onfocus=function(){
  document.getElementById('messagehint').innerHTML = "+1(xxx) xxx-xxxx (Please include your area code )";
} 

  document.form_instruct.facebook.onblur=function(){
  document.getElementById('messagehint').innerHTML = "";
} 
 </script>








 </div>
</div>

<style>

</style>

<div class=" d-none d-md-block">
<div class="row" id="footer" >


<div class="col mx-1" id="subFooter1" ><h5>About Us</h5>
<ul>
<li><a href="about-us.php">About Us</a></li>
<li><a href="careers.php">Careers</a></li>
<li><a href="https://blog.chromestudy.com/">Blog</a></li>
</ul>
</div><!------------end col-sm-4 subFooter------------->

<div class="col mx-1" id="subFooter1" ><h5>Community</h5>

<ul>
<li><a href="plans.php">Our Plans</a></li>
<li><a href="instructor.php">Become an Instructor</a></li>
<li><a href="courses-offered.php">Courses Offered</a></li>
</ul>


</div><!------------end subFooter------------->
<div class="col mx-1" id="subFooter1"  ><h5>Support</h5>
<ul>
<li><a href="support.php">Customer Support</a></li>
<li><a href="contact-us.php">Contact Us</a></li> 
<li><a href="site-feedback.php">Site Feedback</a></li>

</ul>

</div><!------------end subFooter------------->
<div class="col mx-1" id="subFooter1" style="text-align: center"><h5 style="text-align: center">Connect</h5>
<div id="subFooterContainer" style="">
<a href="https://www.facebook.com/chromestudy/" class="fa fa-facebook"  ></a>
<a href="https://twitter.com/chromestudy" class="fa fa-twitter" ></a>
<a href="https://www.instagram.com/chromestudy" class="fa fa-instagram"></a>
</div><!----------end subFooterContainer------------------->
</div><!------------end subFooter------------->


<div class="col mx-1" id="subFooter1" >

<h5 id="secure" style="margin-bottom: 20px; text-align: left">Secure Payment</h5>
 <!--<span id="cards" style="border: solid thin green">-->
 <ul style="width: 99%; margin: 0px auto; padding:2px 24">
	<li style="padding-bottom: 8px;  width: 99%; margin: 0px auto"><img style="border: solid thin #0172a7" src="https://chromestudy.s3.amazonaws.com/images/images/visaSafe-masterCard-discover.png" alt="Visa and Mastercard logo" height="50"></li>
	 
	
 </ul>
 <!--</span>-->

</div><!------------end col-sm-4 subFooter------------->







</div><!-----------end footer--------------->
<div class="row" id="footer2" >
<div class="col-sm-2" id="subFooter2" ><h6 style="color: #f1f1f1 ">Chromestudy&copy;  2023</h6> </div><!---------end #subFooter2---------->
<div class="col-sm-2" id="subFooter2" ><h6><a href="privacy-policy.php">Privacy Policy</a></h6></div><!---------end subFooter2---------->
<div class="col-sm-2" id="subFooter2" ><h6><a href="cookie-policy.php">Cookie Policy</a></h6></div><!---------end subFooter2---------->
<div class="col-sm-2" id="subFooter2" ><h6><a href="web-use-policy.php">Web Use Policy</a> </h6></div><!---------end subFooter2---------->
<div class="col-sm-1" id="subFooter2" style=" padding-left: 0px; padding-top: 18px" "><a href="terms.php">Terms of Use</a></div><!---------end subFooter2---------->
<div class="col-sm-1" id="subFooter2" style="  padding-left: 0px; padding-top: 18px"><a href="terms.php#terms">Refund Policy</a></div><!---------end subFooter2---------->
<div class="col-sm-1" id="subFooter2" style="  padding-top: 18px"><a href="public/staff/educators/login.php"> Educators</a></div><!---------end subFooter2---------->
<div class="col-sm-1" id="subFooter2" style="  padding-top: 18px"><a href="public/staff/login.php"> Admin</a></div><!---------end subFooter2---------->
</div><!------------end  .row footer2---------------->

<!--<div class="row" id="FOOTER2">


	<div class="col-sm-12" id="subFoot">
	   <p>site hosted by ipage.com .&nbsp; Customer service: 1 (877) 472-4399  </p>
	  
	</div> 
</div>---->

</div><!------------------end MEDIUM AND LARGE FOOTER------------------>

<!----------------****************** START  XS AND SM FOOTER********************************--------->

<div class=" d-xs-block d-md-none">



<div class="row" id="footer2" style=" height: 70px;  width:100%;  background-color: #333; margin: 0 auto; /*border: solid thin yellow;*/">
<div class="col-sm-5" id="subFooter2" /*style="border: solid thin red; min-width: %"*/><h6>Chromestudy&copy;   2023</h6></div>


<div class="col-sm-7" id="subFooter2" style="border: /*solid thin red; min-width: %"*/>
 <a href="https://www.facebook.com/chromestudy/" class="fa fa-facebook" style=" font-size: 20px;  color: white; background-color: #0d5abd;  width: 35px;  padding: 8px 10px;"></a>
<a href="https://twitter.com/chromestudy" class="fa fa-twitter" style="font-size: 20px;  color: white;  width: 35px;  padding: 8px 10px;"></a>
<a href="https://www.instagram.com/chromestudy" class="fa fa-instagram" style="font-size: 20px;  color: white;  width: 35px;  padding: 8px 10px;"></ ></a></div><!---------end subFooter2---------->
</div><!------------end  .row footer2---------------->


</div><!---------------------end XS and Sm section------------------->




</body>
</html>