/* overwrites start */

[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
    margin-left: 0;
}

#mainMenu.sm-clean a {
    font-size: .9em;
    line-height: 1.4em;
    font-weight: bold;
}

#mainMenu.sm-clean {
    background: #e2e2e2;
    border-radius: 4px;
    height: 44px;
    padding: 0 5px;
    margin-top: 4px;
}

    #mainMenu.sm-clean ul {
        border: 1px solid #f5f5f5;
        background: #fff;
        border-radius: 2px !important;
        -webkit-box-shadow: 0 4px 3px 2px #00000024;
        box-shadow: 0 4px 3px 2px #00000024;
    }

        #mainMenu.sm-clean ul a {
            line-height: 2.2em;
        }

    #mainMenu.sm-clean > li > ul::before,
    #mainMenu.sm-clean > li > ul::after {
        border-color: transparent transparent #fff transparent;
    }

    #mainMenu.sm-clean ul a .sub-arrow {
        border-color: transparent rgb(150, 150, 150) transparent transparent;
        left: 2px;
    }

    #mainMenu.sm-clean ul a:hover,
    #mainMenu.sm-clean ul a:focus,
    #mainMenu.sm-clean ul a:active,
    #mainMenu.sm-clean ul a.highlighted {
        color: #2f87c2;
    }

    #mainMenu.sm-clean a:hover,
    #mainMenu.sm-clean a:focus,
    #mainMenu.sm-clean a:active,
    #mainMenu.sm-clean a.highlighted {
        color: #2f87c2;
    }

.tab {
    z-index: -1;
}

    .tab.active {
        z-index: 0;
    }

.tabs-nav__drag {
    margin: 30px 0 0;
    position: absolute;
    border-bottom: 2px solid #3c8acc;
}

.tabs-nav__item.active .tabs-nav__link {
    color: #2f87c2;
}

.tabs-nav__item {
    font-weight: bold;
}

.nav-mob {
    display: none;
}

.tabs {
    border-bottom: none;
}

#toast-container > div {
    width: 500px;
    opacity: .95;
    font-size: 1.1em;
}

#toast-container > :hover {
    -webkit-box-shadow: 5px 5px 12px -8px #000;
    box-shadow: 5px 5px 12px -8px #000;
}

/* overwrites end */

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

body {
    margin: 0;
    direction: rtl;
    font-family: main;
    font-size: .9em;
}

input,
select,
textarea,
.btn {
    font-family: main;
    font-size: .9em;
}

a {
    text-decoration: none;
}

.faded {
    opacity: .5;
}

.hide {
    display: none;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-right: 25px;
    margin-bottom: 5px;
    padding-top: 3px;
    cursor: pointer;
    font-size: 16px;
}

    .checkbox-container input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

.control_indicator {
    position: absolute;
    top: 3px;
    right: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
    border-radius: 2px;
    -webkit-box-shadow: 1px 2px 3px -1px #5556;
    box-shadow: 1px 2px 3px -1px #5556;
}

.checkbox-container:hover input ~ .control_indicator,
.checkbox-container input:focus ~ .control_indicator {
    background: #cccccc;
}

.checkbox-container input:checked ~ .control_indicator {
    background: #8a8ab3;
}

.checkbox-container:hover input:not([disabled]):checked ~ .control_indicator,
.checkbox-container input:checked:focus ~ .control_indicator {
    background: #8a8ab3;
}

.checkbox-container input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}

.control_indicator:after {
    -webkit-box-sizing: unset;
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .control_indicator:after {
    display: block;
}

.control-checkbox .control_indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}

.clearfix {
    clear: both;
}

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

.text-justify {
    text-align: justify;
}

.text-left {
    text-align: left;
}

.font-bold {
    font-weight: bold;
}

.m-t {
    margin-top: 15px;
}

.tick {
    list-style: none;
}

    .tick li::before {
        content: '✓';
        margin-left: 5px;
    }

.small {
    font-size: .75em;
    font-weight: bold;
    opacity: .85;
}

.alert {
    color: #d61729;
}

header {
    background: rgba(248, 248, 248, 0.9);
    -webkit-box-shadow: -3px -3px 5px 5px #0003;
    box-shadow: -3px -3px 5px 5px #0003;
    width: 100%;
    float: right;
    position: relative;
}

.desktop-header {
    z-index: 1;
}

.header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2px 10px;
    margin: auto;
    max-width: 1360px;
}

    .header > .col-side {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

        .header > .col-side > .inside-col {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

    .header > .col-center {
        -webkit-box-flex: 3;
        -ms-flex: 3;
        flex: 3;
    }

.top-logo {
    height: 46px;
    margin-left: 7px;
    opacity: .8;
    -webkit-filter: drop-shadow(1px 1px 1px #ddd);
    filter: drop-shadow(1px 1px 1px #ddd);
}

.top-message {
    position: absolute;
    background: #e2e2e2;
    z-index: 9999;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    font-weight: 500;
    padding: 3px;
}

@media (min-width: 768px) {
    #mainMenu > li {
        float: none;
        display: table-cell;
        width: 1%;
        text-align: center;
    }
}

.quick-search {
    border-radius: 3px;
    background: #f5f5f5;
    padding: 8px;
    -webkit-transition: all ease-in-out .2s;
    -o-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;
    -webkit-box-shadow: 5px 5px 5px -5px #999;
    box-shadow: 5px 5px 5px -5px #999;
}

.quick-search-focused {
    background: #fff;
    -webkit-box-shadow: 4px 4px 8px 0px #dedede;
    box-shadow: 4px 4px 8px 0px #dedede;
    ;
}

.quick-search-form {
    position: relative;
}

    .quick-search-form button {
        background: transparent;
        text-align: center;
        border: none;
        outline: none;
        padding: 2px 16px 0 0;
        color: #60a8d9;
    }

    .quick-search-form input {
        width: calc(100% - 45px);
        border: none;
        background: transparent;
        line-height: .8em;
        outline: none;
    }

.col-side.top-buttons {
    text-align: left;
    display: initial;
}

.top-buttons button {
    display: inline-block;
}

.top-shopping-cart {
    padding: 5px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: #555;
    width: 48px;
    height: 48px;
    margin-left: 20px;
    position: relative;
    outline: none;
    margin-top: 6px;
}

    .top-shopping-cart:hover {
        background: #eeeeee;
        border-color: rgb(202, 202, 202);
        cursor: pointer;
    }

@-webkit-keyframes top-shopping-cart-focused-animation {
    0% {
        background: #5f5f5f;
    }

    50% {
        background: #60a8d9;
    }

    100% {
        background: #5f5f5f;
    }
}

@keyframes top-shopping-cart-focused-animation {
    0% {
        background: #5f5f5f;
    }

    50% {
        background: #60a8d9;
    }

    100% {
        background: #5f5f5f;
    }
}

@-webkit-keyframes top-shopping-cart-focused-counter-animation {
    0% {
        border-color: #5f5f5f;
        background: #60a8d9;
    }

    50% {
        border-color: #60a8d9;
        background: #5f5f5f;
    }

    100% {
        border-color: #5f5f5f;
        background: #60a8d9;
    }
}

@keyframes top-shopping-cart-focused-counter-animation {
    0% {
        border-color: #5f5f5f;
        background: #60a8d9;
    }

    50% {
        border-color: #60a8d9;
        background: #5f5f5f;
    }

    100% {
        border-color: #5f5f5f;
        background: #60a8d9;
    }
}

.top-shopping-cart.focused {
    background: #5f5f5f;
    color: #efefef;
    -webkit-animation: top-shopping-cart-focused-animation 2s ease-in-out infinite;
    animation: top-shopping-cart-focused-animation 2s ease-in-out infinite;
}

    .top-shopping-cart.focused:hover {
        background: #3a3a3a;
        color: #fcfcfc;
        -webkit-animation: none;
        animation: none;
    }

        .top-shopping-cart.focused:hover .cart-counter.show {
            border-color: #3a3a3a;
            -webkit-animation: none;
            animation: none;
        }

.cart-container {
    display: inline-block;
    position: relative;
}

    .cart-container .cart-counter {
        position: absolute;
        right: -19px;
        top: -8px;
        background: #60a8d9;
        width: 26px;
        height: 26px;
        text-align: center;
        border-radius: 50%;
        line-height: 26px;
        font-weight: bold;
        color: white;
        border: 4px solid #5e5e5e;
        display: none;
        -webkit-animation: top-shopping-cart-focused-counter-animation 2s ease-in-out infinite;
        animation: top-shopping-cart-focused-counter-animation 2s ease-in-out infinite;
    }

        .cart-container .cart-counter.show {
            display: initial;
        }

    .cart-container #emptyCartMessage {
        display: none;
    }

        .cart-container #emptyCartMessage.show {
            display: block;
        }

    .cart-container .cart-details {
        position: absolute;
        background: #fff;
        padding: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 2px 9px -3px #000;
        box-shadow: 0 2px 9px -3px #000;
        top: 50px;
        width: 440px;
        text-align: right;
        right: -263px;
        display: none;
    }

        .cart-container .cart-details.show {
            display: initial;
        }

        .cart-container .cart-details::after {
            content: "";
            position: absolute;
            top: -11px;
            right: 274px;
            width: 0;
            height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 12px solid #fff;
            -webkit-filter: drop-shadow(0 -1px 1px #b9b9b9);
            filter: drop-shadow(0 -1px 1px #b9b9b9);
        }

        .cart-container .cart-details .cart-details-header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            background: #e1e1e1;
            padding: 0 8px 0 0;
            border-radius: 26px 26px 0 26px;
            border-bottom: 1px dotted #bcbcbc;
        }

            .cart-container .cart-details .cart-details-header > div {
                -webkit-box-flex: 20;
                -ms-flex: 20;
                flex: 20;
                color: #555;
                line-height: 34px;
            }

        .cart-container .cart-details .body {
            padding: 20px 0;
            max-height: 320px;
            overflow: auto;
            border: 2px solid #e1e1e1;
            border-top: 16px solid #e1e1e1;
            margin-top: 5px;
            border-radius: 4px 4px 0 0;
        }

    .cart-container .total-price {
        background: #e1e1e1;
        color: #444;
        font-weight: 400;
        font-size: 1.1em;
        margin: 0 0 8px 0;
        border-radius: 0 0 4px 4px;
    }

    .cart-container .cart-details .footer {
        text-align: center;
    }

        .cart-container .cart-details .footer button {
            background: #6b6b6b75;
            color: #fff;
            border: none;
            margin: 0 auto;
            font-family: inherit;
            padding: 5px 15px;
            border-radius: 3px;
            font-size: 1.1em;
            -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
            transform: scale(.8);
            margin-top: 2px;
        }

            .cart-container .cart-details .footer button.main {
                background: #60a8d9;
                -webkit-transform: none;
                -ms-transform: none;
                transform: none;
            }

    .cart-container .cart-details .cart-details-header button {
        background: #565656;
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        text-align: center;
        -webkit-transform: scale(.65);
        -ms-transform: scale(.65);
        transform: scale(.65);
        opacity: .9;
    }

#cartForm {
    width: 100%;
}

    #cartForm > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background: #f0f0f0;
        margin: 03px 0;
        padding: 3px;
    }

        #cartForm > div:nth-child(2n + 10) {
            background: #ddd;
        }

        #cartForm > div > span:first-child {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            font-weight: 600;
            font-size: .8em;
            opacity: .5;
        }

        #cartForm > div > span:nth-child(2) {
            -webkit-box-flex: 20;
            -ms-flex: 20;
            flex: 20;
            font-size: .9em;
            font-weight: 600;
        }

            #cartForm > div > span:nth-child(2) span {
                font-size: .7em;
                opacity: .7;
                display: block;
            }

        #cartForm > div > span:nth-child(3) {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            color: #710741;
            font-size: 1.1em;
            font-weight: 600;
            line-height: 30px;
        }

