html,body {
    height: 100%;
}
body {
    background-color: #282828;
    font-family: 'DINPro';
    color: white;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1em;
    font-size: 35%;
    //overflow-x: hidden;
    width: 100%;
    font-size: 62.5%;
    -webkit-overflow-scrolling: touch;
}

.bse {
    width: 100%;
    -webkit-overflow-scrolling: touch;
    position: relative;
    @include tablet {
        overflow: hidden;
    }
}

.row {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0px 20px;
    position: relative;
    clear: both;
    @include desktop {
       // padding: 0px 50px;
       padding: 0px 110px;
    }
    @include large {
       // padding: 0px 90px;
    }
    &--no-padding {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0px 0px;
        position: relative;
        clear: both;
    }
}
.clear {
    clear: both;
}


$gold-lvl-1: #8d794a;
$bright-muddy-gold: #a4864d;
$muddy-white: #bfbfbf;

a,
a:hover {
    text-decoration: none;
}


.main {
    height: 100vh;
    width: 100%;
    position: relative;
    min-height: 600px;
    .after {
        @include tablet {
            transition: all 0.5s ease;
            width: 0;
            height: 0;
            border-top: 850px solid transparent;
            border-left: 850px solid #73674d;
            border-bottom: 0px solid transparent;
            content: '';
            z-index: 1;
            position: absolute;
            bottom: 0;
            opacity: 0.8;
        }
    }
    .row {
        display: table;
        height: 100%;
        width: 100%;
    }

    &__content {
        width: 100%;
        //background: red;
        position: relative;
        z-index: 2;
        display: table-cell;
        vertical-align: middle;

    }
    &__titles {
        position: relative;
        color: white;
        h1 {
            line-height: .95em;
            text-transform: uppercase;
            margin-top: 30px;
            font-size: 13vw;
            //transition: font-size 0.5s ease;
            @include tablet {
                font-size: 9.2em;
            }
            @include desktop {
                font-size: 6vw;
            }
            @include large {
                font-size: 9.2em;
            }
            br {
                display: none;
                @include tablet {
                    display: none;
                }
            }
        }
        h2 {
            line-height: 1.3em;
            font-weight: normal;
            font-size: 1.9em;
            margin-top: 0px;
            color: $muddy-white;
            @include tablet {
                font-size: 3.6em;
            }
            @include desktop {
                font-size: 3vw;
            }
            @include large {
                font-size: 3.6em;
            }
        }
    }
    &__link {
        background-color: $bright-muddy-gold;
        padding: 30px;
        text-transform: uppercase;
        font-weight: bold;
        color: white;
        font-size: 1.8em;
        padding: 27px 60px 26px 120px;
            display: inline-block;
    }

}


.p-1, .p-2, .p-3, .p-4 {
    @include tablet {
        transition: all 1s cubic-bezier(0.16, 0.4, 0.38, 0.82);

    }
}

.p-p, .edge, .ie {
    .p-1, .p-2, .p-3, .p-4 {
        transition: none !important;
    }
    .bse {
        overflow: hidden !important;
    }

}

.services.start-up {
    .main {
        &:before {
            @include tablet {}
        }
        .after {
            @include tablet {
                border-top: 3850px solid transparent;
                border-left: 3850px solid #927d4b;
                animation: start-up .85s forwards cubic-bezier(0, 0, 0.24, 1);
                animation-delay: 3s;
                opacity: 1;
            }
        }
        &__bg {
            animation: bg-zoom-out 1.2s forwards cubic-bezier(0, 0, 0.24, 1);
            animation-delay: 3s;
            transform: scale(1.4);
            transform-origin: center center;
        }
        &__animation-overlay {
            @include tablet {
                animation: fade-in .5s forwards cubic-bezier(0, 0, 0.24, 1);
                opacity: 0;
                //animation-delay: 1s;
            }
        }
        .animated-overlay {
            .arrow__down {
                height: 100px;
                animation: arrow-down-go 1.4s forwards cubic-bezier(0, 0, 0.24, 1);
                animation-delay: 3s;
            }
            .arrow__right {
                width: 164px;
                animation: arrow-right-go 1.4s forwards cubic-bezier(0, 0, 0.24, 1);
                animation-delay: 3s;
            }
        }
    }
}


.spaces.start-up {
    .main {
        &:before {
            
        }
        .after {
            // @include tablet {
            //     border-top: 2850px solid transparent;
            //     border-left: 2850px solid #927d4b;
            //     animation: start-up .85s forwards cubic-bezier(0, 0, 0.24, 1);
            //     animation-delay: 1s;
            //     opacity: 1;
            @include tablet {
                border-bottom: 3850px solid transparent;
                border-left: 3850px solid #927d4b;
                opacity: 1;
                animation: start-up-spaces .85s forwards cubic-bezier(0, 0, 0.24, 1);
                animation-delay: 2s;
            }
            
            // }
        }
        &__bg {
            animation: bg-zoom-out 1.2s forwards cubic-bezier(0, 0, 0.24, 1);
            animation-delay: 2s;
            transform: scale(1.4);
            transform-origin: top left;
        }
        &__animation-overlay {
            @include tablet {
                animation: fade-in 0.5s forwards cubic-bezier(0, 0, 0.24, 1) 1.8s;
                opacity: 0;

            }
        }
        .main__animation-overlay {
            .u__angle-box-1 {
                right: 0;
                width: 10%;
                animation: width-grow 1.4s forwards cubic-bezier(0, 0, 0.24, 1);
                animation-delay: 2s;
            }
             .u__angle-box-2 {
                right: 0;
                height: 10%;
                animation: height-grow 1.4s forwards cubic-bezier(0, 0, 0.24, 1);
                animation-delay: 2s;
            }
        }
    }
}

