html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: iranSans;
    font-size: 13px;
    font-weight: 400;
    color: #555
}

body {
    direction: rtl
}

    body.en {
        direction: ltr
    }

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

.en .revers_direction {
    direction: rtl;
    text-align: right
}

main {
    display: block
}

section {
    display: block;
    width: 100%
}

.float-right {
    float: right
}

.float-left {
    float: left
}

.en .float-right {
    float: left
}

.en .float-left {
    float: right
}

.MAIN, .PAGE, .CONTENT {
    width: 100%
}

.container, .panel, .wrapper {
    display: block;
    min-height:;
    box-sizing: border-box
}

    .container::after {
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
        height: 0
    }

.panel {
    padding: 10px;
    position: relative;
    width: 100%
}

    .panel.panel_grid-xxsd-1, .panel.panel_grid-xsd-1, .panel.panel_grid-sd-1, .panel.panel_grid-nd-1, .panel.panel_grid-ld-1, .panel.panel_grid-xld-1, .panel.panel_grid-xxld-1, .panel.panel_grid-xxsd-2, .panel.panel_grid-xsd-2, .panel.panel_grid-sd-2, .panel.panel_grid-nd-2, .panel.panel_grid-ld-2, .panel.panel_grid-xld-2, .panel.panel_grid-xxld-2, .panel.panel_grid-xxsd-3, .panel.panel_grid-xsd-3, .panel.panel_grid-sd-3, .panel.panel_grid-nd-3, .panel.panel_grid-ld-3, .panel.panel_grid-xld-3, .panel.panel_grid-xxld-3, .panel.panel_grid-xxsd-4, .panel.panel_grid-xsd-4, .panel.panel_grid-sd-4, .panel.panel_grid-nd-4, .panel.panel_grid-ld-4, .panel.panel_grid-xld-4, .panel.panel_grid-xxld-4, .panel.panel_grid-xxsd-5, .panel.panel_grid-xsd-5, .panel.panel_grid-sd-5, .panel.panel_grid-nd-5, .panel.panel_grid-ld-5, .panel.panel_grid-xld-5, .panel.panel_grid-xxld-5, .panel.panel_grid-xxsd-6, .panel.panel_grid-xsd-6, .panel.panel_grid-sd-6, .panel.panel_grid-nd-6, .panel.panel_grid-ld-6, .panel.panel_grid-xld-6, .panel.panel_grid-xxld-6, .panel.panel_grid-xxsd-7, .panel.panel_grid-xsd-7, .panel.panel_grid-sd-7, .panel.panel_grid-nd-7, .panel.panel_grid-ld-7, .panel.panel_grid-xld-7, .panel.panel_grid-xxld-7, .panel.panel_grid-xxsd-8, .panel.panel_grid-xsd-8, .panel.panel_grid-sd-8, .panel.panel_grid-nd-8, .panel.panel_grid-ld-8, .panel.panel_grid-xld-8, .panel.panel_grid-xxld-8, .panel.panel_grid-xxsd-9, .panel.panel_grid-xsd-9, .panel.panel_grid-sd-9, .panel.panel_grid-nd-9, .panel.panel_grid-ld-9, .panel.panel_grid-xld-9, .panel.panel_grid-xxld-9, .panel.panel_grid-xxsd-10, .panel.panel_grid-xsd-10, .panel.panel_grid-sd-10, .panel.panel_grid-nd-10, .panel.panel_grid-ld-10, .panel.panel_grid-xld-10, .panel.panel_grid-xxld-10, .panel.panel_grid-xxsd-11, .panel.panel_grid-xsd-11, .panel.panel_grid-sd-11, .panel.panel_grid-nd-11, .panel.panel_grid-ld-11, .panel.panel_grid-xld-11, .panel.panel_grid-xxld-11, .panel.panel_grid-xxsd-12, .panel.panel_grid-xsd-12, .panel.panel_grid-sd-12, .panel.panel_grid-nd-12, .panel.panel_grid-ld-12, .panel.panel_grid-xld-12, .panel.panel_grid-xxld-12 {
        float: right
    }

.en .panel.panel_grid-xxsd-1, .en .panel.panel_grid-xsd-1, .en .panel.panel_grid-sd-1, .en .panel.panel_grid-nd-1, .en .panel.panel_grid-ld-1, .en .panel.panel_grid-xld-1, .en .panel.panel_grid-xxld-1, .en .panel.panel_grid-xxsd-2, .en .panel.panel_grid-xsd-2, .en .panel.panel_grid-sd-2, .en .panel.panel_grid-nd-2, .en .panel.panel_grid-ld-2, .en .panel.panel_grid-xld-2, .en .panel.panel_grid-xxld-2, .en .panel.panel_grid-xxsd-3, .en .panel.panel_grid-xsd-3, .en .panel.panel_grid-sd-3, .en .panel.panel_grid-nd-3, .en .panel.panel_grid-ld-3, .en .panel.panel_grid-xld-3, .en .panel.panel_grid-xxld-3, .en .panel.panel_grid-xxsd-4, .en .panel.panel_grid-xsd-4, .en .panel.panel_grid-sd-4, .en .panel.panel_grid-nd-4, .en .panel.panel_grid-ld-4, .en .panel.panel_grid-xld-4, .en .panel.panel_grid-xxld-4, .en .panel.panel_grid-xxsd-5, .en .panel.panel_grid-xsd-5, .en .panel.panel_grid-sd-5, .en .panel.panel_grid-nd-5, .en .panel.panel_grid-ld-5, .en .panel.panel_grid-xld-5, .en .panel.panel_grid-xxld-5, .en .panel.panel_grid-xxsd-6, .en .panel.panel_grid-xsd-6, .en .panel.panel_grid-sd-6, .en .panel.panel_grid-nd-6, .en .panel.panel_grid-ld-6, .en .panel.panel_grid-xld-6, .en .panel.panel_grid-xxld-6, .en .panel.panel_grid-xxsd-7, .en .panel.panel_grid-xsd-7, .en .panel.panel_grid-sd-7, .en .panel.panel_grid-nd-7, .en .panel.panel_grid-ld-7, .en .panel.panel_grid-xld-7, .en .panel.panel_grid-xxld-7, .en .panel.panel_grid-xxsd-8, .en .panel.panel_grid-xsd-8, .en .panel.panel_grid-sd-8, .en .panel.panel_grid-nd-8, .en .panel.panel_grid-ld-8, .en .panel.panel_grid-xld-8, .en .panel.panel_grid-xxld-8, .en .panel.panel_grid-xxsd-9, .en .panel.panel_grid-xsd-9, .en .panel.panel_grid-sd-9, .en .panel.panel_grid-nd-9, .en .panel.panel_grid-ld-9, .en .panel.panel_grid-xld-9, .en .panel.panel_grid-xxld-9, .en .panel.panel_grid-xxsd-10, .en .panel.panel_grid-xsd-10, .en .panel.panel_grid-sd-10, .en .panel.panel_grid-nd-10, .en .panel.panel_grid-ld-10, .en .panel.panel_grid-xld-10, .en .panel.panel_grid-xxld-10, .en .panel.panel_grid-xxsd-11, .en .panel.panel_grid-xsd-11, .en .panel.panel_grid-sd-11, .en .panel.panel_grid-nd-11, .en .panel.panel_grid-ld-11, .en .panel.panel_grid-xld-11, .en .panel.panel_grid-xxld-11, .en .panel.panel_grid-xxsd-12, .en .panel.panel_grid-xsd-12, .en .panel.panel_grid-sd-12, .en .panel.panel_grid-nd-12, .en .panel.panel_grid-ld-12, .en .panel.panel_grid-xld-12, .en .panel.panel_grid-xxld-12 {
    float: left
}

.wrapper.wrapper_inline {
    display: inline-block;
    width: initial
}

.scroller-wrapper {
    height: 100%;
    min-height: 100%
}

.scroller-content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.scroller-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%
}

._activePesdueEl:after {
    display: block;
    visibility: hidden;
    height: 0;
    content: '';
    clear: both
}

._centerByMargin {
    margin-left: auto;
    margin-right: auto
}

._disableScroll {
    overflow-x: hidden;
    overflow-y: hidden
}