.remove-from-cart-btn {
    border: none;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    color: #8e0c0c;
    background: white;
    border-radius: 4px;
}

#saveOrderResult {
    margin: 4px;
    margin-top: 9px;
    padding: 4px;
    border-radius: 35px;
    background: #ddd;
    display: none;
}

    #saveOrderResult.error {
        background: #ff77a3;
        color: #171717;
    }

    #saveOrderResult.success {
        background: #86ff77;
        color: #484848;
    }

.top-buttons .btn {
    padding: 8px 14px;
    border: none;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    color: #444;
    vertical-align: super;
}

    .top-buttons .btn:last-child {
        background: #60a8d9;
        color: #fff;
    }

.general-container > .footer {
}

.general-container .footer .contact {
    padding: 30px;
    background: #ECEFF1;
    text-align: center;
}

.general-container .footer .details {
    background: #263238;
    color: #fff;
    padding: 80px;
    display: grid;
    grid-template-columns: 40% 1fr 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 70px;
}

.general-container .footer .links img {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    padding: 5px;
    box-shadow: 5px 6px 12px 0px #000;
    max-height: 136px;
}

.general-container .footer-externals {
    background: #263238;
    display: grid;
    grid-auto-flow: column;
    column-gap: 15px;
    padding: 15px;
    justify-content: center;
    align-items: center;
}

.general-container .footer .certs {
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    grid-gap: 15px;
    align-items: center;
}

.general-container .footer .copyright {
    background: #263238;
    color: #fff;
    padding-bottom: 20px;
    text-align: center;
}

.general-container .footer .contact > div {
    font-weight: bold;
    font-size: 120%;
}

.general-container .footer .contact select {
    padding: 5px;
    border-radius: 25px;
    border: 10px solid #fff;
    background: #fff;
    text-align-last: center;
    text-align: center;
}

.general-container .footer .details .header {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
}

.general-container .footer .details .address {
    grid-column-start: 1;
    grid-row-start: 2;
    margin-top: -150px;
}

.general-container .footer .links a {
    display: block;
    color: #fff;
    margin-top: 10px;
}

.general-container .footer .details .social {
    grid-row-start: 2;
    grid-column-start: 1;
}

.general-container .footer .links {
    min-height: 200px;
}

.general-container .footer [class^="icon-"]:before, [class*=" icon-"]:before {
    font-size: 32px;
    color: white;
    margin: 0;
    margin-left: 10px;
}

