// Ideax
.ideax{
    background-image: url("../_assets/img/ideax-bg.jpg");
    background-attachment: fixed;
    color: #fff;

    &.sec-pad{
        padding: 50px 0;
    }
    .ideax-container{
        position: relative;

        h2{
            margin: 0 0 35px;
            font: 900 18px/1 $primaryFont;
            text-align: left /*rtl:right*/;
        }
        ul{
            position: relative;

            li{
                width: 18%;
                margin-right: 10px;
                display: inline-block;

                @include mq(t) {
                    &:nth-child(2){
                        display: none;
                    }
                }
                @include mq(l){
                    margin-right: 5px;
                    width: 25%;

                    &:nth-child(3){
                        display: none;
                    }
                }
                &:last-of-type{
                    margin-right: 0;

                    @include mq(t) {
                        background: gradient(left,#000,#fff);
                        margin-left: -40px;
                    }
                }
                img{
                    width: 100%;
                }
            }
        }
        .close-btn{
            a{
                display: block;
                color: #fff;
                position: absolute;
                top: -20px;
                right: 10px;
                width: 15px;

                &:hover{
                    color: #d4d4d4;;
                }

                span{
                    font-size: 20px;
                    font-family: $seconderyFont;
                }
            }
        }
    }
}

// Slider
.home-slider-wrapper{
    position: relative;
    margin: 0 15px;

    .home-slider{
        overflow: hidden;
        height: 574px;

        @include mq(t){
            height: 534px;
        }
        .slide-item{
            width: 100%;
            height: 633px;
            float: left;

            &.slick-active{
                .slider-content{
                    h2,cite,.btn-arrow{
                        animation-name: fadeInUp;
                    }
                }
            }

            .slider-content{
                padding-top: 40px;
                color: #fff;

                h2{
                    font: 500 35px/1.2 $primaryFont;
                    animation: fadeOutUp .8s ease .5s both;
                    -webkit-animation: fadeOutUp .8s ease .5s both;

                    @include mq(t){
                        font-size: 25px;
                    }
                    span{
                        font-weight: 800;
                    }
                }
                cite{
                    display: block;
                    text-align: left;
                    font-size: 18px;
                    animation: fadeOutUp .8s ease .7s both;
                    -webkit-animation: fadeOutUp .8s ease .7s both ;
                }
                .btn-arrow{
                    animation: fadeOutUp .8s ease .7s both;
                    -webkit-animation: fadeOutUp .8s ease 1s both ;
                }
            }
        }
        .slick-dots {
            padding: 0;
            margin: 0;
            width: 100%;
            position: absolute;
            bottom: 30px;
            right: 40px;
            text-align: right;

            li {
                display: inline-block;
                vertical-align: middle;
                margin: 0 5px;

                &.slick-active {
                    button {
                        background-color: #fff;
                        width: 12px;
                        height: 12px;
                        border: 0;
                    }
                }
                button {
                    outline: none;
                    display: block;
                    width: 12px;
                    height: 12px;
                    padding: 0;
                    text-indent: -9999px;
                    cursor: pointer;
                    background-color: transparent;
                    border: 2px solid #fff;
                    @include trans(.2s);

                    &:hover {
                        background-color: #fff;
                    }
                }
            }
        }
    }
}

// Discover Arrow
.discover-container{
    animation: downUp 3s ease infinite;
    -webkit-animation: downUp 3s ease infinite;

    .discover{
        position: absolute;
        bottom: 100px;
        left: 50%;
        z-index: 2;
        width: 140px;
        -webkit-transform: translate(-50%,-15px) rotate(-90deg);
        transform: translate(-50%,-15px) rotate(-90deg);
        color: #fff;
        font-size: 18px;

        .arrow-left{
            transform: rotate(-180deg) translateY(-10px);
        }
    }
}
@keyframes downUp {
    50% {
        transform: translate(0, -10px);
    }
}
// Dotted box under the image
.box-container{
    position: relative;
    z-index: -1;

    &.top{
        img{
            top: 20px;
            left: initial;
            right: 20px;
        }
    }
    img{
        position: absolute;
        top: -140px;
        left: 20px;
        z-index: -1;
        @include trans(1s);
    }
}
// Column Component
.column-container{
    position: relative;
    padding: 3px 5px;

    @include mq(t){
        margin: 15px 20px;
    }
    &.column-big{
        @media (min-width: $tablet) {
            padding-right: 30px;

            &.left{
                padding-right: 0;
                padding-left: 30px;
            }
        }
        .column{
            height: 490px;

            .column-content {
                h3 {
                    font: 800 48px/1 $primaryFont;

                    strong {
                        font-size: 77px;
                    }
                }
                p{
                    @include mq(t){
                        display: none;
                    }
                }
                .btn-arrow{
                    margin-top: 70px;
                }
            }
            @include mq(t){
                height: 300px;

                .column-content {
                    h3 {
                        font: 800 20px/1 $primaryFont;

                        strong {
                            font-size: 30px;
                        }
                    }
                    .btn-arrow{
                        margin-top: 40px;
                    }
                }
            }
        }
        .box-container {
            img {
                top: -139px;
                right: -17px;
                left: initial;
                width: 150px;

                @include mq(t){
                    top: -53px;
                    right: -14px;
                    left: initial;
                    width: 65px;
                }
            }
        }
    }
    &.column-small{
        .column{
            height: 230px;

            .column-content{
                h3{
                    font: 800 17px/25px $primaryFont;
                    color: #fff;

                    strong{
                        font-size: 27px;
                    }
                }
                .btn-arrow{
                    margin-top: 20px;
                    font-size: 18px;
                }
            }

        }
        .box-container {
            img {
                top: -53px;
                right: -14px;
                left: initial;
                width: 65px;
            }
        }
    }
    &.column-two{
        .column{
            height: 360px;

            .column-content{
                h3{
                    font: 800 23px/27px $primaryFont;
                    color: #fff;

                    strong{
                        font-size: 37px;
                    }
                }
                .btn-arrow{
                    margin-top: 20px;
                    font-size: 18px;
                }
            }
        }
        .box-container {
            img {
                top: -53px;
                right: -14px;
                left: initial;
                width: 65px;
            }
        }
    }
    .figure-container{
        overflow: hidden;
    }
    .column {
        display: block;
        width: 100%;
        height: 440px;
        position: relative;
        @include trans(.2s);


        @include mq(t){
            height: 237px !important;

            .column-content {
                h3 {
                    font: 800 20px/27px $primaryFont !important;

                    strong{
                        font-size: 37px !important;
                    }
                }
            }
        }
        &:hover{
            &:after{
                background: rgba(255,255,255,.8);
            }
            .column-content{
                h3,
                .btn-arrow,
                p{
                    color: #000;
                }
            }
        }
        .column-content{
            padding: 60px 25px;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;

            h3{
                font: 800 33px/35px $primaryFont;
                color: #fff;

                @include mq(t){
                    font: 800 24px/30px $primaryFont
                }
            }
            p{
                margin-top: 45px;
                font: 20px/25px $primaryFont;
                color: #fff;
                @include multiLineEllipsis(1.2em,4);
            }
            a.btn-arrow{
                font-size: 21px;

                @include mq(t){
                    font-size: 16px;
                }
            }
        }
        @include mq(t){
            .column-content{
                padding: 30px 20px;

                p{
                    margin-top: 20px;
                    font-size: 16px
                }
            }
        }
    }

    .type-container{
        .type{
            position: absolute;
            top: 55px;
            left: -15px;
            z-index: 2;
            width: auto;
            -webkit-transform: translate(-50%,0) rotate(-90deg);
            transform: translate(-50%,0) rotate(-90deg);
            color: #000;
            font-size: 12px;
            
            span{
                overflow: hidden;
                display: block;
                text-overflow: ellipsis;
                width: 150px;
                white-space: nowrap;
            }
            i{
                color: #cc0000;
            }
        }
    }
}

// Intro
.intro{
    .intro-text{
        margin-bottom: 70px;
        p{
            font: 28px/35px $primaryFont;
            text-align: center;
            color: #000;

            @include mq(t){
                font: 20px/27px $primaryFont;
            }
        }
    }
    .col-sm-6{
        &.is-visible{
            .column{
                animation: fadeInRight .8s ease .4s both;
            }
            .box-container{
                animation: fadeIn .8s ease .9s both;
            }
        }
        &:last-of-type{
            margin-top: 110px;

            &.is-visible {
                .column {
                    animation: fadeInLeft .8s ease .4s both;
                }
            }
            @include mq(t) {
                margin-top: 0;
            }
        }
    }
    .approach-container{
        padding: 0;

        @include mq(t){
            margin: 0;
        }
        .approach{
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            @include trans(.2s);

            &:after{
                content: none;
            }
            a{
                font: 21px/1 DINPro,sans-serif;
            }
            &:hover {
                -webkit-filter: none;
                filter: none;

                .column-content{
                    h3,
                    .btn-arrow,
                    p{
                        color: #fff;
                    }
                }
            }
        }
    }
    .horizental-divider-container{
        position: relative;

        .horizental-divider{
            position: absolute;
            top: -75%;
            left: 50%;
            transform: translate(-50%,75%);
            z-index: 2;

            .line{
                width: 3px;
                height: 100px;
                background: #fff;
                margin: 0 auto;
            }
            span{
                color:#fff;
                font: 800 38px/1 $primaryFont;
            }
            @include mq(t){
                transform: translate(-50%,214px);
                width: 236px;

                .line{
                    width: 100px;
                    height: 3px;
                    margin: 10px auto;
                    display: inline-block;
                }
            }
        }
    }
}

// Projects
.projects{
    &.sec-pad{
        padding: 30px 0;
    }
    .column-big, .column-small,.column-two{

        .project {
            &.overlay{
                &:after{
                    background: transparent;
                }
            }

            &:hover {
                &:after {
                    background: rgba(255, 255, 255, .8);
                }
                .project-content{
                    opacity: 1;
                    transform:none;

                    h3,
                    a{
                        opacity: 1 !important;
                        color: #000 !important;
                    }
                    .btn-arrow {
                        .arrow-right{
                            &:first-child{
                                opacity: 0;
                                display: none;
                            }
                            &:last-of-type {
                                opacity: 1;
                                display: inline-block;
                            }
                        }
                    }
                }
            }

            .project-content{
                opacity: 1;
                transform: translate(0, 10px);
                @include trans(.2s);

                h3,p,a.btn-arrow{
                    color: #fff;
                }
                p{
                    opacity: 0;
                    transform: translate(0, 10px);
                    @include trans();
                }
                .btn-arrow {
                    @include trans();

                    .arrow-right {
                        &:first-child {
                            opacity: 1;
                            display: inline-block;
                        }
                        &:last-of-type {
                            opacity: 0;
                            display: none;
                        }
                    }
                }
            }
        }
    }

    .column-big{
        .project {
            &:hover{
                .project-content{
                    p{
                        opacity: 1;
                        transform: none;
                        color: #000;
                    }
                }
            }
            .project-content{
                opacity: 1;
                @include trans(.2s);

                h3,p,a{
                    color: #fff;
                }
            }
        }
    }
}

.projects-slider{
    position: relative;
    margin-top: 30px;
    overflow:hidden;

    &:after,&:before{
        content: '';
        position: absolute;
        top: 0;
        background-repeat: no-repeat;
        background-image: url("../img/gradient.png");
        background-size: 100%;
        width: 115px;
        height: 215px;
        z-index: 1;
        pointer-events: none;
    }
    &:after{
        left: -72px;
    }
    &:before{
        right: -72px;
        transform: rotate(180deg);
        transform-origin: center;
    }
    &.news-slider{
        &:after,&:before{
            height: 450px;
            top: -60px;
        }
    }
    .project-item{
        display: inline-block;

        &.news-item{
            margin: 0 10px;

            .news-image{
                height: 185px;
            }
        }
    }
    .slick-list {
        margin: 0 -20px;
        padding-bottom: 15px;
    }
    .column-container{
        display: block;
        margin: 0 10px;
        padding-bottom: 15px;

        .column{
            height: 195px !important;
        }
        .type-container .type{
            left: -13px;
            font-size: 9px;
            top: 73px;
        }
        .box-container img{
            top: -44px !important;
            right: -15px !important;
        }


    }
    .slick-arrow{
        background: #f5f5f5;
        top: 48%;
    }
}

// Our Work
.work{
    &.sec-pad{
        padding: 30px 0;
    }
    .work-container{
        position: relative;

        //@include mq(t){
        //    &:after{
        //        content: '';
        //        position: absolute;
        //        top: 55px;
        //        right: -39%;
        //        background-image: url(../img/work-2.png);
        //        background-repeat: no-repeat;
        //        width: 100%;
        //        height: 362px;
        //        background-size: 65%;
        //        z-index: -1;
        //    }
        //}
        h2{
            font: 800 60px/1 $primaryFont;
            margin: 50px 0;
        }
        p{
            padding-left: 35px;
            font: 20px/1.4 $primaryFont;

            @include mq(t){
                padding-left: 0;
            }
        }
    }
}


// Section Title
.section-title{
    margin-bottom: 55px;

    @include mq(t){
        margin-bottom: 25px;
    }
    h2{
        font: 800 30px/1 $primaryFont;
    }
}

// Social icons
.social{
    li{
        display: inline-block;
        font-size: 18px;
        color: #231f20;

        a{
            color: #231f20;
            margin: 0 8px;

            i{
                font-size: 23px;
            }
            &:hover{
                color: darken(#231f20,20%);
            }
        }
    }
}

// News
.news{
    &.sec-pad{
        padding: 30px 0 70px;

        @include mq(t){
            padding: 0 0 60px;
        }
    }
    .news-block{
        .news-image{
            width: 100%;
            height: 235px;
        }
        .news-content{
            h3{
                font: 800 24px/1 $primaryFont;
                @include multiLineEllipsis(1em,1);
            }
            .date{
                font: 500 16px/1 $seconderyFont;
                text-decoration: underline;
                font-style: italic;
                direction: ltr;
            }
            p{
                font: 500 18px/1.2 $seconderyFont;
                @include multiLineEllipsis(1.2em,3);
            }
            a{
                font-size: 18px;
            }
        }
    }
}

// Help
.help{
    position: relative;
    margin: 0 15px;

    .help-content{
        color: #fff;

        h2{
            font: 800 60px/1 $primaryFont;
            -webkit-animation: fadeOutUp .8s ease .1s both;

            @include mq(t){
                font-size: 40px;
            }
        }
        p{
            font: 24px/34px $primaryFont;
            color: #fff;
            -webkit-animation: fadeOutUp .8s ease .1s both;

            @include mq(t){
                font: 18px/24px $primaryFont;
            }
            span{
                font-size: 30px;
                display: block;

                @include mq(t){
                    font: 20px/27px $primaryFont;
                }
            }
        }
        a{
            margin-top: 60px;
            float: none;
            -webkit-animation: fadeOutUp .8s ease .1s both;
        }
    }
}

// Burger Menu
.hamburger {
    display: flex;
    align-self: center;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 22px;
    cursor: pointer;
    float: right;
    margin: 12px 0;

    &.close-menu{
        position: relative;
        top: -48px;
        right: 10px;

        img{
            width: 22px;
            margin: 0 auto;
        }

        &:after{
            content: '';
            position: absolute;
            width: 45px;
            height: 45px;
            left: -2px;
            top: -12px;
            background-color: #fff;
            z-index: -1;
        }
    }

    &:hover{
        div{
            width: 100%;
        }
        .top-bun {
            -webkit-animation: burger-hover 1s infinite ease-in-out alternate;
            animation: burger-hover 1s infinite ease-in-out alternate;
        }
        .meat {
            -webkit-animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
            animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
        }
        .bottom-bun {
            -webkit-animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
            animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
        }
    }
    div{
        align-self: flex-end;
        height: 2px;
        width: 100%;
        background: #3E4651;
    }
    .meat{
        width: 75%;
        transition: all 200ms ease-in-out;
    }
    .bottom-bun {
        width: 50%;
        transition: all 400ms ease-in-out;
    }
}
@-webkit-keyframes burger-hover {
    0% {
        width: 100%;
    }
    50% {
        width: 50%;
    }
    100% {
        width: 100%;
    }
}
@keyframes burger-hover {
    0% {
        width: 100%;
    }
    50% {
        width: 50%;
    }
    100% {
        width: 100%;
    }
}

// Overlay menu
.menu-container {
    .menu-content {
        position: fixed;
        overflow: hidden;
        top: -9999px;
        height: 0;
        width: 100%;
        background-color: black;
        z-index: 999;
        @include trans(.4s);

        .menu-header{
            max-width: 1500px;
            margin: 0 auto;
            padding: 30px 15px;

            .logo-white{
                text-align: left;

                svg{
                    width: 150px;
                    fill: #fff;
                }
            }
        }
        .menu-footer{
            max-width: 1500px;
            margin: 0 auto 0;
            padding: 0 15px;
            @include cfx();

            @include mq(t){
                margin-top: 20px;
            }
            li{
                color: #fff;
            }
            a{
                color: #fff;

                &:hover{
                    color: darken(#fff,30%);
                }
            }
        }
        &.show {
            left: 0;
            top: 0;
            height: 100%;
            @include trans(.8s);

            //&:before,
            //&:after{
            //    height: 100%;
            //}

            .menu li.menu-item{
                animation: fadeInUp .8s ease both;
                -webkit-animation: fadeInUp .8s ease both;
            }
            a {
                &.exit{
                    display: block;
                }
            }
        }
        .menu {
            position: relative;
            color: white;
            text-align: left;
            top: 0;
            left: 0;
            max-width: 1400px;
            margin: 40px auto 0;
            padding: 0 15px;

            @include mq(t){
                margin: 10px auto 0;
            }
            li.menu-item {
                cursor: pointer;
                font: 30px/1 $primaryFont;
                //@include trans(.2s);

                @include mq(t){
                    font-size: 25px;
                }
                @for $i from 1 to 10 {
                    &:nth-child(#{$i}) { animation-delay: $i * 0.1s + 0.65s; }
                }

                a{
                    color: #fff;
                    display: block;
                    padding: 2.5vh 0;
                    position: relative;
                    @include trans(.2s);

                    &.projects{
                        &:after{
                            content: "";
                            position: absolute;
                            width: 0;
                            height: 2px;
                            background: #fff;
                            left: 0;
                            top: 85%;
                            z-index: 9;
                            @include trans(.6s);
                        }
                    }
                }
                ul.projects-menu{
                    position: absolute;
                    left: 53%;
                    margin-top: -83px;
                    opacity: 0;
                    z-index: 9;
                    @include trans(.2s);

                    .project-item{
                        font-weight: bold;

                        a{
                            color: #aaaaaa;
                            padding: 2vh 0;

                            @include mq(t){
                                font-size: 20px;
                            }
                            &:hover{
                                color: #fff;
                            }
                        }
                    }
                }
                &.view,
                &.hover{
                    a {
                        &.projects {
                            &:after {
                                width: 50%;
                            }
                        }
                    }
                    ul.projects-menu {
                        opacity: 1;
                    }
                    > .menu-img{
                        visibility: visible;

                        img{
                            transform: none;
                        }
                    }

                }
                > .menu-img{
                    position: absolute;
                    left: 43%;
                    top: 0;
                    width: 50%;
                    overflow: hidden;
                    z-index: -5;
                    visibility: hidden;

                    @media (max-height: 768px) {
                        left: 50%;
                        width: 44%;
                    }
                    @include mq(t){
                        display: none;
                    }
                    img{
                        transform:translateX(-100%);
                        @include trans(.4s);
                        width: 100%;
                        user-select: none;
                    }
                }
            }
        }
    }
}


// Hero image
.idia-hero{
    height: 574px;
    margin: 0 15px;

    @include mq(t){
        height: 500px;
    }
}
.hero-text {
    .hero-text-container {
        padding: 40px 35px;
        background: #fff;
        margin-top: -160px;
        position: relative;

        @include mq(t){
            padding: 40px 15px;
        }
        &:after{
            content: '';
            position: absolute;
            background-image: url("../img/full-p.png");
            top: -35px;
            right: -153px;
            background-repeat: no-repeat;
            width: 424px;
            height: 85px;
            z-index: -1;
            @extend .afd;

            @include mq(t){
                right: -213px;
                background-size: 250px;
            }
        }
        &.project-text-container{
            padding: 40px 35px 10px;
        }
        h2 {
            font: 800 35px/1 $primaryFont;
            color: #000;
            margin-top: 0;
        }
        P {
            font: 500 20px/28px $seconderyFont;
            color: #000;

            @include mq(t){
                font: 500 18px/24px $seconderyFont;
            }
        }
    }
}

.idia-obj{
    margin: 0 15px;
    position: relative;

    &:after{
        content: '';
        position: absolute;
        width: 100%;
        height: 408px;
        background: #ccc;
        top: -70px;
        left: 0;
        z-index: -1;
        @extend .afa;

        @include mq(t){
            height: 310px;
        }
    }
    .idia-mission{
        padding: 80px 50px 35px 50px;
        display: inline-block;

        @include mq(t){
            margin: 0 5px;
            padding: 30px 40px 30px;
            max-width: 250px;
            vertical-align: top;
            min-height: 326px;
        }
        h2{
            color: #000;
            position: relative;
            font: bold 52px/1 $primaryFont;
            z-index: 2;

            @include mq(t){
                font-size: 36px;
            }
            &:after{
                content: '';
                position: absolute;
                width: 88px;
                height: 89px;
                background: #fff;
                top: -8px;
                left: -18px;
                z-index: -1;

                @include mq(t){
                    width: 63px;
                    height: 63px;
                }
            }
        }
        p{
            color:#fff;
            font: 20px/23px $seconderyFont;
        }
        &.vision{
            background-color: #ee070c;
        }
        &.mission{
            background-color: #fff;

            h2 {
                &:after {
                    background: #f29c1e;
                }
            }
            p{
                color:#000;
            }
        }
        &.philosphy{
            background-color: #0a16bf;
        }
    }
}

// Our Team
.our-team-heading{
    margin-bottom: 90px;

    @include mq(t){
        margin-bottom: 30px;
    }
    h2{
        font: bold 36px/42px $primaryFont;

        @include mq(t){
            font: bold 30px/37px $primaryFont;
        }
    }
    p{
        font: 20px/26px $seconderyFont;
        color: #000;
        margin-top: 5px;
    }
}

// Teams
.team-member-container{
    padding-bottom: 30px;

    .col-sm-3{
        &:nth-child(even){
            margin-top: 135px;
        }
    }
    .team-member{
        figure{
            position: relative;

            &:before{
                content: '';
                position: absolute;
                bottom: -15px;
                left: -15px;
                background-color: rgba(237,28,36,.24);
                width: 209px;
                height: 190px;
                opacity: 0;
                @include trans();

                @include mq(t){
                    content: none;
                }
            }
            &:hover{
                &:before {
                    opacity: 1;
                }
            }
            img{
                width: 100%;
            }
        }
        figcaption{
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: left;
            padding: 30px 20px;
            color: #fff;

            @include mq(t){
                padding: 15px 20px;
            }
            h3{
                font: bold 24px/1 $primaryFont;

                @include mq(t){
                    font-size: 18px;
                }
            }
            cite{
                font: italic 20px/1 $seconderyFont;

                @include mq(t){
                    font-size: 16px;
                }
            }
        }
        img{
            width: 100%;
        }
        a.section-btn{
            float: none;
        }
    }
}

.slick-list{
    overflow: hidden;
}
.slick-arrow{
    position: absolute;
    left: -7%;
    top: 44%;
    background: #fff;
    border: none;
    padding: 5px 10px;
    outline: 0;
    z-index: 9;

    &.slick-next{
        right: -7%;
        left: initial;
    }
    @media (max-width: 1290px) {
        left: -60px;


        &.slick-next{
            right: -60px;
        }
    }
    @include mq(t){
        left: -45px;

        &.slick-next{
            right: -45px;
        }
    }
}
// Partners
.partners{
    background-color: #eee;
    margin: 0 15px;

    .partners-slider-c{
        .partner-slider{
            position: relative;


            .partner-slide{
                display: inline-block;
                max-width: 160px;
                margin: 15px;
            }

        }
    }
}

// Team Member
.member{
    position: relative;
    padding: 60px 0 0;

    &:before{
        content: '';
        position: absolute;
        top: 0;
        left: 32.5%;
        background-color: #eee;
        width: 100%;
        height: 100%;

        @include mq(t){
            top: 286px;
            left: 0;
            height: 82%;
        }
    }
    .section-btn{
        margin-bottom: 75px;
    }
    .member-img{
        position: relative;

        img{
            width: 100%;
        }
        &:before{
            content: '';
            position: absolute;
            top: 30px;
            right: 30px;
            background-color: #ee070c;
            width: 139px;
            height: 145px;
            z-index: -1;
            @include trans();
        }
    }
    .colors{
        margin-top: 120px;
    }
    .member-title{
        @include mq(t){
            margin-top: 20px;
        }
        h3{
            font: bold 36px/1 $primaryFont;
            margin-bottom: 10px;
        }
        cite{
            font-size: 24px;
        }
    }
    .member-info{
        .bio{
            @include mq(t){
                padding: 0 20px;
            }
            h3{
                font: bold 24px/1 $primaryFont;
            }
            p{
                font: 18px/24px $seconderyFont;
                color: #000;
            }
        }
    }
    .expertise{
        @include mq(t){
            padding: 0 20px;
        }

        h3{
            font: bold 24px/1 $primaryFont;
            margin-bottom: 15px;
        }
        .expertise-element{
            display: inline-block;
            margin: 5px 5px 0 0;

            a{
                display: block;
                padding: 13px 20px;;
                color: #fff;
                background: #231f20;
                font: 20px/1 $seconderyFont;

                &:hover{
                    background: darken(#231f20,20%);
                }
            }
        }
    }
    .read-more{
        margin-top: 60px;

        h4{
            font: italic 21px/1 $seconderyFont;
        }
    }
}
.member-projects{
    &.sec-pad{
        padding:50px 0;
    }
    h2{
        font: bold 24px/1 $primaryFont;
    }
    .column-container{
        @include mq(t){
            margin: 20px 15px;

            .column{
                height: 207px !important;
            }
        }
    }
}

// Google Map
.hero-map{
    height: 490px;
    margin: 0 15px;

    @include mq(t){
        height: 500px;
    }
    #map {
        height: 100%;
    }
}

// Contact
.contact{
    padding: 30px 0;

    .side-info{
        padding: 30px 60px;
        background: #ebebeb;

        .office{
            padding: 40px 0;

            &:first-child{
                border-bottom: 1px solid #ccc;

                @include mq(t){
                    border-bottom: 0;
                    padding: 0;
                }
            }
            h3{
                font: bold 28px/1 $primaryFont;
            }
            h4{
                font: bold 21px/1 $primaryFont;
            }
            p,a{
                font: 20px/26px $seconderyFont;
                color: #231f20;
                display: block;
            }
            .address{

            }
        }
    }
}
.contact-contnet{
    padding: 70px 0;

    h2{
        font: bold 35px/1 $primaryFont;
    }
    p{
        color: #231f20;
        font: 21px/26px $seconderyFont;

        span{
            display: block;
        }
    }
}
.join{
    height: 490px;

    @include mq(t){
        height: 400px;
    }
    .btn-arrow{
        margin-top: 150px;
    }
}

// Career page
.career{
    .side-career{

    }
}
.id_side{
    .id_side_item{
        padding: 25px;
        margin-right: 50px;
        border-bottom: 1px solid #ccc;
        position: relative;

        &:after{
            content: '';
            position: absolute;
            background-image: url('../img/arrow-right-black.png');
            background-repeat: no-repeat;
            background-size: 23px;
            width: 24px;
            height: 13px;
            top: 49%;
            right: 0;
            transform: none #{"/*rtl: rotate(-180deg) translateY(-6px) */"} ;
        }
        a{
            color: #000;
            display: block;
            font: normal 17px/23px $primaryFont;
            @include cfx;

            .career-svg,.img_side{
                float: left;
            }
            .career-svg{
                width: 60px;

                svg{
                    width: 100%;
                    height: auto;

                    rect{
                        stroke:#000000;
                        fill:none
                    }
                    g{
                        fill:#000;
                    }
                }
            }
            .img_side{
                width: 65px;
                height: 75px;
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);

                @media (max-width: $laptop) {
                    float: none;
                    margin: 0 auto;
                    display: block;
                }
                @media (max-width: $tablet) {
                    float: left;
                }
            }
            img,
            .career-svg{
                @media (max-width: $laptop) {
                    float: none;
                    margin: 0 auto;
                    display: block;
                }
                @media (max-width: $tablet) {
                    float: left;
                }
            }

            .news-title-c{
                float: left;
                margin: 3px 0;
                width: 75%;
                padding-left: 5px;

                &.career-title-c{
                    margin: 3px 0;
                }
                @media (max-width: $desktop) {
                    width: 57%;
                }

                @media (max-width: $laptop) {
                    width: 100%;
                    text-align: center;
                    margin-left: 0;
                }
                @media (max-width: $tablet) {
                    width: 60%;
                    text-align: left;
                    margin-left: 20px;
                }
                .date{
                    font-size: 13px;
                }
            }

            h4{
                font: inherit;
                padding-left: 5px;
                margin: 0;
                @include multiLineEllipsis(1.4em,2);
            }
        }
        &.active{
            background: #1b1b1b;
            padding: 25px 40px;
            margin-right: 0;

            &:after{
                content: "";
                background-image: url('../img/arrow-right.png');
                right: 20px;
            }
            a{
                color: #fff;
                font: bold 19px/24px $primaryFont;

                .news-title-c {
                    padding-left: 5px;
                    margin: 8px 0;
                    width: 60%;

                    &.career-title-c{
                        margin: 18px 0;
                    }
                    @media (max-width: $laptop) {
                        width: 100%;
                        text-align: center;
                    }

                    @media (max-width: $tablet) {
                        width: 60%;
                        text-align: left;
                    }
                }
                h4{
                    font: inherit;

                    &.news-title{
                        margin: 0;
                        padding-right: 0;
                    }
                }
                .career-svg{
                    width: 85px;

                    svg{
                        rect{
                            stroke:#fff;
                            fill:none
                        }
                        g{
                            fill:#fff;
                        }
                    }
                }
                .date{
                    padding-left: 5px;
                }
                .img_side{
                    width: 95px;
                    height: 80px;
                }
            }
        }
    }
}
form{
    @include cfx;

    .form-group{
        margin-top: 70px;
    }
}
.job{
    padding-left: 30px;
    border-left: 1px solid #ccc;

    @media (max-width: $tablet) {
        border-left: 0;
        padding-left: 0;
        padding-top: 20px;
    }
    .new-content{
        margin-top: 20px;
    }

    h3{
        font: bold 36px/1 $primaryFont;

        @include mq(t){
            font-size: 25px;
        }
    }
    h4{
        font: bold 24px/1 $primaryFont;
    }
    p{
        font: 18px/1.3 $seconderyFont;
        color: #231f20;

        span{
            display: block;
        }
    }
    .skills{
        li{
            font: 18px/1.3 $seconderyFont;
            color: #231f20;
        }
    }
}
.date{
    display: block;
    font: italic 15px/1 $primaryFont;
}
.button-container{
    @include cfx;

    &.news-btn-container{
        button{
            @media (max-width:580px){
                display: block;
                float: none;
            }
            &:first-child{
                margin-bottom:0;
            }
        }
    }
}
.apply{
    .help-content{
        h2{
            font: bold 27px/1.4 $primaryFont;
        }
    }
}
.news-social{
    width: 100%;
    border-top: 1px solid #ccc;
}

// Project Page
.projects-page{
    background-color: #f1f1f1;
    margin: 0 15px;

    &.sec-pad{
        padding: 70px 0;
    }
    .help-content{
        h2,p{
            color: #000;
        }
        h2{
            font-size: 36px;
        }
    }
}

.projects-list{
    &.sec-pad{
        padding: 50px 0;
    }
    .projects-header{
        @include cfx;
        margin-bottom: 60px;

        h2{
            font: bold 28px/1 $primaryFont;
            float: left;

            @include mq(m){
                float: none;
            }
        }
        .filter{
            float: right;
            @include cfx;
            @include mq(t){
                margin-top: 20px;
            }
            @include mq(m){
                float: none;
                margin-top: 30px;
            }
            .filter-label{
                @include cfx;
                float: left;

                img{
                    position: relative;
                    top: -2px;
                }
                span{
                    font-size: 21px;
                }
            }
            .select{
                position: relative;
                float: right;
                min-width: 200px;
                border-bottom:1px solid #000;

                @include mq(t){
                    min-width: 170px;
                }
                @include mq(m){
                    min-width: 120px;
                    margin-left: 0;
                }
                &:after{
                    content: '\f0dd';
                    position: absolute;
                    font-family: "Font Awesome 5 Free";
                    right: 10px;
                    top: 0;

                }
                select{
                    width: 100%;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    border: 0;
                    padding: 0 15px 15px;
                    font: 21px/1 $primaryFont;
                    outline: 0;
                    background: transparent;

                    @include mq(t){
                        font-size: 15px;
                    }
                }
            }
        }
    }
}

// Load More Button
button.load-more{
    float: none;
    margin: 60px auto 0;
    background: transparent;
    outline: 0;
    text-align: center;
    padding: 0;

    &:focus{
        outline: 0;
        color: #000;
    }
    img{
        width: 25px;
        position: relative;
        top: -1px;
    }
    span{
        @include trans();
    }
    &.loading{
        span{
            display: none;
            opacity: 0;
        }
        img{
            animation: rotate 1s ease both infinite;
            -webkit-animation: rotate 1s ease both infinite;
            margin-right: 0;
        }
    }
}


@keyframes rotate {
    0% {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 0);
    }
    100% {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

// Project Details Page
.hero-project-text{
    padding-top: 220px;

    img{
        max-width: 180px;
    }
    h2{
        font: bold 35px/38px $primaryFont;
        color: #fff;
    }
    @include mq(t){
        padding-top: 120px;

        img{
            max-width: 150px;
        }
        h2{
            font: bold 26px/1 $primaryFont;
        }
    }
}
.about-project{
    .about-title{
        padding: 10px 10px 10px 55px;
        background: #333;

        @include mq(t){
            padding: 10px;
        }
        h3{
            color: #fff;
            font: bold 24px/30px $primaryFont;
        }
    }
    .about-project-img{
        position: relative;

        @include mq(t){
            margin: 35px 12px;
        }
        &:after{
            content: "";
            position: absolute;
            top: -15px;
            left: -15px;
            background-image: url("../img/insight-p.png");
            width: 130px;
            height: 133px;
            z-index: -1;
            background-size: 80px;
            background-repeat: no-repeat;
        }
    }
    .project-details{
        .single-detail{
            h4{
                font: bold 21px/26px $primaryFont;
            }
            span{
                font: 20px/26px $primaryFont;
            }
        }
    }
}
.project-in{
    height: 700px;
    margin-top: -100px;

    @include mq(t){
        height: 850px;
        background-size: 200%;
        background-position: right center;
        background-color: #f8f8f8;
    }
    @include mq(m){
        background-size: 317%;
        background-position: top right;
    }
}
.project-in-content{
    margin-top: 70px;

    &.imple{
        margin-top: 50px;
        padding-bottom: 110px;

        @include mq(t){
            margin-top: 190px;
        }
    }
    h2{
        font: bold 32px/40px $primaryFont;

        &.tra{
            background: transparent !important;
        }
    }
    .p-content{
        padding: 30px 30px 30px 0;
        background: #fff;
    }
    p{
        font: normal 21px/24px $seconderyFont;
    }
    @include mq(t){
        h2{
            margin: 0;
            padding: 10px 0;
            background: #fff;
            font-size: 25px;
        }
    }
}
.project-in-container{
    margin-top: -65px;

    @include mq(t){
        margin-top: -265px;
    }
    .project-in-img{
        position: relative;

        .in-small{
            position: absolute;
            top: 60px;
            left: 50px;
            z-index: 999;

            @include mq(t){
                width: 80%;
                top: 22px;
                left: 10px;
            }
            .in-img{
                @include mq(t){
                    width: 27.3%;
                }
            }
        }
        .in-large{
            @include mq(t){
                width: 40%;
            }
        }
        .in-img{
            display: inline-block;
            margin: 5px;
        }
    }
}
.implementation{
    .container{
        background-size: 70%;
        background-position: 95% 0;
        background-repeat: no-repeat;

        @include mq(t){
            background-size: 90%;
            background-position: 45% 0;
        }
    }
}
.house{
    @include mq(t){
        margin-left: -15px;
    }
}
.house-model{
    display: inline-block;

    &.slick-slide{
        padding-top: 16px;
        margin-right: 20px;
    }
    .hm-img{
        position: relative;
        &:after{
            content: '';
            position: absolute;
            z-index: -1;
            top: -15px;
            left: -15px;
            background-repeat: no-repeat;
            width: 86px;
            height: 84px;
            background-image: url("../img/insight-p.png");
        }
    }
    h4{
        font: bold 20px/38px $primaryFont;
    }
}

.gallery{
    .projects-images-c{
        position: relative;

        .projects-images {
            width: 100%;
            margin: 0 auto;
            position: relative;

            .slick-track{
                height: 591px;

                @include mq(t){
                    height: 500px;
                }
            }
            .gallery-img{
                width: 100%;
                display: inline-block;

                .gallery-it{
                    height: 591px;

                    @include mq(t){
                        height: 500px;
                    }
                }
                a {
                    cursor: pointer;
                }
                img{
                    width: 100%;
                }
            }
        }
        .slider-arrows{
            position: absolute;
            bottom: 0;
            right: 0;

            a.gallery-arrow{
                padding: 10px 15px;
                background: #ebebeb;
                color: #4c4c4c;
                margin-left: 5px;
                border-radius: 0;
                font-size: 15px;

                &.slick-arrow{
                    position: initial;
                    height: 40px;

                    .arrow-left{
                        transform: rotate(-180deg) translateY(0);
                    }
                }
                &.first-child{
                    color: #ebebeb;
                    background: #4c4c4c;
                }
            }
        }

        //SLICK DOTS
        .slick-dots {
            margin: 0;
            width: 39px;
            bottom: 0;
            height: 40px;
            right: 230px;
            padding: 10px;
            position: absolute;
            text-align: center;
            background: #4c4c4c;
            color: #fff;

            @include mq(m){
                bottom: 0;
            }


            li {
                vertical-align: middle;
                margin: 0;
                position: absolute;
                display: none;
                color: #cdcdcd;
                font: 14px/1 $primaryFont;

                &.slick-active {
                    display: block;

                    button {
                        background-color: #fff;

                        &:hover {
                            background-color: #fff;
                        }
                    }
                }

                button {
                    outline: none;
                    display: block;
                    border: none;
                    background-color: rgba(255,255,255,.3);
                    text-indent: -9999px;
                    cursor: pointer;
                    height:14px;
                    width:14px;
                    border-radius: 50%;
                    @include trans(.2s);

                    &:hover {
                        background-color: #fff;
                    }
                }
            }
        }
    }
}

.related-projects{
    h2{
        font: bold 32px/1 $primaryFont;
        margin-bottom: 30px;

        @include mq(t){
            margin-bottom: 0;
        }
    }
    .related-slider{
        position: relative;

        .slick-list {
            margin: 0 -20px;
            padding-bottom: 15px;
        }
        .column-container{
            display: inline-block;
            max-width: 100%;
            margin: 0 20px;

            .column{
                @include mq(t){
                    height: 200px;
                }
            }
            .type-container .type{
                left: -13px;
            }
            &.column-two .box-container img{
                left: -24px;
            }
        }
        .slick-arrow{
            background: #f5f5f5;
            top: 48%;

            @include mq(t){
                top: 38%;
            }
        }
    }
}


.inspire{
    &.sec-pad{
        padding: 30px 0;
    }
    .inspiration-hero{
        @include mq(t){
            margin-top: 0;
        }
        h2{
            font: 900 72px/38px $primaryFont;

            @include mq(t){
                font-size: 60px;
            }
            span{
                font: bold 48px/52px $primaryFont;
                display: block;

                @include mq(t){
                    font: bold 38px/42px $primaryFont;
                }
            }
        }
        .p-content{
            margin-left: 220px;
            margin-top: -30px;
            max-width: 420px;

            @include mq(t){
                margin-left: -15px;
                padding: 15px;
                max-width: 90%;
                margin-top: 220px;
            }
            p{
                color: #000;
            }
        }
    }
    .inspiration-p{
        margin-top: -100px;

        @include mq(t){
            float: none !important;
            margin-top: -160px;
            padding-bottom: 130px;
            margin-left: 170px;
        }
    }
    .btn{
        @include mq(t){
            margin-top: 120px;
            float: none;
        }
    }
    .container{
        background-size: 62%;
        background-position: 95% 0;
        background-repeat: no-repeat;

        @include mq(t){
            background-size: 100%;
            background-position: 95% 210px;
        }
    }
}

// Design Process
.design-process{

    &.sec-pad{
        @include mq(t){
            padding-top: 0;
        }
    }
    .design-list{
        margin-top: 150px;

        @include mq(t){
            text-align: center;
            margin-top: 0;
            margin-bottom: 90px;
            position: relative;
            top: -15px;
        }
        li{
            transform: none;
            margin-bottom: 15px;

            @include mq(t){
                display: inline-block;
            }
            a{
                display: block;
                font: 21px/1.2 $primaryFont;
                color: #707070;

                @include mq(t){
                    display: inline-block;
                    transform: translate(0, 30px);

                    &:after {
                        content: '';
                        position: absolute;
                        bottom: -15px;
                        width: 100%;
                        border-bottom: 3px solid #ccc;
                        padding-bottom: 10px;
                        height: 3px;
                    }
                }
                span{
                    @include mq(t){
                        display: block;
                        transform: translate(0 ,45px);
                        @include trans();
                        font-size: 18px;
                        margin: 0 1vw;
                    }
                }
                .li-box{
                    height: 13px;
                    width: 13px;
                    border: 4px solid #ccc;
                    display: inline-block;
                    vertical-align: middle;
                    background: transparent;
                    position: relative;
                    @include trans();

                    @include mq(t){
                        display: none;
                    }
                    &:after{
                        content: '';
                        width: 0;
                        height: 2px;
                        background: transparent;
                        position: absolute;
                        top: 3px;
                        left: 1px;
                    }
                }
            }
            &.active{
                transform: scale(1.03);
                margin-bottom: 20px;

                @include mq(t){
                    transform: none;
                }
                a{
                    font: 900 90px/1.2 $primaryFont;
                    color: #000;

                    @include mq(t){
                        font-size: 21px;

                        &:after {
                            border-bottom: 3px solid #ee070c;
                        }
                    }
                    span{
                        @include mq(t){
                            transform: none;
                        }
                    }
                    .li-box{
                        height: 16px;
                        width: 16px;
                        background: #ee070c;
                        border: 4px solid #ee070c;
                        
                        &:after{
                            width: 40px;
                            background: #ee070c;
                            @include trans();
                            transition-delay: .2s;
                        }
                    }
                }
            }
        }
    }
    .design-content{
        position: relative;
        display: none;
        background-position: top right;
        background-repeat: no-repeat;

        @include mq(t){
            margin-top: 0;
        }
        &:after,
        &:before{
            content: "";
            position: absolute;
            z-index: -1;
        }
        &:before{
            width: 100%;
            height: 600px;
            background: #f7f7f7;
        }
        &:after{
            top: 30px;
            right: 30px;
            width: 90px;
            height: 91px;
            opacity: 0;
            z-index: -1;
            @include trans();
        }
        &.active{
            display: block;
        }
        .dialog{
            margin-bottom: -20px;

            img{

            }
        }
        .dialog-box{
            padding: 30px;
            background: #fff;
            max-width: 415px;

            p{
                font-size: 20px;
                color: #000;
            }
            @include mq(t){
                max-width: 270px;
            }
        }
        .mank-di{
            > div {
                display: inline-block;
                vertical-align: middle;
            }
        }
        .mankid{
            font: 700 25px/29px $primaryFont;
            position: relative;

            @include mq(t){
                font: 700 20px/27px $primaryFont;
            }
        }
        &#insight{
            background-size: 62%;
            transition-delay: .7s;
            @include mq(t){
                background-size: 72%;
            }
            //&:after{
            //    background-image: url("../img/insight-p.png");
            //}
            &:before{
                top: 40px;
                left: 10%;
                height: 500px;
                width: 85%;
            }
            .dialog{
                position: relative;
                z-index: 2;

                @include mq(t){
                    width: 100px;
                    height: 160px;

                    img{
                        margin-top: 100px;
                    }
                }
            }
            .dialog-box{
                margin-left: 50px;
                position: relative;
                z-index: 1;

                @include mq(t){
                    margin-left: initial;
                    margin-right: 0;
                }
            }
            .handwriting{
                margin-left: 200px;

                @include mq(t){
                    margin-left: initial;
                    margin-right: 200px;
                }
            }
            .paper-container{
                @include cfx;

                .paper{
                    position: relative;
                    margin-top: -180px;
                    margin-right: 20px;

                    @include mq(t){
                        margin-right: -10px;
                        width: 210px;
                        margin-top: -140px;
                    }
                }
            }
            .mankid{
                margin-top: -35px;

                @include mq(t){
                    width: 50%;
                }
            }
        }
        &#define{
            margin-top: -100px;

            @include mq(t){
                margin-top: 60px;
            }
            &:before{
                top: 26px;
                left: 22%;
                height: 440px;
            }
            .window{
                position: relative;
                left: -40px;
                mix-blend-mode: multiply;

                @include mq(t){
                    left: 30px;
                    top: -100px;
                    width: 130px;
                }
            }
            .define-img{
                position: relative;
                margin-top: -145px;
                margin-left: 110px;
                max-width: 100%;

                @include mq(t){
                    margin-top: -155px;
                    margin-left: 90px;
                }

                img{
                    width: 100%;
                }
                &:after{
                    content: "";
                    position: absolute;
                    z-index: -1;
                    top: -10px;
                    right:-10px;
                    background-image: url("../img/define-p.png");
                    width: 90px;
                    height: 91px;
                }
            }
            .mank-di{
                margin-top: -170px;
                position: relative;

                @include mq(t){
                    margin-top: -40px;
                }
            }
            .texture{
                margin-top: -135px;
                margin-left: 296px;
                z-index: -5;
                position: relative;

                @include mq(t){
                    margin-left: -15px;
                }
            }
            .mankid{
                @include mq(t){
                    margin-left: 120px;
                    top: -50px;
                }
            }
            .leaf{
                position: relative;
                z-index: 3;
                margin-top: -115px;
                margin-right: -115px;

                @include mq(t){
                    margin-top: -155px;
                    margin-right: 15px;
                    width: 100px;
                }
                @include mq(m){
                    right: -15%;
                    margin-right: 0;
                }
            }
        }
        &#ideate{
            @include mq(t){
                background-size: 85%;
                background-position: right 100px;
            }
            &:before{
                width: 80%;
                top: -50px;
                left: -4%;
            }
            &:after{
                background-image: url("../img/ideate-p.png");
                top: 90px;
            }
            .house-notes{
                width: 240px;
            }
            .dialog-box{
                margin-top: -23px;

                @include mq(t){
                    margin-top: 130px;
                }
            }
            .mank-di{
                margin-left: -60px;
                margin-top: 25px;

                @include mq(t){
                    margin-left: 0;
                }
                img{
                    mix-blend-mode: multiply;

                    @include mq(t){
                        margin-top: -280px;
                        width: 110px;
                        margin-left: 0;
                    }
                }
            }
            .sketch-house{
                margin-top: -120px;
                margin-right: -30px;
                z-index: -2;
                position: relative;

                @include mq(t){
                    margin-top: -270px;
                    width: 150px;
                }
            }
        }
        &#action{
            background-size: 100%;

            &:before{
                height: 530px;
            }
            .mankid{
                margin-left: -50px;
                margin-bottom: 30px;

                @include mq(t){
                    margin-left: 0;
                }
            }
            .working{
                position: relative;
                margin-top: 50px;

                @include mq(t){
                    margin-right: 50px;
                }
            }
            .dialog-box{
                margin-top: -80px;
                position: relative;
            }
        }
        &#scale{
            &:before{
                left: 20%;
                top: -5%;
                height: 450px;
            }
            .scale-imgs{
                .scale-img{
                    display: inline-block;
                    width: 29%;

                    &:first-child{
                        width: 11.4%;
                        position: relative;
                        top: -20px;
                    }
                    @include mq(t){
                        width: 28%;
                    }
                }
            }
            .scale-left{
                @include cfx;

                .mankid{
                    width: 50%;

                    @include mq(t){
                        margin-top: 0;
                    }
                }
                img{
                    width: 55%;

                    @include mq(t){
                        width: 50%;
                    }
                }
            }
            .dialog-box{
                margin-top: -170px;
                position: relative;

                @include mq(t){
                    margin-top: 20px;
                }
            }
        }
    }
}























