/*#region general.master modified*/
/*
Griffin CSS Framework

made by
    Siamak Beheshti Langroudi
*/

/* ================================================
   TABLE OF CONTENTS
   ------------------------------------------------
   1. General page/section/containers/... customizations
        1.1. usefull classes
   2. Text
   3. Controls
   4. Media Queries

   ================================================  */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 1. General page/section/containers/... customizations   */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.panel {
    padding: 10px;
    position: relative;
    width: 100%;
    float: right;
}

.en .panel {
    float: left;
}


.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%;
    }
/*#region General page/section/containers customizations*/
html, body {
    margin: 0;
    padding: 0;
    background-color: #222629;
}

main {
    top: 0;
    position: relative;
    width: 100%;
    -webkit-transition: transform 1000ms cubic-bezier(0.7, 0, 0.3, 1);
    -moz-transition: transform 1000ms cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: transform 1000ms cubic-bezier(0.7, 0, 0.3, 1);
    transition: transform 1000ms cubic-bezier(0.7, 0, 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: #003968;
}

.prldr {
    position: fixed;
    z-index: 1100;
    background-color: #13ce66;
    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;
}
/* Portrait */
@media screen and (orientation: portrait) {
    .prldr {
        width: 200vh;
        height: 200vh;
    }
}

/* Landscape */
@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;
        transform-origin: center;
    }

/* Heart beat animation */
@keyframes beat {
    to {
        transform: scale(1.4);
    }
}

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


.content-body {
    position: relative;
}

.bodyBG {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.bg {
    -webkit-transition: opacity 0s 1000ms step-end;
    -moz-transition: opacity 0s 1000ms step-end;
    -o-transition: opacity 0s 1000ms step-end;
    transition: opacity 0s 1000ms step-end;
    z-index: 5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

    .bg div {
        width: 100%;
        height: 100%;
    }

.pageGrid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

    .pageGrid .panel {
        height: 100%;
        border-left: 1px dotted rgba(255,255,255,.05);
    }

.dark-skin .pageGrid .panel {
    border-left: 1px dotted rgba(0,0,0,.05);
}

.pageGrid .panel:nth-last-child(1) {
    border-left: none;
}

.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: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.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-change-animating {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: #000;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    pointer-events: none;
    z-index: 1000;
}

    .sence-change-animating.active {
        opacity: 1;
    }

    .sence-change-animating p {
        position: absolute;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        display: inline-block;
        margin: 0;
        padding: 0;
        color: #fff;
    }

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

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

.bodyBG {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transform: translateY(100%) translateZ(0px);
    -moz-transform: translateY(100%) translateZ(0px);
    -o-transform: translateY(100%) translateZ(0px);
    transform: translateY(100%) translateZ(0px);
}

.sence1 .bg.dark-bg,
.sence2 .bg.dark-bg,
.sence3 .bg.dark-bg,
.sence4 .bg.dark-bg,
.sence5 .bg.dark-bg {
    opacity: 1;
    -webkit-transform: translateY(0%) translateZ(0px);
    -moz-transform: translateY(0%) translateZ(0px);
    -o-transform: translateY(0%) translateZ(0px);
    transform: translateY(0%) translateZ(0px);
}

.dark-skin .bg.light-bg {
    opacity: 1;
    -webkit-transform: translateY(0%) translateZ(0px);
    -moz-transform: translateY(0%) translateZ(0px);
    -o-transform: translateY(0%) translateZ(0px);
    transform: translateY(0%) translateZ(0px);
}

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


.-cc {
    background-color: #fff;
}

h1 {
    font-size: 1.3em;
    color: #000;
    line-height: 1.3em;
    font-weight: 400;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}

.big {
    font-size: 1.5em;
    font-weight: 300;
}

.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;
    height: 100%;
    min-height: 100%;
}

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

.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;
}



/*#region logo*/


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

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

/*#endregion*/
/*#endregion*/
/*#region textbox*/
.textbox, input[type=text], select, input[type=number], textarea {
    background: none;
    outline: none;
    border: none;
    border-bottom: 1px solid;
    border-radius: 0;
    width: 100%;
    max-width: 400px;
}
/*#endregion*/
/*#region menu open button*/
.menu_open_button {
    width: 25px;
    height: 25px;
    position: fixed;
    -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%);
}
/*#region unchecked*/
.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 .scroller-wrapper,
.intro .scroller-content {
    height: 100%;
    padding: 0;
}