.banner {
    height: 650px;
    background-image: url(/content/images/hpci4.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-bottom: 1px solid #868686;
    padding-top: 75px;
}

.subs-holder .banner {
    height: 350px;
}

    .subs-holder .banner::before {
        -webkit-box-shadow: 0 0 50px inset rgba(0, 0, 0, 0.49);
        box-shadow: 0 0 50px inset rgba(0, 0, 0, 0.49);
    }

.banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    -webkit-box-shadow: 0 0 200px inset rgba(0, 0, 0, 0.49);
    box-shadow: 0 0 200px inset rgba(0, 0, 0, 0.49);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#d5d4d0), color-stop(1%, #c8a1cd), color-stop(31%, #eeeeec), color-stop(75%, #ffffff), to(#e9e9e7));
    background-image: -o-linear-gradient(bottom, #d5d4d0 0%, #c8a1cd 1%, #eeeeec 31%, #ffffff 75%, #e9e9e7 100%);
    background-image: linear-gradient(to top, #d5d4d0 0%, #c8a1cd 1%, #eeeeec 31%, #ffffff 75%, #e9e9e7 100%);
    opacity: .75;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.banner-content {
    text-align: center;
    padding-top: 40px;
    color: #555;
    position: relative;
    font-size: 1.1em;
    font-weight: bold;
}

.banner-real-content {
    padding: 25px 90px;
    border-radius: 4px;
    display: inline-block;
    -webkit-box-shadow: 6px 7px 5px -5px #00000040;
    box-shadow: 6px 7px 5px -5px #00000040;
    background-image: -o-radial-gradient(circle, #ffffffb3, #f6f6f673, #ecececba, #e3e3e35c, #dadada66);
    background-image: radial-gradient(circle, #ffffffb3, #f6f6f673, #ecececba, #e3e3e35c, #dadada66);
    background-image: -o-radial-gradient(circle, rgba(255, 255, 255, .55), rgba(252, 252, 252, .55), rgba(250, 250, 250, .55), rgba(247, 247, 247, .55), rgba(245, 245, 245, .55), rgba(244, 244, 244, .55), rgba(242, 242, 242, .55), rgba(241, 241, 241, .55), rgba(240, 240, 240, .55), rgba(240, 240, 240, .55), rgba(239, 239, 239, .55), rgba(238, 238, 238, 0.55));
    background-image: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(252, 252, 252, .55), rgba(250, 250, 250, .55), rgba(247, 247, 247, .55), rgba(245, 245, 245, .55), rgba(244, 244, 244, .55), rgba(242, 242, 242, .55), rgba(241, 241, 241, .55), rgba(240, 240, 240, .55), rgba(240, 240, 240, .55), rgba(239, 239, 239, .55), rgba(238, 238, 238, 0.55));
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

    .banner-real-content h1 {
        margin-top: 0;
    }

    .banner-real-content p {
        margin-bottom: 0;
    }

.header-btn {
    color: #fff;
    background: rgba(96, 168, 217, 0.85);
    padding: 16px 32px;
    border-radius: 8px;
    display: block;
    margin: auto;
    margin-top: 30px;
    max-width: 270px;
    font-weight: 100;
    font-size: 1.2em;
    text-shadow: none;
    border: 5px solid #ffffff6b;
    border-style: double;
}

.top-seller {
    position: relative;
    margin-top: -293px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .top-seller::before {
        content: "دانشجویان در حال یادگیری دروس زیر هستند";
        color: #9c5475;
        position: absolute;
        top: -25px;
        text-align: center;
        left: 10px;
        right: 10px;
        opacity: .95;
        font-weight: bolder;
        text-shadow: 1px 1px 2px #fff;
        border-bottom: 2px dotted #756491ba;
        -webkit-filter: drop-shadow(0px 2px 5px #ba9cd9);
        filter: drop-shadow(0px 2px 5px #ba9cd9);
    }

    .top-seller .offer-wrapper {
        max-width: 20%;
        -webkit-box-shadow: 7px -7px 10px -10px #433850;
        box-shadow: 7px -7px 10px -10px #433850;
    }

.offer-wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #fff;
    margin: 8px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    height: 100%;
    -webkit-transition: all ease-in-out .1s;
    -o-transition: all ease-in-out .1s;
    transition: all ease-in-out .1s;
    max-width: 25%;
}

    .offer-wrapper:hover {
        -webkit-box-shadow: 2px 2px 6px -2px #0a0a0a9e;
        box-shadow: 2px 2px 6px -2px #0a0a0a9e;
    }

        .offer-wrapper:hover .offer .overlay {
            opacity: .3;
        }

        .offer-wrapper:hover .offer .info-tag {
            color: #eaeaea;
            background: #383838;
            top: 40px;
        }

        .offer-wrapper:hover .offer .content {
            background: rgba(0, 0, 0, 0.5);
        }

.offer .cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 300px;
}

.offer .overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#a18cd1), to(#fbc2eb));
    background-image: -o-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%);
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    opacity: .85;
    -webkit-transition: all ease-in-out .1s;
    -o-transition: all ease-in-out .1s;
    transition: all ease-in-out .1s;
}

.offer > .top-part {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.offer img {
    width: 100%;
}

.offer .content {
    position: absolute;
    bottom: 15px;
    right: 0;
    left: 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
}

    .offer .content > span {
        display: block;
    }

    .offer .content > .stars {
        color: rgba(255, 255, 255, 0.666);
        display: block;
    }

        .offer .content > .stars .star-on {
            color: #fff;
        }

.offer .title {
    margin-top: 10px;
    font-size: 1.15em;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 0 1px #000;
}

.offer .author {
    color: #fff;
    margin-top: 5px;
    text-shadow: 1px 0 1px #000;
    font-size: 1.05em;
    font-weight: bold;
}

.offer .info {
    padding: 5px;
    color: #777;
    font-weight: 700;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#e6e9f0), to(#eef1f5));
    background-image: -o-linear-gradient(bottom, #e6e9f0 0%, #eef1f5 100%);
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}

    .offer .info p {
        font-size: .9em;
        color: #555;
        line-height: 2.2em;
        text-align: justify;
    }

.offer .tags {
    margin: 7px;
}

    .offer .tags a {
        padding: 5px;
        border-radius: 4px;
        background: #c6c4f2;
        color: #39537a;
    }

.offer .buy {
    direction: ltr;
    padding: 7px;
    border-radius: 3px;
    margin-top: 15px;
    background-image: -webkit-gradient(linear, left top, right top, from(#868f96), to(#596164));
    background-image: -o-linear-gradient(left, #868f96 0%, #596164 100%);
    background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
}

    .offer .buy .price {
        font-size: 1.3em;
        border-radius: 3px;
        color: #fff;
    }

    .offer .buy .price-outdated {
        text-decoration: line-through;
        color: #dadada;
        padding-left: 7px;
    }

    .offer .buy .price::after {
        content: "تومان";
        padding: 5px;
        font-size: .6em;
    }

    .offer .buy .price-free {
        color: gold;
    }

    .offer .buy button {
        float: right;
        background: #60a8d9;
        border: none;
        padding: 5px 15px;
        font-family: inherit;
        color: #fff;
        border-radius: 4px;
        font-weight: 500;
    }

.container .splide .offer-wrapper {
    max-width: initial;
    width: 350px;
}

.info-tag {
    position: absolute;
    top: 50px;
    left: 0;
    padding: 5px;
    padding-left: 15px;
    background: rgba(255, 255, 255, 0.75);
    color: #000;
    border-radius: 0 8px 8px 0;
    font-size: .8em;
    font-weight: bolder;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.home-ribbon {
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 15px 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#ff758c), to(#ff7eb3));
    background-image: -o-linear-gradient(left, #ff758c 0%, #ff7eb3 100%);
    background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
    color: #fff;
    font-size: 1.05em;
}

    .home-ribbon .home-ribbon-message {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
    }

        .home-ribbon .home-ribbon-message p {
            padding: 0;
            margin: 0;
        }

        .home-ribbon .home-ribbon-message span {
            margin-left: 10px;
        }

.home-browse-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 25px;
    padding-top: 5px;
}

    .home-browse-container .message {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: justify;
        padding: 0 25px;
        font-size: .93em;
    }

    .home-browse-container .browse {
        -webkit-box-flex: 3;
        -ms-flex: 3;
        flex: 3;
    }

.home-tabs-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .home-tabs-container .offer .overlay {
        background-image: -o-linear-gradient(30deg, #29323c 0%, #485563 100%);
        background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
        opacity: .6;
    }

    .home-tabs-container .offer {
        font-size: .85em;
    }

.home-browse-container .browse .more {
    margin: 15px;
    display: block;
    text-align: left;
    font-weight: 700;
    color: #555;
}

    .home-browse-container .browse .more::after {
        content: "»";
        margin-right: 5px;
    }

.bot-message {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.15))), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #5d5d5d;
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), -o-radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #5d5d5d;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #5d5d5d;
    background-image: url(/content/images/ptrn.png);
    padding: 100px;
    background-blend-mode: multiply, multiply;
    text-align: center;
    color: #ffffff;
    font-size: 1.4em;
    text-shadow: 1px 2px 5px #000;
    position: relative;
}

    .bot-message .btn-go {
        padding: 10px 40px;
        background: #ff758c;
        border-radius: 3px;
        text-shadow: none;
        color: #fff;
        margin-top: 15px;
        display: inline-block;
    }

    .bot-message::before {
        content: "";
        background: red;
        position: absolute;
        top: -15px;
        left: 0;
        right: 0;
        bottom: 100%;
        background-image: -webkit-gradient(linear, left top, right top, from(#ff758c), to(#ff7eb3));
        background-image: -o-linear-gradient(left, #ff758c 0%, #ff7eb3 100%);
        background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
    }

.departments {
    padding: 10px;
    margin: auto;
    max-width: 1360px;
}

    .departments ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .departments li {
        display: inline-block;
        width: calc(100% / 4);
        text-align: center;
        padding: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .departments li a {
            display: block;
            padding: 15px 25px;
            background: rgb(235, 235, 235);
            font-size: 1.15em;
            color: rgb(39, 39, 39);
            border-radius: 4px;
            -webkit-transition: all ease-in-out .1s;
            -o-transition: all ease-in-out .1s;
            transition: all ease-in-out .1s;
            -webkit-box-shadow: 3px 5px 3px -3px #b5b5b5;
            box-shadow: 3px 5px 3px -3px #b5b5b5;
        }

            .departments li a:hover {
                background: #60a8d9d9;
                -webkit-box-shadow: 3px 5px 3px -4px #8a8a8a;
                box-shadow: 3px 5px 3px -4px #8a8a8a;
                color: #fff;
            }

.news-container {
    margin: 20px 0 7px 0;
    padding: 50px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    background-image: url(/content/images/hpci4.jpg);
    background-position: center;
    background-size: cover;
}

    .news-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url(/content/images/hpci4.jpg);
        background-position: center;
        background-size: cover;
        margin: 50px;
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }

    .news-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        opacity: .75;
    }

    .news-container .news {
        z-index: 2;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        border-radius: 2px;
        overflow: hidden;
        margin: 1px;
    }

        .news-container .news .body {
            padding: 20px;
            background: rgba(255, 255, 255, 0.68);
            height: 100%;
        }

    .news-container h5 {
        margin: 5px;
    }

.user-stories {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 35px;
}

    .user-stories .user-story {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 15px;
        background: #f6f6f6;
        margin: 15px;
        border-radius: 5px;
        -webkit-box-shadow: 2px 2px 5px -4px #000;
        box-shadow: 2px 2px 5px -4px #000;
        max-width: 35%;
    }

        .user-stories .user-story .header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

            .user-stories .user-story .header img {
                border-radius: 50%;
                width: auto;
                height: 100px;
            }

            .user-stories .user-story .header div {
                -webkit-box-flex: 5;
                -ms-flex: 5;
                flex: 5;
                padding: 25px;
                font-weight: bold;
            }

.user-stories-header {
    margin-top: 55px;
    font-size: 1.2em;
    font-weight: bold;
    padding-right: 35px;
}

.trusted ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    width: 70%;
    text-align: center;
}

    .trusted ul li {
        display: inline-block;
        margin: 20px 35px;
    }

        .trusted ul li img {
            max-width: 90px;
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
            opacity: .6;
        }

.trusted > div {
    text-align: center;
    color: #777;
    font-weight: bolder;
}

.general-container.out-of-focus {
    -webkit-filter: saturate(0);
    filter: saturate(0);
}

@-webkit-keyframes sale-overlay-animation {
    0% {
        top: -10px;
        opacity: 0;
    }

    100% {
        top: 0;
        opacity: 1;
    }
}

@keyframes sale-overlay-animation {
    0% {
        top: -10px;
        opacity: 0;
    }

    100% {
        top: 0;
        opacity: 1;
    }
}

.sale-overlay {
    -webkit-animation: sale-overlay-animation .2s ease-in-out forwards;
    animation: sale-overlay-animation .2s ease-in-out forwards;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 6, 6, 0.777);
    z-index: 9;
    -webkit-box-shadow: 0 0 200px #000 inset;
    box-shadow: 0 0 200px #000 inset;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.sale-overlay-show {
    display: initial !important;
}

.sale-overlay .content {
    width: 365px;
    margin: auto;
    margin-top: 2.5%;
    background: rgba(245, 245, 245, 0.9);
    padding: 10px;
    border-radius: 8px;
    -webkit-box-shadow: 2px 2px 15px 3px #000;
    box-shadow: 2px 2px 15px 3px #000;
    position: relative;
}

.sale-overlay .real-content {
    padding-top: 15px;
    text-align: center;
}

    .sale-overlay .real-content img {
        border-radius: 4px;
        -webkit-box-shadow: 2px 4px 3px -4px;
        box-shadow: 2px 4px 3px -4px;
        max-width: 100%;
    }

.sale-overlay .close {
    position: absolute;
    left: 12px;
    top: 19px;
    border: none;
    background: none;
    font-weight: bolder;
    color: rgb(231, 80, 80);
    outline: none;
}

    .sale-overlay .close:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    .sale-overlay .close span::before {
        font-size: 16px;
    }

.sale-overlay .message {
    padding: 7px;
    border-radius: 4px;
    color: #cacaca;
    font-weight: bolder;
    background: #5f5f5f;
}

.sale-overlay .footer {
    text-align: center;
}

    .sale-overlay .footer > div:first-child {
        padding: 5px;
        background: #32b8d6;
        color: #fff;
        border-radius: 4px;
    }

.sale-overlay h3#saleOverlayTitle {
    font-size: 1em;
    color: #333;
}

.sale-overlay .footer button {
    margin: 4px;
    margin-bottom: 0;
    border: none;
    -webkit-box-shadow: 2px 2px 4px -3px #555;
    box-shadow: 2px 2px 4px -3px #555;
    font-size: 1.2em;
    font-family: inherit;
    padding: 5px 30px;
    border-radius: 4px;
}

.sale-overlay button.ok {
    background: #32b8d6;
    color: #fff;
    font-weight: bold;
}

.sale-overlay button.cancel {
    background: #fff;
}

.browse-banner {
    margin: 0;
    padding: 70px;
    padding-bottom: 10px;
    background-image: -o-linear-gradient(330deg, #fdfbfb 0%, #ebedee 100%);
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.grid-browse {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .grid-browse .offer > .overlay {
        background-image: -o-linear-gradient(30deg, #29323c 0%, #eeeff0 100%);
        background-image: linear-gradient(60deg, #29323c 0%, #eeeff0 100%);
    }

.sub-headline {
    margin: 7px;
    padding: 15px;
    padding-right: 35px;
    font-size: 1.3em;
    font-weight: 500;
}

.featured {
    padding: 10px;
    margin: 15px;
    border-radius: 3px;
    -webkit-box-shadow: 3px 3px 15px -5px #888;
    box-shadow: 3px 3px 15px -5px #888;
    position: relative;
}

    .featured > div {
        margin: 5px;
        display: inline-block;
        overflow: hidden;
        height: 300px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .featured > div:first-child {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            background-size: cover;
            width: 362px;
            background-repeat: no-repeat;
            background-position: right;
            border-radius: 7px;
        }

        .featured > div:last-child {
            -webkit-box-flex: 3;
            -ms-flex: 3;
            flex: 3;
        }

.featured-info .title {
    font-size: 1.3em;
    font-weight: 500;
}

.featured-info {
    padding-right: 35px;
    width: calc(100% - 405px);
}

    .featured-info .author {
        font-size: 1.1em;
        font-weight: 500;
        margin-top: 7px;
    }

    .featured-info .description {
        margin-top: 15px;
    }

.featured .stars span {
    color: #d7d7d7;
}

.featured .stars {
    margin-top: 10px;
}

    .featured .stars span.star-on {
        color: goldenrod;
    }

.featured .product-info ul {
    margin: 0;
    margin-top: 10px;
    padding: 0;
    color: #555;
}

    .featured .product-info ul li:first-child {
        padding-right: 0;
    }

    .featured .product-info ul li {
        display: inline-block;
        padding-right: 25px;
        font-weight: 500;
    }

.featured .browse-btn {
    position: absolute;
    left: 15px;
    bottom: 15px;
    padding: 15px 35px;
    background: #2f87c2;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 3px;
}

.grid-teachers {
    max-width: 1360px;
    margin: auto;
    padding: 35px;
    padding-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .grid-teachers .teacher {
        padding: 20px;
        -webkit-box-shadow: 1px 2px 5px -3px #000;
        box-shadow: 1px 2px 5px -3px #000;
        background: #f5f5f5;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        border-radius: 4px;
        margin: 10px;
        text-align: center;
    }

        .grid-teachers .teacher img {
            border-radius: 50%;
        }

        .grid-teachers .teacher .author {
            font-weight: 500;
            font-size: 1.2em;
        }

        .grid-teachers .teacher div {
            margin-top: 15px;
        }

.browse-main-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 25px;
    padding-top: 0;
    max-width: 1360px;
    margin: auto;
}

    .browse-main-content .side-bar {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
    }

.browse-main-content-headline {
    max-width: 1360px;
    margin: auto;
}

.browse-main-content .side-bar > div {
    margin: 15px 5px;
    -webkit-box-shadow: 1px 2px 4px -1px #777;
    box-shadow: 1px 2px 4px -1px #777;
    padding: 8px;
    border-radius: 7px;
}

    .browse-main-content .side-bar > div > div {
        font-size: 1.15em;
        font-weight: 500;
    }

.browse-main-content .real-content {
    -webkit-box-flex: 7;
    -ms-flex: 7;
    flex: 7;
}

.real-content .featured {
    -webkit-box-shadow: 0 0 8px -2px #8f8f8f;
    box-shadow: 0 0 8px -2px #8f8f8f;
    margin: 15px;
}

.course {
    color: #333;
    padding-top: 120px;
    padding-bottom: 50px;
    background: rgba(255,255,255,.9);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.15))), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #ffffffe3;
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), -o-radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #ffffffe3;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #ffffffe3;
    background-blend-mode: multiply, multiply;
    height: 350px;
    position: relative;
    -webkit-box-shadow: 0 0 160px inset #0000008f;
    box-shadow: 0 0 160px inset #0000008f;
}

.background-video {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
}

    .background-video video {
        width: 100%;
    }

.course .course-details {
    max-width: 1360px;
    margin: auto;
    padding: 20px;
    font-size: 1.1em;
}

.product-info li span {
    float: right;
    margin-left: 10px;
    opacity: .65;
}

.course .course-details a {
    color: #404040;
}

.course .course-details .views-counter {
    font-size: 16px;
    opacity: .85;
}

@-webkit-keyframes stars-loading-animation {
    0% {
        opacity: .2;
    }

    50% {
        opacity: .7;
    }

    100% {
        opacity: .2;
    }
}

@keyframes stars-loading-animation {
    0% {
        opacity: .2;
    }

    50% {
        opacity: .7;
    }

    100% {
        opacity: .2;
    }
}

.course .course-details .stars.loading {
    -webkit-animation: stars-loading-animation 2s ease-in-out infinite;
    animation: stars-loading-animation 2s ease-in-out infinite;
}

.course .course-details .stars span {
    opacity: .5;
}

    .course .course-details .stars span:hover {
        cursor: pointer;
    }

    .course .course-details .stars span.rate {
        opacity: 1;
        color: rgb(105, 220, 21);
        -webkit-filter: drop-shadow(-1px 2px 1px #055);
        filter: drop-shadow(-1px 2px 1px #055);
    }

    .course .course-details .stars span.star-on {
        opacity: 1;
    }

.course .course-details > .info .description {
    text-align: justify;
    margin-top: 10px;
    height: 160px;
    overflow: auto;
    padding-left: 10px;
}

.course .course-details > .info {
    width: 65%;
    text-shadow: 1px 0 5px #d0d0d0;
    font-weight: bold;
}

.course .course-details .title {
    font-size: 1.6em;
    font-weight: 700;
}

.course .course-details .star-on {
    color: gold;
}

.course .course-details .star-on {
    color: gold;
}

.course-details .product-info ul {
    margin: 0;
    margin-top: 10px;
    padding: 0;
    color: #000;
}

    .course-details .product-info ul li:first-child {
        padding-right: 0;
    }

    .course-details .product-info ul li {
        display: inline-block;
        padding-right: 25px;
    }

.course-details .preview {
    margin-top: -180px;
    float: left;
    background: #e8e8e8;
    color: #222;
    padding: 2px;
    -webkit-box-shadow: 0 0 5px 3px #00000054, 0 0 50px #a2a2a266 inset;
    box-shadow: 0 0 5px 3px #00000054, 0 0 50px #a2a2a266 inset;
    margin-bottom: 15px;
    border-radius: 4px;
}

.watch-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 999;
    display: none;
    color: #eee;
    overflow: auto;
    -webkit-box-shadow: 0 0 150px #000 inset;
    box-shadow: 0 0 150px #000 inset;
}

.close-watch-overlay {
    position: absolute;
    left: 15px;
    top: 15px;
    background: #555;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    border: none;
    outline: none;
}

    .close-watch-overlay:hover {
        background: #de4c4c;
    }

    .close-watch-overlay span::before {
        font-size: 1.2em;
    }

.watch-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 70%;
    margin: 0 auto;
    margin-top: 5%;
    padding: 15px;
    background: #2b2b2b;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 15px -5px #000;
    box-shadow: 0 5px 15px -5px #000;
    border: 1px solid #555;
}

    .watch-container > div {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .watch-container > div:first-child {
            -webkit-box-flex: 3;
            -ms-flex: 3;
            flex: 3;
            background: #424242;
            padding: 10px;
            border-left: 14px solid #2b2b2b;
            border-radius: 8px;
            -webkit-box-shadow: 8px 5px 10px -5px #000;
            box-shadow: 8px 5px 10px -5px #000;
        }

div#watchTitle {
    font-size: 1.2em;
    font-weight: bold;
}

.watch-container > div:last-child {
    -webkit-box-flex: 8;
    -ms-flex: 8;
    flex: 8;
    -webkit-box-shadow: -8px -5px 10px -5px #000;
    box-shadow: -8px -5px 10px -5px #000;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    background: #424242;
    line-height: 0;
    position: relative;
}

.watch-container.no-video > div:last-child {
    display: none;
}

.watch-container > div:last-child div p {
    padding: 0 15px 8px 15px;
    text-align: justify;
    line-height: 1.7em;
    margin-bottom: 6px;
}

video#watchVideo {
    width: 100%;
    outline: none;
}

.watch-container > div:last-child::after {
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAA+CAMAAAC2ow3TAAAAk1BMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////82Vn9fAAAAMHRSTlMA17wgDt/L7pD00+RVLOkJxai4s4kzrsBAnWkm+fxOc3+YBW4TXHnbzqJjOhtHhBev+7VVAAAGPElEQVQYGb3BB3Lc1gIEwEF8eMhhkTOwOc79T/eBpaxvU1yKlKvcjd+apTiqQh5r/BsaniLFLfOupK8B0Gv8Cc1qEh2LLEJEFGQEwGqsGt82H/ycdgBgTBARLmlMCPzQtEcN33IzhSFMyR7QlBARUZFyi0oYYWkqQ4Cvq+hIinNIOSpC7hHxerWURpnt6E6qFnN8XSEdQYEzZVhWGnDiA0BhCWrbppWhYIevG6j1LIO9h4X+qLKbpgOYCmTcpIK0dXxdsoHPDqirSPF94bAV4f4CFJQXi6T/wBfoOlYl4crSVfkPpntvreBAygqAht8xRQBMedMBkcNFq5SDe7lcbvvSIA31AS2jCeDEFJ/bN6YB2PIC3AVJZ+we+IvumqSlA3M766YTOxM+47FC7ChGDWQknXuNf5jOPo0acNk4KZwYnzEUAImhYVJJjh5+cY0pCuAWa4DGCq9ZjYbFBCQke3xoYJviza318MqOZ7yJSPZ4YU+h4anmEa/caPQBFmeSA166U8EiGFpyxisWaRRAIMkMK2+Meg1/2Van0w6LkCOAjCsPr7gmLcAijS0WNSnJ0xYrLyLZcgRwlUyBkWQTp3ipoweN5A6rmBekFrkDMJDZ7hpsWACYqQIeRVbgE9ERGMkcT22ChWdy8EyqFyy2PAGYHF4A44RXUh0IeIYuyTNWk39MsXJJucNTzRKLnhGwOeIFjfKwyYSOihQ1VkXLRseiI228ubHD4iqbLTym6Rh2+JXL1QCoZI6njqSLYNsz75uwsiLz1OfSwyrhDggpfLLHL2aj2EWZB12QG7wxyENsCNKwff7Q+D0WPU/ALbttfVLDe5GBp4Jsd1gFvSSpClpdNFqllCbfXAGkNPFkkhe8F8d4qkiZYuEKmg39PU9d5iiOanFOh5aLEwBdCh2rkjzjPXXGU0Y6GoCBhosNyTAIqZ5ItyT23O02J0YAHGpYWeQd7wl1Yy02DplPQMr4AQRHtprLQ24nRqwrBk9YVJwxOaxuXdfdEvKO9yR/UgH0rLGwyC5hbFMR9DzaAVbCBFT+dMd7O/4UAvBYAri0Bk1XUDH8g9AtGhMWPQcg508qfnEeNz9csJhpd7pibHN2G9pGI7KSsxyBQqWqA4N0DsrhoCiKk+E1b6Nj0fk0mOnaUekV+uM94wZWO5jkXQe8vtZ0/fHYPh7XLV6pUdHFKthxYZt09qexGMjkIEl/42ExcovPaKmXVpENjSOePO4LKz+EpC1IcXTs+8HR8WRLDbPa4RWz9YXScouDg6eEWwA6rgdH0vR0fUJFDyuNJ2BDGnOAD6X78ZB1WY09Uyz0RsVTp5BHDatHa2G1p4vAUHLbF2d8pDgaki6AK2MsrtxjsTO58B948kOshNDRSzO23MHCRyzGB8WK7kDJGsCVPeAeuQh3Bs9YGQoWM/fARpgOlT0+9LDKxGzkHthSBTD5vpZypWrQEx47oGYJQG9FAN0y1VwIXvGhvX20ucPizg6A13DV3HUsXEGhUngAIu6APfPYKlQrwIdKqZhGhZVBHYA27K1jVODN5MaGWgCoGAWhVSmKTRevpEpito6ORU0lwAsFDR2Dbcaxyhkv3aU9GwlWLm0dH3LpewD2YRzG7oSXus3eylhg5dLw8IGefgpgxzAbzQs+MUtfmmWA1Y3s8Z4X06wBBJajKOZli0/saGRJq26x0lQedvg7byTLKxalk4QGK3xqk4S2wxTWgEUlKaxii9WUnhMyvAGXC2qaajLer/hcIu32jDMtrPSzTTbHMM9zh6TqTgD2HNTEzA8ZfscTrYuCoY4fLkOiCNIPo8rDmw1pDqZzDvA77g0aw6N9wf/ptbfFkx4Au1j1VbWaA3xB3ZiJ3dh9EFz7C/7uMRyKbW3zPAtlxJd0SmQcw5yJbVmRjp+0zUxZhP5JOc+n5DHhS4KEzVlVE9qVvQGmFE83pp5vGW1skX2Ar9KzvHTKKA99eXDT0t9qQFCcOSAyrCYuT3mKb7gqjP1SOarHxqGTNy5KhkYEjVVMBd+UzqO07TCO/fyYH2hDFWqYA7EsMhffpo2HSCamk2UnW5yw8fPMuaI2PfyRR51EgokcFJnBZWvZOwAT/tTWtQp1E9HCFNuXWsO/NV31WwBgwn/qf7wBvpgenqgJAAAAAElFTkSuQmCC');
    position: absolute;
    left: 0;
    top: 8px;
    opacity: .7;
    -webkit-filter: drop-shadow(0 0 2px #000);
    filter: drop-shadow(0 0 2px #000);
}

ul#watchFiles {
    list-style: none;
    padding: 0;
}

    ul#watchFiles a {
        color: #fff;
        display: block;
        padding: 5px;
        background: #4c4c4c;
        margin: 1px;
        border-radius: 4px;
    }

        ul#watchFiles a:hover {
            background: #303030;
        }

.prcatice-files-heading {
    color: gold;
}

.course-data .comments {
    border: 2px solid #999;
    background: #f1f1f1;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

    .course-data .comments .title {
        font-size: 1.1em;
        margin-bottom: 5px;
        color: #777;
        font-weight: bold;
    }

        .course-data .comments .title span {
            margin-left: 8px;
        }

    .course-data .comments .message {
        padding: 10px;
        border: 1px solid;
        border-radius: 4px;
        margin: 5px;
        text-align: center;
    }

        .course-data .comments .message.error {
            border-color: #8e0c0c;
            color: #8e0c0c;
            background-color: #efe4e4;
        }

        .course-data .comments .message.warning {
            border-color: #8e700c;
            color: #8e700c;
            background-color: #efefe4;
        }

.course-details .preview .price {
    padding-right: 25px;
    font-size: 1.2em;
    font-weight: bolder;
}

.course-details .preview .price-free {
    padding-right: 25px;
    font-size: 1.2em;
    font-weight: bolder;
    color: #4c8ab5;
}

.course-details .preview .price-unit {
    font-size: .8em;
    margin-right: 5px;
    font-weight: bold;
    opacity: .7;
}

.course-details .preview .buy {
    width: 90%;
    margin: 5px 5%;
    background: #60a8d9;
    color: #fff;
    border-radius: 3px;
    padding: 7px 15px;
    font-family: inherit;
    border: none;
    font-size: 1.2em;
}

.course-details .preview .course-content {
    margin: 15px;
    font-weight: 600;
}

    .course-details .preview .course-content ul {
        list-style: disc;
        opacity: .85;
    }

.course-data {
    max-width: 1360px;
    margin: auto;
    color: #333;
    font-size: 1.1em;
    margin-top: 5px;
}

    .course-data .learn {
        width: 980px;
        padding: 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 4px;
        font-weight: bold;
        color: #4c4c4c;
        border: 2px solid #999;
        background: #f1f1f1;
        margin-top: 15px;
    }

        .course-data .learn .title {
            font-size: 1.1em;
            margin-bottom: 5px;
            color: #777;
        }

        .course-data .learn ul {
            margin: 0;
        }

    .course-data .data {
        width: 980px;
        padding: 25px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 4px;
        margin-top: 15px;
        margin-bottom: 15px;
        background: #4c4c4c;
        color: #dedede;
    }

        .course-data .data .headline {
            font-size: 1.4em;
            font-weight: bolder;
            margin-bottom: 15px;
        }

        .course-data .data .real-data > div {
            font-size: 1.2em;
            font-weight: bold;
            margin: 15px;
            border-radius: 7px;
            -webkit-box-shadow: 0 0 7px -3px #000;
            box-shadow: 0 0 7px -3px #000;
        }

            .course-data .data .real-data > div > div {
                font-size: .9em;
            }

.topic-show {
    position: relative;
}

    .topic-show .heading {
        background: #eaeaea;
        border-radius: 8px;
        color: #4c4c4c;
        font-weight: bold;
        padding: 6px 8px;
        -webkit-transition: background .2s ease-in-out;
        -o-transition: background .2s ease-in-out;
        transition: background .2s ease-in-out;
        position: relative;
        cursor: pointer;
    }

        .topic-show .heading::after {
            content: "+";
            position: absolute;
            left: 15px;
            top: 2px;
            font-size: 1.5em;
        }

    .topic-show.open .heading {
        border-radius: 8px 8px 0 0;
    }

        .topic-show.open .heading::after {
            content: "-";
        }

    .topic-show .body {
        display: none;
    }

    .topic-show.open .body {
        display: initial;
    }

    .topic-show .heading:hover {
        background: #52c4f9;
        color: #f7f7f7;
    }

    .topic-show table {
        width: 100%;
        background: #686868;
        border-radius: 0 0 8px 8px;
        font-size: .9em;
        font-weight: 400;
        border-collapse: collapse;
        border-spacing: 0;
        overflow: hidden;
    }

        .topic-show table tr {
            cursor: pointer;
            -webkit-transition: background .2s ease-in-out;
            -o-transition: background .2s ease-in-out;
            transition: background .2s ease-in-out;
        }

            .topic-show table tr:nth-child(2n+1) {
                background: #5a5a5a;
            }

    .topic-show.exam-lock::after {
        content: "آزمون دارد";
        position: absolute;
        top: -12px;
        right: 5px;
        padding: 0 5px;
        border-radius: 6px;
        background: #e64949;
        border: 1px dotted #000;
        font-size: .6em;
        font-weight: bold;
        opacity: .9;
        -webkit-box-shadow: 0 0 15px #000 inset;
        box-shadow: 0 0 15px #000 inset;
    }

    .topic-show.exam-passed::after {
        content: "آزمون پاس شده";
        position: absolute;
        top: -12px;
        right: 5px;
        padding: 0 5px;
        border-radius: 6px;
        background: #d6e649;
        color: #000;
        border: 1px dotted #000;
        font-size: .6em;
        font-weight: bold;
        opacity: .9;
        -webkit-box-shadow: 0 0 15px #00000073 inset;
        box-shadow: 0 0 15px #00000073 inset;
    }

    .topic-show.exam-passed.exam-optional::after {
        content: "آزمون پاس شده";
        position: absolute;
        top: -12px;
        right: 5px;
        padding: 0 5px;
        border-radius: 6px;
        background: #d6e649;
        color: #000;
        border: 1px dotted #000;
        font-size: .6em;
        font-weight: bold;
        opacity: .9;
        -webkit-box-shadow: 0 0 15px #00000073 inset;
        box-shadow: 0 0 15px #00000073 inset;
    }

    .topic-show.exam-optional::after {
        content: "آزمون دارد";
        position: absolute;
        top: -12px;
        right: 5px;
        padding: 0 5px;
        border-radius: 6px;
        background: #8ca7aa;
        border: 1px dotted #000;
        font-size: .6em;
        font-weight: bold;
        opacity: .9;
        -webkit-box-shadow: 0 0 15px #000 inset;
        box-shadow: 0 0 15px #000 inset;
    }

a.topic-show.exam-lock::after {
    content: "";
    display: none;
}

a.topic-show.exam-passed::after {
    content: "";
    display: none;
}

a.topic-show.exam-optional::after {
    content: "";
    display: none;
}

a.topic-show.exam-lock, a.topic-show.exam-optional, a.topic-show.exam-passed {
    display: block;
    text-align: center;
    font-size: .85em;
    font-weight: bold;
    background: #410c0c4a;
    border-radius: 4px;
}

    a.topic-show.exam-optional.exam-passed, a.topic-show.exam-passed {
        background: #3131314a;
    }

@-webkit-keyframes turn-in-animation {
    0% {
        -webkit-transform: scaleX(.8);
        transform: scaleX(.8);
        opacity: 0;
    }

    50% {
        -webkit-transform: scaleX(1.2);
        transform: scaleX(1.2);
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes turn-in-animation {
    0% {
        -webkit-transform: scaleX(.8);
        transform: scaleX(.8);
        opacity: 0;
    }

    50% {
        -webkit-transform: scaleX(1.2);
        transform: scaleX(1.2);
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 1;
    }
}

.topic-show.exam-lock.open::before {
    content: "برای انتقال به صفحه آزمون روی ویدیوها کلیک کنید.";
    position: absolute;
    top: -12px;
    left: 5px;
    z-index: 1;
    padding: 0 5px;
    border-radius: 6px;
    background: #49d8e6;
    color: #000;
    border: 1px dotted #000;
    font-size: .6em;
    font-weight: bold;
    opacity: .9;
    -webkit-box-shadow: 0 0 10px #0000007a inset;
    box-shadow: 0 0 10px #0000007a inset;
    -webkit-animation: turn-in-animation .2s ease-in;
    animation: turn-in-animation .2s ease-in;
}

.topic-show.exam-lock:hover::after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.topic-show.exam-lock table tr {
    background: #e2252536;
}

    .topic-show.exam-lock table tr:nth-child(2n+1) {
        background: #3c080836;
    }

.topic-show table tr td {
    padding: 5px;
}

.topic-show table tr:hover {
    background: rgb(43, 43, 43) !important;
}

.topic-show table tr td span[class^="flaticon-"]:before,
.topic-show table tr td span[class*=" flaticon-"]:before,
.topic-show table tr td span[class^="flaticon-"]:after,
.topic-show table tr td span[class*=" flaticon-"]:after {
    font-size: .8em;
}

.topic-show.exam-lock .heading {
    background: #fff4db;
    color: #3c0d0d;
}

    .topic-show.exam-lock .heading:hover {
        background: #fdc1c1;
        color: #7d2727;
    }

.account-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    overflow: auto;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

@-webkit-keyframes account-overlay-backgounrd-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: .85;
    }
}

@keyframes account-overlay-backgounrd-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: .85;
    }
}

.modal-opened::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#a7a6cb), color-stop(52%, #8989ba), to(#8989ba));
    background-image: -o-linear-gradient(bottom, #a7a6cb 0%, #8989ba 52%, #8989ba 100%);
    background-image: linear-gradient(to top, #a7a6cb 0%, rgba(137, 137, 186, 0.47843137254901963) 52%, rgba(137, 137, 186, 0.37) 100%);
    opacity: .85;
    -webkit-animation: account-overlay-backgounrd-animation .3s forwards;
    animation: account-overlay-backgounrd-animation .3s forwards;
}

@-webkit-keyframes account-overlay-animation {
    0% {
        opacity: 0;
        margin-top: 80px;
    }

    100% {
        opacity: 1;
        margin-top: 100px;
    }
}

@keyframes account-overlay-animation {
    0% {
        opacity: 0;
        margin-top: 80px;
    }

    100% {
        opacity: 1;
        margin-top: 100px;
    }
}

.account-overlay .content,
.account .content {
    width: 20%;
    min-width: 200px;
    border-radius: 25px 0;
    margin: auto;
    margin-top: 100px;
    padding: 5px 15px;
    background: rgba(255, 255, 255, 0.7);
    -webkit-box-shadow: 4px 8px 16px -4px rgba(11, 11, 11, 0.48), 0 0 100px rgba(179, 179, 205, 0.1607843137254902) inset;
    box-shadow: 4px 8px 16px -4px rgba(11, 11, 11, 0.48), 0 0 100px rgba(179, 179, 205, 0.1607843137254902) inset;
    position: relative;
    z-index: 10;
    -webkit-animation: account-overlay-animation .1s forwards;
    animation: account-overlay-animation .1s forwards;
    overflow: auto;
}

.account-overlay .content {
    background: #fff;
}

.account-overlay-show {
    display: block;
}

.account-overlay .message,
.account .message {
    padding: 5px;
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    color: #9f668b;
}

.account-overlay .form-group > label,
.account .form-group > label {
    display: block;
    font-size: .8em;
    opacity: .8;
    color: #48486a;
}

.account-overlay .form-group > input,
.account .form-group > input {
    border: none;
    width: 100%;
    border-radius: 7px;
    padding: 4px 10px;
    background: #fff;
    -webkit-box-shadow: 0px 2px 4px 1px #5556, 0 0 45px #63638221 inset;
    box-shadow: 0px 2px 4px 1px #5556, 0 0 45px #63638221 inset;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 5px;
    font-size: .95em;
    font-weight: 700;
    color: #371552;
    text-align: center;
    outline: none;
    direction: ltr;
}

    .account-overlay .form-group > input[readonly],
    .account .form-group > input[readonly] {
        color: #535154;
        background: #eaeaea;
        -moz-box-shadow: 0px 2px 4px 1px rgba(85, 85, 85, 0.2), 0 0 45px rgba(99, 99, 130, 0.07058823529411765) inset;
        -webkit-box-shadow: 0px 2px 4px 1px rgba(85, 85, 85, 0.2), 0 0 45px rgba(99, 99, 130, 0.07058823529411765) inset;
        box-shadow: 0px 2px 4px 1px rgba(85, 85, 85, 0.2), 0 0 45px rgba(99, 99, 130, 0.07058823529411765) inset;
    }

    .account-overlay .form-group > input.alt,
    .account .form-group > input.alt {
        direction: rtl;
    }

    .account-overlay .form-group > input:focus,
    .account .form-group > input:focus {
        -webkit-box-shadow: 0px 2px 4px 1px #5556;
        box-shadow: 0px 2px 4px 1px #5556;
        color: #222;
    }

.account-overlay .form-group > button,
.account .form-group > button {
    width: 68%;
    margin: auto;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 11px 7px;
    border: none;
    background: #8a8ab3;
    font-family: inherit;
    color: #fff;
    border-radius: 7px;
    margin-top: 20px;
    outline: none;
}

    .account-overlay .form-group > button[disabled],
    .account .form-group > button[disabled] {
        background: #c8c8d5;
        color: #f2f2f2;
    }

    .account-overlay .form-group > button.alt,
    .account .form-group > button.alt {
        width: 48%;
        background: #ceb0c1;
        color: #252525;
    }

.account-overlay .caption > a,
.account .caption > a {
    display: block;
    padding: 10px 20px;
    background: #dcdcdd;
    margin: 5px;
    border-radius: 4px;
    color: #1b1b43;
    text-align: center;
    font-weight: bold;
    width: 50%;
    margin: auto;
    margin-top: 10px;
}

.account .caption > a {
    background: #f1f1f1;
}

.account .control_indicator {
    background: #fff;
}

.account-overlay .caption > p,
.account .caption > p {
    text-align: justify;
    opacity: .8;
    font-size: .9em;
    margin: 2px;
}

.account .close,
.account-overlay .close {
    position: absolute;
    left: 10px;
    top: 10px;
    border: none;
    background: none;
    color: rgb(231, 80, 132);
}

.top-error {
    padding: 5px;
    text-align: center;
    background: #ff7171;
    font-weight: bold;
    color: #3c0c0c;
}

.login-background {
    background-image: url(/content/images/hpci4.jpg);
    background-position: center center;
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    filter: blur(7px);
    -webkit-box-shadow: 0 0 50px #000;
    box-shadow: 0 0 50px #000;
}

    .login-background::before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
        background-image: -webkit-gradient(linear, left bottom, left top, from(#a7a6cb), color-stop(52%, #8989ba), to(#8989ba));
        background-image: -o-linear-gradient(bottom, #a7a6cb 0%, #8989ba 52%, #8989ba 100%);
        background-image: linear-gradient(to top, #a7a6cbd1 0%, #8989bab5 52%, #8989ba54 100%);
        opacity: .5;
        -webkit-animation: account-overlay-backgounrd-animation .3s forwards;
        animation: account-overlay-backgounrd-animation .3s forwards;
    }

.counter {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: -15px;
    color: #8a8ab3;
}

    .counter::before {
        content: "SMS تا ";
        font-size: .7em;
    }

    .counter::after {
        content: " ثانیه دیگر معتبر است.";
        font-size: .7em;
    }

    .counter.error {
        font-size: .9em;
        color: #ea4252;
    }

        .counter.error::before {
            content: "";
        }

        .counter.error::after {
            content: "";
        }


.account {
    position: relative;
    margin-bottom: 25px;
}

.error-message {
    color: #b84611;
    font-weight: bolder;
    text-align: center;
    padding: 5px;
    border-radius: 3px;
    background: #f2e4e4;
}

.modal-opened {
    overflow: hidden;
}

.top-buttons .username, .top-buttons .subscription {
    padding: 8px 14px;
    border: none;
    background: #e2e2e2;
    border-radius: 3px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    color: #515151;
    font-weight: bold;
    display: inline-flex;
    vertical-align: super;
}

.top-buttons .subscription {
    background: #d1e17b;
    color: #4c6044;
}

.top-buttons form {
    display: inline-block;
}

.top-static-message {
    z-index: 9;
}

    .top-static-message > a {
        padding: 15px;
        background: #5e5e5e;
        text-align: center;
        display: block;
        color: #fff;
        font-size: 1.1em;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        z-index: 9;
        position: relative;
    }

        .top-static-message > a:hover {
            background: #aed925;
            color: #464646;
        }

    .top-static-message > button {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 11;
        border: none;
        padding: 7px 9px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.62);
        color: #212121;
        -webkit-transform: scale(.85);
        -ms-transform: scale(.85);
        transform: scale(.85);
        -webkit-box-shadow: 2px 4px 6px -3px #000;
        box-shadow: 2px 4px 6px -3px #000;
        cursor: pointer;
        -webkit-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7);
    }

        .top-static-message > button:hover {
            background: rgba(255, 255, 255, 0.8);
            color: #000;
        }

.quick-search-result {
    position: absolute;
    top: 30px;
    right: -8px;
    left: -8px;
    background: #fff;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 5px -4px #000;
    box-shadow: 0 3px 5px -4px #000;
    padding: 15px;
    display: none;
    z-index: 99;
}

#quickSearchLoading {
    display: none;
    text-align: center;
}

#quickSearchNoResult {
    font-weight: bold;
    opacity: .6;
}

.quick-search-result button {
    font-family: inherit;
    font-size: 1.1em;
    float: left;
    background: #ececec;
    padding: 5px 10px;
    border-radius: 4px;
    color: #757575;
    margin-top: 15px;
    cursor: pointer;
    border: none;
}

    .quick-search-result button:hover {
        background: #6ca9d1;
        color: #fff;
    }

.quick-search-result ul li {
    margin: 3px;
}

.quick-search-result ul a {
    display: block;
    padding: 5px;
    border-bottom: 1px dotted #000;
    color: #000;
    border-radius: 3px;
}

    .quick-search-result ul a span {
        font-size: .8em;
        margin-right: 10px;
        opacity: .85;
    }

    .quick-search-result ul a:hover {
        color: #111;
        background: #efefef;
    }

.quick-search-result ul {
    list-style: none;
    font-size: .95em;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.search-result {
    padding: 15px;
    background: #ececec;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.1em;
    position: relative;
}

    .search-result > div {
        margin: 5px;
    }

        .search-result > div:first-child {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

    .search-result .search-container {
        background: #fff;
        margin: 10px;
        padding: 7px 15px;
        border-radius: 6px;
        -webkit-box-shadow: 1px 2px 4px -3px #000;
        box-shadow: 1px 2px 4px -3px #000;
    }

    .search-result > div:last-child {
        -webkit-box-flex: 4;
        -ms-flex: 4;
        flex: 4;
    }

.search-result-heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .9em;
    font-weight: bold;
    color: #666;
}

    .search-result-heading .info {
        color: #333;
        font-size: 1.1em;
    }

    .search-result-heading > div:first-child {
        -webkit-box-flex: 20;
        -ms-flex: 20;
        flex: 20;
    }

.search-container > .title {
    font-weight: bold;
    padding-bottom: 7px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(218, 218, 218);
    color: #555;
}

.search-container .body .hide {
    display: none;
}

.search-container > .title > input {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    background: whitesmoke;
    padding: 2px;
    font-size: .75em;
    font-weight: bold;
}

.search-container .body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-height: 400px;
    overflow: auto;
    position: relative;
}

.search-container span#autoSearchCountDown {
    position: absolute;
    left: 3px;
    top: 35px;
    font-size: .8em;
    font-weight: bolder;
    color: #2196F3;
}

.search-container .body input[type=text] {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #b5b5b5;
    padding: 5px;
}

.search-container .body button {
    margin: 5px 0;
    border: none;
    border-radius: 4px;
    padding: 5px 15px;
    font-family: inherit;
    background: #03A9F4;
    color: #212121;
    font-weight: bold;
}

    .search-container .body button.alt {
        background: #fff;
        color: #7d7d7d;
        -webkit-box-shadow: 0 2px 0 0 #d64141;
        box-shadow: 0 2px 0 0 #d64141;
        border-radius: 0;
        font-size: .75em;
        float: right;
        outline: none;
        cursor: pointer;
    }

.search-container ul#filters {
    text-align: right;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .8em;
    font-weight: bold;
    color: #222;
}

    .search-container ul#filters li {
        margin: 5px;
        background: #eaeaea;
        padding: 3px;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
    }

        .search-container ul#filters li:hover {
            background: #e64848;
            color: #fff;
        }

            .search-container ul#filters li:hover::after {
                content: "×";
                position: absolute;
                left: 5px;
                top: -2px;
                font-size: 1.5em;
            }

