/*!
 * Start Bootstrap - Agency Bootstrap Theme (https://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see https://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    font-family: IRANSansWeb_FaNum_Medium;
    background-color: #ffffff !important;
    color: #ffffff !important;
    overflow-x: auto;
}

.text-muted {
    color: #777;
}

.text-primary {
    color: #fed136;
}

p {
    font-size: 14px;
    line-height: 1.75;
}

p.large {
    font-size: 16px;
}

a,
a:hover,
a:focus,
a:active,
a.active {
    outline: 0;
}

a {
    color: #fed136;
}

a:hover,
a:focus,
a:active,
a.active {
    color: #fec503;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-weight: 700;
}

em, strong {

}

.img-centered {
    margin: 0 auto;
}

.bg-light-gray {
    background-color: #033442;
}

.bg-darkest-gray {
    background-color: #222;
}

.btn-primary {
    border-color: #fed136;
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #fff;
    background-color: #fed136;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    border-color: #f6bf01;
    color: #fff;
    background-color: #fec503;
}

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    border-color: #fed136;
    background-color: #fed136;
}

.btn-primary .badge {
    color: #fed136;
    background-color: #fff;
}

.btn-xl {
    background: #00784A !important;
    font-size: 20px !important;
    border-radius: 5px 50px 50px 36px !important;
    color: #fff !important;
    width: 150px;
}

.btn-xl:hover,
.btn-xl:focus,
.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
    border-color: #f6bf01;
    color: #fff;
    background-color: #fec503;
}

.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
    background-image: none;
}

.btn-xl.disabled,
.btn-xl[disabled],
fieldset[disabled] .btn-xl,
.btn-xl.disabled:hover,
.btn-xl[disabled]:hover,
fieldset[disabled] .btn-xl:hover,
.btn-xl.disabled:focus,
.btn-xl[disabled]:focus,
fieldset[disabled] .btn-xl:focus,
.btn-xl.disabled:active,
.btn-xl[disabled]:active,
fieldset[disabled] .btn-xl:active,
.btn-xl.disabled.active,
.btn-xl[disabled].active,
fieldset[disabled] .btn-xl.active {
    border-color: #fed136;
    background-color: #fed136;
}

.btn-xl .badge {
    color: #fed136;
    background-color: #fff;
}

.navbar-default {
    border-color: transparent;
    background-color: #222;
}

.navbar-default .navbar-brand {
    font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive;
    color: #fed136;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
    color: #fec503;
}

.navbar-default .navbar-collapse {
    border-color: rgba(255, 255, 255, .02);
}

.navbar-default .navbar-toggle {
    border-color: #fed136;
    background-color: #fed136;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #fed136;
}

.navbar-default .nav li a {
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff;
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    outline: 0;
    color: #fed136;
}

.navbar-default .navbar-nav > .active > a {
    border-radius: 0;
    color: #fff;
    background-color: #fed136;
}

.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #fec503;
}





@media (min-width: 768px) {
    .navbar-default {
        padding: 25px 0;
        border: 0;
        background-color: transparent;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-default .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-default .navbar-nav > .active > a {
        border-radius: 3px;
    }

    .navbar-default.navbar-shrink {
        padding: 10px 0;
        background-color: #222;
    }

    .navbar-default.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}

header {
    text-align: center;
    color: #fff;
    background-attachment: scroll;
    background-image: url(../img/header-bg.jpg);
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .intro-text {
    padding-top: 100px;
    padding-bottom: 50px;
}

header .intro-text .intro-lead-in {
    margin-bottom: 25px;
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-style: italic;
    line-height: 22px;
}

header .intro-text .intro-heading {
    margin-bottom: 25px;
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 50px;
}

@media (min-width: 768px) {
    header .intro-text {
        padding-top: 300px;
        padding-bottom: 200px;
    }

    header .intro-text .intro-lead-in {
        margin-bottom: 25px;
        font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 40px;
        font-style: italic;
        line-height: 40px;
    }

    header .intro-text .intro-heading {
        margin-bottom: 50px;
        text-transform: uppercase;
        font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 75px;
        font-weight: 700;
        line-height: 75px;
    }
}

section {
    padding: 100px 0;
}

section h2.section-heading {
    margin-top: 0;
    margin-bottom: 50px;
    color: #00784A;
    text-align: center;
    font-family: IRANSansWeb_FaNum_Medium;
    direction: rtl;
}

section h3.section-subheading {
    margin-bottom: 75px;
    text-transform: none;
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
}

@media (min-width: 768px) {
    section {
        padding: 150px 0;
    }
}

.service-heading {
    margin: 15px 0;
    text-transform: none;
}

#portfolio .portfolio-item {
    right: 0;
    margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(254, 209, 54, .9);
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
    opacity: 1;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
    margin-top: -12px;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
    margin: 0;
}

#portfolio .portfolio-item .portfolio-caption {
    margin: 0 auto;
    padding: 25px;
    max-width: 400px;
    text-align: center;
    background-color: #fff;
}

#portfolio .portfolio-item .portfolio-caption h4 {
    margin: 0;
    text-transform: none;

}

#portfolio .portfolio-item .portfolio-caption p {
    margin: 0;
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-style: italic;

}

#portfolio * {
    z-index: 2;
}

@media (min-width: 767px) {
    #portfolio .portfolio-item {
        margin: 0 0 30px;
    }
}

.timeline {
    position: relative;
    padding: 0;
    list-style: none;
}

.timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    width: 2px;
    margin-left: -1.5px;
    background-color: #2e77a2;
    border: 2px dashed;
}

.timeline > li {
    position: relative;
    margin-bottom: 50px;
    min-height: 50px;
}

.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline > li .timeline-panel {
    float: right;
    position: relative;
    width: 100%;
    padding: 0 20px 0 100px;
    text-align: left;
}

.timeline > li .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline > li .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

.timeline > li .timeline-image {
    z-index: 100;
    position: absolute;
    left: 0;
    width: 80px;
    height: 80px;
    margin-left: 0;
    border: 7px solid #9fc0d4;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    background-color: #fed136;
}

.timeline > li .timeline-image h4 {
    margin-top: 12px;
    font-size: 10px;
    line-height: 14px;
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    padding: 0 20px 0 100px;
    text-align: left;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

.timeline > li:last-child {
    margin-bottom: 0;
}

.timeline .timeline-heading h4 {
    margin-top: 0;
    color: inherit;
}

.timeline .timeline-heading h4.subheading {
    text-transform: none;
}

.timeline .timeline-body > p,
.timeline .timeline-body > ul {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .timeline:before {
        left: 50%;
    }

    .timeline > li {
        margin-bottom: 30px;
        min-height: 100px;
    }

    .timeline > li .timeline-panel {
        float: left;
        width: 41%;
        padding: 0 20px 20px 30px;
        text-align: right;
    }

    .timeline > li .timeline-image {
        left: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
    }

    .timeline > li .timeline-image h4 {
        margin-top: 16px;
        font-size: 13px;
        line-height: 18px;
    }

    .timeline > li.timeline-inverted > .timeline-panel {
        float: right;
        padding: 0 30px 20px 20px;
        text-align: left;
    }
}

@media (min-width: 992px) {
    .timeline > li {
        min-height: 150px;
    }

    .timeline > li .timeline-panel {
        padding: 0 20px 20px;
    }

    .timeline > li .timeline-image {
        width: 150px;
        height: 150px;
        margin-left: -75px;
    }

    .timeline > li .timeline-image h4 {
        margin-top: 30px;
        font-size: 18px;
        line-height: 26px;
    }

    .timeline > li.timeline-inverted > .timeline-panel {
        padding: 0 20px 20px;
    }
}

@media (min-width: 1200px) {
    .timeline > li {
        min-height: 170px;
    }



    .timeline > li .timeline-panel {
        padding: 0 20px 20px 100px;
    }

    .timeline > li .timeline-image {
        width: 170px;
        height: 170px;
        margin-left: -85px;
    }

    .timeline > li .timeline-image h4 {
        margin-top: 40px;
    }

    .timeline > li.timeline-inverted > .timeline-panel {
        padding: 0 100px 20px 20px;
    }
}

.team-member {
    margin-bottom: 50px;
    text-align: center;
}

.team-member img {
    margin: 0 auto;
    border: 7px solid #fff;
}

.team-member h4 {
    margin-top: 25px;
    margin-bottom: 0;
    text-transform: none;
}

.team-member p {
    margin-top: 0;
}

aside.clients img {
    margin: 50px auto;
}

section#contact {
    background-color: #f5f5f5;
    /*  background-image: url(../../public/images/map-image.png);*/
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 0px;
}



