@charset "utf-8";

html, body, div, input, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, option, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    transition: all 0.4s ease-in-out;
    box-sizing: border-box;
}

body {
    direction: rtl;
    font-family: IRANYekan;
    font-size: 12pt;
    background: #f6f8f9;
    transition: all 0.4s ease-in-out;
    font-weight: bold;
    color: #333533;
    cursor: context-menu;
}

/************************************************************/
/************************************************************/

.toggle_bar {
    display: inline-block;
    padding: 5px 5px;
    width: 35px;
    cursor: pointer;
}

.toggle_bar .bar {
    position: relative;
    display: block;
    top: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    margin-bottom: 6px;
    opacity: 1.0;
    transition: all 0.4s ease-in-out;
}

.toggle_bar .bar:last-child {
    margin-bottom: 0;
}

.toggle_bar .cross_down {
    top: 10px;
    transform: rotateZ(-45deg);
}

.toggle_bar .cross_up {
    top: -6px;
    transform: rotateZ(45deg);
}

.input_left {
    direction: ltr;
    text-align: left;
}

/************************************************************/
/************************************************************/
.w1366 {
    width: 100%;
    margin: auto;
}

.container {
    width: calc(100% - 24px);
    max-width: 1260px;
    margin: auto;
}

.b_white {
    background: #fff !important;
}

.clear {
    clear: both;
}

a {
    text-decoration: none;
    color: #e67e22;
    cursor: pointer;
}

a:hover {
    color: #e67e22;
}

.limit-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.off {
    display: none;
    width: 0;
    height: 0;
    position: absolute;
    z-index: -10000;
}

input[type=text],
input[type=password],
textarea {
    border-radius: 5px;
    background-color: #f6f8f9;
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
    padding: 10px 20px;
    font-family: IRANYekan;
    font-size: 11pt;
    box-sizing: border-box;
}

hr {
    background-image: linear-gradient(to left, transparent, #e67e22, transparent);
    border: 0;
    height: 1px;
    margin: 10px 0 15px 0;
    box-sizing: content-box;
}

.pointer {
    cursor: pointer;
}

i {
    vertical-align: middle;
}

.alink {
    position: relative;
}

.alink:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #e67e22;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}

.alink:hover:before {
    visibility: visible;
    opacity: 0.2;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.btn-orange {
    text-align: center;
    display: inline-block;
    color: #ecf0f1;
    box-sizing: border-box;
    padding: 5px 25px;
    border-radius: 35px;
    background: #e67e22;
    cursor: pointer;
    font-size: 14pt;
}

.btn-orange:hover {
    color: #ecf0f1;
    background: #ea9345;
}

.btn-transparent {
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 15px;
    border-radius: 35px;
    cursor: pointer;
    font-size: 14pt;
}

.btn-transparent i {
    font-size: 28px;
    float: left;
}

.btn-transparent-left i {
    font-size: 28px;
    float: right;
}

.btn-transparent span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 25px;
}

.btn-transparent-left span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 25px 0 10px;
}

.btn-transparent img {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.btn-android {
    color: #a4c639;
    background: #a4c63936;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #a4c63900;
}

.btn-android:hover {
    box-shadow: inset 0 0 0 1px #a4c639;
    color: #a4c639;
    background: #a4c63900;
}

.btn-web {
    color: #a1caf1;
    background: #a1caf136;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #a1caf100;
}

.btn-web:hover {
    box-shadow: inset 0 0 0 1px #a1caf1;
    color: #a1caf1;
    background: #a1caf100;
}

.btn-windows {
    color: #e67e22;
    background: #e67e2236;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #e67e2200;
}

.btn-windows:hover {
    box-shadow: inset 0 0 0 1px #e67e22;
    color: #e67e22;
    background: #e67e2200;
}

.btn-green {
    color: #84a514;
    background: #84a51436;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #84a51400;
}

.btn-green:hover {
    box-shadow: inset 0 0 0 1px #84a514;
    color: #84a514;
    background: #84a51400;
}

/************************************************************/
/************************************************************/
/************************************************************/
.top_site {
    background: linear-gradient(#5d7803, #84a514);
    margin-bottom: 30px;
}

.header {
    padding: 35px 0;
}

.header_right {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.header_right img {
    width: 80px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 20px;
}

.header_right .site_name {
    font-size: 28pt;
    display: inline-block;
    vertical-align: middle;
    color: #ecf0f1;
    font-weight: bolder;
}

.header_action {
    float: left;
    margin: 25px 0;
}

.header_action .login {
    display: inline-block;
    vertical-align: middle;
    color: #ecf0f1;
    font-size: 14pt;
    padding: 5px 21px;
    border: 1px solid #ecf0f1;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 5px;
}

.header_action .login:hover {
    background: #ecf0f1;
    color: #5d7803;
}

.top_menu {
    display: inline-block;
    vertical-align: middle;
    margin-top: 20px;
}

.top_menu a {
    margin-left: 25px;
    font-size: 14pt;
    color: #ecf0f1;
}

.top_menu a:hover {
    color: #ecf0f199;
}

.site_title {
    display: block;
    text-align: center;
    margin: 50px auto;
}

.site_title .title {
    display: block;
    color: #e2eeba;
    font-size: 18pt;
    margin-bottom: 35px;
}

.site_title_archive {
    display: block;
}

.site_title_archive .title_archive {
    display: inline-block;
    text-align: right;
    color: #e2eeba;
    font-size: 18pt;
    margin-right: 5px;
}

.site_title .btn-orange {
    padding: 10px 50px !important;
}

.slider {
    background-image: url("../img/cloud.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: auto;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.slider290 {
    height: 290px;
}

.slider .container .slider_box {
    width: calc(100% - 93px);
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    position: relative;
    top: 35px;
    right: 0;
    left: 0;
    height: 400px;

}

.slider .container .slider_box .coffee,
.slider .container .slider_box .phone,
.slider .container .slider_box .laptop {
    display: inline-block;
    margin: 0 30px;
    vertical-align: top;

}

.slider .container .slider_box .laptop {
}

.slider .container .slider_box .laptop .slider_img {
    position: relative;
    top: -345px;
    margin: auto;
    border-radius: 5px;
    display: block;
    width: 410px;
    height: 265px;
}

.slider .container .slider_box .laptop .slider_img img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.35);
    object-fit: cover;
}

.slider .container .slider_box .coffee {
    position: relative;
    top: 0;
    right: 80px;
}

.slider .container .slider_box .phone {
    position: relative;
    top: -20px;
    left: 15px;
}

.slider .container .slider_box .phone .slider_logo_img {
    position: relative;
    top: -160px;
    margin: auto;
    border-radius: 5px;
    width: 70px;
}

.slider .container .slider_box .phone .slider_logo_img img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    object-fit: contain;
    transform: rotateZ(22deg);
}

.slider_next,
.slider_prev {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 28px;
}


.slider .container .chev_position {
    position: relative;
    top: -105px;
    color: #ecf0f1;
    font-size: 42px;
}

.slider .container .chev_position:hover {
    color: #ecf0f199;
}

/************************************************************/
/************************************************************/
/************************************************************/
.article {
    width: 100%;
    display: block;
    padding: 15px 0;
    overflow: hidden;
    background: #ecf0f1;
}

.article_box {
    padding: 20px 0;
    margin: 15px auto 0 auto;
    display: block
}

.article_archive {
    width: 100%;
    display: block;
    padding: 15px 50px !important;
    overflow: hidden;
}

.article .container .header {
    text-align: center;
}

.article .container .header i {
    color: #e67e22;
    font-size: 14pt;
}

.article .container .header .h1 {
    display: block;
    font-size: 22pt;
    margin: 10px 0;
}

.article .container .header .text {
    display: block;
    text-align: center;
    font-weight: normal;
    color: #6d726d;
}

.article .container .header_archive {
    text-align: right;
    padding: 0 15px;
}

.article .container .header_archive i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    font-size: 20px;
}

