html,body{
    font-family: 'Inter', sans-serif;
    font-weight:400;
    background:white;
    font-size:1.0rem;
    line-height:1.8rem;
    color:#404040;

}

*{
    box-sizing:border-box;
}

.content{
    padding-left:20px;
    padding-right:20px;
}

.container.top{
    margin-top:70px !important;
}

p,.contact-section,.contact-details,label,input,textarea,.btn-core,.projects-intro,.process-step,.process-step-wrapper a{
    font-family: 'Inter', sans-serif;
}



:root{
    --border:#808080;
    --maintxt:#144E5A;
    --maintxt:#101010;
    --alert:#c62828;
    --warn:#e57373;
    --info:#ef9a9a;
    --bground:#BAD3D8;
    --contrasting:#DFBFA9;
    --ok:#1565c0;
    --tightmargin:15px;
    --fonttext:arial;
    --fonthead:'Source Sans Pro', sans-serif;
}

::placeholder{
    font-size:0.9rem;
    color:#a0a0a0;
    line-height:100%;
}


.hide{
    display:none !important;
}


h1,h2,h3,h4,h5,h6{
    font-family:  'Bodoni Moda', serif;

    font-weight:600;
}

h1{
    font-size:3.6rem;
    color:#101010;
    padding:0;
    margin:0;
}


.sub-title{
    width:100%;
    display:flex;
    justify-content:space-between;
    padding-left:20px;
    padding-right:20px;
}

.sub-line{
    display:inline-block;
    width:100%;
    border-bottom:1px solid #a0a0a0;
    height:1.6rem;
    margin-left:20px;
}

.sub-line a{
    color:#606060;
    font-size:0.8rem;
    float:right;
}

h2{
    display:inline-block;
    font-size:3.1rem;
    color:#101010;
    padding:0;
    margin:0;
}

section{
    width:100%;
    min-height:500px;
    overflow:hidden;
    padding-top:30px;
}

.thirds{
    display:inline-block;
    min-height:500px;
    width:33.0%;
    padding:2%;
    vertical-align: top;
}

.twothirds{
    display:inline-block;
    min-height:500px;
    width:66.0%;
    padding:5px;
    padding-left:30px;
    vertical-align: top;


}

.responsive-img-square{
    position:relative;

}

.responsive-img-square:after{
    content: "";
    display: block;
    padding-bottom: 100%;

}

.responsive-img-square img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.snapscroller{
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;    
}

.snapscroller .snapable,.snapscroller .thirds{
    scroll-snap-align: center;
}

p{
    margin-top:0;
    padding-top:0;
}

.button-bar{
    margin-bottom:14px;
}


.btn-core{
    display:inline-block;
    box-sizing: border-box;
    font-size:14px;
    line-height:30px;
    text-transform: uppercase;
    border:1px solid var(--border);
    color:var(--maintxt);
    padding:2px 20px;
    border-radius:30px;
    margin-right:var(--tightmargin);
    margin-bottom:var(--tightmargin);
    transition:all 0.2s;
    text-decoration:none;
    background:white;
    min-width:20px;
}

.btn-core.wide100{
    width:100%;
    text-align:center;
}

.btn-core:hover{
    background:white;
    color:var(--maintxt);
}

.btn-core.round{
    width:32px;
    padding:0;
    text-align:center;
    font-size:1.1rem;
    line-height:32px;
}

.btn-core.small{
    font-size:12px;
    line-height:20px;
}

.btn-core.mini{
    font-size:0.7rem;
    line-height:0.9rem;
    margin-right:0px;
    margin-left:5px;
    margin-bottom:0px;

}

.btn-core.primary{
    background:var(--maintxt);
    border:1px solid var(--maintxt);
    color:white;
}

.btn-core.primary:hover{
    background:var(--maintxt);
    border:1px solid var(--maintxt);
    color:white;
    
}



.btn-core:hover{
    transform:scale(1.05);
    border:1px solid var(--maintxt);
}

.index-thirds-svg{
    width:70%;
    margin:0 auto;
}

section{
    padding-bottom:60px;
}

.projects-intro{
    width:100%;
    padding-top:48px;
    padding-left:2%;
    padding-right:2%;
    font-size:1.1rem;
    color:#606060;
    overflow:hidden;
    font-size:0.85rem;
    line-height:1.8rem;
}

.section-wrap{

}

.section-wrap a{
    color:#101010;
}

.section-wrap a:hover{
    background:#101010;
    color:white;
}


p{
    font-size:0.85rem;
    line-height:1.8rem;
}

.process-step-wrapper{
    margin-top:30px;
    margin-left:10px;
    margin-right:10px;
    text-align:center;

}

.process-step-wrapper a{
    display:inline-block;
    width:8vw;
    max-width:35px;
    max-height:35px;
    height:8vw;
    line-height:calc(clamp(10px,7.8vw,35px)-1);
    text-align:center;
    border:2px solid #a0a0a0;
    border-radius:50%;
    margin-right:10px;
    color:#303030;
}

.process-step-wrapper a.selected{
    background:#303030;
    color:white;
    border:2px solid #303030;
}

