p.info {
    text-align: right;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: .8rem;
    opacity: .6;
}
.footerlinks {
    display: flex;
    justify-content: space-between;
}
.footer_link_item a {
    text-decoration: none;
    font-size: .9rem;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}
  ul.footer_link {
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 0;
}

li.footer_link_item {
    list-style-type: none;
    padding: 0;
    margin: 0!Important;
    color: white!important;
    text-decoration: none;
    font-family: 'Roboto, sans-serif';
}

span.contact_option {
        font-size: .8rem;
        color: white!important;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        letter-spacing: 0.3rem;
        opacity: .5;
        text-align: left;
}

.contact_info h1 {
    font-family: 'Roboto', sans-serif!important;
    font-size: 2.5rem!important;
    margin-bottom: 40px!important;
}

.contact_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding-left: 100px;
}
.contactusform {
    width: 80vh;
    border: 1px solid #3f3f3f;
    padding: 50px;
    margin-top: 50px;
    border-bottom-right-radius: 50px;
}

label.form-label {
    color: white;
    font-family: 'Roboto',sans-serif;
    font-size: .8rem;
    margin: 0;
    font-weight: 300;
    opacity: .7;
}

.form-control {
    padding: 10px 13px;
    background: #2d2d2d42;
    border: 1px solid #343434;
    margin-bottom: 20px;
}

.footer {
    background: #000000;
    background: -webkit-linear-gradient(to right, #17181D, #000000);
    background: linear-gradient(to right, #17181D, #000000);
    padding: 150px 200px 10px 200px;
    font-family: 'Syne', sans-serif;
}
.footer h1 {
    font-size: 6rem;
    color: white;
    width: 70%;
    font-weight: 400;
}
.workscroller {
    display: flex;
    gap: 30px;
    width: 120vw;
}

    .workscroller img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
p.description {
    font-size: .875rem!important;
    line-height: 140%!important;
    width: 100%!important;
    padding-top: 10px;
}
header {
    color: black;
    font-weight: 400;
    font-size: 1rem;
    padding-top: 10px;
    text-transform: uppercase;
    font-family: 'Roboto';
}

    .otherrecentwork p {
    font-size: 1rem;
    font-weight: 300;
    font-family: 'Roboto', sans-seir;
    width: 50%;
    line-height: 170%;
}
.otherrecentwork {
    padding: 0px 200px;
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    font-family: 'Syne', sans-serif;
    flex-direction: column;
    background: white;
    position: relative;
    top: -75px;
}
.black_featured_section p {
    font-size: .9rem;
    width: 70%;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-bottom: 20px;
    opacity:.6;
}
span.contact_us_mini {
    font-weight: 300;
    letter-spacing: 0.2rem;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: .875rem;
    opacity: .5!important;
}
    .black_featured_section {
    padding: 50px 200px;
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    font-family: 'Syne', sans-serif;
    flex-direction: column;
    background: #fef9f4;
    position:relative;
    top:-75px;
}

.black_featured_section span {
    font-size: .8rem;
    color: #7a7167!important;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    letter-spacing:0.05rem;
}


.otherrecentwork span {
    font-size: .8rem;
    color: black!important;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    letter-spacing:0.05rem;
}

.black_featured_section h4 {
    color: #0a0a0a;
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    margin-top: 20px;
    letter-spacing: -0.05rem;
    margin-bottom: 20px;
}
.black_featured_section img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    border-bottom-right-radius: 50px;
}
.button {
    background:transparent;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    opacity: .9;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    border: 1px solid #5a5a5a;
    transition: all 100ms;
    padding: 20px;
    width: fit-content;
    text-decoration: none;
}
.space_even {
    display: flex;
    justify-content: space-between;
    height: 200px;
    flex-direction: column;
}


    .invisible_card{
        margin-bottom:30px;
    }
.invisible_card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-bottom-right-radius: 50px;
}

.invisible_card h3 {
    font-size: 1.4rem;
    font-family: 'Syne', sans-serif;
    color: black;
    font-weight: 200;
    letter-spacing: -0.02rem;
    margin-top: 15px;
    margin-bottom: 0;
    display: block;
}


