/*
Theme Name: Elmefarda Zaban Theme (2025) v1.0.0
Author: Ebrahim Darvish 
Design: Mohammad reza Aminzade
Description: This theme has been developed by elmefarda team . 
Version: 2 (2021)
URL : https://zaban.elmefarda.com
*/

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('assets/fonts/IRANSansWeb.eot');
    src: url('assets/fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/IRANSansWeb.woff2') format('woff2'),
        url('assets/fonts/IRANSansWeb.woff') format('woff'),
        url('assets/fonts/IRANSansWeb.ttf') format('truetype');
}

@font-face {
    font-family: btitr;
    font-style: normal;
    font-weight: normal;
    src: url('assets/fonts/B-Titr.eot');
    src: url('assets/fonts/B-Titr.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/B-Titr.woff2') format('woff2'),
        url('assets/fonts/B-Titr.woff') format('woff'),
        url('assets/fonts/B-Titr.ttf') format('truetype');
}

body {
    direction: rtl;
    color: #222;
    font-size: 15px;
    font-family: 'IRANSans';
}

a {
    text-decoration: none;
    transition: 0.2s;
}

p {
    text-align: right
}

li {
    list-style: none
}

span {}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-family: 'IRANSans';
}

h1 {
    font-size: 20px
}

h2 {
    font-size: 18px
}

h3 {
    font-size: 17px
}

h3 {
    font-size: 16px
}


table {
    width: 100%;
    margin: 25px 0;
    font-size: 16px;
    float: right
}

table,
td,
th {
    border: 1px solid #cccccc;
    border-collapse: collapse;
    text-align: center;
}

th {
    background: #549f8d;
    color: #fff;
    padding: 15px 5px
}

td {
    padding: 10px 5px
}

tr {
    background: #f4f4f4;
}

.trtoday {
    background: #7899c6;
}

tr:hover {
    background: #dce3ed
}

table a {
    color: #2980b9
}

a {
    color: #2a9ed4;
    transition: 0.2s
}

a:hover {
    color: #cd0000
}

form {
    float: right
}

label {
    float: right
}

button {
    font-family: 'IRANSans';
    font-size: 18px;
}

input,
select {
    width: 300px;
    padding: 9px 5px;
    float: right;
    margin: 30px 0px;
    border: 1px solid #61ace5;
    font-family: 'IRANSans';
    font-size: 18px
}

textarea {
    width: 320px;
    height: 200px;
    font-family: 'IRANSans';
    font-size: 18px;
    margin-top: 10px;
    padding: 9px 5px;
    resize: none;
}

span {
    float: right;
}

strong {
    font-size: 18px;
}

input[type="text"]:disabled {
    background: #aaaaaa;
}

#register {
    width: 100%;
    margin: 0 auto;
}

.formitem {
    width: 96%;
    margin: 5px 2%;
    padding: 5px 1%;
    float: right;
    display: block;
}

.formitem label {
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 16px;
    font-weight: 600;
}

.formitem button {
    font-family: 'IRANSans';
    font-size: 18px;
    border: none;
    border-radius: 3px
}

.formitem input,
.formitem select {
    width: 250px;
    padding: 5px 5px;
    float: right;
    margin: 0;
    background: #edeaff;
    border: 1px solid #c0b4ff;
    font-family: 'IRANSans';
    font-size: 18px;
    border-radius: 3px;
}

.formitem textarea {
    width: 320px;
    height: 200px;
    font-family: 'IRANSans';
    font-size: 18px;
    margin-top: 10px;
    padding: 9px 5px;
    resize: none;
}

#kapchaq {
    font-size: 18px;
}

#registerform {
    margin: 50px auto 80px auto;
    width: 600px;
    float: none
}


#reghead {
    background: url("assets/images/reghead.png");
    background-size: cover;
    height: 300px;
    background-position: center;
}

#regdone {
    background: url("assets/images/regdone.png");
    background-size: cover;
    height: 300px;
    background-position: center;
}