.big-loading {
    overflow: hidden;
}

    .big-loading::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #ffffffb8;
        z-index: 9998;
        -webkit-box-shadow: 0 0 200px inset #d0d0d0;
        box-shadow: 0 0 200px inset #d0d0d0;
    }

    .big-loading::after {
        content: "لطفا منتظر باشید...";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        text-align: center;
        margin-top: 10%;
        color: #333;
        font-size: 1.2em;
    }

.search-real-result .header {
    padding: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #555;
    font-weight: bold;
    max-width: initial;
}

.search-real-result .heading {
    font-size: .9em;
    margin: 0 15px;
}

    .search-real-result .heading::after {
        content: ":";
    }

.search-real-result .header button {
    font-weight: bold;
    background: #f3f3f3;
    color: rgb(113, 113, 113);
    border: none;
    margin-left: 10px;
    font-family: inherit;
    border-radius: 4px;
    padding: 3px 15px;
    font-size: .75em;
    cursor: pointer;
}

    .search-real-result .header button:hover {
        background: #03A9F4;
        color: rgb(40, 40, 40);
    }

    .search-real-result .header button.selected {
        background: #03A9F4;
        color: rgb(20, 20, 20);
    }


.search-real-result .real-body {
    border-top: 1px solid rgb(200, 200, 200);
    margin-top: 5px;
    padding-top: 10px;
}

    .search-real-result .real-body .message {
        padding: 10px;
        border: 1px solid;
        border-radius: 4px;
        margin: 5px;
        text-align: center;
    }

        .search-real-result .real-body .message.error {
            border-color: #8e0c0c;
            color: #8e0c0c;
            background-color: #efe4e4;
        }

        .search-real-result .real-body .message.warning {
            border-color: #8e700c;
            color: #8e700c;
            background-color: #efefe4;
        }

        .search-real-result .real-body .message.hide {
            display: none;
        }