section#contact .form-group {
    margin-bottom: 25px;
}

section#contact .form-group input,
section#contact .form-group textarea {
    padding: 20px;
}

section#contact .form-group input.form-control {
    height: auto;
    direction: ltr !important;
    font-family: IRANSansWeb_FaNum_Medium;
}

section#contact .form-group textarea.form-control {
    height: 236px;
}

section#contact .form-control:focus {
    border-color: #fed136;
    box-shadow: none;
}

section#contact::-webkit-input-placeholder {
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #bbb;
}

section#contact:-moz-placeholder {
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #bbb;
}

section#contact::-moz-placeholder {
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #bbb;
}

section#contact:-ms-input-placeholder {
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #bbb;
}

section#contact .text-danger {
    color: #e74c3c;
    font-family: IRANSansWeb_Black;
    direction: rtl;
}

footer {
    padding: 25px 0;
    text-align: center;
}

footer span.copyright {
    text-transform: uppercase;
    text-transform: none;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 40px;
}

footer ul.quicklinks {
    margin-bottom: 0;
    text-transform: uppercase;
    text-transform: none;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 40px;
}

ul.social-buttons {
    margin-bottom: 0;
}

ul.social-buttons li a {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 40px;
    outline: 0;
    color: #fff;
    background-color: #222;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

ul.social-buttons li a:hover,
ul.social-buttons li a:focus,
ul.social-buttons li a:active {
    background-color: #fed136;
}

.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus {
    outline: 0;
}

.portfolio-modal .modal-content {
    padding: 100px 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    text-align: center;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #ffffff;
    color: #003a4a;
}

.portfolio-modal .modal-content h2 {
    margin-bottom: 15px;
    font-size: 3em;
}

.portfolio-modal .modal-content p {
    margin-bottom: 30px;
}

.portfolio-modal .modal-content p.item-intro {
    margin: 20px 0 30px;
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-style: italic;
}

.portfolio-modal .modal-content ul.list-inline {
    margin-top: 0;
    margin-bottom: 30px;
}

.portfolio-modal .modal-content img {
    margin-bottom: 30px;
}

.portfolio-modal .close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
}

.portfolio-modal .close-modal:hover {
    opacity: .3;
}

.portfolio-modal .close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    background-color: #222;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.portfolio-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 75px;
    background-color: #222;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.portfolio-modal .modal-backdrop {
    display: none;
    opacity: 0;
}

::-moz-selection {
    text-shadow: none;
    background: #fed136;
}

::selection {
    text-shadow: none;
    background: #fed136;
}

img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}

body {
    webkit-tap-highlight-color: #fed136;

}

.rang {
    width: 63px;
    height: 16px;
    float: left;
    border: 1px solid #c0c0c0;
    margin-bottom: 10px;
    margin-left: 10px;
    cursor: pointer;
}

.activ2 {
    border: 1px solid green !important;
    box-shadow: 2px 2px 10px #008000;
}


@media screen and (max-width: 2000px) {
    #kol {
        width: 1170px;
    }


}






#top {

    width: 780px;
    float: left
}

#top2 {

    width: 780px;
    float: left
}

#desc-kol1 {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

#desc-kol1 h2 {
    color: #8e8a8a;
    text-align: right;
    font-family: IRANSansWeb_FaNum_Medium;
    font-size: 25px;
}


.spacing {
    height: 20px;
}

#desc-kol1 ul {
    color: #8e8a8a;
}

#desc-kol1 ul li {

    position: relative;
    padding-left: 40px;
    line-height: 1.75;
    margin-bottom: 6px;
    display: block;
    width: 100%;
    text-align: right;
    direction: rtl;
    text-align: justify;
    font-size: 14px;
    font-weight: bold;
    color: #6f5a47;

}


#desc-kol1 ul li:before {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    background-image: url(https://myball.sportino.ir/public/images/checkk.png);
    background-size: cover;
    background-position: center;
    right: -25px;
    top: 15px;
    transform: translateY(-50%);
}