.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: #222629;
    }





.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: 0px 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 a {
            color: rgba(255,255,255,1);
            display: inline-block;
            min-width: 100%;
            opacity: .6;
            text-transform: uppercase;
        }


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

/*#region menu*/
.perspective {
    width: 100%;
    height: 100%;
    background: #aaa;
    position: absolute;
}

.perspectiveContainer {
    background: #fff;
    min-height: 100%;
    position: relative;
    outline: 1px solid rgba(0,0,0,0);
    z-index: 10;
    -webkit-transform: translateZ(0) translateX(0) rotateY(0deg); /* reset transforms (Chrome bug) */
    -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: 0px;
        opacity: 0;
        background: rgba(0,0,0,0.2);
        /* the transition delay of the height needs to be synced with the perspectiveContainer transition time */
        -webkit-transition: opacity 0.4s, height 0s 0.4s;
        -moz-transition: opacity 0.4s, height 0s 0.4s;
        -o-transition: opacity 0.4s, height 0s 0.4s;
        transition: opacity 0.4s, height 0s 0.4s;
    }

.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}


/* Modal view */
.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); /* solves a rendering bug in Chrome on Windows */
}

.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 Rotate Left */
.effect-rotateleft {
    background: #76b852; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #8DC26F, #76b852); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #8DC26F, #76b852); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

    .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,0.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;
}

.effect-rotateleft.animate .outer-nav a {
    opacity: 1;
    -webkit-transform: translateX(0) translateZ(0);
    -moz-transform: translateX(0) translateZ(0);
    -o-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
}

    .effect-rotateleft.animate .outer-nav a:nth-child(2) {
        -webkit-transition-delay: 0.04s;
        -moz-transition-delay: 0.04s;
        -o-transition-delay: 0.04s;
        transition-delay: 0.04s;
    }

    .effect-rotateleft.animate .outer-nav a:nth-child(3) {
        -webkit-transition-delay: 0.08s;
        -moz-transition-delay: 0.08s;
        -o-transition-delay: 0.08s;
        transition-delay: 0.08s;
    }

    .effect-rotateleft.animate .outer-nav a:nth-child(4) {
        -webkit-transition-delay: 0.08s;
        -moz-transition-delay: 0.08s;
        -o-transition-delay: 0.08s;
        transition-delay: 0.08s;
    }

    .effect-rotateleft.animate .outer-nav a:nth-child(5) {
        -webkit-transition-delay: 0.16s;
        -moz-transition-delay: 0.16s;
        -o-transition-delay: 0.16s;
        transition-delay: 0.16s;
    }

    .effect-rotateleft.animate .outer-nav a:nth-child(6) {
        -webkit-transition-delay: 0.2s;
        -moz-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .effect-rotateleft.animate .outer-nav a:nth-child(7) {
        -webkit-transition-delay: 0.24s;
        -moz-transition-delay: 0.24s;
        -o-transition-delay: 0.24s;
        transition-delay: 0.24s;
    }


/* Media Queries */
@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;
        }

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

        .effect-rotatetop .outer-nav.horizontal a {
            display: inline-block;
        }
}
/*#endregion*/

.menu {
    position: fixed;
    top: 0;
    right: 0;
    -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%;
    display: none;
    overflow: hidden;
}

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

.menu.active {
    display: block;
}

.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 {
    position: absolute;
    z-index: 1026;
    background: #fff;
    width: 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;
}

.en .menu .scroller-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 .scroller-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;
}

.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;
}

/*#region pagesummary*/
.pageSummery {
    margin: 0rem 0 0;
    padding: 2rem 0 0;
    box-sizing: border-box;
}


body.dark-skin .pageSummery > div .lable {
    color: #000;
    background-color: rgba(255,255,255,.8);
}

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

body.dark-skin .pageSummery > div.selected > span {
    background-color: rgba(255,255,255,1);
}


.pageSummery .btn_navigation {
    position: relative;
    top: 50%;
    cursor: pointer;
    text-align: center;
    background-color: rgba(255,255,255,1);
    margin: .3rem;
    padding: 0;
    width: 4em;
    border-radius: 0;
    height: 4em;
    line-height: 3em;
    display: inline-block;
    margin-bottom: .5em;
    text-align: center;
    color: #000;
}

    .pageSummery .btn_navigation.selected {
        pointer-events: none;
        background-color: #18ba60;
        color: #fdfefe;
    }

