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

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

.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
}

.header {
    width: 100%;
    height: 40px;
    background-color: #f3f3f3
}

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

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

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

.menu {
    width: 100px;
    float: right;
    background-color: #f7f7f7
}

.menu > div {
    width: 100%;
    height: 90px;
    cursor: pointer;
    text-align: center;
    padding: 5px 0;
    border-bottom: 1px solid #b3b3b3
}

.menu > div:last-child {
    margin-bottom: 0;
    border: 0
}

.menu > div img {
    width: 60px;
    margin-bottom: -10px
}

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

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

.menu > div.active {
    background-color: rgba(254, 200, 1, 1);
    /*background-color: rgba(254, 223, 1, 1);*/
    /*background-color: #fe016b;*/
    color: #fff
}

.menu > div:hover img, .menu > div.active img {
    /*filter: brightness(0) invert(1)*/
}

.content {
    width: calc(100% - 100px);
    float: left;
    padding: 10px;
    /*background-color: rgba(254, 223, 1, 1);*/
    background-color: rgba(255, 255, 255, 0.7);
    height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 2px solid #fedf01
}

.content > div {
    display: none
}

.content > div.active {
    display: block
}

.content p, .content strong {
    text-align: justify
}

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

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

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

.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
}

.giftcard section:last-child div {
    display: none
}

.giftcard section:last-child div.active {
    display: block
}

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

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

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

    .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
    }
}

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

    .menu {
        width: 70px
    }

    .menu > div {
        height: 70px
    }

    .menu > div img {
        width: 40px
    }

    .content {
        width: calc(100% - 70px);
        height: 350px
    }

    .content p, .content strong {
        font-size: 12px
    }

    .giftcard-types {
        width: 40px;
        height: 40px
    }

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

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

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

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

    .steam {
        background-position: -200px 0
    }

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

    .skype {
        background-position: -280px 0
    }

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

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

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

    .header ul li {
        padding: 8px 0
    }

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