/*
Theme Name: Colossal Foundation
Description: Template
Version: 1.0
Author: Maven Creative
*/


@import "css/bootstrap.min.css";


@font-face {
    font-family: 'NB Architekt Light';
    src: url('fonts/NBArchitektStd-Light.woff2') format('woff2'),
        url('fonts/NBArchitektStd-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'NB Architekt Std';
    src: url('fonts/NBArchitektStd-Regular.woff2') format('woff2'),
        url('fonts/NBArchitektStd-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Telegraf Light';
    src: url('fonts/Telegraf-UltraLight.woff2') format('woff2'),
        url('fonts/Telegraf-UltraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Telegraf Bold';
    src: url('fonts/Telegraf-UltraBold.woff2') format('woff2'),
        url('fonts/Telegraf-UltraBold.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Telegraf';
    src: url('fonts/Telegraf-Regular.woff2') format('woff2'),
        url('fonts/Telegraf-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


html {max-width: 2000px; margin: 0 auto; background: #EEE;}
body {position: relative; right: 0; font-family: 'Telegraf'; -webkit-font-smoothing: antialiased;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}
body.noscroll {overflow:hidden;}
body.slide-out-open {right: 60%;}
a {text-decoration: none; color: #00022b; transition: all .3s ease; }
a:hover {text-decoration: none;}
.clear {clear: both;}
.alignleft {float: left; width: clamp(-800.0px, 40.0vw, 800.0px) !important; margin: clamp(-0.0px, 0.0vw, 0.0px) clamp(-40.0px, 2.0vw, 40.0px) clamp(-100.0px, 5.0vw, 100.0px) 0}
.alignleft img {width: 100%;}
.aligncenter {margin: 0 auto; max-width: 100%; display: block;}
p.wp-caption-text {font-size: clamp(-18.0px, 0.9vw, 18.0px); padding-top: clamp(-20.0px, 1.0vw, 20.0px)}
.alignright {float: right; margin: 0 0 20px 20px;}
.v-align {display: flex; align-items: center; align-content:center; flex-direction: column; justify-content: center}
img {max-width: 100%;}

.wrapper {overflow-x: hidden;}

.pr-md-5 {padding-right: clamp(-70.0px, 3.5vw, 70.0px) !important}

p {margin-bottom: clamp(-40.0px, 2.0vw, 40.0px); line-height: 1.3; font-size: clamp(-26.0px, 1.3vw, 26.0px)}
p strong {font-family: 'Telegraf Bold'}

p.large {font-size: clamp(-66.0px, 3.3vw, 66.0px); line-height: 1.2;}
p.medium {font-size: clamp(-50.0px, 2.5vw, 50.0px)}

h1, h2, h3, h4, h5 {font-family: 'Telegraf Bold'; margin-bottom: clamp(-40.0px, 2.0vw, 40.0px)}

h3 { font-family: 'NB Architekt Std'; font-size: clamp(-80.0px, 4.0vw, 80.0px)}
h4 {font-family: Telegraf; font-size: clamp(-30.0px, 1.5vw, 30.0px)}
h5 {font-family: Telegraf; text-transform: uppercase; font-size: clamp(-18.0px, 0.9vw, 18.0px); margin-bottom: clamp(-26.0px, 1.3vw, 26.0px)}


.brown {background: #6a5f40; color: #FFF; position: relative; margin-top: clamp(-160.0px, 8.7vw, 180.0px)}
.brown hr {border: 1px solid rgba(255,255,255,0.3);}
.brown .top {position: absolute; left: 0; bottom: 100%; width: 100%;}
.brown .bottom {position: absolute; left: 0; top: 99%; width: 100%; transform: rotate(180deg)}

.black {background: #000; color: #FFF; position: relative; margin-top: clamp(-180.0px, 9.0vw, 180.0px); padding: clamp(-60.0px, 3.0vw, 60.0px) 0}
.black .top {position: absolute; left: 0; bottom: 100%; width: 100%;}
.black h3 {color: #91ed0e}
.black pre {color: #FFF;}
.black hr {border-color: #6a5f41}
.black strong {color: #FFF;}
.black .bottom {position: absolute; left: 0; top:calc(100% - clamp(-70.0px, 3.5vw, 70.0px)); width: 100%;}

.spacer-xs {height: clamp(-20.0px, 1.0vw, 20.0px)}
.spacer-sm {height: clamp(-40.0px, 2.0vw, 40.0px)}
.spacer-md {height: clamp(-60.0px, 3.0vw, 60.0px)}
.spacer-lg {height: clamp(-80.0px, 4.0vw, 80.0px)}
.spacer-xl {height: clamp(-100.0px, 5.0vw, 100.0px)}
.spacer-xxl {height: clamp(-120px,6vw,120px)}

.button {border: 2px solid #000000; padding: clamp(-30.0px, 1.5vw, 30.0px) clamp(-260.0px, 13.0vw, 260.0px) clamp(-30.0px, 1.5vw, 30.0px) clamp(-80.0px, 4.0vw, 80.0px); display: inline-block; border-radius: 2000px; font-family: 'Telegraf Bold'; font-size: clamp(-30.0px, 1.4vw, 30.0px); position: relative; line-height: 1.2}
.button:after {content:"+"; position: absolute; right: clamp(-60.0px, 3.0vw, 60.0px); top: 50%; transform: translateY(-50%); font-family: 'Telegraf Light'; font-size: clamp(-80.0px, 4.0vw, 80.0px); color: #6a5f40; line-height: 0.5; transition: all .3s ease;}
.button:hover {background: #6a5f41; color: #FFF; border-color: #6a5f41;}
.button:hover:after {color: #FFF;}

.button.light {border: 2px solid #6a5f41; color: #FFF;}
.button.light:after {color: #FFF;}
.button.light:hover {background: #6a5f41; color: #FFF; border-color: #6a5f41;}
.button.light:hover:after {color: #000;}

.button.center {padding: clamp(-30.0px, 1.5vw, 30.0px) clamp(-120.0px, 6.0vw, 120.0px);}
.button.center:after {display: none;}


.container {position: relative; max-width: clamp(-1600.0px, 80.0vw, 1600.0px);}


header {position: fixed; top: 0; left: 0; width: 100%; color: #FFF; z-index: 5; font-family: 'NB Architekt Std';  transition: all 1s ease; }
header .inside {max-width: 2000px; margin: 0 auto; padding: clamp(-30.0px, 1.5vw, 30.0px) 0; border-bottom: 1px solid #ffffff; transition: all 1s ease; }
header ul {padding: 0; margin: 0; column-count: 3; counter-reset: section;}
header ul li {display: block; position: relative; font-size: clamp(-23.0px, 1.15vw, 23.0px)}
header ul li a {color: #FFF;}
header ul li:before {width: clamp(-10.0px, 0.5vw, 10.0px); height: clamp(-10.0px, 0.5vw, 10.0px); background: #FFF; opacity: 0; position: absolute; left: clamp(-20.0px, -1.0vw, 20.0px); content:" "; transition: all .3s ease; top: 50%; transform: translateY(-50%);}
header ul li a:before {counter-increment: section; content: counter(section, decimal-leading-zero); margin-right: clamp(-14.0px, 0.7vw, 14.0px); color: #adaba2;}
header ul li a:hover {color: #FFF;}
header ul li:hover:before {opacity: 1}
header .separator {height: 160%; width: 1px; background: #ffffff; position: absolute; left: clamp(-20.0px, -1.0vw, 20.0px); top: clamp(-30.0px, -1.5vw, 30.0px); }
header .separator:nth-child(2) {left: 31%}
header .separator:nth-child(3) {left: 64%}
header .logo {width: 80%}

header.affix {background: rgba(0,0,0,0.5); backdrop-filter: blur(20px); }
header.affix .inside {border-bottom-color: transparent;}

.plus {position: absolute;}
.plus:after {content:"+"; font-size: clamp(-30.0px, 1.5vw, 30.0px); line-height: 1}
.plus.white {color: #FFF;}

.square {position: absolute; width: clamp(-10.0px, 0.5vw, 10.0px); height: clamp(-10.0px, 0.5vw, 10.0px)}
.square.white {background: #FFF;}

#hero {position: relative; height: clamp(-600.0px, 30.0vw, 600.0px); overflow: hidden;}
#hero.home-version {height: clamp(-800.0px, 40.0vw, 800.0px)}
#hero.standard .plus {left: clamp(-30.0px, -1.5vw, 30.0px)}
#hero .bg {position: absolute; width: 120%; max-width: 200%; height: 120%; left: -10%; top: clamp(-180.0px, -9.0vw, 180.0px); object-fit: cover;}
#hero .placeholder {background: #000}
#hero h1 {font-size: clamp(-80.0px, 4.0vw, 80.0px); color: #FFF;}
#hero .slashes {max-width: clamp(-540.0px, 27.0vw, 540.0px); margin-bottom: clamp(-20.0px, 1.0vw, 20.0px)}
#hero .plus.a {bottom: clamp(-30.0px, 1.5vw, 30.0px);}
#hero .square.a {left: clamp(-40.0px, -2.0vw, 40.0px); top: clamp(-3.0px, 0.15vw, 3.0px)}
#hero .circles {position: absolute; right: clamp(-40.0px, 2.0vw, 40.0px); bottom: clamp(-40.0px, 2.0vw, 40.0px)}
#hero .breadcrumbs {color: #FFF; font-family: 'NB Architekt Std'; transform: translateY(clamp(-4px,-0.2vw,4px));}
#hero .breadcrumbs a {color: #FFF; line-height: 1; font-size: clamp(-24.0px, 1.2vw, 24.0px)}
#hero .breadcrumbs a:hover {color: #e5cc8d}
#hero.standard.project h1 {text-align: center; font-size: clamp(-60.0px, 3.0vw, 60.0px); max-width: 70%; margin: clamp(-40.0px, 2.0vw, 40.0px) auto 0;}

#hero.standard.project.project-species-biobank h1 {text-align: left; padding: 0; margin: 0; font-size: clamp(-70px,3.5vw,70px)}
#hero.standard.project.project-species-biobank .w-100 {padding-top: clamp(-80px,4vw,80px)}

.home #hero {padding-top: clamp(-100.0px, 5.0vw, 100.0px)}

#intro {position: relative; padding-bottom: clamp(-100.0px, 5.0vw, 100.0px)}
#intro h2 {color: #6a5f40; font-size: clamp(-50.0px, 2.5vw, 50.0px); padding-left: clamp(-40.0px, 2.0vw, 40.0px); border-left: 2px solid #000;}
#intro p {font-size: clamp(-26.0px, 1.3vw, 26.0px);}
#intro.standard p {font-size: clamp(-46.0px, 2.3vw, 46.0px)}
#intro.standard.program p {font-size: clamp(-28.0px, 1.4vw, 28.0px)}
#intro.standard.program h2 {font-size: clamp(-60.0px, 3.0vw, 60.0px); padding-right: 1%; margin-bottom: clamp(-40.0px, 2.0vw, 40.0px)}
#intro .slashes-2 {position: absolute; left: 0; bottom: 0;}
#intro .slashes-1 {position: absolute; right: 0; top: clamp(-60.0px, 3.0vw, 60.0px); width: 6%;}
#intro .square {top: clamp(-60px,3vw,60px); left:clamp(-200px,10vw,200px); background: #000;}
#intro video {width: 100%; aspect-ratio: 5 / 4.2; object-fit: cover;}


#gallery {position: relative;}

#gallery .tag {position: absolute; left: clamp(-10px,-0.5vw,10px); top: 0; transform: rotate(90deg); font-family: 'NB Architekt Std'; font-size: clamp(-24px,1.2vw,24px); transform-origin: top left;}
#gallery .tag .square {position: relative; padding: 0; margin: 0 clamp(-10px,0.5vw,10px) 0 0; display: inline-block; margin-bottom: clamp(-4px,0.2vw,4px)}
#gallery .plus.a {right: 0; top: 0;}
#gallery .plus.b {right: -3%; bottom: 0;}
#gallery .square.a {bottom: 0; left: 0; top: auo; background: #000}
#gallery .slashes-1 {position: absolute; right: 0; top: clamp(-580px,29vw,580px)}

#gallery img {object-fit: cover}
#gallery .img-container {position: relative;}
#gallery .img-container .box {position: absolute; width: 100%; height: 100%; border: 1px solid #6a5f40; top: clamp(-40px,2vw,40px); left: clamp(-40px,-2vw,40px)}
#gallery .img-container img {position: relative; z-index: 1; }

#gallery .img-1 {position: relative; z-index: 1}

#gallery .img-2 {transform: translate(clamp(-200px,10vw,200px), clamp(-100px,5vw,100px)); width: 105%}

#gallery .img-1 img {aspect-ratio: 3 / 2}
#gallery .img-2 img {aspect-ratio: 3 / 1.8}

#gallery .img-3 .box {top: clamp(-30px,-1.5vw,30px); left: clamp(-40px,2vw,40px);}
#gallery .img-3 img {aspect-ratio: 3 / 2.4}

#gallery .img-4 .box {top: clamp(-30px,1.5vw,30px); left: clamp(-40px,2vw,40px);}
#gallery .img-4 {transform: translateY(clamp(-140px,-7vw,140px)); width: 107%}
#gallery .img-4 img {aspect-ratio: 5 / 2.8}


#gallery .img-5 .box {top: clamp(-30px,1.5vw,30px); left: clamp(-40px,2vw,40px);}
#gallery .img-5 {width: 90%}

#gallery .img-6 {width: 55%; float: right; margin-right: clamp(-30px,1.8vw,30px)}
#gallery .img-6 img {}
#gallery .spacer-lg {clear: both;}

#gallery .img-7 .box {top: clamp(-30px,1.5vw,30px); left: clamp(-40px,2vw,40px);}
#gallery .img-7 {float: right; width: 120%; margin-right: clamp(-20px,1vw,20px)}

#gallery .img-8 {margin-left: clamp(-60px,3vw,60px); width: 123%}

#gallery .img-9 {float: left; width: 95%; margin-left: clamp(-300px,15vw,300px)}


#gallery.black {margin: 0;}
#gallery.black {}

#gallery.black .slashes {width: 60%; float: right;}




#stats {text-align: center; padding: clamp(-60.0px, 3.0vw, 60.0px) 0; position: relative; z-index: 4; margin-top: clamp(-0.0px, 0.0vw, 0.0px)}
#stats .top {width: 31%; right: 0; left: auto; top: clamp(-60.0px, -3.0vw, 60.0px);}
#stats .stat {color: #000; font-size: clamp(-120.0px, 6.0vw, 120.0px); font-family: 'NB Architekt Std'; line-height: 1.2}
#stats .description {font-family: 'Telegraf Bold'; font-size: clamp(-30.0px, 1.5vw, 30.0px)}
#stats .mid {border-left: 2px solid #887f66; border-right: 2px solid #887f66;}


#program-list {margin: 0;}
#program-list * {transition: all .3s ease;}
#program-list .slashes {width: 35%}
#program-list .img-container {position: relative;}
#program-list .img-container .cover {aspect-ratio: 1 / 0.9; object-fit: cover;}
#program-list h4 {font-family: 'Telegraf Bold'; color: #91ed0e; margin-bottom: clamp(-20.0px, 1.0vw, 20.0px)}
#program-list a {color: #FFF;}
#program-list a:hover strong {color: #ff7b31}
#program-list .icon {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20%}
#program-list a:hover .icon {transform:translate(-50%, -70%);}

#news {background: #6a5f40; color: #FFF; position: relative; padding: clamp(-100.0px, 5.0vw, 100.0px) 0 clamp(-220.0px, 11.0vw, 220.0px); }
#news .top {position: absolute; left: 0; bottom: 100%; width: 100%;}
#news .post {border-top: 2px solid #FFF; padding: clamp(-20.0px, 1.0vw, 20.0px) 0 0; color: #FFF; display: block;}
#news .post:hover {transform: translateY(clamp(-10.0px, -0.5vw, 10.0px));}
#news .post img {height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
#news h4 {height: clamp(-120.0px, 6.0vw, 120.0px)}
#news h5 {position: relative;}
#news h5:after {content:"+"; position: absolute; right: 0; font-size: clamp(-40.0px, 2.0vw, 40.0px); top: 0; line-height: 0.2}



#better-world {background: #6a5f40; color: #FFF; position: relative; padding: clamp(-100.0px, 5.0vw, 100.0px) 0 clamp(-100.0px, 5.0vw, 100.0px); }
#better-world .top {position: absolute; left: 0; bottom: 100%; width: 100%;}
#better-world .side {position: absolute; right: 0;  width: 29%; top: clamp(-200.0px, 10.0vw, 200.0px)}
#better-world .sep {margin-left: clamp(-260.0px, -13.0vw, 260.0px); width: 90%}
#better-world p.large {color: #000; line-height: 1}
#better-world p:not(.large) {font-size: clamp(-32.0px, 1.6vw, 32.0px); max-width: 95%}

#better-world h3 {color: #000; font-size: clamp(-60.0px, 3.0vw, 60.0px); padding-top: clamp(-20.0px, 1.0vw, 20.0px); line-height: 1; padding-bottom: 0; margin-bottom: clamp(-30.0px, 1.5vw, 30.0px)}
#better-world .lower p {padding-left: clamp(-60.0px, 3.0vw, 60.0px); margin-bottom: clamp(-20.0px, 1.0vw, 20.0px); position: relative;}
#better-world .lower p img {position: absolute; top: clamp(-20.0px, -1.0vw, 20.0px); left: clamp(-16.0px, 0.8vw, 16.0px); width: clamp(-30.0px, 1.5vw, 30.0px)}
#better-world .lower .row {margin-bottom: clamp(-60.0px, 3.0vw, 60.0px)}
#better-world .lower a {font-size: clamp(-32.0px, 1.6vw, 32.0px); padding-left: clamp(-60.0px, 3.0vw, 60.0px)}
#better-world .lower a:hover {color: #ff7b31}
#better-world .plus {right: 0; color: #000; top: clamp(-40.0px, -2.0vw, 40.0px)}
#better-world .square {left: 0; top: clamp(-40.0px, -2.0vw, 40.0px); background: #000;} 


#status-quo {position: relativee;}
#status-quo .large {color: #ff7b31; line-height: 1; padding-left: clamp(-40.0px, 2.0vw, 40.0px); border-left: 2px solid #ff7b31}
#status-quo .img-1 {margin-left: clamp(-30.0px, -1.5vw, 30.0px); margin-top: clamp(-40.0px, 2.0vw, 40.0px)}
#status-quo .slashes.a {max-width: 80%}
#status-quo .quote {position: relative; font-size: clamp(-40.0px, 2.0vw, 40.0px); line-height: 1.2}
#status-quo .quote img {position: absolute; top: clamp(-0.0px, 0.0vw, 0.0px); width: clamp(-60.0px, 3.0vw, 60.0px); left: clamp(-100.0px, -5.0vw, 100.0px); transform:rotate(180deg)}
#status-quo .quote img:last-child{ left:auto; right: 3%; bottom:clamp(-80.0px, -4.0vw, 80.0px); top:auto;  transform: none}
#status-quo p:not('.large') {font-size: clamp(-30.0px, 1.5vw, 30.0px)}
.slashes.b {width: clamp(-360.0px, 18.0vw, 360.0px); position: absolutel; right: 0; bottom: 0; float: right; margin-top: clamp(-20.0px, -1.0vw, 20.0px)}

#quote-module {background: #000; position: relative; padding: clamp(-220.0px, 11.0vw, 220.0px) 0 clamp(-100.0px, 5.0vw, 100.0px)}
#quote-module .bg {position: absolute; top: 0; left: 0; width: 100%;}
#quote-module .title {-webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #6a5f40; font-size: clamp(-240.0px, 12.0vw, 240.0px); font-family: 'NB Architekt Std'; color: #000; text-align: center; line-height: 1}
#quote-module .plus.a {right: 0; left: auto}
#quote-module .square.a {left: 0;}
#quote-module {color: #FFF;}
#quote-module .funding {height:clamp(-90.0px, 4.5vw, 90.0px); object-fit: contain; max-width: 90%}
#quote-module .quote {font-size: clamp(-40.0px, 2.0vw, 40.0px); padding-right: clamp(-40.0px, 2.0vw, 40.0px); line-height: 1.2; position: relative; font-family: 'NB Architekt Std';}
#quote-module .quote img {position: absolute; top: clamp(-0.0px, 0.0vw, 0.0px); width: 12%; left: clamp(-140.0px, -7.0vw, 140.0px); transform:rotate(180deg)}
#quote-module .quote img:last-child{ left:auto; right: 3%; bottom:clamp(-50.0px, -3.0vw, 20.0px); top:auto;  transform: none}

#quote-module.larger .quote {font-size: 2.8vw}

#quote-module.cms .bg {position: absolute; width: 100%; height: 100%;}
#quote-module.cms .bg .img-container {position: absolute; right: 0; top: 0; height: 100%; width: 45%;}
#quote-module.cms .bg .img-container img {position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover}
#quote-module.cms .bg .gradient {position: absolute; height: 100%; width: 30%; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); z-index: 5}

.page-template-page-about #news {z-index: 5; position: relative;}
.page-template-page-about #better-world {}

#project-details h3 {font-size: clamp(-40.0px, 2.0vw, 40.0px); color: #6a5f40; }
#project-details .container {padding-left: clamp(-40.0px, 2.0vw, 40.0px); border-left: 2px solid #6a5f40}
#project-details p {font-size: clamp(-32.0px, 1.6vw, 32.0px)}

#partner {background: #000; padding: clamp(-100.0px, 5.0vw, 100.0px) 0 clamp(-20.0px, 1.0vw, 20.0px); color: #FFF;}
#partner img {max-width: 100%; max-height: clamp(-120.0px, 6.0vw, 120.0px); margin-left: clamp(-60.0px, 3.0vw, 60.0px)}
#partner p {margin-bottom: 0;}
#partner p.right {font-family: 'NB Architekt Std'; font-size: clamp(-20.0px, 1.0vw, 20.0px)}


#ongoing-projects {margin-top: clamp(-40.0px, 2.0vw, 40.0px)}
#ongoing-projects .square.a {left: clamp(-20.0px, 1.0vw, 20.0px); top: clamp(-40.0px, -2.0vw, 40.0px)}
#ongoing-projects .plus.a {right: clamp(-20.0px, 1.0vw, 20.0px); top: clamp(-40.0px, -2.0vw, 40.0px)}

#colossal-problem .meter {font-family: 'NB Architekt Light'; color: #ff7b31; width: 100%; height: 100%; font-size:clamp(-140.0px, 7.0vw, 140.0px); position: absolute; top: 0; left: 15px; line-height:2.5; text-align: center; aspect-ratio: 1 / 1;}
#colossal-problem .meter img {width: 100%}
#colossal-problem .mid {text-transform: uppercase; font-size: clamp(-34.0px, 1.7vw, 34.0px)}
#colossal-problem .mid span {text-transform: none; font-size: clamp(-20.0px, 1.0vw, 20.0px); padding-left: 5%; vertical-align: middle;}
#colossal-problem .quote {font-size: clamp(-46.0px, 2.3vw, 46.0px); padding-right: clamp(-40.0px, 2.0vw, 40.0px); line-height: 1.2; position: relative; }
#colossal-problem .quote img {position: absolute; top: clamp(-60.0px, -3.0vw, 60.0px); width: 12%; left: -14%}
#colossal-problem .quote img:last-child{ left:auto; right: 3%; bottom:clamp(-20.0px, -1.0vw, 20.0px); top:auto; transform:rotate(180deg) }
#colossal-problem .author {font-size: clamp(-30.0px, 1.5vw, 30.0px); margin-bottom: clamp(-40.0px, 2.0vw, 40.0px)}
#colossal-problem .author div {font-size: clamp(-40.0px, 2.0vw, 40.0px); font-family: 'Telegraf Bold';}
#colossal-problem .constrain {padding-left: 5%; padding-right: 5%}

#colossal-problem .ben {margin-bottom: clamp(-200.0px, -10.0vw, 200.0px); position: relative;}
#colossal-problem .ben .box {width: 100%; height: 100%; border: 1px solid #ff7b31; position: absolute; margin-left: -20px; top: 20px; left: 0}
#colossal-problem .ben img {position: relative; z-index: 1}


#three-programs p.medium strong {color: #000}
#three-programs p.medium {color: #6a5f40; }
#three-programs .program {border: 2px solid #6a5f40; border-radius: 15px; padding: clamp(-20.0px, 1.0vw, 20.0px); transition: all .6s ease; aspect-ratio: 3 / 4.2;}
#three-programs .program * {transition: all .6s ease;}
#three-programs .program .num {font-size: clamp(-80.0px, 4.0vw, 80.0px); font-family: 'NB Architekt Std'; color: #ff7b31; line-height: 1}
#three-programs .program h4 {font-family: 'NB Architekt Std'; color: #6a5f40; font-size: clamp(-40.0px, 2.0vw, 40.0px)}
#three-programs .program p {line-height: 1.6; color: #6a5f40; font-size: clamp(-20.0px, 1.0vw, 20.0px)}
#three-programs .program:hover {background: #6a5f40; color: #FFF; cursor: pointer}
#three-programs .program:hover * {color: #FFF}
#three-programs .program:hover img {mix-blend-mode:color-burn;}
#three-programs .program img {width: 40%}
#three-programs .program .link {position: absolute; bottom: clamp(-20.0px, 1.0vw, 20.0px); color: #ff7b31; text-transform: uppercase; font-family: 'NB Architekt Std'; font-size: clamp(-26.0px, 1.3vw, 26.0px)}
#three-programs a {display: block;}

#possibility .square {top: 0; left: 0;}
#possibility .plus { right:0; top:0; }

.vid {position: relative; padding-bottom: 1vw}
.vid .play {top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%); cursor: pointer; transition: all .3s ease; z-index: 2}
.vid .play:hover {transform: translate(-50%,-50%) scale(1.2);}
.vid .placeholder {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1}
.vid .embed-responsive {opacity: 0; pointer-events: none;}
.vid .embed-responsive.active {opacity: 1; pointer-events: all}
.vid .mask {position: absolute; top:0; left: 0; height: 100%; width: 100%; z-index: 5; pointer-events: none}

#project-list {}
#project-list .specie-group h3 {font-size: clamp(-30.0px, 1.5vw, 30.0px); display: inline-block; margin: 0; vertical-align: middle;}
#project-list .specie-group .icon {width: clamp(-100.0px, 5.0vw, 100.0px); display: inline-block; margin-right: clamp(-20.0px, 1.0vw, 20.0px)}
#project-list .specie-group h4 {font-family: "Telegraf Bold"; font-size: clamp(-60.0px, 3.0vw, 60.0px); line-height: 1.1}
#project-list .specie-group .partner img {max-width: 70%; max-height: clamp(-100.0px, 5.0vw, 100.0px); margin-right: clamp(-40.0px, 2.0vw, 40.0px)}
#project-list .specie-group .feat {aspect-ratio: 1 / 1; object-fit: cover; width: 100%;}
#project-list .specie-group .div-slash {width: 50%; float: left;}
#project-list .specie-group hr {clear: both;}








footer {background: #000; color: #FFF; position: relative; padding: clamp(-160.0px, 8.0vw, 160.0px) 0 clamp(-60.0px, 3.0vw, 60.0px)}
footer .top {position: absolute; left: 0; top: clamp(-120.0px, -6.0vw, 120.0px); width: 100%;}
footer .left p {text-transform: uppercase; font-size: clamp(-20px,1vw,20px)}
footer ul {padding: 0; margin: 0;}
footer ul li {display: inline-block; }
footer ul li a {color: #5D5D5D; text-transform: uppercase; font-family: 'NB Architekt Std'; display: block; padding-right: clamp(-50.0px, 2.5vw, 50.0px); font-size: clamp(-20.0px, 1.0vw, 20.0px)}
footer ul li a:hover {color: #FFF;}
footer hr {border-color: #1c1c1c; margin-bottom: clamp(-40.0px, 2.0vw, 40.0px)}
footer .right p {color: #5D5D5D;}
footer .logo {width: 50%; margin-bottom: clamp(-60.0px, 3.0vw, 60.0px)}

body input[type="email"] {background: transparent !important; border: none !important; color: #FFF; outline: none !important; box-shadow: none !important; height: clamp(-80.0px, 4.0vw, 80.0px) !important; line-height: clamp(-80.0px, 4.0vw, 80.0px) !important; border-bottom: 1px solid #2d2d2d !important; color: #FFF !important; font-size: clamp(-40.0px, 2.0vw, 40.0px) !important}
body ::placeholder {color: #2d2d2d !important; font-size: clamp(-60.0px, 3.0vw, 60.0px); }
.gform-theme--foundation .gform_fields {align-items: flex-end !important;}
body .btn {background: transparent !important; border: 2px solid #222222 !important; line-height: clamp(-80.0px, 4.0vw, 80.0px) !important; border-radius: 1000px !important;}
body .btn:hover {background: #6a5f40 !important; border-color: #6a5f40 !important}
body .gform-button {font-size: clamp(-26.0px, 1.3vw, 26.0px) !important}

#content h2 {color: #6A5F40}
#content p {line-height: 1.5; color: #6A5F40;}
#content p a {font-family: 'Telegraf Bold'; color: #ff7b31}
#content hr {margin-bottom: clamp(-60.0px, 3.0vw, 60.0px)}

#modules p {line-height: 1.5; color: #6A5F40;}
#modules img {aspect-ratio: 5 / 2.5; object-fit: cover}

#quote {background: #6a5f40; color: #FFF; padding: clamp(-80.0px, 4.0vw, 80.0px) 0; margin: clamp(-100.0px, 5.0vw, 100.0px) 0; clear: both;}
#quote .quote {font-size: clamp(-46.0px, 2.3vw, 46.0px); padding:0 clamp(-40.0px, 2.0vw, 40.0px); line-height: 1.2; position: relative; font-family: 'NB Architekt Std';}
#quote .quote img {position: absolute; top: 0; width: clamp(-140.0px, 7.0vw, 140.0px); left: clamp(-120.0px, -6.0vw, 120.0px);}
#quote .quote img:last-child{ left:auto; right: 0%; bottom:clamp(-40.0px, -2.0vw, 40.0px); top:auto; transform:rotate(180deg) }
#quote .author {font-size: clamp(-30.0px, 1.5vw, 30.0px); margin-bottom: clamp(-40.0px, 2.0vw, 40.0px); padding-left: clamp(-40.0px, 2.0vw, 40.0px)}
#quote .author div {font-size: clamp(-40.0px, 2.0vw, 40.0px); font-family: 'Telegraf Bold';}


#species .upper .slashes {width: 40%}
#species .upper h3 {font-size: clamp(-96.0px, 4.8vw, 96.0px)}
#species .accordion-link {color: #6a5f40; display: block; font-family: 'NB Architekt Std'; font-size: clamp(-30.0px, 1.5vw, 30.0px); border-bottom: 2px solid #6a5f40; padding: clamp(-10.0px, 0.5vw, 10.0px) 0; display: flex; height: clamp(-80.0px, 4.0vw, 80.0px); position: relative;}
#species .accordion-link img {width: 6%; align-items: baseline; display: inline-block; margin-right: 2%; object-fit: contain;}
#species .accordion-link span {display: inline; align-content: center;}
#species .accordion-link:after {content: "OPEN +"; position: absolute; right: 0; top: clamp(-16.0px, 0.8vw, 16.0px)}
#species .accordion-link[aria-expanded="true"]:after {content: "CLOSE -";} 

#species .description {background: #000; color: #FFF; padding: clamp(-100.0px, 5.0vw, 100.0px) clamp(-80.0px, 4.0vw, 80.0px); position: relative;}
#species .description h3 {font-size: clamp(-100.0px, 5.0vw, 100.0px); padding-right: 20%; line-height: 1.1}
#species .description h4 {font-family: 'Telegraf Bold'; color: #303030; font-size: clamp(-42.0px, 2.1vw, 42.0px)}
#species .description ul {padding: 0; margin: 0;}
#species .description ul li {display: block; font-size: clamp(-30.0px, 1.5vw, 30.0px); border-bottom: 1px solid #FFF; padding: clamp(-10.0px, 0.5vw, 10.0px) 0}
#species .description ul li:nth-child(1) {font-weight: 700}
#species .description .globe {position: absolute; width: 49%; top: clamp(-40.0px, 2.0vw, 40.0px); right: 5%}
#species .description .main {right: 0; bottom: 0; position: absolute; width: 50%}
#species .description .iucn {text-transform: uppercase; font-size: clamp(-28.0px, 1.4vw, 28.0px)}
#species .description .iucn img {max-width: clamp(-80.0px, 4.0vw, 80.0px); margin-right: 3%}

#threats {background: #6a5f41; padding: 0 clamp(-80.0px, 4.0vw, 80.0px)}
#threats h4 {font-family: 'Telegraf Bold'; font-size: clamp(-50.0px, 2.5vw, 50.0px)}
#threats ul {padding: 0; margin: 0;}
#threats ul li {display: block; border-bottom: 1px solid #000; padding: clamp(-20.0px, 1.0vw, 20.0px) 0; font-size: clamp(-36.0px, 1.8vw, 36.0px); text-transform: uppercase;}
#threats ul li img {width: clamp(-60.0px, 3.0vw, 60.0px); margin-right: clamp(-20.0px, 1.0vw, 20.0px)}
#threats .sec {position: absolute; left: 0; top: 0;}
#threats .img-container {position: relative;}
#threats .mask {position: relative; z-index: 3}
#threats .quote {background: #000; display: inline; line-height: 1.7; padding: clamp(-8.0px, 0.4vw, 8.0px); color: #FFF; font-size: clamp(-36.0px, 1.8vw, 36.0px); font-family: 'NB Architekt Std';}
#threats em {font-size: clamp(-30.0px, 1.5vw, 30.0px); display: block; margin: clamp(-20.0px, 1.0vw, 20.0px) 0}

#programs {background: #5d5d5d; padding: clamp(-40.0px, 2.0vw, 40.0px) clamp(-100.0px, 5.0vw, 100.0px); color: #FFF;}
#programs h4 {font-family: 'Telegraf Bold'; font-size: clamp(-50.0px, 2.5vw, 50.0px)}
#programs .program {font-family: 'Telegraf Bold'; font-size: clamp(-26.0px, 1.3vw, 26.0px); color: #FFF; margin-right: clamp(-80.0px, 4.0vw, 80.0px); margin-bottom: clamp(-60.0px, 3.0vw, 60.0px); display: flex; align-items: center;}
#programs .program:hover {color: #ff7b31}
#programs .program img {object-fit: contain; width: 70%; margin: 0 auto; display: block;}
#programs .program .img-container {padding: clamp(-10px,0.5vw,10px); border: 2px solid #FFF; border-radius: 200px; width: clamp(-80.0px, 4.0vw, 80.0px); height: clamp(-80.0px, 4.0vw, 80.0px); display: flex; margin-right: 3%}

#specie-partners {padding: 0 0 clamp(-80.0px, 4.0vw, 80.0px); background: #000}
#specie-partner {background: #000; padding: clamp(-80.0px, 4.0vw, 80.0px) clamp(-100.0px, 5.0vw, 100.0px) 0; color: #FFF}
#specie-partner #partner {padding: clamp(-40.0px, 2.0vw, 40.0px) 0}
#specie-partner h4 {font-family: 'Telegraf Bold'; font-size: clamp(-50.0px, 2.5vw, 50.0px)}
#specie-partner .partner-logo {max-width: 30%; margin-right: clamp(-40.0px, 2.0vw, 40.0px); margin-left: 0}

#work-together {margin: 0; padding-bottom: clamp(-200.0px, 10.0vw, 200.0px)}
#work-together .img {float: right; max-width: 140%; width: 140%}
#work-together p.large {font-size: clamp(-54.0px, 2.7vw, 54.0px); padding-left: clamp(-40.0px, 2.0vw, 40.0px); border-left: 2px solid #FFF;}
#work-together p {font-size: clamp(-30.0px, 1.5vw, 30.0px)}
body #work-together ::placeholder {color: #FFF !important; font-size: clamp(-60.0px, 3.0vw, 60.0px); }
body #work-together .btn:hover {background: #ff7b31 !important; border-color: #ff7b31 !important}


#select-features h3 {color: #FFF}
#select-features #logo-grid {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#select-features #logo-grid div {width: 20%; padding: 0 1.5%; height: auto; margin-bottom: clamp(-40px,2vw,40px)}
#select-features #logo-grid div img {max-height: clamp(-140.0px, 7.0vw, 140.0px); width: 100%; object-fit: contain;}



#news-feed {position: relative; padding: clamp(-100.0px, 5.0vw, 100.0px) 0 clamp(-220.0px, 11.0vw, 220.0px); }
#news-feed .top {position: absolute; left: 0; bottom: 100%; width: 100%;}
#news-feed .post {border-top: 2px solid #000; padding: clamp(-20.0px, 1.0vw, 20.0px) 0 clamp(-80px,4vw,80px); display: block;}
#news-feed .post:hover {transform: translateY(clamp(-10.0px, -0.5vw, 10.0px));}
#news-feed .post img {height: auto; aspect-ratio: 5 / 3; object-fit: cover; width: 100%;}
#news-feed h4 {height: clamp(-120.0px, 6.0vw, 120.0px)}
#news-feed .feat h4 {height: auto; margin: 0}
#news-feed .feat h5 {margin: 0}
#news-feed h5 {position: relative;}
#news-feed h5:after {content:"+"; position: absolute; right: 0; font-size: clamp(-40.0px, 2.0vw, 40.0px); top: 0; line-height: 0.2}
#news-feed .feat h5:after {display: none;}
#news-feed .feat .post img {aspect-ratio: 21 / 9}
#news-feed .post .source-logo {max-width: clamp(-160.0px, 8.0vw, 160.0px); aspect-ratio: unset !important; max-height: clamp(-80.0px, 4.0vw, 80.0px); object-fit: unset; width: auto;}


#species-capsule-includes .img-1 {position: absolute; right: 0; top: 5vw; width: 45%}
#species-capsule-includes p.medium {font-size: 1.9vw; margin: 0;}

#colossal-100 p {color: #6a5f40; border-left: 2px solid #6a5f40; font-size: 1.4vw; padding: 1vw 0 1vw 2vw; margin: 0}




#partner-list h2 {-webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #6a5f40; font-size: clamp(-200px,10vw,200px); font-family: 'NB Architekt Std'; color: #000; text-align: center; line-height: 1;}
#partner-list .square.a {left: 0; top: 3.5vw}
#partner-list .square.b {left: 0; bottom: 0}
#partner-list .plus.a {right: 0; top: 3.1vw}
#partner-list .plus.b {right: 0; bottom: 0}
#partner-list .disc {position: absolute; left: 0; top: 10vw; width: 15%; top: 50vw}
#partner-list .disc:nth-of-type(2) {left: auto; right: 0; top: 10vw}
#partner-list .slashes {max-width: 50%}

#partner-list #logo-grid {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#partner-list #logo-grid div {width: 20%; padding: 0 1.5%; height: auto; margin-bottom: clamp(-40px,2vw,40px)}
#partner-list #logo-grid div img {max-height: clamp(-140.0px, 7.0vw, 140.0px); width: 100%; object-fit: contain;}