@import url(fontiran.css);

html, body {
    font-family: IRANSans;
    font-size: 1.2rem;
    height: 100vh;
}

.wrapper-darknes {
    background-color: rgba(33, 33, 33, .8);
    overflow: hidden;
}

body {
    background-image: url(../img/bg-intro-new-rtl.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: left center;
}

/*.wrapper-names {*/
/*    position: relative;*/
/*    box-sizing: border-box;*/
/*}*/

/*.wrapper-names span {*/
/*    display: inline-block;*/
/*    text-align: center;*/
/*    position: absolute;*/
/*    top: 15%;*/
/*    left: 15%;*/
/*    font-size: .8em;*/
/*    direction: rtl;*/
/*    -webkit-transition: all 1.5s ease-in-out 0s;*/
/*    -moz-transition: all 1.5s ease-in-out 0s;*/
/*    -ms-transition: all 1.5s ease-in-out 0s;*/
/*    -o-transition: all 1.5s ease-in-out 0s;*/
/*    transition: all 1.5s ease-in-out 0s;*/
/*    color: #ffffff;*/
/*    text-shadow: #ffffff 2px 2px #000;*/
/*}*/

/*.wrapper-names span.text {*/
/*    background-color: rgba(103, 103, 103, 0.2);*/
/*    border: 1px solid rgb(125, 127, 128);*/
/*    width: 110px;*/
/*    height: 110px;*/
/*    border-radius: 100%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.wrapper-names span.text2 {*/
/*    left: 70%;*/
/*}*/

/*.wrapper-names span.text3 {*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    -webkit-transform: translate(-45%, -20%);*/
/*    -moz-transform: translate(-45%, -20%);*/
/*    -ms-transform: translate(-45%, -20%);*/
/*    -o-transform: translate(-45%, -20%);*/
/*    transform: translate(-45%, -20%);*/
/*}*/

/*.wrapper-names span.text4 {*/
/*    top: 70%;*/
/*}*/

/*.wrapper-names span.text5 {*/
/*    top: 70%;*/
/*    left: 70%;*/
/*}*/

/*.wrapper-names span.oi {*/
/*    color: #fff;*/
/*    font-size: 8rem;*/
/*    font-weight: lighter;*/
/*    top: 10%;*/
/*    left: 7%;*/
/*    -webkit-transition: all .5s ease-in-out 0s;*/
/*    -moz-transition: all .5s ease-in-out 0s;*/
/*    -ms-transition: all .5s ease-in-out 0s;*/
/*    -o-transition: all .5s ease-in-out 0s;*/
/*    transition: all .5s ease-in-out 0s;*/
/*    -moz-transform: scaleX(-1);*/
/*    -o-transform: scaleX(-1);*/
/*    -webkit-transform: scaleX(-1);*/
/*    transform: scaleX(-1);*/
/*    filter: FlipH;*/
/*    -ms-filter: "FlipH";*/
/*    z-index: 999999;*/
/*}*/

/*@-moz-document url-prefix() {*/
/*    .wrapper-names span.oi {*/
/*        margin-top: -5px;*/
/*    }*/
/*}*/

/*.wrapper-names span.oi:empty:before {*/
/*    background: -webkit-linear-gradient(#2c8ac8, #51ae69);*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*}*/


.wrapper-names img {
    width: 60%;
}
.wrapper-text {
    direction: rtl;
    font-size: .9em;
}

.wrapper-logo {
    display: none;
}
.wrapper-text .text-center {
    background-color: #0000008c;
    padding: 8px 18px;
    color: #ffffff;
    direction: rtl;
    font-size: 1rem;
    margin-bottom: 0;
    margin-top: 1rem;
}

.wrapper-chart1,
.wrapper-chart2,
.wrapper-chart3 {
    width: 90%;
}

.wrapper-charts {
    margin-top: 60px;
}

.wrapper-logo {
    position: relative;

}

/*.wrapper-logo img {*/
/*    width: 450px;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 50%;*/
/*    z-index: 2;*/
/*    transform: translate(-50%, 10%);*/
/*}*/

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.wrapper-btns .btn.btn-primary {
    box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
    background-color: #4274D7;
    -webkit-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    -ms-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
    border: none !important;
    outline: none !important;
    margin-bottom: 0;
    position: relative;
    bottom: 0;
    font-size: 1.1rem;
}

.wrapper-btns .btn.btn-primary:active,
.wrapper-btns .btn.btn-primary:focus {
    box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
    bottom: -8px;
    background-color: #4274D7;
    border: none !important;
    outline: none !important;
}

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

    .wrapper-names span.text {
        width: 100px;
        height: 100px;
    }

    .wrapper-names span.oi {
        font-size: 7.5rem;
    }

    .wrapper-names span.text3 {
        left: 53%;
    }

}

@media only screen and (min-width: 991px) {
    .wrapper-btns.mobile {
        display: none;
    }
}

@media only screen and (max-width: 990px) {
    .wrapper-names {
        display: none;
    }
    .wrapper-darknes {
        overflow-y: auto;
    }

    .wrapper-logo {
        display: block;
        text-align: center;
        padding-top: 50px;
    }

    .wrapper-logo img {
        width: 60%;
    }

    .wrapper-charts {
        margin-top: 0;
    }

    .wrapper-btns.screen {
        display: none;
    }

    .wrapper-names {
        height: 360px !important;
    }

    .wrapper-names span.text3 {
        left: 50%;
    }

    .wrapper-text {
        padding: 80px 20px;
        height: auto !important;
    }

    @-moz-document url-prefix() {
        .wrapper-names span.oi {
            margin-top: -11px;
        }
    }
}

@media only screen and (max-width: 480px) {
    .wrapper-logo img {
        width: 100% !important;
    }
}

@media only screen and (max-width: 425px) {
    .wrapper-names span.text4,
    .wrapper-names span.text1 {
        left: 8%;
    }

    .wrapper-names span.text2,
    .wrapper-names span.text5 {
        left: 66%;
    }

    .wrapper-btns .btn.btn-primary {
        width: auto;
        font-size: 16px;
        white-space: nowrap;
        padding-right: 1.2em !important;
        padding-left: 1.2em !important;
    }
}

@media only screen and (max-width: 320px) {
    .wrapper-names span.text4,
    .wrapper-names span.text1 {
        left: 5%;
    }

    .wrapper-names span.text2,
    .wrapper-names span.text5 {
        left: 64%;
    }

    .wrapper-btns .btn.btn-primary {
        width: auto;
        white-space: nowrap;
        padding: 15px 20px !important;
    }

    .wrapper-text p {
        font-size: .8em;
    }
}