#hero h1 {color: #c265f6;}

.container-fluid.narrow {padding-left: clamp(5px,8vw,160px)}
.container-fluid.narrow {padding-right: clamp(5px,8vw,160px)}

p, li {font-size: clamp(7px,1vw,20px);}
.small {font-size: clamp(7px,0.9vw,18px) !important;}
p.medium {font-size: clamp(7px,1.7vw,34px);}

h1, h2, h3, h4, h5 {font-family: 'NB Architekt Std'; line-height: 1;}

.sep {font-size: clamp(7px,1vw,20px); white-space: nowrap;}

.box {font-size: clamp(7px,0.6vw,12px);}

h3 {font-size: clamp(7px,1.5vw,30px);}
h2 {font-size: clamp(7px,2.4vw,48px);;}

p {text-align: justify;}
p.large,
p.medium {text-align: left;}

.head {position: relative;}
.head .arkitect {font-size: clamp(7px,0.7vw,14px);}
.head .line {margin-left: -3%;}
.head .square {left: -5%; top: 30%;}

.arkitect {font-size: clamp(5px,0.8vw,15px);}

#hero .inside {position: absolute; top: 24vh; width: 100%; text-align: center; font}
#hero  .line {position: static; width: 100%;}
#hero h1 {color: #FFF; position: static; font-size: clamp(10px,10vw,200px); line-height: 1;}
#hero h1 span {background: rgba(72, 66, 149, 0.5); padding: clamp(-20px,1vw,20px) clamp(-40px,2vw,40px); margin-right: clamp(-20px,1vw,20px)}
#hero h3 {color: #FFF; font-family: 'Telegraf'; text-transform: uppercase; padding-bottom: 3%;}
#hero p {text-transform: none; font-size: clamp(7px,0.8vw,16px);}
#hero .lower {top: clamp(7px,58vh,1280px);}
#hero .slashes {width: 100%;}
#hero .plus.a {right: clamp(-60px,3vw,60px); left: auto}
#hero .plus.b {top: 61vh}
#hero .square {top: clamp(-360px,18vw,360px)}


#section-1 .box {padding: clamp(7px,0.2vw,4px) clamp(7px,0.5vw,10px); position: relative; white-space: nowrap;}
#section-1 h2 {font-family: "Telegraf"; font-size: clamp(7px,10.5vw,220px); line-height: 1; padding: clamp(7px,2vw,40px) 0;}
#section-1 .img-1 {margin: 2vw 0 0 8.2vw; max-width: none; width: 41vw}
#section-1 .img-2 {max-width: 70%; display: block; margin: 0 auto}
#section-1 .img-3 {border: 1px solid #cb47ff; padding:clamp(-20px,1vw,20px); display: block; margin-top: clamp(-100px,-5vw,100px)}
#section-1 .aus {width: clamp(7px,33vw,660px); margin: clamp(-400px,-20vw,400px) auto 0; display: block;}
#section-1 .plus-a {position: absolute; left: clamp(7px,4vw,80px); top: clamp(7px,51vw,1020px);}
#section-1 .plus-b {position: absolute; left: clamp(7px,4vw,80px); top: clamp(7px,10.3vw,206px);}
#section-1 .square-a {right:clamp(-40px, -2vw,40px); left: auto}
#section-1 .slashes {width: 70%; display: inline;}
#section-1 .line {width: 100%;}
#section-1 .lower {margin-top: clamp(-60px,-3vw,60px)}


#section-2 {padding-bottom: 0; background-color: #222461;}
#section-2 .head {position: absolute; width: 100%; top: clamp(7px,6vw,120px); z-index: 5; left: 0; }
#section-2 .head .line {opacity: 0.5; border-color: #b6abcf;}


#section-2 .video-box {position: absolute; top: clamp(-860px,43vw,830px); width: clamp(-960px,48vw,930px);}
#section-2 .video-box .placeholder {position: absolute; z-index: 10; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; object-fit: cover;}
#section-2 .video-box .placeholder-bg {position: absolute; left: clamp(-26px,-1.3vw,26px); bottom: clamp(-26px,-1.3vw,26px); height: calc(100% + clamp(-20px,1vw,20px)); width: calc(100% + clamp(-26px,1.3vw,26px)); max-width: none;}
#section-2 .video-box .play {position: absolute; left: clamp(7px,22vw,440px); top: 42%; width: clamp(7px,6vw,120px); z-index: 5; z-index: 6;}
#section-2 .video-box #player-2 {width: 100%; height: clamp(-680px,34vw,680px); z-index: 3; position: relative;}

#section-2 h2 {position: absolute; top: clamp(7px,10vw,200px); color: #f18034; font-size: clamp(7px,10vw,200px);  text-align: right; font-weight: 100; font-family: "NB Architekt Light"; padding: 0;}
#section-2 h2 small {color: #FFF; font-size: clamp(7px,5vw,100px);}
#section-2 h2 img {position: absolute; right: 0; top: clamp(-40px,2vw,40px);}

#section-2 h3 {position: absolute; color: #FFF; top: clamp(7px,33vw,660px); font-size: clamp(7px,3.5vw,70px);}
#section-2 h3 span {background: #f17f34; display: inline-block;  line-height: 0.7; padding: 0 clamp(7px,1vw,20px) clamp(7px,1vw,20px) 0;}
#section-2 h3 span.small {font-size: clamp(7px,1.8vw,36px) !important; display: inline-block; line-height: 0.65; padding: 0 clamp(7px,2vw,40px) clamp(7px,0.5vw,10px) 0;}

#section-2 .box-1 {position: absolute; width: clamp(7px,30vw,600px); right: 0; top: clamp(7px,35vw,700px);}
#section-2 .box-1 .line {opacity: 0.3;}
#section-2 .box-1 p.purple {color: #de77ff; font-size: clamp(7px,2.3vw,46px);}

#section-2 .box-2 {position: absolute; width: clamp(7px,37.5vw,800px); left: 0; top: clamp(7px,81vw,1600px); text-align: justify;}
#section-2 .box-2 .large {color: #f37c33; position: relative; z-index: 5;}
#section-2 .box-2 .large img {position: absolute; right: clamp(-20px,-1vw,20px); bottom: clamp(-30px,1.5vw,30px); width: clamp(-240px,12vw,240px);}