.input-file-container {
    position: relative;

    &:after{
        content: '';
        position: absolute;
        background-image: url("../img/attach.png");
        width: 20px;
        height: 22px;
        top: 13px;
        right: 12px;
        background-size: 90%;
        background-repeat: no-repeat;
    }
}
.file-return {
    margin: 0;
}
.file-return:not(:empty) {
    margin: 1em 0;
}
.js{
    .input-file-trigger {
        padding: 13px 17px;
        border-bottom: 2px solid #787878;
        background: #fff;
        font: 15px/1 $primaryFont;
        text-align: left;
        transition: all .4s;
        cursor: pointer;
        display: block;
    }
    .input-file {
        position: absolute;
        top: 0; left: 0;
        width: 225px;
        opacity: 0;
        padding: 14px 0;
        cursor: pointer;
    }
    .file-return {
        font-style: italic;
        font-size: .9em;
        font-weight: bold;
    }
    .file-return:not(:empty):before {
        content: "Selected file: ";
        font-style: normal;
        font-weight: normal;
    }
}






.panel{
    margin-bottom: 20px !important;
    border: 0;
}
.panel-heading {

    .panel-title {
        a {
            @include cfx();

            &:hover, &:focus {
                color: initial;
            }
        }
    }

    &.nochiled {
        .button {
            display: none;
        }
    }
}

