@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Raleway:500,700,900);
@import url(https://fonts.googleapis.com/css?family=Material+Icons);




	body {
		background-color:rgba(221,221,221,1.00);
		font-family: 'Raleway', sans-serif;
		font-weight:500;
		color: rgba(51,51,51,1.00);
		font-size: 11.5pt;
		line-height: 2em;
	}

.hctr {
margin-top:0;
}
	
.btnstart {
width:90%;	
padding:20px 0 ;
height:auto;
font-size:24px;
font-weight:700;
}
	
.main-wrapper {
border-radius:10px;
background-color:#fff;
width:100%;
max-width:900px;
padding:20px;
margin:10px auto;
position:relative;
font-size:18px;
}
	
.container-numbers {
margin:50px auto;	
width:90%;	
}

strong {
color:#000;	
}

h1-old {
	font-family: 'Open Sans Condensed', sans-serif;
margin:20px 0;	
background: -webkit-linear-gradient(#333, #999);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding:5px;
}

h1 {
text-align:center;
font-weight:900;
font-size:3em;	
}


a:hover {
color:#069;
	
}

p h4 {
font-family: 'Open Sans Condensed', sans-serif;	
}

p {
font-size:1.5rem;
text-align:justify;
font-weight:700;
}

p .bold {
color:#222;	
}

nav {
background-color:rgba(24,24,32,1);
position:relative;
z-index:999;
top:0;
height:40px !important;
line-height:40px !important;
}

.leadphrase {
width:90%;	
text-align:left;
}

.container {
}

.newlogo {
width:100%;
font-size:16px;	
text-align:center;
}

.toplogo img {
width:200px;
height:auto;
position:absolute;	
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}

.toplogo:hover {
	opacity:0.7;
}

#logo-container {
font-size:16px;	
}

.section {
position:relative;
min-height:80vh;
}

.footer{
font-weight:400;
font-size:0.8em;
line-height:1.5em;
position:relative;
padding:5px;
text-align:center;
border-top:1px solid #333;
width:100%; 
height:60px;
color:#fff;
background-color:#000;
display:flex;
align-items:center;
justify-content:center;
}



select {
position:relative;
background-color:#ddd;
}

#amt, #convert div {
position:relative;
font-size:32px;	
}

#convert div {
margin-top:20px;
text-transform:uppercase;
}

#inp_convert {
font-size:32px;
}

.contr{
	position:relative;
margin-top:10px;
min-height:250px;
}
.butbox{
position:relative;
height:20px;
}

.input-field {
margin-top:5px;
	
}
.reg {
font-size:9px;
position:relative;
top:-8px;	
}


.levels {
margin: 0 20px;
border-bottom:solid thin #ccc;	
}

.lvl {
position:relative;
padding:10px 0;
border:solid thin #ddd;	
 display: flex;
}

.lvl:hover {
cursor:pointer;
color:#222;
background-color:#ccc;
transition: 0.2s ease-in background-color;
		
}

.lv_num {
position:relative;
display:inline-block;	
height:100%;
top:0;
padding:0 5px;


}

.n2w {
posiiton:relative;
display:inline-block;
  flex: 1;
  padding:0 5px;
}

.amt_lev1,.amt_lev2,.amt_lev3 {
position:relative;
}

.stage {
position:absolute;	
}




  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    height: 60px;
    line-height: 60px;
  }
  
nav a.sidenav-trigger:hover, #logo-container:hover {
opacity:0.5;
transition:0.3s all ease-in-out;	
}


  nav .brand-logo {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }


.clnav {
color:#444;
text-align:center;
background-color:#ccc;	
cursor:pointer;
}

.clnav:hover {
	opacity:0.7;
}	

.sidenav li {
position:relative;
min-height:40px;
overflow:hidden;	
}

.sidenav li a {
line-height:30px;
border-bottom:solid thin #ddd;
position:relative;
padding: 10px 10px; 
display:block;
min-height:40px;
left:0;
transition:0.3s left ease-in-out;
}

.sidenav li a em{
position:absolute;
top:12px;
margin-right:20px;
}

.sidenav li a span{

margin-left:30px;
}