#section-2 .box-3 {position: absolute; width: clamp(7px,30vw,600px); left: clamp(7px,1.8vw,56px); top: clamp(7px,123.8vw,2460px); color: #FFF; z-index: 5;}
#section-2 .box-3 h4 {font-size: clamp(7px,1.7vw,34px);}
#section-2 .box-3 p {font-size: clamp(7px,0.7vw,14px);}

#section-2 .box-4 {position: absolute; width: clamp(7px,26vw,520px); right: clamp(7px,4.3vw,86px); top: clamp(7px,118.5vw,2370px); color: #FFF; z-index: 5;}
#section-2 .box-4 h4 {font-size: clamp(7px,1.7vw,32px);}
#section-2 .box-4 p {font-size: clamp(7px,0.7vw,14px);}








#section-3 {background-color: #65b6e4; position: relative;}
#section-3 h2 {font-family: "telegraf"; font-size: clamp(7px,5vw,100px); color: #FFF}
#section-3 h2 small {color: #fa9236; font-size: 24%;}
#section-3 .head {position: absolute; width: 100%; top: clamp(7px,5.3vw,106px); z-index: 5; left: 2vw; }
#section-3 .head .line {opacity: 0.5; border-color: #CCC;}

#section-3 h3 {position: absolute; color: #FFF; top: clamp(7px,65vw,1300px); left: clamp(7px,48vw,960px); font-size: clamp(7px,3vw,60px);  white-space: nowrap;}
#section-3 h3 span {background: #7bcd41; display: inline-block;  line-height: 0.7; padding: 0 clamp(7px,1vw,20px) clamp(7px,1vw,20px) 0;}
#section-3 h3 span.small {font-size: clamp(7px,1.8vw,36px) !important; display: inline-block; line-height: 0.65; padding: 0 clamp(7px,2vw,40px) clamp(7px,0.5vw,10px) 0;}

#section-3 .box-1 {position: absolute; width: clamp(7px,30vw,600px); top: clamp(7px,16vw,320px); left:clamp(7px,55vw,1100px); color: #FFF; white-space: nowrap;}
#section-3 .box-1 .large {font-size: clamp(-40px,2vw,40px); color: #FFF; margin-bottom: clamp(-40px,2vw,40px);}
#section-3 .box-1 .box {background: #7bcd41; border: none; color: #000; position: relative; top: -0.1vw; padding: 0.2vw 0.5vw; margin-right: 0.4vw; float: left; margin-bottom:0.5vw ;}
#section-3 .box-1 .item {margin-bottom: clamp(7px,0.7vw,14px); clear: both; white-space: nowrap; font-size:clamp(7px, 0.9vw,18px);}
#section-3 .box-1 .orange .box {background: #f99136;}


#section-3 .box-2 {position: absolute; left: clamp(-180px,9vw,180px); bottom: clamp(-120px,6vw,120px); color: #FFF; width: 35%; z-index: 10}
#section-3 .green {color: #7bcd41}



#quote-1 {position: relative; margin: 0}
#quote-1 .line {border-color: #333}
#quote-1 .img-1 {max-width: none; margin-left: clamp(-160px,-8vw,160px); width: 110%}
#quote-1 .container-fluid {z-index: 5; position: relative;}
#quote-1 .bg {display: block; width: 100%;}
#quote-1 .feather {position: absolute; z-index: 10; top: clamp(-300px,-15vw,300px); right: 25%; width: 20%}
#quote-1 .quote {position: absolute; z-index: 10; top: clamp(-100px,5vw,100px); right: 10%; opacity: 0.4; width: 15%}
#quote-1 .inner {position: absolute; width: 100%; left: 0; top: 0; padding-top:clamp(-272px, 9vw,180px); padding-bottom: clamp(-200px,16vw,320px);}

#quote-1 .lower {width: clamp(-660px,33vw,660px); margin-top: clamp(-30px,1.5vw,30px); position: relative;}
#quote-1 .lower h3 {font-size: clamp(-264px,13.2vw,264px); font-family: 'Telegraf'; color: #FFF; white-space: nowrap; line-height: 0.8; vertical-align: top;}
#quote-1 .lower h3 small {font-size: clamp(-100px,5vw,100px)}
#quote-1 .lower h3 img {height: clamp(-180px,9vw,180px); position: relative; top: clamp(-20px,-1vw,20px); margin-right: clamp(-20px,1vw,20px)}
#quote-1 .lower p {margin-bottom: clamp(-40px,2vw,40px); line-height: 1.7; font-size: clamp(-22px,1.1vw,22px)}

#quote-1 .plus.white.a {left: clamp(-40px,-2vw,40px); top: clamp(-10px,-0.5vw,10px)}
#quote-1 .plus.c {left: clamp(-80px,-4vw,80px); top: clamp(-10px,-0.5vw,10px)}
#quote-1 .plus.d {left: clamp(-90px,4.5vw,90px); bottom:clamp(-100px,5vw,100px); }
#quote-1 .plus.b {color: #000; right: 0}





#islander .inside {position: absolute; top: 0; width: 100%; height: 100%; z-index: 10}
#islander .bg {width: 100%;}

#islander p {line-height: 1.9}
#islander .geotag {position: absolute; top: clamp(-200px,-10vw,200px)}
#islander h1 {font-size: clamp(-360px,18vw,360px); color: #FFF; line-height: 0.8; margin-top: clamp(-270px,-13.5vw,260px); margin-bottom: clamp(-60px,3vw,60px)}
#islander h1 small {font-size: clamp(-160px,8vw,160px); line-height: 0.5; color: #3b2994}
#islander .qr {position: absolute; width: 5%; right: 25%; margin-top: clamp(-40px,-2vw,40px)}
#islander .upper {color: #FFF; padding-left: clamp(-10px,0.5vw,10px);}
#islander .upper .l {padding-right: clamp(-80px,4vw,80px)}
#islander .upper .r {padding-left: clamp(-80px,4vw,80px); border-left: 1px solid #3c7dcd}
#islander .teal {color: #3dea86}
#islander .circles {width: 20%; margin:clamp(-40px,2vw,40px) 0 clamp(-60px,3vw,60px)}

