:root {
    /* 1800*/
    --pad: clamp(5px, 5.56vw, 100px);
    --toppad: clamp(30px, 5.56vw, 100px);
    --botpad: clamp(30px, 6.1vw, 110px);

    /* 1600*/
     --extrapad: clamp(15px, 3.1vw, 50px);

}

@media (max-width: 1200px){
    :root {
        --pad: clamp(5px, 5vw, 100px);
    }
}



body{

    color: #272121;

    background: #FFFFFF;

}



.container{

    animation: startopa 0.4s linear forwards;

    animation-direction: alternate;

    opacity: 0.01;

    position: relative;

    overflow: hidden;

}



@keyframes startopa {

    from {opacity: 0.01; }

    to { opacity: 1;}

}



.project-pads{

    padding-left: var(--pad);

    padding-right: var(--pad);   

}



.project-pads-left{

    padding-left: var(--pad);

}



.project-pads-right{

    padding-right: var(--pad);

}



.extrapad{

    padding-left: var(--extrapad);

    padding-right: var(--extrapad);

}



.extrapad-box{

    padding: var(--extrapad);

}



.extrapad-left{

    padding-left: var(--extrapad);

}



.extrapad-right{

    padding-right: var(--extrapad);

}



.topbotpad{

    padding-top: var(--toppad);

    padding-bottom: var(--botpad);

}



.toppad{

    padding-top: var(--toppad); 

}



.botpad{

    padding-bottom: var(--botpad);

}





h1, h2{

    font-family: "warbler-deck", sans-serif;

    font-weight: 700;

    font-style: normal;

    line-height: 1;

}



h3, h4, h5, h6{

    font-family: "DM Sans", sans-serif;

    font-optical-sizing: auto;

    font-weight: 400;

    font-style: normal;

}





h1{

    font-size: var(--font60); 

}



h2{

    font-size: var(--font42);

}



h3{

    font-size: var(--font32);

}



h4{

    font-size: var(--font28);

}



h5{

    font-size: var(--font26);

}



h6{

    font-size: var(--font22);

}


p{
    font-size: var(--font20);
    padding-bottom: 1em;
    line-height: 1.25em;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}



.p18 p{

    font-size: var(--font18);

}



.p15 p{

    font-size: var(--font15);

}





a, li{

    font-size: var(--font20);

}



footer a, footer p{

    font-size: var(--font15);

}



.text603220 h1, .text423218 h2{

    margin-bottom: 20px;

}



.text423218 h2, .text423220 h2{

    margin-bottom: 15px;

}



.text603220 h3, .text423218 h3, .text423220 h3{

    margin-bottom: 30px;

}



.text3218 h3{

    margin-bottom: 20px;

}



.timelinehorizontal-toppart h2{

    /* 1300  */

    margin-bottom: clamp(30px, 3.85vw, 50px);

}