.search-result-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .search-result-items > div {
        width: calc(25% - 8px);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        -webkit-box-shadow: 1px 2px 6px -4px #000000;
        box-shadow: 1px 2px 6px -4px #000000;
        margin: 4px;
        -webkit-transition: background .3s ease-in-out;
        -o-transition: background .3s ease-in-out;
        transition: background .3s ease-in-out;
        background: #e4e4e4;
    }

        .search-result-items > div:hover {
            -webkit-box-shadow: 1px 2px 15px -2px #505050;
            box-shadow: 1px 2px 15px -2px #505050;
            background: #fbebfa;
        }

        .search-result-items > div > a {
            display: block;
            border-radius: 3px;
            overflow: hidden;
            color: #555;
            font-weight: bold;
        }

            .search-result-items > div > a::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                -webkit-box-shadow: 0 0 50px rgba(85, 85, 85, 0.25) inset;
                box-shadow: 0 0 50px rgba(85, 85, 85, 0.25) inset;
            }

.search-real-result span.stars span {
    opacity: .5;
}

    .search-real-result span.stars span.star-on {
        color: gold;
        opacity: 1;
    }

.search-result-items > div img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.search-result-items > div > a div {
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: center;
    font-size: .9em;
    height: 35px;
}

    .search-result-items > div > a div > span {
        color: grey;
        margin-right: 6px;
        font-size: .8em;
    }