.process.start-up {
    .main {
        &:before {
            @include tablet {}
        }
        .after {
            @include tablet {
                border-top: 3850px solid transparent;
                border-left: 3850px solid #927d4b;
                animation: start-up-team .85s forwards cubic-bezier(0, 0, 0.24, 1);
                animation-delay: 2s;
                opacity: 1;
            }
        }
        &__bg {
            animation: bg-zoom-out 1.2s forwards cubic-bezier(0, 0, 0.24, 1);
            animation-delay: 2s;
            transform: scale(1.4);
            transform-origin: top left;
        }
        &__animation-overlay {
            @include tablet {
                animation: fade-in .5s forwards cubic-bezier(0, 0, 0.24, 1);
                opacity: 0;
            }
        }
    }
}


.process.team.start-up {
    .main {
        &:before {
            @include tablet {}
        }
        .after {
            z-index: 3;
            @include tablet {
                border-top: 3850px solid transparent;
                border-left: 3850px solid #927d4b;
                animation: start-up-team .85s forwards cubic-bezier(0, 0, 0.24, 1);
                animation-delay: 2s;
                opacity: 1;
            }
        }
        &__bg {
            animation: bg-zoom-out 1.2s forwards cubic-bezier(0, 0, 0.24, 1);
            animation-delay: 2s;
            transform: scale(1.4);
            transform-origin: top left;
        }
        &__animation-overlay {
            @include tablet {
                animation: fade-in .5s forwards cubic-bezier(0, 0, 0.24, 1);
                opacity: 0;
            }
        }
    }
}

.arrow__head {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid green;
    width: 0;
    height: 0;
    z-index: 2;
    position: relative;
    margin-left: 30px;
    right: 0;
    transition: transform 0.7s cubic-bezier(.15, .56, .27, .96);
    //transform: translateZ(0);
    &:before {
        content: '';
        width: 2000px;
        height: 6px;
        background: green;
        display: block;
        position: absolute;
        right: 10px;
        margin-top: -3px;
    }
}

.content__outlineSVG[data-type="dashed"] {
    stroke: red;
    stroke-dasharray: 3;
}

.animated-overlay {
    display: none;
    @include tablet {
        display: block;
    }
    @include position(absolute, -100px 0px 0px -102px);
    .circle__outer {
        position: absolute;
        //background: #a9aaab;
        border-radius: 50%;
        height: 64px;
        width: 64px;
        border: 2px solid $bright-muddy-gold;
        left: 0;
    }
    .circle__inner {
        position: absolute;
        transform: translate(-50%, -50%);
        //background: $bright-muddy-gold;
        border: 1px solid $bright-muddy-gold;
        border-radius: 50%;
        height: 46px;
        width: 46px;
        left: 50%;
        top: 50%;
    }
    .arrow {
        position: relative;
        &__down {
            width: 2px;
            height: 438px;
            background-color: #8d794a;
            display: block;
            z-index: 1;
            position: absolute;
            margin-left: 33px;
            margin-top: 85px;
            &:before {
                content: '';
                position: absolute;
                width: 2px;
                height: 50px;
                background-color: $gold-lvl-1;
                top: -150px;
            }
            &:after {
                border-top: 22px solid $gold-lvl-1;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                width: 0;
                height: 0;
                content: '';
                position: absolute;
                z-index: 1;
                right: -4px;
                bottom: -4px;
            }
        }
        &__right {
            height: 2px;
            width: 300px;
            background-color: #8d794a;
            display: block;
            z-index: 1;
            position: absolute;
            margin-top: 29px;
            margin-left: 82px;
            &:before {
                content: '';
                position: absolute;
                width: 50px;
                height: 2px;
                background-color: $gold-lvl-1;
                left: -150px;
            }
            &:after {
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 22px solid $gold-lvl-1;
                width: 0;
                height: 0;
                content: '';
                position: absolute;
                z-index: 1;
                right: -5px;
                top: -4px;
            }
        }
    }
}


.triangle-decor {
    position: absolute;
    $box-width-mobile: 400px;
    $box-width: 550px;
    width: $box-width-mobile;
    height: $box-width-mobile;
    transform-origin: center;
    top: 100px;
    z-index: 2;
    left: 60px;
    transform: rotate(270deg);
    @include tablet {
        left: 100px;
        top: 100px;
        width: $box-width;
        height: $box-width;
        z-index: 2;
    }
    .u__angle-box-1 {
        &:before {
            display: none;
        }
    }
    *,
    *:after,
    span {
        background-color: #b5a272;
    }
    *:before {
        border-color: #b5a272;
    }
    .arrow-right {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 22px solid #b5a272;
        width: 0;
        height: 0;
        content: '';
        position: absolute;
        z-index: 1;
        left: -40px;
        background: transparent;
        top: -4px;
    }
    .arrow-bottom {
        border-top: 22px solid #b5a272;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        width: 0;
        height: 0;
        content: '';
        background: transparent;
        position: absolute;
        z-index: 1;
        right: -4px;
        bottom: -41px;
    }
}


@include tablet {}

@include desktop {}