@import url(iransans/fontiran.css);
@import url(font-awesome.min.css);
@import url(font-awesome.css);

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "IRANSans";
    list-style-type: none;
    text-decoration: none;
    /*direction: rtl;*/
    border-collapse: collapse
}

#myForm {
    display: none
}

.clear {
    clear: both
}

body {
    width: 100%;
    margin: 0 auto;
    background-image: url(../img/light-tile.gif);
    background-size: 260px
}

.set {
    max-width: 1000px;
    margin: 25px auto
}

.load {
    width: 100%;
    background-color: rgba(0, 0, 0, .6);
    position: fixed;
    top: 0;
    display: table;
    text-align: center;
    z-index: 5;
    font-size: 18px;
    font-weight: 700;
    color: #fff
}

.load > section {
    display: table-cell;
    vertical-align: middle
}

.return {
    width: 100px;
    height: 40px;
    color: #000;
    background-color: #fff;
    text-align: center;
    margin-top: 20px
}

section.hide {
    display: none
}

.header {
    width: 100%;
    height: 40px;
    background: rgb(243, 243, 243)
}

.header ul li {
    padding: 7px 0;
    display: inline-block
}

.header ul li a:hover {
    background-color: rgba(254, 1, 107, .52)
}

.header ul li a {
    color: #000;
    padding: 7px 10px 6px 10px
}

.slider {
    width: 100%;
    overflow: hidden
}

.slider img {
    width: 1100px;
    position: relative;
    z-index: -2;
    right: -10px
}

.menu {
    width: 100%;
    background-color: #f7f7f7;
    border: 1px solid #e0e0e0
}

.menu div {
    width: 16.66%;
    border-left: 1px dotted #bababa;
    text-align: center;
    color: #fe016b;
    float: right;
    height: 135px;
    cursor: pointer;
    padding: 10px 0
}

.menu div:nth-child(6) {
    border-left: 0
}

.menu > div:hover {
    background-color: #bfbfbf;
    color: #fff
}

.menu div:hover img {
    filter: brightness(0) invert(1)
}

.menu div:hover p {
    color: #fff
}

.menu div.active {
    background-color: #fe016b
}

.menu div.active img {
    filter: brightness(0) invert(1)
}

.menu div.active p {
    color: #fff
}

.content {
    width: 100%;
    padding: 10px 0 0 0;
    display: none
}

.bargain {
    width: 45%;
    height: 430px;
    background-color: rgba(255, 200, 0, .32);
    float: right;
    border: 1px solid #e8c642
}

.charge-type-container {
    padding: 0 15px
}

.charge-type-container section {
    width: 120px;
    display: inline-block;
    padding: 10px 0
}

.bargain > section > div:first-child {
    padding: 0 10px;
    padding-top: 10px;
    text-align: right
}

.operator, .giftcard-types, .antivirus-types {
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: cover;
    cursor: pointer;
    filter: grayscale(100%);
    opacity: .7
}

.giftcard-types, .antivirus-types {
    display: none
}

.operator {
    background-image: url(../img/operator.png)
}

.giftcard-types {
    background-image: url(../img/giftcards.png)
}

.antivirus-types {
    background-image: url(../img/antivirus-logo.png)
}

.operator.active, .giftcard-types.active, .antivirus-types.active {
    filter: grayscale(0%);
    opacity: 1
}

.MTN {
    background-position: -240px 0
}

.MCI {
    background-position: -160px 0
}

.Rightel {
    background-position: -80px 0
}

.charge-type {
    cursor: pointer
}

.iTunes {
    background-position: 0 0
}

.GooglePlay {
    background-position: -640px 0
}

.XBox {
    background-position: -320px 0
}

.Amazon {
    background-position: -720px 0
}

.PlayStation {
    background-position: -240px 0
}

.Steam {
    background-position: -400px 0
}

.Spotify {
    background-position: -480px 0
}

.PlayStationPlus {
    background-position: -80px 0
}

.Microsoft {
    background-position: -160px 0
}

.Skype {
    background-position: -560px 0
}

.eset {
    background-position: 0 0
}

.bitdefender {
    background-position: -80px 0
}

.kaspersky {
    background-position: -160px 0
}

.norton {
    background-position: -240px 0
}

.mcafee {
    background-position: -320px 0
}

.avira {
    background-position: -400px 0
}

.avg {
    background-position: -480px 0
}

.avast {
    background-position: -560px 0
}

.credit-info {
    display: block !important
}

.charge-type input {
    float: right;
    margin-top: 6px;
    margin-left: 6px;
    width: 16px;
    height: 16px;
    cursor: pointer
}

.charge-type div {
    width: 10px;
    height: 10px;
    background-color: #0c8e64;
    border-radius: 50%;
    position: relative;
    top: 9px;
    right: -19px;
    z-index: 3;
    display: none;
    float: right;
    margin-left: -11px
}