#islander .left {position: absolute; top: clamp(-2000px,96vw,2000px); left: clamp(-160px,8vw,160px); width: 36%}
#islander .left h2 {font-size: clamp(-100px,5vw,100px); font-family: Telegraf}
#islander .left .slashes {width: 30%}
#islander .left p.large {line-height: 1.3}
#islander .dodoparts {max-width: none; width: 130%; margin-left: -30%}

#islander .right {position: absolute; bottom: clamp(-220px,11vw,220px); width: 36%; right: clamp(-160px,8vw,160px)}
#islander .caption {width: 36%; right: clamp(-160px,8vw,160px); bottom: clamp(-1040px,52vw,1040px); position: absolute; text-align: center;}


#facts {position: relative;}
#facts .head {position: absolute; width: 100%; top: clamp(-54px,2.7vw,54px); z-index: 10}
#facts .quote {position: absolute; width: 100%; top: clamp(-180px,9vw,180px); padding-left: 2%}
#facts .quote .spacer {height: clamp(-200px,10vw,200px)}
#facts .quote .leon {max-width: none; width: 110%; margin-left: -17%}

#facts .title {position: absolute; top:clamp(-1100px,55vw,1100px); width: 100%}
#facts .title p {font-size: clamp(-160px,8vw,160px); line-height: 0.5}
#facts .title .slashes {float: right; width: 40%}
#facts .title .box {background: #000; color: #FFF}

#facts .left {left: 12%; width: 25%; top: clamp(-2000px,100vw,2000px); position: absolute; line-height: 1.8}
#facts .mid {left: 41%; width: 25%; top: clamp(-2000px,100vw,2000px); position: absolute; line-height: 1.8}
#facts .right {left: 70%; width: 25%; top: clamp(-2000px,100vw,2000px); position: absolute; line-height: 1.8}






#section-4 {margin-top: clamp(-200px,-10vw,200px)}
#section-4 .title {position: absolute; color: #FFF; top: clamp(-940px,47vw,940px); font-size: clamp(-20px,1vw,20px)}
#section-4 .title h1 {font-size: clamp(-240px,12vw,240px); line-height: 0.9}
#section-4 .title h1 small {font-size: clamp(-100px,5vw,100px)}
#section-4 .title p {color: #a995ff; text-transform: uppercase; font-size: clamp(-26px,1.3vw,26px)}

#section-4 p {line-height: 2}
#section-4 p.large {font-size: clamp(-48px,2.4vw,48px)}
#section-4 .teal {color: #3dea86}
#section-4 .left {position: absolute; left: clamp(-160px,8vw,160px); color: #FFF; width: 38%; top: clamp(-1600px,79vw,1580px)}
#section-4 .settlers {max-width: 120%; margin-left: -23%}
#section-4 .left .lemorne {max-width: 122%; margin-left: -22%}

#section-4 .right {position: absolute; right: clamp(-160px,8vw,160px); width: 38%; top: clamp(-1620px,81vw,1620px); color: #FFF;}
#section-4 .aus {float: right; width: 40%; margin: clamp(-240px, -12vw ,240px) 0 0 4%}
#section-4 .caption {position: absolute; left: 11%; bottom: clamp(-80px,-4vw,60px)}
#section-4 .caption p {opacity: 0.6}

#section-4 .third {position: absolute; top: clamp(-2950px,147.5vw,2950px); right: clamp(-160px,8vw,160px); width: 38%; color: #FFF;}