#desc-kol1 ul li:nth-child(7):after {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    background-image: url(https://myball.sportino.ir/public/images/point-down.png);
    background-size: cover;
    background-position: center;
    right: 185px;
    top: 85px;
    transform: translateY(-50%);
}


h1, h2, h3, h4, h5, h6 {

    color: #000000;

}

#title-page {

    margin-top: 0px;
    margin-bottom: 100px;
 
}


#title-page h1 {
    font-size: 40px;
    font-style: normal;
    color: #999;
    font-weight: 800;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 1.0);
    text-align: center;
    font-family: IRANSansWeb_FaNum_Medium;
}


#steps {

    width: 660px;
    height: 100px;
    float: left;
    background: url(https://myball.sportino.ir/public/images/step-linebg.png) no-repeat 75px 18px;
}


.stepbutton {
    color: #999999;
    width: 20%;
    float: left;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    font-family: IRANSansWeb_FaNum_Medium;
}

.stepActive {
    color: #f7931d !important;
}

.stepbutton span {

    display: block;
    width: 37px;
    height: 37px;
    margin: 0 auto;
    clear: both;
    text-align: center;
    line-height: 35px;
    background: url(https://myball.sportino.ir/public/images/step-inactivebg.png) no-repeat top left;
    margin-bottom: 10px;
    color: #FFFFFF;

}

.picrow {
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -75px;

}

.picball {

    width: 300px;
    height: 300px;
    float: right;
    margin: 10px;
    padding: 30px;
}

.omoomi {
    width: 250px;
    height: 250px;
    opacity: 45%;
    cursor: pointer;
    position: relative;
}

.like {
    width: 55px;
    height: 45px;
    position: absolute;
    top: 216px;
    right: 197px;
    background: url(https://myball.sportino.ir/public/images/mark2.png) no-repeat;
    display: none;
}

.gab-like {
    width: 28px;
    height: 25px;
    position: absolute;
    top: 239px;
    right: 227px;
    background: url(https://myball.sportino.ir/public/images/mark1.png);
}

.titel-ball {
    position: absolute;
    top: 222px;
    right: 52px;

}

.titel-ball p {
    font-size: 18px;
    font-weight: bold;
    color: rgba(14, 159, 224, 0.78);
    text-align: center;
    margin: 0px;
}

.next-ghab {
    cursor: pointer;
    clear: both;
    content: "";
    height: 60px;
    top: 20px;
    margin: 0 0 30px 0;
    position: relative;
    text-align: center;
    border: 1px solid #ddd;
    background: #f3f3f3;
    padding: 15px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e6e4e4;

}

.next-button {
    display: block;
    width: 119px;
    height: 30px;
    background: url(https://myball.sportino.ir/public/images/next2.png);

}

ul.navbar-nav {
    float: right;
!important;
}

ul.navbar-nav li {
    border-left: 1px solid #ffffff;
}

ul.navbar-nav li a {
    color: #333333 !important;
}

.navbar-inverse .navbar-nav > .active > a {
    background-color: #0084BF !important;
}

#menu {
    margin-right: 0px !important;
}

.thumbnail-ball {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: -8px;
    right: 250px
}

.btn-default {

    font-size: 16px;
    font-weight: bold;
    font-family: IRANSansWeb_FaNum_Medium;
}

#generate-next {

    clear: both;
    content: "";
    position: relative;
}

#thumb-ball {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 30px;
    right: 250px;
}

#ball-tittle {

    margin-top: 20px;
    border-bottom: 2px solid #999999;
    height: 70px;
    width: 700px;
    clear: both
}

#ball-tittle-pic {

    height: 60px;
    width: 350px;
    opacity: 50%;
    float: left
}

#ball-tittle-pic > div {

    width: 60px;
    height: 60px;
    margin-right: 5px;
    margin-left: 5px;
}

#ball-tittle-text {

    height: 60px;
    width: 350px;
    color: #224c69 !important;
    text-align: right;
    float: left
}

#ball-tittle-text > p {
    font-size: 17px;
    margin-top: 20px;
    font-weight: bold;
    text-shadow: 1px 1px #999;
    font-family: IRANSansWeb_FaNum_Medium
}

p {
    font-family: IRANSansWeb_FaNum_Medium;
}

#front-back {

    width: 700px;
    float: right;
    margin-right: 95px;
}

.front-back {
    width: 50%;
    float: left
}

.front-back > div > p {

    font-size: 17px;
    margin-top: 20px;
    font-weight: bold;
    text-shadow: 1px 1px #999;
    font-family: IRANSansWeb_FaNum_Medium;
    text-align: center;
    color: #0e78ab !important;
}

.pic-of-ball {

    height: 300px;
    position: relative;
}

.sliderscroll {
    width: 700px;
    float: right;
    margin-right: 95px;
    height: 250px;
}

.sliderscroll-main {
    width: 700px;
    height: 100%;
    float: right;
    overflow: hidden; /* in ra gozashtim ta sar riz ul ke width ro ziad kardim penhan shavad*/
}

.sliderscroll-main ul {
    padding: 0;
    width: 2800px; /* width ra bishtar az width tag parent yani sliderscroll-main gozashtim ta betanim scroll konim */
    height: 100%;
    padding-top: 10px;
    float: right;
    margin-right: -2100px;
    font-family: IRANSansWeb_FaNum_Medium;
}

.sliderscroll-main ul li {
    position: relative;
    width: 700px;
    height: 100%;
    float: right;
    border: 1px solid #cccccc;
    border-radius: 5px;
    text-align: right;
}

#all-logo {
    width: 100%;
    height: auto;
    float: right;

}

.all-logo-right-left {
    width: 50%;
    float: right;
    padding-left: 55px
}

.logo-check {
    width: 100%;
    height: 65px;
    text-align: center
}

.logo {
    width: 80%;
    height: 100%;
    text-align: center;
    border-bottom: 1px solid #999999;
    opacity: 0.4;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
}