.timelinehorizontal-bottompart-readmore p{
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

footer h5{
    margin-bottom: 20px;

}

.btn{
    font-size: var(--font20);
    margin-top: 10px;
    display: grid;
    grid-template-columns: auto 30px;
    width: fit-content;
    max-width: 100%;
    min-width: clamp(220px, 21vw, 360px);
    gap: 10px;
    text-transform: uppercase;
    padding: 5px 15px;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.btn.btn-black{
	border: 1px solid #272121;
	background-color: #272121;
	color: #fff;
}


.btn.btn-blackborder{
	border: 1px solid #272121;
	color: #272121;
}

.btn.btn-whiteborder{
	border: 1px solid #fff;
	color: #fff;
}

.btn svg{
    align-self: center;
    width: var(--font19);
    transform: rotate(-45deg);
}





.timelinehorizontal-bottompart-readmore:hover svg, .btn:hover svg{

    transform: rotate(0deg);

    animation: wiggle 0.6s ease-in-out infinite;

}



@keyframes wiggle {

	0%   { margin-left: 0px; }

	50%  { margin-left: 6px; }

	100% { margin-left: 0px; }

}



.some:hover svg{

    transform: scale(1.2);

}



.banner-video img, .banner-video .ubcgvimeo{

    aspect-ratio: 16/9;

    width: 100%;

}

.banner-content{
    width: fit-content;
    height: fit-content;
    align-self: end;
    margin-bottom: clamp(30px, 10vw, 200px);
}

.banner-content-helper{
    width: calc(50vw - (2 * var(--pad) + (2 * var(--extrapad))));
    background-color: rgba(247,213,213, 0.8);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    max-width: 1200px;
}

.banner-content .banner-content-svgplate{
    width: auto;
    justify-self: end;
    margin-right: calc(-1 * var(--extrapad));
    margin-bottom: calc(-1 * var(--extrapad));
    height: clamp(30px, 19vw, 480px);
    align-self: end;
}

.banner-content-svgplate svg{
    width: auto;
    height: 100%;
}

.banner-content-text{
    max-width: 621px;
}


.banner-content-wave-bottom{
    align-self: end;
    justify-self: center;
    width: clamp(15px, 30vw, 750px);
    height: auto;
    margin-left: -200px;
}



.banner-content-wave-bottom svg{

    width: 100%;

    height: auto;

}



.txtimagevideo-content-text{

    padding: var(--extrapad);

    margin-right: var(--pad);

}



.slightlyover .txtimagevideo-content-text{

    margin-right: unset;

}



.slightlyover .txtimagevideo-content-text{

    height: fit-content;

    background-color: #fff;

    margin-top: var(--toppad);

    max-width: 621px;

}



.slightlyover .txtimagevideo-content.ugrid21{

    grid-template-columns: 1.5fr 0.5fr 1fr;

}



.slightlyover .txtimagevideo-left{

    grid-column: 1/3;

    grid-row: 1;

}



.slightlyover .txtimagevideo-right{

    grid-column: 2/4;

    grid-row: 1;

}



.slightlyover.left .txtimagevideo-right{

   justify-self: start;

   padding-right: var(--pad);

}



#txtimagevideo{

    position: relative;

}



.txtovercontent-thewave{

    margin-top: calc(-1 * var(--toppad));

    padding-top: 40px;

    margin-left: calc(-1 * var(--pad));

    width: calc(100% + var(--pad));

    grid-column: 1;

    grid-row: 1;

}



.txtimagevideo-helper.wavemode .txtimagevideo-content-text{

    padding-top: clamp(30px, 6vw, 150px);

    background: rgba(255,255,255, 0.3);

    grid-column: 1;

    grid-row: 1;

}



.txtimagevideo-helper.wavemode .txtimagevideo-right{

    display: grid;

}



.txtimagevideo-helper.wavemode.right .txtovercontent-thewave{

    margin-left: 0px;

}



.txtimagevideo-helper.right .txtimagevideo-content-text{

    margin-left: var(--pad);

}



.txtovercontent-helper .txtovercontent-content-text{

    max-width: 621px;

}



.txtovercontent-content{

    width: 50%;

}



.txtovercontent-content-helper{

    display: grid;

    padding-right: var(--pad);

}



.txtovercontent-content-text{

    justify-self: end;

}



.txtovercontent-content.ugrid-topright .txtovercontent-content-text{

    justify-self: start;

}



.txtovercontent-content.ugrid-topright .txtovercontent-content-helper{

    display: block;

    padding-left: var(--pad);

    padding-right: unset;

}



.txtovercontent-content-text{

    padding: var(--extrapad);

}



.infobox-helper{

    background-color: #EDD;

}



.infoline {

    width: 100%;

    height: 1px;

    background-color: #fff;

    border: none;

    margin-bottom: 15px;

}



.infoline:last-child{

    margin-bottom: 0px;

}



.infobox-top-left{

    padding-top: var(--extrapad);

}



.infocard img{

    width: 100%;

    max-width: 300px;

    aspect-ratio: 1/1;

    border-radius: 50%;

    margin: 0 auto;

    margin-bottom: var(--extrapad);

}



.timelinehorizontal-card img{

    aspect-ratio: 10/7.2;

    margin-bottom: 30px;

}



.timelinehorizontal-centerpart{

    gap: 35px;

    overflow: hidden;

}



.timelinehorizontal-bottompart{

    gap: 15px;

    overflow: hidden;

}



.timelinehorizontal-centerpart >*, .timelinehorizontal-bottompart >*{

    width: 37%;

}



.timelinehorizontal-bottompart-readmore-arrow svg{

    width: 18px;

    height: auto;

}



.timelinehorizontal-bottompart-readmore{

    display: grid;

    grid-template-columns: max-content auto;

    border-left: 1px solid #9A8989;

    padding: 5px 0px 20px 20px;

    /* 1300 */

    gap: clamp(20px, 2.3vw, 30px);

    height: fit-content;

}



.timelinehorizontal-bottompart-readmore svg{

    height: var(--font16);

    transform: rotate(-45deg);

    align-self: center;

}



.timelinehorizontal-bottompart >*{

    margin-left: 0px;

}



.timelinehorizontal-bottompart .timelinehorizontal-bottompart-readmore:first-child{

    margin-left: calc(2 * var(--extrapad));

}





.timelinehorizontal-card-content-text{

    padding-left: var(--extrapad);

    padding-right: calc(2 * var(--extrapad));

}



.timelinehorizontal-bottompart-readmore-line{

    position: absolute;

    width: 100%;

    height: 1px;

    background-color: #9A8989;

    margin-left: calc(2 * var(--extrapad));

    bottom: 0px;

}



.timelinehorizontal-bottompart{

    margin-top: 20px;

    position: relative;

}



.timelinehorizontal-centerpart-plus{

    position: relative;

}



.timelinehorizontal-whitegradient{

    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

    height: 100%;

    width: 25%;

    position: absolute;

    right: 0px;

}





.timelinevertical-content-box{

    display: grid;

    grid-template-columns: 1px 60px auto;

}



.timelinevertical-content-updownline{

    background-color: #9A8989;

}



.timelinevertical-content-updownline{

    grid-column: 1;

}



.timelinevertical-content-leftrightline{
    grid-column: 2;
    height: 1px;
    width: 50px;
    background-color: #9A8989;
    margin-top: 50px;
}

.timelinevertical-card{
    grid-column: 3;
    margin-bottom: var(--extrapad);
    gap: clamp(30px, 5.5vw, 110px);
}


.timelinevertical-content-box:first-child .timelinevertical-content-updownline{
    margin-top: 50px;
}

.timelinevertical-content-box:nth-last-child(2) .timelinevertical-content-updownline{
    margin-bottom: -50px;
}

.timelinevertical-content-box:last-child .timelinevertical-content-updownline{
    display: none;
}

.timelinevertical-card-content-text{
    max-width: 500px;
    padding-top: 20px;
}

.bannerwave-content-text{
    max-width: calc((100% / 3) - (var(--extrapad) + var(--pad)));
}





.bannerwhite-content {

	background-color: rgba(255,255,255,0.6);

	backdrop-filter: blur(17px);

	-webkit-backdrop-filter: blur(17px);

}



.bannerwhite-content.extrapad-box{

    padding-right: clamp(15px, 8vw, 220px);

}





.gallerybox{

    gap: var(--extrapad);

}





.gallerybox-bigimage img{

	aspect-ratio: 10/7.3;

}



.gallerybox-smallimage img{

	aspect-ratio: 1/1;

}



.some svg{

    width: 20px;

    height: auto;

}



.socialmedia{

    gap: 10px;

}





footer{

    background-color: #272121;

}



.footerpart1{

    color: #9A8989;

}



.footerpart2{

    color: #9A8989;

    background-color: #3A3131;

}



.footerpart2 a{

    color: #CEB4B4;

    width: fit-content;

}



.bannerwave-wave{

    position: absolute;

    left: 20%;

}



.bannerwave-content-text{

    position: relative;

    z-index: 1;

}



.timelinevertical-topcontent h1{

    /* 1800 */

    margin-bottom: clamp(40px, 5.56vw, 100px);

    padding-left: 61px;

}





#nav-basic{

    padding-top: 15px;

    padding-bottom: 25px;

}