.article .container .header_archive .h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    margin: 10px 0;
}

.article .container .header_archive .h11 {
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    margin: 10px 0;
    font-weight: 800;
}

.header_vaz_archive {
    display: inline-block;
    padding: 0 15px;
}

.header_vaz_archive .btn_vaz {
    display: inline-block;
    vertical-align: middle;
    margin-left: 60px;
    font-size: 22px;
    cursor: pointer;
    color: #333533;
}

.fa-windows {
    font-weight: 200;
}

.header_vaz_archive .vaz_menu:hover {
    color: #e67e22;
}

.header_vaz_archive .vaz_menu_active {
    font-size: 26px !important;
    color: #e67e22;
    font-weight: 800;
    cursor: context-menu;
}

.header_vaz_archive .vaz_menu_active i {
    font-size: 26px !important;
    color: #e67e22;
}

.text_header_archive {
    display: block;
    text-align: right;
    margin: 20px 0 30px 0;
    padding: 0 15px;
}

.archive_text {
    display: inline-block !important;
    vertical-align: bottom !important;
    margin-left: 40px;
    font-weight: 400;
    color: #6d726d;
    font-size: 14px;
}

.archive_text i {
    display: inline-block !important;
    vertical-align: bottom !important;
    color: #6d726d;
}

.box {
    display: block;
    padding: 5px 0;
    text-align: center;
}

.box_project_team {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.box_project_team .item_title_view .item_title {
    margin-top: 65px !important;
}

.box_project_team .item_title_view .item_title .title {
    font-size: 10pt;
}

.box_project_team .blog_item {
    width: 220px;
    height: 150px;
    margin: 10px 15px;
}


.wright {
    width: calc(64% - 5px);
    display: inline-block;
    vertical-align: top;
}

.wright .box_img {
    width: 800px;
    height: 400px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 35px;
}

.wright .box_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hiddenSliderImg {
    width: 0;
    height: 0;
    display: none;
}

.wright .box_slider {
    width: 100%;
    height: 500px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 35px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.wright .box_slider .chev_position {
    position: relative;
    top: -280px;
}

.wright .box_slider .slider_next,
.wright .box_slider .slider_prev {
    color: #9f9f9f;
    font-size: 32px;
    padding: 5px 25px;
}

.wright .box_slider .slider_next:hover,
.wright .box_slider .slider_prev:hover {
    color: #ea9345;
}

.wright .box_slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wright .box1 .h1 {
    display: block;
    font-size: 26px;
    margin-bottom: 35px;
}

.wright .box1 .h2 {
    display: block;
    font-size: 20px;
    margin-top: 15px;
    font-weight: 600;
    margin-bottom: 35px;
    color: #282828;
}

.wright .box1 .h4 {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #6d726d;
    margin: 15px 0;
    text-align: justify;
}

.box1 {
    display: block;
    padding: 20px 30px 1px 30px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 35px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.box1 .img_team {
    display: inline-block;
    vertical-align: middle;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin: 10px 0 35px 0;
    overflow: hidden;
}

.box1 .img_team img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.box1 .team_bio {
    width: calc(100% - 300px);
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;
}

.box1 .team_bio span {
    display: block;
    margin: 25px 0;
    font-size: 18px;
    font-weight: 400;
    color: #6d726d;
    text-align: justify;
}

.box1 .team_social {
    width: 100%;
    display: block;
    text-align: center;
    border-top: 1px solid #6d726d;
}

.box1 .team_social i {
    padding: 20px;
    font-size: 24px;
    color: #6d726d;
    cursor: pointer;
}

.box1 .team_social i:hover {
    color: #e67e22;
}

.box1 .text {
    text-align: justify;
    font-weight: 400;
    line-height: 1.8;
    display: block;
    font-size: 18px;
    padding-bottom: 10px;
    color: #6d726d;
}

.box1 .comment_box {
    display: block;
    width: 100%;
    padding: 15px 20px 10px 20px;
}

.box1 .comment_name {
    font-weight: 800;
    font-size: 18px;
}

.box1 .comment_date {
    float: left;
    font-weight: 600;
    font-size: 12px;
    color: #6d726d;
    margin-top: 7px;
}

.comment_text {
    display: block;
    font-weight: 400;
    color: #6d726d;
    font-size: 14px;
    text-align: justify;
    line-height: 1.6;
    margin: 10px 0;
}

.box1 .table {
    display: block;
}

.box1 .table .table_item {
    width: 100%;
    display: block;
    padding: 15px 25px;
}

.box1 .table .table_item .table_img {
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    border-radius: 35px;
    margin-left: 20px;
    overflow: hidden;
}

.box1 .table .table_item .table_text {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 75px);
}

.box1 .table .table_item img {
    width: 45px;
    height: 45px;
}

.box1 .table .table_item .btn-orange {
    float: left;
    padding: 2px 16px;
}

.table_back_gray {
    background: #f6f8f9;
}

.box1 .table .table_item .th {
    display: inline-block;
    vertical-align: middle;
    font-weight: 800;
    font-size: 18px;
    color: #6d726d;
}

.box1 .table .table_item .td {
    display: inline-block;
    vertical-align: middle;
    color: #6d726d;
    font-weight: 400;
    font-size: 18px;

}

.order_project_main {
    padding-bottom: 20px;
    display: none;
}

.order_project_main .post_list .btn-orange {
    float: left;
}

.line_70 {
    width: 80%;
    display: block;
    margin: auto;
    background: #6d726d;
    padding: 1px;
}

.form_box {
    text-align: right;

}

.form_box .label {
    display: block;
    color: #6d726d;
}

.form_box .form_head {
    display: block;
    font-size: 26px;
    margin-bottom: 30px;
}

.form_box .btn-orange {
    width: 200px;
    margin: 15px 0;
}

.comment_input {
    display: block;
    margin: 20px 0;
}

.comment_text_box {
    display: block;
    margin: 20px 0;
    border: none;
    min-height: 174px;
}

.wleft {
    width: calc(32% - 13px);
    display: inline-block;
    vertical-align: top;
    float: left;
}

.wleft .box1 .h1 {
    display: block;
    font-size: 26px;
    margin-bottom: 35px;
    cursor: context-menu;
}


.wleft .post_list {
    display: block;
    margin-bottom: 20px;
}

.wleft .post_list .btn-orange {
    float: left;
    margin-top: 10px;
    padding: 5px 45px;
}

.wleft .post_list .h3 {
    display: block !important;
    font-size: 18px !important;
    margin-bottom: 10px !important;
}

.wleft .post_list .h4 {
    display: block !important;
    font-size: 18px !important;
    margin-bottom: 10px !important;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.wleft .post_list .date {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #6d726d;
}

.wleft .post_list .date i {
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
}

.wleft .post_list .category {
    display: inline-block;
    margin-right: 35px;
    font-size: 14px;
    font-weight: 600;
    color: #6d726d;
    cursor: pointer;
}

.wleft .post_list .category:hover, .wleft .post_list .category:hover i {
    color: #ea934599;
}

.wleft .post_list .category i {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
    color: #6d726d;
}

.wleft .post_list .h4:hover {
    color: #ea9345;
}

.box .box_item {
    display: inline-block;
    width: 200px;
    height: 180px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    text-align: center;
    margin: 40px 80px;
    cursor: pointer;
    color: #333533;
}

.box .box_item:hover {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);

}

.box .box_item .item_img {
    width: 75px;
    height: 75px;
    border-radius: 45px;
    margin: 20px auto;
    box-sizing: border-box;
}

.box .box_item .item_img_android {
    background: #a4c63914;
}

.box .box_item .item_img_windows {
    background: #e67e2214;
}

.box .box_item .item_img_web {
    background: #a1caf114;
}

.box .box_item .item_img img {
    width: 60%;
    margin: 15px auto;
    display: inline-block;
}

.box .box_item .item_text {
    font-size: 15pt;
}

.article .container .slider_box {
    display: block;
    margin: 40px 0;
}

.article .container .slider_box .slider_menu {
    background-image: url("../img/side-sample.png");
    background-repeat: no-repeat;
    width: 400px;
    height: 490px;
    display: inline-block;
    vertical-align: top;

}

.article .container .slider_box .slider_menu .menu_box {
    display: block;
    margin-top: 100px;
    margin-right: 60px;
    margin-bottom: 65px;
}

.article .container .slider_box .slider_menu .menu_box img {
    width: 100px;
}

.article .container .slider_box .slider_menu .menu_box .title {
    display: block;
    font-weight: bolder;
    font-size: 22pt;
    margin-top: 10px;
}

.article .container .slider_box .slider_menu .btn_left {
    padding: 13px 25px;
    border-radius: 45px;
    float: left;
    position: relative;
    left: -20px;
    margin: 5px 0;
}

.article .container .slider_box .slider_menu .btn_right {
    padding: 13px 25px;
    border-radius: 45px;
    position: relative;
    float: right;
    right: 35px;
    margin: 5px 0;
}

.article .container .slider_box .slider_menu .btn_right img,
.article .container .slider_box .slider_menu .btn_left img {
    width: 28px;
    display: inline-block;
    vertical-align: middle;
}

.article .container .slider_box .slider_menu .btn_right span,
.article .container .slider_box .slider_menu .btn_left span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16pt;
    margin: 0 5px;
    text-align: center;
}

.article .container .slider_box .slider_menu .btn_right i,
.article .container .slider_box .slider_menu .btn_left i {
    display: inline-block;
    vertical-align: middle;
    font-size: 22pt;
    text-align: left;
}

.article .container .slider_box .sliderM {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 435px);
    padding: 10px 0;
    float: left;
    overflow: hidden;
    margin-top: 40px;
}