.logo-box {

    width: 14px;
    height: 14px;
    background: url(https://myball.sportino.ir/public/images/mark1-1.png);
    float: right;
    margin-right: 30px;
    margin-top: 10px;
    cursor: pointer;
}

.logo-tick {

    width: 27px;
    height: 22px;
    background: url(https://myball.sportino.ir/public/images/mark2-1.png);
    position: absolute;
    top: 20px;
    right: 161px;
    display: none;
}

.logo-bac {

    width: 100px;
    height: 40px;
    float: right;
    cursor: pointer
}

#main-logo {
    width: 200px;
    height: 79px;
    position: absolute;
    top: 20px;
    z-index: 1;
    right: 72px;
}

.addrang {
    border: 3px solid #1dd402;
}

.text-custom {

    width: 72%;
    height: 50px;
    position: absolute;
    top: 128px;
    z-index: 10;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 3%;
    text-align: center;
    font-size: 30px;
    direction: rtl;
    right: 35px;
    font-family: nazanin;
    font-weight: bold;
    z-index: 1;
    text-transform: none;
}

#fontselect {

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #4d4d4d;
    margin-right: 8px;
    background: #d9d9d9 url(https://myball.sportino.ir/public/images/dropdown.png) repeat-x top left;
    width: 200px;
    color: #000000;
    font-weight: bold;
    font-size: 15px;
    font-family: maison;
}

#fontselect option {

    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
    font-family: maison;
}

#li2 .parentdiv {
    width: 100%;
    height: auto;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

#li2 .parentdiv .chailddiv {
    width: 33%;
    float: right;
    height: 200px;
    border-left: 1px solid #cccccc;
    text-align: center;
}

.tittle-chaild {
    padding-right: 20px;
    color: #224c69;
    text-shadow: 1px 1px #999;
    text-align: center;
    font-size: 15px;
}

#typecustomtext {

    border: 1px solid #ccc;
    height: 35px;
    padding: 5px;
    background: #fff;
    max-width: 200px;
    color: #000;
    text-transform: uppercase;
    margin: auto;
    width: 200px;
    direction: rtl;
    text-transform: none;
}

#customContactInfo {
    width: 100%;
    height: auto;
    float: left;
}

.headingfirst {

    color: #58595b;
    font-weight: bolder;
    font-size: 16px;
    width: 100%;
    border-bottom: 1px solid #d5d7d7;
    margin-bottom: 6px;
    padding-bottom: 2px;
    padding-left: 20px;
    padding-right: 20px;
}

.yelloheading {
    color: #F7931D;
    font-weight: bolder;
    font-size: 18px;
    width: 90%;
    border-bottom: 1px solid #d5d7d7;
    margin-bottom: 10px;
    padding-bottom: 5px;
    text-align: center;
    padding-right: 20px;
    margin: auto;
    margin-bottom: 5px;
    font-family: 'IRANSansWeb_FaNum_Medium';
}

#customContactInfo input {

    width: 205px;
    padding: 0 3px;
    line-height: 20px;
    margin-bottom: 5px;
    border: none;
    height: 20px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    color: #000;
    direction: rtl;
    padding-right: 10px;
    font-size: 13px;
    font-weight: bold;
    font-family: 'IRANSansWeb_FaNum_Medium';
}

#customContactInfo label {

    margin-right: 5px;
    display: block;
    float: right;
    width: 155px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #224c69;
    text-shadow: 1px 1px #999;
    font-family: 'IRANSansWeb_FaNum_Medium';
    font-size: 11px;
    position: relative;
    top: 5px;
}

#customContactInfo textarea {
    width: 340px;
    padding: 3px;
    line-height: 20px;
    margin-bottom: 5px;
    border: none;
    height: 67px;
    border: 1px solid #cccccc;
    color: #000;
    direction: rtl;
    padding-right: 10px;
    font-size: 13px;
    font-weight: bold;
    font-family: 'IRANSansWeb_FaNum_Medium';
}

#dotted {
    width: 500px;
    border-top: 1px solid #d3d5d6;
    height: 1px;
    margin: 10px 0;
    float: right;
}

tbody tr th input {

    width: 40px;
    padding: 0 3px;
    line-height: 20px;
    margin-bottom: 5px;
    border: none;
    height: 20px;
    border-bottom: 1px solid #cccccc;
    border-radius: 5px;
    color: #000;
    direction: rtl;
    font-size: 15px;
    font-weight: bold;
    margin-top: 15px;
}

#texttop-price {

    width: 100%;
    height: auto;
    margin-bottom: 38px;
    justify-content: center;
    display: flex;
}

.texttop-price {
    width: 90%;
    border-bottom: 1px solid #cccccc;
}

.matn-price {

    display: block;
    color: #3c3c3c;
    font-size: 12px;
    font-weight: bold;
    font-family: IRANSansWeb_FaNum_Medium;
    text-align: right;
    position: relative;
    direction: rtl;
    margin-bottom: 8px;
    margin-right: 30px;
}

.texttop-price span:before {

    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    background-image: url(https://myball.sportino.ir/public/images/checkk.png);
    background-size: cover;
    background-position: center;
    right: -30px;
    top: 12px;
    transform: translateY(-50%);
}

#purchaseTable {
    width: 90%;
    margin-bottom: 30px;
    font-weight: bold;
    margin: auto;
}

#purchaseTable thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

#purchaseTable thead tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    border-bottom: 1px solid #d5d6d8;
    font-size: 13px;
}

#purchaseTable thead tr th {
    color: #105286;
    font-weight: bolder;
    text-align: center;
    width: 130px;
    border-bottom: 1px solid #999;
}

#parantez-saledarsad {
    color: red;
}

#saledarsad {
    display: inline-block;
    color: red;
    font-weight: bold;
}

#purchaseTable tbody {

    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

#purchaseTable tbody tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    margin-top: 5px;
}

#purchaseTable tbody tr th {
    color: red;
    font-weight: bolder;
    text-align: center;
    width: 130px;
    font-size: 20px;
    border-left: 1px solid #999;
}

#purchaseTable tbody tr th:nth-child(1){

    border: none;
}


#payable {

    display: block;
    float: right;
    width: 50%;
    text-align: center;
    width: 100%;
    background: green;
    border-radius: 5px;
    color: #fff;
}

#sale {

    display: block;
    float: right;
    width: 50%;
    text-align: center;
    width: 100%;
}

#totalprice {

    display: block;
    float: right;
    width: 50%;
    text-align: center;
    width: 100%;
}

#quantity {

    width: 80px;
    height: 50px;
    border: 1px solid #999999;
    position: relative;
    margin-top: 15px;
    border-radius: 10px;
}