.pageSummery .seperator {
    position: relative;
    top: 50%;
    text-align: center;
    margin: 1px;
    padding: 0;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    display: inline-block;
    margin-bottom: .5em;
    text-align: center;
    color: #000;
    float: right;
}

.en .pageSummery .btn_navigation,
.en .pageSummery .seperator {
    float: left;
}

.pageSummery .btn_navigation span {
    position: absolute;
    width: 100%;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: transparent;
    cursor: initial;
}

.pageSummery .btn_navigation:hover {
    color: #c5d83f;
    background-color: #fff;
}

.pageTool {
    width: 4em;
    position: fixed;
    right: 2em;
    top: 50%;
    -webkit-transform: translate(50%,-50%);
    -moz-transform: translate(50%,-50%);
    -o-transform: translate(50%,-50%);
    transform: translate(50%,-50%);
    z-index: 93;
    text-align: center;
}

    .pageTool button {
        font-size: 10px;
        padding: 0;
        width: 5em;
        background: transparent;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }

        .pageTool button:hover {
            color: #c5d83f;
            background-color: #000;
        }

        .pageTool button i {
            font-size: 2em;
        }

body.dark-skin .pageTool button {
    color: #000;
}

    body.dark-skin .pageTool button:hover {
        color: #c5d83f;
        background-color: #000;
    }

.pageTool .btn_navigation {
    margin: 0;
    padding: 0;
    width: 2em;
    height: 2em;
    display: inline-block;
    margin-bottom: .5em;
    text-align: center;
    background-color: transparent;
    color: #000;
    position: relative;
}

    .pageTool .btn_navigation span {
        position: absolute;
        width: 100%;
        top: 50%;
        right: 0;
        text-align: center;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
/*#endregion*/
/*#endregion*/
/*#endregion*/

/*#region unchecked*/
.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: 0px 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(0px);
            -moz-transform: translateX(100%) translateZ(0px);
            -o-transform: translateX(100%) translateZ(0px);
            transform: translateX(100%) translateZ(0px);
            -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: #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;
}

/*#region pagesummary*/
#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 {
    /* content: ""; */
    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;
    /* top: 50%; */
    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 {
    /* opacity: .5; */
    position: absolute;
    /* left: 100%; */
    /* transform-origin: 0% 50%; */
    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, 0.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;
    /* opacity: 1; */
    position: absolute;
    top: 50%;
    left: 0;
    /* transform: translateY(-50%) translateX(100%); */
}

#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);
}

/*#endregion*/
/*#endregion*/
/*#region menu*/
.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); /* reset transforms (Chrome bug) */
    -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: 0px;
        opacity: 0;
        background: rgba(0,0,0,0.2);
        /* the transition delay of the height needs to be synced with the perspectiveContainer transition time */
        -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%;
}


/* Modal view */
.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); /* solves a rendering bug in Chrome on Windows */
}

.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 Rotate Left */
.effect-rotateleft {
    background: #76b852; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #8DC26F, #76b852); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #8DC26F, #76b852); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

    .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,0.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;
}
/*
.effect-rotateleft.animate .outer-nav a {
	opacity: 1;
	-webkit-transform: translateX(0) translateZ(0);
	transform: translateX(0) translateZ(0);
}

.effect-rotateleft.animate .outer-nav a:nth-child(2) {
	-webkit-transition-delay: 0.04s;
	transition-delay: 0.04s;
}

.effect-rotateleft.animate .outer-nav a:nth-child(3) {
	-webkit-transition-delay: 0.08s;
	transition-delay: 0.08s;
}

.effect-rotateleft.animate .outer-nav a:nth-child(4) {
	-webkit-transition-delay: 0.08s;
	transition-delay: 0.08s;
}

.effect-rotateleft.animate .outer-nav a:nth-child(5) {
	-webkit-transition-delay: 0.16s;
	transition-delay: 0.16s;
}

.effect-rotateleft.animate .outer-nav a:nth-child(6) {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.effect-rotateleft.animate .outer-nav a:nth-child(7) {
	-webkit-transition-delay: 0.24s;
	transition-delay: 0.24s;
}
*/

/* Media Queries */
@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;
        }

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

        .effect-rotatetop .outer-nav.horizontal a {
            display: inline-block;
        }
}
/*#endregion*/

/*#region*/
.open-message-panel,
.open-search-panel,
.open-category-panel,
.open-print-panel,
.open-share-panel {
    display: none;
    -webkit-transform: translateX(-8rem);
    -moz-transform: translateX(-8rem);
    -o-transform: translateX(-8rem);
    transform: translateX(-8rem);
    -webkit-transition: transform .3s;
    -moz-transition: transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
}