#reghead h1,
#regdone h1 {
    text-align: center;
    color: #ffffff
}

#reglogo {
    width: 200px;
}

.redstar {
    margin-right: 5px;
    color: #d35400
}

.cnt-reg {
    margin: 10px auto;
    padding: 10px;
    float: right;
    idth: 700px;
}

#errors {
    float: right;
    background: #fffcfc;
    color: #ab4747;
    border-radius: 6px;
    border: 1px solid #ffadad;
    width: 96%;
    margin: 20px 1%;
    padding: 10px 1%;
    display: none
}

#errhd {
    float: right;
    color: #e74c3c;
    width: 100%;
    padding: 1px 0;
}

#errhd h2 {
    margin-right: 10px;
    font-size: 22px;
    border-bottom: 1px solid #ffadad;
    padding: 0 0 6px 0
}

#errmsg {
    float: right;
}

.youtube {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.ybox {
    float: right;
    margin: 20px 1.5%;
    width: 30%;
}

.errmsg {
    margin-right: 10px
}


#overlay {
    width: 100%;
    height: 100%;
    top: 500;
    background: #111;
    opacity: 0.7;
    display: none;
    float: right;
    z-index: 8;
    position: fixed;
}

#prmsg {
    float: right;
    margin: 7.5% 25%;
    width: 50%;
    min-height: 42%;
    background: #fff;
    position: fixed;
    border-radius: 4px;
    z-index: 9;
    padding: 2.5%;
    display: none;
}

#btninline {
    display: inline-block;
    margin-top: 30px
}

#btnic {
    background: #2ecc71;
    color: #fff;
    margin: 10px auto;
    float: none;
    padding: 10px 0;
    width: 80%;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    font-size: 24px
}

#btnic:hover {
    box-shadow: 0 5px 3px 0 #888;
    background: #3fc277
}

#btnic:active {
    background: #229854
}



#banner {
    width: 900px;
    float: none;
    padding: 0;
    margin: 0 auto;
    background: none;
    text-align: center;
    font-size: 22px
}

#banner img {
    width: 100%;
    float: none;
    margin: 0 auto;
    text-align: center
}

.dis {
    padding: 0;
    margin: 0
}

#banner h2 {
    text-align: center
}

#btnshow,
#btnnoemail {
    width: 130px;
    margin-top: 38px;
    padding: 5px;
    float: right;
    background: #8da9bf;
    border: none;
    font-size: 15px;
    color: #fff;
    transition: 0.2s;
    cursor: pointer;
    display: block
}

#btnshow:hover,
#btnnoemail:hover {
    background: #8197a8;
    color: #fff
}

.btn-grad {
    width: 250px;
    margin: 10px;
    padding: 10px 15px;
    text-align: center;
    transition: 0.5s;
    cursor: pointer;
    border: none;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 3px;
    display: block;
}

.btn-grad:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}