#plus {
    width: 8px;
    height: 8px;
    display: block;
    position: absolute;
    top: 21px;
    right: 65px;
    background: url(https://myball.sportino.ir/public/images/plus.png);
    cursor: pointer;
}

#less {
    width: 8px;
    height: 8px;
    display: block;
    position: absolute;
    top: 21px;
    right: 5px;
    background: url(https://myball.sportino.ir/public/images/less.png);
    cursor: pointer;
}

#units {
    text-align: center;
    color: red;
}

#price {

    display: block;
    float: right;
    width: 50%;
    text-align: center;
    width: 100%;
}

#price2 {

    display: block;
    float: right;
    width: 50%;
    text-align: center;
    width: 100%;
    display: none;
}

#finalpayablediv {

    width: 50%;
    float: right;
    color: red;
    margin-top: 10px;
    direction: rtl;
    padding-right: 20px;
    font-size: 16px;
    font-weight: bold;
}

#finalpayablespan1 {
    width: 130px;
    display: inline-block;
    text-align: center;
    background: green;
    border-radius: 5px;
    color: #fff;
}

#finalpayablespan2 {
    display: inline-block;
    text-align: center;
    color: red;

}

.logo-box-avenger {
    margin-right: 10px !important;
    margin-top: 35px !important;
}

.logo-tick-avenger {
    top: 33px !important;
    right: 84px !important;
}

.logo-tick2 {

    width: 27px;
    height: 22px;
    background: url(https://myball.sportino.ir/public/images/mark2-1.png);
    position: absolute;
    top: 20px;
    right: 161px;
    display: none;
}

.logo2 {

    width: 80%;
    height: 100%;
    text-align: center;
    border-bottom: 1px solid #999999;
    opacity: 0.4;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
}

.limitcharacter {
    color: red;
    direction: rtl;
    font-size: 11px;
    font-family: IRANSansWeb_FaNum_Medium;
    font-weight: bold;
    margin-top: 10px;
}

.submit {
    width: 120px;
    height: 30px;
    display: inline-block;
    background: url(https://myball.sportino.ir/public/images/submit-btn.png) no-repeat;
    margin-left: 30px;
    border: none;
}

.redborder {

    border: 1px solid red !important;
}

#starfilds {
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    margin: 0px;
    direction: rtl;
    padding-right: 15px;
    background: red;
    margin-bottom: 5px;
    display: none;
}


#darkback {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 5;
    display: none;
}

#finalsabt {
    top: 35%;
    color: #fff;
    position: absolute;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    height: 130px;
    display: none;
}

#finalsabt > div {
    width: 60%;
    margin: auto;
    height: 100%;
}

#finalsabt > div > p {

    color: #ffffff;
    text-align: right;
    font-family: IRANSansWeb_FaNum_Medium;
    padding-top: 5px;
    font-weight: 600;
    direction: rtl;
    margin-bottom: 0px;
}

.yesno {

    float: right;
    margin-right: 7px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #3c3c3c;
    font-family: IRANSansWeb_FaNum_Medium ;
}

.specifications {
    color: #224c69;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-right: 5px;
    margin-bottom: 0px;
}
.specifications-label {

    color: #cc5b0b;
    font-size: 18px;
    font-weight: bold;
    direction: rtl;
}

.border-none {
    border: none !important;
    color: #ea5959 !important;
}
.label-border-none{

    width: 90px !important;
    direction: rtl;
}

#coderahgiri {

    border: 2px solid #ccc;
    font-size: 15px;
    font-weight: bold;
}
.navbar-inverse .navbar-nav>li>a {
    font-family: 'IRANSansWeb_FaNum_Medium';
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 10px !important;

}


.navbar-inverse .navbar-nav>li>a:hover {
  color: #d60644 !important;
}



#desc-kol{
    width: 390px;
    float: left;
    font-family: 'IRANSansWeb_FaNum_Medium'
}


.logo-tick-pvl{
    right: 153px !important;
}



#mobile-gif {
    display: none;
    font-family: IRANSansWeb_FaNum_Medium;
    color: #666666;
    text-align: center;
    font-weight: bold;
    direction: rtl;
}

#first-ghab,#pbr7-ghab,#capitan-ghab,#pvl5000-ghab,#avengers-ghab {
    width: 700px;
    right: 15px;
}

@media screen and (max-width: 1280px){


    #desc-kol1 ul li:nth-child(7):after {
        right: 135px;
        top: 37px;
    }


    #first-ghab,#pbr7-ghab,#capitan-ghab,#pvl5000-ghab,#avengers-ghab {

        right: -55px;
    }


    .picrow{
        margin-left: -25px;
    }

    #kol {
        width: 900px;
        display: flex ;
        flex-direction: column ;
        align-items: center ;
        margin: 0 auto;
    }


    #desc-kol {
        order: -1;
        width: 870px;
        margin-bottom: 100px;
    }

    #desc-kol1 ul{

        padding-left: 0px;
    }

    #desc-kol1 ul li {

        padding-left: 0px;
    }



    #steps {
        width: 960px;
        height: 100px;
        float: left;
        background: url(https://myball.sportino.ir/public/images/step-linebg4.png) no-repeat 82px 18px;
        margin-left: -83px;
        margin-bottom: 50px;
    }

    #ball2,#ball4 {
        padding-left: 100px;
    }

    #ball1,#ball3 {
        width: 360px;
    }

    /*other page*/
    #ball-tittle {
        width: 830px;

    }

    #ball-tittle-text{
        width: 470px;
    }

    #front-back{
        margin-right: 25px;
    }

    .sliderscroll{
        margin-right: 25px;
    }

    #next1,#next2,#next3,#prev3 {
        right: -55px !important;
    }


    #finalsabt > div > p:nth-child(1) {
        font-size: 24px !important;
    }

    #finalsabt > div > p:nth-child(2) {
        font-size: 18px !important;
    }


    .yesno {
        margin-top: 5px;
    }

}