.panel-heading {
    color: #fff;
    background-color: #f1f1f1;
    border-color: #229898;
    border-radius: 0;
    padding: 0;

    .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 16px;
        color: inherit;

        .button {
            display: block;
            width: 100%;
            margin-right: 10px;
            color: #1c1c1c;
            background: #f1f1f1;
            @include trans;
            padding: 15px;
            border-radius: 0;
            font: bold 20px/1 $primaryFont;

            &:hover,
            &:focus {
                color: #1c1c1c;
            }

            .line2 {
                display: block;
                width: 15px;
                height: 3px;
                background: #1c1c1c;
                position: relative;
                margin-top: 10px;
                top: 50%;
                right: 0;
                float: right;
                transition: all 0.5s cubic-bezier(.76,-0.26,.15,1.32);
                transform: translateY(-50%);
                transform-origin: center center;
            }

            .line2::after {
                content: "";
                display: block;
                width: 15px;
                height: 3px;
                background: #1c1c1c;
                position: absolute;
                transition: all 0.5s cubic-bezier(.76,-0.26,.15,1.32);
                transform-origin: center center;
                transform: rotate(90deg);
            }
        }

        [aria-expanded="true"] {
            &.button {
                .line2 {
                    -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
                    top: 45%;
                }

                .line2::after {
                    transform: rotate(0deg);
                    background: transparent;
                }
            }
        }
    }
}
.panel-body {
    padding: 15px;
}
.inovv-project{
    margin-bottom: 60px;
}
.inovv-text-container{
    &:after{
        content: none !important;
    }
}
.innov{
    h2{
        font: bold 32px/40px $primaryFont;
    }
    p{
        color: #000;
        font-size: 18px;
    }
}
.inovv-text{
    .hero-text-container{
        margin-bottom: -226px;
        margin-top: 0;
        position: relative;
        top: -40px;
    }
}
.full-width{
    img{
        width: 100%;
    }
}
.bgGray{
    position: relative;

    &:after{
        content: '';
        position: absolute;
        width: 100%;
        height: 770px;
        background: #f7f7f7;
        z-index: -1;
        top: -270px;
    }
}