.greengrd {
    background-image: linear-gradient(to right, #4cdd7e 0%, #47a5a4 51%, #4cdd7e 100%);
}

.purplegrd {
    background-image: linear-gradient(to right, #bc4cdd 0%, #6947a5 51%, #bc4cdd 100%)
}

.bluegrd {
    background-image: linear-gradient(to right, #00c6ff 0%, #0072ff 51%, #00c6ff 100%)
}

.magentagrd {
    background-image: linear-gradient(to right, #ff0084 0%, #33001b 51%, #ff0084 100%)
}

.orangegrd {
    background-image: linear-gradient(to right, #ee0979 0%, #ff6a00 51%, #ee0979 100%)
}

.colorful {
    width: 100%;
    float: right;
    margin: 0;
    padding: 0;
    position: relative
}


.alignleft {
    display: inline;
    float: left
}

.alignright {
    display: inline;
    float: right
}

.aligncenter {
    clear: both;
    display: block;
    margin: 0 auto
}

.format-image .entry-header {
    display: none
}

.single .format-image .entry-header {
    display: block
}

.format-image .entry-content,
.format-image .entry-summary {
    padding-top: 1em
}

.single .format-image .entry-content,
.single .format-image .entry-summary {
    padding-top: 0
}

a img {
    border: none
}

p img {
    margin-bottom: .5em
}

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img,
.wp-caption {
    max-width: 100%;
    height: auto;
}

img.alignleft {
    margin-right: 1em
}

img.alignright {
    margin-left: 1em
}

.wp-caption {
    text-align: center;
}

.wp-caption img {
    margin: 5px;
}

.wp-caption .wp-caption-text {
    margin: 0;
    text-align: center
}

.wp-smiley {
    margin: 2px;
    width: 15px;
    height: 15px
}

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto
}

blockquote {
    float: right;
    margin: 20px 0;
    clear: both;
    background: #f5f5f5;
    color: #000;
    width: 96%;
    padding: 10px 2%;
    border-right: 3px solid #27ae60;
    border-left: 3px solid #27ae60
}

#main {
    width: 100%;
    background: #fff;
    color: #111;
    position: absolute;
    padding: 0;
    right: 0;
    top: 40px;
    overflow: hidden;
}

.float {
    width: 98%;
    padding: 5px 1%;
    margin: 0;
    right: 0;
    float: right;
    position: relative;
}

.cnt {
    margin: 10px auto;
    padding: 10px 5px;
    float: none;
    width: 1200px;
}

.cnt-dashboard {
    width: calc(90% - 270px);
    float: none;
    margin: 40px calc(20%) 40px 0;
    padding: 10px;
    position: relative;
}

#footermenu {
    display: none;
    background: #222;
    width: 100%;
    float: right;
    position: fixed;
    bottom: 0;
    z-index: 1
}

.footeritem {
    text-align: center;
    float: right;
    padding: 10px 5px;
    margin-left: 10px;
    color: #fff
}

.footeritem:hover {
    color: #fff;
    background: #666
}


.clr10 {
    clear: both;
    width: 100%;
    margin: 5px 0
}

.clr {
    clear: both;
    width: 100%;
    margin: 40px 0
}

.btnclr {
    clear: both;
    width: 100%;
    margin: 15px 0
}

.ln {
    clear: both;
    width: 100%;
    margin: 40px 0;
    border-bottom: 1px solid #aaa
}

#active {
    background: #1E8BC3;
    color: #fff;
    border-color: #1d8bc3
}

#activemnu {
    background: #3b7396;
}

.overln {
    text-decoration: line-through
}

.offerprice {
    background: #38ada9
}

.offerdis {
    background: #341f97;
    display: inline-block;
    padding: 6px 10px
}

.black {
    background: #111111
}

.white {
    background: #ffffff
}

.gray {
    background: #eeeeee
}

.blue {
    background: #2980b9
}

.darkblue {
    background: #3a4653
}

.green {
    background: #6EAE4D
}

.red {
    background: #c0392b
}

.orange {
    background: #e67e22
}

.purple {
    background: #9b59b6
}

.yellow {
    background: #f1c40f
}

.magenta {
    background: #ff0586
}

.msgbg {
    background: #FDE79B
}

.black,
.blue,
.darkblue,
.green,
.red,
.orange,
.purple {
    color: #ffffff
}


.fblack {
    color: #111111
}

.fgray {
    color: #999999
}

.fwhite {
    color: #ffffff
}

.fblue {
    color: #3498db
}

.fgreen {
    color: #16a085
}

.fgreen2 {
    color: #2ecc71
}

.fred {
    color: #e74c3c
}

.forange {
    color: #d35400
}

.fyellow {
    color: #f1c40f
}

.fmagenta {
    color: #ff0586
}

.fpurple {
    color: #9b59b6
}

.lineth {
    -webkit-text-decoration-line: line-through;
    text-decoration-line: line-through;
}

