@import "variables.less";
/*box ()*/
.isotope-text-title(){
    position: relative;
    > div{
        &:first-child{
            .text-style-klara(@gray-dark, @font-size-large + 2px, 400, 20px);
            text-transform: uppercase;
            letter-spacing: 4px;
            margin-bottom: 14px;
        }
        &:last-child{
            .text-style-klara(@black, @font-size-large + 26px, 700, 40px);
            letter-spacing: 1px;
        }
    }
}
.isotope-content-tabs(){
    > div{
        display: inline-block;
        .text-center();
        padding-left: 27px;
        cursor: pointer;
        &:first-child{
            padding-left: 0;
        }
        @media screen and (max-width: 768px){
            display: block;
            padding: 0;
            .text-center();
        }
        > span{
            .text-style-klara(@black-light, @font-size-base - 1px, 700, 32px);
            /*border-bottom: 2px solid @br-color;*/
            text-transform: uppercase;
            display: inline-block;
            position: relative;
            letter-spacing: -.3px;
            .vendor(transition, all .3s linear);
            margin-bottom: 10px;
            &:after{
                .pe(none);
                content: " ";
                .absolute();
                border-bottom: 2px solid transparent;
                .vendor(transform, translate(0, 10px));
                .vendor(transition, all .3s linear);
            }
        }
        &:hover{
            > span{
                color: @brand-color;
            }
        }
        &.az-is-checked{
            > span{
                color: @brand-color;
                &:after{
                    .vendor(transform, translate(0, 0));
                    border-color: @gray-lighter;
                }
            }
        }
    }

}
.visibility-content-isotope(@bg-color, @pr){
    &:hover{
        > div{
            > div{
                .visible(visible, 1);
                > div{
                    > div{
                        .visible(visible, 1);
                        .vendor(transform, translate(0, 0));
                        .pe(all);
                    }
                }
            }
        }
    }
    > div{
        @media screen and (max-width: 680px){
            display: inline-block;
            position: relative;
        }
        > a{
            display: block;
            position: relative;
            img{
                display: block;
                max-height: 100%;
            }
        }
        > div{
            .visible(hidden, 0);
            .vendor(transition, all .3s linear 0s);
            .pe(none);
            .absolute();
            background: fade(@bg-color, @pr);
            padding: 37px 47px;
            box-sizing: border-box;

            @media screen and (max-width: 680px){
                .flex(center, wrap, stretch, center);
                height: 100%;
                width: 100%;
            }
            > div{
                @media screen and (max-width: 680px){
                    padding: 0 0;
                }
                @media screen and (max-width: 680px){
                    text-align: left;
                }
                > div{
                    .vendor(transition, all .3s linear .2s);
                    .visible(hidden, 0);
                    .vendor(transform, translate(0, 10px));
                    &:first-child{
                        .text-style-klara(@white-lighter, @font-size-base - 1px, 400, 17px);
                    }
                    &:last-child{
                        .text-style-klara(@white-lighter, @font-size-large, 700, 25px);
                        text-transform: uppercase;
                        position: relative;
                        padding-bottom: 9px;
                        &:after{
                            content: " ";
                            position: absolute;
                            left: -17px;
                            bottom: 0;
                            border-bottom: 1px solid @white-lighter;
                            width: 60px;
                        }
                    }
                }
            }

        }
    }
}
.azen-citra-the-text-mega-icon(){
    margin-bottom: 56px;
    .azen-citra-wrapper, > div{
        &:hover{
            > div{
                &:first-child{
                    color: @white-lighter;
                    &:before{
                        .vendor(transition, all .2s linear 0s);
                        content: " ";
                        z-index: -2;
                        border-color: transparent;
                        .absolute();
                        .visible(hidden, 0);

                    }
                    &:after{
                        .vendor(transition, all .2s linear);
                        .visible(visible, 1);
                        .vendor(transform, scale3d(1, 1, 1));
                    }
                }
                &:last-child{
                    > a{
                        color: @brand-color;
                    }
                }
            }
        }
        @media screen and (max-width: 400px){
            .text-center();
        }
        > div{
            display: inline-block;
            vertical-align: top;
            @media screen and (max-width: 400px){
                display: block;
            }
            &:first-child{
                width: 90px;
                height: 90px;
                box-sizing: border-box;
                .text-center();
                line-height: 90px;
                margin-top: 7px;
                margin-right: 30px;
                color: @black-lighter;
                font-size: @font-size-large + 12px;
                .vendor(transition, all .2s);
                position: relative;
                border: 1px solid transparent;
                &:before{
                    border: 1px solid @white-dark;
                    .vendor(transition, all .2s linear .1s);
                    content: " ";
                    .visible(visible, 1);
                    .absolute();
                }
                &:after{
                    content: " ";
                    background-color: @brand-color;
                    .visible(hidden, 0);
                    border-radius: 50%;
                    .absolute();
                    display: block;
                    .vendor(transition, all .2s linear);
                    .vendor(transform, scale3d(1.2, 1.2, 1));
                    z-index: -1;

                }
                @media screen and (max-width: 400px){
                    display: inline-block;
                    margin: 0;
                    margin-bottom: 15px;
                }

            }
            &:last-child{
                width: ~"calc(100% - 120px)";
                @media screen and (max-width: 400px){
                    display: inline-block;
                    width: auto;
                }
                > a{
                    .title-style-citra(21px, @font-size-large, none, 60px, 7px);
                    color: @black;
                    padding-left: 16px;
                    .vendor(transition, all .2s);
                    @media screen and (max-width: 400px){
                        margin-left: -21px;
                    }

                    &:after{
                        margin-left: -16px;
                    }
                }
                > div{
                    padding-left: 16px;
                    .text-style-klara(@black-light, @font-size-base, 400, 24px);
                }
            }
            .after-clear();
        }
    }
}
.number-reverse(){
    > div{
        text-align: right;
        > div{
            padding-left: 0;
            padding-right: 16px;
            &:first-child{
            }
            &:last-child{
                &:after{
                    margin-left: auto;
                    margin-right: -16px;
                }
            }
        }
    }
}
.azen-citra-number(@margin-bottom){
    margin-bottom: @margin-bottom;
    &[data-content-reverse="true"]{
        .number-reverse();
    }
    > div{
        > div{
            &:first-child{
                .text-style-klara(@black, @font-size-large + 30px, 700, 33px);
                padding-left: 16px;
                margin-bottom: 9px;
            }
            &:last-child{
                .title-style-citra(21px, @font-size-base, uppercase, 40px, 14px);
                font-weight: 400;
                color: @black-light;
                padding-left: 16px;
                &:after{
                    margin-left: -16px;
                }
            }
        }
    }
}
.intelligent-the-best-text(@mg-bottom){
    counter-reset: section;
    .azen-text-wrapper{
        margin-bottom: @mg-bottom;
        padding-left: 45px;
        &:hover{
            > div{
                &:first-child{
                    > span, > a{
                        color: @brand-color;
                    }
                }
            }
        }
        > div{
            &:first-child{
                position: relative;
                > span, > a{
                    .title-style-citra(21px, @font-size-large, none, 70px, 7px);
                    color: @black-dark;
                    &:before{
                        .text-style-klara(@white, 52px, 700, 34px);
                        cursor: pointer;
                        counter-increment: section;             
                        content: "0"counter(section);
                        position: absolute;
                        top: ~"calc(100% + -55px)";
                        left: -10px;
                        .vendor(transform, translate(-50%, 0) rotate(-90deg));
                        transform-origin: bottom center;
                    }
                }
            }
            &:last-child{
                .text-style-klara(@black-light, @font-size-base, 400, 24px);
                padding-left: 21px;
            }
        }
    }
}
.azen-news-wrapper-content(@mg-bottom-item, @margin-bottom, @mg-bottom-title, @text-transform){
    margin-bottom: @mg-bottom-item;
    span{
        display: block;
    }
    > div{
        &:first-of-type{
            text-align: right;
            > div{
                &:first-child{

                    .title-style-citra(@margin-bottom, @font-size-large + 34px, none, 70px, 16px);
                    color: @white-dark;
                    line-height: 40px;
                    > div{
                        display: inline-block;
                        vertical-align: middle;
                        &:first-child{
                            &:after{
                                content: "/";
                                float: right;
                            }
                        }
                    }
                }
            }
            margin-bottom: 18px;
        }
        &:last-of-type{
            margin-bottom: @mg-bottom-title;
            > span{
                .text-style-klara(@black, @font-size-large, 700, 20px);
                text-transform: @text-transform;
            }
        }
    }
}
/*mini-thypography-foodpicky*/
.azh-text-styles(){
    img{
        &.alignleft {
            display: inline;
            float: left;
            margin: 0 41px 20px 0;
        }

        &.alignright {
            display: inline;
            float: right;
            margin: 0 0 20px 41px;
        }

        &.aligncenter {
            display: block;
            margin-bottom: 20px;
            margin-right: auto;
            margin-left: auto;
        }
    }
    a {
        color: @black-dark;
        &:hover {
            color: @brand-color;
        }
    }
}
/*font*/
@font-size-small: 11px;
@font-size-base: 15px;
@font-size-large: 18px;
.font-fa(){
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-thfy(){
    font-family: 'themify';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*()*/
.after-clear(){
    &:after{
        content: "";
        display: table;
        clear: both;
    }
}
.text-center(){

    text-align: center;
}
.bg-max(){
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.img(){
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 100%;
}
.horizontal-list(@width, @offset) {
    font-size: 0;
    margin-left: -@offset !important;
    margin-right: -@offset !important;
    > * {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        width: @width;
        padding-left: @offset !important;
        padding-right: @offset !important;
        font-size: @font-size-base;
        margin-bottom:  @offset * 2 !important;
    }
    @media (max-width: 768px) {
        display: block;
        margin-left: 0 !important;
        margin-right: 0 !important;
        > * {
            display: block;
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;            
            margin-bottom:  @offset * 2 !important;
        }
    }
}
.flex(@justify-content, @flex-wrap, @box-align, @align-items){
    .vendor(display, flex);
    .vendor(justify-content, @justify-content);
    .vendor(flex-wrap, @flex-wrap);
    .vendor(box-align, @box-align);
    .vendor(align-items, @align-items);
}
.absolute(){
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.background(){
    background-color: inherit;
}
.pe(@do){
    pointer-events: @do;
}
.title-style-citra(@margin-bottom, @font-size, @text-transform, @af-width, @af-pg-top){
    margin: 0;
    font-family: "@{google-font-family-Karla}";
    font-size: @font-size;
    color: @brand-color;
    line-height: 30px;
    font-weight: 700;
    text-transform: @text-transform;
    padding-left: 21px;
    display: inline-block;
    margin-bottom: @margin-bottom;
    &:after{
        content: " ";
        border-bottom: 1px solid @white-darker;
        width: @af-width;
        padding-top: @af-pg-top;
        margin-left: -21px;
        display: block;
    }
    /*        @media screen and (max-width: 400px){
                margin-left: @margin-left;
            }*/
}
.button-citra(@bg-color, @padding-right-left, @border-color, @bg-after-color, @h-color, @h-bg-color, @h-border-color){
    display: inline-block;
    text-transform: uppercase;
    background-color: @bg-color;
    padding: 0 @padding-right-left;
    border: 1px solid @border-color;
    position: relative;
    .vendor(transition, all .2s linear);
    z-index: 1;
    &:after{
        z-index: -1;
        content: " ";
        background-color: @bg-after-color;
        .absolute();
        top: 0;
        bottom: auto;
        height: 0;
        /*.vendor(transition, all .3s  cubic-bezier(0, 0, 0.2, 1));*/
        .vendor(transition, all .2s  linear);
    }
    &:hover{
        background-color: @h-bg-color;
        border-color: @h-border-color;
        &:after{
            height: 100%;
            bottom: 0;
            top: auto;
        }
        color: @h-color;
    }
}
.read-more(@color, @font-color, @br-color, @letter, @font-size,
@line, @h-color, @h-br, @start, @how-much-will-start, @opacity){
    display: inline-block;
    position: relative;
    border-bottom: 2px solid @br-color;
    > a{

        font-weight: 700;
        line-height: @line;
        margin-bottom: 0;
        letter-spacing: @letter;
        font-size: @font-size;
        text-transform: uppercase;
        display: inline-block;
        white-space: nowrap;
        color: @font-color;
        padding-right: 19px;
        opacity: @opacity;
        .vendor(transition, all @start linear @how-much-will-start);
        z-index: 2;
    }
    > span{
        .absolute();
        z-index: 1;
        .pe(none);
        .arrow-do(@color, @h-color, @h-br);
    }
    &:hover{
        color: @h-color;
        > span{

            &:after{
                border-left-color: @brand-color;
            }
            &:before{
                background-color: @brand-color;
            }
        }
        border-color: @h-br;
    }
}
.arrow-do(@color, @h-color, @h-br){
    .aroww-start(@color);
}
.aroww-start(@color){
    .af-bf(){
        content: " ";
        top: 50%;
        .vendor(transform, translate(0, -50%));
        position: absolute;
        .vendor(transition, all 0s linear 0s);
    }
    &:before{
        .af-bf();
        left: ~"calc(100% - 11px)";//19-8=11
        right: 0;
        background-color: @color;
        width: 10px;
        height: 2px;
    }
    &:after{
        .af-bf();
        right: 0;
        left: auto;
        border: 4px solid transparent;
        border-left: 4px solid @color;
        border-right: 0px solid transparent;
    }

}
.before-dark(@bg-color, @pr){
    &:before{
        .pe(none);
        content: " ";
        .absolute();
        background-color: fade(@bg-color, @pr);
    }
}
.syle-citra-text(){
    .absolute();
    display: block;
    left: -90px;
    .pe(none);
    > span{
        display: block;
        .pe(all);
        .absolute();
        right: auto;
        bottom: auto;
        .vendor(transform, translate(-50%, -50%) rotate(-90deg) translate(-50%, 50%));
        .text-style-klara(@white, @font-size-large + 54px, 700, 50px);
        text-align: right;
    }
    @media screen and (max-width: 500px){
        display: none;
    }
}
.syle-citra-icon(){
    position: absolute;
    top: 0;
    left: 0;
    height: 130px;
    width: 28px;
    .text-center();
    &:before{
        content: " ";
        position: absolute;
        top: 0;
        left: 50%;
        .vendor(transform, translate(-50%, 0));
        width: 1px;
        height: ~"calc(100% - 50px)";
        bottom: 0;
        border-right: 1px solid @white-dark;
    }
    > a{
        position: absolute;
        bottom: 0;
        display: block;
        width: 28px;
        height: 28px;
        border: 1px solid @white-dark;
        border-radius: 50%;
        line-height: 28px;
        .vendor(transition, all .3s linear);

        &:hover{
            background-color: @brand-color;
            border-color: transparent;
            > span{
                color: @white-lighter;
            }
        }
        > span{
            color: @gray;
        }
    }
}
.visible(@visible, @opacity){
    visibility: @visible;
    opacity: @opacity;
}
[class*="azen-citra-"]{
    overflow: hidden;
}
[class*="azen-citra-wrapper"], [class*="azen-citra-e"]{
    overflow: visible;
}
.font-default(){
    color: @color;
    font-size: @font;
    font-weight: @weight;
    line-height: @line;
}
.text-style-klara(@color, @font, @weight, @line){
    .font-default();
    font-family: "@{google-font-family-Karla}";
}
.text-style-lato(@color, @font, @weight, @line){
    .font-default();
    font-family: "@{google-font-family-Lato}";
}

.azen-citra-accordion{
    margin-bottom: 30px;
    > div{
        > div{
            margin-bottom: 15px;
            background: @white-lighter;
            border: 2px solid transparent;
            box-sizing: border-box;
            .vendor(transition, all .3s linear);
            &:last-child{
                margin-bottom: 0;
            }
            > div{
                padding: 0 28px;
                &:first-child{
                    .azh-inherit-initial();
                    cursor: pointer;
                    padding-top: 14px;
                    padding-bottom: 12px;
                    .text-style-klara(@black-light, @font-size-base - 1px, 700, 20px);
                    text-transform: uppercase;
                    position: relative;
                    padding-right: 61px;
                    .vendor(transition, all .3s linear);
                    &:before{
                        content: "\e61a";
                        .font-thfy();
                        font-size: @font-size-small - 1px;
                        color: @black-darker;
                        position: absolute;
                        top: 50%;
                        .vendor(transform, translate(0, -50%));
                        right: 25px;
                    }
                }
                &:last-child{
                }
                .after-clear();
            }
            &.az-active{
                background-color: transparent;
                border-color: @brand-color;
                > div{
                    &:first-child{
                        margin-bottom: 4px;
                        padding-top: 28px;
                        padding-bottom: 14px;
                        color: @black-dark;
                        &:before{
                            content: "\e622";
                        }
                    }
                    &:last-child{
                        padding-bottom: 3px;
                    }
                }
            }
        }
    }
}
.azen-citra-tab-services{
    margin-bottom: 30px;
    padding: 39px 40px 17px;
    background-color: @white-lighter;

    > div{
        > div{
            &:first-child{
                .flex(space-between, wrap, flex-start, flex-start);
                > span{
                    display: inline-block;
                    /*float: left;*/
                    max-width: 33%;
                    &:last-child{
                        margin: 0;
                    }
                    &.az-active{
                        > a{
                            color: @brand-color;
                            &:after{
                                border-color: @brand-color;
                            }
                        }
                    }
                    > a{
                        .azh-inherit-initial();
                        .title-style-citra(46px, @font-size-large - 2px, uppercase, 60px, 8px);
                        .text-style-klara(@gray-dark, @font-size-large - 2px, 700, 24px);
                        .vendor(transition, none);
                        padding-left: 15px;
                        &:after{
                            margin-left: -15px;
                        }
                    }
                }
                .after-clear();
                @media screen and (max-width: 580px){
                    display: block;
                    .text-center();
                    > span{
                        display: block;
                        padding-left: 0;
                        width: 100%;
                        max-width: 100%;
                        &:last-child{
                            margin-bottom: 20px;
                        }
                        > a{
                            position: relative;
                            margin-bottom: 30px;
                            padding-bottom: 11px;
                            padding-left: 0;
                            &:after{
                                margin: 0;
                                padding: 0;
                                left: 50%;
                                .vendor(transform, translate(-50%, 0));
                                bottom: 0;
                                position: absolute;
                            }
                        }
                    }
                }
            }
            &:last-child{
                > div{
                }
            }
        }
    }
}
div.azen.azen1.azen2.azen3 {

    /*LESS*/
    /*it was do*/
    .azen-citra-e-header{
        height: 91px;
        position: relative;
        width: 100%;
        z-index: 5;
        box-sizing: border-box;
        min-height: 90px;
        @spacing: 91px;
        @menu-item-h-padding: 30px;
        @menu-item-padding:  20px;
        background-color: @black-dark;
        &[data-over-content="true"]{
            margin-bottom: -@spacing - 1px;
            margin-bottom: -92px;
            background-color: transparent;
            border-bottom: 1px solid fade(@white-lighter, 10%);
        }
        .azen-menu-wrapper{

            &[style]:not([style=""]){
                background-color: fade(@black-darker, 80%);
            }
            .citra-animation-menu();
            .vendor(transition, all .3s linear);
            z-index: 11;
            position: absolute;
            padding: 0 99px;
            top: 0;
            left: 0;
            right: 0;

            @media screen and (max-width: 1100px){
                padding: 0 15px;
            }
            > div{
                @media screen and (min-width: 1200px){
                    width: auto !important;
                }
                > a{
                    display: inline-block;
                    line-height: @spacing;
                    min-width: 270px;
                    img{
                        display: inline-block;
                        .vendor(transition, all 0.5s ease-out);
                        max-height: @spacing;
                        width: auto;
                        max-width: none;
                        border: 0;
                        height: auto;
                        max-width: 100px + @spacing;
                        vertical-align: middle;
                    }
                }
                .azen-mobile-menu-button {
                    display: none;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    .vendor(transform, translate(0, -50%));
                    left: auto;
                    width: 17px; height: 17px;
                    color: @white-lighter;
                    text-align: center;
                    cursor: pointer;
                    @media (max-width: 1100px) {
                        display: block;
                        right: 15px;
                    }
                    .az-icon {
                        display: block;
                    }
                }
                .azen-menu-checkbox {
                    display: none;
                    user-select: none;
                }
                @media (max-width: 1100px) {
                    .azen-menu-checkbox:checked + .azen-primary-navigation {
                        visibility: visible;
                        opacity: 1;
                        .vendor(transform, translate(0, 0px));
                    }
                }
                > div{
                    float: right;
                    .vendor(display, flex);
                    width: ~"calc(100% - 270px)";
                    .vendor(justify-content, center);
                    > div{
                        &:last-of-type{
                            min-width: 270px;
                            position: relative;
                            .line(@x){
                                position: absolute;
                                right: 0;
                                line-height: @spacing;
                                z-index: @x;
                            }
                            .line2(@1, @2, @3){
                                visibility: @1;
                                opacity: @2;
                                .vendor(transform, translate(0, @3));
                            }
                            .content-none-block(){
                                .line2(hidden, 0, 10px);
                                position: absolute;
                                min-width: 260px;
                                top: 100%;
                                right: 0;
                                line-height: 50px;
                                background-color: @white-lighter;
                                padding: 0 20px;
                                .vendor(transition, all .3s linear);
                                > a, a:last-child{
                                    line-height: 50px;
                                    color: @black;
                                    &:hover{
                                        color: @brand-color;
                                    }
                                }
                            }
                            > span{
                                display: none;
                                .line(1);
                                font-size: @font-size-base + 1px;
                                color: @white-lighter;
                                .vendor(transition, all .2s linear);
                                @media screen and (max-width: 1200px){
                                    display: block;
                                }
                                @media screen and (max-width: 1200px){
                                    display: block;
                                }
                            }
                            @media screen and (max-width: 1200px){
                                > label{
                                    cursor: pointer;
                                    .line(2);
                                    width: 20px;
                                    height: 100%;
                                    top: 50%;
                                    .vendor(transform, translate(0, -50%));
                                    &:hover{
                                        ~ span{
                                            color: @brand-color;
                                        }
                                    }
                                    ~ .azen-menu-checkbox:checked ~ div {
                                        .line2(visible, 1, 0px);
                                        .after-clear();
                                    }
                                }
                            }
                            @media screen and (max-width: 1100px){
                                > label ~ span{
                                    display: none;
                                }
                            }
                            @media screen and (max-width: 768px){
                                > label ~ span{
                                    display: block;
                                }
                            }
                            > div{
                                .vendor(flex, 1);
                                .vendor(display, flex);
                                .vendor(justify-content, flex-end);
                                position: relative;
                                line-height: @spacing;
                                a{
                                    float: left;
                                    padding: 0 10px;
                                    text-transform: uppercase;
                                    color: @white-lighter;
                                    .vendor(transition, all .2s linear);
                                    &:first-child{
                                        padding-left: 0;
                                    }
                                    &:last-child{
                                        padding-right: 0;
                                        .text-style-klara(@white-lighter, @font-size-base + 1px, 700, @spacing);
                                    }
                                    &:hover{
                                        color: @brand-color;
                                    }
                                    &:not(:last-child){
                                        span{
                                            &:before{
                                                font-size: @font-size-base + 1px;
                                            }
                                        }
                                    }
                                }
                                @media (max-width: 1200px) {
                                    .content-none-block();
                                }
                                @media (max-width: 1100px) {
                                    .line2(visible, 1, 0px);
                                    position: relative;
                                    margin-right: 0;
                                    text-align: right;
                                    background-color: transparent;
                                    top: auto;
                                    > a, a:last-child{
                                        line-height: @spacing;
                                        color: @white-lighter;
                                        float: none;
                                        &:hover{
                                            color: @brand-color;
                                        }
                                    }
                                }
                                @media (max-width: 768px) {
                                    .line2(hidden, 0, 10px);
                                }
                                @media (max-width: 520px) {
                                    .content-none-block();
                                    right: -35px;
                                }
                            }
                            @media (max-width: 1100px) {
                                position: absolute;
                                top: 0;
                                right: 50px;
                                bottom: 0;
                            }
                            @media screen and (max-width: 1200px){
                                min-width: 100px;
                            }
                        }
                        &:first-of-type{
                            line-height: @spacing;
                            &.azen-primary-navigation { 
                                pointer-events: none;
                                display: inline-block;
                                .vendor(flex, 4);
                                max-width: ~"calc(100% - 110px)";
                                @media screen and (max-width: 1100px){
                                    max-width: 100%;
                                    background-color: @white-lighter;
                                }
                                .azen-nav-menu {
                                    > .azen-menu-item {
                                        pointer-events: all;
                                        &.azen-menu-item-has-children > a.azen-menu-link{
                                            padding-right: 37.5px;
                                        }
                                        &.azen-menu-item-has-children > a.azen-menu-link::after, &.azen-mega > a.azen-menu-link::after {
                                            position: absolute;
                                            top: 50%;
                                            right: 18px;
                                            .vendor(transform, translate(0, -50%));
                                            font-size: @font-size-base - 1px;
                                            content: "\f107";
                                            line-height: @spacing;
                                            display: inline-block;
                                            vertical-align: top;
                                            margin-left: 10px;
                                            font-family: FontAwesome;
                                            @media screen and (max-width: 1100px){
                                                line-height: 45px;
                                                right: 0px;
                                            }
                                        }
                                        &.azen-current-menu-item, &.azen-current-menu-ancestor {
                                            > a.azen-menu-link {
                                                color: @brand-color;
                                                font-weight: 700;
                                                @media screen and (max-width: 1100px){
                                                    font-weight: 400;
                                                }
                                            }
                                        }
                                    }     
                                    &::after {
                                        content:"";
                                        display:table;
                                        clear:both;
                                        line-height: 0;
                                    }
                                }
                                .azen-nav-menu, .azen-sub-menu {
                                    .vendor(display, flex);
                                    .vendor(justify-content, center);
                                    list-style:none;
                                    position:relative;
                                    margin:0;
                                    padding:0;
                                    @media screen and (max-width: 1100px){
                                        padding: 20px 30px;
                                        display: block;
                                    }
                                    > .azen-menu-item {
                                        position:relative;
                                        float: left;
                                        margin: 0;
                                        padding: 0;
                                        &:hover > .azen-sub-menu, &:hover > .azen-page {
                                            visibility:visible;
                                            opacity:1;
                                            .vendor(transform, translate(0, 0px));
                                            @media screen and (max-width: 1100px){
                                                visibility: hidden;
                                                opacity: 0;
                                            }
                                        }
                                        &:hover a.azen-menu-link {
                                            color: @brand-color;
                                        }
                                        @media screen and (max-width: 1100px){
                                            display: block;
                                            float: none;
                                            line-height: normal;
                                            &:first-child{
                                                &:before{
                                                    content: none;
                                                }
                                            }
                                        }
                                        position: relative;
                                        > .azen-menu-link {
                                            .text-style-klara(@white-lighter, @font-size-base - 1px, 700, @spacing);
                                            position: relative;
                                            display: inline-block;
                                            text-decoration: none;
                                            padding: 0 @menu-item-padding;
                                            text-transform: uppercase;
                                            letter-spacing: -.5px;
                                            .vendor(transition, all .2s linear);
                                            .fa, [class*="icon"] {
                                                margin-right: 8px;
                                                line-height: inherit;
                                                vertical-align: top;
                                            }
                                            @media screen and (max-width: 1100px){
                                                color: @black-dark;
                                                padding: 0;
                                                line-height: 40px;
                                                ~ label{
                                                    line-height: 40px;
                                                    display: inline-block;
                                                    width: 20px;
                                                    height: 40px;
                                                    background: transparent;
                                                    position: relative;
                                                    z-index: 9;
                                                    cursor: pointer;
                                                    vertical-align: middle;
                                                    margin-left: -15px;
                                                }
                                                ~ .azen-menu-checkbox:checked + .azen-sub-menu {
                                                    visibility: visible;
                                                    opacity: 1;
                                                    display: block;
                                                    position: relative;
                                                    left: 0;
                                                    padding-left: 15px;
                                                }
                                            }
                                        }
                                        > .azen-page {
                                            visibility:hidden;
                                            opacity:0;
                                            box-sizing: border-box;
                                            position: absolute;
                                            top: 100%;
                                            left: 0;
                                            background-color: @white-lighter;
                                            border: 1px solid @white;
                                            line-height: 20px;
                                            will-change: visibility, opacity;
                                        }            
                                        .azen-sub-menu {    
                                            display: block;
                                            visibility: hidden;
                                            opacity: 0;
                                            position:absolute;
                                            top: 100%;
                                            left: -10px;
                                            background-color: @white-lighter;
                                            padding: 0;
                                            text-align: left;
                                            will-change: visibility, opacity;
                                            min-width: 220px;
                                            border: 1px solid @gray-lighter;
                                            .vendor(transition, all .3s ease-in-out);
                                            .vendor(transform, translate(0, 30px));
                                            @media screen and (max-width: 1100px){
                                                transform: none;
                                                display: none;
                                                border: 0;
                                                float: none;
                                                line-height: normal;
                                            }
                                            > .azen-menu-item {
                                                float:none;
                                                &:before{
                                                    right: 15px;
                                                    left: 15px;
                                                    @media screen and (max-width: 1100px){
                                                        left: 0;
                                                        right: 0;
                                                    }
                                                }
                                                &.azen-menu-item-has-children {
                                                    &::after{
                                                        font-size: @font-size-base;
                                                        content: "\f105";
                                                        position: absolute;
                                                        right: 30px;
                                                        top: 50%;
                                                        color: @black;
                                                        letter-spacing: 0;
                                                        line-height: 20px;
                                                        display: inline-block;
                                                        vertical-align: middle;
                                                        font-family: FontAwesome;
                                                        .vendor(transform, translateY(-50%));
                                                        .vendor(transition, color 0.2s ease);
                                                    }
                                                    @media screen and (max-width: 1100px){
                                                        &::after{
                                                            content: none;
                                                        }
                                                        > a.azen-menu-link{
                                                            &:after{
                                                                position: absolute;
                                                                top: 50%;
                                                                right: 18px;
                                                                .vendor(transform, translate(0, -50%));
                                                                font-size: @font-size-base - 1px;
                                                                content: "\f107" !important;
                                                                line-height: @spacing;
                                                                display: inline-block;
                                                                vertical-align: top;
                                                                margin-left: 10px;
                                                                font-family: FontAwesome;
                                                                line-height: 45px;
                                                                right: 0px;
                                                                border: 0;
                                                                background: transparent;
                                                                height: auto;
                                                                left: auto;
                                                                bottom: auto;
                                                                margin: 0;
                                                            }
                                                        }
                                                    }
                                                }
                                                &:hover {
                                                    > a.azen-menu-link {
                                                        color: @brand-color;
                                                    }
                                                    &.azen-menu-item-has-children::after {
                                                        color: @brand-color;
                                                    }
                                                }
                                                &:last-child{
                                                    > a.azen-menu-link {
                                                        &:after{
                                                            content: none;
                                                        }
                                                    }
                                                }
                                                > a.azen-menu-link {
                                                    padding: 0 @menu-item-h-padding;
                                                    display: block;
                                                    font-weight: 400;
                                                    white-space: nowrap;
                                                    position: relative;
                                                    line-height: 50px;
                                                    font-size: @font-size-base;
                                                    text-transform: none;
                                                    letter-spacing: normal;
                                                    color: @black;
                                                    &::after {
                                                        content: "";
                                                        /*position: absolute;*/
                                                        height: 1px;
                                                        left: @menu-item-h-padding - @menu-item-h-padding;
                                                        right: @menu-item-h-padding - @menu-item-h-padding;
                                                        bottom: 0;
                                                        margin: 0 -30px;
                                                        background-color: @gray-lighter;
                                                    }
                                                    &:hover {
                                                        color: @brand-color;
                                                    }

                                                    @media screen and (max-width: 1100px){
                                                        white-space: nowrap;
                                                        position: relative;
                                                        color: @black-dark;
                                                        padding: 0;
                                                        text-transform: uppercase;
                                                        font-size: @font-size-base - 1px;
                                                        left: 0;
                                                        line-height: 40px;
                                                        &:after{
                                                            content: none;
                                                        }
                                                    }
                                                }
                                                > .azen-sub-menu {
                                                    top: -1px; 
                                                    left: 100%;
                                                    @media screen and (max-width: 1100px){
                                                        top: auto;
                                                        left: auto;
                                                    }
                                                }
                                            }
                                        }    
                                    }
                                }
                                .description {
                                    display: none;
                                }
                                @media (max-width: 1100px) {
                                    position: absolute;
                                    top: 91px;
                                    right: 0;
                                    left: 0;
                                    visibility: hidden;
                                    opacity: 0;
                                    .vendor(transform, translate(0, 30px));
                                    .vendor(transition, all .65s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s);
                                }
                                &:empty {
                                    height: 66px;
                                }
                            }
                        }
                    }
                    .after-clear();
                }
            }
        }
    }
    .azen-citra-middle-one{
        .bg-max();
        &[data-darken-background="true"]{
            &:before{
                content: " ";
                .absolute();
                background-color: fade(@black-darker, 70%);
                z-index: 1;
            }
        }
        .azen-middle-wrapper{
            padding: 199px 0 115px;
            display: table;
            .text-center();
            width: 100%;
            position: relative;
            z-index: 2;
            > div{
                display: table-cell;
                vertical-align: bottom;
                *{
                    color: @white-lighter;
                }
                > div{
                    &:first-child{
                        > span{
                            display: block;
                            margin-bottom: 5px;
                            display: inline-block;
                            text-transform: uppercase;
                            .text-style-lato(inherit, @font-size-large + 32px, 700, 60px);
                        }
                    }
                    &:last-child{
                        a{
                            .vendor(transition, all .3s linear);
                            &:hover{
                                color: @brand-color;
                            }
                        }
                        > *{
                            .text-style-klara(inherit, @font-size-base - 1px, 600, 30px);
                            text-transform: uppercase;
                            letter-spacing: 7px;
                            &:after{
                                content: "/";
                                display: inline;
                                padding: 0 10px;
                                color: @white-lighter;
                            }
                            &:last-child{
                                &:after{
                                    content: none;
                                }

                            }
                        }
                    }
                }
                > div{
                    a{
                    }
                    span{
                    }
                }
            }
        }
    }
    .azen-citra-subfooter{
        &:before{
            .pe(none);
            content: " ";
            .absolute();
            background-color: mix(lighten(@brand-color, 25%), spin(@brand-color, -24%));
        }
        .azen-subfooter-wrapper{
            padding: 76px 0;
            position: relative;
            .flex(space-between, nowrap, stretch, center);
            @media screen and (max-width: 992px){
                .flex(center, wrap, stretch, center);
                .text-center();
            }
            > div{
                &:first-child{
                    flex: 3;
                    .flex(space-between, nowrap, stretch, center);
                    @media screen and (max-width: 992px){
                        .vendor(flex, inherit);
                        margin-bottom: 35px;
                    }
                    > div{
                        &:first-child{
                            width: 123px;
                            float: left;
                            position: relative;
                            &:after{
                                content: "|";
                                position: absolute;
                                top: 50%;
                                right: 0;
                                bottom: 0;
                                width: 1px;
                                height: 100%;
                                color: inherit;
                                .vendor(transform, translate(0, -50%) scale(.3, 7.2));
                            }
                            img{
                                max-width: 75px;
                            }
                            @media screen and (max-width: 992px){
                                display: none;
                            }
                        }
                        &:last-child{
                            float: right;
                            width: ~"calc(100% - (123px + 75px))";
                            .text-style-klara(inherit, @font-size-large + 10px, 700, 34px);
                            @media screen and (max-width: 992px){
                                width: auto;
                            }

                        }
                        .after-clear();
                    }
                }
                &:last-child{
                    flex: 1;
                    text-align: right;
                    @media screen and (max-width: 992px){
                        .vendor(flex, inherit);
                        .text-center();
                    }
                    a{
                        .button-citra(transparent, 30px, @white-lighter, @white-lighter, @black-dark, transparent, @white-lighter);
                        .text-style-klara(inherit, @font-size-base - 1px, 700, 48px);
                    }
                }
            }
        }

    }
    .azen-citra-footer{
        .bg-max();

        &:before{
            content: " ";
            .absolute();
            background-color: @white;

        }
        color: @black-darker;
        .azen-footer-wrapper{
            padding: 108px 0 81px;
            > div{
                position: relative;
                &:first-child{
                    margin-bottom: 28px;
                    @media screen and (max-width: 768px){
                        .text-center();
                    }
                    > div{
                        margin-bottom: 50px;
                        &:first-child{
                            > div{
                                &:nth-child(2){
                                    margin-bottom: 33px;
                                    padding-right: 10px;
                                    opacity: .45;
                                    @media screen and (max-width: 768px){
                                        padding-right: 0;
                                    }
                                }
                            }
                        }
                        > div{
                            img{
                                margin-bottom: 23px;
                            }
                            + div{
                                .text-style-klara(inherit, @font-size-base, 400, 24px);
                                > span{
                                    .read-more(@brand-color, inherit, @gray-light, -.5px,
                                    @font-size-base - 1px, 28px, @brand-color, transparent, .25s, 0s, .6);
                                }
                            }
                        }
                        > span, > span + div > a{
                            text-transform: uppercase;
                            display: block;
                        }
                        &:not(:last-child){
                            > span{
                                + div{
                                    a{
                                        opacity: .55;
                                    }
                                }
                            }
                        }
                        > span{
                            margin-bottom: 15px;
                            .text-style-klara(inherit, @font-size-base + 1px, 700, 34px);
                            + div{
                                a{
                                    .text-style-klara(inherit, @font-size-base - 2px, 700, 26px);
                                    padding-bottom: 4px;
                                    .vendor(transition, all .2s linear);
                                    font{
                                        .vendor(transition, all .2s linear);
                                    }
                                    &:hover, > font:hover{
                                        color: @brand-color;
                                    }
                                    &:last-child{
                                        padding-bottom: 0;
                                    }
                                }
                            }
                        }
                        &:last-child{
                            > span{
                                margin-bottom: 23px;
                            }
                            > div{
                                padding: 0;
                                margin-right: -11px;
                                .flex(space-between, wrap, stretch, center);
                                > div{
                                    width: ~"calc(100%/3 - 11px)";
                                    margin-bottom: 11px;
                                    margin-right: 11px;
                                    position: relative;
                                    overflow: hidden;
                                    &:hover{
                                        > a{
                                            &:before{
                                                background-color: fade(@brand-color, 40%)
                                            }
                                        }
                                    }
                                    > a{
                                        padding-top: 50%;
                                        padding-bottom: 50%;
                                        display: block;
                                        &:before{
                                            .pe(none);
                                            content: " ";
                                            .absolute();
                                            z-index: 2;
                                            .vendor(transition, all .2s linear);
                                            background-color: fade(@brand-color, 0%)
                                        }
                                        > div{
                                            .absolute();
                                            .bg-max();
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                &:last-child{
                    > div{
                        .text-style-klara(inherit, @font-size-base - 2px, 700, 26px);
                        text-transform: uppercase;
                        .text-center();
                        opacity: .2;
                    }
                }
            }
        }
        &[data-darken-background="true"]{
            color: @white-lighter;
            &:before{
                content: " ";
                .absolute();
                background-color: fade(@black-darker, 85%);
            }
            .azen-footer-wrapper{
                > div{
                    > div{

                        &:first-child{
                            > div{
                                &:nth-child(2){
                                    opacity: .8;
                                }
                            }
                            > div{
                                + div{
                                    > span{
                                        border-color: @black-light;
                                        > a{
                                            opacity: .8;
                                        }
                                    }
                                }
                            }
                        }
                        &:not(:last-child){
                            > span{
                                + div{
                                    a{
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                    } 
                    &:last-child{
                        > div{
                            font-weight: 400;
                            opacity: .7;
                        }
                    }
                }
            }
        }
    }
    .azen-citra-slider{
        .text-center();
        &[data-darken-background="true"]{
            .azen-slider-wrapper{
                .azen-citra-item-wrapper{
                    > div{
                        > div{
                            &:first-child{
                                .before-dark(@black-darker, 70%);
                                > div{
                                }
                            }
                        }
                    }
                }
            }
        }
        .azen-slider-wrapper{
            .azen-citra-flex-slider{
                .az-flex-direction-nav{
                    display: block;
                    z-index: 2;
                    position: absolute;
                    right: 0;
                    left: 0;
                    top: 50%;
                    .vendor(transform, translate(0, -50%));
                    pointer-events: none;
                    height: 41px;
                    @media screen and (max-width: 680px){
                        display: none;
                    }
                    > a{
                        .pe(all);
                        position: absolute;
                        top: 50%;
                        .vendor(transform, translate(0, -50%));
                        width: 30px;
                        display: block;
                        .text-style-klara(inherit, @font-size-base - 1px, 700, 17px);
                        text-transform: uppercase;
                        letter-spacing: 3px;
                        &:after{
                            content: " ";
                            .absolute();
                            right: 6px;
                            left: 3px;
                            bottom: -8px;
                            .pe(none);
                            .vendor(transition, all .3s linear);
                            .vendor(transform, translate(0, 10px));
                            will-change: transform;
                            border-bottom: 2px solid transparent;
                        }
                        &:hover{
                            &:after{
                                border-color: @white-lighter;
                                .vendor(transform, translate(0, 0px));
                            }
                            > span, div, div span{
                                opacity: .8;
                            }
                        }
                        &:first-child{
                            left: 50px;
                            @media screen and (max-width: 992px){
                                left: 10px
                            }
                        }
                        &:last-child{
                            right: 50px;
                            @media screen and (max-width: 992px){
                                right: 10px
                            }
                        }
                        > span{
                            text-align: left;
                            position: relative;
                        }
                        > span, div, div span{
                            display: inline-block;
                            width: 25px;
                            word-break: break-all;
                            opacity: .4;

                        }
                    }
                }
            }
            .azen-citra-item-wrapper{
                > div{
                    .flex(center, nowrap, stretch, center);
                    height: 100vh;
                    margin: 0 auto;
                    width: 100%;
                    @media screen and (max-width: 480px){
                        padding: 120px 0 31px;

                    }
                    > div{
                        &:first-child{
                            .bg-max();
                            .absolute();
                            z-index: 1;
                            > div{
                            }
                        }
                        &:last-child{
                            z-index: 2;
                            position: relative;
                            margin: 0 auto;
                            max-width: 730px;
                            @media screen and (max-width: 992px){
                                max-width: 600px;
                            }
                            > span{
                                display: block;
                                text-transform: uppercase;
                                &:first-of-type{
                                    .text-style-klara(inherit, @font-size-large + 2px, 700, 30px);
                                    letter-spacing: 10px;
                                    margin-bottom: 8px;
                                }
                                &:last-of-type{
                                    .text-style-lato(inherit, @font-size-large + 32px, 700, 50px);
                                    margin-bottom: 30px;
                                }
                            }
                            > div{
                                &:first-of-type{
                                    .text-style-klara(inherit, @font-size-large, 400, 26px);
                                    margin-bottom: 52px;
                                }
                                &:last-of-type{
                                    position: relative;
                                    > a{
                                        display: inline-block;
                                        vertical-align: top;
                                        &:nth-child(2){
                                            width: 28px;
                                            height: 28px;
                                            border: 1px solid fade(@white-lighter, 30%);
                                            border-radius: 50%;
                                            line-height: 28px;
                                            margin: 100px 30px 0 30px;
                                            .vendor(transition, all .3s linear);
                                            &:before{
                                                content: " ";
                                                position: absolute;
                                                top: 0;
                                                left: 50%;
                                                .vendor(transform, translate(-50%, 0));
                                                width: 1px;
                                                height: ~"calc(100% - 50px)";
                                                bottom: 0;
                                                border-right: 1px solid fade(@white-lighter, 30%);
                                            }
                                            &:hover{
                                                color: @black-dark;
                                                background-color: @white-lighter;
                                            }
                                            @media screen and (max-width: 480px){
                                                display: none;
                                            }
                                        }
                                        &:not(:nth-child(2)){
                                            &:first-child{
                                                background-color: mix(lighten(@brand-color, 25%), spin(@brand-color, -24%));
                                            }
                                            &:last-child{
                                            }
                                            .text-style-klara(inherit, @font-size-base - 1px, 700, 45px);
                                            .button-citra(@brand-color, 29px, transparent, transparent, @black-dark, @white-lighter, @white-lighter);
                                            border: 0;
                                            &:after{
                                                content: none;
                                            }
                                            @media screen and (max-width: 480px){
                                                display: block;
                                                margin-bottom: 25px;
                                            }
                                        }
                                        > span{

                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .azen-citra-isotope{
        .azen-isotope-wrapper{
            position: relative;
            padding: 177px 0 110px;
            > span{
                .syle-citra-icon();
            }
            > div{
                &:first-of-type{
                    max-width: ~"calc(40% + 27px)";
                    float: left;
                    margin-bottom: 55px;
                    .isotope-text-title();
                    @media screen and (max-width: 992px){
                        float: none;
                        max-width: 100%;
                        .text-center();
                    }
                }
                &:last-of-type{
                    position: relative;
                    .pe(none);
                    > span{
                        &:first-of-type{
                            .syle-citra-text();
                        }
                        &:last-of-type{
                            display: block;
                            .text-center();
                            > a{
                                .pe(all);
                                .button-citra(transparent, 36px, @gray-lighter, @brand-color, @white-lighter, transparent, @brand-color);
                                .text-style-klara(@black-lighter, @font-size-base - 1px, 700, 48px);
                            }
                        }
                    }
                    > div{
                        margin-bottom: 44px;
                        > div{
                            &:first-child{
                                .pe(all);
                                max-width: ~"calc(60% - 27px)";
                                float: right;
                                margin-top: 37px;
                                margin-bottom: 50px;
                                text-align: right;
                                @media screen and (max-width: 992px){
                                    float: none;
                                    max-width: 100%;
                                    text-align: center;
                                    margin-bottom: 40px;
                                }
                                .isotope-content-tabs();
                                .after-clear();
                            }
                            &:last-child{
                                clear: both;
                                .azen-isotope-item{
                                    .pe(all);
                                    margin-bottom: 30px;
                                    &[data-grid-width="3"]{
                                        width: ~"calc(100%/3 - 20px)";//60/3=20
                                        @media screen and (max-width: 992px){
                                            width: ~"calc(100%/2 - 15px)";//30/2=15
                                        }
                                        @media screen and (max-width: 680px){
                                            width: ~"calc(100%/1 - 0px)";//0
                                        }
                                    }
                                    &[data-grid-width="2"]{
                                        width: ~"calc(100%/1.5 - 10px)";
                                        @media screen and (max-width: 992px){
                                            width: ~"calc(100%/2 - 15px)";
                                        }
                                        @media screen and (max-width: 680px){
                                            width: ~"calc(100%/1 - 0px)";
                                        }
                                    }
                                    &[data-grid-width="1"]{
                                        width: 100%/1;
                                    }
                                    .visibility-content-isotope(@brand-color, 85%);
                                    @media screen and (max-width: 680px){
                                        .text-center();
                                    }
                                }
                            }
                        }
                    }
                    .after-clear();
                }
            }
        }
    }
    .azen-citra-flexible{
        .bg-max();
        &[data-darken-background="true"]{
            .before-dark(@black-darker, 85);
        }
        .azen-flexible-wrapper{
            padding: 103px 0 50px;
            position: relative;
            .text-center();
            > div{
                &:first-child{
                    margin-bottom: 68px;
                    > div, > span:last-of-type{
                        text-transform: uppercase;
                    }
                    > span{
                        display: block;
                        &:first-of-type{
                            font-size: 35px;
                            color: @white-lighter;
                            margin-bottom: 16px;
                        }
                        &:last-of-type{
                            margin-bottom: 9px;
                            .text-style-klara(@white-lighter, @font-size-large + 10px, 700, 35px);
                        }
                    }
                    > div{
                        .text-style-klara(@white-lighter, @font-size-base + 1px, 400, 20px);
                        letter-spacing: 5px;
                    }
                }
                &:last-child{
                    .flex(center, wrap, flex-start, flex-start);
                    overflow: hidden;
                    margin: 0 -35px;
                    text-align: left;
                    @media screen and (max-width: 768px){
                        display: block;
                        margin: 0;
                        .text-center();
                    }
                    > div{
                        width: ~"calc((100%/3) - 70px)";
                        padding: 0 35px;
                        margin-bottom: 70px;
                        @media screen and (max-width: 992px){
                            width: ~"calc((100%/2) - 70px)";

                        }
                        @media screen and (max-width: 768px){
                            width: ~"calc((100%/1) - 0px)";
                            padding: 0;
                        }
                        > div{
                            padding: 0 35px;
                            @media screen and (max-width: 1200px){
                                padding: 0;
                            }
                            @media screen and (max-width: 992px){
                                padding: 0 35px;
                            }
                            > div{
                                &:first-of-type{
                                    margin-bottom: 56px;
                                    padding-bottom: 63px;
                                    position: relative;
                                    @media screen and (max-width: 768px){
                                        display: inline-block;
                                    }
                                    &:after{
                                        content: " ";
                                        position: absolute;
                                        right: -35px;
                                        bottom: 0;
                                        left: -35px;
                                        width: ~"calc(100% + 70px)";
                                        border-bottom: 1px solid fade(@black-light, 50%);
                                        @media screen and (max-width: 1200px){
                                            right: 0;
                                            left: 0;
                                            width: ~"calc(100% + 0px)";
                                        }
                                        @media screen and (max-width: 992px){
                                            right: -35px;
                                            left: -35px;
                                            width: ~"calc(100% + 70px)";
                                        }
                                    }
                                    > *{
                                        text-transform: uppercase;
                                        display: inline-block;
                                        vertical-align: bottom;
                                    }
                                    > span{
                                        text-align: right;
                                        margin-right: 12px;
                                        max-width: 94px;
                                        > span{
                                            display: block;
                                            &:first-child{
                                                .text-style-klara(@white-lighter, @font-size-large, 700, 20px);
                                                margin-bottom: 9px;
                                            }
                                            &:last-child{
                                                .text-style-klara(@white-lighter, @font-size-large + 6px, 400, 20px);
                                                position: relative;
                                                margin-bottom: 18px;
                                                &:after{
                                                    content: " ";
                                                    position: absolute;
                                                    right: 0;
                                                    bottom: -15px;
                                                    width: 60px;
                                                    border-bottom: 1px solid @brand-color;
                                                }
                                            }
                                        }
                                    }
                                    > div{
                                        text-align: left;
                                        > span{
                                            &:first-child{
                                                .text-style-klara(@white-lighter, @font-size-large + 52px, 700, 50px);
                                                letter-spacing: -1px;
                                            }
                                            &:last-child{
                                                .text-style-klara(@white-lighter, @font-size-large, 400, 20px);
                                            }
                                        }
                                    }
                                    .after-clear();
                                }
                                &:last-of-type{
                                    margin-bottom: 51px;
                                    padding: 0 7px;
                                    > div{
                                        .text-style-klara(@white-lighter, @font-size-base, 400, 20px);
                                        margin-bottom: 16px;
                                    }
                                }
                            }
                            > a{
                                .text-style-klara(@white-lighter, @font-size-base - 1px, 400, 43px);
                                .button-citra(transparent, 29px, @gray-light, @white-lighter, @black-dark, transparent, @white-lighter);
                            }
                        }
                    }
                }
            }
        }
    }
    .azen-citra-flex-slider-ad-paralax{
        .bg-max();
        &[data-darken-background="true"]{
            color: @white-lighter;
            .before-dark(@black-darker, 85%);
            .azen-slider-wrapper{
                position: relative;
                .text-center();
                > div{
                    &:first-child{
                        > span{
                            &:first-of-type{
                                opacity: 1;
                            }
                        }
                        > div{
                            opacity: .8;
                        }
                    }
                    &:last-child{
                        > div{
                            > div{
                                &:first-child{
                                    > div{
                                        > div{
                                            &:first-child{
                                                opacity: 1;
                                            }
                                            &:last-child{
                                                > div{
                                                    > div{
                                                        > span{

                                                            &:last-child{
                                                                opacity: .7;
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                                &:nth-child(2){
                                    > div{
                                        .azen-number-thumb{

                                            &:hover{
                                                &:before{
                                                    opacity: .8;
                                                }
                                            }
                                            &.az-flex-active-slide{
                                                &:before{
                                                    opacity: .8;
                                                }
                                                &:after{
                                                    opacity: 1;
                                                }
                                            }
                                            &:before{
                                                opacity: .3;

                                            }
                                            &:after{
                                                opacity: 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        padding-top: 110px;
        padding-bottom: 179px;
        color: @black-dark;
        /*padding: 110px 0 179px;*/
        .azen-slider-wrapper{
            position: relative;
            .text-center();
            > div{
                &:first-child{
                    margin-bottom: 53px;
                    > *{
                        text-transform: uppercase;
                    }
                    > span{
                        display: block;
                        color: inherit;
                        &:first-of-type{
                            font-size: 35px;
                            opacity: .7;
                            margin-bottom: 23px;
                        }
                        &:last-of-type{
                            .text-style-klara(inherit, @font-size-large + 10px, 700, 30px);
                            letter-spacing: .2px;
                            margin-bottom: 7px;
                        }
                    }
                    > div{
                        .text-style-klara(inherit, 16px, 400, 20px);
                        opacity: .4;
                        letter-spacing: 2.5px;
                    }
                }
                &:last-child{
                    //////
                    .az-slider{
                        .az-thumbnails{
                            position: absolute;
                            top: ~"calc(100% + 39px)";
                            left: 50%;
                            .vendor(transform, translate(-50%, 0));
                            > .az-flex-direction-nav{
                                display: none;
                            }
                            .az-flex-viewport{
                                display: inline-block;
                                .az-flex-thumbnails{
                                    counter-reset: section;
                                    .text-center();
                                }
                            }
                        }
                        .az-flex-direction-nav{
                        }
                    }
                    ///////
                    > div{
                        > div{
                            &:first-child{
                                > div{
                                    > div{
                                        max-width: 932px;
                                        margin: 0 auto;
                                        @media screen and (max-width: 992px){
                                            max-width: 700px;
                                        }
                                        &:first-child{
                                            .text-style-klara(inherit, 17px, 700, 29px);
                                            opacity: .7;
                                            margin-bottom: 36px;
                                        }
                                        &:last-child{
                                            display: inline-block;
                                            > div{
                                                display: table;
                                                > *{
                                                    display: table-cell;
                                                    vertical-align: middle;
                                                }
                                                > div{
                                                    &:first-child{
                                                        padding-right: 15px;
                                                    }
                                                    > img{
                                                        border-radius: 50%;
                                                        max-width: 75px;
                                                        max-height: 75px;
                                                    }
                                                    > span{
                                                        &:first-child{
                                                            .title-style-citra(22px, @font-size-large - 2px, none, 60px, 6px);
                                                            color: inherit;
                                                            float: left;
                                                            margin-right: 10px;
                                                        }
                                                        &:last-child{
                                                            float: right;
                                                            .text-style-klara(inherit, 14px, 400, 32px);
                                                            font-style: italic;
                                                            opacity: .9;
                                                        }
                                                    }
                                                    > span:first-child, > span:last-child{
                                                        margin-bottom: -10px;
                                                    }
                                                    .after-clear();
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            &:nth-child(2){
                                > div{
                                    font-size: 0;
                                    .azen-number-thumb{
                                        position: relative;
                                        margin: 0 5px;
                                        &:hover{
                                            &:before{
                                                opacity: .3;
                                            }
                                        }
                                        &.az-flex-active-slide{
                                            &:before{
                                                opacity: .3;
                                            }
                                            &:after{
                                                opacity: .1;
                                                .vendor(transform, translate(0, 0));
                                            }
                                        }
                                        display: inline-block !important;
                                        width: 30px !important;
                                        &:before, &:after{
                                            content: " ";
                                            .vendor(transition, all .3s linear);
                                        }
                                        &:before{
                                            width: 30px;
                                            .text-style-klara(inherit, @font-size-base + 5px, 700, 30px);
                                            font-size: 20px;
                                            cursor: pointer;
                                            opacity: .1;
                                            counter-increment: section;             
                                            content: "0"counter(section); 
                                        }
                                        &:after{
                                            border-bottom: 2px solid;
                                            border-color: inherit;
                                            .vendor(transform, translate(0, 2px));
                                            position: absolute;
                                            opacity: 0;
                                            right: 5px;
                                            width: ~"calc(100% - 10px)";
                                            bottom: 0;
                                            left: 5px;
                                        }
                                    }
                                    &:last-child{
                                        display: none;
                                    }
                                }
                            }
                        }
                        > .az-flex-direction-nav{
                            display: block;
                            margin: 0 auto;
                            z-index: 2;
                            position: absolute;
                            right: 0;
                            left: 0;
                            top: 50%;
                            .vendor(transform, translate(0, -50%));
                            pointer-events: none;
                            height: 60px;
                            @media screen and (max-width: 800px){
                                display: none;
                            }
                            > a{
                                .pe(all);
                                position: absolute;
                                top: 50%;
                                .vendor(transform, translate(0, -50%));
                                width: 10px;
                                display: block;
                                .text-style-klara(inherit, @font-size-base - 1px, 700, 17px);
                                text-transform: uppercase;
                                letter-spacing: 0px;
                                .long(@property){
                                    @{property}: -68px;
                                    @media screen and (max-width: 1100px){
                                        @{property}: -30px
                                    }
                                }
                                &:first-child{
                                    /*left: -68px;*/
                                    .long(left);
                                }
                                &:last-child{
                                    /*right: -68px;*/
                                    .long(right);
                                }
                                > span, div, div span{
                                    display: inline-block;
                                    .vendor(transition, all .2s linear);
                                    word-break: break-all;
                                    opacity: .3;
                                }
                                &:hover{
                                    > span, div, div span{
                                        color: @brand-color;
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .azen-citra-section-future, .azen-citra-e-section-future{
        &[data-alternative-styles="true"]{
            .azen-future-wrapper{
                position: relative;
                > span{
                    left: 50%;
                    .vendor(transform, translate(-50%, 0));
                    &:before{
                        border-color: @gray-lighter;
                    }
                    > a{
                        border-color: @gray-lighter;
                    }
                }
                > div{
                    > span{
                        right: -75px;
                        left: 0;
                        > span{
                            right: 0;
                            left: auto;
                            color: @white-lighter;
                            .vendor(transform, translate(50%, 100%) rotate(-90deg) translate(-50%, -100%));
                            /*translate(50%, 100%) rotate(-90deg) translate(-50%, -100%)*/
                        }
                    }
                }
            }
        }
        .azen-future-wrapper{
            position: relative;
            > span{
                .syle-citra-icon();
            }
            > div{
                position: relative;
                > div{
                }
                > span{
                    .syle-citra-text();
                }
            }
            .after-clear();
        }
    }
    .azen-citra-intelligent-the-best-text{
        .intelligent-the-best-text(50px);
    }
    .azen-citra-services{
        margin-bottom: 30px;
        .azen-text-wrapper{
            display: block;
            padding: 41px 45px 42px;
            @media screen and (max-width: 400px){
                padding: 41px 25px 42px;
            }
            &:hover{
                > div{
                    &:last-child{
                        > div{
                            &:last-child{
                                &:after{
                                    border-color: @brand-color;
                                }
                            }
                        }
                    }
                }
            }
            > div{
                display: inline-block;
                vertical-align: middle;
                &:first-child{
                    width: 45px;
                    margin-right: -5px;
                    > span{
                        font-size: 41px;
                        color: fade(@black, 80%);
                    }
                }
                &:last-child{
                    width: ~"calc(100% - 45px)";
                    > div{
                        &:first-child{
                            .text-style-klara(@black-light, @font-size-large, 400, 20px);
                            padding-left: 21px;
                        }
                        &:last-child{
                            .title-style-citra(0, @font-size-large + 2px, uppercase, 70px, 11px);
                            font-weight: 700;
                            color: @black;
                            &:after{
                                .vendor(transition, all .2s linear);
                            }
                        }
                    }
                }
            }
            .after-clear();
        }
    }
    .azen-citra-status-bar{
        > div{
            margin-bottom: 46px;
            &:nth-child(2n + 2){
                > div{
                    &:last-child{
                        > div{
                            > div{
                                background-color: @black-light;
                            }
                        }
                    }
                }
            }
            > div{
                &:first-child{
                    .text-style-klara(@black, @font-size-base - 1px, 700, 20px);
                    text-transform: uppercase;
                    font-style: italic;
                    margin-bottom: 12px;
                }
                &:last-child{
                    .flex(space-between, nowrap, strech, flex-end);
                    > span{
                        &:first-child{
                            color: @black-light;
                            line-height: 10px;
                            width: 14px;
                            padding-right: 6px;
                            font-size: 14px;
                        }
                        &:last-child{
                            .text-style-klara(@black, @font-size-base + 1px, 400, 10px);
                            padding-left: 25px;
                        }
                    }
                    > div{
                        position: relative;
                        width: 100%;
                        height: 3px;
                        background-color: @white;
                        > div{
                            .absolute();
                            top: auto;
                            height: 3px;
                            background-color: @brand-color;
                        }
                    }
                }
            }
        }
    }
    .azen-citra-text{
        font-family: "@{google-font-family-Karla}";
    }
    .azen-citra-idea{
        font-size: @font-size-small - @font-size-small;
        margin-bottom: 51px;
        > div{
            display: inline-block;
            position: relative;
            img{
                .img();
            }
            > div{
                .pe(none);
                .absolute();
                background: linear-gradient(to top, fade(@black-darker, 60%), transparent 64%);
                > div{
                    .flex(flex-start, wrap, stretch, flex-end);
                    height: 100%;
                    > div{
                        padding: 0 22px;
                        box-sizing: border-box;
                        width: 100%;
                        > div{
                            .pe(all);
                            &:first-child{
                                .text-style-klara(@white-lighter, @font-size-base + 13px, 400, 30px);
                                margin-bottom: 8px;

                            }
                            &:last-child{
                                .text-style-klara(@white-lighter, @font-size-base + 33px, 700, 30px);
                                text-transform: uppercase;

                            }
                        }
                    }
                }
            }
        }
    }
    .azen-citra-button-read-more{
        > span{
            .read-more(@black-dark, @brand-color, @white-darker, -.5px,
            @font-size-base - 1px, 28px, @brand-color, @black-dark, 0s, 0s, 1);
        }
    }
    .azen-citra-e-title-future{
        font-size: 0;
        > .azen-citra-wrapper{
            display: inline-block;
            > div{
                &:first-child{
                    .text-style-klara(@gray-dark, @font-size-large + 2px, 400, 20px);
                    text-transform: uppercase;
                    letter-spacing: 4px;
                    margin-bottom: 14px;
                }
                &:last-child{
                    .text-style-klara(@black, @font-size-large + 26px, 700, 40px);
                    letter-spacing: 1px;
                }
            }
        }
        .after-clear();
    }
    .azen-citra-e-the-text-mega-icon{
        .azen-citra-the-text-mega-icon();
    }
    .azen-citra-presentation{
        &:before{
            content: " ";
            .absolute();
            top: auto;
            border-bottom: 1px solid @white;
            .pe(none);
        }
        .azen-citra-wrapper{
            > div{
                &:first-child{
                    .absolute();
                    bottom: -1px;
                    width: 40%;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center right;
                    width: ~"calc(50% - 50px)";
                    @media screen and (max-width: 992px){
                        width: ~"calc(50% - 150px)";
                    }
                    @media screen and (max-width: 768px){
                        height: 300px;
                        width: auto;
                        background-position: center;
                    }
                }
                &:last-child{
                    float: right;
                    width: ~"calc(50% - 50px)";
                    @media screen and (max-width: 992px){
                        width: ~"calc(50% + 50px)";
                    }
                    @media screen and (max-width: 768px){
                        width: auto;
                        float: none;
                        padding-top: 294px;
                    }
                    > div{
                        &:first-child{
                            padding-bottom: 55px;
                            > div{
                                .azen-citra-the-text-mega-icon();
                            }
                            @media screen and (max-width: 768px){
                                padding-top: 350px;
                            }
                        }
                        &:last-child{
                            .flex(space-between, wrap, flex-start, flex-start);
                            @media screen and (max-width: 500px){
                                .vendor(justify-content, center);
                                > div{
                                    margin-right: 30px;
                                    margin-left: 30px;
                                }
                            }
                            > div{
                                .azen-citra-number(30px);
                            }
                        }
                    }
                }
                .after-clear();
            }
        }
        .after-clear();
    }
    .azen-citra-number{
        .azen-citra-number(30px);
    }
    .azen-citra-the-clean-slinear-carusel{
        .azen-clean-wrapper{
            .flex(space-between, wrap, flex-start, flex-start);
            @media screen and (max-width: 768px){
                display: block;
                .text-center();
            }
            > div{
                &:first-child{
                    width: 195px;
                    box-sizing: border-box;
                    float: left;
                    > a{
                        .text-style-klara(@brand-color, @font-size-base + 5px, 700, 30px);
                        .title-style-citra(21px, @font-size-large + 2px, none, 70px, 7px);
                    }
                    @media screen and (max-width: 768px){
                        float: none;
                        width: auto;
                        margin-bottom: 30px;
                    }
                }
                &:last-child{
                    float: right;
                    padding-left: 34px;
                    width: ~"calc(100% - (198px + 34px))";
                    position: relative;
                    @media screen and (max-width: 768px){
                        float: none;
                        width: auto;
                        padding: 0;
                        margin: 0;
                    }
                    &:before{
                        content: " ";
                        position: absolute;
                        top: 4px;
                        left: 0;
                        bottom: 0;
                        height: 100%;
                        border-left: 1px solid @white-darker;
                        @media screen and (max-width: 768px){
                            content: none;
                        }
                    }
                    .azen-clean-item{
                        > div{
                            &:first-child{
                                margin-bottom: 18px;
                                > span{
                                    .text-style-klara(@black, @font-size-base + 1px, 700, 25px);

                                }
                            }
                            &:last-child{
                                .text-style-klara(@black-light, @font-size-base, 400, 24px);
                            }

                        }
                    }
                }
            }
            .az-owl-dots{
                display: block;
                position: absolute;
                bottom: 0;
                left: -177px;//198 - 21px
                font-size: 0;
                @media screen and (max-width: 768px){
                    position: relative;
                    left: auto;
                    bottom: auto;
                    padding-top: 30px;
                }
                > div.az-owl-dot{
                    display: inline-block;
                    &.active{
                        > span{
                            background-color: @gray-light;
                        }
                    }
                    > span{
                        width: 6px;
                        height: 6px;
                        margin: 3px 3px;
                        background: transparent;
                        border: 1px solid @gray-light;
                        display: block;
                        .vendor(transition, opacity .2s ease);
                        border-radius: 50%;
                    }
                }
            }
            .after-clear();
        }
    }
    .azen-citra-logotips{
        .before-dark(@brand-color, 93%);
        .azen-logo-wrapper{
            position: relative;
            text-align: center;
            .flex(center, wrap, center, center);
            margin: 0 -35px;
            > div{
                margin: 35px;
                width: ~"calc((100% / 6) - 70px)";
                @media screen and (max-width: 992px){
                    width: ~"calc((100% / 3) - 70px)";
                }
                @media screen and (max-width: 768px){
                    width: ~"calc((100% / 2) - 70px)";
                }
                /*                display: inline-block;
                                vertical-align: middle;
                                width: 16%;
                                text-align: center;
                                @media (max-width: 935px) {
                                    width: 24%;
                                }
                                @media (max-width: 630px) {
                                    width: 32%;
                                }
                                @media (max-width: 490px) {
                                    width: 49%;
                                }*/
                > img{
                    margin: 0 auto;
                    .img();
                    /*                    margin: 15px;
                                        max-width: ~"calc(100% - 30px)";*/
                }
            }
        }
    }
    div.azen-citra-services-information {
        margin-bottom: 20px;
        > a{
            display: block;
            padding: 42px 50px;
            background-color: inherit;
            .eff();
            .eff(){
                .vendor(transition, all .2s linear);
            }
            &:hover{
                background-color: fade(@brand-color, 80%);
                > div{
                    &:first-child{
                        > span{
                            color: @white-lighter;
                        }
                        > div{
                            color: @white-lighter;
                            &:after{
                                border-color: fade(@white-lighter, 50%);
                            }
                        }
                    }
                    &:last-child{
                        color: @white-lighter;
                    }
                }
            }
            > div{
                &:first-child{
                    > span{
                        font-size: 28px;
                        color: fade(@black, 90%);
                        display: inline-block;
                        .eff();
                        float: left;
                    }
                    > div{
                        width: ~"calc(100% - 50px)";
                        .eff();
                        .text-style-klara(@black, @font-size-large, 700, 30px);
                        .title-style-citra(22px, @font-size-large, none, 60px, 11px);
                        color: @black;
                        padding-left: 16px;
                        &:after{
                            margin-left: -16px;
                        }
                    }
                    .after-clear();
                }
                &:last-child{
                    .eff();
                    .text-style-klara(@black-light, @font-size-base, 400, 24px);
                }
            }
        }
    }
    .azen-citra-creative-minds{
        margin-bottom: 30px;
        background-color: @white-lighter;
        .effect(@visible, @opacity, @f){
            .visible(@visible, @opacity);
            .vendor(transform, translate(0, @f));
        }
        &:hover{
            &[data-alternative-styles="true"]{
                .azen-minds-wrapper{
                    > div:last-child{
                        .effect(visible, 1, 0px);
                    }
                }
            }
            .azen-minds-wrapper{
                > div:first-child{
                    > div{
                        &:last-child{
                            .effect(visible, 1, 0px);
                        }
                    }
                }
            }
        }
        &[data-alternative-styles="true"]{
            .azen-minds-wrapper{
                > div{
                    &:first-child{
                        > div{
                            &:first-child{
                                height: 350px;
                            }
                            &:last-child{
                                .effect(visible, 1, 0px);
                                .vendor(transition, none);
                                right: auto;
                                top: 0;
                                bottom: auto;
                                background-color: transparent;
                                padding: 26px 0 26px 26px;
                                > div{
                                    display: block;
                                    width: auto;
                                    height: auto;
                                    padding: 0;
                                    > a{
                                        display: block;
                                        margin: 0;
                                        width: 34px;
                                        height: 34px;
                                        line-height: 34px;
                                        border-radius: 50%;
                                        background-color: @white-lighter;
                                        margin-bottom: 12px;
                                        &:hover{
                                            > span{
                                                color: @brand-color;
                                            }
                                        }
                                        > span{
                                            font-size: 12px;
                                            color: @gray-dark;

                                        }
                                    }
                                }
                            }
                        }
                    }
                    &:last-child{
                        .effect(hidden, 0, 80px);
                        .vendor(transition, all 0.35s cubic-bezier(0.4, 0, 0.2, 1));
                        .absolute();
                        top: auto;
                        padding: 18px;
                        background-color: @brand-color;
                        > div{
                            &:first-child, &:last-child{
                                color: @white-lighter;
                            }
                            &:first-child{
                                margin-bottom: 1px;
                            }
                            &:last-child{

                            }
                        }
                    }
                }
            }
        }
        .azen-minds-wrapper{
            overflow: hidden;
            position: relative;
            > div{
                .text-center();
                &:first-child{
                    position: relative;
                    > div{
                        &:first-child{
                            height: 330px;
                            .bg-max();
                            background-position: top center;
                            position: relative;
                            > a{
                                .absolute();
                            }
                        }
                        &:last-child{
                            .effect(hidden, 0, 10px);
                            .vendor(transition, all 0.45s cubic-bezier(0.4, 0, 0.2, 1));
                            position: absolute;
                            right: 0;
                            bottom: 79px;
                            left: 0;
                            background-color: @brand-color;
                            padding: 0 40px;
                            > div{
                                display: table;
                                width: 100%;
                                line-height: 30px;
                                height: 30px;
                                padding: 10px 0;
                                > a{
                                    display: inline-block;
                                    margin: 0 11px;

                                    > span{
                                        font-size: 16px;
                                        color: @white-lighter;

                                    }
                                }
                            }
                        }
                        .after-clear();
                    }
                }
                &:last-child{
                    padding: 30px;
                    > div{
                        text-transform: uppercase;
                        &:first-child{
                            .text-style-klara(@black, @font-size-base + 1px, 700, 22px);
                            margin-bottom: 5px;
                        }
                        &:last-child{
                            .text-style-klara(@black, @font-size-base - 1px, 400, 18px);
                            font-style: italic;

                        }
                    }
                }
            }
        }
    }
    .azen-citra-join-our-team{
        .azen-our-wrapper{
            .flex(space-between, wrap, center, center);
            @media screen and (max-width: 992px){
                display: block;
            }
            @media screen and (max-width: 768px){
                .text-center();
            }
            > div{
                &:first-child{
                    .vendor(flex, 3);
                    @media screen and (max-width: 992px){
                        margin-bottom: 30px;
                    }
                    > div{
                        display: inline-block;
                        vertical-align: middle;
                        @media screen and (max-width: 768px){
                            display: block;
                        }
                        &:first-child{
                            max-width: 160px;
                            > span{
                                .title-style-citra(20px, @font-size-large + 2px, none, 70px, 7px);
                                .text-style-klara(@black, @font-size-large + 2px, 700, 30px);
                            }
                            @media screen and (max-width: 768px){
                                max-width: 100%;
                            }
                        }
                        &:last-child{
                            width: ~"calc(100% - 205px)";
                            margin-left: 45px;
                            padding-left: 33px;
                            box-sizing: border-box;
                            border-left: 1px solid @white-darker;
                            @media screen and (max-width: 768px){
                                width: auto;
                                margin: 0;
                                padding: 0;
                                border: 0;
                            }
                            > div{
                                .text-style-klara(@black-light, @font-size-base, 700, 24px);
                            }
                        }
                    }
                }
                &:last-child{
                    .vendor(flex, 1);
                    text-align: right;
                    @media screen and (max-width: 992px){
                        .text-center();
                    }
                    > a{
                        .button-citra(transparent, 31px, @white-darker, transparent, @white-lighter, @brand-color, @brand-color);
                        .text-style-klara(@black-light, @font-size-base - 1px, 700, 48px);
                    }
                }
            }
        }
    }
    .azen-citra-latest-news{
        .azen-news-wrapper{
            .azen-news-wrapper-content(45px, 20px, 19px, none);
            > span{
                &:first-of-type{
                    .text-style-klara(@black-light, @font-size-base, 400, 24px);
                    margin-bottom: 34px;
                }
                &:last-of-type{
                    .read-more(@black-dark, @brand-color, @white-darker, -.5px,
                    @font-size-base - 3px, 24px, @brand-color, @black-dark, 0s, 0s, 1);
                    .aroww-start(@black-dark);
                }
            }
        }
    }
    .azen-citra-e-title-with-icon{
        > span{
            font-size: 39px;
            color: fade(@black, 80%);
            display: inline-block;
            line-height: 39px;
            margin-bottom: 25px;
        }
        > div{
            text-transform: uppercase;
            &:first-of-type{
                .text-style-klara(@black, @font-size-large + 10px, 700, 30px);
                margin-bottom: 7px;
                letter-spacing: 1px;
            }
            &:last-of-type{
                .text-style-klara(@gray-dark, @font-size-large - 2px, 400, 20px);
                letter-spacing: 3.5px;
            }
        }
    }
    .azen-citra-information{
        margin-bottom: 30px;
        background-color: @white-lighter;
        padding: 44px 36px 28px;
        > div{
            &:first-child{
                .text-style-klara(@black-light, @font-size-base, 400, 24px);
                margin-bottom: 41px;
            }
            &:last-child{
                > div{
                    .title-style-citra(24px, 0, none, 70px, 7px);
                    display: block;
                    > div{
                        &:first-child{
                            .text-style-klara(@black, @font-size-base + 1px, 700, 24px);
                            margin-bottom: 2px;
                        }
                        &:last-child{
                            > span, > a{
                                .text-style-klara(@black-light, @font-size-base, 400, 24px);
                                display: inline-block;
                                vertical-align: top;
                            }
                            > a:hover{
                                color: @brand-color;
                            }
                        }
                    }
                }
            }
        }
    }
    .azen-citra-start-by{
        &:before{
            .pe(none);
            content: " ";
            .absolute();
            background-color: mix(lighten(@brand-color, 25%), spin(@brand-color, -24%));
        }
        .azen-start-by-wrapper{
            padding: 64px 0;
            position: relative;
            > div{
                display: inline-block;
                vertical-align: middle;
                @media screen and (max-width: 768px){
                    display: block;
                    .text-center();
                }
                &:first-child{
                    width: 275px;
                    @media screen and (max-width: 768px){
                        width: auto;
                        margin-bottom: 25px;
                    }
                    a{
                        .button-citra(transparent, 30px, @white-lighter, @white-lighter, @black-dark, transparent, @white-lighter);
                        .text-style-klara(inherit, @font-size-base - 1px, 700, 48px);
                    }
                }
                &:last-child{
                    width: ~"calc(100% - (275px))";
                    padding: 5px 0 5px 75px;
                    box-sizing: border-box;
                    border-left: 1px solid;
                    border-color: inherit;
                    @media screen and (max-width: 768px){
                        width: auto;
                        padding: 0;
                        border: 0;
                    }
                    > div{
                        &:first-child{
                            .text-style-klara(inherit, @font-size-large + 10px, 700, 34px);
                            margin-bottom: 6px;
                        }
                        &:last-child{
                            .text-style-klara(inherit, @font-size-large - 1px, 400, 19px);
                        }
                    }
                }
            }
        }
    }
    .azen-citra-the-best-services{
        &[data-inverted-styles="true"]{
            .azen-information-wrapper{
                > div{
                    &:first-child{
                        > div{
                            &:first-child{
                                > span{
                                    background-color: @white;
                                    border: 0;
                                }
                            }
                        }
                    }
                }
            }

        }
        margin-bottom: 51px;
        .azen-information-wrapper{
            display: block;
            .text-center();
            &:hover{
                > div{
                    &:first-child{
                        > div{
                            &:first-child{

                                > span{
                                    color: @white-lighter;
                                    background-color: @brand-color;
                                    &:after{
                                        background-color: @white-dark;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            > div{
                &:first-child{
                    > div{
                        &:first-child{
                            margin-bottom: 24px;
                            > span{
                                font-size: 28px;
                                color: fade(@black, 90%);
                                display: inline-block;
                                background: transparent;
                                border-radius: 50%;
                                line-height: 80px;
                                height: 80px;
                                width: 80px;
                                border: 1px solid @gray-lighter;
                                box-sizing: border-box;
                                margin: 6px;
                                position: relative;
                                .vendor(transition, all .2s linear);
                                &:after{
                                    .vendor(transition, all .2s linear);
                                    position: absolute;
                                    top: -6px;
                                    right: -6px;
                                    bottom: -6px;
                                    left: -6px;
                                    border-radius: 50%;
                                    content: " ";
                                    background: transparent;
                                    z-index: -1;
                                }
                            }

                        }
                        &:last-child{
                            .text-style-klara(@black, @font-size-large, 700, 30px);
                            .title-style-citra(22px, @font-size-large - 2px, uppercase, 60px, 11px);
                            color: @black;
                            padding-left: 0;
                            padding-bottom: 11px;
                            position: relative;
                            &:after{
                                margin-left: 0;
                                display: block;
                                position: absolute;
                                left: 50%;
                                bottom: 0;
                                .vendor(transform, translate(-50%, 0));
                            }

                        }
                    }
                    > div{
                    }
                }
                &:last-child{
                    .text-style-klara(@black-light, @font-size-base, 400, 24px);
                }
            }
        }
    }
    .azen-citra-our-skills-always{
        padding: 126px 0 122px;
        .before-dark(@brand-color, 93%);
        .azen-our-skills-always-wrapper{
            position: relative;
            .flex(space-between, wrap, center, center);
            > div{
                .text-center();
                &:first-child, &:last-child{
                    .vendor(flex, 1);
                    @media screen and (max-width: 1400px){
                        max-width: 350px;
                        margin: 0 auto;
                        width: 100%;
                        .vendor(flex, inherit);
                        order: 1;
                    }
                    @media screen and (max-width: 750px){
                        max-width: 300px
                    }
                    margin-top: 19px;
                    > div{
                        .azen-citra-number(0);
                        font-size: 0;
                        @media screen and (max-width: 1400px){
                            display: inline-block;
                        }
                        @media screen and (max-width: 750px){
                            display: block;
                        }
                        > div{
                            text-align: left;
                            display: inline-block;
                            margin-bottom: 57px;
                            @media screen and (max-width: 750px){
                                .text-center();
                                > div{
                                    padding: 0;
                                    &:last-child{
                                        &:after{
                                            margin: 0 auto;
                                        }
                                    }
                                }
                            }
                            > div{
                                &:first-child, &:last-child{
                                    color: @white-lighter;
                                }
                            }
                        }
                    }
                }
                &:nth-child(2){
                    .vendor(flex, 3);
                    .vendor(align-self, flex-start);
                    @media screen and (max-width: 1400px){
                        width: 100%;
                        .vendor(flex, inherit);
                        order: 2;
                        padding: 0 15px;
                    }
                    > div{
                        &:first-child{
                            .text-style-klara(@white-lighter, 28px, 400, 40px);
                            text-align: center;
                            max-width: 800px;
                            margin: 0 auto 56px;
                        }
                        &:last-child{
                            .flex(center, wrap, flex-start, flex-start);
                            margin: 0 -2.5px;
                            text-align: left;
                            > div{
                                margin-bottom: 5px;
                                padding: 0 2.5px;
                                width: ~"calc(100%/3 - 5px)";
                                @media screen and (max-width: 992px){
                                    width: ~"calc(100%/2 - 5px)";
                                }
                                @media screen and (max-width: 750px){
                                    width: ~"calc(100%/1 - 5px)";
                                }
                                > div{
                                    background-color: @white-lighter;
                                    padding: 33px 40px;
                                    > div{
                                        &:first-child{
                                            display: inline-block;
                                            float: left;
                                            max-width: 45px;
                                            .text-style-klara(@black-light, 72px, 400, 50px);
                                        }
                                        &:last-child{
                                            width: ~"calc(100% - 71px)";
                                            .title-style-citra(0, 20px, uppercase, 70px, 14px);
                                            margin-left: 5px;
                                            margin-top: 7px;
                                            > div{
                                                .text-style-klara(@black, 20px, 400, 24px);
                                            }
                                        }
                                    }
                                    .after-clear();
                                }
                            }
                        }
                    }
                }
                &:last-child{
                    > div{
                        .number-reverse();
                        > div{
                            > div{
                                &:last-child{
                                    @media screen and (max-width: 750px){
                                        &:after{
                                            margin: 0 auto;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .azen-citra-isotope-full{
        &[data-enable-or-disable-title="false"]{
            .azen-full-wrapper{
                padding-top: 72px;
                > span{
                    display: none;
                }
                > div{
                    &:first-of-type{
                        margin: 0 auto;
                        > div{
                            &:first-child{
                                display: none;
                            }
                            &:last-child{
                                max-width: 100%;
                                padding: 0 30px;
                                .text-center();
                                float: none;
                            }
                        }
                    }
                }

            }
        }
        .azen-full-wrapper{
            position: relative;
            padding: 177px 0 0px;
            > span{
                .absolute();
                margin: 0 auto;
                > span{
                    .syle-citra-icon();
                }
            }
            > div{
                &:first-of-type{
                    margin: 0 auto;
                    > div{
                        &:first-child{
                            margin-bottom: 55px;
                            max-width: ~"calc(40% + 27px)";
                            float: left;
                            .isotope-text-title();
                            @media screen and (max-width: 992px){
                                float: none;
                                max-width: 100%;
                                .text-center();
                            }
                        }
                        &:last-child{
                            max-width: ~"calc(60% - 27px)";
                            box-sizing: border-box;
                            float: right;
                            margin-top: 37px;
                            margin-bottom: 50px;
                            text-align: right;
                            @media screen and (max-width: 992px){
                                float: none;
                                max-width: 100%;
                                text-align: center;
                                margin-bottom: 40px;
                            }
                            .isotope-content-tabs();
                            .after-clear();
                        }
                    }
                    @media screen and (max-width: 992px){

                    }
                    .after-clear();
                }
                &:last-of-type{
                    .pe(none);
                    > div{
                        > div{
                            clear: both;
                            margin: 0 30px;
                            .azen-isotope-item{
                                .pe(all);
                                margin-bottom: 30px;
                                .media-width(){
                                    @media screen and (max-width: 992px){
                                        width: ~"calc(100%/2 - 15px)";//30/2=15
                                    }
                                    @media screen and (max-width: 680px){
                                        width: ~"calc(100%/1 - 0px)";//0
                                    }
                                }
                                &[data-grid-width="4"]{
                                    width: ~"calc((100%/4) - (90px/4))";//90/4=~/1/30px
                                    @media screen and (max-width: 1100px){
                                        width: ~"calc(100%/3 - 20px)";
                                    }
                                    .media-width();
                                }
                                &[data-grid-width="3"]{
                                    width: ~"calc(100%/3 - 20px)";
                                    .media-width();
                                }
                                &[data-grid-width="2"]{
                                    width: ~"calc(100%/2 - 15px)";
                                    @media screen and (max-width: 680px){
                                        width: ~"calc(100%/1 - 0px)";
                                    }
                                }
                                &[data-grid-width="1"]{
                                    width: 100%/1;
                                }
                                .visibility-content-isotope(@black-darker, 65%);
                                @media screen and (max-width: 680px){
                                    .text-center();
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .azen-citra-we-got{
        margin-bottom: 60px;
        .azen-we-got-wrapper{
            .text-center();
            > div{
                &.azen-circle{
                    margin-bottom: 32px;
                    > div{
                        display: inline-block !important;
                        position: relative;
                        &:before{
                            content: " ";
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            bottom: 10px;
                            left: 10px;
                            border-radius: 50%;
                            box-shadow: 0 0 5px fade(@black-darker, 10%) inset;
                        }
                        input{
                            .text-style-klara(@black-light, @font-size-base * 2px, 400, 24px) !important;
                            margin: 0 !important;
                            top: 50%;
                            left: 50%;
                            .vendor(transform, translate(-50%, -50%));
                        }
                    }
                }
                &:last-of-type{
                    margin-bottom: 18px;
                    > div{
                        .flex(center, nowrap, flex-start, flex-start);
                        > div{
                            display: inline-block;
                            &:first-child{
                                padding-right: 11px;
                                > span{
                                    color: @black-light;
                                    font-size: @font-size-base;
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                            }
                            &:last-child{
                                .text-style-klara(@black, @font-size-base + 1px, 700, inherit);
                                text-transform: uppercase;
                            }
                            .after-clear();
                        }
                    }
                }
            }
            > span{
                display: block;
                .text-style-klara(@black-light, @font-size-base - 1px, 400, 22px);
                font-style: italic;
                padding: 0 10px;
            }
        }
    }
    .azen-citra-list-text-style{
        position: relative;
        margin-bottom: 18px;
        &[data-alternative-styles="true"]{
            > div{
                &:first-child{
                    > span{
                        bottom: 0px;
                    }
                }
                &:last-child{
                    &:after{
                        content: none;
                    }
                }
            }
        }
        > div{
            &:first-child{
                > span{
                    color: @brand-color;
                    position: absolute;
                    top: 0px;
                    left: 0;
                    bottom: 17px;
                    line-height: 22px;
                    font-size: 14px;
                }
            }
            &:last-child{
                .title-style-citra(0, @font-size-base, none, 60px, 17px);
                .text-style-klara(@black-light, @font-size-base + 1px, 700, 22px);
                padding-left: 23px;
                &:after{
                    margin-left: -12px;
                }
            }
        }
    }
    .azen-citra-more-intelligent-the-best-text{
        border-top: 1px solid @white-dark;
        padding-top: 73px;
        padding-bottom: 32px;
        > div{
            .intelligent-the-best-text(70px);
            > div{
                display: inline-block;
                box-sizing: border-box;
                width: ~"calc(50% - 15px)";
                @media screen and (max-width: 768px){
                    width: ~"calc(100% - 0px)";
                }
                &:nth-child(2n + 2){
                    margin-left: 30px;
                    @media screen and (max-width: 768px){
                        margin-left: 0px;
                    }
                }
            }
        }
    }
    .azen-citra-latest-news-content-with-image{
        .azen-news-wrapper{
            .azen-news-wrapper-content(65px, 30px, 12px, uppercase);
            > div{
                &:first-child{
                    > div{
                        &:last-child{
                            margin-bottom: 47px;
                            > a{
                                display: block;
                                > div{
                                    .bg-max();
                                    height: 340px;
                                }
                            }
                        }
                    }
                }
            }
            > span{
                .read-more(@black-dark, @brand-color, @white-darker, -.5px,
                @font-size-base - 3px, 24px, @brand-color, @black-dark, 0s, 0s, 1);
                .aroww-start(@black-dark);
            }
        }
    }
    .azen-citra-working-wordpress{
        .bg-max();
        .before-dark(@brand-color, 85%);
        .text-center();
        .azen-working-wrapper{
            padding: 105px 0 44px;
            position: relative;
            > div{
                &:first-child{
                    margin-bottom: 60px;
                    > div{
                        text-transform: uppercase;
                        &:first-child{
                            .text-style-klara(@white-lighter, @font-size-large + 10px, 700, 30px);
                            margin-bottom: 6px;
                        }
                        &:last-child{
                            .text-style-klara(@white-lighter, @font-size-large - 2px, 400, 22px);
                            letter-spacing: 3px;
                        }
                    }    
                }
                &:last-child{
                    .flex(flex-end, wrap, flex-start, flex-start);
                    @media screen and (max-width: 992px){
                        margin: 0 -23px;
                    }
                    > div{
                        width: ~"calc((100%/4) - (138px/3))";//46*3=138
                        padding: 0 23px;
                        position: relative;
                        > span{
                            width: 48px;
                            position: absolute;
                            left: 0;
                            top: 84px;
                            height: 25px;
                            .vendor(transform, translate(-50%, 0));
                            .af-bf(){
                                content: " ";
                                top: 50%;
                                .vendor(transform, translate(0, -50%));
                                position: absolute;
                                .vendor(transition, all 0s linear 0s);
                            }
                            &:before{
                                .af-bf();
                                left: 10px;//19-8=11
                                right: 14px;
                                background-color: fade(@white-lighter, 65%);
                                width: auto;
                                height: 6px;
                            }
                            &:after{
                                .af-bf();
                                right: 0;
                                left: auto;
                                border: 12px solid transparent;
                                border-left: 14px solid fade(@white-lighter, 65%);
                                border-right: 0px solid transparent;
                            }
                            > span{
                                &:before, &:after{
                                    .af-bf();
                                    width: 3px;
                                    height: 6px;
                                    background-color: fade(@white-lighter, 65%);
                                }
                                &:before{
                                    left: 0;
                                }
                                &:after{
                                    .af-bf();
                                    left: 5px;
                                }
                            }
                        }
                        @media screen and (max-width: 992px){
                            width: ~"calc((100%/3) - (92px/2))";//46*2=92
                            padding-bottom: 23px;
                            margin-bottom: 46px;
                            &:last-child{
                                > span{
                                    top: -80px;
                                    left: 50%;
                                    .vendor(transform, translate(-50%, 0) rotate(90deg));
                                }
                                padding-bottom: 0px;
                                margin-bottom: 0px;
                            }
                        }
                        @media screen and (max-width: 768px){
                            width: ~"calc((100%/2) - (46px/1))";//46*1=46
                            margin-left: 0;
                            margin-right: 0;
                            &:nth-last-of-type(2){
                                > span{
                                    left: auto;
                                    right: 0;
                                    .vendor(transform, translate(50%, 0) rotate(180deg));
                                }
                            }
                        }
                        @media screen and (max-width: 580px){
                            width: ~"calc((100%/1) - (46px*0))";//46*0=0
                            .arrow(){
                                > span{
                                    right: auto;
                                    top: -80px;
                                    left: 50%;
                                    .vendor(transform, translate(-50%, 0) rotate(90deg));
                                }
                            }
                            &:last-child, &:nth-last-of-type(2){
                                .arrow();
                            }
                            .arrow();
                        }
                        &:hover{
                            > div{
                                > div{
                                    &:first-child{
                                        > div{
                                            background-color: mix(lighten(@brand-color, 25%), spin(@brand-color, -24%));
                                            > span{
                                                color: @white-lighter;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        &:first-child{
                            > span{
                                display: none;
                            }
                        }
                        > div{
                            margin-bottom: 60px;
                            > div{
                                &:first-child{
                                    margin-bottom: 44px;
                                    *{
                                        .vendor(transition, all .3s);
                                    }
                                    > div{
                                        width: 169px;
                                        height: 169px;
                                        line-height: 143px;//169-13-13
                                        border-radius: 50%;
                                        display: inline-block;
                                        box-sizing: border-box;
                                        border: 13px solid @white-lighter;
                                        background-color: @white;
                                        position: relative;
                                        &:before{
                                            content: " ";
                                            .absolute();
                                            border-radius: 50%;
                                            box-shadow: 0 0 5px fade(@black-darker, 10%) inset;
                                        }
                                        > span{
                                            font-size: 40px;
                                            color: @black;
                                            position: relative;
                                        }
                                    }
                                }
                                &:last-child{
                                    text-transform: uppercase;
                                    .text-style-klara(@white-lighter, @font-size-large - 2px, 700, 22px);
                                    padding: 0 50px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .azen-citra-sentence{
        margin-bottom: 30px;
        .azen-sentence-wrapper{
            > div{
                &:first-of-type{
                    margin-bottom: 34px;
                    > div{
                        height: 250px;
                        .bg-max();
                    }
                }
                &:last-of-type{
                    .title-style-citra(28px, @font-size-large, uppercase, 60px, 10px);
                    .text-style-klara(@black, @font-size-large, 700, 24px);
                    display: block;
                }
            }
            > span{
                .text-style-klara(@black-light, @font-size-base, 400, 24px);
            }
        }
    }
    .azen-citra-title-text{
        .title-style-citra(30px, @font-size-large, uppercase, 60px, 10px);
        .text-style-klara(@black, @font-size-large, 700, 24px);
        display: block;  
    }


    .azen-citra-address{
        margin-bottom: 65px;
        > div{
            display: table;
            width: 100%;
            > div{
                display: table-cell;
                vertical-align: middle;
                &:first-child{
                    width: 120px;
                    > div{
                        width: 120px;
                        height: 120px;
                        line-height: 120px;
                        box-sizing: border-box;
                        border: 2px solid @white-darker;
                        .text-center();
                        border-radius: 50%;
                        > span{
                            display: inline-block;
                            line-height: 116px;
                            color: @brand-color;
                            font-size: 35px;
                        }   
                    }
                }
                &:last-child{
                    padding-left: 40px;
                    &:after{
                        content: " ";
                        border-bottom: 1px solid @brand-color;
                        width: 60px;
                        padding-top: 17px;
                        margin-left: -20px;
                        display: block;
                    }
                    > div{
                        &:first-child{
                            .text-style-klara(@black, @font-size-base + 1px, 700, 24px);
                            margin-bottom: 16px;
                        }
                        &:last-child{
                            > span{
                                .text-style-klara(@black-light, @font-size-base, 400, 20px);
                                display: block;
                                margin-bottom: 5px;
                                &:last-child{
                                    margin-bottom: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
        &[data-dark="false"]{
            > div{
                > div{
                    &:first-child{
                        > div{
                            border-color: @black-light;
                        }
                    }
                    &:last-child{
                        > div{
                            &:first-child, &:last-child > span{
                                color: @white-lighter;
                            }
                        }
                    }
                }
            }
        }
        &[data-alternative-styles="true"]{
            > div{
                display: block;
                .text-center();
                > div{
                    display: block;
                    width: auto;
                    &:first-child{
                        margin-bottom: 28px;
                        > div{
                            display: inline-block;
                            > span{
                                color: @black;
                            }
                        }
                    }
                    &:last-child{
                        padding: 0;
                        &:after{
                            margin: 0 auto;
                        }
                    }
                }
            }
        }
    }
    .azen-citra-button{
        margin-bottom: 30px;
        > a{
            .text-style-klara(@black-light, @font-size-base - 1px, 700, 44px);
            .button-citra(transparent, 29px, @gray-lighter, @brand-color, @white-lighter, transparent, @brand-color);
        }
    }
    .azen-citra-text-and-icon{
        border-color: inherit;
        margin-bottom: 40px;

        > div{
            display: table;
            width: 100%;
            margin-bottom: 20px;
            border-color: inherit;

            > div{
                vertical-align: middle;
                &:first-child{
                    display: table-cell;
                    width: 58px;
                    > span{
                        font-size: 33px;
                        color: @black-light;
                    }
                }
                &:last-child{
                    .text-style-klara(@black, @font-size-large, 700, 30px);
                    .title-style-citra(30px, @font-size-large, none, 60px, 7px);
                    color: @black;
                    display: table-cell;
                    border-color: inherit;
                    padding-left: 16px;
                    &:after{
                        margin-left: -16px;
                        border-color: inherit;
                    }
                }
            }
        }
    }
    .azen-citra-item-report{
        .azen-report-wrapper{
            .flex(center, wrap, flex-start, flex-start);
            > div{
                width: ~"calc(100%/3 - 0px)";
                background-color: @brand-color;
                position: relative;
                padding: 82px 85px 87px;
                box-sizing: border-box;
                overflow: hidden;
                @media screen and (max-width: 1200px){
                    width: 100%/2;
                }
                @media screen and (max-width: 992px){
                    width: 100%/1;
                }
                &:nth-child(2n + 2){
                    background-color: mix(lighten(@brand-color, 25%), spin(@brand-color, -24%));
                    > .azen-button-report{
                        .button-citra(transparent, 29px, @white-lighter, @white-lighter, mix(lighten(@brand-color, 25%), spin(@brand-color, -24%)), transparent, @white-lighter);
                    }
                }
                > div{
                    &:first-of-type{
                        .text-style-klara(@white-lighter, @font-size-large + 10px, 700, 30px);
                        margin-bottom: 22px;
                    }
                    &:last-of-type{
                        margin-bottom: 42px;
                        .text-style-klara(@white-lighter, @font-size-base, 400, 24px);
                    }
                }
                &:not(:nth-child(2n + 2)){
                    > .azen-button-report{
                        .button-citra(transparent, 29px, @white-lighter, @white-lighter, @brand-color, transparent, @white-lighter);
                    }
                }
                > .azen-button-report{
                    .text-style-klara(@white-lighter, @font-size-base - 2px, 700, 43px);
                }
                > span:not(.azen-button-report){
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    font-size: 190px;
                    color: fade(@black-dark, 10%);
                    width: 150px;
                    height: 180px;
                }
            }
        }
    }
    .azen-citra-static{
        &[data-darken-background="true"]{
            .before-dark(@black-darker, 85%);
        }
        .azen-static-wrapper{
            padding: 168px 0 172px;
            .text-center();
            position: relative;
            > div{
                .text-style-klara(@white-lighter, 44px, 700, 50px);
                margin-bottom: 15px;
            }
            > span{
                display: block;
                .text-style-klara(@white-lighter, 20px, 400, 24px);
                text-transform: uppercase;
                opacity: .6;
                letter-spacing: 4px;
                margin-bottom: 54px;
            }
            > a{
                .text-style-klara(@white-lighter, @font-size-base - 1px, 700, 51px);
                .button-citra(transparent, 30px, @white-lighter, @white-lighter, @brand-color, transparent, @white-lighter);
            }
        }
    }
    .azen-citra-contact-touch{
        &[data-alternative-styles="true"]{
            .azen-touch-wrapper{
                position: relative;
                .azen-citra-e-form-container{
                    .border(){
                        box-sizing: border-box;
                        border: 1px solid @white-dark;
                    }
                    > div{
                        > div{
                            .azen-citra-e-form-field{
                                > input{
                                    .border();
                                }
                            }
                        }
                        > .azen-citra-e-form-field{
                            .border();
                        }

                        &:last-of-type{
                            text-align: right;
                            > button{
                                width: auto;
                                padding-right: 47px;
                                padding-left: 47px;
                                @media screen and (max-width: 768px){
                                    width: 100%;
                                }
                            }
                        }

                    }
                }
            }
        }
        .azen-touch-wrapper{
            position: relative;
            .azen-citra-e-form-container{
                > div{
                    &:first-of-type{
                        > div{
                            .flex(center, wrap, flex-start, flex-start);
                            margin: 0 -15px;
                            @media screen and (max-width: 768px){
                                margin: 0;
                            }
                            > div{
                                width: ~"calc(100%/3 - (60px/2))";
                                padding: 0 15px;
                                margin-bottom: 30px;
                                @media screen and (max-width: 768px){
                                    width: 100%/1;
                                    padding: 0;

                                }
                                &.azen-c-textarea{
                                    width: 100%;
                                    textarea{
                                        height: 200px;
                                    }
                                }
                            }
                        }
                    }
                    &:last-of-type{
                        .text-center();
                        > button{
                            width: ~"calc(100%/3 - (60px/2))";
                            @media screen and (max-width: 768px){
                                width: 100%;
                            }
                        }
                    }
                }  
            }
        }
    }
    .azen-citra-map{
        opacity: .93 !important;
    }
    .azen-citra-share{
        margin-bottom: 30px;
        .azen-share-wrapper{
            .flex(center, wrap, center, center);
            .text-center;
            > div{
                width: 100%/6;
                @media screen and (max-width: 992px){
                    width: 100%/3;
                }
                @media screen and (max-width: 768px){
                    width: 100%/2;
                }
                @media screen and (max-width: 480px){
                    width: 100%;
                }
                > a{
                    .text-style-klara(@white-lighter, 14px, 700, 54px);
                    .button-citra(inherit, 18px, transparent, fade(@white-lighter, 85%), @black, transparent, @brand-color);
                    border: 0;
                    display: block;
                    box-sizing: border-box;
                    letter-spacing: 2px;
                    text-transform: uppercase;
                }
            }
        }
    }
    .azen-citra-isotope-portfolio{
        .azen-full-wrapper{
            position: relative;
            padding: 110px 0 82px;
            > span{
                display: block;
                .text-center();
                > a{
                    .text-style-klara(@black-light, @font-size-base - 1px, 700, 47px);
                    .button-citra(transparent, 29px, @gray-lighter, @brand-color, @white-lighter, transparent, @brand-color);
                }
            }
            > div{
                &:first-of-type{
                    margin: 0 auto;
                    width: 100%;
                    > div{
                        box-sizing: border-box;
                        margin-bottom: 33px;
                        max-width: 100%;
                        padding: 0 30px;
                        .text-center();
                        float: none;
                        @media screen and (max-width: 992px){
                            margin-bottom: 40px;
                        }
                        .isotope-content-tabs();
                        > div{
                            > span{
                                &:after{
                                    .font-fa();
                                    border: 0;
                                    content: "\f107";
                                    line-height: 83px;
                                    color: @gray-light;
                                    font-size: 16px;
                                    .visible(hidden, 0);

                                }
                            }
                            &.az-is-checked{
                                > span{
                                    &:after{
                                        .visible(visible, 1);
                                    }
                                }
                            }
                        }
                        .after-clear();
                    }
                    @media screen and (max-width: 992px){

                    }
                    .after-clear();
                }
                &:last-of-type{
                    padding: 65px 0 89px;
                    border-top: 1px solid @white-dark;
                    .pe(none);
                    > div{
                        > div{
                            clear: both;
                            .azen-isotope-item{
                                .pe(all);
                                .media-width(){
                                    @media screen and (max-width: 992px){
                                        width: 100%/2;
                                    }
                                    @media screen and (max-width: 680px){
                                        width: 100%/1;
                                    }
                                }
                                &[data-grid-width="4"]{
                                    width: 100%/4;
                                    @media screen and (max-width: 1100px){
                                        width: 100%/3;
                                    }
                                    .media-width();
                                }
                                &[data-grid-width="3"]{
                                    width: 100%/3;
                                    .media-width();
                                }
                                &[data-grid-width="2"]{
                                    width: 100%/2;
                                    @media screen and (max-width: 680px){
                                        width: 100%/1;
                                    }
                                }
                                &[data-grid-width="1"]{
                                    width: 100%/1;
                                }
                                .visibility-content-isotope(@brand-color, 90%);
                                > div{
                                    > div{
                                        .vendor(display, flex);
                                        .vendor(align-items, flex-end);
                                        padding: 49px 52px;
                                        top: 8px;
                                        right: 8px;
                                        bottom: 8px;
                                        left: 8px;
                                        @media screen and (max-width: 680px){
                                            .vendor(align-items, center);
                                            width: auto;
                                            height: auto;
                                        }
                                    }
                                }
                                @media screen and (max-width: 680px){
                                    .text-center();
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .azen-citra-club{
        .azen-club-wrapper{
            padding-bottom: 105px;
            > span{
                margin: 0 auto;
                display: block;
                height: 130px;
                position: relative;
                margin-bottom: 47px;
                > span{
                    .syle-citra-icon();
                }
            }
            > div{
                > div{
                    &:first-child{
                        > div{
                            &:first-child{
                                margin-bottom: 42px;
                                > div{
                                    &:first-child{
                                        ////title
                                        display: table;
                                        width: 100%;
                                        margin-bottom: 55px;
                                        @media screen and (max-width: 680px){
                                            display: block;
                                        }
                                        > div{
                                            display: inline-block;
                                            vertical-align: bottom;
                                            width: 50%;
                                            box-sizing: border-box;
                                            @media screen and (max-width: 680px){
                                                display: block;
                                                width: auto;
                                            }
                                            &:first-child{
                                                padding-right: 15px;
                                                @media screen and (max-width: 680px){
                                                    .text-center();
                                                    padding: 0;
                                                    margin-bottom: 40px;
                                                }
                                                > div{
                                                    &:first-child{
                                                        .text-style-klara(@gray-dark, @font-size-large + 2px, 400, 20px);
                                                        text-transform: uppercase;
                                                        letter-spacing: 4px;
                                                        margin-bottom: 14px;
                                                    }
                                                    &:last-child{
                                                        .text-style-klara(@black, @font-size-large + 26px, 700, 40px);
                                                        letter-spacing: 1px;
                                                    }
                                                }
                                                //text
                                            }
                                            &:last-child{
                                                padding-left: 15px;
                                                text-align: right;
                                                @media screen and (max-width: 680px){
                                                    .text-center();
                                                    padding: 0;
                                                }
                                                > a{
                                                    .text-center();
                                                    .text-style-klara(@black-light, @font-size-base - 1px, 700, 47px);
                                                    .button-citra(transparent, 29px, @gray-lighter, @brand-color, @white-lighter, transparent, @brand-color);
                                                }
                                                //button
                                            }
                                        }
                                    }
                                    &:last-child{
                                        //slider
                                        position: relative;
                                        > div{
                                            > div{
                                                &:first-child{
                                                    &:hover{
                                                        + div{
                                                            > a{

                                                                .visible(visible, .5);
                                                                .vendor(transform, translate(0, 0px));
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        .azen-item-club{
                                            > div{
                                                height: 578px;
                                                .bg-max();
                                                @media screen and (max-width: 768px){
                                                    height: 378px;
                                                }
                                            }
                                        }
                                        .az-flex-direction-nav{
                                            font-size: 0;
                                            .vendor(display, flex);
                                            .vendor(align-items, center);
                                            .vendor(justify-content, space-between);
                                            .absolute();
                                            height: 100%;
                                            width: 100%;
                                            padding: 0 35px;
                                            box-sizing: border-box;
                                            z-index: 2;
                                            .pe(none);
                                            > a{
                                                .visible(hidden, 0);
                                                .vendor(transform, translate(0, 10px));
                                                .vendor(transition, all .3s linear);
                                                .pe(all);
                                                width: 41px;
                                                height: 41px;
                                                border-radius: 50%;
                                                background-color: fade(@black-darker, 50%);
                                                color: @white-lighter;
                                                .text-center();
                                                line-height: 41px;
                                                &:hover{
                                                    .visible(visible, 1);
                                                    .vendor(transform, translate(0, 0px));
                                                }
                                                &:first-child{
                                                    > span{
                                                        &:before{
                                                            content: "\f104";
                                                            padding-right: 2px;
                                                        }
                                                    }
                                                }
                                                &:last-child{
                                                    > span{
                                                        &:before{
                                                            padding-left: 2px;
                                                            content: "\f105";
                                                        }
                                                    }
                                                }
                                                > span{
                                                    display: inline-block;
                                                    .font-fa();
                                                    line-height: 41px;
                                                    &:before{
                                                        font-size: 22px;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            &:last-child{
                                //img
                                margin: 0 -15px;
                                text-align: center;
                                margin-bottom: 31px;
                                > div{
                                    padding: 0 15px;
                                    box-sizing: border-box;
                                    display: inline-block;
                                    vertical-align: top;
                                    margin-bottom: 30px;
                                    img{
                                        max-width: 100%;
                                    }
                                    &:first-child{
                                        max-width: 66.66666667%;
                                        text-align: right;
                                        @media screen and (max-width: 768px){
                                            max-width: 100%;
                                        }
                                    }
                                    &:last-child{
                                        max-width: 33.33333333%;
                                        text-align: left;
                                    }
                                    @media screen and (max-width: 768px){
                                        &:first-child, &:last-child{
                                            max-width: 100%;
                                        } 
                                    }
                                }
                            }
                        }
                    }
                    &:last-child{
                        > div{
                            &:first-child{
                                display: table;
                                width: 100%;
                                padding-bottom: 84px;
                                border-bottom: 1px solid @white-dark;
                                margin-bottom: 31px;
                                @media screen and (max-width: 992px){
                                    display: block;
                                }
                                > div{
                                    display: table-cell;

                                    &:first-child{
                                        width: 70%;
                                        padding-right: 40px;
                                        @media screen and (max-width: 992px){
                                            width: 60%;
                                        }
                                        @media screen and (max-width: 768px){
                                            margin-bottom: 81px;
                                        }
                                        > div{
                                            .text-style-klara(@black-light, @font-size-base, 400, 28px);
                                            &:first-of-type{
                                                margin-bottom: 28px;

                                            }
                                            &:last-of-type{
                                                margin-bottom: 38px;
                                            }
                                        }
                                        > span{
                                            .read-more(@black-dark, @brand-color, @white-darker, -.5px,
                                            @font-size-base - 3px, 28px, @brand-color, @black-dark, 0s, 0s, 1);
                                            text-transform: uppercase;
                                        }
                                    }
                                    &:last-child{
                                        width: 30%;
                                        text-align: right;
                                        padding-left: 100px;
                                        @media screen and (max-width: 992px){
                                            width: 40%;
                                            padding-left: 0;
                                        }
                                        > div{
                                            margin-bottom: 34px;
                                            &:last-child{
                                                margin-bottom: 0;
                                            }
                                            @media screen and (max-width: 768px){
                                                display: inline-block;
                                                width: 50%;
                                                box-sizing: border-box;
                                                &:nth-child(2n + 2){
                                                    text-align: right;
                                                }
                                                &:nth-child(odd){
                                                    > div{
                                                        &:first-child{
                                                            &:after{
                                                                right: auto;
                                                                left: 0;
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                            @media screen and (max-width: 480px){
                                                width: 100%;
                                                &:nth-child(2n + 2),  &:nth-child(odd){
                                                    .text-center();
                                                }
                                                &:nth-child(odd), &:nth-child(2n + 2){
                                                    > div{
                                                        &:first-child{
                                                            &:after{
                                                                left: 50%;
                                                                right: auto;
                                                                .vendor(transform, translate(-50%, 0));
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                            > div{
                                                > a{
                                                    display: inline-block;
                                                    font-size: 14px;
                                                    color: @black-lighter;
                                                    margin-left: 23px;
                                                    margin-bottom: 7px;
                                                    .vendor(transition, all .3s linear);
                                                    @media screen and (max-width: 768px){
                                                        &:first-child{
                                                            margin-left: 0;
                                                        }
                                                    }
                                                    &:hover{
                                                        color: @brand-color;
                                                    }
                                                }
                                                &:first-child{
                                                    .text-style-klara(@black, @font-size-base - 1px, 700, 17px);
                                                    text-transform: uppercase;
                                                    position: relative;
                                                    padding-bottom: 7px;
                                                    margin-bottom: 13px;
                                                    &:after{
                                                        content: " ";
                                                        display: block;
                                                        position: absolute;
                                                        left: auto;
                                                        bottom: 0;
                                                        right: 0;
                                                        border-bottom: 1px solid @gray-lighter;
                                                        width: 60px;
                                                    }
                                                }
                                                &:last-child{
                                                    .text-style-klara(@black-light, @font-size-base, 400, 24px);
                                                }
                                            }
                                        }
                                    }
                                    @media screen and (max-width: 768px){
                                        &:first-child, &:last-child{
                                            display: block;
                                            width: auto;
                                            padding: 0;
                                            text-align: left;
                                        }
                                    }
                                }
                            }
                            &:last-child{
                                display: table;
                                width: 100%;
                                > div{
                                    display: table-cell;
                                    width: 50%;
                                    > a{
                                        display: inline-block;
                                        max-width: 60px;
                                        .text-style-klara(@gray-light, @font-size-base - 1px, 700, 17px);
                                        text-transform: uppercase;
                                        .vendor(transition, all .3s linear);
                                        &:hover{
                                            color: @black-dark;
                                        }
                                    }
                                    &:first-child{
                                    }
                                    &:last-child{
                                        text-align: right;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    //costils
    .azen-citra-offer{
        > div.azen-out{
            .absolute();
            bottom: auto;
            height: 288px;
            background-color: @white-lighter;
            @media screen and (max-width: 605px){
                height: 228px;
            }
            @media screen and (max-width: 400px){
                height: 128px;
            }
        }
        > a{
            padding-top: 288px;
            margin-bottom: 13px;
            position: relative;
            z-index: 2;
            @media screen and (max-width: 400px){
                padding-top: 128px;
            }
            > img{
                margin-top: -168px;
                @media screen and (max-width: 600px){
                    margin-top: -60px;
                }
            }
        }
        .azen-inner-wrapper{
            position: relative;
            .azen-citra-creo-text{
                .syle-citra-text();
                right: -75px;
                left: 0;
                > span{
                    right: 40px;
                    left: auto;
                    color: @white-lighter;
                    .vendor(transform, translate(0%, -50%) rotate(-90deg));
                    transform-origin: center right;
                }
                @media screen and (max-width: 1100px){
                    display: none;
                }
            }
        }
    }
    .azen-citra-idea-section{
        .azen-future-wrapper{
            .azen-citra-idea{
                > div{
                    @media screen and (max-width: 992px){
                        display: block;
                        > img{
                            width: 100%;
                        }

                    }

                }
            }
        }
    }
    .azen-citra-e-services-section{
        .azen-services-section-top-box{
            height: 420px;
            background-color: @white-lighter;
            position: relative;
            @media screen and (max-width: 600px){
                height: 210px;
            }
            + div{
                background-color: fade(@brand-color, 93%);
                padding-bottom: 80px;
                > div{
                    margin: 0 auto;
                    width: 100%;
                }
            }
        }
        .azen-citra-image-services{
            margin-top: -420px;
            margin-bottom: 58px;
            @media screen and (max-width: 600px){
                margin-top: -210px;
            }

        }
    }
    /*
    title section = //over .8s, wait .1s, enter bottom, move 50px
    grid element = //over .8s, wait .3s, enter bottom, move 150px
    
    down from top to bottom//enter property move 50px, after 0.9s
    do from right to left//enter property and move 50px over 1.33s
        /*elm*/
    .azen-foodpicky-text{
        font-family: "@{google-font-family-Karla}";
    }

    /*sections-eve*/
    .azen-food-form-field() {
        .azen-citra-e-form-field{
            margin-bottom: 15px;
            .azen-label-wrapper{
                margin-bottom: 9px;
            }
            input:not([type="checkbox"]):not([type="radio"]){
                max-width: 100%;
            }
            input{
                &[type="checkbox"]{
                    &:not(checked) {
                        position: absolute;
                        opacity: 0;
                    }
                    &:checked {
                        + label {                
                            &::before {
                                .font-fa();
                                content: "\f00c";
                                background-size: 11px;
                                background-position: 5px 5px;
                                background-repeat: no-repeat;
                                border-color: @brand-color;
                                font-size: 12px;
                                text-align: center;
                                line-height: 20px;
                                color: @brand-color;
                            }
                        }
                    }
                    + label {
                        .vendor(user-select, none);
                        cursor: pointer;
                        display: inline-block;
                        position: relative;      
                        padding-left: 40px;
                        margin-bottom: 0;
                        margin-top: 0;
                        &::before {
                            content: "";
                            display: inline-block;
                            margin-right: 10px;
                            width: 20px;
                            height: 20px;
                            top: ~"calc(50% - 1px)";
                            .vendor(transform, translate(0, -50%));
                            position: absolute;
                            left: 0;
                            border: 1px solid @brand-color;
                        }
                    }
                }
                &[type="radio"]{
                    &:not(checked) {
                        position: absolute;
                        opacity: 0;
                    }
                    &:checked {
                        + label {                
                            &::before {
                                content: "";
                                .vendor(transform, translate(0, -50%) scale(0.5));
                                background-color: @brand-color;
                                border-color: transparent;
                            }
                            &::after{
                                .vendor(transform, translate(0, -50%) scale(1));
                            }
                        }
                    }
                    + label {
                        .vendor(user-select, none);
                        cursor: pointer;
                        display: inline-block;
                        position: relative;      
                        line-height: 1.5;
                        padding-left: 30px;
                        margin-bottom: 0;
                        margin-top: 0;
                        &::before {
                            content: "";
                            margin-right: 10px;
                            width: 15px;
                            height: 15px;
                            top: ~"calc(50% - 1px)";
                            .vendor(transform, translate(0, -50%));
                            .vendor(transition, all .1s linear 0s);
                            position: absolute;
                            left: 0;
                            border: 1px solid @gray-lighter;
                        }
                        &:after{
                            content: "";
                            width: 15px;
                            height: 15px;
                            top: ~"calc(50% - 1px)";
                            .vendor(transform, translate(0, -50%) scale(0.01));
                            .vendor(transition, all .1s linear .2s);
                            position: absolute;
                            left: 0;
                            border: 1px solid @brand-color;
                        }
                    }
                }
            }
            .azen-radio, .azen-checkbox{
                margin: 20px 0;
                label{
                }
            }
            textarea, input:not([type="checkbox"]):not([type="radio"]), select{
                padding: 0 25px;
                background-image: none;
                box-shadow: none;
                box-sizing: border-box;
                text-transform: uppercase;
                letter-spacing: 0;
                .vendor(transition, all 0.3s linear 0s);
                .vendor(appearance, none)  !important;
                display: block;
                .placeholder(color, @gray-light);
                .placeholder(font-size, @font-size-base - 1px);
                width: 100%;
                background-color: @white-lighter;
                height: 50px;
                border-radius: 0px;
                border: 1px solid @white;
                .text-style-klara(@black-light, @font-size-base - 1px, 700, 50px);
                &:focus {
                    box-shadow: 0 0 10px fade(@black-darker, 10%);
                }
            }
            textarea{
                height: 165px;
                line-height: 20px;
                padding-top: 16px;
                padding-bottom: 16px;
                overflow: auto;
                .placeholder(color, @gray-light);
            }
            button{
                .text-center();
                text-transform: uppercase;
                display: block;
                width: 100%;
                cursor: pointer;
                .button-citra(@brand-color, 30px, @brand-color, @white-lighter, @brand-color, @brand-color, @brand-color);
                border: 0;
                box-sizing: border-box;
                outline: none;
                will-change: transform;
                .text-style-klara(@white-lighter, @font-size-base - 1px, 700, 50px);
            }
            select{
                line-height: 1;
            }
        }
    }
    .azen-citra-e-form-container{
    }
    .azen-food-form-field();
    /**/
    .citra-animation-menu(){
        /*    -webkit-animation-name: citra-a;
            animation-name: citra-a;
            -webkit-animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;*/
        -webkit-font-smoothing: antialiased;
        animation-iteration-count: 1;
        animation-duration: 1s;
        /*    
            animation: citra-a .6s infinite linear;
            -webkit-font-smoothing: antialiased;
            animation-iteration-count: 1;*/
    }
    /*()*/
    .citra-a-menu() {                     
        0% {
            visibility: hidden;
            .vendor(transition, all .3s linear 0s);
            opacity: 0;
            .vendor(transform, translate3d(0,-100%,0));
        }
        100% {
            visibility: visible;
            .vendor(transition, all .3s linear 0s);
            opacity: 1;
            .vendor(transform, translate3d(0,0,0));
        }
    }
    /*animate*/
    @keyframes citra-a {
        .citra-a-menu();
    }
}