.magiccharge, .nonecredit-mtn, .wimax {
    padding: 10px 15px 0 0
}

.magiccharge input, .nonecredit-mtn input, .wimax input, .magiccharge label, .nonecredit-mtn label, .wimax label {
    cursor: pointer
}

.pin-counter {
    width: 180px;
    height: 40px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 10px
}

.increase, .decrease {
    width: 40px;
    height: 40px;
    background-image: url(../img/count.png);
    float: right;
    cursor: pointer
}

.increase {
    background-position: -40px 0
}

.counter {
    width: calc(100% - 80px);
    height: 40px;
    border: 0;
    float: right;
    text-align: center;
    font-size: 18px;
    font-weight: 700
}

.list, .package {
    padding: 0 15px;
    overflow: auto;
    height: 220px;
    direction: ltr
}

.list::-webkit-scrollbar, .package::-webkit-scrollbar {
    margin-left: 30px;
    float: left;
    width: 8px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px
}

.list::-webkit-scrollbar-track, .package::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 10px;
    background-color: #F5F5F5
}

.list::-webkit-scrollbar-thumb, .package::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #f56a49
}

.list {
    height: 170px
}

.list section div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 10px
}

.info {
    width: 55%;
    float: left;
    padding-right: 10px
}

.pay-part {
    width: 100%
}

.information {
    width: 100%;
    height: 180px;
    background-color: rgba(0, 90, 255, .32);
    text-align: center;
    padding: 36px 0;
    margin-bottom: 10px;
    border: 1px solid #5c8ede
}

.invoice {
    width: calc(46% - 5px);
    height: 240px;
    background-color: rgba(90, 20, 226, .32);
    float: right;
    padding-right: 20px;
    padding-left: 20px;
    border: 1px solid #a27de4
}

.payment {
    width: calc(54% - 5px);
    height: 240px;
    background-color: rgba(0, 189, 66, .32);
    float: left;
    border: 1px solid #64d685
}

.invoice h3 {
    margin: 10px 0 10px 0
}

.invoice li {
    margin-bottom: 15px
}

.invoice p, .invoice span {
    display: inline-block;
    font-size: 14px
}

.invoice .bill-payment {
    display: none
}

.invoice .internet-package ul {
    padding: 30px 0
}

div.cellphone, .mail {
    max-width: 380px;
    padding-bottom: 10px;
    margin: 0 auto
}

.cellphone p, .mail p {
    width: 100px;
    float: right;
    padding: 5px 0
}

.cellphone input, .mail input {
    width: calc(100% - 100px);
    height: 37px;
    float: left;
    direction: ltr;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    color: #000;
    font-family: "IranSans"
}

div.cellphone input:focus, .mail input:focus, .bill-payment > input:focus {
    box-shadow: none;
    outline: none
}

.hint-cell, .hint-mail {
    max-width: 386px;
    font-size: 12px;
    margin: 0 auto;
    margin-top: -10px;
    padding-right: 5px;
    display: none
}

.hint-cell p, .hint-mail p {
    width: calc(100% - 104px);
    background-color: rgba(255, 255, 255, .3);
    text-align: right;
    color: red;
    margin-left: 4px;
    padding-right: 5px;
    margin-right: 100px
}

.save {
    max-width: 380px;
    height: 37px;
    text-align: right;
    margin: 0 auto
}

.save label {
    margin-right: 100px
}

.save input, .save p {
    display: inline-block;
    cursor: pointer
}

.gateways-container {
    width: 100%;
    margin: 10px auto;
    padding: 0 10px;
    text-align: center
}

.gateway {
    width: 48px;
    height: 48px;
    background-color: #fff;
    background-image: url(../img/payment-gateways.png?v=999);
    background-repeat: no-repeat;
    margin: 2px 5px;
    cursor: pointer;
    display: none;
    position: relative
}

.mellat {
    background-position: -43px -43px
}

.saman {
    background-position: -88px -43px
}

.emtiaz {
    background-position: -270px -45px
}

.zarrinpal {
    background-position: -223px -43px
}

.parsian {
    background-position: 2px -43px
}

.melli {
    background-position: -134px -43px
}

.fanava {
    background-position: -177px -43px
}

.mellat.active {
    background-position: -43px 2px
}

.saman.active {
    background-position: -88px 2px
}

.emtiaz.active {
    background-position: -270px 0
}

.zarrinpal.active {
    background-position: -223px 2px
}

.parsian.active {
    background-position: 2px 2px
}

.melli.active {
    background-position: -134px 3px
}

.fanava.active {
    background-position: -177px 2px
}

.attention {
    width: 100%;
    margin: 10px auto;
    padding: 0 20px
}