.article .container .slider_box .sliderE {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 435px);
    padding: 10px 0;
    overflow: hidden;
    margin-top: 40px;
}

.article .container .slider_box .sliderM .btn-green,
.article .container .slider_box .sliderE .btn-green {
    display: block;
    float: left;
    margin-left: 40px;
    margin-top: 83px;
    padding: 13px 30px;
    border-radius: 45px;
    box-sizing: border-box;
    font-size: 14pt;
}

.article .container .slider_box .sliderM .btn-green span,
.article .container .slider_box .sliderE .btn-green span {
    display: inline-block;
    vertical-align: middle;
}

.article .container .slider_box .sliderM .btn-green i,
.article .container .slider_box .sliderE .btn-green i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 60px;
    font-size: 18pt;
}

.article_archive .blog_item {
    margin: 20px 30px;
}

.blog_item {
    display: inline-block;
    vertical-align: top;
    width: 320px;
    margin: 20px 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(102, 102, 102, 0.15);
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    height: 220px;
    text-align: right;
}

.item_title_view {
    display: block;
    opacity: 0.0;
    position: relative;
    top: -0px;
    background: #5d780399;
    height: 220px;
    cursor: pointer;
    transition: all 0.4s ease-in-out !important;
}

.blog_item:hover .item_title_view {
    top: -220px;
    opacity: 1.0;
}

.item_title_view .item_title {
    display: inline-block;
    margin-top: 120px;
}

.blog_item .item_title .btn {
    display: inline-block;
    margin: 10px 35px;
    background: #ecf0f1;
    color: #333533;
    text-align: center;
    border-radius: 25px;
    padding: 8px 20px;
    font-size: 9pt;
    box-sizing: border-box;
}

.blog_item .item_title .btn:hover {
    color: #333533;
    background: #ecf0f199;
}

.blog_item .title {
    display: block;
    color: #ecf0f1;
    font-size: 13pt;
    font-weight: 800;
    padding: 5px 25px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.blog_item .title:hover {
    color: #ecf0f1;
}

.blog_item .img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.blog_item .img img {
    width: 100%;
    height: 100%;
    object-position: top;
    object-fit: cover;
    transition: all 1s ease-in-out;
}

.blog_item:hover .img img {
    object-position: bottom;
    transition: all 6s ease-in-out;
}

.blog_item .date {
    display: inline-block;
    padding: 10px 5px;
    font-size: 9pt;
    vertical-align: middle;
    margin-right: 5px;
}

.blog_item i {
    margin-right: 25px;
    font-size: 12px;
}

.blog_item .tag {
    display: inline-block;
    margin-left: 25px;
    margin-top: 5px;
    margin-bottom: 20px;
    float: left;
}

.blog_item .tag img {
    width: 20px;
    height: 20px;
}

.holder_scroll {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 80px);
    overflow: hidden;
}

.holder_scroll_blog {
    width: calc(100% - 100px);
}

.holder_scroll .scroller {
    width: 5000px;
}

.holder_scroll_btn {
    display: inline-block;
    vertical-align: middle;
}

.holder_scroll_btn i {
    font-size: 22px;
    cursor: pointer;
}

.box_customers {
    width: calc(50% - 20px);
    display: inline-block;
    vertical-align: middle;
}

.customers_item {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    margin: 20px 5px;
    box-sizing: border-box;
    overflow: hidden;
    filter: grayscale(100%);
    cursor: pointer;
}

.customers_item:hover {
    filter: none;
}

.customers_item img {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.blog {
    display: inline-block;
    vertical-align: top;
    width: 320px;
    margin: 20px 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    background: #f6f8f9;
    padding: 10px 20px;
    overflow: hidden;
    height: 185px;
}

.article_archive .blog {
    margin: 35px 48px;
}

.blog:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.blog span {
    margin-bottom: 15px;

}

.blog .h1 {
    display: block;
    text-align: right;
    margin-bottom: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #333533;
    font-weight: 600;
    font-size: 14pt;

}

.blog .title {
    display: block;
    margin-bottom: 10px;
    height: 80px;
    font-weight: 400;
    line-height: 1.8;
    text-align: justify;
    color: #6d726d;
    font-size: 10pt;

}

.blog .date {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 15px;
    color: #6d726d;
    font-weight: 400;
    font-size: 10pt;
    text-align: right !important;

}

.blog .btn-orange {
    float: left;
    font-size: 12pt;
    font-weight: 400;
    margin-bottom: 15px;
    padding: 4px 24px !important;

}

.blog_more {
    display: block;
    float: left;
    margin-left: 40px;
    margin-top: 35px;
    margin-bottom: 35px;
    padding: 13px 30px;
    border-radius: 45px;
    box-sizing: border-box;
    font-size: 14pt;
}

.blog_more span {
    display: inline-block;
    vertical-align: middle;
}

.blog_more i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 60px;
    font-size: 18pt;
}

.w60 {
    width: calc(60% - 5px);
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
}

.w60 .emp_item {
    display: inline-block;
    vertical-align: top;
    width: 280px;
    margin: 20px 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    background: #f6f8f9;
    padding: 10px;
    height: 145px;
    cursor: pointer;
}

.w60 .emp_item:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}