.left {
    float: left
}

.right {
    float: right
}

.btitr {
    font-family: btitr;
    color: #444444
}

.mycourse {
    width: 300px;
    height: 300px;
    padding: 0;
    margin: 30px 10px;
    float: right;
    background: #eee;
    border-radius: 6px;
    position: relative;
}

.mycourse p {
    font-size: 18px;
    text-align: center;
    margin: 5px
}

.coursehd {
    width: 100%;
    padding: 20px 0;
    margin: 0 0 30px 0;
    text-align: center;
    font-size: 20px;
    border-radius: 6px 6px 0 0;
}

.activec {
    background: #27cb74;
    color: #fff
}

.inactivec {
    background: #7ca2b2;
    color: #fff
}

.btndash {
    width: 70%;
    float: right;
    margin: 15px 10%;
    padding: 10px 5%;
    text-align: center;
    background: #222;
    color: #fff;
    position: absolute;
    top: 70%;
    font-size: 20px
}

.btndash:hover {
    color: #fff;
    box-shadow: 0 5px 3px 0 #888;
}

.greebtn {
    background: #1abc9c
}

.bluebtn {
    background: #3498db
}

.btng,
.btnb,
.btnm {
    color: #fff;
    width: 200px;
    padding: 8px;
    text-align: center;
    font-size: 18px;
    margin: 5px;
    border-radius: 2px;
    display: inline-block
}

.btng:hover,
.btnb:hover,
.btnm:hover {
    color: #fefefe;
    box-shadow: 0 5px 3px 0 #888;
}

.btng {
    background: #1abc9c
}

.btnb {
    background: #3498db
}

.btnm {
    background: #E91E63
}



.btndemoblue,
.btndemo,
.btngreen,
.btngreendl,
.btndlgray {
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    background: #6EAE4D;
    color: #fff;
    cursor: pointer;
    font-family: 'IRANSans';
}

.btndemo:hover,
.btndemoblue:hover,
.btngreen:hover,
.btngreendl:hover {
    box-shadow: 0 5px 3px 0 #888;
    color: #fff
}

.btndemo,
.btndemoblue {
    padding: 8px;
    float: right;
    width: 60%;
    margin: 7px 20%;
    font-size: 16px;
    transition: 0.2s;
}

.btngreen,
.btngreendl,
.btndlgray {
    padding: 10px;
    float: right;
    margin-top: 10px;
    font-size: 22px;
    transition: 0.2s
}

.btngreen {
    width: 300px
}

.btngreendl,
.btngray {
    float: left;
    margin: 10px 0 10px 20px;
}

.btndlgray {
    background: #c7ced2;
    width: 200px;
    cursor: default;
}

.btndemoblue {
    background: #2980b9;
    color: #fff
}

.btngray {
    padding: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    background: #c7ced2;
    font-family: 'IRANSans';
    font-size: 18px;
    float: right;
    margin-top: 10px;
    float: left
}

#inxvid {
    float: none;
    margin: 10px auto;
    width: 100%;
    background: #eee
}

#courses {
    padding-top: 15px;
    padding-bottom: 50px;
    background: #0a355c url('https://zaban.elmefarda.com/wp-content/uploads/2018/01/bg.jpg');
    color: #fff
}

#infobtns {
    width: 48%;
    float: right;
    margin: 1%;
    background: #fff
}

.offerrt {
    float: right;
    margin: 5px 1%;
    width: 48%;
}

.offerrt img {
    float: right;
    margin: 0;
    width: 96%;
    height: auto;
}

.offerlf {
    width: 48%;
    float: right;
    margin: 5px 1%;
}



.demobox {
    width: 22.6%;
    height: 300px;
    background: #ffffff;
    margin: 20px 0.5%;
    padding: 10px 0.5%;
    border-radius: 2px;
    float: right;
    display: inline-block;
    text-align: center;
    border: 1px solid #ddd;
    color: #111111
}