#nav-section.ontop{

    position: absolute;

    width: 100%;

}



#header-nav{

    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.77) 100%);

}



.bannerwhite-wave{

    position: relative;

}

.bannerwhite-wave img{
    width: 500px;
    position: absolute;
}

.footerpart2-helper a:hover{
    color: #fff;
}

#header-nav a{
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

#navtrigger{
    position: absolute;
    display: grid;
    left: 0px;
    top: 0px;
    width: 50vw;
    height: 100vh;
    background: linear-gradient(150deg, #fff 0%, #fff 20%, #EDD 20%, #EDD 80%, #fff 80%, #fff 100%);
    backdrop-filter: blur(2px);
    transition: clip-path 0.8s ease-in-out;
    -moz-transition: clip-path 0.8s ease-in-out;
    -webkit-transition: clip-path 0.8s ease-in-out;
    -o-transition: clip-path 0.8s ease-in-out;
    clip-path: circle(0% at 0% 0%);
    color: #3E3B3B;
    box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 3px;
}

#navtrigger.active{
    clip-path: circle(200% at 0% 0%);
}

#navtrigger-content{
    justify-self: center;
    align-self: center;
}

#burgernavtrigger{
    display: none;
}

@media(max-width: 900px){
    #burgernavtrigger{
        display: block;
    }
}