.sidenav li a:hover {
background-color:#ddd;
left:10px;
transition:0.3s left ease-in-out;
border-radius:4px;
}

.hd{
font-size:26px;
color:#000;
margin-bottom:10px;	
}

.toplinks {
color:#999;
font-size:1em;
line-height:1em;
padding:0;
position:relative;
display:flex;
align-items:center;
justify-content:flex-end;
}



/*MAIN PANEL*/ 

.cgrid {
position:relative;
border:solid thin #ccc;
margin:12px 2px;
padding-bottom:10px;
border-radius:10px;
min-height:400px;
background-color:rgba(22,25,32,1.0);
cursor:pointer;
 transition: all 250ms ease-in-out;
}

.cgrid:hover {
opacity:0.5;
 transform: scale(1.05);
 transition: all 250ms ease-in-out;
}

.cgrid .ctitle {
	font-family: 'Open Sans Condensed', sans-serif;
position:relative;
color:#fff;
font-size:1.8em;
text-align:center;	
padding:15px 5px;
border-radius:10px 10px 0 0;
}

.cgrid .divimg, .cgrid .divimg2 {
position:relative;
}

.cgrid .divimg:after,.cgrid .divimg2:after {
position:absolute;
content:'';
bottom:0;
height:100%;
width:100%;
}

.cgrid .divimg:after {
background-image: linear-gradient(to top, rgba(22,25,32,1.0) 5%,transparent);
}
.cgrid .divimg2:after {
background-image: linear-gradient(to top, rgba(22,25,32,1.0) 5%,transparent);
}

.cgrid img {
width:100%;
height:auto;
display:block;
}

.cgrid .cinfo {
color:#fff;
text-align:center;
padding: 0 30px;	
position:absolute;
bottom:0;
margin-bottom:80px;
width:100%;

}

.cgrid .cinfo .tit{
font-size:1.5em;
line-height:1.2em;
margin-bottom:15px;
}

.cgrid .cinfo .cbod {
padding:0 ;
font-size:1.0em;	
}

.minlevel {
	font-family: 'Open Sans Condensed', sans-serif;
text-align:center;
background-color:rgba(243,101,35,1.0);
color:#fff;
position:absolute;
bottom:0;
left:50%;
height:40px;
line-height:40px;
transform:translateX(-50%);
margin-bottom:20px;
padding:0 10px;
border-radius:5px;
font-size:1.5em;
width:75%;
}

.sublock {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:0.7;
border-radius:10px;	
line-height:12px;
font-size:12px;
padding:4px;
color:#fff;
display:none;
}

.sublock i {
position:relative;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
font-size:96px;	
}

.lockedout {
position:relative;	
display:inline-block;

}

.lockedout i{
font-size:0.8em;	
position:absolute;
top:5px;
left:5px;
}

.ieltstitle {
text-align:center;
font-size:2em;
font-weight:700;
margin:20px;	
}

.butmarg {
border:solid thin #ccc;	
border-radius:5px;
background-color:#ddd;
margin-bottom:40px;
}

.butmarg div {
margin:10px 0;

}

.username {
font-size:10px;
line-height:10px;
position:relative;
top:-10px;
text-align:center;
color:#aaa;
}

#blocker {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
opacity:0.5;
z-index:9999;
display:none;
background-image:url(../img/spinner.gif);
    background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.heinfo {
color:#444;
font-size:1.3em;
margin:15px 0;	
text-align:center;
}



#pages i {
	font-style:normal;
border:solid thin #000;	
background-color:#fff;
color:#000;
position:relative;
padding:0 4px;
border-radius:3px;

}

#memapp {
cursor:pointer;
color:darkblue;	
}

#memapp:hover {
opacity:0.7;	
}


.panhead {
display:flex;
}

.panhead div {
display:flex;
align-items: center;
justify-content: center;
text-align:center;	
}

.panhead div h1 {
text-align:center;	

}
.panhead img {
width:100%;
height:auto;
border-radius:5px;
}


.brand-logo:after{
/*content:"HOPPLER ENGLISH";	*/
}

.nav {
width:100%;
background-color:rgba(24,24,32,1);
position:relative;
z-index:999;
top:0;
left:0;
height:40px !important;
}