.active.open-message-panel,
.active.open-search-panel,
.active.open-category-panel,
.active.open-print-panel,
.active.open-share-panel {
    display: inline-block;
}

.viz.active.open-message-panel,
.viz.active.open-search-panel,
.viz.active.open-category-panel,
.viz.active.open-print-panel,
.viz.active.open-share-panel {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
}

.contactForm.open-message-panel {
    bottom: 4.5em;
    -webkit-transition-delay: .05s;
    -moz-transition-delay: .05s;
    -o-transition-delay: .05s;
    transition-delay: .05s;
}

.contactForm.open-category-panel {
    bottom: 9rem;
    -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    -o-transition-delay: .1s;
    transition-delay: .1s;
}

.contactForm.open-search-panel {
    bottom: 13.5rem;
    -webkit-transition-delay: .15s;
    -moz-transition-delay: .15s;
    -o-transition-delay: .15s;
    transition-delay: .15s;
}

.contactForm.open-print-panel {
    bottom: 18em;
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -o-transition-delay: .2s;
    transition-delay: .2s;
}

.contactForm.open-share-panel {
    bottom: 22.5em;
    -webkit-transition-delay: .25s;
    -moz-transition-delay: .25s;
    -o-transition-delay: .25s;
    transition-delay: .25s;
}
/*#endregion*/

/*#region logo*/
.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;
}
/*#endregion*/
/*#region accelerating*/
.accelerating_link {
    position: absolute;
    top: 150%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    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;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
/*#endregion*/

/*#region desktop menu*/

.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
        }
/*#endregion*/
/*#region mobile menu button*/
.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;
}

.hidden-menu-button .mobile-menu-button {
    /* top: 0; */
}

.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;
}
/*#endregion*/
/*#region top bar*/
.top-bar {
    position: fixed;
    background-color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.3);
    top: 0;
    right: 0;
    width: 100%;
    height: 5rem;
    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,.08);
}
/*#endregion*/

/*#region page share*/
.page-share {
}

.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;
}


/*#endregion*/

/*#region mediaQuery*/

/*xxsd*/
@media only screen and (min-width:320px) {
}
/*xsd*/
@media only screen and (min-width:321px) {
}

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

    .big {
        font-size: 1.3em;
    }
}
/*sd*/
@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;
    }

    .service-list {
        padding: 0 1em;
    }
}
/*nd*/
@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);
        -moz-transform: translateY(0rem);
        -o-transform: translateY(0frem);
        transform: translateY(0rem);
    }

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

    .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;
    }
}
/*ld*/
@media only screen and (min-width:768px) {

    .desktop-menu {
        display: block;
    }

    .top-bar {
        height: 5rem;
    }

    .desktop-menu ul li {
        /* display: inline-block; */
        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;
    }

    .service-list {
        padding: 0 3em;
    }

    .big {
        font-size: 2em;
    }

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


    .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;
    }
}
/*xld*/
@media only screen and (min-width:992px) {

    .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;
    }
}
/*xxld*/
@media only screen and (min-width:1200px) {

    .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;
    }
}
/*#endregion*/
/*#region button*/
.btn {
    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: #B0976D;
            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;
    }
/*#endregion*/
/*#region animation*/
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*#region mediaQuery*/

/*xxsd*/
@media only screen and (min-width:320px) {
}
/*xsd*/
@media only screen and (min-width:321px) {
}

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

    .big {
        font-size: 1.3em;
    }
}
/*sd*/
@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;
    }

    .service-list {
        padding: 0 1em;
    }
}
/*nd*/
@media only screen and (min-width:600px) {

    .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;
    }

    .menu {
        right: 3em;
    }
}
/*ld*/
@media only screen and (min-width:768px) {
    .bigger {
        font-size: 2.5em;
    }

    .service-list {
        padding: 0 3em;
    }

    .big {
        font-size: 2em;
    }

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


    .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;
    }

    .pageTool {
        width: 5em;
        right: 3em;
    }
}
/*xld*/
@media only screen and (min-width:992px) {

    .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;
    }

    .menu {
        right: 4em;
    }
}

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

    .big {
        font-size: 2em;
    }
}
/*xxld*/
@media only screen and (min-width:1200px) {

    .service-list {
        padding: 0 5em;
    }

    .kazan {
        font-size: 12em;
    }

    .wedown {
        font-size: 12em;
    }

    .menu {
        right: 5em;
    }
}