.w60 .emp_item .img {
    display: block;
    margin: auto;
    position: relative;
    top: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.w60 .emp_item .img img {
    width: 100%;
    height: 100%;
}

.w60 .emp_item .h1 {
    display: block;
    text-align: right;
    position: relative;
    top: -40px;
    font-size: 18pt;
    font-weight: 800;
    margin-right: 20px;
    color: #333533;
}

.w60 .emp_item .h1:hover {
    color: #33353399;
}

.w60 .emp_item .title {
    display: block;
    text-align: right;
    position: relative;
    top: -35px;
    font-size: 12pt;
    font-weight: 800;
    margin-right: 20px;
    color: #6d726d;
}


.w40 {
    display: inline-block;
    vertical-align: middle;
    width: calc(40% - 20px);
    padding: 10px;
}

.w40 .emp_img {
    width: 100%;
}

.call_box {
    margin: 65px auto;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    padding: 0 50px;
}

.w40 form {
    display: block;
    vertical-align: top;
}

.w40 .label,
.w60 .txt {
    display: block;
    margin: 15px 0;
}

.w40 .input {
    display: block;
    margin: 20px 0;
}

.w60 .textarea {
    display: block;
    margin-bottom: 40px;
    border: none;
    height: 175px;
    padding: 10px;
    font-family: IRANYekan;
}

.w60 .btn-orange {
    float: left;
    width: 180px;
    margin-bottom: 10px;
}

.w60 .btn-orange span {
    display: inline-block;
    vertical-align: middle;
}

.w60 .btn-orange i {
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
    margin-right: 20px;
}

.footer_top_img {
    background-image: url("../img/cloud-light.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    width: 100%;
    display: block;
    padding: 0 0;
    height: 194px;
    text-align: center;
}

.footer_top_img i {
    transform: rotate(-45deg);
    font-size: 60px;
    color: #f6f8f9;
    margin-top: 110px;
    cursor: pointer;
}

.footer_top_img i:hover {
    color: #d3dde1;
}

.footer {
    padding-top: 50px;
    padding-bottom: 45px;
    background: #f6f8f9;
}

.footer_item {
    display: inline-block;
    vertical-align: top;
    width: calc(33% - 10px);
    padding: 10px 15px;
    margin-top: 63px;
    margin-bottom: 10px;
    margin-left: 5px;
}

.footer_item_logo {
    display: inline-block;
    width: calc(33% - 10px);
    padding: 10px 15px;
    margin-bottom: 10px;
    margin-left: 5px;
}

.footer_item_logo .h1,
.footer_item .h1 {
    display: block;
    font-size: 16pt;
    color: #333533;
    font-weight: 600;
    margin-bottom: 25px;
}

.footer_item_logo .h3,
.footer_item .h3 {
    font-weight: 400;
    display: block;
    margin-right: 15px;
    margin-bottom: 15px;
    font-size: 12pt;
    color: #6d726d;
    text-align: justify;
    line-height: 1.6;
}

.footer_item .h3:hover {
    color: #6d726d99;
}

.footer_item .h3 .title {
    display: inline-block;
    vertical-align: middle;
}

.footer_item .h3 i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.footer_logo {
    display: block;
}

.footer_logo img {
    width: 53px;
}

.social_icon {
    display: block;
    padding: 10px 25px;
}

.social_icon i {
    display: inline-block;
    margin-left: 25px;
    font-size: 14pt;
    color: #6d726d;
    cursor: pointer;
}

.social_icon i:hover {
    color: #6d726d99;
}

.copy_right {
    text-align: center;
    font-size: 10pt;
    font-weight: 400;
}

.copy_right .link {
    color: #84a514;
    font-weight: 800;
}

.copy_right .link:hover {
    color: #84a51499;
}

.side_menu_bars {
    margin: 10px 10px 0 10px;
    font-size: 18pt;
    display: none;
    cursor: pointer;
    padding: 4px 14px;
    background: #ecf0f1;
    color: #5d780399;
    border-radius: 5px;
    box-sizing: border-box;
}

.side_menu_bars:hover {
    color: #5d7803;
}

.side_menu {
    display: block;
    position: fixed;
    width: 300px;
    height: 100vh;
    overflow: auto;
    background: #ecf0f1;
    z-index: 998899;
    top: 0;
    right: -300px;
}

.side_menu .item {
    display: block;
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #e1e1e1;
}

.side_menu .item a,
.side_menu .item span {
    display: block;
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    cursor: pointer;
    color: #2b2b2d;
}

.side_menu .item a:hover,
.side_menu .item span:hover {
    background: #2b2b2d;
    color: #ecf0f1;
}

.login_icon {
    display: none;
    padding: 3px 9px;
    cursor: pointer;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 18pt;
    text-align: center;
    margin-top: 7px;
    margin-right: 10px;
    color: #ecf0f1;
    border: 1px solid #ecf0f1;
}

.login_icon:hover {
    background: #ecf0f1;
    color: #5d7803;
}


.page_number {
    display: block;
    text-align: center;
    padding: 15px 0;
}

.page_number a {
    width: 35px;
    height: 35px;
    padding: 6px 10px;
    box-sizing: border-box;
    vertical-align: middle;
    display: inline-block;
    border-radius: 5px;
    margin-left: 7px;
    cursor: pointer;
    background: #ffffff;
    box-shadow: 0 0 3px rgba(75, 110, 6, 0.15);
    color: #84a514;
}

.page_number a:hover {
    color: #ea9345;
    box-shadow: 0 0 5px rgba(75, 110, 6, 0.25);
}

.page_number .active {
    background: #84a514 !important;
    color: #ffffff !important;
    cursor: context-menu !important;
}

.sign_holder {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.sign_holder .logo_show {
    position: fixed;
    display: none;
    right: 0;
    left: 0;
    margin: auto;
    font-size: 17pt;
    font-weight: 800;
    width: 350px;
    top: calc(50vh - 50px);
    opacity: 0;
    z-index: 1;
    color: #fff;
}

.sign_holder .logo_show img {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    object-fit: contain;
}

.bottom_img_box {
    width: 100%;
    height: 100vh;
    display: block;
    overflow: hidden;
}

.bottom_img_box .logo {
    display: block;
    width: 100%;
    margin: auto;
    cursor: pointer;

}

.bottom_img_box .site_name {
    display: inline-block;
    vertical-align: middle;
    font-size: 22pt;
    font-weight: 800;
    color: #282828;
}

.bottom_img_box .logo img {
    display: inline-block;
    width: 100px;
    vertical-align: middle;
    height: 100px;
    object-fit: cover;
}

.bottom_img_box .sign_box {
    display: block;
    width: 100%;
    max-width: 1260px;
    margin: auto;
    padding-top: 50px;
    text-align: center;
    overflow: hidden;
}

.bottom_img_box .sign_box .head {
    display: block;
    color: #2c2e3e;
    font-weight: 800;
    font-size: 14pt;
    text-align: center;
    width: calc(60% - 10px);
    min-width: 380px;
    margin: 0 auto 30px auto;
}

.bottom_img_box .sign_box .head .w50 {
    display: inline-block;
    width: calc(50% - 5px);
    cursor: pointer;
}

.bottom_img_box .sign_box .head .w50:hover {
    color: #ea9345;
}

.bottom_img_box .sign_box .head .selected {
    color: #ea9345;
}

.bottom_img_box .sign_box .form {
    display: block;
    width: calc(60% - 10px);
    min-width: 380px;
    margin: 10px auto;
}

.bottom_img_box .sign_box .label {
    display: block;
    text-align: right;
    margin-bottom: 5px;
}

.bottom_img_box .sign_box .input {
    display: block;
    width: 100%;
    margin-bottom: 35px;
    padding: 16px 20px;
}

.cloud_animate {
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

@keyframes cloud_animation_up {
    from {
        width: 102%;
    }
    to {
        width: 100%;
    }
}

@keyframes cloud_animation_down {
    from {
        width: 100%;
    }
    to {
        width: 102%;
    }
}

.animation .img-up {
    display: block;
    overflow: hidden;
    position: relative;
    top: -250px;
    transition: all 0.8s ease-in-out;
    opacity: 0.8;
    animation-name: cloud_animation_up;
}

.animation .img-up img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 290px;
}

.animation .img-up .animation_bottom {
    width: 100%;
    display: block;
    height: 100vh;
    background: #a6bf5d;
}

.animation .img-down {
    display: block;
    position: relative;
    overflow: hidden;
    top: calc(-100vh - 540px);
    transition: all 0.8s ease-in-out;
    animation-name: cloud_animation_down;
}

.animation .img-down img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 290px;
}

.animation .img-down .animation_bottom_down {
    width: 100%;
    display: block;
    height: 100vh;
    background: #5d7803;
}

/******************************  PANEL  ******************************/
/******************************  PANEL  ******************************/
/******************************  PANEL  ******************************/
.side_panel {
    width: 270px;
    float: right;
    background: #2c2e3e;
    height: 100vh;
    overflow: auto;
}

.side_panel .toggle {
    display: none;
    padding: 15px 15px 0 15px;
}

.side_panel .logo {
    display: block;
    padding-right: 25px;
    padding-top: 20px;
    margin-bottom: 30px;
}

.side_panel .logo .img {
    width: 45px;
    height: 45px;
    display: inline-block;
    vertical-align: middle;
    background: #ecf0f1;
    border-radius: 40px;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.35);
}

.side_panel .logo .site_name {
    width: calc(100% - 56px);
    display: inline-block;
    vertical-align: middle;
    color: #ecf0f1;
    font-weight: 800;
    margin-right: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: fade;
}

.side_panel .panel_menu {
    display: block;
}

.side_panel .panel_menu .menu_btn {
    display: block;
    color: #ecf0f1;
    padding: 15px 25px;
}

.side_panel .panel_menu .menu_btn .title {
    display: inline-block;
    vertical-align: middle;
    font-size: 12pt;
    font-weight: 600;
    overflow: hidden;
    width: calc(100% - 40px);
    white-space: nowrap;
    text-overflow: fade;
}

.side_panel .panel_menu .menu_btn i {
    width: 35px;
    display: inline-block;
    vertical-align: middle;
    font-size: 14pt;
}

.side_panel .panel_menu .menu_btn:hover {
    background: #282a3c;
    color: #ea9345;
}

.side_panel .panel_menu .active {
    background: #282a3c;
    color: #ea9345;
}

.side_panel_hide {
    width: 70px !important;
}

.side_panel_hide .logo {
    padding-right: 10px !important;
}

.side_panel_hide .panel_menu .menu_btn {
    padding: 15px 20px !important;

}

.side_panel_hide .logo .site_name {
    width: 0 !important;
}

.side_panel_hide .panel_menu .menu_btn .title {
    width: 0 !important;
}

.panel_main {
    width: calc(100% - 270px);
    float: right;
}

.panel_main_open {
    width: calc(100% - 70px) !important;
}

.panel_main .panel_scroll {
    width: 100%;
    height: calc(100vh - 66px);
    overflow: auto;
}

.panel_main .panel_header {
    width: 100%;
    padding: 10px 25px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
    background: #fff;
}

.panel_main .panel_header .panel_menu_bars {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    margin: 0 20px 0 5px;
    padding: 10px;
    cursor: pointer;
    font-weight: 400;
}

.panel_main .panel_header .panel_title {
    display: inline-block;
    vertical-align: middle;
    font-size: 10pt;
    font-weight: 600;
    margin-top: 4px;
}

.panel_main .panel_header .user_title {
    float: left;
    margin-left: 15px;
    cursor: pointer;
}

.panel_main .panel_header .user_title .img {
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 45px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.panel_main .panel_header .user_title .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.panel_main .panel_header .user_title .img span {
    display: block;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    font-size: 11pt;
    font-weight: 800;
    color: #2c2e3e;
}

.panel_main .panel_body {
    display: block;
    padding: 35px 20px 0 20px;
    text-align: center;
    margin-bottom: 20px;
}

.panel_main .panel_body .body_box {
    display: inline-block;
    vertical-align: top;
    width: calc(25% - 15px);
    height: 200px;
    margin: 0 5px 10px 5px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
    background: #fff;
    padding: 15px 10px;
    text-align: right;
}

.panel_main .panel_body .body_box .title {
    display: inline-block;
    vertical-align: middle;
    font-size: 16pt;
    margin-top: 15px;
    margin-right: 15px;

}

.panel_main .panel_body .body_box .icon {
    float: left;
    text-align: center;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
    width: 55px;
    height: 55px;
    box-sizing: border-box;
    border-radius: 45px;
    margin-left: 5px;
    cursor: pointer;
}

.panel_main .panel_body .body_box .icon:hover i {
    color: #ea9345;
}

.panel_main .panel_body .body_box .icon i {
    display: block;
    margin-top: 10px;
    border-radius: 45px;
    font-size: 24pt;
    color: #00c689;
}

.panel_main .panel_body .body_box .title2 {
    display: block;
    font-size: 26pt;
    font-weight: 800;
    text-align: center;
}

.panel_main .panel_box1 {
    width: calc(100% - 50px);
    margin: 30px auto 30px auto;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    padding: 20px 0 0 0;
    background: #fff;
    display: block;
    border-radius: 5px;

}

.panel_main .panel_box1 .h1 {
    display: block;
    font-size: 24px;
    margin-bottom: 25px;
    margin-right: 30px;
    cursor: context-menu;
}

.panel_main .panel_box1 .table_header {
    display: block;
    padding: 11px 30px;
}

.panel_main .panel_box1 .table_header span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}

.panel_main .panel_box1 .table_row {
    display: block;
    padding: 11px 30px;
}

.panel_main .panel_box1 .table_row:hover {
    color: #ea9345;
}

.panel_main .panel_box1 .table_row:nth-child(2n + 1) {
    background: #eeeeee;
}

.panel_main .panel_box1 .table_row .t_title {
    display: none;
    font-size: 16px;
    width: 30% !important;
    margin-left: 15px;
    border: none;
    white-space: initial;
    text-overflow: initial;
    overflow: initial;
}

.panel_main .panel_box1 .table_row span {
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    font-size: 14px;
}

.table_vaz_g {
    color: #00c689;
}

.table_vaz_r {
    color: #f1536e;
}

.panel_main .panel_box1 .w50 {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 25px);
    padding: 10px;
    margin-right: 15px;
    overflow: hidden;
}