#section-5 {padding: clamp(-40px,2vw,40px) 0; background: url(img/dodo/section-5-bg.jpg) no-repeat center top; background-size: 100% auto;}
#section-5 .title {color: #FFF;}
#section-5 .title .line {width: 15%; display: inline-block; vertical-align: middle; margin-right: clamp(-40px,2vw,40px)}
#section-5 .title small {display: block; font-size: clamp(-60px,3vw,60px); padding-left: 2%}
#section-5 .title .big {font-size: clamp(-280px,13.7vw,275px); mix-blend-mode:hard-light; color: #FFF; text-transform: uppercase; font-family: Telegraf;
	background: #CFCFCF;
	background: linear-gradient(to right, #FFF 14%, #ff6a2b 50%, #9613d3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


#section-5 #content .container-fluid.narrow {}
#section-5 .box {position: absolute; top: clamp(-34px,1.7vw,34px); padding: 0}
#section-5 .box > div {display: inline-block; padding: 0 clamp(-30px,1.5vw,30px)}
#section-5 .box .dark {background: #000; color: #FFF;}
#section-5 .top {position: absolute; top: clamp(-180px,9vw,180px); left: 8%}
#section-5 .top .red {color: #de2301; font-size: clamp(-50px,2.5vw,50px)}
#section-5 .top .red img {width: 6%; margin-right: 5%}
#section-5 .top h2 {font-family: Telegraf; text-transform: uppercase; font-size: clamp(-80px,4vw,80px); line-height: 1.1}
#section-5 .top h2 span {background: #000; color: #FFF}
#section-5 .turtle {position: absolute; right: clamp(-100px,-5vw,100px); top: clamp(-680px,34vw,680px); z-index: 5; width: 49%}

#section-5 .stats {position: absolute; top: clamp(-700px,35vw,700px); width: 100%}
#section-5 .stats .num {font-size: clamp(-200px,10vw,200px); font-family: 'NB Architekt Light'; line-height: 1}
#section-5 .stats .line {width: 30%; margin-left: -10%}
#section-5 .stats .medium {margin-top: clamp(-40px,2vw,40px); font-size: clamp(-30px,1.3vw,26px)}
#section-5 .stats .medium img {max-width: 10%; max-height: clamp(-60px,3vw,60px); margin: clamp(-20px,-1vw,20px) clamp(-20px,1vw,20px) 0 }


#section-5 p {line-height: 1.8}
#section-5 p.orange {color: #de2301}
#section-5 .left {position: absolute; top: clamp(-1200px,61.5vw,1200px); width: 46%; left: 9%}

#section-5 .right {position: absolute; top: clamp(-3000px,150vw,3000px); top: clamp(-1280px,64vw,1280px); width: 29%; right: 9%}
#section-5 .right img {max-width: 90%}

#section-5 .lower {position: absolute; left: 12.5%; top: clamp(-2550px,127.5vw,2550px); color: #FFF; text-align: right; width: 38%}
#section-5 .lower h3 {font-size: clamp(-48px,2.4vw,48px)}
#section-5 .lower .slashes {opacity: 0.8; width: 25%; margin: clamp(-40px,2vw,40px) 0}
#section-5 .lower p {text-align: right;}


#section-5 .sequence {top: clamp(-3030px,151.5vw,3030px); position: absolute; font-family:  'NB Architekt Std'; width: 33%; font-size: clamp(-34px,1.7vw,34px)}
#section-5 .sequence-1 {left: 14%; }
#section-5 .sequence-2 {left: 14%; top: clamp(-3180px,159vw,3180px)}
#section-5 .sequence-3 {right: 8%; left: auto}
#section-5 .sequence-4 {right: 8%; left: auto; top: clamp(-3180px,159vw,3180px)}

#invasive-species {padding-bottom: clamp(-120px,6vw,120px)}
#invasive-species p img {display: inline-block; width: 70%; float: right;}
#invasive-species p.orange {color: #de2301} 
#invasive-species .lower {text-align: center; border-bottom: 1px solid #b3b3bd}
#invasive-species .col {border-right: 1px solid #b3b3bd}
#invasive-species .col.last {border-right:none;}
#invasive-species .lower img {max-width: 50%; margin: clamp(-40px,2vw,40px) 0; display: inline-block; height: clamp(-60px,3vw,60px)}
#invasive-species .line {border-color: #b3b3bd; width: 60%; margin-bottom: clamp(-40px,2vw,40px)}
#invasive-species .line .line {position: absolute; border: 3px solid #000; right: 0; width: 40%}
#invasive-species .lower p {text-align: center; margin: clamp(-40px,2vw,40px) 0}
#invasive-species .plus.a {left: clamp(-90px,4.5vw,90px); top: clamp(-20px,1vw,20px)}
#invasive-species .plus.b {right: clamp(-90px,4.5vw,90px); top: clamp(-20px,1.2vw,24px)}

#invasive-species .plus.c {left: clamp(-90px,4.5vw,90px); top: clamp(-20px,24vw,480px)}
#invasive-species .plus.d {right: clamp(-90px,4.5vw,90px); top: clamp(-20px,24vw,480px)}



#section-6 {padding-top: clamp( 7px,5vw,100px); position: relative;}
#section-6 h1 {font-size: clamp( 7px,16vw,380px); left: clamp(-20px,-1vw,20px); position: absolute; top: clamp(-16px,-0.8vw,16px); text-align: center; width: 100%; white-space: nowrap;}
#section-6 h2.subhead {position: absolute; top:clamp( 7px, 9.5vw,190px); color: #212529; left: 0; font-family: telegraf; font-size: clamp( 7px,4.5vw,90px); color: #FFF}

#section-6 .item {width: clamp( 7px,38vw,760px); position: absolute; color: #FFF}
#section-6 .item .num {width: clamp( 7px,4.5vw,90px); height: clamp( 7px,4.5vw,90px); line-height: clamp( 7px,4.5vw,90px); left: clamp( -104px,-5.2vw,140px);  text-align: center; background: #FFF; border-radius: 1000px; position: absolute; font-family: "NB Architekt Std"; font-size: clamp( 7px,2vw,40px); display: none}
#section-6 .item.right .num {left: clamp(-134px,-6.7vw,137px);}
#section-6 .item .title {line-height: clamp( 7px,4.5vw,90px); font-size:clamp( 7px, 1.5vw,30px); font-weight: 700; text-transform: uppercase;}
#section-6 .item li {margin-bottom: clamp( 7px,1vw,20px);}
#section-6 .item img {width: 100%;}
#section-6 .item img.sep-2 {float: right; width: 62%;}
#section-6 .item.right img.sep-3 {transform: none}
#section-6 .item.left {left: clamp( 7px,6.5vw,130px);}
#section-6 .item.right {left: clamp( 7px,42.2vw,844px);}
#section-6 .item.left img {transform: rotate(180deg)}

#section-6 .plus-a {left:clamp(-180px, -9vw,180px); bottom: 0; display: none}

#section-6 .item.item-1 {top: clamp( 7px,24vw,480px);}
#section-6 .item.item-2 {top: clamp( 7px,55vw,1100px);}
#section-6 .item.item-3 {top: clamp( 7px,77.5vw,1550px);}
#section-6 .item.item-4 {top: clamp( 7px,98vw,1960px);}
#section-6 .item.item-5 {top: clamp( 7px,138.5vw,2770px);}
#section-6 .item.item-6 {top: clamp( 7px,169.5vw,3390px);}



#section-6 p.large {position: absolute; top: clamp( 7px,191vw,3820px); left:clamp( 7px,17vw,340px); font-size: clamp( 7px,1.5vw,30px); font-weight: 700; color: #3dea86}
#section-6 h2 {position: absolute; top: clamp( 7px,198vw,3960px); left: clamp( 7px,17vw,340px); font-size: clamp( 7px,8vw,160px); font-family: "telegraf"; color: #FFF}
#section-6 h2 span {margin-left: clamp( 7px,10vw,200px); color: #000; background: #21b87a; font-size: clamp( 7px,9vw,180px); white-space: nowrap; text-transform: uppercase; line-height: 0.8; display: inline-block; height: clamp(-124px,6.2vw,124px)}



#section-7 {margin-top:clamp(-240px, -12vw,240px); overflow: visible; position: relative; z-index: 2; padding-top: clamp(-10px,0.5vw,10px); height: clamp(-1260px,63vw,1260px); background: #1a2020} 
#section-7 h2 {font-size: clamp( 7px,11vw,220px); font-family: "telegraf"; text-transform: uppercase; position: relative; position: relative; z-index: 5; margin-left: clamp(-40px,2vw,40px)}
#section-7 h2 small {font-size: 40%; display: inherit; color: #804fdb; line-height: 0.8}
#section-7 h2 img {position: absolute;right:0vw; top: 0;}
#section-7 p {width: clamp(-760px,38vw,760px); margin-left: clamp(-40px,2vw,40px); text-align: justify; line-height: 1.8}
#section-7 .box-1 {width: clamp( 7px,54vw,1080px); z-index: 5; position: relative;}
#section-7 .img-1 {position: absolute; right: 0; top: clamp( 7px,13.5vw,270px); width: clamp( 7px,100vw,2000px); }
#section-7 .img-2 {width: clamp( 7px,54vw,1080px); margin-bottom: clamp(-300px,-15vw,300px); position: relative; z-index: 9;}
#section-7 .img-3 {position: absolute; right: 0; bottom: clamp(-40px,-2vw,40px); width: clamp( 7px,24vw,480px);}
#section-7 .big-button {position: absolute; left: clamp(-40px,2vw,40px); background: #9566e0; color: #FFF; z-index: 10}
#section-7 .big-button .plus {left: auto;}
#section-7 .big-button:hover {background: #000;}

#section-7 .plus {left: clamp(-60px,-3vw,60px);}
#section-7 .square-1,
#section-7 .plus-1 {top: 0;}
#section-7 .square-2,
#section-7 .plus-2 {top: clamp(-340px,17vw,340px);}
#section-7 .square-3,
#section-7 .plus-3 {bottom: clamp(-200px,10vw,200px);}

#section-7 .square {right: clamp(-60px,-3vw,60px);}


#section-7 {position: relative;}
#section-7 .bg {position: absolute; top: 0; left: 0; width: 100%;}

#news {background: #191f1f; background: rgb(25,31,31); background: linear-gradient(180deg, rgba(25,31,31,1) 18%, rgba(0,0,0,1) 100%); padding-bottom: clamp(-20px,1vw,20px)}
#news h2 {font-size: clamp(-160px,8vw,160px); white-space: nowrap; font-family: "NB Architekt Light"}
#news .slashes {width: 12%}
#news .line.green {border-width: 3px; border-color: #3fe884}
#news .news-item {border-top: 1px solid #3e4044; padding-top: clamp(-10px,0.5vw,10px)}
#news .news-item .meta {font-family: "NB Architekt Std"; color: #5c5d62; font-size: clamp(-16px,0.8vw,16px)}
#news .news-item h3 {font-size: clamp(-30px,1.5vw,30px); padding-top: clamp(-10px,0.5vw,10px); margin-bottom: 0; height: clamp(-160px,8vw,160px)}
#news .news-item .btn {border-color: #5c5d62; color: #76767e; text-transform: none; font-size: clamp(-20px,1vw,20px)}
#news .big-button {border-color: #32be6d; color: #32be6d}
#news .big-button .plus {color: #32be6d}
#news .big-button:hover {background-color: #32be6d; color: #FFF !important}
#news .big-button:hover .plus {color: #FFF} 
#news .line.grey {border-color:#3e4044 }
#news .line-plus {position: absolute; bottom: clamp(-170px,8.5vw,170px); right: clamp(-160px,8vw,160px); width: 25%;}



#news #video h3 {font-size: clamp(-30px,1.5vw,30px); margin-bottom: 0; font-family: 'Telegraf'; text-transform: uppercase;}
#news #video a {position: relative;}
#news #video img.play {position: absolute; left: 50%; width: clamp(-160px,8vw,160px); margin-left: clamp(-80px,-4vw,80px); top: calc(50% - clamp(-80px,4vw,80px))}






#saving {background: #000; position: relative;}

#saving #mauritian-module {background: url(img/dodo/mauritian-module.jpg) no-repeat center center; background-size: cover; padding: clamp(-100px,5vw,100px); color: #FFF; position: relative;}
#saving #mauritian-module .logo {position: absolute; width: clamp(-280px,14vw,280px); right: clamp(-60px,3vw,60px); top: clamp(-60px,3vw,60px)}
#saving #mauritian-module .big-button {background: rgba(255,255,255,0.2); border: 1px solid #FFF; color: #FFF; padding: clamp(-30px,1.5vw,30px) clamp(-80px,4vw,80px); display: block; width: 90%}
#saving #mauritian-module .big-button:hover {background: #FFF; color: #58386a}
#saving #mauritian-module .big-button:hover .plus {color: #58386a}
#saving #mauritian-module p.medium {font-size: clamp(-40px,2vw,40px); line-height: 1.2; margin-bottom: clamp(-40px,2vw,40px)}
#saving #mauritian-module h4 {font-size: clamp(-26px,1.3vw,26px); line-height: 1.5}


#saving .part-1 .mask-1 {width: 100%; height: clamp(-1060px,53vw,1060px); background: #FFF; position: absolute; background: #FFF;}
#saving .part-1 h3 {font-size: clamp(-120px,6vw,120px); font-family: 'NB Architekt Light'; margin-bottom: clamp(-80px,-4vw,80px)}
#saving .part-1 .inside {padding: 0 clamp(-120px,6vw,120px); background: #9940dd; position: relative;}
#saving .part-1 .inside.bb {border-bottom: 1px solid rgba(255,255,255,0.5)}
#saving .part-1 .img-1 {max-width: 120%; position: relative; z-index: 10}
#saving .part-1 .square.a {left: clamp(-80px,4vw,80px); top: clamp(-100px,5vw,100px)}
#saving .part-1 .plus.a {right: clamp(-80px,4vw,80px); top: clamp(-100px,5vw,100px)}
#saving .part-1 .plus.b {left: clamp(-80px,4vw,80px); bottom: clamp(-100px,5vw,100px)}
#saving .part-1 .plus.c {right: clamp(-80px,4vw,80px); bottom: clamp(-100px,5vw,100px)}
#saving .part-1 .vline {position: absolute; width: 1px; background: rgba(255,255,255,0); height: clamp(-2000px,100vw,2000px); top: 0; left: 25%}
#saving .part-1 .vline.two {left: calc(50% + 15px)}
#saving .part-1 .vline.three {left: 75%}
#saving .part-1 h5 {font-family: 'Telegraf Bold'; font-size: clamp(-30px,1.5vw,30px); margin: 0; padding: 0; line-height: 0.5}
#saving .part-1 .head .line {width: 93%; float: right; display: inline-block; margin-top: 1.5%}
#saving .part-1 .head .plus {position: static; display: inline-block; float: left;}
#saving .part-1 ul {padding: 0; margin: 0; border-bottom: 1px solid rgba(255,255,255, 0.4)}
#saving .part-1 ul li {font-size: clamp(-34px,1.7vw,34px); list-style: none; border-top: 1px solid rgba(255,255,255, 0.4); padding: clamp(-12px,0.6vw,12px) 0}
#saving .part-1 .dot {margin: 0.8vw 1.5vw 0 0; position: static; width:clamp(-16px,0.8vw,16px); height: clamp(-16px,0.8vw,16px); display: inline-block; float: left;}
#saving .part-1 .slashes {width: 100%;}


#saving .part-2 {position: relative; z-index: 10;}
#saving .part-2 .inside {position: relative; z-index: 10}
#saving .part-2 .img-1 {width: 100%; margin-top: clamp(-160px,-8vw,160px)}
#saving .part-2 .img-2 {margin-top: clamp(-80px,-4vw,80px); width: 45%}
#saving .part-2 .img-3 {width: 70%}
#saving .part-2 .img-4 {position: relative; z-index: 5; margin-top: clamp(-100px,-5vw,100px); width: 100%;}
#saving .part-2 .vline {position: absolute; width: 1px; background: rgba(255,255,255,0.2); height: clamp(-1200px,60vw,1200px); top: 0; left: 25%}
#saving .part-2 .vline.two {left: calc(50% + 15px)}
#saving .part-2 .vline.three {left: 75%}
#saving .part-2 .tag {text-transform: uppercase; position: absolute; right: 0; top: 70%}


#saving .part-3 {background: url(img/dodo/bird-part-3-bg.jpg) no-repeat center center; background-size: cover; color: #FFF;}
#saving .part-3 .plus.b,
#saving .part-3 .plus.a {position: static; float: right;}
#saving .part-3 .square {position: static;}
#saving .part-3 h2 {font-family: 'NB Architekt Light'; font-size: clamp(-80px,4vw,80px)}
#saving .part-3 .warning {padding: clamp(-40px,2vw,40px) 4vw; border: 1px solid #FFF; border-radius: 40px; position: relative;}
#saving .part-3 .plusbox {border: 1px solid rgba(255,255,255,0.5); display: inline-block; width: clamp(-24px,1.2vw,24px); line-height: clamp(-20px,1vw,20px); height: clamp(-24px,1.2vw,24px); text-align: center; position: absolute; right: clamp(-80px,4vw,80px);}
#saving .part-3 p.large {font-size: clamp(-46px,2.3vw,46px); text-align: center;}
#saving .part-3 .stat {font-family: 'NB Architekt Light'; padding: 0 clamp(-40px,2vw,40px); font-size: clamp(-120px,6vw,120px); color: #000; background: #FFF; text-align: center; border-radius: 20px; line-height: 1.1; display: inline-block; }




#saving .part-4 {background: #FFF; position: relative; overflow: hidden;}
#saving .part-4 .head .arkitect {font-size: clamp(-10px,0.5vw,10px)}
#saving .part-4 h2 {font-family: 'NB Architekt Light'; font-size: clamp(-140px,7vw,140px)}
#saving .part-4 .content p {padding-left: 6%; padding-right: 6%}
#saving .part-4 .vline {position: absolute; width: 1px; background: rgba(0,0,0,0.1); height: clamp(-1000px,50vw,1000px); top: 0; left: 25%}
#saving .part-4 .vline.two {left: 50%}
#saving .part-4 .vline.three {left: 75%}


#saving .part-5 {background: #FFF; position: relative; overflow: hidden; margin-top: -2px}
#saving .part-5 .slashes {width: 100%;}
#saving .part-5 .bg {width: 100%; position: absolute; top: clamp(-360px,18vw,360px)}
#saving .part-5 .img-1 {max-width: 70%; padding: 1vw; border: 1px solid #ff6822}
#saving .part-5 p.medium {font-size: clamp(-30px,1.5vw,30px)}
#saving .part-5 .plus.a {right: 0;}
#saving .part-5 .plus.b {bottom: 0; left: 0;}
#saving .part-5 .plus.c {bottom: 0; right: 0;}
#saving .part-5 h2 {text-align: center; font-size: clamp(-120px,6vw,120px); font-family: 'NB Architekt Light';}
#saving .part-5 .plus.one {top: 0; left: 0;}
#saving .part-5 .plus.two {top: 0; right: 0;}
#saving .part-5 .plus.four {top: clamp(-440px,22vw,440px); right: 0;}
#saving .part-5 .plus.three {top: clamp(-440px,22vw,440px); left: 0;}
#saving .part-5 .big-button {border: 1px solid #FFF; padding: clamp(-28px,1.4vw,28px) clamp(-80px,4vw,80px) clamp(-28px,1.4vw,28px) clamp(-40px,2vw,40px); font-size: clamp(-20px,1vw,20px); color: #FFF; background: rgba(255,255,255,0.2)}
#saving .part-5 .black {color: #000}
#saving .part-5 p.constrain {max-width: 75%; text-align: left;}
#saving .part-5 .img-2 {width: 100%; display: block;}
#saving .part-5 .img-3 {max-width: 110%}
#saving .part-5 .tag {position: absolute; right: 0; top: 40%; transform:rotate(90deg)}



@media only screen and (max-width:1700px) {
	#section-6 .item .num {left: -6.3vw;}
	#section-6 .item.right .num {left: -7.6vw;}
}



@media only screen and (max-width:1400px) {
	#section-6 .item .num {left: -6.7vw;}
	#section-6 .item.right .num {left: -8.4vw;}
}

@media only screen and (max-width:767px) {

	.box {font-size: 2vw;}

	p.medium {font-size: 3vw;}

	.section-header .arkitect {font-size: 1vw;}

	.arkitect {font-size: 2vw;}

	p {margin-bottom: 1.5rem; font-size: 3vw; text-align: left;}
	p.medium {font-size: 4vw}
	p.large {font-size: 7vw;}

	h4 {font-size: 4vw;}

	ul {padding-left: 3vw; margin-bottom: 10vw;}
	ul li {font-size: 3vw;}

	#hero {overflow: hidden;}
	#hero .dna .dna-3 {animation-name: none}
	#hero .intro {top: 55vh;}
	#hero .bg {object-position: right top;}
	#hero h1 {line-height: 1; font-size: 12.5vw;}
	/*#hero .line {margin-top: 10vw;}*/
	#hero .slashes {display: none;}
	#hero h3 {font-size: 4vw; max-width: 70vw;}
	#hero h3 br {display: none;}
	#hero p {max-width: 80%; font-size: 3vw;}
	
	#hero .text.a {top: 45%; font-size: 3vw;}
	#hero .text.b {font-size: 3vw;}

	#hero .line {top: 45%; width: 84%; left: 8vw;}
	#hero .lower { left: 8vw; top: 35vh; }
	#hero .arkitect {font-size: 2vw; text-align: left;}
	#hero .square {top: 30vw}
		
	#section-1 {padding-bottom: 10vw}
	#section-1 .plus-b {top: 9vw}
	#section-1 .aus {width: 70vw; margin-top: -55vw}
	#section-1 .line {margin-left: 5%}
	#section-1 .slashes-2 {width: 50%}
	#section-1 h2 {font-size: 20vw}
	#section-1 .plus-a {display: none}
	#section-1 .slashes {width: 100%}
	#section-1 .img-1 {width: 50%; position: absolute; right: -5vw}
	#section-1 .lower {margin-top: 5vw}
	#section-1 .img-3 {margin-top: -10vw}
	#section-1 .arkitect {white-space: normal;}


	#section-3 .box-2 {top: 0; bottom: auto; width: auto; top: 148vw; padding-right: 4vw; left:4vw}
	#section-3 .box-1 {background: rgba(0,0,0,0.7); padding: 5vw; width: 50%; left: auto; right: -2vw; top: 35vw}
	#section-3 h2 small {font-size: 3.5vw}
	#section-3 {padding-bottom: 50vw; background-color: #120d05}
	.head .arkitect {font-size: 2.5vw; margin-left: -2vw}
	#section-3 .head {left: 0}
	#section-3 .head .line {display: none}
	#section-3 .box-1 .item {font-size: 2.4vw}
	#section-3 .box-1 .box {margin-right: 3vw;}
	#section-3 .bg {margin-left: -7vw; width: calc(100% + 20vw); max-width: none}

	#quote-1 .feather {display: none}
	#quote-1 .img-1 {width: 70%; margin-top: 0vw; margin-left: -9vw; z-index: 10; position: relative;}
	#quote-1 .spacer-xl {height: 5vw}
	#quote-1 h2 {font-size: 8vw; white-space: nowrap;}
	#quote-1 p.white {font-size: 3.5vw; margin-bottom: 0; line-height: 1.3}
	#quote-1 .bg {max-width: none; width: 100%; margin-left: 0}
	#quote-1 .inner {padding-top: 19vw}
	#quote-1 .quote {width: 30%; top: 10vw; right: 0%}
	#quote-1 .spacer-xxl {height: 7vw}
	#quote-1 p.medium {line-height: 1.3; font-size: 3.8vw}

	#quote-1 .lower {width: 100%;}
	#quote-1 .lower p {font-size: 3.8vw; line-height: 1.3}

	#quote-1 .plus.white.a,
	#quote-1 .plus.c {top: -1.7vw}


	
	#islander .geotag {width: 75vw; margin-top: -5vw}
	#islander h1 small {font-size: 8vw}
	#islander {padding-bottom: 312vw}
	#islander .bg {width: 210%; max-width: none; margin-left: -13%; }
	#islander .circles {position: absolute; top: 85vw; left: 8vw}
	#islander .upper {padding-right: 5vw; padding-left: 0}
	#islander .left {width: 100%; top: 197vw; width: auto; padding-right: 8vw}
	#islander .left h2 {}
	#islander .left p.purple {font-size: 13vw;}
	#islander .right {position: absolute; top: 445vw; width: auto; right: auto; left: 8vw;; padding-right: 8vw}
	#islander .caption {display: none;}
	#islander .dodo-mobile {right:6vw; display: block; position: relative; width: 130%; max-width: none}
	#islander .upper .r {border-left: 0;}
	#islander .mask {width: 100vw; height: 200vw; background: #FFF; position: absolute; top: 190vw}

	#facts {padding-bottom: 170vw}
	#facts .bg {width: 100%;}
	#facts .head .arkitect {margin-bottom: 2vw;}
	#facts .title {top: 116vw; text-align: right;}
	#facts .title p {font-size: 11vw}
	#facts .title .slashes {float: left; margin-left: 6vw}
	#facts .quote {}
	#facts .left {width: auto; left: 6vw; top: 220vw; padding-right: 6vw}
	#facts .mid {width: auto; left: 6vw; top: 278vw; padding-right: 6vw}
	#facts .right {width: auto; left: 6vw; top: 340vw; padding-right: 6vw}
	#facts p.large {margin-bottom: 4vw}
	#facts .quote .leon {width: 130%; margin-top: -14vw; position: relative; z-index: 10}
	#facts .quote .spacer {height: 5vw}
	#facts .quote h2 {font-size: 5vw; font-family: "NB Architekt Std"}
	#facts .quote p.medium {font-size: 3.5vw}
	#facts .quote .grey {color: #FFF; font-size:2.5vw}
	#facts .small.line {border-width: 6px; width: 20%; margin-bottom: 4vw}
	#facts .small.line.green {border-color: #71c527}
	#facts .small.line.orange {border-color: #f99136}
	#facts .small.line.blue {border-color: #61affe}

	#section-4 {padding-bottom: 160vw}
	#section-4 .title p {display: none}
	#section-4 p.large {font-size: 4vw; line-height: 1.3}
	#section-4 p {line-height: 1.4}
	
	#section-4 .bg {width: 100%; max-width: none}
	#section-4 .title {top:27vw}
	#section-4 .left {width: auto; padding-right: 8vw; top: 58vw}
	#section-4 .left .lemorne {max-width: 110%; margin-left: -10%}
	#section-4 .settlers {display: none}
	#section-4 .lemorne {max-width: none; width: 120%; margin-left: -10%}
	#section-4 .right {width: auto; top: 228vw; color: #000; left: 8vw;}
	#section-4 .aus {width: 50%; margin-top: -27vw}
	#section-4 .mauritius {display: none}
	#section-4 .caption {display: none}
	#section-4 .third {top: 315vw; color: #000; left: 8vw; width: auto;}
	#section-4 .third p.large {color: #000; font-weight: 400; margin-bottom: 3vw}

	#saving #mauritian-module p.medium {font-size: 5vw; margin-bottom: 5vw}
	#saving #mauritian-module .logo {position: static; width: 40%; margin-bottom: 10vw}
	#saving #mauritian-module h4 {font-size: 4vw; margin-bottom: 10vw}
	#saving #mauritian-module h4 small {font-size: 2.5vw}
	#saving #mauritian-module .big-button {padding: 4vw 10vw; font-size: 4vw; width: 80%}

	#section-5 {background-size: 120% auto}
	#section-5 .title small {font-size: 6vw; margin-top: 1vw}
	#section-5 .title .slashes {width: 30%}
	#section-5 .title .big {background: linear-gradient(to right, #9613d3 -34%, #9613d3 100%); -webkit-background-clip:text}
	#section-5 .turtle {top: 85vw; width: 60vw; right: -15vw}
	#section-5 .top h2 {font-size: 6vw}
	#section-5 .bg {display: none}
	#section-5 .stats {top: 65vw; left: 3vw}
	#section-5 .stats .white {}
	#section-5 .stats .num {font-size: 12vw; text-align: center;}
	#section-5 .stats .medium img {display: block; margin: 0 auto 3vw; max-width: none; width: 12vw; height: 10vw; object-fit: contain; max-height: none;}
	#section-5 #content {height: 420vw; left: 0;}
	#section-5 .stats p.medium {font-size: 3vw; line-height: 1.3; text-align: center;}

	#section-5 .lower p {color: #000; display: none}

	#section-5 .left {top: 110vw; width: auto; padding-right: 6vw; left: 6vw}
	#section-5 .right {top: 210vw; width: auto; left: 6vw}
	#section-5 .plus {display: none}
	#section-5 .sequence {display: none}

	#invasive-species .plus {display: none;}
	#invasive-species .col {width: 100%; flex-basis:auto !important; margin-bottom: 10vw}
	#invasive-species .lower img {max-width: 20%; height: auto}
	#invasive-species .lower h3 {font-size: 7vw; margin: 5vw 0 0}
	#invasive-species .lower p {font-size: 4vw}


	#section-6 .item {width: 42vw;}
	#section-6 h1 {top: -0.3vw}
	#section-6 .item.right {width: 50vw;}
	#section-6 .item .title {font-size: 2.5vw; white-space: normal; line-height: 1.2;}
	#section-6 .item li {font-size: 1.7vw; margin: 0; line-height: 1.1; margin-bottom: 1vw}
	#section-6 .item img {display: none;}


	#section-6 .item.right {left: 40vw;}
	#section-6 .item ul {margin-left: -1vw}

	#section-6 .item.left {left: 6.3vw;}
	#section-6 .item.right .num {left: -5.6vw;}
	#section-6 p.large {font-size: 3vw; left: 8vw;}

	#section-6 .plus {display: none;}


	#section-6 .item.item-3 {top: 78vw}
	#section-6 .item.item-4 {top: 99vw}

	#section-6 .item.item-5 {top: 139.4vw}

	#section-6 p.large {left: 20vw}
	#section-6 h2 {left: 22vw}
	#section-6 .item.item-6 {top: 170vw}


	#section-7 h2 {margin-top: 14vw}
	#section-7 {height: auto; position: relative; padding-bottom: 25vw}
	#section-7 .bg {max-width: none; width: 265%; right: -25%; left: auto}
	#section-7 .box-1 {width: auto; }
	#section-7 p {color: #FFF; width: auto; margin: 140vw 0 0; padding-right: 0vw}


	#news .news-item h3 {font-size: 4vw; height: 25vw}
	#news .news-item .meta {font-size: 3vw}
	#news .item.item-7 {display: none}
	#news .big-button {margin-top: 10vw}
	#news .news-item .btn {font-size: 4vw}
	#news .slashes {width: 25%}
	#news .line-plus {display: none}

	#news #video h3 {font-size: 4vw; height: auto}
	#news #video img.play {width: 16vw; margin-left: -8vw; top: calc(50% - 8vw)}


/*	#section-7 {position: relative; overflow: visible;}
	#section-7 h2 {margin-top: 10vw; padding-left: 2vw;}
	#section-7 h2 img {top: -5vw;}
	#section-7 .img-1 {display: none;}
	#section-7 .box-1 {padding-left: 2vw; width: 85vw; margin-top: -3vw;}
	#section-7 .big-button {bottom: 39vw;}
	#section-7 .img-2 {width:80%; margin-bottom: -15vw; position: relative; z-index: 5; margin-top: 10vw;}*/

	#saving .part-1 h3 {font-size: 10vw}
	#saving .part-1 h3 br {display: none; margin: 0}
	#saving .part-1 .img-1 {max-width: 80%; margin: 0}
	#saving .part-1 .img-2 {margin-top: -5vw; z-index: 100; position: relative; max-width: 100%;}
	#saving .arkitect {white-space: normal;}
	#saving .part-1 ul {margin: 5vw 0}
	#saving .part-1 ul li {font-size: 3.5vw}
	#saving .part-1 .dot {width: 2vw; height: 2vw; margin-top: 1.5vw}
	#saving .part-2 .img-3 {width: 100%;}
	#saving .part-2 .img-4 {width: 200%; max-width: none; margin-left: -50%; margin-top: -30vw}

	#saving .part-3 h2 {font-size: 8vw}
	#saving .part-3 p.large {font-size: 6vw}
	#saving .part-3 .stat {font-size: 15vw; padding: 4vw}
	#saving .part-3 .plusbox {display: none}
	#saving .part-3 .warning {margin-top: 20vw}

	#saving .part-4 .head .arkitect {font-size: 2vw}
	#saving .part-4 h2 {font-size: 9vw}

	#saving .part-5 p.medium {font-size: 5vw}
	#saving .part-5 h3 {font-size: 2vw}

	#saving .part-5 .bg {top: 150vw; width: 340%; max-width: none}
	#saving .part-5 h2 {font-size: 10vw}
	#saving .part-5 h2 br {display: none}

	#saving .part-5 .big-button {font-size: 4vw; padding: 5vw 10vw 5vw 5vw}
}