@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;
    }
}
/*#endregion*/

/*#endregion*/
/*#region contact*/

.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.mapview .scroller-wrapper {
        /* display:none; */
    }

    .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-size: 1.5em; */
    font-weight: 400;
    margin-bottom: 5px;
    /* opacity: .6; */
}

.contactInfo ul {
}

    .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-control .btn {
    color: rgba(19, 206, 102,1);
    margin-top: 1em;
    border-radius: 0;
    opacity: 1;
}

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

.contact-control input[type=text] {
}

.contact-control textarea {
}

.contact-control input[type=text], .contact-control 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-control label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 1rem;
    transition: all .3s;
    font-size: 1em;
}

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

.contact-control input[type=text]:hover, .contact-control 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 {
        /* color: #000; */
        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-control input[type=text] {
    padding: 0 .5em;
}

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

.contact-panel .contact-control {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 100%;
    max-width: 800px;
    top: 50%;
    left: 50%;
    padding: 0em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translateX(-50%) translateY(-40%);
    -moz-transform: translateX(-50%) translateY(-40%);
    -o-transform: translateX(-50%) translateY(-40%);
    transform: translateX(-50%) translateY(-40%);
    opacity: 0;
    -webkit-transition: all .2s 0s;
    -moz-transition: all .2s 0s;
    -o-transition: all .2s 0s;
    transition: all .2s 0s;
    z-index: 100;
    padding: 1.5em 3em;
    background: #11cc7a;
}

.contact-panel.show .contact-control {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
    color: #fff;
    padding: 1.5em 3em;
    background: #11cc7a;
}

.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: #FFFFFF;
    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: #FFFFFF;
    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-control {
    opacity: 0;
    padding: 7.5rem 2rem;
    pointer-events: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    color: #FFFFFF;
    background-color: #11cc7a;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

    .contact-control label {
        color: inherit;
    }

    .contact-control .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;
    }
}

/* Landscape */
@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: #FFFFFF;
}

.contact_button {
    color: #FFFFFF;
    background-color: #11cc7a;
    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, 0.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, 0.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, 0.15);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.contact_button i {
    pointer-events: none;
}
/*#endregion*/

/*#region fontiran*/

@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'), /* IE6-8 */
    url('../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../../../app/global/file/font/WebFonts/fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    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'), /* IE6-8 */
    url('../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    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'), /* IE6-8 */
    url('../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    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'), /* IE6-8 */
    url('../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    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'), /* IE6-8 */
    url('../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../../../app/global/file/font/WebFonts/fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    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'), /* IE6-8 */
    url('../../../app/global/file/font/WebFonts/fonts/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../../../app/global/file/font/WebFonts/fonts/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../../../app/global/file/font/WebFonts/fonts/ttf/IRANSansWeb.ttf') format('truetype');
}


/*#endregion*/
/*#region site-icon*/

@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: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'site-icon';
    src: url('../font/site-icon.svg?79525566#site-icon') format('svg');
  }
}
*/

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "site-icon";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.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';
}
/* '' */
/*#endregion*/

/*#region mediaQuery*/

/*xxsd*/
@media only screen and (min-width:320px) {
}
/*xsd*/
@media only screen and (min-width:321px) {
}

@media only screen and (min-width:425px) {
}
/*sd*/
@media only screen and (min-width:480px) {
}

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

    .btn.btn_contact {
        width: initial;
    }
}
/*nd*/
@media only screen and (min-width:600px) {


    .service-section {
        text-align: start;
    }

    .service-list li:nth-child(2n+1) {
        text-align: right;
    }
}
/*ld*/
@media only screen and (min-width:768px) {

    .contactForm {
        margin: 2rem;
    }

    .slider-section {
        text-align: initial;
    }

        .slider-section .slide .slide-content {
            right: 7.5rem;
            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;
    }

    .contact-wizard .title > div {
        padding: 7.5rem;
    }

    .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;
    }
}
/*xld*/
@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:1024px) {
}
/*xxld*/
@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;
    }
}
/*#endregion*/

.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: 0px 1rem;
    border-radius: 25px;
}


.lazyLoadContainer .loadEl img {
    max-width: 100%;
    width: 800px;
}


.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;
        /* margin: .5rem; */
        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;
    z-index: 1000;
    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
    }
}