.process-step{
    position:relative;
    margin:0 auto;
    border:1px solid #a0a0a0;
    border-radius:10px;
    padding:20px;
    font-size:0.9rem;
    color:#505050;
    margin-top:30px;
    max-width:800px;
}

.process-step .step{
    position:absolute;
    top:20px;
    right:20px;
    width:40px;
    height:40px;
    line-height:40px;
    border-radius:50%;
    border:none;
    text-align:center;
    background:#303030;
    color:white;
    font-size:1.4rem;
    margin-top:0;
    opacity:1;
    transition:all 0.2s;
}

.process-step .step.start{
    margin-top:40px;
    opacity:0;

}

.process-step h4{
    margin:0;
    padding:0;
    font-size:1.4rem;
    color:#303030;
    font-weight:400;
    margin-bottom:7px;
}

.process-step h5{
    margin:0;
    padding:0;
    font-size:1.4rem;
    color:#303030;
    font-weight:200;
    margin-bottom:14px;
    max-width:85%;


}

.ultrawide{
    position:relative;
    margin-top:30px;
    width:100%;
    height:20vw;
    min-height:300px;
    overflow:hidden;
}

.ultrawide img{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:auto;
    z-index:0;
}

.ultrawide h3{
color:white;
font-size:3.6vw;
line-height:4.0vw;
margin-top:5vw;
margin-left:5vw;
transition:all 0.2s;
}

.ultrawide h3.start{
margin-left:40vw;
}

.ultrawide p{
    display:block;
    color:white;
    font-size:clamp(0.6rem,1.2vw,1.2rem);
    font-weight:400;
    line-height:clamp(0.9rem,1.9vw,2.1rem);
    margin-top:5vw;
    margin-left:5vw;
    transition:all 0.2s;
    max-width:50vw;
    background:rgba(0,0,0,0.35);
    border-radius:10px;
    padding:20px;
}

.ultrawide p b{
    display:block;
    width:100%;
    font-weight:bold;
    font-size:clamp(0.6rem,1.2vw,1.2rem);
    margin-top:7px;
    transition:all 0.3s;
    opacity:1;
}

.ultrawide p b.start{
    opacity:0;
}

.ultrawide .container{
position:relative;
}

.animate{
    transition:all 0.8s;
}

.slide-up{
    margin-top:0;
}

.slide-right{

}

.slide-right.start{
    margin-left:-100px;
    opacity:0.4;


}

.slide-left{
    
}

.slide-left.start{
    margin-left:100px;
    opacity:0.4;
}

.slide-up.start{
    margin-top:100px;
    opacity:0.5;
}

.project-precis{
    display:inline-block;
    color:#606060;
    line-height:1.5rem;
    cursor:pointer;


}

.project-precis p{
    font-family: 'Inter', sans-serif;
    
    color:#606060;
    font-size:0.8rem;
    line-height:1.6rem;
    font-weight:400;
}

.project-precis:hover{
    color:#606060;
}

.project-precis h3{
    padding:0;
    margin:0;
    margin-top:14px;
    margin-bottom:7px;
    font-size:1.1rem;
    line-height:1.4rem;
}

.project-precis h4{
    padding:0;
    margin:0;
    margin-bottom:7px;
    color:#707070;
    font-size:1.0rem;
    line-height:1.2rem;
}

.cookie-popup{
    width:90%;
    height:80px;

}

.project-search-wrap{
    position:relative;
    border:1px solid #a0a0a0;
    height:35px;
    border-radius:35px;
    margin-left:2%;
    margin-right:2%;

}

.project-search-wrap:before{
    content:'';
    position:absolute;
    top:8px;
    left:8px;
    width:20px;
    height:20px;
    background:url(../icons/magnifying-glass-regular.svg) no-repeat;
    background-size: auto;
    color:#606060;
    z-index:1;


}

.project-search-wrap input{
    width:85%;
    margin-left:30px;
    margin-top:3px;
    font-size:1.0rem;
    color:#303030;
    line-height:1.8rem !important;
    max-height:20px !important;
    border:none;
    z-index:0;
    vertical-align:middle;

}

.targ-quote{
    font-size:1.0rem;
    line-height:1.3rem;
}

.targ-quote-by{
    font-size:1.0rem;
    line-height:1.6rem;
}

.cookie-banner{
    position:fixed;
    bottom:10px;
    left:0px;
    z-index:1000;
    width:100%;
    background:transparent;
}


.cookie-banner .inner{
    position:relative;
    margin:0 auto;
    min-height:100px;
    width:90%;
    background:white;
    border-radius:4px;
    padding:20px;
    font-size:0.9rem;
    line-height:1.2rem;
    box-shadow:0px 0px 10px rgba(0,0,0,0.3);
    padding-left:90px;
}

.cookie-banner p{
    padding:0;
    margin:0;
    font-size:0.8rem;
    line-height:1.2rem;
}

.cookie-banner .tools{
    width:100%;
    text-align:right;
    padding-top:14px;
}

.cookie-banner h4{
    padding:0;
    margin:0;
}
.cookie-banner .icon{
    position:absolute;
    top:30px;
    left:20px;
    width:50px;
    height:50px;



}

.cookie-banner i{
    position:absolute;
    top:10px;
    left:20px;
    width:100px;
    height:100px;
    font-size:10rem;
    color:#101010;

}