@media screen and (max-width: 992px){


    #desc-kol1 ul li:nth-child(7):after {
        right: 335px;
        top: 37px;
    }

    #first-ghab,#pbr7-ghab,#capitan-ghab,#pvl5000-ghab,#avengers-ghab {

        right: -45px;
    }


    .picrow{
        margin-left: -55px;
    }


    #kol {
        width: 750px;
        display: flex ;
        flex-direction: column ;
        align-items: center ;
        margin: 0 auto;
    }


    #desc-kol {
        order: -1;
        width:680px;
        margin-bottom: 100px;
    }

    #desc-kol1 ul{

        padding-left: 0px;
    }

    #desc-kol1 ul li {

        padding-left: 0px;
    }

    #steps {
        width: 700px;
        height: 100px;
        float: left;
        background: url(https://myball.sportino.ir/public/images/step-linebg3.png) no-repeat 75px 18px;
        margin-left: 45px;
    }

    #ball2,#ball4 {
        padding-left: 73px;
    }

    #ball1,#ball3 {
        width: 330px;
    }


    /*other page*/
    #ball-tittle {
        width: 600px;
        margin: 0 auto;

    }

    #ball-tittle-text{
        width: 240px;
    }

    #front-back{
        margin-right: 35px;
    }

    .sliderscroll{
        margin-right: 35px;
    }

    #next1,#next2,#next3,#prev3 {
        right: -45px !important;
    }



    #finalsabt > div > p:nth-child(1) {
        font-size: 22px !important;
    }

    #finalsabt > div > p:nth-child(2) {
        font-size: 16px !important;
    }


    .yesno {
        margin-top: 10px;
    }


    .sabt{
        margin-right: 0px !important;
    }

    .peygiri {
        text-align: right !important;
        padding-right: 95px;
    }


    #ball-tittle.final {
        display: flex;
    }

    #ball-tittle.final > div:nth-child(1) {
        margin-right: 11px;
    }


    #ball-tittle.final > div:nth-child(1) > div:nth-child(1){
        width: 95px !important;
    }
    #ball-tittle.final > div:nth-child(1) > div:nth-child(3){
        width: 190px !important;
    }


    #ball-tittle.final > div:nth-child(2) > p{
        font-size: 12px !important;
    }

    .amade{
        right: 100px !important;
    }


    .timeline{

       height: 300px;
    }


}



@media screen and (max-width: 850px) {

    #desc-kol1 ul li:nth-child(7):after {
        right: 442px;
        top: 37px;
    }

    #first-ghab,#pbr7-ghab,#capitan-ghab,#pvl5000-ghab,#avengers-ghab {

        width: 600px !important;
        right: -32px !important;
    }

    #top{

        width: 683px;

    }


    #kol {
        width: 650px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }


    #desc-kol {
        order: -1;
        width:580px;
        margin-bottom: 100px;
    }


    #desc-kol1 ul{

        padding-left: 0px;
    }

    #desc-kol1 ul li {

        padding-left: 0px;
    }

    #steps {
        width: 630px;
        height: 100px;
        float: left;
        background: url(https://myball.sportino.ir/public/images/step-linebg.png) no-repeat 50px 18px;
        margin-left: 25px;
    }

    #ball2,#ball4 {
        padding-left: 50px;
    }

    #ball1,#ball3 {
        width: 300px;
    }

    #thumb-ball {

        right: 200px;
    }

    /*other page*/
    #ball-tittle {
        width: 575px;
        margin: 0 auto;

    }

    #ball-tittle-text{
        width: 260px;
    }
    #ball-tittle-pic{
        width: 300px;
    }

    #front-back{
        margin-right: -12px;
    }

    .sliderscroll{
        margin-right: -10px;
        width: 600px ;
    }

    #next1,#next2,#next3,#prev3 {
        width: 600px !important;
        right: -32px !important;
    }
    #top2{
        width: 660px;
    }



    .sliderscroll-main{
        width: 600px ;
        margin-right: 38px;
    }

    .sliderscroll-main ul{

        width: 2400px ;
        margin-right: -1800px ;

    }

    .sliderscroll-main ul li{
        width: 600px ;
    }

    .logo-tick{
        right: 142px;
    }

    #typecustomtext,#fontselect{
        width: 185px;
    }
    .rang{
        width: 52px;
    }

    #address{
        width: 435px !important;
    }

    #finalpayablediv{
        font-size: 15px;
    }

    .logo-tick-avenger{
        right: 73px !important;
    }

    .logo-check-av .logo2 {

        width: 93%;
    }

    .logo-tick-pvl{
        right: 134px !important;
    }


    #finalsabt > div > p:nth-child(1) {
        font-size: 20px !important;
    }

    #finalsabt > div > p:nth-child(2) {
        font-size: 14px !important;
    }


    .sabt{
        margin-right: 0px !important;
    }

    .peygiri {
        text-align: right !important;
        padding-right: 95px;
    }


    #ball-tittle.final {
        display: flex;
    }

    #ball-tittle.final > div:nth-child(1) {
   margin-right: 11px;
    }


    #ball-tittle.final > div:nth-child(1) > div:nth-child(1){
       width: 95px !important;
    }
    #ball-tittle.final > div:nth-child(1) > div:nth-child(3){
        width: 190px !important;
    }


}


@media screen and (max-width: 767px) {


    #desc-kol1 ul li:nth-child(7):after {
        right: 443px;
        top: 38px;
    }


    .timeline{

        width: 305px;
        margin: 0 auto;
    }

    .timeline-body{

        position: relative;
        top: -35px;
    }

    .timeline-body > h4{

      font-size: 12px !important;
    }


    .movaf{
        right: 5px !important;
    }

.amade{
   right: 50px !important;
}

.ersal{
    right: -30px !important;
}

.bargasht{
    right: 45px !important;
}

}