.demobox h3 {
    color: #111111;
}

.demobox img {
    width: 100%;
}

.demobox:hover {}

.statbox {
    width: 300px;
    height: 320px;
    background: #f2f2f2;
    margin: 10px 20px;
    padding: 0;
    border-radius: 2px;
    float: right;
    display: inline-block;
    text-align: right;
    border: 1px solid #ddd
}

.statbox h2 {
    text-align: center;
}

.statbox h3 {
    margin-right: 10px
}

.btnmore {
    padding: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    background: #5cbe6e;
    color: #fff;
    font-family: 'IRANSans';
    font-size: 22px;
    float: right;
    margin: 40px 20% 20px 20%;
    width: 60%
}

.btnmore:hover {
    background: #59a668;
    color: #fff
}

.f18 {
    font-size: 18px
}

.f19 {
    font-size: 19px
}

.f20 {
    font-size: 20px
}

.f21 {
    font-size: 21px
}

.f22 {
    font-size: 22px
}

.f23 {
    font-size: 23px
}

.f24 {
    font-size: 24px
}

.f26 {
    font-size: 26px
}

.f26:before {
    margin-top: 10px
}

.f28 {
    font-size: 28px
}

.f30 {
    font-size: 30px
}

.f32 {
    font-size: 32px
}

.f34 {
    font-size: 34px
}

.f36 {
    font-size: 36px
}

.f38 {
    font-size: 38px
}

#sidebar-header {
    float: right;
    width: 200px;
    margin: 0 0 20px 0;
    clear: both;
    padding: 10px 14px 10px 10px;
    color: #90C695;
    background: #333;
    border-bottom: 2px solid #90C695
}

#menubar {
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    overflow: hidden;
    padding: 0;
    background: #111;
    z-index: 999;
}

#menu {
    position: relative;
    width: 900px;
    float: none;
    margin: 0 auto;
    padding: 0
}

#menu a {
    float: right;
    margin: 0 6px;
    padding: 10px;
    color: #fff;
    transition: 0.2s;
    font-size: 18px
}

#menu a:hover {
    background: #fff;
    ;
    color: #222
}

#btnmenu,
#btnclose,
#btnsidebar,
#btnsidebar2 {
    display: none;
    color: #ffffff;
    cursor: pointer
}

#btnmenu,
#btnsidebar,
#btnsidebar2 {
    margin: 0;
    padding: 10px 1.5%
}

#btnmenu {
    background: #27ae60;
    float: right
}

#btnclose {
    background: #c0392b;
    padding: 10px
}

#btnsidebar,
#btnsidebar2 {
    background: #2980b9;
    float: left
}

#leftmnu {
    background: #cd0000
}


#usersb,
#usersb2 {
    background: #333333;
    margin: 0;
    float: right;
    width: 250px;
    height: 100%;
    z-index: 2;
    position: fixed;
    top: 49px;
    right: 0;
    display: inline-block;
}

#usersb2 {
    display: none
}

.item {
    float: right;
    width: 226px;
    margin: 0;
    clear: both;
    padding: 10px;
    color: #ffffff;
    border-right: 4px solid #222222;
    transition: 0.3s
}

.item:hover {
    background: #000;
    border-color: #2ecc71;
    color: #2ecc71;
}

.cntlist {
    width: 250px;
    float: right;
    margin: 5px;
    text-align: right;
    padding: 0
}

.cntlist li {
    width: 230px;
    margin: 6px;
    text-align: right;
    float: right;
    padding: 0;
    font-size: 16px
}


#list {
    width: 96%;
    position: relative;
    padding: 10px 0;
    margin: 0 2%
}

.lesson {
    float: right;
    margin: 25px 0;
    width: 45%;
    line-height: 26px;
    font-size: 15px;
    padding: 20px 1%;
    margin: 20px 1.5%;
    background: #fff
}