#nav-burger-burgerpart{
    display: grid;
}

.timelinevertical-card img{
    min-height: 100%;
    aspect-ratio: 10/7.3;
}

#burgerline2{
    width: 40px;
}

#burgerline3{
    width: 50px;
}

.burger-line{
    justify-self: center;
}

#nav-burger-burgerpart.active{
    height: 30px;
    width: 30px;
    margin-top: 20px;
    padding-right: calc(var(--pad) + 10px);
}

@media(max-width: 2200px){
    .txtimagevideo-helper.right .txtimagevideo-content-text{
        margin-right: 0px;
    }

    .bannerwave-content-text{
        max-width: 600px;
    }
}


@media (max-width: 1900px) {
    .txtimagevideo-helper.right .txtimagevideo-content-text{
        margin-left: 0px;
    }

    .txtimagevideo-helper.wavemode.right .txtovercontent-thewave{
        margin-left: -20%;
        z-index: -1;
    }

    .txtimagevideo-helper.left .txtimagevideo-content-text{
        margin-right: 0px;
    }

   
}

@media(max-width: 1800px){
    .bannerwave-wave {
        width: 55%;
    }
    .bannerwave-wave svg{
        width: 100%;
        height: auto;
    }
}

@media (max-width: 1500px) {
    .slightlyover .txtimagevideo-content.ugrid21{
        grid-template-columns: 2fr 1fr;
    }
    .slightlyover .txtimagevideo-left{
        grid-column: 1;
    }

    .slightlyover .txtimagevideo-right {
        grid-column: 2;
    }

    .slightlyover.right .txtimagevideo-content-text{
        margin-top: 0px;
        margin-left: 0px;
        padding-right: 0px;
    }

    .slightlyover.left .txtimagevideo-right{
        padding-right: 0px;
    }

    .slightlyover.left .txtimagevideo-content-text{
        margin-top: 0px;
        margin-left: 0px;
    }
}


@media (max-width: 1200px){
    .text603220 h3, .text423218 h3, .text423220 h3 {
        margin-bottom: 20px;
    }

    .bannerwave-wave{
        width: 70%;
        left: 10%;
    }

    #bannerwhite .project-pads.ugrid2.ugrid-bottomleft{
        grid-template-columns: 1.5fr 1fr;
    }

    footer.ugrid12{
        grid-template-columns: 1fr 1.5fr;
    }
}



@media (max-width: 1100px){
    .slightlyover .txtimagevideo-content.ugrid21{
        grid-template-columns: 1fr;
    }

    .slightlyover .txtimagevideo-right{
        grid-column: 1;
        grid-row: 2;
    }

    .slightlyover.left .txtimagevideo-right {
        justify-self: end;
    }
}



