/*      مراحل ثبت سفارش سایت    */
@font-face
{
    font-family: "elham";
    src: url("../fonts/BElham.woff");
}

#khatZaman
{
    width: 100%;
    /*height: 300px;*/
    overflow: auto;
    clear: right;
    margin: 0px auto;
    background-color: #D9DBDE;
}

@keyframes poshtFarshMS
{
    0%{right:42.857%;transform: rotate(210deg);background-position: 85% center;}
    25%{right:0px;transform: rotate(180deg);background-position: 85% center;}
    100%{right:90%;transform: rotate(180deg);background-position: 7% center;}
}

@keyframes pahnFarshMS
{
    0%{width: 0px;}
    25%{width: 0px;}
    100%{width: 100%;}
}

@keyframes harkatFarsh
{
    from{top:0px;}
    to{top:-200%;}
}

@keyframes avardanCard
{
    0%{top: 30.444%;transform: rotate(45deg);}
    30%{top: 30.444%;transform: rotate(0deg);}
    100%{top: 87.5%;transform: rotate(0deg);}
}

@keyframes namayeshMatn
{
    from{right:0px;}
    to{right: 110%;}
}

@keyframes felesh
{
    0%{transform: scale(1,1);background-position: 0px 0px;}
    33%{transform: scale(1.2,1.2);background-position: 0px 0px;}
    66%{transform: scale(0.8,0.8);background-position: 0px 0px;}
    66.01%{transform: scale(0.8,0.8);background-position: 0px 100%;}
    100%{transform: scale(1,1);background-position: 0px 100%;}
}

#kadrRatioMS
{
    width: 100%;
    max-width: 2000px;
    padding-top: 16.406%;
    position: relative;
    margin: auto;
    font-family:elham;
    /*background-color: #ccc;*/
}

#kadrMarahelSabtSefaresh
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.mohtavaMs
{
    width: 25%;
    height: 100%;
    float: right;
    position: relative;
}

.feleshMS
{
    width: 15.555%;    /* 70 px*/
    padding-top: 15.555%;
    position: absolute;
    left: -7.605%;     /* 27 px*/
    top: 30.694%;       /* 65 px*/
    background-image: url("../pic/ax-back-felesh.png");
    background-position: 0px 0px;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.kadrPooyanamaeeMS
{
    width: 100%;
    height: 80%;
    position: relative;
    /*background-color: #bbb;*/
}

.kadrMatnMS
{
    width: 100%;
    height: 20%;
    position: relative;
}

.pooyanamaeeMS
{
    width: calc(47.25% - 8px);
    height: calc(90% - 8px);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    border: 4px solid hsl(180, 1%, 68%);
    border-radius:50% ;
}

.kadrMatnMS > div
{
    height: 30px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    margin: auto;
}

span.matnMS
{
    font-size: 1.406rem;       /*22 PX*/
    line-height: 1;
    color: hsl(0,0%,29%);
}

.pooyanamaeeMS>div
{
    width: 72.72%;
    height: 63.63%;
    /*background-color: #aaa;*/
    margin: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    overflow: hidden;
}

/*   قسمت انتخاب */
#kadrKolEntekhabFarsh
{
    width: 100%;
    padding-top: 262.5%;
    position: absolute;
    top: 0px;
    right: 0px;
}

#sefareshFarsh:hover>div>#kadrKolEntekhabFarsh
{
    animation: harkatFarsh 1s;
    animation-fill-mode: forwards;
}

.entekhabFarsh
{
    width: 100%;
    height: 33.33%;
    position: absolute;
    right: 0px;
    direction: rtl;
    text-align: right;
    line-height: 70px;
}

#entekhabFarsh1
{
    top: 0px;
}

#entekhabFarsh2
{
    top: 33.33%;
}

#entekhabFarsh3
{
    top: 66.666%;
}

img.tick
{
    width: calc(25% - 16px);        /* بردر + ؟ */
    min-width: 15px;
    border: 3px solid black;
    border-radius:50% ;
    position: absolute;
    top: 50%;
    right: 6.25%;
    transform: translate(0px,-50%);

}

img.axEntekhabFarsh
{
    margin: 0px 5px;
    position: absolute;
    top:0px;
    left: 0px;
}

/*تکمیل اطلاعات*/
#gapGadval
{
    width: 100%;
    padding-top:87.5%;
    position: relative;
}

.kadrBack
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    padding: 2px;
}