.hbar {

text-align:center;	
position:relative;
display:flex;
height:100%;
width:100%;
box-sizing:border-box;
}

.hbar div, .hbar a {
background-color:rgba(24,24,32,1);
border:solid thin #444;	
display:flex;
justify-content:center;
align-items:center;
flex:1;
height:100%;
width:100%;
}



.hbar a:hover {
background-color:#444;
cursor:pointer;
transition: all 250ms ease-in-out;	
}

.hbar i {
font-size:24px;	
}


.hbar1 img {
width:20px;
height:auto;
position:absolute !important;
top:50%;
transform:translateY(-50%);
}

.hbar img {
height:100%;
width:auto;
}

.backbar {
text-align:center;	
margin-top:5px;
position:relative;
}

.backbar:hover {
cursor:pointer;
opacity:0.7;	
}

.cfmmsg {
display:none;	
}

.dlogo {
position:relative;
left:0;
top:0;
height:100%;
}

.dlogo img {
height:100%;
width:auto;	
}

.hlogo {
cursor:pointer;
position:absolute;
text-align:center;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
line-height:0px;
}

.hlogo img {
height:30px;
width:auto;
}

.hlogo:hover {
opacity:0.7;
transition: 0.5s all ease-in-out;
}

.modal {
border-radius:5px;	
border:solid thin gold;
}


.modal-content p {
text-align:center;	
}

.modal-content div {
font-size:14px;
color:#222;	
text-align:center;

}

.ico-fix {
position:relative;
top:5px;	
}
 
 
 /*CHAT CSS */
 #chatframe {
z-index:99999;
position:fixed;
top:-1000px;
width:300px;
height:440px;
left: 50%;
transform: translateX(-50%);
background-color:transparent;
border-radius: 0.4em; 
border:0px;
margin:0 auto;
min-width:300px;
}

.iconsbar {
position:relative;	
}

.blink_me {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#mod_online{
position:relative;
font-size:0.9em;
top:2px;
margin-left:3px;
color:#fff;
}



.col-off{
color:#fff;	
}

.col-on{
	color:green;
	
}

.col-on::after{
content:'';
position:absolute;
font-size:0.7em;
bottom:0;
left:5px;
width:100px;
}

.newmsg{
position:relative;
 left:0;
 color:#FFE250; 
 margin-left:5px; 
 top:3px;   	
}

#mod_online:hover, .newmsg:hover {
opacity:0.7;
cursor:pointer;	
}

.icotbar {
position:absolute;
line-height:0.1em;
text-align:right;
right:0;
top:8px;
}

#languagebar {
position:relative;
display:inline-block;
top:7px;
cursor:pointer;


}

#languagebar span {
	text-transform:uppercase;
	position:absolute;
	font-size:9px;
	top:-10px;
	left:10px;
color:#ccc;
}

#languagebar select {
position:absolute;	
border: solid thin #ccc;
display:in-line;
height:40px;
width:auto;
top:20px;
left:-30px;
font-size:14px;
background-color:#fff;
color:#666;
margin-left:5px;
padding: 0px 2px 2px 0;
}

#languagebar i {
position:relative;	
color:#ccc;
font-size:1.1em;
top:-3px;
}

.icobr {
background: -webkit-linear-gradient(green, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;	
}

.icoen {
background: -webkit-linear-gradient(blue, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;	
}

.suggestionbox {
position:relative;
display:inline-block;
text-align:center;
border-radius:3px;
padding:3px;
background-color:#444;
}

.suggestionbox:hover {
opacity:0.5;
cursor:pointer;
}

.sbox {
position:fixed;
width:95%;
max-width:500px;
height:auto;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
background-color:#222;	
border:solid thin #ccc;
border-radius:5px;
z-index:99999;
text-align:center;
padding:25px;
display:none;
}

.sbox textarea {
width:100%;	
resize:vertical;
font-size:1.0em;
border:solid thin #999;
padding:15px;
height:100px;
background-color:#fff;	

}

.sbox button {
margin:20px 0 2px 0;	
width:100px;
}

#btn_close {
display:none;	
}

.sbox textarea::placeholder {
color:#999;	
}

.sbox #sboxmsg {
font-size:1.0em;	
line-height:1.2em;
}