@media (max-width: 1000px) {
    .bannerwhite-content.extrapad-box{
        padding-right: var(--extrapad);
    }

    .banner-content{
        padding-left: 0px;
        margin-bottom: 0px;
        width: 100%;
    }

    .banner-content-helper{
        width: calc(100% - (2 *var(--extrapad)));
    }

    #banner{
        display: block;
    }

    .banner-content-wave-bottom{
        display: none;
    }

    .banner-content .banner-content-svgplate{
        height: clamp(280px, 35vw, 350px);
    }

    .banner-content-text{
        max-width: 600px;
        width: 100%;
    }

    .txtimagevideo-helper .txtimagevideo-content.ugrid21{
        grid-template-columns: 1fr;
    }

    .txtimagevideo-helper.right .txtovercontent-thewave {
        margin-left: 0px;
    }

    .txtimagevideo-helper .txtimagevideo-content-text{
        max-width: 600px;
        width: 100%;
    }

    .txtovercontent-content {
        width: 60%;
        padding-top: 0px;
    }

    .infocard.extrapad-box{
        grid-column: 1/4;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 30px;
    }

    .infocard.extrapad-box .infocard-content-text{
        align-self: center;
    }

    .timelinehorizontal-card-content-text {
        padding-right: 0px;
    }

    #imagegallery .gallerybox.ugrid21{
        grid-template-columns: 1.5fr 1fr;
    }

    #imagegallery .gallerybox.ugrid12{
        grid-template-columns: 1fr 1.5fr;
    }

    .timelinevertical-card{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .timelinevertical-card-content-text{
        padding-top: 0px;
    }

    footer.ugrid12{
        grid-template-columns: 1fr 1fr;
    }

    .txtovercontent-thewave{
        display: none;
    }
}


@media (max-width: 800px) {
    .timelinehorizontal-centerpart {
        gap: 20px;
    }
    .timelinehorizontal-whitegradient {
        width: 10%;
    }

    .timelinehorizontal-centerpart>*, .timelinehorizontal-bottompart>*{
        width: 45%;
    }

    .timelinehorizontal-bottompart-readmore-line {
        width: 100%;
    }

    .bannerwave-wave {
        width: 90%;
        left: 10%;
    }

    #bannerwhite img{
        min-height: 500px;
    }

    #bannerwhite .project-pads.ugrid2.ugrid-bottomleft{
        grid-template-columns: 1fr;
    }

    .bannerwhite-wave{
        display: none;
    }
}



@media (max-width: 700px) {
    .txtimagevideo-helper .txtimagevideo-content-text {
        max-width: clamp(calc(100% - (1 * var(--pad))), 60vw, 600px);
    }

    #txtovercontent{
        background-color: #3A3131;
    }

    .txtovercontent-helper.ultra-allinone{
        display: block;
    }

    .txtovercontent-content{
        color: #fff;
        width: 100%;
    }

    .txtovercontent-content.ugrid-topright .txtovercontent-content-helper{
        padding-left: 0px;
    }

    .txtovercontent-content-helper{
        padding-right: 0px;
        display: block;
    }

    .infocard.extrapad-box, .infobox-top.ugrid12{
        display: block;
    }

    .infocard img{
        max-width: 250px;
    }

    #imagegallery .gallerybox.ugrid21, #imagegallery .gallerybox.ugrid12{
        grid-template-columns: 1fr;
    }

    #navtrigger{
        width: 60vw;
    }
}



@media (max-width: 600px) {
    .timelinehorizontal-whitegradient{
        width: 35%;
    }
    .timelinehorizontal-centerpart > *, .timelinehorizontal-bottompart > * {
        width: 65%;
    }
    .timelinehorizontal-bottompart-readmore-line {
        width: 100%;
    }

    .bannerwave-wave {
        width: 120%;
        left: 10%;
    }

    footer.ugrid12 {
        grid-template-columns: 1fr;
    }

    .footerpart2{
        padding-left: var(--pad);
    }

    #navtrigger {
        width: 100vw;
        background: linear-gradient(50deg, #fff 0%, #fff 20%, #EDD 20%, #EDD 80%, #fff 80%, #fff 100%);
    }
    
}



@media (max-width: 500px) {
    .banner-content-svgplate svg{
        opacity: 0.7;
    }

    .banner-content-text{
        z-index: 1;
    }

    .timelinehorizontal-whitegradient{
        width: 25%;
    }
    .timelinehorizontal-centerpart > *, .timelinehorizontal-bottompart > * {
        width: 80%;
    }
    .timelinehorizontal-bottompart-readmore-line {
        width: 100%;
    }

    .timelinevertical-content-box {
        grid-template-columns: 1px 40px auto;
    }

    .timelinevertical-content-leftrightline {
        width: 30px;
    }

    .txtovercontent-thewave {
        display: block;
    }
}



@media (max-width: 400px) {
    .timelinevertical-content-box {
        grid-template-columns: 1px 25px auto;
    }

    .timelinevertical-content-leftrightline {
        width: 20px;
    }

    #nav-burger-logopart img {
        height: 37px;
    }
}