#gapGadval>div
{
    width: 100%;
    height: 71.287%;   /*72 px*/
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    /*background-color: #a5a5a5;*/
}

.titrNamayeshi
{
    width: calc(40% - 14px);           /* بردر + پدینگ + مارجین*/
    height:calc(26.388% - 6px);       /*بردر + مارجین*/
    margin:2px 4px 2px 0px;
    margin-right: 0px;
    padding-left: 2px;
    float: right;
    border: 3px solid transparent;
    overflow: hidden;
    text-align: left;
    position: relative;
}

.voroodiNamayeshi
{
    width: calc(60% - 14px);            /* بردر + پدینگ + مارجین*/
    height:calc(26.388% - 6px);       /*بردر + مارجین*/
    margin:2px;
    padding-right:4px;
    padding-left: 2px;
    float: right;
    border: 3px solid black;
    overflow: hidden;
    text-align: right;
    border-radius: 2px;
    position: relative;
}

#titrNamayeshiFamil::after
{
    content: "نام خانوادگی:";
    /*font-size: 0.6rem;*/
}

.titrNamayeshi>span,.voroodiNamayeshi>span
{
    display: block;
    width: 100%;
    height: 9px;
    line-height: 1;
    color: #1a1a1a;
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position:absolute;
    top: 0px;
    bottom: 0px;
    margin: auto;
}

.voroodiNamayeshi>span
{
    width: calc(100% - 6px);    /* پدینگ کادر بالا*/
}

/*گرفتن سومین کادر ورودی نمایشی */

.voroodiNamayeshi:last-child
{
    border: 3px solid hsl(351, 86%, 70%);
}

.mahv
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    overflow: hidden;
    background-color: #D9DBDE;
}

#daryaftEtelat:hover #mahv1
{
    animation: namayeshMatn 0.33s;
    animation-fill-mode: forwards;
}

#daryaftEtelat:hover #mahv2
{
    animation: namayeshMatn 0.33s 0.33s;
    animation-fill-mode: forwards;
}

#daryaftEtelat:hover #mahv3
{
    animation: namayeshMatn 0.33s 0.66s;
    animation-fill-mode: forwards;
}

/* پرداخت بیعانه */
#kadrCard
{
    width: 21.817%;
    padding-top: 40.909%;
    height: 0px;
    border-bottom:3px solid hsl(351, 86%, 70%) ;
    position: absolute;
    overflow-y: hidden;
    top: 5px;
    right: 0px;
    left: 0px;
    margin: 0px auto;
}

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

#card
{
    width: 80%;
    padding-top: 80%;
    position: absolute;
    top:30.4444%;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    transform: rotate(45deg);
    background-image: url("../pic/ax-card.png");
    background-size: contain;
}

#pardakht:hover #card
{
    animation: avardanCard 0.6s;
    animation-fill-mode: forwards;
}