.invisible_card a {
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    font-weight: 300!important;
    color: black;
    letter-spacing: 0.05rem;
    text-decoration: none;
    border-bottom: 1px solid grey;
    line-height: 100%;
    padding: 0;
    margin: 0;
}
span.mini_title {
    font-size: .9rem;
    color: darkgrey;
    margin-bottom: 10px;
}
.our_services {
    background: white;
    text-align: left;
    padding: 50px 200px;
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    font-family: 'Syne', sans-serif;
    flex-direction: column;
    position: relative;
    top: -75px;
}
    body{
        overflow-x: hidden;
    }
    span.header_section_title {
    color: #bbbbbb;
}
.grey_introduction_section {
    background: #f1f1f1;
    padding: 70px 200px;
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    font-family: 'Syne', sans-serif;
    flex-direction: column;
    position: relative;
    top: -75px;
}

    span.brand_font {
    font-weight: 800;
    font-size: 2rem;
    color: white;
}
.slide-in-right{-webkit-animation:slide-in-right .5s cubic-bezier(.25,.46,.45,.94) .5s both;animation:slide-in-right .5s cubic-bezier(.25,.46,.45,.94) .5s both}
@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}

    .slide-in-bottom{-webkit-animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) .5s both;animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) .5s both}
    @-webkit-keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
    .social_icons_holder svg {
    width: 16px;
    color:white;
    fill:white;
    height: 16px;
    transition: all 100ms;

}

.fade-in-fwd{-webkit-animation:fade-in-fwd .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-fwd .6s cubic-bezier(.39,.575,.565,1.000) both}

@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

.social_icons_holder:hover svg {
 transform:scale(1.05);

}
.social_icons_holder{
        display: flex;
    flex-direction: column;
    gap: 20px;
    position:absolute;
    top:50%;
    right:30px;
}

 .scroll-down {
    transform: rotate(90deg);
    text-transform: uppercase;
    color: #fff;
    font-size: 9px;
    letter-spacing: 3px;
    position: absolute;
    bottom: 85px;
    z-index: 3;
    right: 25px;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;


        &:before, &:after {
            content: '';
            height: 1px;
            width: 60px;
            background-color: #fff;
            position: absolute;
            bottom: 50%;
        }

        &:before {
            left: 65px;
            opacity: .5;
        }

        &:after {
            left: calc(100% + 13px);
            width: 24px;
            animation: scrollDown 3s ease-in-out-quart infinite;
        }
    }
    .kenburns-left{-webkit-animation:kenburns-left 10s ease-out alternate both;animation:kenburns-left 10s ease-out alternate both}

@-webkit-keyframes kenburns-left{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:0% 50%;transform-origin:0% 50%}100%{-webkit-transform:scale(1.25) translate(-20px,15px);transform:scale(1.25) translate(-20px,15px);-webkit-transform-origin:left;transform-origin:left}}@keyframes kenburns-left{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:16% 50%;transform-origin:16% 50%}100%{-webkit-transform:scale(1.25) translate(-20px,15px);transform:scale(1.25) translate(-20px,15px);-webkit-transform-origin:left;transform-origin:left}}
.image_explainer {
    width: 400px;
    text-align: left;
    margin-top: 20px;
    color: #ffffffbd;
    font-family: 'Roboto', sans-serif;
    border-left: 1px solid white;
    padding-left: 20px;
    font-weight: 200;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.09rem;
}
.navbar {
    position: relative;
    top: 40px;
    background: transparent!important;
    z-index: 9;
    padding: 15px 40px;
}

    .header {
        display: flex;
        position: relative;
        align-items: center;
        height:100vh;
        overflow:hidden;
        justify-content: center;
        top: -75px;
    }

    .left-column {
        flex: 50%;
    }

    
    .left-column img {
        width: 100%;
        width:50vw;
    }

    .left-column img {
    height: 100vh;
    object-fit: cover;
}
.right-column {
    position: relative;
    flex: 50%;
    background: linear-gradient(to right, #17181D, #000000);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:50vw;
    height: 100vh;
}
.right-column img {
    width: 400px;
    height: 50%;
    object-fit: cover;
    border: 1px solid #616161;
    padding: 16px;
}

    .text-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
    }

    h1.main_header {
    z-index: 9;
    font-family: 'Syne', sans-serif;
    font-size: 6rem;
    font-weight: 400;
    position: absolute;
    padding: 70px;
    color: white;
    text-shadow: 3px 1px 50px #141414;
}
a.nav-link {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    opacity: .9;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}
ul.navbar-nav.justify-content-center {
    display: flex;
    gap: 30px;
}

span.smaller_callus {
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: .7rem;
    font-weight: 200;
    text-align: right;
    position: absolute;
    right: 10px;
    top: -10px;
}
a.nav-link.quote_link {
    border: 1px solid #5a5a5a;
    transition: all 100ms;
}