.chart {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
}

.chart .chart_line {
    width: 100%;
    height: 45px;
}

.chart .chart_line .b-b {
    width: calc(100% - 30px);
    height: 100%;
    display: inline-block;
    vertical-align: bottom;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #7f7f7f;
    text-align: center;
}

.chart .chart_line .chart_rate {
    width: 20px;
    display: inline-block;
    vertical-align: bottom;
    color: #6d726d;
    font-weight: 400;
}

.chart_title {
    width: calc(100% - 30px);
    display: block;
    text-align: center;
    border-top: 1px solid #7f7f7f;
    padding-top: 15px;
}

.chart_title .title {
    display: inline-block;
    vertical-align: middle;
    width: calc(33% - 40px);
    color: #6d726d;
    font-weight: 400;
}

.title_down_chart {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #6d726d;
    font-weight: 600;
}

.bar_holder {
    display: block;
    text-align: center;
    position: relative;
}


.bar_holder .chart_bar {
    display: inline-block;
    vertical-align: top;
    width: calc(33% - 40px);
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

.bar_holder .chart_bar .bar_green {
    display: inline-block;
    width: 10px;
    background: #84a514;
}

.bar_holder .chart_bar .bar_orange {
    display: inline-block;
    width: 10px;
    background: #ea9345;
}

.panel_box1 .message_side {
    width: 250px;
    padding: 20px 15px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    border-left: 1px solid #eee;
}

.panel_box1 .message_side .btn_blue {
    background: #405189;
    color: #ecf0f1;
    text-align: center;
    padding: 8px 0;
    border-radius: 3px;
    font-size: 9pt;
    width: calc(100% - 40px);
    margin: auto;
    display: block;
    cursor: pointer;
}

.panel_box1 .message_side .btn_blue:hover {
    background: #40518999;
}

.panel_box1 .message_side .btn_blue i {
    display: none;
}

.panel_box1 .message_side .btn_blue span {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: fade;
    overflow: hidden;
}

.panel_box1 .message_side .message_side_menu {
    display: block;
    margin: 30px 0;
}

.panel_box1 .message_side .message_side_menu .btn_message_side {
    display: block;
    width: 100%;
    border-radius: 3px;
    color: #2c2e3e;
    padding: 10px 15px;
    margin-bottom: 5px;
    height: 48px;
}

.panel_box1 .message_side .message_side_menu .btn_message_side:hover {
    background: #e6e9ed;
}

.panel_box1 .message_side .message_side_menu .active {
    background: #e6e9ed;
}

.panel_box1 .message_side .message_side_menu .btn_message_side .title {
    font-weight: 400;
    display: inline-block;
    vertical-align: middle;
    font-size: 10pt;
    white-space: nowrap;
    text-overflow: fade;
    overflow: hidden;
    width: calc(100% - 51px);
}

.panel_box1 .message_side .message_side_menu .btn_message_side i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    font-size: 14px;
}