@media screen and (max-width: 700px) {

    #desc-kol1 ul li:nth-child(7):after {
        right: 185px;
        top: 62px;
    }

    #first-ghab,#pbr7-ghab,#capitan-ghab,#pvl5000-ghab,#avengers-ghab {

        width: 550px !important;
        right: 6px !important;
    }


    .picrow{
        margin-left: -20px;
    }

    div.container{
        padding-left: 0px !important;
    }


    #top{

        width: 500px;

    }

    #top2{

        width: 520px;

    }

    #kol {
        width: 520px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }


    #desc-kol {
        order: -1;
        width:445px;
        margin-bottom: 100px;
    }

    #desc-kol1 ul{

        padding-left: 0px;
    }

    #desc-kol1 ul li {

        padding-left: 0px;
    }

    #steps {
        width: 515px;
        height: 100px;
        float: left;
        background: url(https://myball.sportino.ir/public/images/step-linebg5.png) no-repeat 45px 18px;
        margin-left: 15px;
    }

    #ball2,#ball4 {
        padding-left: 13px;
        padding-right: 0px;
    }

    #ball1,#ball3 {
        width: 275px;
    }

    #thumb-ball {

        right: 110px;
    }



    /*other page*/
    #ball-tittle {
        width: 520px;
        margin: 0 auto;

    }

    #ball-tittle-text{
        width: 300px;
    }
    #ball-tittle-pic{
        width: 215px;
    }

    #ball-tittle-text > p{
       font-size: 14px;
    }

    #front-back{
        margin-right: -15px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 500px;
        float: none;
    }

    .front-back{
        width: 70%;
    }

    .sliderscroll{
        margin-right: -10px;
        width: 550px;
    }


    .sliderscroll-main{
        width: 550px ;
        margin-right: -15px;
    }

    .sliderscroll-main ul{

        width: 2200px ;
        margin-right: -1650px ;

    }

    .sliderscroll-main ul li{
        width: 550px ;
    }

    .logo-tick{
        right: 132px;
    }

    #typecustomtext,#fontselect{
        width: 180px;
    }
    .rang{
        width: 45px;
    }

    #address{
        width: 388px !important;
    }

    #finalpayablediv{
        width: 60%;
        font-size: 15px;
    }


    #next1,#next2,#next3,#prev3 {
        width: 550px !important;
        right: 6px !important;
    }

    .logo-tick-avenger {
        right: 68px !important;
    }

    .logo-check-av .logo2 {
        width: 100%;
    }

    .logo-tick-pvl{
        right: 125px !important;
    }

    #finalsabt > div > p:nth-child(1) {
        font-size: 19px !important;
    }

    #finalsabt > div > p:nth-child(2) {
        font-size: 13px !important;
    }

    .yesno {
        margin-top: 5px;
    }



    #ball-tittle.final {
        display: flex;
        flex-direction: column-reverse;
    }


    #ball-tittle.final > div:nth-child(2){
        margin: 0 auto;
    }


    .sabt{
        margin-right: 0px !important;
    }

.peygiri {
    text-align: right !important;
    padding-right: 35px;
}

}







@media screen and (max-width: 576px) {


    #desc-kol1 ul li:nth-child(7):after {
        right: 284px;
        top: 62px;
    }

    #first-ghab,#pbr7-ghab,#capitan-ghab,#pvl5000-ghab,#avengers-ghab {

        width: 300px !important;
        right: -10px !important;
    }


    .picrow{
        margin-left: -10px;
    }

    #top{

        width: 318px;

    }



    #kol {
        width: 305px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }


    #top2{

        width: 305px;

    }


    #desc-kol {
        order: -1;
        width:385px;
        margin-bottom: 25px;
    }

    #desc-kol1 ul{

        padding-left: 0px;
    }

    #desc-kol1 ul li {

        padding-left: 0px;
    }

    #steps {
        width: 400px;
        height: 100px;
        float: left;
        background: url(https://myball.sportino.ir/public/images/step-linebg6.png) no-repeat 15px -39px;
        margin-left: -50px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        height: 255px !important;
    }

    #step1,#step2,#step3,#step4 {
        flex-basis: 50%;
    }

    #step5{

        flex-basis: 100%;
    }

    .picrow {
        flex-direction: column-reverse;
        margin-right: 0px;
        border-bottom: none !important;
    }

    #ball2,#ball4 {
        padding-left: 25px;
        width: 275px;
        border: none !important;
    }

    #ball1,#ball3 {
        width: 275px;
    }

    .stepbutton{
        font-size: 12px;
    }
    .stepbutton span{
        margin-bottom: 0px;
    }

    #thumb-ball {

        right: 25px;
    }



    /*other page*/
    #ball-tittle {
        width: 300px;
        margin: 0 auto;

    }

    #ball-tittle-text{
        width: 180px;
    }
    #ball-tittle-pic{
        width: 110px;
    }

    #ball-tittle-text > p{
        font-size: 12px;
    }

    #front-back{
        margin-right: -15px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 305px;
        float: none;
    }

    .front-back{
        width: 100%;
    }

    .sliderscroll{
        margin-right: 3px;
        width: 310px;
        height: 470px;
    }


    .sliderscroll-main{
        width: 310px ;

    }

    .sliderscroll-main ul{

        width: 1240px ;
        margin-right: -930px ;

    }

    .sliderscroll-main ul li{
        width: 310px ;
    }

    .logo-tick{
        right: 167px;
        top: 30px;
    }

    #typecustomtext,#fontselect{
        width: 180px;
    }
    .rang{
        width: 45px;
    }

    #address{
        width: 388px !important;
    }

    #finalpayablediv{
        width: 60%;
        font-size: 15px;
    }


    #next1,#next2,#next3,#prev3 {
        width: 300px !important;
        right: -10px !important;
    }

    .pic-of-ball{

        background-position: 0px !important;
    }



    #main-logo{
        right: 50px;
    }

    #all-logo {
        display: flex;
        flex-direction: column;
    }

    .all-logo-right-left{
        width: 100%;
        padding-left: 0px !important;
    }
  /*  #li1,#li2{
        overflow: auto;
    }
    */
    .parentdiv{
        flex-direction: column-reverse;
    }
    #li2 .parentdiv .chailddiv{
        width: 100%;
    }

    .yelloheading{
        font-size: 15px;
    }

    .matn-price{
        font-size: 11px;
    }
    #purchaseTable thead tr th{
        font-size: 11px;
    }

    #price,#totalprice,#payable{
        font-size: 12px;
    }
    #texttop-price {
        margin-bottom: 8px;
    }
    #customContactInfo label{
        width: 87px;
        font-size: 10px;
    }
    #customContactInfo textarea{
        width: 214px;
    }
    #customContactInfo input{
        width: 214px;
        font-size: 11px;
    }
    #address{
    width: 214px !important;
     }
    #li2 .parentdiv .chailddiv{
        height: 150px;
    }
    .rang{
        width: 49px;
    }
    .logo-check{
        height: 85px;
    }

    .logo{
        border-bottom: 1px solid #999999 !important;
    }

    .text-custom-cap {
        width: 83% !important;
        right: 22px !important;
    }


    .text-custom-pbr7 {
        width: 83% !important;
        right: 17px !important;
    }

    .text-custom-pvl {
        width: 82.5%;
        right: 17px !important;
    }

    .logo-check-cap{
        height: 106px !important;
    }

    .text-custom-aveng{
        width: 82.5% !important;
        right: 17px !important;
    }

    .logo-check-cap .logo .logo-tick{
        top: 41px !important;
    }
    .logo-check-av{
        height: 78px !important;
    }

    .logo-check-av .logo2{
       width: 91%;
    }

    .logo-tick-avenger {
        top: 39px !important;
        right: 76px !important;
    }