.lesson h3 {
    width: 100%;
    padding-bottom: 5px;
    margin: 0;
    font-weight: 700;
    clear: left
}

.lesson h3 a {
    color: #333
}

.lesson img {
    float: right;
    width: 320px;
    height: 200px;
    margin-left: 15px;
    transition: .2s
}

.lessonmeta {
    width: 100%;
    color: #555555;
    font-size: 16px;
}

.lessonmeta span {
    margin-left: 10px
}

.lesson p {
    text-align: right;
}


.courseintro {
    float: right;
    width: 500px;
    margin: 30px 0 10px 30px;
    font-size: 20px;
}

.courseintro h1.courseintro h2 {
    font-size: 26px;
}

.introvid {
    float: left;
    width: 640px;
    height: 360px;
    margin: 30px 0 10px 0;
    position: relative
}

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

#courseinfo {
    float: right;
    width: 100%;
}

#courseinfo h2 {
    font-size: 30px
}

#courseinfo h2:before {
    padding-top: 10px
}

#courseinfo h4 {
    font-size: 24px
}

.courseinfo {
    float: right;
    width: 30%;
    margin: 30px 1.6666%;
    text-align: center
}

.coursemeta li {
    margin: 8px
}

.courses {
    width: 44%;
    padding: 6px 1% 40px 1%;
    margin: 30px 2% 50px 2%;
    float: right;
    text-align: center;
    background: #fff;
    color: #111
}

.courses h2 {
    text-align: center;
    color: #111111;
    padding: 10x 0;
    font-size: 24px;
    font-family: btitr
}

.courses img {
    width: 85%;
    height: 250px;
    margin: 5px 7.5%;
    float: right;
    display: block
}

.courses a {
    float: none;
    margin: 5px auto
}

.round {
    border-radius: 360px
}

.avatar {}

.mrg-30 {
    margin-top: 50px;
    margin-bottom: 50px
}

.pad-30 {
    padding-top: 50px;
    padding-bottom: 50px
}

#kapcha {}

#footer {
    text-align: center
}

.page {
    padding: 6px 16px;
    font-size: 20px;
    text-align: center;
    float: right;
    margin: 10px;
    background: #555;
    color: #fff;
    border-radius: 3px
}

.page:hover {
    background: #4f9fb6;
    color: #fff
}

#activepage {
    background: #2980b9;
}

#adminmsg {
    width: 96%;
    padding: 30px 2%;
    min-height: 150px;
    margin-bottom: 50px;
    ;
    color: #000;
    font-size: 20px
}

.note {
    width: 96%;
    padding: 5px 0 5px 3%;
    margin: 5px 0;
    color: #333333;
    float: right;
}


#post {}

#post h1 a {
    font-size: 22px;
    color: #111111;
    text-decoration: none
}

@media screen and (max-width:1200px)and (min-width:901px) {
    .cnt {
        width: 100%;
        padding: 20px 0;
        float: right;
        margin: 20px 0;
    }

    .courseintro {
        width: 30%;
        padding: 10px 0;
        margin: 30px 4%;
        float: right;
        height: auto;
    }

    .introvid {
        width: 60%;
        padding: 10px 0;
        margin: 30px 1%;
        height: auto;
    }

    .demobox {
        width: 44.5%;
        height: auto;
        margin: 20px 2.5%;
        padding: 10px 0 20px 0;
        float: right;
    }

    .cnt-dashboard {
        width: calc(100% - 270px);
        padding: 50px 0;
        margin: 0 260px 0 10px;
        float: right;
    }
}