.panel_box1 .message_side .message_side_menu .btn_message_side .not_num {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border-radius: 50%;
    color: #ecf0f1;
    background: #00c689;
    text-align: center;
    padding-top: 3px;
    font-weight: 400;
    font-size: 12pt;
    float: left;
}

.panel_box1 .message_side_hide {
    width: 80px !important;
    padding: 20px 5px !important;
}

.panel_box1 .message_side_hide .btn_blue {
    width: calc(100% - 20px) !important;
}

.panel_box1 .message_side_hide .btn_blue i {
    display: inline-block !important;
}

.panel_box1 .message_side_hide .btn_blue span {
    display: none !important;
}

.panel_box1 .message_side_hide .message_side_menu .btn_message_side {
    padding: 10px 7px !important;
}

.panel_box1 .message_side_hide .message_side_menu .btn_message_side .title {
    width: 0 !important;
}

.panel_box1 .message_main {
    display: block;
    padding: 20px 15px;
    box-sizing: border-box;
}

.panel_box1 .message_main .head {
    display: block;
    margin-right: 30px;
    margin-bottom: 10px;
}

.panel_box1 .message_main .form {
    display: block;
    padding: 10px 25px;
}

.panel_box1 .message_main .form .wright {
    width: calc(100% - 470px);
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
}

.panel_box1 .message_main .form .message_title {
    display: block;
    width: 100%;
    background: #fff;
    color: #6d726d;
}

.select {
    position: relative;
    width: 280px;
    display: inline-block;
    margin: 30px 0 0 20px;
    cursor: pointer;
}

.select .select_show {
    width: 100%;
    padding: 2px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #959595;
    background: #fff;
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
}

.select .select_show .select_input_cat {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: calc(100% - 40px);
    color: #333333;
    box-shadow: none !important;
    margin-right: 10px;
    border-radius: 5px;
    background: none;
    font-family: IRANYekan;
    font-size: 11pt;
    padding: 10px 0;
    color: #6d726d;
}

.select .select_show i {
    width: 15px;
    text-align: center;
    font-size: 18px;
    padding: 8px;
}

.select .select_hide {
    display: none;
    position: absolute;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 5px;
    box-shadow: 0 0 5px rgba(102, 102, 102, 0.15);
    background: #ffffff;
    color: #6d726d;
    z-index: 1;
}

.select .select_hide .select_hide_scroll {
    max-height: 300px;
    overflow: auto;
}

.select .select_hide span {
    display: block;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 400;
    font-size: 11pt;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.select .select_hide span:hover {
    background: #e6e9ed;
    color: #ea9345;
}

.panel_box1 .textarea {
    width: 100%;
    display: block;
    margin-top: 35px;
    border: none;
    min-height: 160px;
    background: none;
    color: #6d726d;
}

.panel_box1 .message_main .form .wleft {
    width: 440px;
    display: inline-block;
    vertical-align: top;
}

.panel_box1 .message_main .form .wleft .head {
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
    color: #6d726d;
}

.panel_box1 .message_main .form .wleft .priority {
    background: #fff5c2;
    padding: 5px 30px;
    display: inline-block;
    border-radius: 15px;
    vertical-align: middle;
    margin-left: 5px;
    font-size: 11pt;
    color: #8e8655;
    cursor: pointer;
    font-weight: 400;
    box-shadow: 0 0 3px rgba(100, 100, 100, 0.25);
}

.panel_box1 .message_main .form .wleft .priority:hover {
    background: #ffe161;
    box-shadow: 0 0 3px rgba(100, 100, 100, 0.45);
}

.panel_box1 .message_main .form .wleft .active {
    background: #ffe161;
    box-shadow: 0 0 3px rgba(100, 100, 100, 0.45);
    font-weight: 600;
}

.panel_box1 .message_holder {
    display: block;
    margin: 15px 0;
}

.panel_box1 .message_holder .head {
    margin-right: 0;
    display: inline-block;
    vertical-align: top;
    margin-top: 25px;
    white-space: nowrap;
}

.panel_box1 .message_holder .wright {
    width: calc(100% - 470px);
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
}

.panel_box1 .message_holder .wleft {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    padding-left: 0;
    direction: ltr;
    width: 440px;
}

.panel_box1 .message_holder .wleft .btn {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 35px;
    padding: 6px 2px;
    font-size: 24px;
    box-shadow: 0 0 3px rgba(100, 100, 100, 0.25);
    margin: 0 5px;
    cursor: pointer;
    text-align: center;
}

.panel_box1 .message_holder .wleft .send_message {
    background: #f5a623;
    color: #ecf0f1;
}

.panel_box1 .message_holder .wleft .send_message:hover {
    background: #ea9345;
}

.panel_box1 .message_holder .wleft .send_voice {
    background: #eee;
    color: #5f5f5f;
}

.panel_box1 .message_holder .wleft .send_voice:hover {
    background: #eeeeee99;
}

.panel_box1 .message_holder .wleft .send_file {
    background: #fff;
    color: #5f5f5f;
}

.panel_box1 .message_holder .wleft .send_file:hover {
    background: #ecf0f1;
    color: #5f5f5f;
}

.panel_box1 .message_holder .holder_file {
    margin: 0 15px;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 237px);
}

.panel_box1 .message_holder .w1366 {
    margin-top: 15px;
    padding: 10px 25px;
}

.panel_box1 .message_holder .w1366 .req_item {
    display: inline-block;
    vertical-align: top;
    width: calc(25% - 15px);
    margin: 0 5px;
    text-align: center;
}