.attention p {
    font-size: 10px;
    display: inline-block
}

.attention img {
    margin: 0 0 0 5px;
    display: inline-block;
    position: relative;
    top: 3px
}

.payment-button, .bill-check {
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    text-align: center;
    margin-bottom: 10px
}

.submit, .check {
    border: 0;
    width: 177px;
    height: 47px;
    background-color: #fbfbfb;
    color: #000;
    font-family: "IranSans";
    font-size: 24px;
    cursor: pointer
}

.submit:hover {
    box-shadow: 0 5px #00490f
}

.check:hover {
    box-shadow: 0 5px #9e7f03
}

.submit:active {
    box-shadow: 0 2px #00490f;
    transform: translateY(5px)
}

.check:active {
    box-shadow: 0 2px #9e7f03;
    transform: translateY(5px)
}

.submit:focus, .check:focus {
    outline: none
}

.payment p {
    font-size: 11px;
    max-width: 200px;
    text-align: center;
    margin: 0 auto;
    margin-top: -7px;
    margin-bottom: 7px
}

.internet-package select {
    width: calc(100% - 20px);
    height: 40px;
    margin: 0 10px;
    font-weight: 700
}

.sim-type {
    margin: 10px 0;
    padding-right: 20px
}

.sim-type section {
    width: 50%;
    height: 40px;
    float: right
}

.package {
    padding-right: 15px;
    height: 190px;
    overflow-y: auto;
    margin-top: 10px !important
}

section.product-type {
    width: 48px;
    height: 48px;
    background-image: url(../img/bill-operators.png);
    display: none;
    position: relative;
    top: 20px;
    right: 10px
}

section.product-type.water {
    background-position: -1px 5px
}

section.product-type.electricity {
    background-position: -55px 5px
}

section.product-type.gas {
    background-position: -115px 5px
}

section.product-type.telephone {
    background-position: -170px 5px
}

section.product-type.cellphone {
    background-position: -220px 5px
}

section.product-type.mayoralty {
    background-position: -280px 5px
}

section.product-type.police {
    background-position: -330px 5px
}

section.product-type.pasargad {
    background-position: -375px 5px
}

.bargain .bill-payment {
    padding: 0 10px;
    padding-top: 40px
}

.bargain .bill-payment > p {
    margin-bottom: 15px
}

.bargain .bill-payment > input {
    margin-bottom: 25px;
    width: 100%;
    height: 40px;
    direction: ltr;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    color: #000
}

.bargain .bill-payment > div.hint-pay, .bargain .bill-payment > div.hint-bill {
    width: 100%;
    height: 40px;
    background-color: rgba(255, 255, 255, .3);
    color: red;
    padding: 7px 0;
    padding-right: 10px;
    display: none
}

.invoice .bill-payment ul {
    padding-top: 5px;
    padding-right: 5px
}

.invoice .bill-payment ul li:first-child {
    margin-bottom: 60px
}

.bill-check {
    margin-top: 30px;
    margin-bottom: 15px
}

.list section, .package section {
    width: 100%;
    height: 40px;
    cursor: pointer;
    padding: 7px 10px
}

.list section:hover, .list section.active, .package section:hover, .package section.active {
    background-color: #fee
}

.list section.active, .package section.active {
    background-color: #fff
}

.list section div:first-child {
    float: right;
    overflow: hidden
}

.list section div:nth-child(2) {
    float: left
}

.package section div:first-child {
    float: right;
    width: 100%;
    overflow: hidden;
    padding-left: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px
}

.package section div {
    font-size: 12px
}

.text {
    width: calc(100% - 85px);
    text-align: center;
    display: inline-block;
    vertical-align: top;
    height: 80px;
    padding: 30px 0
}

.sticky-menu {
    width: 25px;
    position: fixed;
    left: 27px;
    top: 50%;
    z-index: 4
}

.sticky-menu div {
    transform: rotate(-90deg);
    height: 32px;
    width: 70px;
    margin-top: 50px;
    text-align: center;
    border-radius: 0 0 5px 5px;
    cursor: pointer
}

.sticky-menu div.help {
    background-color: rgba(230, 221, 221, .7);
}

.sticky-menu div.support {
    background-color: rgba(205, 243, 214, .7);
}

.sticky-menu div.lottery {
    background-color: rgba(251, 255, 0, 0.7);
    margin-top: -105px


}

.sticky-menu div.help:hover {
    background-color: rgba(167, 159, 159, .7);
}

.sticky-menu div.support:hover {
    background-color: rgb(159, 239, 178);
}

.sticky-menu div.lottery:hover {
    background-color: rgb(251, 255, 0, 1);
    margin-top: -105px


}

.sticky-menu a {
    color: #000
}