@media screen and (max-width:900px) {
    #banner {
        width: 100%
    }

    .float {
        float: right;
    }

    .cnt {
        width: 100%;
        padding: 20px 0;
        float: right;
        margin: 10px 0;
    }

    #usersb {
        display: none
    }

    input {
        width: 90%;
        margin: 10px 5%
    }

    .introvid,
    .courseintro {
        width: 98%;
        height: auto;
        padding: 10px 0;
        margin: 10px 1%;
        float: right;
        height: auto
    }

    .lesson {
        width: 96%;
        margin: 20px 2%;
        padding: 0;
        float: right;
        display: inline-block
    }

    .lesson img,
    .demobox img {
        width: 96%;
        height: auto;
        margin: 10px 1% 20px 1%
    }

    .lessonmeta {
        margin: 0 0 20px 0;
    }

    .btngreen,
    .btngreendl,
    .btndlgray {
        width: 90%;
        float: right;
        margin: 20px 5%;
        padding: 20px 0
    }

    .demobox {
        width: 44.5%;
        height: auto;
        margin: 20px 2.5%;
        padding: 10px 0 20px 0;
        float: right;
    }

    .btndemo {}


    #btnmenu,
    #btnclose {
        display: none;
    }

    #usersb {
        display: none
    }

    .cnt-dashboard {
        width: 98%;
        padding: 50px 1%;
        float: right;
        margin: 20px 0;
    }

    .cnt {
        top: 50px;
    }

    #btnmenu,
    #btnsidebar,
    #btnsidebar2 {
        display: block
    }

    #menubar {}

    #menu,
    #usersb,
    #usersb2 {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        background: #444444;
        padding: 10px 0 0 0;
        z-index: 1;
        overflow-y: scroll;
        top: 45px
    }

    #sidebar-header {
        display: none
    }

    #menu a,
    .item {
        width: 100%;
        margin: 0;
        color: #fff
    }

    #menu a:hover {}

    #menu::-webkit-scrollbar,
    #usersb::-webkit-scrollbar,
    #usersb2::-webkit-scrollbar,
    #user-sidebar::-webkit-scrollbar {
        width: 0
    }

    .courseinfo {
        width: 100%
    }

    .btngreen,
    .btngreendl,
    .btndlgray {
        width: 90%;
        float: right;
        margin: 20px 5%;
        padding: 10px 0
    }

    .statbox {
        width: 96%;
        margin: 30px 2%;
        float: right
    }

    #footermenu {
        display: block;
    }

    #register {
        width: 100%;
        margin: 0;
        padding: 0;
        float: right
    }
}


@media screen and (min-width:601px)and (max-width:1000px) {
    .cnt-reg {
        width: 80%;
    }

    #registerform {
        width: 94%;
        margin: 0 2%;
        padding: 10px 1%;
        float: right;
    }

    #registerform h1 {
        font-size: 28px
    }

    .reglabel {}

    input,
    #kapcha {
        width: calc(80% - 150px);
        margin: 0 0 10px 20px
    }

    .redstar {
        margin-right: 5px
    }

    #sbtn {
        width: 85%
    }
}


@media screen and (min-width:601px)and (max-width:899px) {
    .mycourse {
        width: 80%;
        margin: 20px 10%
    }

    .infopic {
        width: 90%;
        height: auto;
        margin: 10px 5%;
    }

    #infobtns {
        width: 90%;
        margin: 10px 5%;
    }

    #prmsg {
        width: 90%;
        margin: 2.5%;
        padding: 2.5%
    }

    .offerrt,
    .offerlf {
        margin: 5px 2%;
        width: 96%;
    }

    .offerrt img {
        float: right;
        margin: 10px 2%;
        width: 96%;
        height: auto;
    }

}