.-centerV {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.-centerH {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
}

.-center {
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

._centerYByTransform {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

._CenterByText {
    text-align: center
}

._fullWidth {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin-left: 0;
    margin-right: 0
}

._removeBorder {
    border: none !important
}

.-none {
    visibility: hidden;
    opacity: 0;
    display: none;
    z-index: -1
}

h1, h2, h3, h4, h5, h6, strong, label, span {
    color: inherit
}

h6, label {
    font-size: .8em
}

h5, strong {
    font-size: .9em
}

h4 {
    font-size: 1em
}

h3 {
    font-size: 1.1em
}

h2 {
    font-size: 1.3em
}

small {
    font-weight: 100
}

h1 {
    font-size: 1.5em
}

a, .link {
    -webkit-transition: color .15s ease-in-out;
    -moz-transition: color .15s ease-in-out;
    -o-transition: color .15s ease-in-out;
    transition: color .15s ease-in-out;
    cursor: pointer;
    font-family: inherit
}

    a, a:visited, .link, .link:visited {
        color: #60acd4;
        text-decoration: none
    }

        a:hover, a:active, .link:hover, .link:active {
            color: #165c82;
            text-decoration: underline
        }

label {
    color: #555
}

    span.lbl_note, label.lbl_note, .lbl_note {
        font-size: .9em;
        background: #f3f5f7;
        color: #a1a1a1
    }

    span.lbl_info, label.lbl_info, .lbl_info {
        background-color: #d9edf7;
        font-size: .9em;
        color: #31708f
    }

    span.lbl_warning, label.lbl_warning, .lbl_warning {
        font-size: .9em;
        background-color: #fcf8e3;
        color: #8a6d3b
    }

    span.lbl_success, label.lbl_success, .lbl_success {
        font-size: .9em;
        background-color: #0aa699;
        color: #fff
    }

    span.lbl_danger, label.lbl_danger, .lbl_danger {
        font-size: .9em;
        background-color: #f2dede;
        color: #a94442
    }

.lbl_red {
    background-color: #f35958;
    color: #fff;
    border-radius: 5px
}

.lbl_bordered {
    border-style: solid;
    border-width: 1px;
    border-color: #777
}

    .lbl_bordered.lbl_red {
        border-color: #953a17
    }

.btn, button {
    padding: .5em 2em;
    margin: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-decoration: none;
    display: inline-block;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    outline: 0;
    color: #555;
    border: none;
    text-align: center
}

    .btn *, button * {
        font-size: inherit;
        font-weight: inherit
    }

    .btn, .btn:hover {
        text-decoration: none
    }

        .btn.btn_default {
            color: #333;
            background-color: transparent;
            border: none
        }

            .btn.btn_default:hover {
                background-color: #dfdfdf;
                border-color: #adadad
            }

            .btn.btn_default:active {
                background-color: #dfdfdf;
                border-color: #adadad
            }

        .btn.btn-blue:hover {
            background-color: #084378
        }

        .btn.btn-blue:active {
            background-color: #48a746;
            border-color: #3d8d3c
        }

        .btn.btn-blue {
            color: #fff;
            background-color: #2c8de2;
            border-color: #2c8de2;
            border: none
        }

        .btn.btn_success {
            color: #fff;
            background-color: #64bd63;
            border-color: #52b551
        }

            .btn.btn_success:hover {
                background-color: #48a746;
                border-color: #3d8d3c
            }

            .btn.btn_success:active {
                background-color: #48a746;
                border-color: #3d8d3c
            }

        .btn.btn-danger {
            color: #fff;
            background-color: #dd5826;
            border-color: #ca4e20
        }

            .btn.btn-danger:hover {
                background-color: #b4461c;
                border-color: #953a17
            }

            .btn.btn-danger:active {
                background-color: #b4461c;
                border-color: #953a17
            }

        .btn.btn_warning {
            color: #fff;
            background-color: #f0b518;
            border-color: #e0a70f
        }

            .btn.btn_warning:hover {
                background-color: #c8950d;
                border-color: #a67c0b
            }

            .btn.btn_warning:active {
                background-color: #c8950d;
                border-color: #a67c0b
            }

        .btn.btn_userDo {
            color: #fff;
            background-color: #5d8fc2;
            border-color: #4a82bb
        }

            .btn.btn_userDo:hover {
                background-color: #4175ab;
                border-color: #376492
            }

            .btn.btn_userDo:active {
                background-color: #4175ab;
                border-color: #376492
            }

        .btn.btn_sysDo {
            color: #fff;
            background-color: #5dc4bf;
            border-color: #4abdb8
        }

            .btn.btn_sysDo:hover {
                background-color: #40aea9;
                border-color: #369490
            }

            .btn.btn_sysDo:active {
                background-color: #40aea9;
                border-color: #369490
            }

        .btn.btn_black {
            color: #fff;
            background-color: #222;
            border-color: #111
        }

            .btn.btn_black:hover {
                background-color: #333;
                border-color: #222
            }

            .btn.btn_black:active {
                background-color: #333;
                border-color: #222
            }

            .btn.btn_black.btn_disable {
                background-color: #555;
                color: #aaa;
                border-color: #444;
                pointer-events: none;
                cursor: default
            }

        .btn.btn_inverse {
            color: #555;
            background-color: #fff;
            border-color: #555
        }

            .btn.btn_inverse:hover {
                background-color: #fafafa;
                border-color: #777
            }

            .btn.btn_inverse:active {
                background-color: #fafafa;
                border-color: #777
            }

            .btn.btn_inverse.btn_disable {
                background-color: #555;
                color: #aaa;
                border-color: #444;
                pointer-events: none;
                cursor: default
            }

        .btn.btn_green {
            color: white;
            background-color: #0aa699;
            border-color: #0aa699
        }

            .btn.btn_green:hover {
                color: white;
                background-color: #088076;
                border-color: #088076
            }

            .btn.btn_green:active {
                color: white;
                background-color: #0aa699;
                border-color: #0aa699
            }

            .btn.btn_green.btn_disable {
                background-color: #555;
                color: #aaa;
                border-color: #444;
                pointer-events: none;
                cursor: default
            }

        .btn.btn_sysDo {
            color: #fff;
            background-color: #5dc4bf;
            border-color: #4abdb8
        }

            .btn.btn_sysDo:hover {
                background-color: #40aea9;
                border-color: #369490
            }

            .btn.btn_sysDo:active {
                background-color: #40aea9;
                border-color: #369490
            }

        .btn.btn_disable {
            pointer-events: none;
            opacity: .65;
            cursor: initial
        }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-transition: color 9999s ease-out,background-color 9999s ease-out;
    -webkit-transition-delay: 9999s
}

::-webkit-input-placeholder {
    color: rgba(0,0,0,.4);
    font-size: .9em
}

:-moz-placeholder {
    color: rgba(0,0,0,.4);
    font-size: .9em;
    opacity: 1
}

::-moz-placeholder {
    color: rgba(0,0,0,.4);
    font-size: .9em;
    opacity: 1
}

:-ms-input-placeholder {
    color: rgba(0,0,0,.4);
    font-size: .9em
}

::-ms-input-placeholder {
    color: rgba(0,0,0,.4);
    font-size: .9em
}

.textbox, input[type=text], select, input[type=number], textarea {
    color: #666;
    border-width: 1px;
    border-style: solid;
    outline: 0;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: .9em;
    padding: 3px 10px;
    border-radius: 3px;
    margin: 4px;
    border-color: #ddd;
    transition: all .3s ease
}

    .textbox:hover, .textbox:active, .textbox:focus, input[type=text]:hover, input[type=text]:active, input[type=text]:focus, input[type=number]:hover, input[type=number]:active, input[type=number]:focus, textarea:hover, textarea:active, textarea:focus {
        color: #555;
        border-color: #bbb
    }

    select option {
        padding: 5px;
        line-height: 3rem;
        color: #000
    }

table {
    border-collapse: collapse;
    margin: 10px;
    width: 100%;
    border: 0
}

    table > thead > tr > th {
        background-color: #f9f8f5;
        color: #6f7b8a;
        border-bottom: 3px solid #ddd;
        text-align: right
    }

    table > tbody > tr {
        color: #777;
        border-bottom: 1px solid #efefef
    }

        table > tbody > tr:nth-child(2n) {
            background-color: #fdfdfc
        }

        table > thead > tr > th, table > tbody > tr > td {
            padding: 10px;
            border-left: 0;
            border-right: 0;
            border-top: 0;
            vertical-align: top
        }

        table tr:hover, table > tbody > tr:nth-child(2n):hover {
            background-color: #f5f5f5
        }

.breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-weight: 100
}

    .breadcrumb ul li {
        float: right;
        padding: 0 2px;
        color: #999
    }

.breadcrumb li span {
    position: relative
}

@media only screen and (min-width:320px) {
    .panel.panel_grid-xxsd-1 {
        width: 8.333333%
    }

    .grid_offset-xxsd-1 {
        margin-right: 8.333333%
    }

    .en .grid_offset-xxsd-1 {
        margin-left: 8.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-2 {
        width: 16.666666%
    }

    .grid_offset-xxsd-2 {
        margin-right: 16.666666%
    }

    .en .grid_offset-xxsd-2 {
        margin-left: 16.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-3 {
        width: 25%
    }

    .grid_offset-xxsd-3 {
        margin-right: 25%
    }

    .en .grid_offset-xxsd-3 {
        margin-left: 25%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-4 {
        width: 33.333333%
    }

    .grid_offset-xxsd-4 {
        margin-right: 33.333333%
    }

    .en .grid_offset-xxsd-4 {
        margin-left: 33.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-5 {
        width: 41.666666%
    }

    .grid_offset-xxsd-5 {
        margin-right: 41.666666%
    }

    .en .grid_offset-xxsd-5 {
        margin-left: 41.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-6 {
        width: 50%
    }

    .grid_offset-xxsd-6 {
        margin-right: 50%
    }

    .en .grid_offset-xxsd-6 {
        margin-left: 50%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-7 {
        width: 58.333333%
    }

    .grid_offset-xxsd-7 {
        margin-right: 58.333333%
    }

    .en .grid_offset-xxsd-7 {
        margin-left: 58.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-8 {
        width: 66.666666%
    }

    .grid_offset-xxsd-8 {
        margin-right: 66.666666%
    }

    .en .grid_offset-xxsd-8 {
        margin-left: 66.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-9 {
        width: 75%
    }

    .grid_offset-xxsd-9 {
        margin-right: 75%
    }

    .en .grid_offset-xxsd-9 {
        margin-left: 75%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-10 {
        width: 83.333333%
    }

    .grid_offset-xxsd-10 {
        margin-right: 83.333333%
    }

    .en .grid_offset-xxsd-10 {
        margin-left: 83.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-11 {
        width: 91.666666%
    }

    .grid_offset-xxsd-11 {
        margin-right: 91.666666%
    }

    .en .grid_offset-xxsd-11 {
        margin-left: 91.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xxsd-12 {
        width: 100%
    }

    .grid_offset-xxsd-12 {
        margin-right: 100%
    }

    .en .grid_offset-xxsd-12 {
        margin-left: 100%;
        margin-right: 0
    }
}

@media only screen and (min-width:321px) {
    .panel.panel_grid-xsd-1 {
        width: 8.333333%
    }

    .grid_offset-xsd-1 {
        margin-right: 8.333333%
    }

    .en .grid_offset-xsd-1 {
        margin-left: 8.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-2 {
        width: 16.666666%
    }

    .grid_offset-xsd-2 {
        margin-right: 16.666666%
    }

    .en .grid_offset-xsd-2 {
        margin-left: 16.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-3 {
        width: 25%
    }

    .grid_offset-xsd-3 {
        margin-right: 25%
    }

    .en .grid_offset-xsd-3 {
        margin-left: 25%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-4 {
        width: 33.333333%
    }

    .grid_offset-xsd-4 {
        margin-right: 33.333333%
    }

    .en .grid_offset-xsd-4 {
        margin-left: 33.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-5 {
        width: 41.666666%
    }

    .grid_offset-xsd-5 {
        margin-right: 41.666666%
    }

    .en .grid_offset-xsd-5 {
        margin-left: 41.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-6 {
        width: 50%
    }

    .grid_offset-xsd-6 {
        margin-right: 50%
    }

    .en .grid_offset-xsd-6 {
        margin-left: 50%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-7 {
        width: 58.333333%
    }

    .grid_offset-xsd-7 {
        margin-right: 58.333333%
    }

    .en .grid_offset-xsd-7 {
        margin-left: 58.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-8 {
        width: 66.666666%
    }

    .grid_offset-xsd-8 {
        margin-right: 66.666666%
    }

    .en .grid_offset-xsd-8 {
        margin-left: 66.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-9 {
        width: 75%
    }

    .grid_offset-xsd-9 {
        margin-right: 75%
    }

    .en .grid_offset-xsd-9 {
        margin-left: 75%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-10 {
        width: 83.333333%
    }

    .grid_offset-xsd-10 {
        margin-right: 83.333333%
    }

    .en .grid_offset-xsd-10 {
        margin-left: 83.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-11 {
        width: 91.666666%
    }

    .grid_offset-xsd-11 {
        margin-right: 91.666666%
    }

    .en .grid_offset-xsd-11 {
        margin-left: 91.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xsd-12 {
        width: 100%
    }

    .grid_offset-xsd-12 {
        margin-right: 100%
    }

    .en .grid_offset-xsd-12 {
        margin-left: 100%;
        margin-right: 0
    }
}

@media only screen and (min-width:480px) {
    .panel.panel_grid-sd-1 {
        width: 8.333333%
    }

    .grid_offset-sd-1 {
        margin-right: 8.333333%
    }

    .en .grid_offset-sd-1 {
        margin-left: 8.333333%;
        margin-right: 0
    }

    .panel.panel_grid-sd-2 {
        width: 16.666666%
    }

    .grid_offset-sd-2 {
        margin-right: 16.666666%
    }

    .en .grid_offset-sd-2 {
        margin-left: 16.666666%;
        margin-right: 0
    }

    .panel.panel_grid-sd-3 {
        width: 25%
    }

    .grid_offset-sd-3 {
        margin-right: 25%
    }

    .en .grid_offset-sd-3 {
        margin-left: 25%;
        margin-right: 0
    }

    .panel.panel_grid-sd-4 {
        width: 33.333333%
    }

    .grid_offset-sd-4 {
        margin-right: 33.333333%
    }

    .en .grid_offset-sd-4 {
        margin-left: 33.333333%;
        margin-right: 0
    }

    .panel.panel_grid-sd-5 {
        width: 41.666666%
    }

    .grid_offset-sd-5 {
        margin-right: 41.666666%
    }

    .en .grid_offset-sd-5 {
        margin-left: 41.666666%;
        margin-right: 0
    }

    .panel.panel_grid-sd-6 {
        width: 50%
    }

    .grid_offset-sd-6 {
        margin-right: 50%
    }

    .en .grid_offset-sd-6 {
        margin-left: 50%;
        margin-right: 0
    }

    .panel.panel_grid-sd-7 {
        width: 58.333333%
    }

    .grid_offset-sd-7 {
        margin-right: 58.333333%
    }

    .en .grid_offset-sd-7 {
        margin-left: 58.333333%;
        margin-right: 0
    }

    .panel.panel_grid-sd-8 {
        width: 66.666666%
    }

    .grid_offset-sd-8 {
        margin-right: 66.666666%
    }

    .en .grid_offset-sd-8 {
        margin-left: 66.666666%;
        margin-right: 0
    }

    .panel.panel_grid-sd-9 {
        width: 75%
    }

    .grid_offset-sd-9 {
        margin-right: 75%
    }

    .en .grid_offset-sd-9 {
        margin-left: 75%;
        margin-right: 0
    }

    .panel.panel_grid-sd-10 {
        width: 83.333333%
    }

    .grid_offset-sd-10 {
        margin-right: 83.333333%
    }

    .en .grid_offset-sd-10 {
        margin-left: 83.333333%;
        margin-right: 0
    }

    .panel.panel_grid-sd-11 {
        width: 91.666666%
    }

    .grid_offset-sd-11 {
        margin-right: 91.666666%
    }

    .en .grid_offset-sd-11 {
        margin-left: 91.666666%;
        margin-right: 0
    }

    .panel.panel_grid-sd-12 {
        width: 100%
    }

    .grid_offset-sd-12 {
        margin-right: 100%
    }

    .en.grid_offset-sd-12 {
        margin-left: 100%;
        margin-right: 0
    }
}

@media only screen and (min-width:600px) {
    body {
        font-size: 14px
    }

    .panel.panel_grid-nd-1 {
        width: 8.333333%
    }

    .grid_offset-nd-1 {
        margin-right: 8.333333%
    }

    .en .grid_offset-nd-1 {
        margin-left: 8.333333%;
        margin-right: 0
    }

    .panel.panel_grid-nd-2 {
        width: 16.666666%
    }

    .grid_offset-nd-2 {
        margin-right: 16.666666%
    }

    .en .grid_offset-nd-2 {
        margin-left: 16.666666%;
        margin-right: 0
    }

    .panel.panel_grid-nd-3 {
        width: 25%
    }

    .grid_offset-nd-3 {
        margin-right: 25%
    }

    .en .grid_offset-nd-3 {
        margin-left: 25%;
        margin-right: 0
    }

    .panel.panel_grid-nd-4 {
        width: 33.333333%
    }

    .grid_offset-nd-4 {
        margin-right: 33.333333%
    }

    .en .grid_offset-nd-4 {
        margin-left: 33.333333%;
        margin-right: 0
    }

    .panel.panel_grid-nd-5 {
        width: 41.666666%
    }

    .grid_offset-nd-5 {
        margin-right: 41.666666%
    }

    .en .grid_offset-nd-5 {
        margin-left: 41.666666%;
        margin-right: 0
    }

    .panel.panel_grid-nd-6 {
        width: 50%
    }

    .grid_offset-nd-6 {
        margin-right: 50%
    }

    .en .grid_offset-nd-6 {
        margin-left: 50%;
        margin-right: 0
    }

    .panel.panel_grid-nd-7 {
        width: 58.333333%
    }

    .grid_offset-nd-7 {
        margin-right: 58.333333%
    }

    .en .grid_offset-nd-7 {
        margin-left: 58.333333%;
        margin-right: 0
    }

    .panel.panel_grid-nd-8 {
        width: 66.666666%
    }

    .grid_offset-nd-8 {
        margin-right: 66.666666%
    }

    .en .grid_offset-nd-8 {
        margin-left: 66.666666%;
        margin-right: 0
    }

    .panel.panel_grid-nd-9 {
        width: 75%
    }

    .grid_offset-nd-9 {
        margin-right: 75%
    }

    .en .grid_offset-nd-9 {
        margin-left: 75%;
        margin-right: 0
    }

    .panel.panel_grid-nd-10 {
        width: 83.333333%
    }

    .grid_offset-nd-10 {
        margin-right: 83.333333%
    }

    .en .grid_offset-nd-10 {
        margin-left: 83.333333%;
        margin-right: 0
    }

    .panel.panel_grid-nd-11 {
        width: 91.666666%
    }

    .grid_offset-nd-11 {
        margin-right: 91.666666%
    }

    .en .grid_offset-nd-11 {
        margin-left: 91.666666%;
        margin-right: 0
    }

    .panel.panel_grid-nd-12 {
        width: 100%
    }

    .grid_offset-nd-12 {
        margin-right: 100%
    }

    .en .grid_offset-nd-12 {
        margin-left: 100%;
        margin-right: 0
    }
}

@media only screen and (min-width:768px) {
    .panel.panel_grid-ld-1 {
        width: 8.333333%
    }

    .grid_offset-ld-1 {
        margin-right: 8.333333%
    }

    .en .grid_offset-ld-1 {
        margin-left: 8.333333%;
        margin-right: 0
    }

    .panel.panel_grid-ld-2 {
        width: 16.666666%
    }

    .grid_offset-ld-2 {
        margin-right: 16.666666%
    }

    .en .grid_offset-ld-2 {
        margin-left: 16.666666%;
        margin-right: 0
    }

    .panel.panel_grid-ld-3 {
        width: 25%
    }

    .grid_offset-ld-3 {
        margin-right: 25%
    }

    .en .grid_offset-ld-3 {
        margin-left: 25%;
        margin-right: 0
    }

    .panel.panel_grid-ld-4 {
        width: 33.333333%
    }

    .grid_offset-ld-4 {
        margin-right: 33.333333%
    }

    .en .grid_offset-ld-4 {
        margin-left: 33.333333%;
        margin-right: 0
    }

    .panel.panel_grid-ld-5 {
        width: 41.666666%
    }

    .grid_offset-ld-5 {
        margin-right: 41.666666%
    }

    .en .grid_offset-ld-5 {
        margin-left: 41.666666%;
        margin-right: 0
    }

    .panel.panel_grid-ld-6 {
        width: 50%
    }

    .grid_offset-ld-6 {
        margin-right: 50%
    }

    .en .grid_offset-ld-6 {
        margin-left: 50%;
        margin-right: 0
    }

    .panel.panel_grid-ld-7 {
        width: 58.333333%
    }

    .grid_offset-ld-7 {
        margin-right: 58.333333%
    }

    .en .grid_offset-ld-7 {
        margin-left: 58.333333%;
        margin-right: 0
    }

    .panel.panel_grid-ld-8 {
        width: 66.666666%
    }

    .grid_offset-ld-8 {
        margin-right: 66.666666%
    }

    .en .grid_offset-ld-8 {
        margin-left: 66.666666%;
        margin-right: 0
    }

    .panel.panel_grid-ld-9 {
        width: 75%
    }

    .grid_offset-ld-9 {
        margin-right: 75%
    }

    .en .grid_offset-ld-9 {
        margin-left: 75%;
        margin-right: 0
    }

    .panel.panel_grid-ld-10 {
        width: 83.333333%
    }

    .grid_offset-ld-10 {
        margin-right: 83.333333%
    }

    .en .grid_offset-ld-10 {
        margin-left: 83.333333%;
        margin-right: 0
    }

    .panel.panel_grid-ld-11 {
        width: 91.666666%
    }

    .grid_offset-ld-11 {
        margin-right: 91.666666%
    }

    .en .grid_offset-ld-11 {
        margin-left: 91.666666%;
        margin-right: 0
    }

    .panel.panel_grid-ld-12 {
        width: 100%
    }

    .grid_offset-ld-12 {
        margin-right: 100%
    }

    .en .grid_offset-ld-12 {
        margin-left: 100%;
        margin-right: 0
    }
}

@media only screen and (min-width:992px) {
    .panel.panel_grid-xld-1 {
        width: 8.333333%
    }

    .grid_offset-xld-1 {
        margin-right: 8.333333%
    }

    .en .grid_offset-xld-1 {
        margin-left: 8.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xld-2 {
        width: 16.666666%
    }

    .grid_offset-xld-2 {
        margin-right: 16.666666%
    }

    .en .grid_offset-xld-2 {
        margin-left: 16.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xld-3 {
        width: 25%
    }

    .grid_offset-xld-3 {
        margin-right: 25%
    }

    .en .grid_offset-xld-3 {
        margin-left: 25%;
        margin-right: 0
    }

    .panel.panel_grid-xld-4 {
        width: 33.333333%
    }

    .grid_offset-xld-4 {
        margin-right: 33.333333%
    }

    .en .grid_offset-xld-4 {
        margin-left: 33.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xld-5 {
        width: 41.666666%
    }

    .grid_offset-xld-5 {
        margin-right: 41.666666%
    }

    .en .grid_offset-xld-5 {
        margin-left: 41.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xld-6 {
        width: 50%
    }

    .grid_offset-xld-6 {
        margin-right: 50%
    }

    .en .grid_offset-xld-6 {
        margin-left: 50%;
        margin-right: 0
    }

    .panel.panel_grid-xld-7 {
        width: 58.333333%
    }

    .grid_offset-xld-7 {
        margin-right: 58.333333%
    }

    .en .grid_offset-xld-7 {
        margin-left: 58.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xld-8 {
        width: 66.666666%
    }

    .grid_offset-xld-8 {
        margin-right: 66.666666%
    }

    .en .grid_offset-xld-8 {
        margin-left: 66.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xld-9 {
        width: 75%
    }

    .grid_offset-xld-9 {
        margin-right: 75%
    }

    .en .grid_offset-xld-9 {
        margin-left: 75%;
        margin-right: 0
    }

    .panel.panel_grid-xld-10 {
        width: 83.333333%
    }

    .grid_offset-xld-10 {
        margin-right: 83.333333%
    }

    .en .grid_offset-xld-10 {
        margin-left: 83.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xld-11 {
        width: 91.666666%
    }

    .grid_offset-xld-11 {
        margin-right: 91.666666%
    }

    .en .grid_offset-xld-11 {
        margin-left: 91.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xld-12 {
        width: 100%
    }

    .grid_offset-xld-12 {
        margin-right: 100%
    }

    .en .grid_offset-xld-12 {
        margin-left: 100%;
        margin-right: 0
    }
}

@media only screen and (min-width:1200px) {
    .panel.panel_grid-xxld-1 {
        width: 8.333333%
    }

    .grid_offset-xxld-1 {
        margin-right: 8.333333%
    }

    .en .grid_offset-xxld-1 {
        margin-left: 8.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-2 {
        width: 16.666666%
    }

    .grid_offset-xxld-2 {
        margin-right: 16.666666%
    }

    .en .grid_offset-xxld-2 {
        margin-left: 16.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-3 {
        width: 25%
    }

    .grid_offset-xxld-3 {
        margin-right: 25%
    }

    .en .grid_offset-xxld-3 {
        margin-left: 25%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-4 {
        width: 33.333333%
    }

    .grid_offset-xxld-4 {
        margin-right: 33.333333%
    }

    .en .grid_offset-xxld-4 {
        margin-left: 33.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-5 {
        width: 41.666666%
    }

    .grid_offset-xxld-5 {
        margin-right: 41.666666%
    }

    .en .grid_offset-xxld-5 {
        margin-left: 41.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-6 {
        width: 50%
    }

    .grid_offset-xxld-6 {
        margin-right: 50%
    }

    .en .grid_offset-xxld-6 {
        margin-left: 50%;
        margin-right: 0
    }

    .panel.panel_grid-ld-7 {
        width: 58.333333%
    }

    .grid_offset-xxld-7 {
        margin-right: 58.333333%
    }

    .en .grid_offset-xxld-7 {
        margin-left: 58.333333%;
        margin-right: 0
    }

    .panel.panel_grid-ld-8 {
        width: 66.666666%
    }

    .grid_offset-xxld-8 {
        margin-right: 66.666666%
    }

    .en .grid_offset-xxld-8 {
        margin-left: 66.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-9 {
        width: 75%
    }

    .grid_offset-xxld-9 {
        margin-right: 75%
    }

    .en .grid_offset-xxld-9 {
        margin-left: 75%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-10 {
        width: 83.333333%
    }

    .grid_offset-xxld-10 {
        margin-right: 83.333333%
    }

    .en .grid_offset-xxld-10 {
        margin-left: 83.333333%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-11 {
        width: 91.666666%
    }

    .grid_offset-xxld-11 {
        margin-right: 91.666666%
    }

    .en .grid_offset-xxld-11 {
        margin-left: 91.666666%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-12 {
        width: 100%
    }

    .grid_offset-xxld-12 {
        margin-right: 100%
    }

    .en .grid_offset-xxld-12 {
        margin-left: 100%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-3 {
        width: 25%
    }

    .grid_offset-xxld-3 {
        margin-right: 25%
    }

    .en .grid_offset-xxld-3 {
        margin-left: 25%;
        margin-right: 0
    }

    .panel.panel_grid-xxld-6 {
        width: 50%
    }

    .grid_offset-xxld-6 {
        margin-right: 50%
    }

    .en .grid_offset-xxld-6 {
        margin-left: 50%;
        margin-right: 0
    }
}

.form {
    padding: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee
}

.form-element {
    width: 100%;
    display: inline-block;
    padding: 10px 0
}

    .form-element strong {
        font-size: 16px;
        margin-bottom: 3px
    }

a:hover, a:active {
    color: #13ce66
}

.bg-video {
    width: 100%;
    height: 100%;
    object-fit: fill
}

body.en {
    font-family: Oswald,sans-serif
}

.page-share {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 2.5rem;
    z-index: 1000;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1);
    transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    transition: transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    pointer-events: auto;
    padding: 0
}

.en .page-share {
    right: initial;
    left: 0
}

.page-share li {
    font-size: 1.1rem;
    margin-top: 1em;
    display: block;
    color: #fff;
    list-style-type: none
}

    .page-share li a {
        color: #fff
    }

.dark-skin .page-share li a {
    color: #000
}

.h_iframe-aparat_embed_frame {
    position: relative
}

    .h_iframe-aparat_embed_frame .ratio {
        display: block;
        width: 100%;
        padding-top: 57%
    }

    .h_iframe-aparat_embed_frame iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #222629
}

main {
    top: 0;
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transition: transform 1000ms cubic-bezier(.7,0,.3,1);
    -moz-transition: transform 1000ms cubic-bezier(.7,0,.3,1);
    -o-transition: transform 1000ms cubic-bezier(.7,0,.3,1);
    transition: transform 1000ms cubic-bezier(.7,0,.3,1);
    z-index: 5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

form {
    height: 100%;
    position: relative;
    color: #454f57
}

.prldr {
    position: fixed;
    z-index: 1100;
    background: #11cc7a;
    bottom: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,50%);
    -moz-transform: translate(-50%,50%);
    -o-transform: translate(-50%,50%);
    transform: translate(-50%,50%);
    margin: 0;
    border-radius: 50%;
    -webkit-transition: width .5s,height .5s,transform .5s,bottom .5s,left .5s,right .5s,opacity 0s .5s;
    -moz-transition: width .5s,height .5s,transform .5s,bottom .5s,left .5s,right .5s,opacity 0s .5s;
    -o-transition: width .5s,height .5s,transform .5s,bottom .5s,left .5s,right .5s,opacity 0s .5s;
    transition: width .5s,height .5s,transform .5s,bottom .5s,left .5s,right .5s,opacity 0s .5s
}

.en .prldr {
    right: 50%;
    left: initial
}

@media screen and (orientation:portrait) {
    .prldr {
        width: 200vh;
        height: 200vh
    }
}

@media screen and (orientation:landscape) {
    .prldr {
        width: 200vw;
        height: 200vw
    }
}

.loaded.ready .prldr {
    bottom: 4.5rem;
    left: 4.5rem;
    width: 5rem;
    height: 5rem;
    opacity: 0;
    pointer-events: none
}

.en.loaded.ready .prldr {
    bottom: 4.5rem;
    right: 4.5rem;
    width: 5rem;
    height: 5rem;
    opacity: 0
}

.loading-text {
    width: 100px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    text-transform: uppercase;
    white-space: nowrap
}

    .loading-text img {
        width: 100%;
        max-width: 100%;
        top: 0;
        left: 0
    }

.loaded .prldr .loading-text {
    opacity: 0
}

.content-body {
    position: relative
}

.sence {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0;
    overflow: hidden;
    padding: 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 0;
    z-index: 1;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-timing-function: cubic-bezier(.645,.045,.355,1);
    -moz-animation-timing-function: cubic-bezier(.645,.045,.355,1);
    -o-animation-timing-function: cubic-bezier(.645,.045,.355,1);
    animation-timing-function: cubic-bezier(.645,.045,.355,1);
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    display: none
}

    .sence.show::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        display: block;
        top: 0;
        left: 0;
        z-index: 1000;
        background-color: rgba(0,0,0,.8);
        opacity: 0;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s
    }

    .sence.show {
        display: block;
        -webkit-transform: translateY(0%) translateZ(0);
        -moz-transform: translateY(0%) translateZ(0);
        -o-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0);
        opacity: 1;
        z-index: 5
    }

        .sence.show.animated {
            z-index: 6
        }

        .sence.show.fromBottom {
            animation-name: showFromBottom
        }

        .sence.show.fromTop {
            animation-name: showFromTop
        }

@-webkit-keyframes showFromBottom {
    0% {
        -webkit-transform: translateY(100%) translateZ(0);
        -moz-transform: translateY(100%) translateZ(0);
        -o-transform: translateY(100%) translateZ(0);
        transform: translateY(100%) translateZ(0)
    }

    100% {
        -webkit-transform: translateY(0%) translateZ(0);
        -moz-transform: translateY(0%) translateZ(0);
        -o-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

@-moz-keyframes showFromBottom {
    0% {
        -webkit-transform: translateY(100%) translateZ(0);
        -moz-transform: translateY(100%) translateZ(0);
        -o-transform: translateY(100%) translateZ(0);
        transform: translateY(100%) translateZ(0)
    }

    100% {
        -webkit-transform: translateY(0%) translateZ(0);
        -moz-transform: translateY(0%) translateZ(0);
        -o-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

@-o-keyframes showFromBottom {
    0% {
        -webkit-transform: translateY(100%) translateZ(0);
        -moz-transform: translateY(100%) translateZ(0);
        -o-transform: translateY(100%) translateZ(0);
        transform: translateY(100%) translateZ(0)
    }

    100% {
        -webkit-transform: translateY(0%) translateZ(0);
        -moz-transform: translateY(0%) translateZ(0);
        -o-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

@keyframes showFromBottom {
    0% {
        -webkit-transform: translateY(100%) translateZ(0);
        -moz-transform: translateY(100%) translateZ(0);
        -o-transform: translateY(100%) translateZ(0);
        transform: translateY(100%) translateZ(0)
    }

    100% {
        -webkit-transform: translateY(0%) translateZ(0);
        -moz-transform: translateY(0%) translateZ(0);
        -o-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

@-webkit-keyframes showFromTop {
    0% {
        -webkit-transform: translateY(-100%) translateZ(0);
        -moz-transform: translateY(-100%) translateZ(0);
        -o-transform: translateY(-100%) translateZ(0);
        transform: translateY(-100%) translateZ(0)
    }

    100% {
        -webkit-transform: translateY(0%) translateZ(0);
        -moz-transform: translateY(0%) translateZ(0);
        -o-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

@-moz-keyframes showFromTop {
    0% {
        -webkit-transform: translateY(-100%) translateZ(0);
        -moz-transform: translateY(-100%) translateZ(0);
        -o-transform: translateY(-100%) translateZ(0);
        transform: translateY(-100%) translateZ(0)
    }

    100% {
        -webkit-transform: translateY(0%) translateZ(0);
        -moz-transform: translateY(0%) translateZ(0);
        -o-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

@-o-keyframes showFromTop {
    0% {
        -webkit-transform: translateY(-100%) translateZ(0);
        -moz-transform: translateY(-100%) translateZ(0);
        -o-transform: translateY(-100%) translateZ(0);
        transform: translateY(-100%) translateZ(0)
    }

    100% {
        -webkit-transform: translateY(0%) translateZ(0);
        -moz-transform: translateY(0%) translateZ(0);
        -o-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

@keyframes showFromTop {
    0% {
        -webkit-transform: translateY(-100%) translateZ(0);
        -moz-transform: translateY(-100%) translateZ(0);
        -o-transform: translateY(-100%) translateZ(0);
        transform: translateY(-100%) translateZ(0)
    }

    100% {
        -webkit-transform: translateY(0%) translateZ(0);
        -moz-transform: translateY(0%) translateZ(0);
        -o-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

.sence.hide {
    z-index: 2;
    opacity: 0
}

.sence.hideanim::after {
    opacity: 1
}

p {
    font-weight: 300;
    text-align: justify
}

.-cc {
    background-color: #fff
}

h1 {
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: 400;
    padding: 0;
    margin: 0;
    text-transform: uppercase
}

.big {
    font-size: 1.5em
}

.bigger {
    font-size: 2em
}

.title h1 small {
    font-weight: inherit;
    font-size: .5em
}

h1 .dot {
    font-size: 2em;
    line-height: 0;
    color: inherit;
    text-decoration: none
}

.scroller-content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 7.5rem 2rem;
    min-height: 100%;
    width:
}

.sence .maxWidth {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    top: 0
}

.scroller-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
    height: 100%;
    min-height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.en .scroller-wrapper {
    padding: 0 10px 0 0
}

.logo, #pageSummery {
    -webkit-transition: transform 300ms 0ms cubic-bezier(.7,0,.3,1);
    -moz-transition: transform 300ms 0ms cubic-bezier(.7,0,.3,1);
    -o-transition: transform 300ms 0ms cubic-bezier(.7,0,.3,1);
    transition: transform 300ms 0ms cubic-bezier(.7,0,.3,1)
}

.off .logo, .off #pageSummery {
    -webkit-transition: transform 300ms 0ms cubic-bezier(.7,0,.3,1);
    -moz-transition: transform 300ms 0ms cubic-bezier(.7,0,.3,1);
    -o-transition: transform 300ms 0ms cubic-bezier(.7,0,.3,1);
    transition: transform 300ms 0ms cubic-bezier(.7,0,.3,1)
}

.textbox, input[type=text], select, input[type=number], textarea {
    background: none;
    outline: none;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 400px;
    margin: 0;
    color: #fff
}

.intro-title h1 {
    display: inline-block;
    border-bottom: 2px solid #000;
    margin-bottom: 0
}

.intro-title strong {
    font-size: 1.5em;
    color: #000
}

.intro-content {
    padding-top: 10em;
    min-height: 100%;
    background-color: #f6f7ff;
    border-left: 1px solid #ddd
}

    .intro-content h1 {
        font-size: 5em
    }

#mainContent {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    display: block;
    z-index: 90
}

.contact-form {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10002;
    display: none;
    text-align: center
}

    .contact-form::before {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.8);
        content: "";
        display: block;
        z-index: 1;
        opacity: 0;
        -webkit-transition: opacity .3s .2s;
        -moz-transition: opacity .3s .2s;
        -o-transition: opacity .3s .2s;
        transition: opacity .3s .2s
    }

    .contact-form.active {
        display: block
    }

        .contact-form.active.open::before {
            opacity: 1;
            -webkit-transition: opacity .3s 0s ease;
            -moz-transition: opacity .3s 0s ease;
            -o-transition: opacity .3s 0s ease;
            transition: opacity .3s 0s ease
        }

.contact-form-panel {
    width: 100%;
    max-width: 600px;
    max-height: 90%;
    overflow-y: auto;
    position: absolute;
    z-index: 2;
    background-color: #fff;
    padding: 2em;
    padding-top: 5em;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    -webkit-transition: opacity .5s 0s ease;
    -moz-transition: opacity .5s 0s ease;
    -o-transition: opacity .5s 0s ease;
    transition: opacity .5s 0s ease
}

.contact-form.open .contact-form-panel {
    opacity: 1;
    -webkit-transition: opacity .5s .1s ease;
    -moz-transition: opacity .5s .1s ease;
    -o-transition: opacity .5s .1s ease;
    transition: opacity .5s .1s ease
}

.close_button {
    width: 2em;
    height: 2em;
    position: absolute;
    top: 1em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 600;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.6)
}

    .close_button::after, .close_button::before {
        content: "";
        width: 1em;
        display: block;
        height: 2px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: rgba(0,0,0,.6);
        pointer-events: none;
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out
    }

    .close_button::after {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        transform: translateX(-50%) translateY(-50%) rotate(45deg)
    }

    .close_button::before {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        transform: translateX(-50%) translateY(-50%) rotate(-45deg)
    }

.scroll-help {
    position: fixed;
    display: inline-block;
    z-index: 91;
    bottom: 1em;
    width: 100%;
    font-size: 12px;
    -webkit-transition: opacity .3s 1.2s ease;
    -moz-transition: opacity .3s 1.2s ease;
    -o-transition: opacity .3s 1.2s ease;
    transition: opacity .3s 1.2s ease
}

.off .scroll-help {
    -webkit-transition: opacity .3s 0s ease;
    -moz-transition: opacity .3s 0s ease;
    -o-transition: opacity .3s 0s ease;
    transition: opacity .3s 0s ease;
    opacity: 0
}

body {
    color: #fff
}

    body.dark-skin {
        color: #000
    }

.scroll-help {
    position: fixed;
    display: inline-block;
    z-index: 91;
    bottom: 1em;
    width: 100%;
    font-size: 12px;
    -webkit-transition: opacity .3s 1.2s ease;
    -moz-transition: opacity .3s 1.2s ease;
    -o-transition: opacity .3s 1.2s ease;
    transition: opacity .3s 1.2s ease;
    color: inherit
}

.off .scroll-help {
    -webkit-transition: opacity .3s 0s ease;
    -moz-transition: opacity .3s 0s ease;
    -o-transition: opacity .3s 0s ease;
    transition: opacity .3s 0s ease;
    opacity: 0
}

.scrollUp, .scrollDown {
    font-size: 1.3em;
    margin: 0 auto;
    display: inline-block;
    text-decoration: none;
    position: relative;
    display: block;
    position: absolute;
    bottom: 10px;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: opacity .3s 0s ease;
    -moz-transition: opacity .3s 0s ease;
    -o-transition: opacity .3s 0s ease;
    transition: opacity .3s 0s ease;
    pointer-events: none;
    line-height: 14px;
    -webkit-transform: translateX(100%) rotate(-90deg);
    -moz-transform: translateX(100%) rotate(-90deg);
    -o-transform: translateX(100%) rotate(-90deg);
    transform: translateX(100%) rotate(-90deg);
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    right: 5em
}

    .scrollUp:hover, .scrollDown:hover {
        font-weight: 300
    }

.scrollUp {
    opacity: 1;
    pointer-events: initial
}

    .scrollUp span, .scrollDown span {
        display: inline-block;
        font-size: 14px;
        line-height: 14px
    }

    .scrollUp i, .scrollDown i {
        font-size: 25px;
        line-height: 14px;
        display: inline-block;
        top: 5px;
        position: relative
    }

.scrollDown i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.sence1 .scrollDown {
    opacity: 1;
    -webkit-transition: opacity .5s 1.5s ease;
    -moz-transition: opacity .5s 1.5s ease;
    -o-transition: opacity .5s 1.5s ease;
    transition: opacity .5s 1.5s ease;
    pointer-events: initial
}

.sence1 .scrollUp {
    opacity: 0;
    pointer-events: none
}

@-webkit-keyframes arrow {
    0%,100% {
        top: 10px
    }

    50% {
        top: 30px
    }
}

@keyframes arrow {
    0%,100% {
        top: 10px
    }

    50% {
        top: 30px
    }
}

.contact-info {
    border-top: 1px solid;
    font-weight: 300
}

    .contact-info a, .contact-info span {
        color: rgba(255,255,255,.6)
    }

    .contact-info strong {
        color: rgba(255,255,255,.9);
        font-weight: 500
    }

    .contact-info ul {
        padding: 0
    }

        .contact-info ul li a:hover {
            color: rgba(255,255,255,1)
        }

    .contact-info > div:nth-child(1) ul {
        list-style-type: none
    }

.social-info ul {
    list-style-type: none;
    padding: 0
}

    .social-info ul li a {
        color: rgba(255,255,255,.6);
        font-weight: 100;
        margin-bottom: 5px
    }

        .social-info ul li a:hover {
            color: rgba(255,255,255,1);
            text-decoration: none
        }

.social-info h2 {
    font-size: 3em;
    color: #fff;
    color: rgba(255,255,255,1);
    text-transform: uppercase
}

.menu_open_button {
    width: 25px;
    height: 25px;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 96;
    cursor: pointer;
    top: 2.5em;
    right: 2.5em;
    -webkit-transition: transform 1000ms 0ms ease;
    -moz-transition: transform 1000ms 0ms ease;
    -o-transition: transform 1000ms 0ms ease;
    transition: transform 1000ms 0ms ease;
    transform: translateX(50%) translateY(-50%) rotate(0deg)
}

.off .menu_open_button {
    -webkit-transition: transform 1000ms 0ms ease;
    -moz-transition: transform 1000ms 0ms ease;
    -o-transition: transform 1000ms 0ms ease;
    transition: transform 1000ms 0ms ease
}

.off .menu_open_button {
    -webkit-transform: translateX(50%) translateY(-50%) rotate(-225deg);
    -moz-transform: translateX(50%) translateY(-50%) rotate(-225deg);
    -o-transform: translateX(50%) translateY(-50%) rotate(-225deg);
    transform: translateX(50%) translateY(-50%) rotate(-225deg)
}

.mb_line {
    width: 100%;
    height: 8px;
    top: 3px;
    position: relative;
    pointer-events: none;
    -webkit-transition: all .1s 0s ease-in-out;
    -moz-transition: all .1s 0s ease-in-out;
    -o-transition: all .1s 0s ease-in-out;
    transition: all .1s 0s ease-in-out
}

    .mb_line:nth-child(1) {
        margin-bottom: 3px
    }

.dark-skin .mb_line::after, .dark-skin .mb_line::before {
    background: #000
}

.mb_line::after, .mb_line::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
    background: #fff;
    -webkit-transition: all .2s 0s ease;
    -moz-transition: all .2s 0s ease;
    -o-transition: all .2s 0s ease;
    transition: all .2s 0s ease
}

.mb_line::after {
    right: 3px
}

.mb_line::before {
    right: 14px
}

.menu_open_button:hover .mb_line:nth-child(1)::after {
    -webkit-transform: translateX(50%) translateY(-50%);
    -moz-transform: translateX(50%) translateY(-50%);
    -o-transform: translateX(50%) translateY(-50%);
    transform: translateX(50%) translateY(-50%)
}

.menu_open_button:hover .mb_line:nth-child(2)::after {
    -webkit-transform: translateX(50%) translateY(50%);
    -moz-transform: translateX(50%) translateY(50%);
    -o-transform: translateX(50%) translateY(50%);
    transform: translateX(50%) translateY(50%)
}

.menu_open_button:hover .mb_line:nth-child(1)::before {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.menu_open_button:hover .mb_line:nth-child(2)::before {
    -webkit-transform: translateX(-50%) translateY(50%);
    -moz-transform: translateX(-50%) translateY(50%);
    -o-transform: translateX(-50%) translateY(50%);
    transform: translateX(-50%) translateY(50%)
}

.intro-title h1 {
    display: inline-block;
    border-bottom: 2px solid #000;
    margin-bottom: 0
}

.intro-title strong {
    font-size: 1.5em;
    color: #000
}

.intro-content {
    padding-top: 10em;
    min-height: 100%;
    background-color: #f6f7ff;
    border-left: 1px solid #ddd
}

    .intro-content h1 {
        font-size: 5em
    }

#mainContent {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    display: block;
    z-index: 90
}

.contact-form {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10002;
    display: none;
    text-align: center
}

    .contact-form::before {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.8);
        content: "";
        display: block;
        z-index: 1;
        opacity: 0;
        -webkit-transition: opacity .3s .2s;
        -moz-transition: opacity .3s .2s;
        -o-transition: opacity .3s .2s;
        transition: opacity .3s .2s
    }

    .contact-form.active {
        display: block
    }

        .contact-form.active.open::before {
            opacity: 1;
            -webkit-transition: opacity .3s 0s ease;
            -moz-transition: opacity .3s 0s ease;
            -o-transition: opacity .3s 0s ease;
            transition: opacity .3s 0s ease
        }

.contact-form-panel {
    width: 100%;
    max-width: 600px;
    max-height: 90%;
    overflow-y: auto;
    position: absolute;
    z-index: 2;
    background-color: #fff;
    padding: 2em;
    padding-top: 5em;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    -webkit-transition: opacity .5s 0s ease;
    -moz-transition: opacity .5s 0s ease;
    -o-transition: opacity .5s 0s ease;
    transition: opacity .5s 0s ease
}

.contact-form.open .contact-form-panel {
    opacity: 1;
    -webkit-transition: opacity .5s .1s ease;
    -moz-transition: opacity .5s .1s ease;
    -o-transition: opacity .5s .1s ease;
    transition: opacity .5s .1s ease
}

.close_button {
    width: 2em;
    height: 2em;
    position: absolute;
    top: 1em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 600;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.6)
}

    .close_button::after, .close_button::before {
        content: "";
        width: 1em;
        display: block;
        height: 2px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: rgba(0,0,0,.6);
        pointer-events: none;
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out
    }

    .close_button::after {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
        transform: translateX(-50%) translateY(-50%) rotate(45deg)
    }

    .close_button::before {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        transform: translateX(-50%) translateY(-50%) rotate(-45deg)
    }

.scroll-help {
    position: fixed;
    display: inline-block;
    z-index: 91;
    bottom: 1em;
    width: 100%;
    font-size: 12px;
    -webkit-transition: opacity .3s 1.2s ease;
    -moz-transition: opacity .3s 1.2s ease;
    -o-transition: opacity .3s 1.2s ease;
    transition: opacity .3s 1.2s ease
}

.off .scroll-help {
    -webkit-transition: opacity .3s 0s ease;
    -moz-transition: opacity .3s 0s ease;
    -o-transition: opacity .3s 0s ease;
    transition: opacity .3s 0s ease;
    opacity: 0
}

body {
    color: #fff
}

    body.dark-skin {
        color: #000
    }

.scroll-help {
    position: fixed;
    display: inline-block;
    z-index: 91;
    bottom: 1em;
    width: 100%;
    font-size: 12px;
    -webkit-transition: opacity .3s 1.2s ease;
    -moz-transition: opacity .3s 1.2s ease;
    -o-transition: opacity .3s 1.2s ease;
    transition: opacity .3s 1.2s ease;
    color: inherit
}

.off .scroll-help {
    -webkit-transition: opacity .3s 0s ease;
    -moz-transition: opacity .3s 0s ease;
    -o-transition: opacity .3s 0s ease;
    transition: opacity .3s 0s ease;
    opacity: 0
}

.scrollUp, .scrollDown {
    font-size: 1.3em;
    margin: 0 auto;
    display: inline-block;
    text-decoration: none;
    position: relative;
    display: block;
    position: absolute;
    bottom: 10px;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: opacity .3s 0s ease;
    -moz-transition: opacity .3s 0s ease;
    -o-transition: opacity .3s 0s ease;
    transition: opacity .3s 0s ease;
    pointer-events: none;
    line-height: 14px;
    -webkit-transform: translateX(100%) rotate(-90deg);
    -moz-transform: translateX(100%) rotate(-90deg);
    -o-transform: translateX(100%) rotate(-90deg);
    transform: translateX(100%) rotate(-90deg);
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    right: 5em
}

    .scrollUp:hover, .scrollDown:hover {
        font-weight: 300
    }

.scrollUp {
    opacity: 1;
    pointer-events: initial
}

    .scrollUp span, .scrollDown span {
        display: inline-block;
        font-size: 14px;
        line-height: 14px
    }

    .scrollUp i, .scrollDown i {
        font-size: 25px;
        line-height: 14px;
        display: inline-block;
        top: 5px;
        position: relative
    }

.scrollDown i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.sence1 .scrollDown {
    opacity: 1;
    -webkit-transition: opacity .5s 1.5s ease;
    -moz-transition: opacity .5s 1.5s ease;
    -o-transition: opacity .5s 1.5s ease;
    transition: opacity .5s 1.5s ease;
    pointer-events: initial
}

.sence1 .scrollUp {
    opacity: 0;
    pointer-events: none
}

@-webkit-keyframes arrow {
    0%,100% {
        top: 10px
    }

    50% {
        top: 30px
    }
}

@keyframes arrow {
    0%,100% {
        top: 10px
    }

    50% {
        top: 30px
    }
}

.menu_close_button {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 2em;
    right: 2em;
    z-index: 600;
    cursor: pointer
}

.menu_main {
    -webkit-transition: all 500ms 500ms ease;
    -moz-transition: all 500ms 500ms ease;
    -o-transition: all 500ms 500ms ease;
    transition: all 500ms 500ms ease
}

    .menu_main ul {
        float: right;
        display: inline-block;
        text-align: right;
        list-style-type: none;
        text-transform: capitalize;
        padding: 0;
        margin: 0
    }

        .menu_main ul li {
            opacity: 0;
            -webkit-transform: translateX(100%) translateZ(0);
            -moz-transform: translateX(100%) translateZ(0);
            -o-transform: translateX(100%) translateZ(0);
            transform: translateX(100%) translateZ(0);
            -webkit-transition: all 500ms ease-in-out;
            -moz-transition: all 500ms ease-in-out;
            -o-transition: all 500ms ease-in-out;
            transition: all 500ms ease-in-out
        }

        .menu_main ul a {
            color: rgba(255,255,255,1);
            display: block;
            min-width: 100%;
            opacity: .6;
            text-transform: uppercase
        }

            .menu_main ul a:hover {
                opacity: 1;
                text-decoration: none
            }

.menu {
    position: fixed;
    top: 0;
    left: 100%;
    -webkit-transform: translateX(0) translateY(0%);
    -moz-transform: translateX(0) translateY(0%);
    -o-transform: translateX(0) translateY(0%);
    transform: translateX(0) translateY(0%);
    z-index: 1050;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    height: 100%;
    width: 100%;
    overflow: hidden
}

.moblie-menu-close-button {
    background: transparent
}

.menu.active {
    left: 0
}

.menu::before {
    position: fixed;
    z-index: 1025;
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.4)
}

.menu.open::before {
    opacity: 1
}

.menu .scroller-wrapper {
    width: 100%;
    background-color: #f4f7f6
}

.menu .menu-wrapper {
    position: absolute;
    width: 100%;
    max-width: 400px;
    min-height: 100%;
    height: 100%;
    margin: 0;
    right: 0;
    -webkit-transform: translateX(100%) translateY(0%);
    -moz-transform: translateX(100%) translateY(0%);
    -o-transform: translateX(100%) translateY(0%);
    transform: translateX(100%) translateY(0%);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    z-index: 1100
}

.en .menu .menu-wrapper {
    right: initial;
    left: 0;
    -webkit-transform: translateX(-100%) translateY(0%);
    -moz-transform: translateX(-100%) translateY(0%);
    -o-transform: translateX(-100%) translateY(0%);
    transform: translateX(-100%) translateY(0%)
}

.menu.open .menu-wrapper {
    -webkit-transform: translateX(0%) translateY(0%);
    -moz-transform: translateX(0%) translateY(0%);
    -o-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(0%)
}

.menu .scroller-wrapper .scroller-content {
    padding: 5em 1em 0
}

.menu ul li a {
    color: #fff
}

.contact-info {
    margin-top: 7.5rem
}

    .contact-info ul li {
        float: right;
        display: inline-block;
        margin-left: .5em
    }

.en .contact-info ul li {
    float: left;
    margin-right: .5em
}

.contact-info ul li a {
    color: #000
}

#pageSummery {
    width: 5em;
    -webkit-transform: translateX(0%) translateY(-50%);
    -moz-transform: translateX(0%) translateY(-50%);
    -o-transform: translateX(0%) translateY(-50%);
    transform: translateX(0%) translateY(-50%);
    position: fixed;
    top: 50%;
    right: 0em;
    z-index: 93;
    margin: 0 1rem
}

.en #pageSummery {
    left: initial;
    right: 0
}

body.dark-skin #pageSummary::after {
    border-right: 3px solid rgba(0,0,0,.3)
}

body.dark-skin #pageSummery > div .lable {
    color: #000
}

body.dark-skin #pageSummery > div > span {
    border: 1px solid rgba(0,0,0,.35)
}

body.dark-skin #pageSummery > div.selected > span {
    background: #000
}

#pageSummery::after {
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    border-right: 2px dotted rgba(255,255,255,.1);
    left: 50%;
    margin-left: -1px;
    top: 0;
    z-index: -1
}

.dark-skin #pageSummery::after {
    border-right: 2px dotted rgba(0,0,0,.1)
}

.off #pageSummery {
    -webkit-transform: translateX(-100%) translateY(-50%);
    -moz-transform: translateX(-100%) translateY(-50%);
    -o-transform: translateX(-100%) translateY(-50%);
    transform: translateX(-100%) translateY(-50%)
}

#pageSummery .btn-navigation {
    width: 1em;
    margin: 0 0 .5rem;
    position: relative;
    cursor: pointer
}

    #pageSummery .btn-navigation * {
        pointer-events: none
    }

#pageSummery .btn-navigation-text {
    text-align: center
}

#pageSummary .btn-navigation:nth-child(2n) .btn-navigation-text .btn-text {
    direction: rtl
}

#pageSummery > div:nth-last-child(1) {
    margin-bottom: 0
}

#pageSummery .btn-navigation-text label {
    display: inline-block;
    position: relative;
    left: 0;
    color: inherit;
    white-space: nowrap;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    font-weight: 300;
    font-size: 12px;
    top: 0;
    pointer-events: none;
    line-height: 10px;
    width: 5px;
    height: 5px
}

#pageSummery .btn-navigation-text:hover label {
    opacity: 1
}

#pageSummery .btn-navigation-text label span.text {
    position: absolute;
    transform: translateX(-1rem);
    opacity: 0 pointer-events:none -webkit-transition:all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.en #pageSummery .btn-navigation-text label span.text {
    left: initial;
    right: 100%;
    transform: translateX(-10px) translateY(-50%)
}

#pageSummery .btn-navigation-text label span.circle {
    height: 5px;
    width: 5px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: absolute;
    top: 0;
    left: 0
}

.dark-skin #pageSummery .btn-navigation-text label span.circle {
    background-color: rgb(117,168,49)
}

#pageSummery .btn-navigation-text label span.circle::before {
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,.4);
    content: "";
    display: inline-block;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: scale(1.4);
    border-radius: 50%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.dark-skin #pageSummery .btn-navigation-text label span.circle::before {
    background-color: rgb(175,107,5)
}

#pageSummery .btn-navigation label span.numbering {
    color: inherit;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(-150%)
}

.en #pageSummery .btn-navigation label span.numbering {
    left: initial;
    right: 0;
    transform: translateY(-50%) translateX(150%)
}

#pageSummery .btn-navigation label span.numbering {
    color: inherit;
    position: absolute;
    top: 50%;
    left: 0
}

#pageSummery .btn-navigation.selected label span.numbering {
    display: none;
    color: rgba(138,200,50,1)
}

#pageSummery .btn-navigation:hover label span.circle, #pageSummery .btn-navigation.selected label span.circle {
    transform: scale(2);
    background: rgb(117,168,49)
}

#pageSummery .btn-navigation:hover label span.text, #pageSummery .btn-navigation.selected label span.numbering {
    opacity: 1
}

#pageSummery .btn-navigation:hover label span.circle::before, #pageSummery .btn-navigation.selected label span.circle::before {
    transform: scale(1)
}

.btn {
    background-color: #e61e1e;
    border-radius: 0;
    border: none;
    padding: .7em 4em;
    margin: 1.5em;
    border: none;
    color: #fff;
    opacity: .85;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

    .btn:hover {
        opacity: 1
    }

    .btn.btn_white {
        background-color: #fff;
        color: #12172e
    }

    .btn.btn_black {
        background-color: #222629;
        opacity: 1;
        color: #fff
    }

        .btn.btn_black:hover {
            background-color: #c5d83f;
            opacity: 1
        }

    .btn.bigger {
        display: block;
        width: 100%;
        margin: 0;
        border: none;
        padding: .2em;
        line-height: 1.5em;
        border-radius: 0;
        text-transform: capitalize;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.perspective {
    width: 100%;
    height: 100%;
    background: #aaa;
    position: absolute
}

.perspectiveContainer {
    background: #fff;
    min-height: 100%;
    height:;
    position: relative;
    outline: 1px solid rgba(0,0,0,0);
    z-index: 10;
    -webkit-transform: translateZ(0) translateX(0) rotateY(0deg);
    -moz-transform: translateZ(0) translateX(0) rotateY(0deg);
    -o-transform: translateZ(0) translateX(0) rotateY(0deg);
    transform: translateZ(0) translateX(0) rotateY(0deg)
}

    .perspectiveContainer::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        opacity: 0;
        background: rgba(0,0,0,.2);
        -webkit-transition: opacity 0.4s,height 0s 0.4s;
        -moz-transition: opacity 0.4s,height 0s 0.4s;
        -webkit-transition: opacity 0.4s,height 0s 0.4s;
        transition: opacity 0.4s,height 0s 0.4s
    }

.wrapper {
    position: relative;
    height: 100%;
    width: 100%
}

.perspective.modalview {
    position: fixed;
    -webkit-perspective: 1500px;
    perspective: 1500px
}

.modalview .perspectiveContainer {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.modalview .wrapper {
    -webkit-transform: translateZ(-1px);
    -moz-transform: translateZ(-1px);
    -o-transform: translateZ(-1px);
    transform: translateZ(-1px)
}

.animate .perspectiveContainer::after {
    opacity: 1;
    height: 101%;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s
}

.effect-rotateleft {
    background: #76b852;
    background: -webkit-linear-gradient(to right,#8DC26F,#76b852);
    background: linear-gradient(to right,#8DC26F,#76b852)
}

    .effect-rotateleft .perspectiveContainer {
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: transform 0.4s;
        -o-transition: transform 0.4s;
        transition: transform 0.4s;
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        -o-transform-origin: 0% 50%;
        transform-origin: 0% 50%
    }

        .effect-rotateleft .perspectiveContainer::after {
            background: rgba(255,255,255,.6)
        }

    .effect-rotateleft.animate .perspectiveContainer {
        -webkit-transform: translateZ(-1800px) translateX(-50%) rotateY(45deg);
        -moz-transform: translateZ(-1800px) translateX(-50%) rotateY(45deg);
        -o-transform: translateZ(-1800px) translateX(-50%) rotateY(45deg);
        transform: translateZ(-1800px) translateX(-50%) rotateY(45deg)
    }

.no-csstransforms3d .effect-rotateleft.animate .perspectiveContainer {
    left: -75%
}

.effect-rotateleft .outer-nav a {
    opacity: 0;
    -webkit-transform: translateX(350px) translateZ(-1000px);
    -moz-transform: translateX(350px) translateZ(-1000px);
    -o-transform: translateX(350px) translateZ(-1000px);
    transform: translateX(350px) translateZ(-1000px);
    -webkit-transition: -webkit-transform 0.4s,opacity 0.4s;
    -moz-transition: transform 0.4s,opacity 0.4s;
    -o-transition: transform 0.4s,opacity 0.4s;
    transition: transform 0.4s,opacity 0.4s
}

@media screen and (max-width:77em) {
    .outer-nav.top {
        top: 15%
    }

    .outer-nav.bottom {
        bottom: 15%
    }
}

@media screen and (max-width:36.625em),screen and (max-height:41.75em) {
    .outer-nav.top {
        top: 5%
    }

    .outer-nav.bottom {
        bottom: 5%
    }

    .outer-nav.horizontal {
        font-size: 1.7em;
        width: 6.2em
    }

        .outer-nav.horizontal a {
            display: block;
            text-align: left
        }

    .effect-rotatetop .outer-nav.horizontal {
        width: 95%;
        bottom: auto;
        top: 50%
    }

        .effect-rotatetop .outer-nav.horizontal a {
            display: inline-block
        }
}

.logo {
    display: inline-block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 2rem;
    right: 0;
    font-size: 1.5em;
    -webkit-transform: translateY(7.5rem);
    -moz-transform: translateY(7.5rem);
    -o-transform: translateY(7.5frem);
    transform: translateY(7.5rem);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    top: 0;
    text-align: center;
    cursor: pointer;
    color: inherit
}

.hidden-logo .logo, .viz-topbar .logo {
    -webkit-transform: translateY(0rem);
    -moz-transform: translateY(0rem);
    -o-transform: translateY(0rem);
    transform: translateY(0rem)
}

.viz-topbar .logo {
    color: #000
}

.en .logo {
    left: 0
}

.logo a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-size: 2em
}

.logo [class^="icon-"]:before, .logo [class*=" icon-"]:before {
    display: block
}

.accelerating_link {
    position: absolute;
    top: 150%;
    transform: translateY(-50%);
    left: 2rem;
    z-index: 1;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    display: none
}

.hidden-accelerating .accelerating_link {
    top: 0
}

.viz-topbar .accelerating_link {
    top: 50%;
    color: #000
}

.en .accelerating_link {
    left: initial;
    right: 2rem
}

.accelerating_link a {
    color: inherit
}

.en .accelerating_link a i {
    display: inline-block;
    transform: rotate(180deg)
}

.desktop-menu {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    height: 100%
}

.hidden-menu .desktop-menu {
    top: 0
}

.viz-topbar .desktop-menu {
    top: 50%;
    color: #fff
}

.en .desktop-menu {
    right: initial;
    left: 2rem
}

.desktop-menu ul {
    padding: 0;
    margin: 0;
    list-style-type: none
}

    .desktop-menu ul li {
        float: right;
        margin: 0 .5em;
        position: relative;
        line-height: 4rem;
        text-align: right;
    }

        .desktop-menu ul li.sence1Logo {
            display: none
        }

        .desktop-menu ul li.otherLogo {
            display: block
        }

body:not(.dark-skin) .desktop-menu ul li.sence1Logo {
    display: block
}

body:not(.dark-skin) .desktop-menu ul li.otherLogo, body:not(.dark-skin) .desktop-menu ul li.otherLogo {
    display: none
}

.en .desktop-menu ul li {
    float: left
}

.desktop-menu ul li a, .desktop-menu ul li select {
    line-height: 3rem;
    color: inherit
}

body:not(.dark-skin) .desktop-menu ul li a, body:not(.dark-skin) .desktop-menu ul li select {
    color: #fff
}

body:not(.dark-skin) .desktop-menu ul.submenu li a {
    color: #000
}

ul.submenu li a.level2 {
    color: #18ba60 !important;
}

ul.submenu.level2 {
    border-radius: .4em;
    border-bottom: 1px solid #cdd4e0;
    box-shadow: 0 0 10px rgba(28, 39, 60, 0.16);
    background-color: #fff;
    padding: 1rem;
    top: 100%;
}

    ul.submenu.level2:before {
        border-bottom: 11px solid rgba(0,0,0,0.2);
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        content: "";
        display: inline-block;
        position: absolute;
        right: 30px;
        top: -11px;
    }

    ul.submenu.level2:after {
        border-bottom: 11px solid #FFFFFF;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        content: "";
        display: inline-block;
        position: absolute;
        right: 30px;
        top: -10px;
    }

.desktop-menu .tt {
    line-height: 1rem;
    font-size: 12px;
    padding: .5rem 0;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgb(244,247,246);
    color: #8b99a2
}

body:not(.dark-skin) .desktop-menu .tt {
    border-bottom: 1px solid rgba(255,255,255,.15)
}

.desktop-menu .tt ul li a {
    line-height: 1rem
}

.menu li:hover ul.submenu {
    display: block
}

.menu ul.submenu {
    display: block;
    text-align: center;
    display: none
}

    .menu ul.submenu li {
        float: none;
        clear: both;
        margin: 0;
        padding: .7rem 4rem;
        background-color: #fff;
        white-space: nowrap
    }

        .menu ul.submenu li a, .menu ul.submenu li a:visited {
            color: #000
        }

li:hover ul.submenu {
    display: block
}

ul.submenu {
    display: inline-block;
    text-align: center;
    position: absolute;
    right: 0;
    transform: translateX(0%);
    padding: 1rem;
    display: none;
}

    ul.submenu li {
        float: none;
        clear: both;
        margin: 0;
        padding: .7rem 4rem;
        background-color: #fff;
        white-space: nowrap;
        width: 100%;
        box-sizing: border-box
    }

        ul.submenu li a, ul.submenu li a:visited {
            color: #000
        }

.mobile-menu-button {
    padding: 1px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
    display: block;
    width: 3em;
    z-index: 1;
    right: initial;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    left: 2rem
}

.viz-topbar .mobile-menu-button {
    top: 50%;
    color: #000
}

.en .mobile-menu-button {
    left: initial;
    right: 2rem
}

.mobile-menu-button span {
    display: block;
    height: 2px;
    margin: .5em 0;
    pointer-events: none;
    position: relative
}

    .mobile-menu-button span::before, .mobile-menu-button span::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%
    }

    .mobile-menu-button span::before {
        top: -.5em
    }

    .mobile-menu-button span::after {
        bottom: -.5em
    }

    .mobile-menu-button span, .mobile-menu-button span::before, .mobile-menu-button span::after {
        background-color: #fff
    }

.dark-skin .mobile-menu-button span, .dark-skin .mobile-menu-button span::before, .dark-skin .mobile-menu-button span::after, .viz-topbar .mobile-menu-button span, .viz-topbar .mobile-menu-button span::before, .viz-topbar .mobile-menu-button span::after {
    background-color: #000
}

.top-bar {
    position: fixed;
    background-color: rgb(244,247,246);
    border-bottom: 1px solid rgba(255,255,255,.3);
    top: 0;
    right: 0;
    width: 100%;
    height: 4rem;
    z-index: 1000;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%)
}

body:not(.dark-skin) .top-bar {
    position: fixed;
    background-color: rgba(255,255,255,0)
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url(../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_Black.eot);
    src: url('../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),url(../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_Black.woff2) format('woff2'),url(../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_Black.woff) format('woff'),url(../../../app/global/file/font/WebFonts/fonts/ttf/IRANSansWeb_Black.ttf) format('truetype')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 700;
    src: url(../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_Bold.eot);
    src: url('../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),url(../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_Bold.woff2) format('woff2'),url(../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_Bold.woff) format('woff'),url(../../../app/global/file/font/WebFonts/fonts/ttf/IRANSansWeb_Bold.ttf) format('truetype')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url(../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_Medium.eot);
    src: url('../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),url(../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_Medium.woff2) format('woff2'),url(../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_Medium.woff) format('woff'),url(../../../app/global/file/font/WebFonts/fonts/ttf/IRANSansWeb_Medium.ttf) format('truetype')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url(../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_Light.eot);
    src: url('../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),url(../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_Light.woff2) format('woff2'),url(../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_Light.woff) format('woff'),url(../../../app/global/file/font/WebFonts/fonts/ttf/IRANSansWeb_Light.ttf) format('truetype')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url(../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_UltraLight.eot);
    src: url('../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),url(../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_UltraLight.woff2) format('woff2'),url(../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_UltraLight.woff) format('woff'),url(../../../app/global/file/font/WebFonts/fonts/ttf/IRANSansWeb_UltraLight.ttf) format('truetype')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 400;
    src: url(../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb.eot);
    src: url('../../../app/global/file/font/WebFonts/fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),url(../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb.woff2) format('woff2'),url(../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb.woff) format('woff'),url(../../../app/global/file/font/WebFonts/fonts/ttf/IRANSansWeb.ttf) format('truetype')
}

@font-face {
    font-family: 'site-icon';
    src: url(../file/font/fontello-70466986/font/site-icon.eot?19532043);
    src: url('../file/font/fontello-70466986/font/site-icon.eot?19532043#iefix') format('embedded-opentype'),url(../file/font/fontello-70466986/font/site-icon.woff2?19532043) format('woff2'),url(../file/font/fontello-70466986/font/site-icon.woff?19532043) format('woff'),url(../file/font/fontello-70466986/font/site-icon.ttf?19532043) format('truetype'),url('../file/font/fontello-70466986/font/site-icon.svg?19532043#site-icon') format('svg');
    font-weight: 400;
    font-style: normal
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "site-icon";
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-pencil:before {
    content: '\e800'
}

.icon-left-open-big:before {
    content: '\e801'
}

.icon-right-open-big:before {
    content: '\e802'
}

.icon-print:before {
    content: '\e803'
}

.icon-tags:before {
    content: '\e804'
}

.icon-search:before {
    content: '\e805'
}

.icon-up-open:before {
    content: '\e806'
}

.icon-down-open:before {
    content: '\e807'
}

.icon-cancel:before {
    content: '\e808'
}

.icon-wrench:before {
    content: '\e809'
}

.icon-aparat:before {
    content: '\e817'
}

.icon-nobka:before {
    content: '\e81a'
}

.icon-twitter:before {
    content: '\f099'
}

.icon-facebook:before {
    content: '\f09a'
}

.icon-linkedin:before {
    content: '\f0e1'
}

.icon-youtube:before {
    content: '\f167'
}

.icon-instagram:before {
    content: '\f16d'
}

.icon-left:before {
    content: '\f177'
}

.icon-share:before {
    content: '\f1e0'
}

.icon-copyright:before {
    content: '\f1f9'
}

.icon-telegram:before {
    content: '\f2c6'
}

@media only screen and (min-width:425px) {
    .bigger {
        font-size: 1.5em
    }

    .big {
        font-size: 1.3em
    }
}

@media only screen and (min-width:480px) {
    .about-section .about-text p {
        padding: 0 1em
    }
}

@media only screen and (min-width:500px) {
    h1 span {
        display: block
    }

    .copyright .copyright-open {
        display: none
    }

    .copyright .copyright-text {
        display: block
    }

    .scroller-content {
        padding: 7.5rem 2rem
    }

    .service-list {
        padding: 0 1em
    }
}

@media only screen and (min-width:600px) {
    .accelerating_link {
        display: inline-block
    }

    .logo {
        margin: 2rem 0;
        left: initial;
        right: 50%;
        -webkit-transform: translateY(7.5rem) translateX(50%);
        -moz-transform: translateY(7.5rem) translateX(50%);
        -o-transform: translateY(7.5frem) translateX(50%);
        transform: translateY(7.5rem) translateX(50%)
    }

    .en .logo {
        right: initial;
        left: 50%;
        -webkit-transform: translateY(7.5rem) translateX(-50%);
        -moz-transform: translateY(7.5rem) translateX(-50%);
        -o-transform: translateY(7.5frem) translateX(-50%);
        transform: translateY(7.5rem) translateX(-50%)
    }

    .viz-topbar .logo {
        -webkit-transform: translateY(0rem) translateX(50%);
        -moz-transform: translateY(0rem) translateX(50%);
        -o-transform: translateY(0frem) translateX(50%);
        transform: translateY(0rem) translateX(50%)
    }

    .en .viz-topbar .logo {
        -webkit-transform: translateY(0rem) translateX(-50%);
        -moz-transform: translateY(0rem) translateX(-50%);
        -o-transform: translateY(0frem) translateX(-50%);
        transform: translateY(0rem) translateX(-50%)
    }

    .mobile-menu-button {
        left: initial;
        right: 2rem
    }

    .en .mobile-menu-button {
        right: initial;
        left: 2rem
    }

    .about-section .about-text p {
        padding: 0 2em
    }

    .service-section {
        text-align: right
    }

    .service-list li:nth-child(2n+1) {
        text-align: right
    }

    .bigger {
        font-size: 2em
    }

    .big {
        font-size: 1.5em
    }

    .scroller-content {
        padding: 7.5rem 2rem
    }
}

@media only screen and (min-width:768px) {
    .desktop-menu {
        display: block
    }

    .top-bar {
        height: 5rem
    }

    .desktop-menu ul li {
        display: inline-block;
        line-height: 5rem;
    }

    body:not(.dark-skin) .desktop-menu ul li.sence1Logo {
        display: block
    }

    body:not(.dark-skin) .desktop-menu ul li.otherLogo {
        display: none
    }

    .mobile-menu-button {
        display: none
    }

    .logo {
        margin: 2rem;
        right: 0;
        -webkit-transform: translateY(7.5rem);
        -moz-transform: translateY(7.5rem);
        -o-transform: translateY(7.5frem);
        transform: translateY(7.5rem)
    }

    .en .logo {
        margin: 2rem;
        left: 0;
        -webkit-transform: translateY(7.5rem);
        -moz-transform: translateY(7.5rem);
        -o-transform: translateY(7.5frem);
        transform: translateY(7.5rem)
    }

    .bigger {
        font-size: 2.5em
    }

    .scroller-content {
        padding: 7.5rem 2rem
    }

    .service-list {
        padding: 0 3em
    }

    .big {
        font-size: 2em
    }

    .about-section .about-text p {
        padding: 0 5em
    }

    .contact-section {
        text-align: left
    }

        .contact-section .locationInfo {
            text-align: right
        }

    .location-info {
        margin-top: 0
    }

    .kazan {
        right: 0%;
        -webkit-transform: translateY(-50%) translateX(0%);
        -moz-transform: translateY(-50%) translateX(0%);
        -o-transform: translateY(-50%) translateX(0%);
        transform: translateY(-50%) translateX(0%);
        font-size: 9em
    }

    .wedown {
        font-size: 9em
    }
}

@media only screen and (min-width:992px) {
    .scroller-content {
        padding: 7.5rem 2rem
    }

    .service-list {
        padding: 0 5em
    }

    .kazan {
        right: 0%;
        -webkit-transform: translateY(-50%) translateX(0%);
        -moz-transform: translateY(-50%) translateX(0%);
        -o-transform: translateY(-50%) translateX(0%);
        transform: translateY(-50%) translateX(0%);
        font-size: 9em
    }
}

@media only screen and (min-width:1024px) {
    .bigger {
        font-size: 2.8em
    }

    .big {
        font-size: 2em
    }
}

@media only screen and (min-width:1200px) {
    .scroller-content {
        padding: 7.5rem 0rem
    }

    .service-list {
        padding: 0 5em
    }

    .kazan {
        font-size: 12em
    }

    .wedown {
        font-size: 12em
    }
}

@media only screen and (min-width:1400px) {
    .kazan {
        font-size: 15em
    }

    .wedown {
        font-size: 15em
    }
}

@media only screen and (min-width:1500px) {
    .kazan {
        font-size: 20em
    }

    .wedown {
        font-size: 20em
    }
}

.menu ul {
    padding: 0
}

.menu .scroller-content {
    background-color: #f4f7f6
}

.menu ul li {
    padding: 1rem 1rem;
    text-align: center;
    list-style-type: none
}

    .menu ul li a {
        color: #000
    }

.desktop-menu a.selected, .menu a.selected {
    color: #fff;
    background-color: #26cb70;
    pointer-events: none;
    padding: 0 1rem;
    border-radius: 25px
}

.close_topBar {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 2rem;
    text-align: center;
    font-size: 2rem;
    cursor: pointer
}

    .close_topBar i {
        padding: 1rem;
        pointer-events: none;
        pointer-events: none;
        display: inline-block;
        background: #003968;
        color: #fff
    }

        .close_topBar i:hover {
            color: #003968;
            background: #fff
        }

.shadow-layer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.7);
    box-sizing: border-box;
    z-index: 100;
    display: none;
    opacity: 0;
    transition: all .3s ease-in-out
}

    .shadow-layer.active {
        display: block
    }

    .shadow-layer.show {
        opacity: 1
    }

.topBar {
    position: absolute;
    top: 0%;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    display: none;
    opacity: 0;
    transition: all .3s ease-in-out
}

    .topBar.active {
        display: block
    }

    .topBar.show {
        opacity: 1
    }

    .topBar.categoryPNL, .topBar.tagsPNL {
        background: #fff
    }

.info-ul li:nth-child(1) {
    border: none;
    padding: 0 1rem
}

.info-ul li {
    border: none;
    padding: 0 .5rem;
    float: left
}

.menu li:hover ul.submenu {
    display: block
}

.menu ul.submenu {
    display: block;
    text-align: center;
    display: none
}

    .menu ul.submenu li {
        float: none;
        clear: both;
        margin: 0;
        padding: .5rem 6rem;
        background-color: #fff;
        white-space: nowrap
    }

        .menu ul.submenu li a, .menu ul.submenu li a:visited {
            color: #000
        }

            .menu ul.submenu li a.level2 {
                color: #18ba60;
            }

li:hover ul.submenu {
    display: block;
    flex-direction: row;
    display: flex;
    /* padding: 1rem; */
    box-sizing: border-box;
}

ul.submenu ul.submenu {
    position: relative;
    flex-direction: column;
}

ul.submenu {
    display: inline-block;
    text-align: right;
    position: absolute;
    /* left:50%; */
    /* transform:translateX(-50%); */
    padding: 0rem;
    display: none;
    z-index: 2;
}

    ul.submenu li {
        float: none;
        clear: both;
        margin: 0;
        padding: 0rem 2rem;
        background-color: #fff;
        white-space: nowrap;
        /* border: 1px solid #E6EAEA; */
        border-top: none;
        line-height: 1rem;
    }

        ul.submenu li a, ul.submenu li a:visited {
            color: #000
        }

.mobile-menu {
    display: block
}

.desktop-menu {
    display: none
}

@media only screen and (min-width:600px) {
    .desktop-menu {
        display: block
    }

    .mobile-menu {
        display: none
    }
}

.page-share, #pageSummery {
    display: none;
    padding: 0
}

.sence3 .logo, .sence3 .nobka-share {
    color: #4c4c4c
}

.sence3 .btn {
    border: 1px solid
}

h2 span.pt {
    color: #B0976D;
    font-size: .5em;
    margin-bottom: .5em;
    text-transform: uppercase;
    display: block
}

.lazyLoadContainer .loadEl {
    opacity: 0
}

.lazyLoadContainer .loading {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 7em auto;
    background-color: #f3f5f9;
    background-image: url(../file/image/app/loading.png);
    background-position: center;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    opacity: 1;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out
}

.lazyLoadContainer.loaded .loadEl img, .lazyLoadContainer.loaded .loadEl video {
    opacity: 1
}

.lazyLoadContainer.loaded .loadEl {
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-name: lazyLoadAnimation;
    animation-timing-function: ease-in-out;
    opacity: 1
}

.lazyLoadContainer.loaded .loading {
    opacity: 0
}

@-webkit-keyframes lazyLoadAnimation {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes lazyLoadAnimation {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.floatBox-card {
    position: absolute
}

.layer.shadow-back {
    background: -moz-radial-gradient(center,ellipse cover,rgba(34,38,41,.6) 0%,rgba(34,38,41,1) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#a6000000',GradientType=1)
}

.layer.shadow-green {
    background: rgba(0,0,0,.4);
    background: -moz-radial-gradient(center,ellipse cover,rgba(34,38,41,.6) 0%,rgba(34,38,41,1) 95%);
    background: -webkit-radial-gradient(center,ellipse cover,rgba(34,38,41,.6) 0%,rgba(34,38,41,1) 95%);
    background: radial-gradient(ellipse at center,rgba(34,38,41,.6) 0%,rgba(34,38,41,.8) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#a6000000',GradientType=1)
}

.btn {
    position: relative
}

    .btn.btn-green {
        position: relative;
        box-shadow: 0 17px 50px 0 rgba(0,0,0,.1),0 12px 15px 0 rgba(0,0,0,.1);
        border-radius: 25px;
        overflow: hidden
    }

    .btn::before, .btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1
    }

    .btn.btn-green::before {
        opacity: 1;
        background: linear-gradient(to left,#71B280,#134E5E)
    }

    .btn.btn-green::after {
        opacity: 0;
        -webkit-transition: opacity .35s;
        -moz-transition: opacity .35s;
        -o-transition: opacity .35s;
        transition: opacity .35s;
        background: linear-gradient(to right,#71B280,#134E5E)
    }

    .btn.btn-green:hover::after {
        opacity: 1
    }

.background, .background .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.video-cover {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: "object-fit: cover;"
}

.intro {
    background: rgb(91,196,186);
    background: #fff
}

    .intro .background .layer.back-img {
        background-image: url(../file/image/tehran-iran.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat
    }

    .intro .layer.shadow-green {
        opacity: .8
    }

.scrollToNext a {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,0%);
    -o-transform: translate(0,0%);
    transform: translate(0,0%);
    color: #fff;
    font: normal 400 20px/1 'Josefin Sans',sans-serif;
    letter-spacing: .1em;
    text-decoration: none;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s
}

    .scrollToNext a:hover {
        opacity: .5
    }

.scrollToNext a {
    padding-top: 80px
}

    .scrollToNext a span {
        position: absolute;
        top: 0;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-left: -12px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: rotate(-45deg) scale(.6);
        -moz-transform: rotate(-45deg) scale(.6);
        -o-transform: rotate(-45deg) scale(.6);
        transform: rotate(-45deg) scale(.6);
        -webkit-animation: sdb07 2s infinite;
        animation: sdb07 2s infinite;
        opacity: 0;
        box-sizing: border-box
    }

        .scrollToNext a span:nth-of-type(1) {
            -webkit-animation-delay: 0s;
            animation-delay: 0s
        }

        .scrollToNext a span:nth-of-type(2) {
            top: 16px;
            -webkit-animation-delay: .15s;
            animation-delay: .15s
        }

        .scrollToNext a span:nth-of-type(3) {
            top: 26px;
            -webkit-animation-delay: .3s;
            animation-delay: .3s
        }

@-webkit-keyframes sdb07 {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes sdb07 {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.intro .title {
    position: absolute;
    -webkit-transform: translateY(-70%);
    -moz-transform: translateY(-70%);
    -o-transform: translateY(-70%);
    transform: translateY(-70%);
    top: 50%;
    width: 100%;
    left: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-right: 4em;
    color: #fff
}

    .intro .title h1 {
        line-height: initial;
        color: inherit;
        text-shadow: none;
        text-align: center;
        font-weight: 500
    }

    .intro .title img {
        max-width: 7em;
        width: 100%
    }

    .intro .title p {
        color: inherit;
        text-align: center
    }

.slider-section {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    text-align: center
}

    .slider-section .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-transition: transform .6s cubic-bezier(.165,.84,.44,1) .2s;
        -moz-transition: transform .6s cubic-bezier(.165,.84,.44,1) .2s;
        -o-transition: transform .6s cubic-bezier(.165,.84,.44,1) .2s;
        transition: transform .6s cubic-bezier(.165,.84,.44,1) .2s;
        -webkit-transform: translate(100%,0);
        -moz-transform: translate(100%,0);
        -o-transform: translate(100%,0);
        transform: translate(100%,0);
        z-index: 1;
        overflow: hidden
    }

        .slider-section .slide.active {
            -webkit-transform: translate(0,0);
            -moz-transform: translate(0,0);
            -o-transform: translate(0,0);
            transform: translate(0,0)
        }

        .slider-section .slide.current {
            z-index: 2
        }

    .slider-section .slide-bg-panel {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-transition: transform .6s cubic-bezier(.165,.84,.44,1) .2s;
        -moz-transition: transform .6s cubic-bezier(.165,.84,.44,1) .2s;
        -o-transition: transform .6s cubic-bezier(.165,.84,.44,1) .2s;
        transition: transform .6s cubic-bezier(.165,.84,.44,1) .2s;
        -webkit-transform: translate(-100%,0);
        -moz-transform: translate(-100%,0);
        -o-transform: translate(-100%,0);
        transform: translate(-100%,0)
    }

    .slider-section .slide.active .slide-bg-panel {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0)
    }

    .slider-section .slide.show .slide-content h2, .slider-section .slide.show .slide-content p, .slider-section .slide.show .slide-content a {
        opacity: 1
    }

    .slider-section .slide .slide-bg-panel {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1
    }

        .slider-section .slide .slide-bg-panel:before {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 2;
            content: "";
            background-color: rgba(10,20,50,.5);
            opacity: 1
        }

        .slider-section .slide .slide-bg-panel img {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            z-index: 1
        }

            .slider-section .slide .slide-bg-panel img.obj-fill-h {
                height: 100%;
                width: auto
            }

            .slider-section .slide .slide-bg-panel img.obj-fill-w {
                width: 100%;
                height: auto
            }

    .slider-section .slide .slide-content {
        position: absolute;
        display: inline-block;
        bottom: 7.5rem;
        right: 0rem;
        padding: 7.5rem 2rem;
        width: 100%;
        z-index: 1;
        color: #fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

.en .slider-section .slide .slide-content {
    left: 0rem
}

.slider-section .slide .slide-content h2 {
    opacity: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s
}

.slider-section .slide .slide-content p {
    display: none;
    opacity: 0;
    -webkit-transition: all .5s .1s;
    -moz-transition: all .5s .1s;
    -o-transition: all .5s .1s;
    transition: all .5s .1s;
    margin-bottom: 2em
}

.slider-section .slide .slide-content a {
    opacity: 0;
    color: #fff;
    -webkit-transition: all .5s .2s;
    -moz-transition: all .5s .2s;
    -o-transition: all .5s .2s;
    transition: all .5s .2s
}

.slider-progressBar {
    position: absolute;
    height: 2px;
    width: 80%;
    bottom: 10em;
    right: 50%;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%);
    z-index: 5;
    max-width: 500px
}

    .slider-progressBar button {
        background: transparent;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid;
        color: #fff;
        border-radius: 50%;
        padding: 0
    }

.progressBar {
    height: 2px;
    position: absolute;
    background: rgba(255,255,255,.4);
    z-index: 5;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.slider-control {
    left: 0;
    right: initial;
    top: 100%;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%)
}

.en .slider-control {
    direction: rtl;
    right: 0;
    left: initial
}

.slider-counter {
    position: absolute;
    right: 0;
    left: initial;
    top: 50%;
    color: #fff;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    direction: ltr;
    opacity: .8;
    display: none
}

    .slider-counter label {
        color: inherit
    }

.en .slider-counter {
    left: 0;
    right: initial
}

.slider-progressBar .progress {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
    position: absolute;
    height: 4px;
    top: -1px;
    right: 0;
    left: initial;
    width: 0;
    background: #00C9FF;
    background: -webkit-linear-gradient(to right,#92FE9D,#00C9FF);
    background: linear-gradient(to right,#92FE9D,#00C9FF)
}

.en .slider-progressBar .progress {
    left: 0;
    right: initial
}

.slider-progressBar .progress.anim {
    -webkit-animation: progress-fill 5s 1 ease-in-out;
    -moz-animation: progress-fill 5s 1 ease-in-out;
    -o-animation: progress-fill 5s 1 ease-in-out;
    animation: progress-fill 5s 1 ease-in-out;
}

@-webkit-keyframes progress-fill {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

.activity a img {
    max-width: 100%
}

.contact-section {
    color: #fffefe;
    text-align: center
}

    .contact-section .background {
        top: 0;
        z-index: -1;
        opacity: 1;
        width: 50%;
        left: 0
    }

    .contact-section .scroller-wrapper {
        display: block
    }

    .contact-section .map-container {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        top: 0;
        left: 0
    }

    .contact-section.mapview .map-container {
        pointer-events: initial
    }

    .contact-section .close-map {
        background: rgba(19,206,102,.85);
        z-index: 1;
        position: absolute;
        width: 3em;
        height: 3em;
        top: 6em;
        right: 6em;
        cursor: pointer;
        display: none
    }

    .contact-section.mapview .close-map {
        display: block
    }

    .contact-section .contact-title p {
        font-size: 1em;
        margin: 0;
        font-weight: 400;
        max-width: 80%;
        color: rgba(0,0,0,.6)
    }

    .contact-section h2 {
        margin-bottom: 5px
    }

.contactInfo a {
    font-weight: 400;
    margin-bottom: 5px
}

.contactInfo ul li {
    display: inline-block;
    border-radius: 50%;
    margin: 5px
}

    .contactInfo ul li a {
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-align: center;
        color: #eee;
        opacity: 1
    }

        .contactInfo ul li a:hover {
            color: #fff
        }

.contact-section strong {
    font-weight: 400;
    font-weight: 500;
    font-size: 1.1em;
    border-bottom: 1px solid #efefef;
    display: block;
    margin-bottom: 1em;
    padding-bottom: .4em
}

.contact-frm .btn {
    color: rgba(19,206,102,1);
    margin-top: 1em;
    border-radius: 0;
    opacity: 1
}

    .contact-frm .btn:hover {
        background-color: rgba(19,206,102,1);
        color: #fff
    }

.contact-frm input[type=text], .contact-frm textarea {
    max-width: 100%;
    width: 100%;
    display: block;
    color: #fff;
    width: 100%;
    background-color: rgba(0,0,0,.1);
    opacity: .8;
    border: none;
    max-width: 100%;
    line-height: 4rem;
    height: 4rem;
    margin-top: 1rem;
    padding-left: 45px;
    padding-right: 10px;
    box-sizing: border-box
}

.contact-frm label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 1rem;
    right: 0;
    transition: all .3s;
    font-size: 1em
}

.contact-frm input[type=text]:focus + label, .contact-frm textarea:focus + label, .contact-frm input[type=text].filled + label, .contact-frm textarea.filled + label {
    top: 0%
}

.contact-frm input[type=text]:hover, .contact-frm textarea:hover {
    background: rgba(0,0,0,.2)
}

.location-info {
    display: table;
    width: 100%;
    height: 100%;
    margin-top: 2em
}

.wedown {
    font-size: 8em;
    line-height: 1em
}

.contact-section {
    background-color: #fff
}

    .contact-section .title h1 {
        margin-bottom: 1em
    }

.contact-panel {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    display: none;
    z-index: 1000
}

    .contact-panel.active {
        display: block
    }

    .contact-panel .contact-title {
        color: #fff;
        font-size: 1.2em;
        padding: .5em 10px 1em;
        display: block;
        text-align: center
    }

.contact-panel {
    color: #000;
    text-align: right
}

.contact-frm input[type=text] {
    padding: 0 .5em
}

.contact-frm input[type=text], .contact-frm textarea {
    max-width: 100%;
    width: 100%;
    display: block;
    color: #fff
}

.contact-panel .contact-panel-shadow {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.85);
    opacity: 0;
    -webkit-transition: all .2s 0s;
    -moz-transition: all .2s 0s;
    -o-transition: all .2s 0s;
    transition: all .2s 0s;
    pointer-events: none;
    z-index: 99
}

.contact-panel.show .contact-panel-shadow {
    opacity: 1
}

.btn.btn_contact {
    color: #11cc7a;
    background-color: #FFF;
    width: 100%
}

    .btn.btn_contact:hover {
        background-color: #f5f5f5
    }

.contact-wizard {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
    color: #FFF;
    display: none
}

    .contact-wizard .title {
        text-align: center;
        background-color: #11cc7a;
        opacity: 0;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s
    }

        .contact-wizard .title p {
            text-align: center
        }

    .contact-wizard::before {
        content: "";
        position: absolute;
        background-color: #11cc7a;
        -webkit-transition: all .3s .3s;
        -moz-transition: all .3s .3s;
        -o-transition: all .3s .3s;
        transition: all .3s .3s;
        bottom: 4.5rem;
        left: 4.5rem;
        width: 5rem;
        height: 5rem;
        pointer-events: none;
        border-radius: 50%;
        -webkit-transform: translate(-50%,50%);
        -moz-transform: translate(-50%,50%);
        -o-transform: translate(-50%,50%);
        transform: translate(-50%,50%)
    }

.en .contact-wizard::before {
    right: 4.5rem;
    left: initial
}

.contact-wizard .scroller-content {
    padding-bottom: 0
}

.contact_back {
    padding: .5em;
    cursor: pointer;
    display: inline-block
}

    .contact_back i {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
        display: inline-block;
        font-size: 1.5em;
        pointer-events: none
    }

.en .contact_back i {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
}

.contact_back:hover i {
    color: rgba(0,0,0,.5)
}

.contact-frm label {
    color: inherit
}

.contact-frm .btn {
    width: initial
}

.contact-wizard.rgl-dlg #message_dailog {
    opacity: 1;
    pointer-events: initial
}

.contact-wizard.dvlpr-dlg #developer_dailog {
    opacity: 1;
    pointer-events: initial
}

.contact-wizard.strtp-dlg #startup_dailog {
    opacity: 1;
    pointer-events: initial
}

.contact-wizard.captcha-dlg #captcha {
    opacity: 1;
    pointer-events: initial
}

.contact-wizard.active {
    display: block
}

.contact-wizard.open .title {
    opacity: 1;
    -webkit-transition: all .3s .3s;
    -moz-transition: all .3s .3s;
    -o-transition: all .3s .3s;
    transition: all .3s .3s
}

.contact-wizard.open::before {
    bottom: 50%;
    left: 50%;
    margin: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

@media screen and (orientation:portrait) {
    .contact-wizard.open::before {
        width: 200vh;
        height: 200vh
    }
}

@media screen and (orientation:landscape) {
    .contact-wizard.open::before {
        width: 200vw;
        height: 200vw
    }
}

.contact-wizard .title {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    max-height: 100%;
    display: table
}

    .contact-wizard .title > div {
        padding: 0rem 2rem
    }

    .contact-wizard .title a {
        color: inherit
    }

.contactForm {
    margin: 2rem;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1005;
    -webkit-transition: z-index 0s,-webkit-transform .3s;
    -moz-transition: z-index 0s,-webkit-transform .3s;
    -o-transition: z-index 0s,transform .3s;
    transition: z-index 0s,transform .3s,-webkit-transform .3s;
    -webkit-tap-highlight-color: transparent
}

.en .contactForm {
    left: initial;
    right: 0
}

.contact_button.active {
    color: #11cc7a;
    background-color: #FFF
}

.contact_button {
    color: #FFF;
    background: linear-gradient(90deg,#70d467,#6fbbfa);
    padding: 0;
    margin: 0;
    width: 5rem;
    height: 5rem;
    font-size: 2.5em;
    line-height: 1rem;
    position: relative;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    -webkit-transition: color .3s,background-color .3s,visibility 0s,opacity 0s,-webkit-box-shadow .3s;
    -moz-transition: color .3s,background-color .3s,visibility 0s,opacity 0s,-webkit-box-shadow .3s;
    -o-transition: color .3s,background-color .3s,box-shadow .3s,visibility 0s,opacity 0s;
    transition: color .3s,background-color .3s,box-shadow .3s,visibility 0s,opacity 0s,-webkit-box-shadow .3s
}

    .contact_button::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        content: '';
        width: 100%;
        height: 100%;
        box-shadow: 0 0 0 0 rgba(255,255,255,.15);
        border-radius: 100%;
        opacity: 0;
        -webkit-animation: sdb03 3s infinite;
        animation: sdb03 3s infinite;
        box-sizing: border-box
    }

@-webkit-keyframes sdb03 {
    0% {
        opacity: 1
    }

    30% {
        opacity: 1
    }

    60% {
        box-shadow: 0 0 0 60px rgba(255,255,255,.15);
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes sdb03 {
    0% {
        opacity: 0
    }

    30% {
        opacity: 1
    }

    60% {
        box-shadow: 0 0 0 60px rgba(255,255,255,.15);
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.contact_button i {
    pointer-events: none
}

.service-section {
    text-align: center;
    background: #f4f7f6;
    color: #fff
}

    .service-section .title {
        color: rgba(34,38,41,1)
    }

        .service-section .title p {
            font-size: 1.3em;
            text-align: center
        }

.service-list {
    padding: 0
}

    .service-list .lazyLoadContainer {
        border: 2px solid;
        text-align: center;
        padding: 0
    }

    .service-list a {
        color: inherit;
        display: block;
        padding-top: 56.5%;
        position: relative;
        overflow: hidden
    }

    .service-list video {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
        background: #000
    }

    .service-list a h3 {
        color: inherit;
        width: 100%;
        padding: 0;
        text-align: center;
        font-size: 1.5em;
        text-transform: uppercase;
        margin: 0;
        position: absolute;
        padding: 1em;
        box-sizing: border-box;
        top: 50%;
        z-index: 2;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .service-list a::before {
        content: "";
        position: absolute;
        background-color: rgba(0,0,0,.4);
        display: block;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 1;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out
    }

    .service-list a:hover::before {
        opacity: 0
    }

.about-section {
    background: #fff;
    color: #fff
}

    .about-section .layer img {
        display: block;
        max-width: 100%;
        object-fit: cover;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        position: absolute
    }

    .about-section h1 {
        margin-top: 0;
        padding-bottom: 0
    }

    .about-section .about-text p {
        color: #fff;
        margin: 0 auto 0;
        padding: 0
    }

    .about-section .btn {
        color: inherit;
        border: 1px solid
    }

.nobka-share {
    color: #fff;
    text-align: right;
    font-size: 12px;
    height: 2em;
    line-height: 2em;
    position: fixed;
    z-index: 90;
    left: 1em;
    bottom: 1em;
    margin: 0;
    display: inline-block;
    white-space: nowrap
}

.copyright {
    color: #fff;
    text-align: right;
    font-size: 12px;
    height: 2em;
    line-height: 2em;
    position: fixed;
    z-index: 90;
    right: 1em;
    bottom: 2em;
    margin: 0;
    display: inline-block;
    white-space: nowrap
}

    .copyright .copyright-text {
        display: none
    }

        .copyright .copyright-text a {
            color: inherit
        }

    .copyright .copyright-open {
        display: block;
        font-size: 1.3em
    }

    .copyright:hover .copyright-text {
        display: block
    }

    .copyright:hover .copyright-open {
        display: none
    }

.dark-skin .copyright, .dark-skin .nobka-share {
    color: #222629
}

.menuEnable .copyright {
    display: block;
    width: 100%
}

    .menuEnable .copyright .copyright-text {
        text-align: center !important;
        color: #fff !important;
        opacity: .6 !important;
        display: block
    }

    .menuEnable .copyright .copyright-open {
        display: none !important
    }

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.partner-section {
    background-color: #f4f7f6
}

    .partner-section .ceo {
        display: table-row
    }

        .partner-section .ceo > div {
            display: table;
            min-height: 100%;
            width: 100%
        }

            .partner-section .ceo > div > div {
                display: table-cell;
                vertical-align: middle
            }

        .partner-section .ceo .nobka_ceo {
            font-size: 1.2em;
            padding: 1em 1em;
            border-bottom: 1px solid #e7edf1
        }

            .partner-section .ceo .nobka_ceo:nth-last-child(1) {
                border-bottom: 0
            }

            .partner-section .ceo .nobka_ceo div:nth-child(1) {
                font-size: 1em;
                display: block;
                line-height: 1em;
                margin-bottom: 1em;
                font-weight: 500
            }

            .partner-section .ceo .nobka_ceo div:nth-child(2) {
                font-size: .8em;
                color: #8b99a2;
                font-weight: 300;
                text-align: justify
            }

    .partner-section .dt {
        display: table
    }

    .partner-section .title {
        color: #1e2022;
        height: 100%
    }

        .partner-section .title h2 {
            margin-bottom: .4em
        }

            .partner-section .title h2 a {
                color: inherit
            }

.pcmp {
    text-align: center
}

    .pcmp .container {
        border-top: 1px solid #e7edf1;
        border-right: 1px solid #e7edf1
    }

        .pcmp .container .panel {
            padding: 0
        }

    .pcmp .panel > div {
        border-left: 1px solid #e7edf1;
        border-bottom: 1px solid #e7edf1;
        position: relative
    }

    .pcmp a {
        display: inline-block;
        margin: 1em;
        position: relative;
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        text-align: center
    }

        .pcmp a img {
            height: 4rem;
            -webkit-filter: grayscale(1);
            -moz-filter: grayscale(1);
            filter: grayscale(1);
            -moz-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%)
        }

        .pcmp a:hover img {
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            filter: grayscale(0)
        }

.btn.btn_default {
    border: 1px solid
}

.projectintro-section {
    background-color: #fff
}

.project-section .title {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: table;
    width: 100%;
    z-index: 2
}

.project-section.showroom .title {
    opacity: 0;
    pointer-events: none
}

.project-section .title .layer {
    position: absolute;
    width: 100%;
    height: 100%
}

    .project-section .title .layer video {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        font-family: "object-fit: cover;"
    }

.project-section .title > .container {
    display: table-cell;
    vertical-align: middle
}

.projectintro-section .statics {
    text-align: center
}

    .projectintro-section .statics p {
        display: inline-block;
        padding: 1em 2em
    }

    .projectintro-section .statics .bigger {
        margin: 0;
        line-height: 1em;
        text-align: center
    }

        .projectintro-section .statics .bigger strong {
            font-size: 5em;
            display: block;
            line-height: 1em;
            font-weight: 500;
            color: #fff
        }

        .projectintro-section .statics .bigger small {
            line-height: 1em;
            color: #fff
        }

        .projectintro-section .statics .bigger:nth-child(1) {
            margin: 0 0 .2em 0
        }

.projectintro-section .product-about {
    color: #fff;
    display: block
}

    .projectintro-section .product-about h2 {
        margin-bottom: .4em
    }

    .projectintro-section .product-about p {
        color: #fff;
        margin: 2em auto
    }

.projectintro-section .title h2 a {
    color: inherit
}

.work-category {
    margin-top: 6em;
    padding: 1em
}

    .work-category h4 {
        color: #222629;
        margin: 0;
        font-weight: 500
    }

    .work-category .panel div {
        margin-top: 1em
    }

    .work-category a {
        color: #222629;
        font-weight: 400
    }

.btn.btn-green {
    font-size: 1.2em;
    color: #fff;
    font-weight: 400
}

.project-section {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f4f7f6
}

.projectNumber {
    color: rgba(224,224,224,.2);
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    -webkit-transform: translate3d(0%,-50%,0);
    -moz-transform: translate3d(0%,-50%,0);
    -o-transform: translate3d(0%,-50%,0);
    transform: translate3d(0%,-50%,0);
    font-size: 1.7em;
    z-index: -1;
    pointer-events: none
}

.project-box:nth-child(2n+1) .product_describ .projectNumber {
    left: auto;
    right: 0
}

.project-box:nth-child(2n) .product_bg {
    float: right
}

.project-box:nth-child(2n+1) .product_bg {
    float: left
}

.product_bg {
    background: #fff
}

    .product_bg img {
        max-width: 100%;
        height: auto;
        width: 100%;
        display: block;
        margin: 0 auto
    }

.product-category {
    position: relative;
    display: inline-block;
    opacity: 0;
    -webkit-transform: translateY(30vh);
    -moz-transform: translateY(30vh);
    -o-transform: translateY(30vh);
    transform: translateY(30vh);
    -webkit-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.04s,opacity 1s cubic-bezier(.68,0,.265,1) 0s;
    -moz-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.04s,opacity 1s cubic-bezier(.68,0,.265,1) 0s;
    -o-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.04s,opacity 1s cubic-bezier(.68,0,.265,1) 0s;
    transition: transform 1s cubic-bezier(.68,0,.265,1) 0.04s,opacity 1s cubic-bezier(.68,0,.265,1) 0s;
    margin-bottom: 2em
}

    .product-category label {
        color: #191919;
        display: block;
        font-size: 1em
    }

        .product-category label:before {
            content: "";
            margin: 0 10px;
            width: 0;
            height: 1px;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            -webkit-transition: all 1s cubic-bezier(.68,0,.265,1) 1s;
            -moz-transition: all 1s cubic-bezier(.68,0,.265,1) 1s;
            -o-transition: all 1s cubic-bezier(.68,0,.265,1) 1s;
            transition: all 1s cubic-bezier(.68,0,.265,1) 1s;
            background-color: #191919;
            right: 100%
        }

.is-active .product-category label:before {
    width: 300px
}

#p1 .product-category label:before, #p3 .product-category label:before {
    left: 100%
}

.product_describ {
    text-align: right;
    display: table;
    margin: 0 auto;
    color: #191919;
    z-index: 1;
    font-weight: 400
}

    .product_describ > div {
        vertical-align: middle
    }

    .product_describ h2 a {
        color: inherit
    }

    .product_describ h2 {
        opacity: 0;
        -webkit-transform: translateY(30vh);
        -o-transform: translateY(30vh);
        -moz-transform: translateY(30vh);
        transform: translateY(30vh);
        -webkit-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.08s,opacity 1s cubic-bezier(.68,0,.265,1) 0.04s;
        -moz-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.08s,opacity 1s cubic-bezier(.68,0,.265,1) 0.04s;
        -o-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.08s,opacity 1s cubic-bezier(.68,0,.265,1) 0.04s;
        transition: transform 1s cubic-bezier(.68,0,.265,1) 0.08s,opacity 1s cubic-bezier(.68,0,.265,1) 0.04s
    }

        .product_describ h2 span {
            color: #B0976D
        }

.product_bg {
    z-index: 10
}

.product_describ p {
    max-width: 400px;
    margin: 1em 1em 1em auto;
    color: #696969;
    opacity: 0;
    -webkit-transform: translateY(30vh);
    -moz-transform: translateY(30vh);
    -o-transform: translateY(30vh);
    transform: translateY(30vh);
    -webkit-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.12s,opacity 1s cubic-bezier(.68,0,.265,1) 0.08s;
    -moz-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.12s,opacity 1s cubic-bezier(.68,0,.265,1) 0.08s;
    -o-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.12s,opacity 1s cubic-bezier(.68,0,.265,1) 0.08s;
    transition: transform 1s cubic-bezier(.68,0,.265,1) 0.12s,opacity 1s cubic-bezier(.68,0,.265,1) 0.08s
}

.product_describ .btn {
    display: inline-block;
    font-weight: 400;
    opacity: 0;
    -webkit-transform: translateY(30vh);
    -moz-transform: translateY(30vh);
    -o-transform: translateY(30vh);
    transform: translateY(30vh);
    -webkit-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.16s,opacity 1s cubic-bezier(.68,0,.265,1) 0.12s;
    -moz-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.16s,opacity 1s cubic-bezier(.68,0,.265,1) 0.12s;
    -o-transition: transform 1s cubic-bezier(.68,0,.265,1) 0.16s,opacity 1s cubic-bezier(.68,0,.265,1) 0.12s;
    transition: transform 1s cubic-bezier(.68,0,.265,1) 0.16s,opacity 1s cubic-bezier(.68,0,.265,1) 0.12s
}

.is-active .product_describ h2, .is-active .product_describ .btn, .is-active .product_describ p, .is-active .product_describ .product-category {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.btn {
    background-color: transparent;
    color: inherit;
    border-radius: 0;
    margin: 1em 1em
}

.product_describ {
    padding: 1em
}

.product_bg video {
    height: auto;
    width: 100%;
    max-width: 100%;
    display: block
}

.product_bg img, .product_bg video {
    cursor: pointer;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    box-shadow: 3px 7px 19.2px -6px rgba(0,0,0,.07),15px 20px 44.4px -2px rgba(0,0,0,.07),20px 42px 96px 6px rgba(0,0,0,.07),20px 42px 144px 10px rgba(0,0,0,.07);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    opacity: .5
}

.is-active .product_bg img, .is-active .product_bg video {
    opacity: 1
}

.product_describ:hover + .product_bg img, .product_describ:hover + .product_bg video {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
    box-shadow: 3px 7px 19.2px -6px rgba(0,0,0,.06),15px 20px 44.4px -2px rgba(0,0,0,.06),20px 42px 96px 6px rgba(0,0,0,.06),20px 42px 144px 10px rgba(0,0,0,.06)
}

.project-container {
    position: relative
}

.project-box {
    position: relative;
    margin: 5em 0;
    position: relative;
    z-index: 1
}

.product_describ_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0
}

    .product_describ_bg img {
        width: 100%;
        max-width: 100%;
        display: block;
        position: absolute
    }

.about-section .background, .project-section .background {
    background-color: #000
}

.floatBox-card {
    position: absolute
}

.blog-title {
    background: #fff;
    color: #3c4858
}

    .blog-title .group-post {
        padding: 6em 2em;
        padding-bottom: 40vh
    }

.single-post-title {
    padding: 6em 2em 0;
    text-align: center
}

    .single-post-title .category a {
        color: #3c4858;
        margin: 0 1px;
        font-weight: 500
    }

    .single-post-title .category label {
        pointer-events: none
    }

    .single-post-title h1, .single-post-title p {
        max-width: 550px;
        text-align: center;
        margin-left: auto;
        margin-right: auto
    }

    .single-post-title ul {
        display: inline-block;
        -webkit-transform: translateY(50%);
        -moz-transform: translateY(50%);
        -o-transform: translateY(50%);
        transform: translateY(50%);
        padding: 1em 3em;
        list-style: none;
        margin: 0;
        background: #fafbfd
    }

        .single-post-title ul li {
            float: right;
            color: #1fb6ff;
            border: 1px solid;
            margin: 5px 0 5px 10px;
            border-radius: 50%;
            opacity: .7
        }

            .single-post-title ul li:nth-last-child(1) {
                margin-left: 0
            }

            .single-post-title ul li:hover {
                opacity: 1
            }

            .single-post-title ul li a {
                color: #1fb6ff;
                display: inline-block;
                padding: 6px
            }

    .single-post-title img, .single-post-title video {
        max-width: 100%;
        min-width: 50%;
        height: auto
    }

.blog-title h1 small {
    font-size: .5em;
    color: #8492a6;
    font-weight: 400;
    display: block;
    line-height: 1em
}

.blog-title h2 {
    margin-bottom: 1em;
    font-weight: 400
}

.single-post {
    background: #fafbfd
}

.newsletter input[type=text] {
    box-shadow: inset 0 0 0 1px #e0e6ed;
    border: none
}

.newsletter .btn {
    left: 0;
    background: #1fb6ff;
    color: #fff;
    border: none;
    margin: 0;
    padding: 0 1em;
    height: 40px
}

.newsletter div {
    display: inline-block
}

    .newsletter div:nth-child(1) {
        min-width: 250px
    }

.blog-title p {
    color: #8492a6
}

.blog-posts {
    padding: .5em;
    margin: 0;
    background: #eff2f7
}

.blog-post {
    padding: 1.5em
}

    .blog-post.bilboard {
        margin-top: -40vh
    }

    .blog-post > div {
        background-color: #fff;
        position: relative;
        min-height: 100%;
        -webkit-transition: all .35s;
        -moz-transition: all .35s;
        -o-transition: all .35s;
        transition: all .35s
    }

.blog-post-image {
    padding: 0;
    padding-top: 60%;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #efefef
}

    .blog-post-image .post-share {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        padding: 0;
        margin: 0;
        z-index: 100
    }

        .blog-post-image .post-share li {
            float: right;
            list-style-type: none;
            color: #fff;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0);
            -webkit-transition-property: transform,opacity;
            -moz-transition-property: transform,opacity;
            -o-transition-property: transform,opacity;
            transition-property: transform,opacity;
            -webkit-transition-duration: .2s;
            -moz-transition-duration: .2s;
            -o-transition-duration: .2s;
            transition-duration: .2s;
            opacity: 0
        }

            .blog-post-image .post-share li a {
                color: #fff;
                text-decoration: none !important;
                font-size: 2em
            }

            .blog-post-image .post-share li:nth-child(1) {
                -webkit-transition-delay: .05s;
                -moz-transition-delay: .05s;
                -o-transition-delay: .05s;
                transition-delay: .05s
            }

            .blog-post-image .post-share li:nth-child(1) {
                -webkit-transition-delay: .1s;
                -moz-transition-delay: .1s;
                -o-transition-delay: .1s;
                transition-delay: .1s
            }

            .blog-post-image .post-share li:nth-child(1) {
                -webkit-transition-delay: .15s;
                -moz-transition-delay: .15s;
                -o-transition-delay: .15s;
                transition-delay: .15s
            }

            .blog-post-image .post-share li:nth-child(1) {
                -webkit-transition-delay: .2s;
                -moz-transition-delay: .2s;
                -o-transition-delay: .2s;
                transition-delay: .2s
            }

    .blog-post-image:hover .post-share li {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    .blog-post-image img, .blog-post-image video {
        min-height: 100%;
        min-width: 100%;
        width: 100%;
        height: auto;
        position: absolute;
        -webkit-transition: transform .35s,opacity .35s;
        -moz-transition: transform .35s,opacity .35s;
        -o-transition: transform .35s,opacity .35s;
        transition: transform .35s,opacity .35s;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        top: 50%;
        left: 50%;
        opacity: 0;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%)
    }

.blog-post-content {
    padding: 0em 2em 2em;
    background: white;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

    .blog-post-content label {
        font-size: 1em
    }

    .blog-post-content h3 {
        color: rgba(34,38,41,1);
        font-weight: 400;
        margin: 0em;
        text-align: right
    }

        .blog-post-content h3 a {
            color: inherit
        }

.news-post-readmore {
    color: #000;
    font-weight: 400
}

.news-post-content .news-title {
    padding: 5px 0 0
}

.news-title p {
    margin: 5px 0 0;
    color: #666
}

.blog-post-image:hover img, .blog-post-image:hover video {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.5);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1.5);
    -o-transform: translateX(-50%) translateY(-50%) scale(1.5);
    transform: translateX(-50%) translateY(-50%) scale(1.5);
    opacity: 1
}

.blog-post-image a.poster-link::before {
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    background: rgba(19,206,102,.9);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-transition: opacity .35s;
    -moz-transition: opacity .35s;
    -o-transition: opacity .35s;
    transition: opacity .35s
}

.post-category {
    padding: 0 1em;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    z-index: 500
}

.bilboard .post-category {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
    padding: 0;
    margin: 1em 0 1.5em
}

.post-category a {
    background: rgb(19,206,102);
    padding: 1px 2px;
    color: #fff;
    display: inline-block;
    font-size: 1em;
    text-decoration: none !important
}

    .post-category a label {
        font-size: inherit;
        color: inherit;
        pointer-events: none
    }

.blog-post-image:hover a.poster-link::before {
    opacity: 1
}

.blog-share {
    padding: 0;
    margin: 0
}

    .blog-share li {
        list-style: none;
        padding: 1em .5em;
        display: inline-block;
        border-bottom: none;
        color: #222629
    }

        .blog-share li:nth-last-child(1) {
            border-bottom: none
        }

        .blog-share li a {
            color: inherit
        }

.blog-post-content h1 a, .news-post-content h1 a {
    color: inherit
}

.blog-post-content p {
    color: #000
}

.post-publisher-info {
    color: #333;
    font-weight: 400;
    font-size: 1em
}

    .post-publisher-info strong {
        font-size: 1em
    }

    .post-publisher-info span {
        color: #666
    }

.blog-post-readmore {
    width: 100%;
    padding: .4em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #e0e6ed;
    color: #3c4858;
    display: block;
    text-decoration: none !important;
    font-size: 1.2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

    .blog-post-readmore:active, .blog-post-readmore:visited {
        color: #3c4858
    }

    .blog-post-readmore:hover {
        background: #13ce66;
        color: #fff;
        border-color: #13ce66
    }

.tags a {
    color: #4a4f56;
    background: #e2e5e7;
    padding: 5px
}

    .tags a span {
        white-space: nowrap
    }

.btn.btn_default, .btn.btn_default:visited {
    border: none;
    background: #18ba60;
    color: #fff
}

    .btn.btn_default:hover {
        border: none;
        background: #fff;
        color: #18ba60
    }

.blog-footer {
    background-color: #29282e;
    color: #fff;
    z-index: 10;
    position: relative;
    box-sizing: border-box
}

    .blog-footer ul {
        display: inline-block;
        list-style: none;
        padding: 0
    }

    .blog-footer h3 {
        font-weight: 500;
        color: #fff
    }

    .blog-footer ul li {
        color: #757575;
        margin: 5px 0 5px 0
    }

        .blog-footer ul li:nth-last-child(1) {
            margin-left: 0
        }

        .blog-footer ul li:hover {
            opacity: .8
        }

    .blog-footer a:not(.btn), .blog-footer a:not(.btn):visited {
        color: #757575;
        display: inline-block;
        padding: 3px
    }

    .blog-footer a:hover {
        color: #13ce66
    }

.blog-section .blog-post > div {
    height: 100%;
    min-height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.news-post .blog-post-image {
    width: 14em;
    height: 14em;
    padding: 0;
    padding-top: 0;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    position: relative
}

.news-post .news-post-content {
    text-align: center
}

.news-post .blog-post-image img, .news-post .blog-post-image video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.news-post .news-post-content h2, .news-post .news-post-content p {
    text-align: center
}

.events-section {
    background-color: #e5e5e5;
    color: #231f20
}

    .events-section article > a {
        background-color: #fff;
        color: #231f20;
        text-decoration: none
    }

        .events-section article > a:hover {
            color: #fff;
            background-color: #231f20
        }

    .events-section article .event-title {
        text-align: center
    }

    .events-section article .image-panel {
        text-align: center
    }

    .events-section article {
        position: relative
    }

        .events-section article .event-title {
            position: relative;
            z-index: 1;
            font-weight: 500
        }

        .events-section article .event-text {
            text-align: center;
            color: #8b99a2;
            font-weight: 400
        }

@media only screen and (min-width:500px) {
    h1 span {
        display: block
    }

    .btn.btn_contact {
        width: initial
    }
}

@media only screen and (min-width:600px) {
    .service-section {
        text-align: start
    }

    .service-list li:nth-child(2n+1) {
        text-align: right
    }

    .about-section .layer video {
        display: block
    }

    .about-section .layer img {
        display: none
    }
}

@media only screen and (min-width:768px) {
    .about-section h1 {
        margin-top: 0;
        padding-bottom: 3rem
    }

    .contact-wizard .title > div {
        padding: 0 7.5rem
    }

    .slider-section {
        text-align: initial
    }

        .slider-section .slide .slide-content {
            max-width: 600px;
            bottom: 11em;
            padding: 0
        }

    .slider-control {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .progressBar {
        right: 50px;
        left: 90px
    }

    .en .progressBar {
        left: 50px;
        right: 90px
    }

    .slider-progressBar {
        right: 8em;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%)
    }

    .en .slider-progressBar {
        left: 8em;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%)
    }

    .slider-counter {
        display: inline-block
    }

    .slider-section .slide .slide-content p {
        display: block
    }

    .en .slider-section .slide .slide-content {
        left: 7.5em
    }

    .page-share, #pageSummery {
        display: block
    }

    .location-info {
        margin-top: 0
    }

    .kazan {
        right: 0%;
        -webkit-transform: translateY(-50%) translateX(0%);
        -moz-transform: translateY(-50%) translateX(0%);
        -o-transform: translateY(-50%) translateX(0%);
        transform: translateY(-50%) translateX(0%);
        font-size: 9em
    }

    .wedown {
        font-size: 9em
    }
}

@media only screen and (min-width:992px) {
    .kazan {
        right: 0%;
        -webkit-transform: translateY(-50%) translateX(0%);
        -moz-transform: translateY(-50%) translateX(0%);
        -o-transform: translateY(-50%) translateX(0%);
        transform: translateY(-50%) translateX(0%);
        font-size: 9em
    }
}

@media only screen and (min-width:1200px) {
    .kazan {
        font-size: 12em
    }

    .wedown {
        font-size: 12em
    }
}

@media only screen and (min-width:1400px) {
    .kazan {
        font-size: 15em
    }

    .wedown {
        font-size: 15em
    }
}

@media only screen and (min-width:1500px) {
    .kazan {
        font-size: 20em
    }

    .wedown {
        font-size: 20em
    }
}

.borderEl {
    color: #fff
}

.dark-skin .borderEl {
    color: #8b99a2
}

.partner-section .scroller-content {
    padding-bottom: 0rem
}

.message-form .textbox, .message-form input[type=text], .message-form select, .message-form input[type=number], .message-form textarea {
    background: none;
    outline: none;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 400px;
    margin: 0;
    color: #fff;
    background: #179850;
    border-radius: 5px
}

    .message-form .textbox::-webkit-input-placeholder, .message-form input[type=text]::-webkit-input-placeholder, .message-form input[type=number]::-webkit-input-placeholder, .message-form textarea::-webkit-input-placeholder {
        color: #fff
    }

    .message-form .textbox::-moz-input-placeholder, .message-form input[type=text]::-moz-input-placeholder, .message-form input[type=number]::-moz-input-placeholder, .message-form textarea::-moz-input-placeholder {
        color: #fff
    }

    .message-form .textbox:-moz-input-placeholder, .message-form input[type=text]:-moz-input-placeholder, .message-form input[type=number]:-moz-input-placeholder, .message-form textarea:-moz-input-placeholder {
        color: #fff
    }

    .message-form .textbox::-ms-input-placeholder, .message-form input[type=text]::-ms-input-placeholder, .message-form input[type=number]::-ms-input-placeholder, .message-form textarea::-ms-input-placeholder {
        color: #fff
    }

    .message-form .textbox:-ms-input-placeholder, .message-form input[type=text]:-ms-input-placeholder, .message-form input[type=number]:-ms-input-placeholder, .message-form textarea:-ms-input-placeholder {
        color: #fff
    }