#pardakht>#manitor
{
    background-image: url("../pic/ax-pardakht.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* تحویل در محل*/
#kadrFarshMS
{
    width:87.5%;
    padding-top: 75%;
    margin: 6.25% auto;
    overflow: hidden;
}

#poshtFarshMS
{
    width: 12.5%;
    padding-top: 70.229%;     /*92 px*/
    position: absolute;
    top: 0px;
    margin: 8.5% 0px;
    right: 42.857%;
    background-image:linear-gradient(to right,hsla(0,0%,0%,0.5) 0%,transparent  10%,transparent  90%,hsla(0,0%,0%,0.5) 100%),url("../pic/ax-farsh-back.png");
    /*filter: contrast(60%);*/
    background-size:auto 79%, auto 100%;
    background-repeat: no-repeat,no-repeat;
    background-position:center, 85% center;
    transform: rotate(210deg);
    background-origin: padding-box;
}

#tahvil:hover #poshtFarshMS
{
    animation: poshtFarshMS 1s;
    animation-fill-mode: forwards;
}

#tahvil:hover #farshMS
{
    animation: pahnFarshMS 1s;
    animation-fill-mode: forwards;
}

#farshMS
{
    width: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    background-image:url("../pic/ax-farsh.png");
    background-size:auto 100%;
    background-repeat: no-repeat;
    background-position: right center;
    background-origin: content-box;
}



/*تصحیح تایم لاین در سایزهای زیر 1600px */
@media only screen and (max-width: 1600px)
{
    #titrNamayeshiFamil::after
    {
        content: "فامیل :";
        /*font-size: 0.6rem;*/
    }
}

                     /*تصحیح خراب شدن  تایم لاین  در سایزهای زیر 1130px */
@media only screen and (max-width: 1130px)
{
    img.tick
    {
        min-width: 13px;
        border: 2px solid black;
        right: 0%;
    }

    .titrNamayeshi>span,.voroodiNamayeshi>span
    {
        font-size: 0.4rem;
        height: 6px;

    }

    .titrNamayeshi,.voroodiNamayeshi
    {
        padding: 2px;
    }

    .voroodiNamayeshi
    {
        border: 2px solid black;
    }

    .titrNamayeshi
    {
        border: 1px solid transparent;
    }

    .voroodiNamayeshi:last-child
    {
        border: 2px solid hsl(351, 86%, 70%);
    }

    #titrNamayeshiFamil::after
    {
        content: "فامیل :";
        /*font-size: 0.6rem;*/
    }
}


                   /* موبایل */
@media only screen and (max-width: 767px)
{
    /*   مراحل ثبت سفارش سایت   */
    #khatZaman
    {
        /*height: 100px;*/
        position: absolute;
        right: 0px;
        z-index: 6;
    }

    #kadrRatioMS
    {
        width: 100%;
        padding-top: 65.625%;
    }

    .mohtavaMs
    {
        width: 50%;
        height: 50%;
        float: right;
        position: relative;
    }

    #felesh2
    {
        display: none;
    }

    .voroodiNamayeshi
    {
        padding: 2px;
        padding-right:2px;
        border-width: 2px;
    }

    .titrNamayeshi
    {
        border-width: 2px;
    }

    .titrNamayeshi>span
    {
        font-size: 0.6rem;
        height: 9px;
        left: 2px;
    }

    .voroodiNamayeshi>span
    {
        font-size: 0.6rem;
        height: 9px;
        right: 2px;
    }

    .voroodiNamayeshi:last-child
     {
         border: 2px solid hsl(351, 86%, 70%);
     }


    #titrNamayeshiFamil::after
    {
        content: "فامیل";
        /*font-size: 0.6rem;*/
    }

}

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

    img.tick
    {
        min-width: 8px;
        border: 1px solid black;
        right: 0%;
    }

    .titrNamayeshi, .voroodiNamayeshi
    {
        margin: 1px 1px;
        border-width: 2px;
    }

    .titrNamayeshi>span
    {
        font-size: 0.4rem;
        height: 6px;
        left: 1px;
    }

    .voroodiNamayeshi>span
    {
        font-size: 0.4rem;
        height: 6px;
        right: 1px;
    }
}

     /*تصحیح برای موبایل های کوچک */
    @media only screen and (max-width: 280px)
    {

        img.tick
        {
            min-width: 5px;
            border: 1px solid black;
            right: 0%;
        }

        .titrNamayeshi, .voroodiNamayeshi
        {
            /*margin: 1px 2px;*/
            border-width: 1px;
        }

        .voroodiNamayeshi:last-child
        {
            border: 1px solid hsl(351, 86%, 70%);
        }

    }