#main-logo.aven{
    right: 40px !important;
}

    #main-logo.pvl{
        right: 27px !important;
    }
    .logo-tick-pvl{
        right: 138px !important;
    }


    #finalsabt > div > p:nth-child(1) {
font-size: 15px !important;
    }

    #finalsabt > div > p:nth-child(2) {
        font-size: 12px !important;
    }
.yesno {
    margin-top: 10px;
}

#ball-tittle.final{
    display: flex;
    flex-direction: column-reverse;
}

    #ball-tittle.final > div:nth-child(1){
        width: 300px !important;
        display: flex;
        flex-wrap: wrap-reverse;
    }



    #ball-tittle.final > div:nth-child(1) > div:nth-child(1){
        flex-basis: 40%;
    }

    #ball-tittle.final > div:nth-child(1) > div:nth-child(1) > p{
       margin-top: 0px !important;
        border-left: none !important;
    }


    #ball-tittle.final > div:nth-child(1) > div:nth-child(2){
        flex-basis: 40%;
    }

    #ball-tittle.final > div:nth-child(1) > div:nth-child(2) > p{
        margin-top: 0px !important;
        border-left: none !important;
    }

    #ball-tittle.final > div:nth-child(1) > div:nth-child(3){
        flex-basis: 100%;
    }

    #ball-tittle.final > div:nth-child(1) > div:nth-child(3) > p{
        margin-top: 0px !important;
        text-align: center !important;
    }

    #ball-tittle.final > div:nth-child(2){
        margin: 0 auto;
    }

    .sabt{
        margin-right: 0px !important;
    }

    .peygiri{
        font-size: 20px !important;
    }

    .peygiri-code{
        width: 40% !important;
        font-size: 25px !important;
    }
}




@media screen and (max-width: 440px) {

    #desc-kol1 ul li:nth-child(7):after {
        right: 218px;
        top: 87px;
    }


    #top{

        width: 318px;

    }


    #kol {
        width: 305px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }


    #desc-kol {
        order: -1;
        width:290px;
        margin-bottom: 25px;
    }

    #desc-kol1 ul{

        padding-left: 0px;
    }

    #desc-kol1 ul li {

        padding-left: 0px;
    }

    #steps {
        width: 327px;
        height: 100px;
        float: left;
        background: url(https://myball.sportino.ir/public/images/step-linebg6.png) no-repeat -30px -36px;
        margin-left: -5px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        height: 255px;
    }

    #step1,#step2,#step3,#step4 {
        flex-basis: 50%;
    }

    #step5{

        flex-basis: 100%;
    }

    .picrow {
        flex-direction: column !important;
        margin-right: 0px;
    }

    #ball2,#ball4 {
        padding-left: 25px;
        width: 275px;
        border: none !important;
    }

    #ball1,#ball3 {
        width: 275px;
    }


    .stepbutton{
        font-size: 12px;
    }
    .stepbutton span{
        margin-bottom: 0px;
    }


    #contact > .row > h2 {

        font-size: 20px !important;
    }

}


@media screen and (max-width: 340px) {
    #mobile-gif {
        display: block;
    }

    #about{
        display: none;
    }


    #kol{
        display: none;
    }
    .row > i {
        display: none !important;
    }
}






@media print {


    body * {
        visibility: hidden;
    }


    .container, .container * {
        visibility: visible;
    }


    #part2-chap, #part2-chap * {
        visibility: visible;
        position: unset !important;
    }





    * {
        -webkit-print-color-adjust: exact; /* برای مرورگرهای WebKit */
        color-adjust: exact; /* برای سایر مرورگرها */
    }


    body, h1, h2, h3, p, span, div {
        -webkit-print-color-adjust: exact; /* برای مرورگرهای WebKit */
        print-color-adjust: exact;        /* برای سایر مرورگرها */
    }

    #container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    #prn {
        display: none; /* حذف دکمه چاپ */
    }

    #steps {
        display: none;
    }


.noPrint{
    display: none !important;
}


.yelloheading{
    display: none;
}


#vazSef,#change-state {
    display: none !important;
}


    .emza{
        display: block !important;
    }



    .container{
        margin-top: 100px;
        margin-right: 12px;
    }


}









.emza {
    width: 700px;
    height: 250px;
    border: 2px solid #333;
    padding: 2px;
    background-color: #fff;
    margin: 0 auto;
    display: none;
    margin-top: 50px;
    font-family: IRANSansWeb_FaNum_Medium;

}


.emzaTab {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    text-align: center;
}


.emzaTab th, .emzaTab td {
    border: 1px solid #333;

}


.emzaTab th {
    background-color: #f5f5f5 !important;
    color: #000;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    height: 25px;
}

.emzaTab td {
    height: 50px; /* ارتفاع موردنظر برای محل امضا */
    font-size: 15px;
    font-weight: bold;
}



.hadar {
    display: flex;
    justify-content: space-between; /* جداسازی بخش‌ها به دو طرف */
    align-items: center;
    padding: 25px;
    width: 700px;
    margin: 0 auto;
   
}

.text-section {
    flex-grow: 3; /* سه چهارم برای متن */
    color: #000;
    text-align: end;
}

.text-section-p{
    font-size: 9px;

}

.logo-section {
    flex-grow: 1; /* یک چهارم برای لوگو */
}


.logoP {
    width: 50px;
    height: 50px;
}


#part2-chap{
    visibility: hidden;
    position: absolute;
    top: 0;
 }
.order-details {

    text-align: center;
    margin-top: 20px;
}

.customer-info{
    direction: rtl;
    padding-right: 40px;

}


.customer-info span{
    color: #3b3b1f!important;
    padding-right: 20px;

}