.is-visible {
    .box-container{
        &.top {
            img {
                top: -20px;
                left: initial;
                right: -20px;
            }
        }
        img{
            top: -100px;
            left: -20px;
            transition-delay: .7s;
        }
    }
    .member-img:before{
        top: -15px;
        right: -15px;
        transition-delay: .7s;
    }
    .expertise-element{
        animation: fadeInUp .8s ease both;
        -webkit-animation: fadeInUp .8s ease both;

        @for $i from 1 to 10 {
            &:nth-child(#{$i}) { animation-delay: $i * 0.3s + 0.65s; }
        }
    }
    .project-text-container{
        h2,cite,p{
            animation: fadeInUp .8s ease both;
            -webkit-animation: fadeInUp .8s ease both;
        }
        > *{
            @for $i from 1 to 10 {
                &:nth-child(#{$i}) { animation-delay: $i * 0.2s + 0.35s; }
            }
        }
    }
    .project-in-img,
    .in-img{
        animation: fadeInRight .8s ease both;
        -webkit-animation: fadeInRight .8s ease both;
    }
    .in-img{
        @for $i from 1 to 10 {
            &:nth-last-of-type(#{$i}) { animation-delay: $i * 0.1s + 0.65s; }
        }
    }
    #insight,
    #define,
    #scale,
    #ideate,
    #action{
        animation: fadeInLeft .8s ease .5s both;
        -webkit-animation: fadeInLeft .8s ease .5s both;

        & > *{
            animation: fadeInUp .8s ease both;
            -webkit-animation: fadeInUp .8s ease both;
            @for $i from 0 to 20 {
                &:nth-child(#{$i}) { animation-delay: $i * 0.2s + 0.85s !important; }
            }
        }

        &:before{
            opacity: 1;
        }
    }
    #insight,
    #ideate{
        &:before{
            opacity: 0;
        }
    }
    #define{
        animation: fadeInUp .8s ease .5s both;
        -webkit-animation: fadeInUp .8s ease .5s both;

        .window,
        .leaf{
            animation: fadeInLeft .8s ease both;
            -webkit-animation: fadeInLeft .8s ease both;
            animation-delay: .85s;
        }
    }
    #action{
        .mankid{
            animation: fadeInLeft .8s ease both;
            -webkit-animation: fadeInLeft .8s ease both;
        }
    }
    #scale{
        .mankid,
        .scale-imgs{
            animation: fadeInLeft .8s ease both;
            -webkit-animation: fadeInLeft .8s ease both;
        }
    }
}
.slick-slide{
    .column{
        .project-content{
            transform: none;

            *{
                opacity: 1 !important;
                transform: none !important;
            }
        }
    }
}