@media screen and (max-width:600px) {
    .ybox {
        aspect-ratio: 16 / 9;
        width: 90%;
        margin: 25px 5%;
        float: right;
    }

    .cnt {
        float: right;
        margin: 20px 2%;
        width: 96%
    }

    .lesson {
        width: 96%;
        margin: 30px 1%;
        padding: 0 1% 20px 1%;
        float: right;
        border-color: #bbb
    }

    .lesson img,
    .demobox img {
        width: 96%;
        height: auto;
        margin: 10px 2% 20px 2%
    }

    .lessonmeta {
        margin: 0 0 10px 0
    }

    .lesson p {
        text-align: right;
        clear: both;
        margin: 20px 1%;
        padding-bottom: 20px;
    }

    .lesson h3 {
        font-size: 18px;
    }

    .lesson span {
        width: 100%;
        margin: 10px 10px 0 0;
        padding: 0;
        clear: left;
    }

    .btngreen,
    .btngreendl,
    .btndlgray,
    .btng,
    .btnb,
    .btnm {
        width: 90%;
        float: right;
        margin: 12px 5%;
        padding: 10px 0
    }

    .btngreendl {
        margin-top: 20px;
        margin-bottom: 0
    }

    .demobox {
        width: 90%;
        height: auto;
        margin: 20px 5%;
        padding: 10px 0 20px 0;
        float: right;
    }

    .btndemo {}

    .cnt-reg {
        margin: 10px 0%;
        padding: 10px 0;
        width: 100%;
    }

    .reglabel {
        background: none;
        color: #111;
        margin: 0 20px
    }

    input,
    #kapchaq,
    #kapcha,
    #sbtn,
    #btnshow {
        width: 80%;
        float: right;
        position: relative;
        margin: 10px 10%
    }

    .redstar {
        width: 10px;
        float: right;
        margin-right: 8px;
        margin-top: 20px
    }

    .statbox {
        width: 96%;
        margin: 30px 2%;
        float: right
    }

    .mycourse {
        width: 96%;
        margin: 20px 2%
    }

    #register {
        width: 100%;
        margin: 0;
        padding: 0;
        float: right
    }

    #registerform {
        width: 94%;
        margin: 0 2%;
        padding: 10px 1%;
        float: right;
    }

    .formitem {
        width: 96%;
        margin: 20px 2%;
    }

    .formitem input {
        width: 96%;
        margin: 5px 0;
        display: block
    }

    .footeritem {
        font-size: 15px
    }

    .btndemoblue {
        width: 90%;
        float: right;
        margin: 30px 2%
    }

    .courses {
        width: 90%;
        ;
        height: auto;
        margin: 10px 3%;
        padding: 0 2% 40px 2%
    }

    .btn-grad {
        width: 90%;
        padding: 10px 2%;
        margin: 15px 3%
    }

    #infobtns a {
        float: right
    }

    .infopic {
        width: 90%;
        height: auto;
        margin: 10px 5%;
    }

    #infobtns {
        width: 90%;
        margin: 10px 5%;
    }

    #prmsg {
        width: 90%;
        margin: 2.5%;
        padding: 2.5%
    }

    .offerrt,
    .offerlf {
        margin: 5px 2%;
        width: 96%;
    }

    .offerrt img {
        float: right;
        margin: 5px 2%;
        width: 96%;
        height: auto;
    }
}

.qh2 {
    margin: 0 0 20px 0;
    padding: 10px;
    background: #16a085;
    color: #fff;
    font-size: 20px;
    text-align: center;
    float: right;
    width: calc(100% - 20px);
}

.q {
    margin: 20px 0;
    width: 100%;
    float: right
}

.q h3 {
    margin: 0;
    padding: 10px;
    background: #2980b9;
    color: #fff;
    font-size: 20px;
}

.q p {
    background: #f5f5f5;
    padding: 10px;
    margin: 0;
    color: #111111;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    font-size: 18px
}

#single {
    width: 70%;
    margin: 1% 2.5%;
    float: right
}

#singlesb {
    float: left;
    left: 0;
    width: 22%;
    margin: 10px 2.5%;
    padding: 5px 0;
    position: fixed;
    height: 550px;
    background: #f0f0f0
}

.sbads {
    float: left;
    width: 90%;
    height: 60px;
    background: #2980b9;
    margin: 5px 2%;
    padding: 5px 3%;
    color: #ffffff
}

.sbads:hover {
    background: #27ae60;
    color: #ffffff
}