.req_item i {
    text-align: center;
    width: 55px;
    height: 55px;
    border-radius: 35px;
    color: #ecf0f1;
    box-sizing: border-box;
    font-size: 20px;
    padding-top: 17px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

.req_item .req_title {
    display: block;
    font-size: 10pt;
    margin: 10px 0;
}

.req_item .req_date {
    font-size: 10pt;
    font-weight: 400;
    color: #6d726d;
}

.green {
    background: #00c689;
}

.red {
    background: #f1536e;
}

.blue {
    background: #007bff;
}

.orange {
    background: #ea9345;
}

.panel_box1 .message_holder .message_cost {
    margin-top: 15px;
    display: inline-block;
    vertical-align: middle;
    color: #00c689;
    font-size: 14pt;
}

.panel_box1 .message_holder .file {
    margin: 15px;
    min-width: 245px;
    display: inline-block;
    vertical-align: middle;
    padding: 22px 20px;
    box-sizing: border-box;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

.panel_box1 .message_holder .file:hover {
    background: #ea934529;
}

.panel_box1 .message_holder .file .file_icon {
    display: inline-block;
    vertical-align: middle;
    font-size: 40px;
    color: #00c689;
}

.message_holder .file .file_title {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.message_holder .file .file_title .title {
    display: block;
    font-size: 9pt;
    margin-bottom: 8px;
    width: 80px;
}

.message_holder .file .file_title .size {
    display: block;
    font-size: 9pt;
    font-weight: 400;
}

.message_holder .file .holder_file_btn {
    display: inline-block;
    vertical-align: bottom;
}

.message_holder .file .holder_file_btn i {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #007bff;
    padding: 3px 5px;
    cursor: pointer;
}

.message_holder .file .holder_file_btn i:hover {
    color: #ea9345;
}

.panel_box1 .message_side2 {
    width: 290px;
    padding: 5px 0;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    border-left: 1px solid #eee;
}

.panel_box1 .message_side2 .message_search {
    display: block;
    width: calc(100% - 15px);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.30);
    margin: 10px auto;
    border-radius: 3px;
    overflow: hidden;
}

.panel_box1 .message_side2 .message_search .search {
    width: 100%;
    background: none;
    box-shadow: none;
    border: none;
    font-size: 10pt;
    font-weight: 400;
    color: #cdd3e8;
}

.panel_box1 .message_side2 .message_search .search:focus {
    color: #6d726d;
}

.panel_box1 .message_side2 .message_item {
    display: block;
    padding: 20px 15px;
    cursor: pointer;
    margin: 5px 0;
}

.panel_box1 .message_side2 .message_item:hover {
    background: #e6e9ed;
}

.panel_box1 .message_side2 .active {
    background: #e6e9ed;
}

.panel_box1 .message_side2 .message_item .message_title {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.panel_box1 .message_item .message_name {
    font-size: 13pt;
    color: #282828;
    white-space: nowrap;
    text-overflow: fade;
    overflow: hidden;
}

.panel_box1 .message_item .message_date {
    float: left;
    margin: 5px;
    color: #9b9b9b;
    font-weight: 400;
    font-size: 9pt;
    white-space: nowrap;
    text-overflow: fade;
    overflow: hidden;
}

.panel_box1 .message_side2 .message_item .message_text {
    margin-top: 5px;
    display: block;
    font-size: 8pt;
    font-weight: 400;
    color: #9b9b9b;
}

.panel_box1 .message_main2 {
    width: calc(100% - 365px);
    display: inline-block;
    vertical-align: top;
    padding: 20px 15px;
    box-sizing: border-box;
}

.panel_box1 .message_main2 .close_message {
    float: left;
    padding: 5px;
    cursor: pointer;
}

.panel_box1 .message_main2 .close_message:hover {
    color: #ea9345;
}

.panel_box1 .message_main2 .message_item {
    display: block;
    padding: 10px 15px;
    margin: 30px 0;
    background: #fff;
}

.message_main2 .message_item .title {
    display: block;
    margin-left: 15px;
}

.message_main2 .message_item .title .img {
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    margin-left: 15px;
}


.message_main2 .message_item .title .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message_main2 .message_item .title .img span {
    display: block;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    font-size: 11pt;
    font-weight: 800;
    color: #2c2e3e;
}

.message_main2 .message_item .message_date {
    margin: 20px;
}

.message_main2 .message_item .message_text {
    display: block;
    margin-top: 15px;
    margin-right: 20px;
    font-weight: 400;
    color: #9b9b9b;
    font-size: 14px;
    line-height: 1.8;
}

.message_main2 .message_item .hr {
    width: calc(100% - 200px);
    height: 1px;
    display: block;
    margin: 35px auto;
    background: #ccc;
}

.message_main2 .message_item .admin_message {
    display: block;
}

.message_main2 .message_item .admin_message .img {
    float: left;
}

.message_main2 .message_item .admin_message .message_name {
    float: left;
    margin: 15px 15px;
}

.message_main2 .message_item .admin_message .message_date {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

.message_main2 .message_item .title .img span {
    padding-top: 17px;
}

.message_holder .btn-orange {
    float: left;
    border-radius: 6px;
    margin-top: 15px;
}

.tip {
    display: block;
    font-size: 9pt;
    color: #6d726d;
    margin: 10px 0;
}

.contact40 {
    vertical-align: top !important;
}

.contact60 {
    vertical-align: top !important;
    padding-right: 60px;
}

/******************************  /PANEL  ******************************/
/******************************  /PANEL  ******************************/
/******************************  /PANEL  ******************************/
@media screen and (max-width: 1384px) {
    .article_archive .blog {
        margin: 35px 38px;
    }

    .article_archive {
        padding: 15px 0 !important;
    }
}

@media screen and (max-width: 1294px) {
    .box .box_item {
        margin: 40px 40px;
    }
}

@media screen and (max-width: 1280px) {
    .slider .container .slider_box .coffee {
        display: none;
    }
}

@media screen and (max-width: 1255px) {
    .box_project_team .blog_item {
        margin: 10px 5px;
    }
}

@media screen and (max-width: 1225px) {
    .article_archive .blog {
        margin: 35px 20px;
    }
}

@media screen and (max-width: 1180px) {
    .article_archive .blog_item {
        margin: 20px 10px;
    }
}

@media screen and (max-width: 1160px) {
    .box_project_team .blog_item {
        width: calc(50% - 40px);
        height: 180px;
        margin: 10px 15px;
    }

    .article_archive .blog {
        width: calc(50% - 99px);
        margin: 35px 48px;
    }

    .article_archive .blog_item {
        margin: 20px 25px;
        width: calc(50% - 60px);
    }

    .panel_box1 .message_side_hide {
        width: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: none;
    }

    .panel_box1 .message_main2 {
        width: calc(100% - 285px);
    }
}

@media screen and (max-width: 1050px) {
    .slider .container .slider_box .phone {
        display: none;
    }

    .panel_main .panel_header .panel_menu_bars {
        display: none;
    }

    .panel_main .panel_header .panel_title {
        padding-top: 10px;
    }

    .side_panel {
        width: 70px !important;
        position: fixed;
        float: right;
        z-index: 11;
    }

    .side_panel .toggle {
        display: block;
    }

    .side_panel .logo {
        padding-right: 10px !important;
    }

    .side_panel .panel_menu .menu_btn {
        padding: 15px 20px !important;
    }

    .side_panel .logo .site_name {
        width: 0 !important;
    }

    .side_panel .panel_menu .menu_btn .title {
        width: 0 !important;
    }

    .panel_main {
        width: calc(100% - 70px) !important;
        float: left;
    }

    .side_panel_hide {
        width: 270px !important;
        position: fixed;
        float: right;
        z-index: 11;
    }

    .side_panel_hide .logo {
        padding-right: 25px !important;
    }

    .side_panel_hide .panel_menu .menu_btn {
        padding: 15px 25px !important;

    }

    .side_panel_hide .logo .site_name {
        width: calc(100% - 56px) !important;
    }

    .side_panel_hide .panel_menu .menu_btn .title {
        width: calc(100% - 40px) !important;
    }

    .panel_main_open {
        width: calc(100% - 70px) !important;
        float: left;
    }

    .box .box_item {
        margin: 40px 20px;
    }

    .panel_box1 .message_side2_hide {
        width: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }

    .panel_box1 .message_side,
    .panel_box1 .message_side2,
    .panel_box1 .message_main2 {
        width: 100%;
        border: none;
    }
}

@media screen and (max-width: 940px) {
    .panel_box1 .message_main .form .wright {
        width: 100%;
        display: block;
        margin: 0 0 30px 0;
    }

    .panel_box1 .message_main .form .wleft {
        width: 100%;
        display: block;
        margin: 0;
        float: none;
    }

    .panel_box1 .message_main .form .select {
        width: calc(50% - 13px);
    }

    .panel_box1 .message_main .form .select:last-child {
        margin-left: 0;
    }

    .panel_box1 .message_main .form .wleft .head {
        margin-right: 0;
    }
}

@media screen and (max-width: 915px) {
    .site_title .title {
        font-size: 12pt;
    }

    .header_action .top_menu {
        display: none;
    }

    .side_menu_bars {
        display: inline-block;
        vertical-align: middle;
    }

    .slider .container .slider_box .laptop img {
        width: 500px;
    }

    .slider .container .slider_box .laptop .slider_img {
        top: -290px;
        width: 340px;
        height: 225px;
    }

    .slider {
        height: 380px;
    }

    .panel_main .panel_body .body_box {
        width: calc(50% - 25px);
        margin-bottom: 25px;
    }

    .panel_main .panel_box1 .w50 {
        width: calc(100% - 10px);
        display: block;
    }
}

@media screen and (max-width: 880px) {
    .article .container .slider_box .slider_menu,
    .article .container .slider_box .sliderM {
        display: block;
        margin: auto;
        padding-top: 1px;
    }

    .article .container .slider_box .sliderM {
        display: block;
        width: calc(100% - 20px);
    }
}

@media screen and (max-width: 850px) {
    .wright,
    .wleft {
        display: block;
        width: calc(100% - 5px);
    }

    .wleft .box1 {
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 5px);
    }


    .order_project_side {
        display: none !important;
    }

    .order_project_main {
        display: block;
    }

    .article_archive .blog {
        width: calc(50% - 64px);
        margin: 35px 30px;
    }

    .header_vaz_archive .btn_vaz {
        margin-left: 25px;
    }

    .box .box_item {
        margin: 40px 5px;
    }
}

@media screen and (max-width: 780px) {
    .panel_main .panel_box1 .table_header {
        display: none;
    }

    .panel_main .panel_box1 .table_row span {
        display: block;
        width: 100% !important;
        border-bottom: dashed 1px #7f8c8d66;
        padding-bottom: 2px;
        margin-bottom: 2px;
    }

    .panel_main .panel_box1 .table_row span:last-child {
        border: none;
    }

    .panel_main .panel_box1 .table_row .t_title {
        display: inline-block;
    }
}

@media screen and (max-width: 710px) {
    .w40,
    .w60,
    .footer_item,
    .footer_item_logo {
        display: block;
        width: calc(100% - 0px);
    }

    .w60 {
        padding-right: 0 !important;
    }

    .footer_item .h3 {
        text-align: center !important;
    }

    .footer_item,
    .footer_item_logo {
        text-align: center;
    }

    .call_box {
        padding: 0 20px 50px 20px;
    }

    .box1 .img_team {
        width: 200px;
        height: 200px;
        display: block;
        margin: auto;
    }

    .box1 .team_bio {
        width: calc(100% - 10px);
        display: block;
        margin-right: 5px;
    }
}

@media screen and (max-width: 690px) {
    .slider .container .slider_box .laptop img {
        width: 350px;
    }

    .slider .container .slider_box .laptop .slider_img {
        top: -205px;
        width: 230px;
        height: 155px;
    }

    .slider {
        height: 300px;
    }

    .site_title_archive .title_archive {
        font-size: 14pt;
    }

    .article_archive .blog {
        width: calc(50% - 24px);
        margin: 35px 10px;
    }

    .article_archive .blog_item {
        margin: 20px 5px;
        width: calc(100% - 15px);
    }
}

@media screen and (max-width: 660px) {
    .article .container .header,
    .box_customers {
        width: calc(100% - 20px);
    }

    .box .box_item {
        width: calc(100% - 20px);
        margin: 10px 0;
    }

    .panel_box1 .message_main .form .select {
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width: 630px) {
    .panel_box1 .message_main .form .wleft .priority {
        padding: 5px 10px;
    }
}

@media screen and (max-width: 600px) {
    .wleft .box1 {
        display: block;
        width: calc(100% - 5px);
    }

    .box1 .table .table_item .th,
    .box1 .table .table_item .td {
        font-size: 14px;
    }

    .panel_box1 .message_holder .wright {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .panel_box1 .message_holder .holder_file {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 550px) {
    .site_title_archive .title_archive {
        font-size: 12pt;
    }

    .box_project_team .blog_item {
        display: block;
        width: calc(100% - 40px);
        height: 180px;
        margin: 10px 15px;
    }

    .article_archive .blog {
        width: calc(100% - 24px);
        margin: 35px 10px;
    }

    .header_vaz_archive .btn_vaz {
        margin-left: 20px;
        font-size: 16px !important;
    }

    .header_vaz_archive .vaz_menu_active {
        font-size: 18px !important;
    }

    .panel_main .panel_body .body_box {
        width: calc(100% - 10px);
    }

    .panel_main .panel_header {
        padding: 10px 10px;
    }

    .panel_box1 .message_main2 .message_item {
        padding: 10px 0;
    }

    .message_main2 .message_item .message_date {
        float: none;
        display: block;
    }

    .panel_box1 .message_holder .w1366 .req_item {
        display: block;
        width: 100%;
        text-align: right;
        margin-bottom: 15px;
    }

    .panel_box1 .message_holder .w1366 .req_item i {
        display: inline-block;
        vertical-align: middle;
    }

    .panel_box1 .message_holder .w1366 .req_item .holder {
        display: inline-block;
        vertical-align: middle;
        padding-right: 5px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 510px) {
    .panel_box1 .message_main .form .wleft .head {
        display: none;
    }

    .scroller .blog_item,
    .scroller .customers_item,
    .scroller .blog {
        width: calc(100vw - 170px);
    }
}

@media screen and (max-width: 480px) {
    .box1 .table .table_item .th,
    .box1 .table .table_item .td {
        font-size: 12px;
    }

    .btn-orange {
        font-size: 12pt;
    }

    .header_vaz_archive .btn_vaz {
        margin-bottom: 15px;
    }

}

@media screen and (max-width: 470px) {
    .header_action, .header_action .login {
        display: none;
    }

    .login_icon {
        display: inline-block;
        vertical-align: middle;
        float: none;
        margin-right: 0;
    }

    .site_title .btn-orange {
        padding: 5px 35px !important;
        font-size: 12pt;
    }

    .slider .container .slider_box .laptop img {
        width: 250px;
    }

    .slider .container .slider_box .laptop .slider_img {
        top: -150px;
        width: 170px;
        height: 115px;
    }

    .slider {
        height: 250px;
    }

    .article .container .slider_box .slider_menu {
        width: 380px;
    }

    .site_title_archive .title_archive {
        font-size: 10pt;
    }

    .bottom_img_box .sign_box .form,
    .bottom_img_box .sign_box .head {
        width: 100%;
        max-width: calc(100% - 30px);
        min-width: 0;
    }
}

@media screen and (max-width: 460px) {
    .side_menu_bars,
    .header_action {
        display: inline-block;
    }

    .header {
        padding: 10px 0;
    }

    .header_action,
    .header_action .login {
        margin: 0 0;
    }

    .site_title .title {
        font-size: 9pt;
    }

    .copy_right {
        font-size: 8pt;
    }

    .article .container .slider_box .slider_menu {
        width: 320px;
    }

    .box1 .img_team {
        width: 180px;
        height: 180px;
        display: block;
        margin: auto;
    }

    .box1 .team_bio span {
        font-size: 15px;
    }

    .box1 .team_bio .team_social i {
        padding: 10px;
    }

    .box1 .text {
        font-size: 16px;
    }

    .panel_main .panel_header .panel_title {
        display: none;
    }

    .panel_box1 .message_main .form {
        padding: 10px 0;
    }

    .panel_box1 .message_holder .message_cost {
        display: block;
        text-align: left;
    }

    .message_holder .btn-orange {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 420px) {
    .panel_box1 .message_holder .holder_file {
        margin: 0;
    }

    .panel_box1 .message_holder .holder_file .file {
        width: 100%;
        min-width: 100%;
        margin: 15px 0;
    }

    .panel_box1 .message_holder .holder_file .file .holder_file_btn {
        display: none;
    }

    .panel_box1 .message_holder .holder_file .file .file_title {
        width: calc(100% - 55px);
    }

    .bottom_img_box .site_name {
        font-size: 16pt;
    }

    .bottom_img_box .sign_box .head {
        font-size: 12pt;
    }
}