/* CSS Document */
@font-face{
    font-family:'asafeerFont';
    src: url('HacenAlgeria.eot');
    src: url('HacenAlgeria.eot#') format('eot'), 
    url('HacenAlgeria.woff') format('woff'), 
    url('HacenAlgeria.ttf') format('truetype'),
    url('HacenAlgeria.svg#HacenAlgeria') format('svg');
    font-weight: normal;
    font-style:normal;
	font-display:swap;
}
@font-face{
    font-family:'asafeerTitle';
    src: url('HacenAlgeriaHd.eot');
    src: url('HacenAlgeriaHd.eot#') format('eot'), 
    url('HacenAlgeriaHd.woff') format('woff'), 
    url('HacenAlgeriaHd.ttf') format('truetype'),
    url('HacenAlgeriaHd.svg#HacenAlgeriaHd') format('svg');
    font-weight: normal;
    font-style:normal;
	font-display:swap;
}
@font-face{
    font-family:'asafeerMenu';
    src: url('HacenMaghreb.eot');
    src: url('HacenMaghreb.eot#') format('eot'), 
    url('HacenMaghreb.woff') format('woff'), 
    url('HacenMaghreb.ttf') format('truetype'),
    url('HacenMaghreb.svg#HacenMaghreb') format('svg');
    font-weight: normal;
    font-style:normal;
	font-display:swap;
}
@font-face{
    font-family:'asafeerArabicEd';
    src: url('myriad.eot');
    src: url('myriad.eot#') format('eot'), 
    url('myriad.woff') format('woff'), 
    url('myriad.ttf') format('truetype');
    font-weight: normal;
    font-style:normal;
	font-display:swap;
}
@font-face{
    font-family:'asafeerEn';
    src: url('Poppins-Medium.eot');
    src: url('Poppins-Medium.eot#') format('eot'), 
    url('Poppins-Medium.woff') format('woff'), 
    url('Poppins-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style:normal;
	font-display:swap;
}@font-face{
    font-family:'asafeerArabic';
    src: url('HacenAlgeria.eot');
    src: url('HacenAlgeria.eot#') format('eot'), 
    url('HacenAlgeria.woff') format('woff'), 
    url('HacenAlgeria.ttf') format('truetype');
    font-weight: normal;
    font-style:normal;
	font-display:swap;
}
::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}
select,button,input[type="button"],input[type="submit"]{
	-webkit-appearance:none;
}
::-webkit-scrollbar-thumb {
    border-radius: 0.5em;
    background-color: #5a5a5a;
    opacity: 0.4;
}
*,*:focus,*:hover{
    outline:none !important;
}
::placeholder{color:#cfcfcf;}
.breadcrumb a {color: #70A323;font-weight: bolder;}
#profilepic{border-radius: 50%;width: 50px;height: 50px;cursor:pointer;}
.ui-tooltip, .arrow:after {background: #fff;border: 1px solid #adb9cb;}
.ui-tooltip {padding: 10px 20px;background-color: #fff;border: 1px solid #adb9cb;opacity:1;border-radius: 0.5vw;box-shadow: 0 0 7px rgba(0,0,0,0.12);}
.arrow {width: 70px;height: 16px;overflow: hidden;position: absolute;left: 50%;margin-left: -35px;bottom: -16px;opacity:1;}
.arrow.top {top: -16px;bottom: auto;}
.arrow.left {left: 20%;}
.arrow:after {content: "";position: absolute;left: 20px;top: -20px;width: 25px;height: 25px;box-shadow: 6px 5px 9px -9px black;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);opacity:1;transform: rotate(45deg);}
.arrow.top:after {bottom: -20px;top: auto;}
.fullname{float: right;line-height: 50px;padding-right: 1vw;border-right: 1px solid #d2d4d8;}
#outer{position: fixed;top: 0;left: 0;right: 0;bottom: 0;}
#left{float: right;width: 85%;}
#contentarea{height:90vh;overflow-y:scroll;width:100%;}
.tright{text-align: right;}
.tleft{text-align:left;}
.right{float:right;}
.left{float:left;}
.greent{color:#58ae02;}
.oranget{color:#ff8700;}
.purplet{color:#a550ee;}
.redb{background-color:#fe5639;color:#fff;}
.greenb{background-color:#58ae02;color:#fff;}
.orangeb{background-color:#ff8700;color:#fff;}
.purpleb{background-color:#a550ee;color:#fff;}
.blueb{background-color: #01bdee;color: #fff;}
.bluet{color:#01bdee;}
.greyt{color:#c6c6dc;}
.logo{max-width:150px;margin:1vw;float:right;max-height:70px;aspect-ratio:9/4;}
.usertypes,.columns{width:70%;text-align:center;display: grid;grid-template-columns: repeat(3, 29.5%);grid-column-gap: 4.5vw;margin: 1vw auto 2vw auto;}
.usertypes div.card{overflow:hidden;border-radius:0.5vw;cursor:pointer;padding-bottom:1vw;height:55vh;}
.usertypes div.card img{width:100%;margin-bottom:1vw;}
.usertypes div{font-size:2vw;font-weight:bold;}
.loadmore{color:#58ae02;border:2px solid #58ae02;border-radius:1vw; padding:0.5vw 2vw;width:200px;margin:1vw auto 4vw auto;font-size:1.2vw;text-align:center;cursor:pointer;}
#storycontainer{display:inline-block;width:100%;}
.breadcrumb{width: 100%;box-sizing: border-box;padding:0.5vw 0vw;margin:0 0 1vw 1vw;float: right;font-family: 'Hacen Algeria';color: #000;position: relative;clear: right;}
.breadcrumb h1.viewtitle{float:right;margin:0;line-height:3.6vw;}
.breadcrumb .left{float: left;line-height: 3.6vw;font-size: 0.8vw;font-family: 'Hacen Algeria';}
.tabright{float: right;padding: 0.5em 2em;border: 1px solid #d2d4d8;border-bottom: 0;border-radius: 0 0.5vw 0 0;border-left: 0;font-size: 1.2em;cursor: pointer;color: #87a3ba;background-color:#fff;}
.tabright.active{font-weight: bolder;background-color: #f4f4f7;color: #5a5c6a;}
.tableft{float: right;padding: 0.5em 2em;border: 1px solid #d2d4d8;border-bottom: 0;border-radius: 0.5vw 0 0 0;border-right: 0;font-size: 1.2em;color: #87a3ba;   cursor: pointer;background-color:#fff;}
.tableft.active{font-weight: bolder;background-color: #f4f4f7;color: #5a5c6a;}
.slider {z-index: 11;position: relative;width: 100%;height: 3vw;background-color: #fff;border-radius: 0.5vw 0.5vw 0 0;border: 1px solid #d2d4d8;}
.slider.maximized{box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3) !important;border-radius:0.5vw !important;}
.slider .btn{display: inline-table;z-index: 11;position: relative;padding:0;border-radius: 18%;background-color: #58ae02;height: 2vw;width: 2vw;box-sizing: border-box;text-align: center;line-height: 2vw;font-size: 1.2vw;color: #fff;margin:0.5vw;cursor:pointer;box-shadow: none;border: 0px;font-weight: 900;}
.slider .sbtn{display: inline-table;z-index: 11;position: relative;padding:0;border-radius: 18%;background-color: #fff;height: 1.8vw;width: 2vw;box-sizing: border-box;text-align: center;font-size: 1.2vw;color: #fea900;margin:0.5vw;cursor:pointer;border:2px solid #fea900;box-shadow: none;border: 0px;font-weight: 900;}
.slider .qbtn {display: inline-table;z-index: 11;position: relative;padding:0;border-radius: 18%;background-color: #06C2EC;height: 2vw;width: 2vw;box-sizing: border-box;text-align: center;line-height: 2vw;font-size: 1.2vw;color: #fff;margin:0.5vw;cursor:pointer;}
.pagenum p {color: #58ae02; font-size: 1.2vw;margin: 0 1vw; line-height:2vw;float:right;}
.slidenumber {width: 5vw;font-size: 1vw; border: 1px solid #adb9cb; border-radius: 1vw; height: 2vw;text-align: center;line-height:2vw;padding:0 1vw;float:left;}
.pagenum{clear: none;display: inline-table;margin: 0.5vw;}
.slide{position:relative;}
.slide picture,.slide picture img{width:100%;aspect-ratio:16/9;}
.slide img{display:block;}
div#bookmarkadded input[type="button"],div#bookmarkexists input[type="button"]{width: 100%;margin: 0.5em 0;font-family: asafeerFont;border-radius: 0.5em;box-sizing: border-box;border: 2px solid #cbcbcb;cursor: pointer;}
.question{box-sizing: border-box;padding: 2vw;}
.question ul {padding-right:0;box-sizing: border-box;}
.qtext {font-size: 1.8vw;}
.atext {font-size: 1.5vw;border: 1px solid #adb9cb;border-radius: 0.5vw;padding: 1vw;width: 100%;text-align: center;font-family: asafeerArabicEd;box-shadow: 0px 2px 5px rgba(0,0,0,0.12);cursor: pointer;box-sizing: border-box;}
.atext input[type="radio"] {display: none;}
#publisher{background-color:#000;opacity:0.8;color:#fff;position:absolute;right:0;bottom:0;border-radius:0.5vw;padding:1vw;border-top-right-radius: 0;border-bottom-left-radius: 0;}
#window{height: 100%;width: 100%;border-bottom-left-radius: 1vw;border-bottom-right-radius: 1vw;overflow: hidden;border: 1px solid #d2d4d8;border-top:0;position:relative;background-color:#fff;}
.tabbedcard{border-radius:1vw;border:1px solid #d0d2d6;padding:0;background-color:#fff;box-sizing: border-box;font-family:asafeerFont;position:relative;box-shadow: 0px 2px 10px rgba(0,0,0,0.12);color:#5D7387;}
.tab.blue{border-color:#06C2EC !important;background-color: #fff;color: unset !important;}
.tabbedcard .tabs{width: 100%;float:right;border-bottom: 1px solid #CCD0D6;clear:both;
}
.tabbedcard .content{padding:1vw 2vw;display: table;width:100%;box-sizing: border-box;}
.tabbedcard .content.nopadding{padding:0 !important;display: table;width:100%;}
.tabcontainer div.tab {padding: 1vw;cursor: pointer;border-bottom: 0px;box-sizing: border-box;border-bottom: 3px solid #35B897;font-size: 1.2vw;}
.tabcontainer div.tab.inactive {border: 0;}
.tab h2 {margin: 0;font-size: 1.2em;}
.redt {color: #fe5537 !important;}
div.tabcontainer {width: 35vw;margin: auto;text-align: center;}
.yellowb {background-color: #fea900;color: #fff;}
.infobar .fal {margin-left: 0.5vw;}
.video.ui-dialog .ui-dialog-content{min-height:400px !important;overflow:hidden;}
.video .ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {border-radius: 1vw;}
.video .ui-dialog-title{color: #03b585;;font-family:asafeerFont;float:right !important;}
.video .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable {border-radius: 1vw;}
.video .ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {background-color: #FFF!important;border-radius: 0;border: 0;}
.video .ui-dialog .ui-dialog-content {background-color: #fff!important;}
.video .ui-widget-header{background:unset;}
.video .ui-dialog-titlebar-close { position:relative;float:left;}
.video .ui-dialog-titlebar-close:after {position: absolute;font-family: FontAwesome;font-size: 24px;top:0;right:auto;left:0.2vw;color:#d8d8d8;content: "\f00d ";}
.video .ui-state-default .ui-icon{background-image:none !important;}
.video .ui-widget-overlay {background-color:#000 !important;opacity:0.6 !important;}
.ui-dialog .ui-dialog-titlebar-close {box-shadow: 0 0 0;right: auto !important;left: 0.5em !important;top: 0.5em !important;background: none !important;border: 0 !important;z-index: 1;}
.video .ui-dialog-title:before{font-family: FontAwesome;content: "\f58e ";color:#fe5537;margin-left:0.5vw;}
.video.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable {border-radius: 1vw;}
.video.ui-dialog .ui-dialog-content {overflow:hidden;}
.ui-widget-content{font-family:asafeerFont;}
#progressBar {
    position: absolute;
    z-index: 999999;
    top: 0;
    right: 0;
    width: 0%;
    height: 4px;
    background: #35B897;
    border-radius: 10%;
    -moz-transition: width 500ms ease-out,opacity 400ms linear;
    -ms-transition: width 500ms ease-out,opacity 400ms linear;
    -o-transition: width 500ms ease-out,opacity 400ms linear;
    -webkit-transition: width 500ms ease-out,opacity 400ms linear;
    transition: width 500ms ease-out,opacity 400ms linear;
}
#resourcescontainer{border:1px solid #d2d4d8;border-radius:0.5vw 0 0.5vw 0.5vw;height:70vh;display:none;width:100%;float:right;}
#maincontent{display: inline-block;width: 100%;position:relative;}
#activitiescontainer{display: grid;grid-template-columns: repeat(3, 30%);grid-column-gap: 2.7vw;width:80%;margin: 8vw auto;}
#activitiescontainer div{padding: 1vw;text-align: center;border-radius: 1vw;cursor:pointer;}
#activitiescontainer div div{font-size:1.5em;margin-top:1em;}
#iexercises,#vexercises,#worksheets{display:none;}
#worksheets{display: grid;grid-template-columns: repeat(3, 30%);grid-column-gap: 2.7vw;width:80%;margin: 4vw auto;}
#worksheets div{border:1px solid #d2d4d8;border-radius:0.5vw;box-shadow:0 0 5px rgba(0,0,0,0.12);text-align: center;overflow: hidden;cursor:pointer;margin-bottom:1vw;}
#worksheets div img{width:100%;}
#iexercises iframe,#vexercises iframe{width:100%;border:0;height:70vh;border-radius:0.5vw 0 0.5vw 0.5vw;}
.gridfour{display: grid;grid-template-columns: repeat(4, 22%);grid-column-gap: 4%;width: 90%;margin: 4vw auto;}
.gridfour div{padding:2vw;text-align:center;border-radius:1vw;font-size:1.8em;cursor:pointer;}
.gridfour div i{font-size:5vw;margin:2vw;}
.examresult{display:none;position:absolute;top:0;right:0;left:0;bottom:0;background-color:rgba(0,0,0,0.8);}
.examresult .review{margin: 1em;color: #fff;font-size: 1.5vw;}
.examresult .review i {margin: 0 0.5em;}
.review .fa-thumbs-up,.review .fa-thumbs-down{border: 3px solid #fff;padding: 0.5em;border-radius: 50%;cursor: pointer;}
div.response{text-align:center;box-sizing: border-box;overflow: hidden !important;font-family: asafeerFont;}
div.response button,div.response input[type="button"]{width:100%;box-sizing: border-box;padding:0.5em;text-align:center;border:0;border-radius:1.5em;font-family: asafeerFont;}
div.response input[type="button"]{background-color:#ffa700;color:#fff;}
div.response button.liked{border:2px solid #01bef0;}
.reviewtext{width: 100%;height: 20vh;padding: 0.5em;box-sizing: border-box;}
#success{color: #5fc702;text-align: center;font-size: 2em;}
#success i{font-size: 3em;}
.examresult .review button{background-color: transparent;border: 3px solid #fff;border-radius: 2em;width: auto;font-size: 0.7em;}
.examButton{background-color: #fea900;font-size: 1.5em;color: #fff;padding: 0.5vw 2vw;border: 0;border-radius: 1.5em;cursor:pointer;}
#resultText{color: #fff;text-align: center;}
.examresult i.fa-star{font-size: 3vw;margin: 0 0.5vw;}
.yellowt{color:#fea900;}
.examresult button{color: #fff;font-size: 1.5vw;border: 0;border-radius: 1vw;margin: 1em;padding:0 1vw;cursor:pointer;width:32%;text-align:center;}
.examresult button i{font-size: 1.5vw;padding: 1vw;}
.recordButton{background-color: #ffa700;border-bottom: 10px inset #e87e03 !important;}
.exerciseButton{background-color: #01bef0;border-bottom: 10px inset #2597b1 !important;}
h1#resultText {font-size: 1.5vw;}
.examresultbtn{bottom:10% !important;}
#recordingstart,#recordingend,#publicend,#freeend{display:none;position:absolute;top:0;right:0;left:0;bottom:0;background-color:rgba(0,0,0,0.8);}
.startpane{text-align:center;color:#fff;font-size:1.2em;position: absolute;right: 50%;top: 50%;transform: translate(50%,-50%);}
.startpane button{background-color: #fe9e27;color:#fff;border:0;border-radius:1.5em;font-size: 2em;padding: 0.2em 1em;cursor:pointer;}
.startpane button i{margin-left: 0.5em;}
.messagepane{text-align: center;margin: 25vh;color: #fff;}
.messagepane h3{font-weight:normal;}
.messagepane i {font-size: 2.5em;margin: 0.5vw;cursor:pointer;}
#recordingprogress{margin: 0.5vw;line-height: 2vw;font-size: 1.3em;}
#recordingprogress i{margin-left:.5vw;line-height:2vw;}
.fa-circle.redt{ animation: blinker 1s linear infinite;}
@keyframes blinker{ 50% { opacity: 0; }}
.recordpane{text-align:center;color:#fff;font-size:1.2em;position: absolute;top: 50%;right: 50%;transform: translate(50%,-50%);}
#player{border-radius:1vw;width:100%;}
#cards .card{background-color: #fff;border-radius: 1vw;box-sizing: border-box;padding: 1vw;margin: 1vw;float: right;border: 1px solid #d0d2d6;font-family: asafeerFont;color: #5D7387;box-shadow: 0px 2px 10px rgba(0,0,0,0.12);position: relative;}
.steps .card {width: 21.5%;text-align: center;margin-top: 0;}
.first{margin-right:0px !important;clear:right;}
.last{margin-left:0px !important;}
.flags {margin: 0 4vw;}
.flags img {width: 48px;margin: 2vw 0.5vw;border: 4px solid #fff;border-radius: 0.5em;box-shadow: 0px 0px 5px rgba(0,0,0,0.5);cursor: pointer;}
.messagepane i.fa-facebook{color: #007afa;}
.messagepane i.fa-whatsapp{color: #11b518;}
.messagepane i.fa-twitter{color: #1da1f2;}
.messagepane i.fa-print{color: #fe5639;}
.socialsharing .fa-facebook-f{background-color: #007afa;}
.socialsharing .fa-phone-alt{background-color: #11b518;font-size:1.5em !important;}
.socialsharing .fa-twitter{background-color: #1da1f2;}
.socialsharing .fa-print{background-color: #fe5639;}
div.socialsharing i {float: left;margin: 0.2em 0.2em;font-size: 2em;cursor: pointer;color: #fff;height: 48px;line-height: 48px;width: 48px;text-align: center;border-radius: 50%;}
/*********dialog styles************/
ui-widget,.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{font-family:asafeerFont;}
.ui-widget textarea{border-radius: 0.5vw;border-color: #adb9cb;}
.ui-widget button{margin:0.5vw 0 0.5vw 0.5vw;}
.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {border-radius: 1vw;}
.ui-dialog-title{color:#03b585;font-family:asafeerFont;float:right !important;}
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable {border-radius: 1vw;}
.ui-dialog select {border-radius: 0.5vw;padding:0.2vw;}
.ui-dialog .ui-dialog-titlebar-close {box-shadow: 0 0 0;right: auto !important;left: 0.5vw !important;top:1em !important;background: none;border: 0;z-index: 1;color: #fff !important;}
.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {background-color: #FFF!important;border-radius: 0;border: 0;}
.ui-dialog .ui-dialog-content {background-color: #fff!important;}
.ui-widget-header{background:unset;}
.ui-dialog-titlebar-close { position:relative;float:left;}
.ui-dialog-titlebar-close:after {position: absolute;font-family: FontAwesome;font-size: 24px;top:0;right:auto;left:0.2vw;color:#d8d8d8;content: "\f00d ";}
.ui-state-default .ui-icon{background-image:none !important;}
.ui-widget-overlay {background-color:#000 !important;opacity:0.6 !important;}
.ui-dialog {border-radius: 1vw !important;}
button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {text-indent: 0;}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable {border-radius: 1vw;overflow: hidden;}
.ui-button .ui-icon { background-image: none !important; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content . .ui-button:hover, .ui-button:focus {border: unset !important;background:unset !important;font-weight: normal; color: #fff !important; }
button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {border: unset !important;background:unset !important;font-weight: normal; color: #fff !important; }
canvas{margin:0.5vw auto;border-radius:1vw;}
/* -----------------END Dialog --------------------*/
.editform{width:50%;margin:-4vw auto 0 auto;text-align:center;}
.editform .imgbtn{width: 150px;border-radius: 50%;height: 150px;margin: 0 auto;border: 10px solid #fff;box-shadow: 0 2px 10px rgba(0,0,0,0.25);font-size: 6em;
    color: #fff;background-color: #e5e5e5;position:relative;cursor:pointer;}
.imgbtn .cam{background-color:#58ae02;color:#fff;border-radius:50%;position:absolute;top:0;right:0;font-size: 0.25em;width: 1.5em;padding: 0.1em;}
.editform p{color:#959595;}
.editform label{float: right;font-weight: bolder;font-size: 1.3em;padding: 0.5em 0;}
.editform input[type="email"],.editform input[type="date"]{width: 100%;padding: 0.5em;font-size: 1.5em;text-align: left;border-radius: 0.5vw;border: 3px solid #d9d9d9;color:#999999;direction:ltr;}
::-webkit-calendar-picker-indicator {color:#999999;opacity:0.4;}
.editform button,.editform input[type="submit"]{background-color:#58ae02;color:#fff;padding:0.5em 2em;margin:2em auto;width:30%;font-size:1.5em;border:0;border-radius:1.5em;cursor:pointer;text-align:center;}
div.scndlbl {font-size: 1vw !important;padding: 0;margin: 0;position: relative;text-align: center;}
.editform div#enc-error {top: 186px;text-align: center;}	
.editform input.error {border: 2px solid #d44a32 !important;}
.editform .error {color: #d44a32;position: relative;width: 100%;text-align: left;}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	.speedbtn.btn{display:none;} 
	#left{width:100%;}
	#wrapper{min-height:auto;}
	#outer{z-index: 303;top:10vh;}
	.mwelcome{text-align:center;}
	.kyc{width:90%;}
	.usertypes{display:block;width:85%;}
	.usertypes div.card{height:15vh;margin:2em 0;padding:0;border-radius:1em;font-size: 1em;line-height: 5vh;}
	.usertypes div.card img{height:100%;width:auto;float:left;}
	#menu{background-color:#fff;position:fixed;top:0;display:none;z-index:305;box-shadow: 0px -5px 10px rgba(0,0,0,0.5);width:70%;}
	#menu .mwelcome img{width: 100px;margin: 1.5em auto;display: block;}
	#closemenu{color: #fff;font-size: 10vw;position: fixed;right: 70vw;top: 7vw;margin-right: 2vw;display: none;z-index: 305;width: 10vw;height: 10vw;}
	#overlay{background-color: #000;opacity: 0.6;position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;z-index: 304;display: none;}
	menu{height:80%;position:relative;}
	.asafeerloader{width: 120px;height: 140px;margin-right: -60px;}
	menu a{color: #47a301;float: right;margin: 0 2vw;font-size: 1em;text-decoration: none;width: 100%;line-height: 2.5em;}
	menu .login{background-color: #fff;border-radius: 1.5vw;padding: 0.2vw 2.5vw;color: #47a301;font-size: 1em;border: 0;margin: -0.2vw 10vw 0 5vw;cursor: pointer;position: absolute;bottom: 2em;right: 20%;line-height: 1.5em;}
	#menu ul{padding-top:8em;}
	#langselect a {color: #47a301;}
	.scores{width: 80%;margin: 1em auto;}
	.score, .pscore, .escore{width:22%;margin:5%;}
	.score div, .escore div, .pscore div {font-size: 0.8em;border-radius:1em;line-height:1.5em;}
	button.login:before {content: '\f090 ';font-family: fontAwesome;float: right;font-size: 1.5em;margin-left: 0.3em;font-weight: normal;}
	header.kids menu,header.teens menu{display:none;}
	header.kids{background-size: 160%;background-position-y: 5vh;height:110vh;}
	header.kids .tagline {position: absolute;right: 5%;font-size: 1.2em;width: 90%;bottom: 5%;text-align: center;top:50%;}
	.tagline h1{margin:0.1em;}
	.tagline p{font-size:0.8em;}
	.tagline button{padding: 0.4em 2.5em;font-size: 1em;border-radius: 1.5em;}
	button.start i{margin-right: -1.8em;margin-left: 1.8em;background-color: #fff;border-radius: 50%;color: #F4AD4B;font-size: 1em;padding: 0.3em 0.2em 0.1em 0.2em;box-sizing: border-box;margin: -1em -4em 0em 1.8em;}
	header.teens{background-size: 100%;background-position-y: 12vh;height:100vh;}
	header.teens .tagline{left: 5%;top: 50%;font-size: 1.2em;width: 90%;bottom: 5%;text-align: center;}
	.sections{grid-template-columns: repeat(4, 23.4%);grid-column-gap: 0.5em;margin: 1em auto 1em auto;width:90%;}
	.sections div{border-radius: 0.5em;font-size: 1em;padding: 0.5em;box-shadow: 0 5px 10px rgba(173,185,203,0.5);}
	.sections div i {font-size: 1.2em;line-height: 1.2em;padding: 0.5em 0.8em;border-radius: 0.3em;cursor: pointer;margin-bottom: 0.2em;width: 35%;}
	#wrapper {width: 90%;margin: 0.2em auto 1em auto;border-radius: 0.5em;padding: 1em 0.5em;box-sizing: border-box;}
	select.levels{border-radius: 0.25em;padding: 0.3em 0.5em;-webkit-appearance: none;width: 35%;margin: 0.1em;}
	#stories-container, #videos-container, #games-container{grid-template-columns: repeat(2, 48%);}
	.story{margin-bottom: 1em;}
	.story-cover {border-radius: 0.8em;box-shadow: 0 0 5px rgba(0,0,0,0.25);text-align: center;margin-bottom: 2em;overflow: hidden;padding-bottom: 0.5em;font-size: 0.6em;position: relative;cursor: pointer;}
	.cat{padding:0.5em;height:2em;width:2em;font-size:1.2em;}
	h1.stitleinfo{font-size:1.3em;text-align:center;width:100%;}
	.loadmore {border-radius: 1em;padding: 0.5vw 2vw;width: 40%;margin: 1em auto 2em auto;font-size: 1em;}
	footer p{font-size:0.7em;}
	.apps button {font-size:1em;min-width: 45%;padding: 0.2em 1em;border-radius: 1em;}
	.apps button i{line-height: 1.5em;}
	.social, .copyright {margin:1em 0;}
	.social i {font-size: 2em;margin:0 0.5em;}
	.contactus{text-align:center;width:100%;}
	.bottom{font-size:0.6em;}
	.bottom select{border-radius: 0.25em;font-size:0.8em;padding:0.5em;-webkit-appearance: none;}
	.bottom .flags{margin: 1em 4vw;float: left;}
	.bottom .flags img{width:24px;margin: 1em 0.25em;border-width:2px;}
	.copyright {font-size: 0.8em;}
	.breadcrumb .viewtitle{font-size: 1.2em;line-height:1.5em !important;}
	.breadcrumb .left{display:none;}
	.tabright,.tableft{width:50%;font-size:1em;box-sizing: border-box;padding:0.2em 2em;text-align:center;}
	.tabright{border-radius: 0 0.5em 0 0;}
	.tableft{border-radius: 0.5em 0 0 0;}
	.slider .btn,.slider .qbtn,.slider .sbtn{padding: 0.4em;border-radius: 18%;height: 1em;width: 1.4em;line-height: 1em;font-size: 0.8em;margin: 0.4em 0.2em;}
	.slider .sbtn{padding: 0.3em 0.4em !important;}
	.slider{height:2em;}
	.qtext,.atext{font-size:1.1em;}
	.examButton{font-size:1em;padding:0.5vw 1em;margin-right: -1em;}
	.pagenum p{font-size:inherit;line-height:1.8em;magrin:0 0.2em;}
	.slidenumber {width: auto;font-size: 0.8em;border-radius: 1em;height: auto;line-height: 1.4em;padding: 0 1em;margin: 0.4em 0.2em;}
	#resultText{font-size:0.9em;}
	.examresult i.fa-star{font-size:1.5em;}
	.examresult button i{font-size:1em;}
	.examresult button{width: 30%;height:10vh;font-size:0.7em;}
	.recordpane{margin:20% auto;width:90%;}
	.recordpane h1{font-size:1em;}
	.recordpane audio{width:100%;height:5vh;margin: -3em 0 0 0;}
	.recordpane .examButton{margin-right:0;}
	#resourcescontainer{height:auto;}
	#activitiescontainer{grid-template-columns: repeat(3, 31%);width:95%;}
	#activitiescontainer div{padding: 1em 0.5em;border-radius:0.8em;}
	#activitiescontainer div div{font-size:0.6em;padding:0;margin-top:0.5em;}
	#activitiescontainer div img{width:50%;height:3em;}
	.messagepane{margin:10%;}
	.messagepane h1{font-size:1.2em;}
	.messagepane h3{font-size:1em;}
	#iexercises iframe{height:auto;}
	#vexercises iframe{min-height:30vh;height:60vh;}
	.centered-btns_nav{height:40px;width:20px;margin-top:-20px;}
	.centered-btns_nav i {line-height: 40px;font-size: 0.8em;}
	#worksheets{grid-template-columns: repeat(3, 31%);width:95%;}
	#worksheets div{border-radius:0.5em;margin-bottom:1em;}
	#worksheets h3{font-size:0.6em;}
	.gridfour {margin:1em auto;grid-template-columns: repeat(2, 47.5%);column-gap:5%;width:60%;}
	.gridfour div i{font-size:2em;}
	.gridfour div{border-radius:0.8em;font-size:1em;margin-bottom:0.3em;}
	#publisher{font-size:0.6em;border-radius: 0.5em;padding:0.5em;border-top-right-radius: 0;border-bottom-left-radius: 0;}
	#pending h2,#all h2{font-size:3vw;}
	div.tabcontainer {width: 90%;margin: auto;text-align: center;}
	div.socialsharing i {width:32px;height:32px;line-height:32px;font-size:1em;}
	.socialsharing i.fa-phone-alt{font-size:0.8em !important;}
div.tabcontainer div#all,#panding {width: 50%;}
.editform input#dob, .editform input#eml {font-size: 1em;width: 56vw;}
.editform {width:80%;}
input#upload {width: 80%;font-size:4vw;}
.editform label {font-size: 4vw;}
.editform input#fn, input#ln {padding: 0.5em;font-size: 1em; border-radius: 0.5vw;border: 3px solid #d9d9d9;color: #999999;width: 80%;}
.editform .error{font-size:1.8vw;}
button.recordButton {width: 30vw;padding:0vw;position:relative;top:2vw;height:6vh;border-bottom:6px inset #e87e03 !important;border-radius:1.2em;}
button.exerciseButton {width: 30vw;padding: 0vw;position:relative;top:2vw;height:6vh;border-bottom:6px inset #2597b1  !important;border-radius:1.2em;}
.examresultbtn {bottom: 10% !important;}
.examresult .review {font-size:0.8em;}
i.fas.fa-star.middlestar {font-size: 2.5em !important;}
h1#resultText {font-size: 0.5em;}
.examresult .review button {height:3vh;border: 1.5px solid #fff;}
.review .fa-thumbs-up, .review .fa-thumbs-down {font-size:0.8em;border: 1.5px solid #fff;}
	.points span{padding: 0.2vw 1vw !important;width: 25px !important;display: block !important;box-sizing: border-box !important;line-height: 15px !important;}
}

/*-----------------------------------------------------------END MOBILE-----------------------------*/
/*-----------------------------------------------------------Tablet-----------------------------*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
h3.subheading.right {font-size: 1.8vw;line-height: 2.5vw;}
#sections div i {margin-top:2vw;}
#sections {margin: 5vw auto 5vw auto;width: 91%;grid-column-gap: 6vw;}
.asafeerloader{width: 170px;height: 200px;margin-right: -85px;}
.cat i {font-size: 2.2vw;}
a.cat {width: 3.5vw;height: 3.5vw;}
#stories-container {grid-column-gap: 4vw;}
#stories-container .story-cover {font-size:1.8vw;}
.loadmore {width: 12vw;font-size: 2vw;}
.apps button {font-size: 2vw;min-width: 13vw;height: 4vw;}
#wrapper {width: 90%;}
.contactus{font-size:2vw !important;}
.social i {font-size: 3vw;}
.bottom .tleft{font-size:2vw!important;}
div#loginpanel {position: relative;}
.colorNote {top: 0;width: 100% !important;display: block;height: 20% !important;margin: auto;border-radius: 2vw 2vw 0vw 0vw;}
.breadcrumb h1.viewtitle {font-size: 2vw;}
.breadcrumb .left {display:none}
.breadcrumb .right{display:none;}
.breadcrumb{margin-top:4vw;margin-bottom: 3vw;}
#left{width:100%;}
.tablet{display:block;}
.tablet.menu.right {float: right;right: 0;display: block;position: absolute;margin-right: 3vw;}
.tablet.menu.right i {  font-size: 5vw;color: #58ae02;}
#topHeader .messages {color: #cccddf;cursor: pointer;font-size: 3vh;}
#topHeader .membership{width:10vw !important;margin-top:2vh;}
#topHeader .fullname{margin-top:2vh;padding-left:2vw;}
#topHeader .readingwave{height: 4vh !important;margin: 1.8vh 0 0.5vh 0 !important;}
#topHeader .headeritem{margin: 0 1vw;}
#topHeader .fa-crown{font-size:3vh;}
#topHeader .fa-heart{font-size:3vh;}	
.classbtn i {margin: 0.5vw 1.5vw;}
#closemenu.mobile{display:none;}
#closemenu{display:none;color: #fff;font-size: 10vw;position: fixed;left: 70vw;top: 7vw;margin-right: 2vw;z-index: 305;width: 10vw;height: 10vw;}
#closemenu i {position: absolute;}
div#menu {display: none;z-index: 314;width: 50%;position:absolute;}
#menu ul li a {font-size:3vw;line-height: 6vw;}
a.logout {font-size: 4vw !important;}
a.logout i{margin-left:2vw;}
.searchdiv select{font-size:1.5vh !important;min-height: 3vh;}
#recordingstart .startpane button {font-size: 2vw;}
.right.scores {float: right;right: 10%;display: block;position: relative;width: 30vw;}
.scores div {font-size: 1.5vw;line-height: 2vw;}
h1.titleinfo.right {font-size: 2vw;}
.pagenum p {font-size: 2vw;margin: 0.5vw 1vw;}
.slidenumber{font-size:2vw;width:7vw;height: 3vw;line-height:3vw;}
.tabright, .tableft {font-size: 2vw;line-height: 3vw;height: 3vw;}
div#activitiescontainer img {height: 10vw;margin-top: 2vw;}
#activitiescontainer div {height: 20vw;}
#activitiescontainer div div{font-size:2vw;}
#activitiescontainer {grid-column-gap: 4vw;width: 90%;margin: 8vw auto;}
div#resourcescontainer {height: auto;min-height:57vw;}
.scores i.fa.fa-star {font-size: 4vw !important;}
.score div, .escore div, .pscore div{font-size: 1.5vw;line-height: 2vw;width:70%;right:15%;}
#mail{top:1.8vh;font-size: 1.1vw;right:0;}
#iexercises iframe {min-height: 57vw;height:auto;border-radius:2vw 0vw 2vw 2vw;}
#worksheets {grid-column-gap: 4.2vw;width: 94%;margin: 2vw auto;}
#worksheets h3 {font-size:2vw;}
#worksheets div {font-size:2vw;margin-bottom: 3vw;border-radius:2vw;}
table.progress {margin-bottom:2vw !important;}
h1#resultText {font-size: 2.2vw;margin-top: 5vw;}
button.recordButton {width: 30vw;padding: 0vw;position:relative;top:2vw;}
button.exerciseButton {width: 30vw;padding: 0vw;position:relative;top:2vw;}
.examresultbtn {bottom: 10% !important;}
.gridfour {grid-column-gap: 4%;width: 93%;}
.gridfour div {font-size: 3vw;}
.readingbadge .fa-badge, .exercisebadge .fa-badge, .recordingbadge .fa-badge {font-size: 4vw;top: 1vw;}
.readingbadge .fa-bookmark, .recordingbadge .fa-bookmark, .exercisebadge .fa-bookmark {font-size: 3.2vw;right: 0.9vw;}
.readingbadge .fa-book-open, .recordingbadge .fa-microphone, .exercisebadge .fa-pen {font-size: 1.6vw;top: 1vw;}
.readingbadge {position: absolute;right: 10%;}
.recordingbadge {right: 40%;}
.exercisebadge {position: absolute;left: 29%;}
.slide.question li.atext {font-size: 2.5vw;}
.slide.question .qtext {font-size: 3vw;}
.mainslide.slider {height: 5vw;}
.slider .btn ,.slider .sbtn,.slider .qbtn{font-size: 1.8vw;line-height: 3vw;height: 3vw;width: 3vw;margin: 1vw 0.5vw;}
.pagenum {margin: 1vw 0.5vw}
#vexercises iframe {top: 3vw;position: relative;background-color: #fff !important;min-height:53vw;height:auto;border-radius:2vw 0vw 2vw 2vw;}
#overlay{background-color: #000;opacity: 0.6;position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;z-index: 304;display: none;}
#closemenutablet{display:none;color: #fff;font-size: 10vw;position: fixed;right: 5vw;top: 7vw;margin-right: 2vw;z-index: 305;width: 10vw;height: 10vw;}
#closemenutablet i {position: absolute;font-size:7vw;}
a.centered-btns_nav {width: 25px;height: 50px;}
.centered-btns_nav i {line-height: 50px;font-size: 3vw;}
.vimage {width: 100%;margin-top: -20px !important;margin-bottom: -24px !important;}
.editform button, .editform input[type="submit"]{width:50%;}
#games-container .cover-title, #videos-container .cover-title{font-size:1.8vw;}
.editform input#fn,.editfoem input#ln {width: 80%;}
.editform .error{font-size:1.8vw;}
div.scndlbl {font-size: 3vh;}
}
/*-----------------------------------------------------------END Tablet-----------------------------*/