.subtit {
font-family: 'Open Sans Condensed', sans-serif;
font-size:1.5em;	
color:green;
margin-top:30px;
border-bottom: solid thin #666;
}

.nav2 {
position:relative;	
margin:40px 0;
}


.nav2 li {
text-align:left;
display:flex;
background-color:#fff;	
color:#222;
border-radius:5px;
margin:10px auto;
position:relative;
min-height:100px;
border:solid thin #ccc;
font-size:1.5em;
width:100%;
}

.nav2 li:hover {
cursor:pointer;
color:#fff;
transition: all ease-in-out 200ms;
opacity:0.7;
transform:scale(1.02);
border: solid thin #444;
}

.nav2.courseli ul li {
background-color:rgba(243,101,35,1.0);	
color:#fff;
min-height:400px;
}

.nav2.courseli ul li .act_title{
color:#fff;
}

.nav2.courseli ul li .act_info{
color:#ddd;
}

.nav2 li .photo {
position:relative;
top:0;
left:0;
display:flex;
padding:5px;
}

.nav2 li .photo img {

width:100%;
height:100px;
min-height:100px;
display:block;
}

.nav2 .act_text {
width:100%;
position:relative;

}

.nav2 .act_title {
position:relative;
color:#111;
padding:5px 10px;
font-weight:700;
display:block;
text-align:left;

}

.nav2 .act_info {
position:relative;
color:#222;
padding:5px 10px;
font-size:0.7em;
line-height:1.2em;
display:block;
text-align:left;
}

.nav2 .act_info strong {
font-weight:600;	
}

.nav22 span {
font-size:1em;
line-height:1em;
color:#000;
position:absolute;
border:solid thin #000;
display:none;
z-index:22222;
background-color:#fff;
}

.hugebtn {
font-family: 'Open Sans Condensed', sans-serif;
background-color:#111;
width:90%;
display:block;	
border-radius:10px;
padding:50px 10px;
font-size:3em;
line-height:1.5em;
box-shadow:10px 10px 10px #ccc;
color:#fff;
}
.hugebtn:hover {
opacity:0.8;	

}

/*VIMEO VIDEO STYLES*/



.evid {

position:relative;
text-align:left;
margin:10px auto;
display:block;
max-width:320px;
width:100%;
transition: max-width ease-in-out 500ms;	
}

.evid-expand {
max-width:100%;
transition: max-width ease-in-out 500ms;	
}


.evidtitle {
		border:solid thin #ccc;
position:relative;
color:#222;
font-size:14px;
line-height:16px;
width:100%;
padding:5px 22px 5px 5px;
font-style:italic;
text-align:center;
border-radius:4px;
}

.evidtitle span {
position:absolute;
right:0;
top:4px;
cursor:pointer;
z-index:999;
}

.vidwrap {
padding:50% 0 0 0;
position:relative;	
}

.vidwrap iframe{
position:absolute;	
left:0;
top:0;
width:100%;
height:100%;
}




/*END VIMEO*/

.postnav {
position:relative;	
width:100%;
min-height:30px;
background-color:rgba(146,197,182,1.00);
z-index:998;
text-align:right;
}

.postnav ul {
margin:0;	
}

.postnav li {
text-align:center;
display:inline-block;
padding:0 5px;
margin:0 10px;
font-size:1.1em;
}

.postnav li.link:hover {
cursor:pointer;
color:#069;
transition: all ease-in-out 300ms;
}

.postnav i{
position:relative;	
top:4px;
font-size:1.2em;
}

footer #languagebar  {
position:relative;
display:inline-block;
top:8px;
margin-left:10px;
}

footer #languagebar i {
position:relative;
top:-5px;
}

footer #languagebar select {
	background-color:transparent;
	border:solid thin #444;
}

.clsbut {
position:relative;
margin-right:10px;
margin-bottom:20px;
}

.clsbut div {
position:relative;
line-height:1.0em;
padding-top:12px;}

.modalfoot {
padding:15px !Important;	
background-color:#222 !Important;
}