a.nav-link.quote_link:hover {
    border:1px solid white;
    color:white!important;
}
.end_nav {
    position: absolute;
    right: 90px;
}
.fade-in {
            opacity: 1;
            transition: opacity 1s ease-in-out;
        }




        @media only screen and (max-width: 600px) {
            .left-column {
                flex: 100%;
                width: 100%;
            }
            .button {
                margin-top: 10px !important;
                display: block;
            }
            .social_icons_holder{
                display:none;
            }
            
            .right-column {
                display: none;
            }
            
            img.kenburns-left {
                width: 100%;
            }
            
            h1#HeaderText {
                font-size: 3rem;
                padding: 10px;
            }
            
            .social_icons_holder {
                position: absolute;
                top: 100px;
            }
            
            .grey_introduction_section {
                padding: 70px 20px;
                font-size: 2rem;
            }
            
            .our_services {
                padding: 70px 20px;
                font-size: 2rem;
            }
            
            .invisible_card img {
                height: 200px;
            }
            
            .black_featured_section {
                padding: 70px 20px;
            }
            
            .otherrecentwork {
                padding: 70px 20px;
            }
            
            .otherrecentwork p {
                width: 100%;
            }
            
            .workscroller {
                display: flex;
                flex-direction: column;
            }
            
            .footer {
                padding: 70px 20px;
            }
            
            .footer h1 {
                font-size: 3rem;
                width: 100%;
            }
            
            .col-xl-6.contact_info {
                padding: 0;
                margin-top: 40px;
            }
            
            .contact_info h1 {
                font-size: 2rem!important;
            }
            
            ul.footer_link {
                display: none;
            }
            
            p.info {
                text-align: left;
            }
        }

        .header.non_home_header {
            background: linear-gradient(to right, #17181d, #000000);
        }


        .header.non_home_header {
            background: linear-gradient(to right, #17181d, #000000);
            max-height: 500px;
            justify-content: left;
        }

        .team_photo {
            display: flex;
            align-items: center;
            justify-content: center;
          
        }
        
        .team_photo img {
        
            max-width:600px;
            max-height:600px;
            object-fit:cover;
        }

        .our_services.custom_color {
            background: #f1f1f1;
            margin-top: 200px;
        }

        .header.services_height_adjust {
            height: 70vh!important;
            max-height: 70vh;
        }
        .backfromtop {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, #0f0f0f, transparent);
        }

        .bordered_card {
            border: 1px solid #f1f1f1;
            padding: 30px;
            margin-bottom: 20px;
        }
        
        
        .bordered_card h3 {
            font-weight:400;
            font-size:2rem;
             
        } 
        
        .bordered_card p{
            font-family: 'Inter', sans-serif;
            font-size:1.25rem;
            font-weight:400;
            opacity:.7;
            line-height:170%;  
            padding-top:20px;
        }

        .bordered_card.dark_border {
            border: 1px solid #e6e6e6;
        } 

        .image_holder {
            padding: 50px;
        }

        .image_holder img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-bottom-right-radius: 50px;
        }

        .image_holder img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-bottom-right-radius: 50px;
            margin-bottom: 30px;
        }

        img.project_img{
            width:100%;
            height:300px;
            object-fit:cover;

        }

         p.project_desc {
            font-size: 1rem;
            font-weight: 300;
            font-family: 'Roboto', sans-seir;
         
            line-height: 170%;
        }

        .nav-link:focus, .nav-link:hover {
            color: rgb(211 211 211);
        }

        div#exampleModal {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        
        .modal-dialog {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
            border: none;
        }
        
        .modal-content {
            width: 100%;
            height: 100vh;
            border: none;
            border-radius: 0;
            background: black;
        }
        
        .modal-header {
            border-bottom: 0;
            color: white;
        }
        
        h5#exampleModalLabel {
            font-size: 2.5rem;
            font-weight: 300;
        }
        
        ul.mobil_navi {
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .mobil_navi li.nav-item {
            font-family: systemui;
            font-weight: 300;
            font-size: 2rem;
        }
        

        .mobil_navi li.nav-item a {
            font-family: 'Syne', sans-serif;
            text-transform: math-auto;
            letter-spacing: 0;
            color: white;
          
            font-size: 20px;
            font-weight: 300;
        }


        button.navbar-toggler {
            border: none;
            opacity: 1;
        }