.sticky-menu a:focus {
    outline: none
}

input.cellphone::-webkit-input-placeholder, input.email::-webkit-input-placeholder {
    font-size: 12px;
    direction: rtl
}

input.cellphone::-moz-placeholder, input.email::-moz-placeholder {
    font-size: 12px;
    direction: rtl
}

@media screen and (max-width: 1000px) {
    .set {
        margin: 0
    }

    .slider img {
        width: 100%;
        right: 0;
        margin-bottom: -10px
    }
}

@media screen and (max-width: 800px) {
    .set {
        margin: 0
    }

    .content {
        padding: 10px
    }

    .bargain {
        width: 100%;
        height: auto;
        float: right;
        padding: 0
    }

    .info {
        width: 100%;
        float: left;
        display: block;
        padding: 0;
        padding-top: 10px
    }
}

@media screen and (max-width: 680px) {
    .set {
        margin: 0
    }

    .menu div img {
        width: 50px
    }

    .menu div p {
        font-size: 12px
    }
}

@media screen and (max-width: 500px) {
    .set {
        margin: 0
    }

    .menu {
        border-top: 1px solid #b3b3b3
    }

    .menu div {
        width: 50%;
        border-bottom: 1px solid #b3b3b3;
        padding: 0;
        display: table
    }

    .menu div:nth-child(3n) {
        margin-left: 0
    }

    .menu div section {
        display: table-cell;
        vertical-align: middle
    }

    .menu div img {
        margin-bottom: -7px
    }

    .menu div p {
        margin-top: -1px
    }

    .payment, .invoice {
        width: 100%;
        height: auto
    }

    .invoice {
        margin-bottom: 10px
    }

    .slider img {
        width: 132%;
        right: -9%
    }

    .gateways-container {
        margin: 10px auto !important
    }
}

@media screen and (max-width: 440px) {
    .header ul {
        font-size: 14px
    }

    .header ul li {
        padding: 8px 0
    }

    .header ul li a {
        padding: 8px 7px
    }
}

@media screen and (max-width: 400px) {
    .set {
        margin: 0
    }

    .list section {
        font-size: 11px
    }

    .list section div:first-child {
        width: calc(100% - 65px);
        float: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .list section div:nth-child(2) {
        width: 65px
    }

    .package section div:first-child {
        font-size: 11px;
        padding-top: 5px
    }

    .cellphone, .mail, .save {
        padding-right: 10px;
        padding-left: 10px
    }

    .cellphone p, .mail p {
        display: none
    }

    .cellphone input, .mail input {
        width: 100%;
        float: none
    }

    .save label {
        margin-right: 0
    }

    .sim-type p {
        font-size: 11px
    }

    .charge-type input {
        margin-top: 4px;
        width: 12px;
        height: 12px
    }

    .charge-type-container p {
        font-size: 12px
    }

    .pin-counter {
        width: 140px;
        height: 30px
    }

    .increase, .decrease {
        width: 30px;
        height: 30px;
        background-size: cover
    }

    .increase {
        background-position: -30px 0
    }

    .counter {
        width: calc(100% - 60px);
        height: 30px
    }

    .text {
        width: calc(100% - 65px);
        text-align: center;
        display: inline-block;
        vertical-align: top;
        height: 60px;
        padding: 20px 0;
        font-size: 12px
    }

    .operator, .giftcard-types, .antivirus-types {
        width: 60px;
        height: 60px
    }

    .MTN {
        background-position: -180px 0
    }

    .MCI {
        background-position: -120px 0
    }

    .Rightel {
        background-position: -60px 0
    }

    .iTunes {
        background-position: 0 0
    }

    .PlayStationPlus {
        background-position: -60px 0
    }

    .Microsoft {
        background-position: -120px 0
    }

    .PlayStation {
        background-position: -180px 0
    }

    .XBox {
        background-position: -240px 0
    }

    .Steam {
        background-position: -300px 0
    }

    .Spotify {
        background-position: -360px 0
    }

    .Skype {
        background-position: -420px 0
    }

    .GooglePlay {
        background-position: -480px 0
    }

    .Amazon {
        background-position: -540px 0
    }

    .eset {
        background-position: 0 0
    }

    .bitdefender {
        background-position: -60px 0
    }

    .kaspersky {
        background-position: -120px 0
    }

    .norton {
        background-position: -180px 0
    }

    .mcafee {
        background-position: -240px 0
    }

    .avira {
        background-position: -300px 0
    }

    .avg {
        background-position: -360px 0
    }

    .avast {
        background-position: -420px 0
    }

    .hint-cell, .hint-mail {
        width: 100%;
        padding: 0 10px
    }

    .hint-cell p, .hint-mail p {
        width: 100%;
        margin-left: 0;
        margin-right: 0
    }
}