.divnumclasses {
color:#069;
font-weight:600;	
}

#numclasses {
background-color:#666;	
color:#ddd;
padding:0 4px 2px 4px;
border-radius:3px;
}


.newish::after {
	font-size:8px;
	background-color:#fff;
content:'New';
position:absolute;
color:#222;
top:5px;
right:5px;
line-height:12px;
padding:2px;
border-radius:3px;
}

.nextclass {
color:#fff;
background-color:green;	
display:inline-block;
border-radius:3px;
padding:4px;
text-align:center;
}


#expcon {
position:relative;
top:0px;	
background-color:#ccc;
margin-left:10px;
cursor:pointer;
}

#expcon:hover {
opacity:0.5;	
}

#expcondiv {
position:relative;	
padding:5px;
border:solid thin #222;	
margin:10px;
color:#fff;
background-color:#111;
display:none;
}

tport {
font-size:10px;
display:block;
color:#999;	
line-height:20px;
margin:0;
position:relative;
}

tport span {
background-color:#fff;	
padding:2px 4px;
border-radius:3px;
border:solid thin #ccc;
}

.sidenav tport, .postnav tport {
position:absolute;
bottom:2px;	
}

.postnav tport {
position:absolute;
bottom:-10px;	
}

.mytable {
border:solid thin #ccc;
border-spacing: 3px;
border-collapse:separate;

}

.mytable th{
background-color:#ccc;	
border-radius:5px;
}


.mytable td  {
background-color:#000;
color:#fff;	
border-radius:5px;
text-align:center;

line-height: 1.2em;
font-weight:normal;
}

.mytable td p, .mytable th {
font-size:1.0em;	
}

.donetest {
position:absolute;	
background-color:gold;
border-radius:2px;
}

.lbuser {
text-align:center;	
background-color:#ccc;
border-radius:10px;
}

.trad {
color:#bbb !important;
font-size:12px !Important;
line-height:14px !Important;	/*WAS 12px*/
}

.trad img {
width:30px;
height:30px;
}

.clink {
position:relative;
text-align:center;
padding:2px;
line-height:14px;
}

.clink i {
font-size:14px;
position:relative;
top:2px;
}

.clink a:hover {
color:black;
}



@media only screen and (max-width: 1100px) {
.cgrid {
	min-height:420px !Important;
}
}

@media only screen and (max-width: 900px) {
.cgrid {
	min-height:420px !Important;
}

.nav2 li {
	margin:8px auto;
}
}


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

h1 {
font-size:2.8em !Important;
}

}

@media only screen and (max-width: 800px) {
	
.postnav li {
display:block;	
}

.postnav li:not(:last-child) {
border-bottom:#444 solid thin;	
}
	
}

@media only screen and (max-width: 640px) {
	
h1 {
font-size:1.8em !Important;
}

.evid::before {
top:-14px !Important;
}

}

@media only screen and (max-width: 550px) {
.panhead {
display:block;
}

.panhead img {

}

.uwrap {
	white-space:normal;
	word-break:break-all;
	
}

.nav2 .act_title {
font-size:0.9em !important;
line-height:1.1em !important;	
}

.mytable td p, .mytable th {
font-size:0.8em !important;	
}


}

@media only screen and (max-width: 450px) {
	
	h1 {
font-size:1.6em !Important;
}
.contr{
min-height:320px !Important;
}


.hlogo img {
height:20px;
width:auto;
}

.dlogo1 img {
position:absolute;
height:40px;
width:auto;
top:50%;
transform:translateY(-50%);
}



.minlevel {
	font-size:1em !important;
}

.nav2 .act_title {
font-size:0.8em !important;
line-height:1.1em !important;
}

.nav2 .act_info {
font-size:0.6em !important;	
}

.hugebtn {
font-size:2.0em !Important;
}

.mytable td p, .mytable th {
font-size:0.7em !important;	
}

}

@media only screen and (max-width: 350px) {
	h1 {
font-size:1.3em !Important;
}

.clsbut {
font-size:0.7em !important;	
}

.clsbut div {
padding-top:18px!important;	
}

.mytable td p, .mytable th {
font-size:0.6em !important;	
}

	
}