.search-result-items > div > a .stars {
    display: block;
    text-align: center;
}

.search-result-items > div > a div:last-child {
    text-align: right;
    padding-right: 10px;
}

.search-result-items > div > button {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: #636363;
    color: #e6e6e6;
    border: none;
    border-radius: 50%;
    height: 48px;
    width: 48px;
    outline: none;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.search-result-items .price {
    font-size: 1.2em;
    color: #2f2f2f;
}

.search-result-items > div > button:hover {
    background: #bede14;
    color: #333;
    -webkit-box-shadow: 2px 1px 5px -4px #000;
    box-shadow: 2px 1px 5px -4px #000;
}

.mobile-search-overlay {
    display: none;
}

.mobile-menu-overlay {
    display: none;
}

/* responsive design for desktop start */

@media only screen and (max-width: 1024px), only screen and (max-height: 500px) {

    body .account-overlay .content,
    body .account .content {
        width: 60%;
        margin-top: 15px;
        margin-bottom: 15px;
        -webkit-animation: none;
        animation: none;
    }
}

@media only screen and (max-width: 1440px) {
    .general-container {
        min-width: 1340px;
    }

    .banner-content {
        font-size: .9em;
    }

    .top-seller {
        margin-top: -308px;
    }

        .top-seller .offer-wrapper {
            max-width: 25%;
        }

            .top-seller .offer-wrapper:nth-child(5) {
                display: none;
            }

    .home-ribbon {
        font-size: .9em;
    }

    .home-browse-container .message {
        font-size: .85em;
    }

    .home-tabs-container .offer-wrapper:nth-child(4) {
        display: none;
    }

    .home-tabs-container .offer-wrapper {
        max-width: 33%;
    }

    .user-stories-header {
        margin-top: 40px;
    }

    .account-overlay .content,
    .account .content {
        width: 25%;
        margin-top: 35px;
        -webkit-animation: none;
        animation: none;
        margin-bottom: 25px;
    }

    .search-result-items > div {
        width: calc(33.333% - 8px);
    }

    .course-data .learn {
        width: 954px;
    }

    .course-data .data {
        width: 954px;
    }
}

.add-to-home {
    position: fixed;
    bottom: 15px;
    right: 15px;
    border-radius: 8px;
    -webkit-box-shadow: 3px 4px 10px -4px #000;
    box-shadow: 3px 4px 10px -4px #000;
    background: rgba(255, 255, 255, 0.8);
    padding: 7px;
    font-weight: bold;
    display: none;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.exam-overlay {
    -webkit-animation: sale-overlay-animation .2s ease-in-out forwards;
    animation: sale-overlay-animation .2s ease-in-out forwards;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 6, 6, 0.777);
    z-index: 9;
    -webkit-box-shadow: 0 0 200px #000 inset;
    box-shadow: 0 0 200px #000 inset;
}

    .exam-overlay .big-loading {
        display: none;
    }

        .exam-overlay .big-loading.show {
            display: initial;
        }

.exam-overlay-show {
    display: initial !important;
}

.subs-holder .plans {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 15px;
    margin: 15px;
    margin-top: -110px;
    justify-content: center;
}

    .subs-holder .plans .plan {
        background: #ecd9ef;
        padding: 25px;
        border-radius: 16px;
        max-width: 400px;
        display: grid;
        align-items: center;
        justify-items: center;
        align-content: space-evenly;
        grid-gap: 7px;
        box-shadow: 7px 7px 5px -8px #000;
    }

        .subs-holder .plans .plan .title {
            font-size: 1.2rem;
            font-weight: bold;
        }

.subs-holder .plan .cost.cost-crossed {
    text-decoration: line-through;
    opacity: .75;
}

.subs-holder .plan .cost {
    font-weight: bold;
}

.subs-holder .top-seller::before {
    content: "در حال حاضر امکان خرید اشتراک(های) زیر وجود دارد";
    color: #9c5475;
    top: -35px;
    text-align: center;
    text-shadow: 1px 1px 2px #fff;
    border-bottom: 2px dotted #756491ba;
}

.subs-holder .buy-sub-btn {
    padding: 8px 20px;
    border: none;
    background: #c597cd;
    border-radius: 12px;
    cursor: pointer;
    color: #161616;
    vertical-align: super;
    font-weight: bold;
}

.promo-lessons {
    margin-bottom: 35px;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    background: #efefef;
}

    .promo-lessons > .title {
        padding-top: 15px;
        padding-right: 15px;
        font-weight: bold;
    }

    .promo-lessons .items {
        column-gap: 10px;
        overflow: auto;
        padding: 5px;
        white-space: nowrap;
        position: relative;
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        justify-items: center;
    }

        .promo-lessons .items > div {
            max-width: 100%;
            width: 350px;
            height: initial;
        }

.single-page-container {
    margin: 0 auto;
    max-width: 1000px;
    padding: 15px;
}

.single-page-content {
    margin: 5px;
    margin-top: 70px;
}

.contact-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border-bottom: 1px dotted #555;
    margin-bottom: 5px;
}

    .contact-item .header {
        font-weight: bold;
        color: #263238;
        font-size: 1rem;
    }

.contact-page .info {
    margin-top: 25px;
}

    .contact-page .info .header {
        font-size: 1.1rem;
        font-weight: bold;
    }

.contact-page .contact-up {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 15px;
    align-items: center;
}

.terms-page li {
    margin-top: 7px;
    font-size: .85rem;
    font-weight: bold;
}
/* responsive design for desktop end */
@media only screen and (max-width: 768px) {
    body .account-overlay .content, body .account .content {
        width: 88%;
    }
}

@media only screen and (min-width: 768px) {
    .real-body .search-result-items > div {
        width: calc(25% - 8px);
    }
}