p {font-size: clamp(-20px,1vw,20px);}
p.medium {font-size: clamp(-27px,1.35vw,27px);}

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

.head {position: relative;}
.head .arkitect {font-size: 0.7vw;}
.head .line {margin-left: -3%;}
.head .square {left: -5%; top: 30%;}

#hero .inside {position: absolute; top: 20vh; width: 100%; text-align: center;}
#hero .inside .line {position: static; width: 100%;}
#hero h1 {color: #FFF; position: static; font-size: clamp(10px,13vw,310px); line-height: 1;}
#hero h3 {color: #FFF; font-family: 'Telegraf'; text-transform: uppercase; padding-bottom: 3%; font-size: 2vw}
#hero .arkitect {margin-right: 10%;}
#hero p {text-transform: none; font-size: 0.8vw;}
#hero .lower {top:68vh;}
#hero .slashes {width: 90%;}






#section-1 .box {padding: clamp(7px,0.2vw,4px) clamp(7px,0.5vw,10px); position: relative; white-space: nowrap;}
#section-1 .container-fluid {overflow: visible}
#section-1 h2 {font-family: "Telegraf"; font-size: 10vw; line-height: 0.9; padding: clamp(7px,2vw,40px) 0;}
#section-1 .img-2 {max-width: 70%; display: block; position: absolute; right: clamp(-14px,-0.3vw,14px); top: clamp(-1200px,60vw,1200px);}
#section-1 .img-2 {border: 2px solid #c578c4; padding: 1vw; aspect-ratio: 3 / 3.5; object-fit: cover;}
#section-1 .img-3 {position: absolute; bottom: -5vw; left: -5vw; width: 25%; z-index: 10;}
#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(-40px,-2vw,40px); top:clamp(-12px, -0.6vw,12px)}
#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 p.grey {max-width: 70%; line-height: 2}
#section-1 .lower {position: relative; overflow: visible;}
#section-1 .lower div {background: linear-gradient(90deg, #7dea13 0%, #34bf6c 100%); margin-bottom: clamp(-20px,1vw,20px); padding: clamp(-6px,0.3vw,6px) clamp(-20px,1vw,20px); display: inline-block; font-family: 'NB Architekt Light'; font-size: clamp(-68px,3.4vw,68px); color: #FFF; line-height: 1; white-space: nowrap; position: relative; z-index: 1; padding-right: 4vw; position: relative;}
#section-1 .lower .feather {position: absolute; left: -8vw; top: -8vw; width: 20vw;}
#section-1 .img-thy {margin-top: -25vw; width: 120%; max-width: 200%; margin-left: -15%;}
#section-1 .slashes-2 {width: clamp(-300px,15vw,300px)}


#section-2 {background: url(img/mauritius/section-2-bg.jpg) center top; background-size: 100% auto; padding:clamp(-140px,7vw,140px) 0 clamp(-300px,15vw,300px); margin-top: clamp(-160px,-8vw,160px)}
#section-2 h2 {font-size: clamp(-140px,7vw,140px)}
#section-2 .stats .stat {font-size: clamp(-180px,9vw,180px); font-family: 'NB Architekt Std'; position: relative;}
#section-2 .stats p {font-size: clamp(-34px,1.7vw,34px); color: #ff7b31; text-transform: uppercase; line-height: 1.1}
#section-2 .stats sup {font-size: clamp(-60px,2vw,60px); line-height: 1; vertical-align: super; display: block; position: absolute; left: 60%; top:3.5vw}
#section-2 .stats .pl-5 {padding-left: clamp(-80px,4vw,80px) !important}



#section-3 {background-color: #000; padding-bottom: 1vw}
#section-3 .upper {background-color: #ff7b31; margin-top: clamp(-200px,-10vw,200px); padding:clamp(-70px, 3.5vw,70px) clamp(-80px,4vw,80px)}
#section-3 .upper .line {display: inline-block; width: 90%; vertical-align: middle; margin-left: clamp(-20px,1vw,20px)}
#section-3 .upper h3 {font-family: 'Telegraf Bold'; font-size: clamp(-44px,2.1vw,44px)}
#section-3 .list {white-space: nowrap;}
#section-3 .list .adjust {float: right;}
#section-3 .list {font-size: clamp(-30px,1.5vw,30px)}
#section-3 .list .text-right {font-family: 'NB Architekt Std'; font-size: clamp(-16px,0.8vw,16px); color: #FFF}
#section-3 .list .row {border-bottom: 1px solid #000; padding: clamp(-12px,0.6vw,12px) 0}
#section-3 .list .row:first-child {border-top: 1px solid #000;}


#section-3 .key .dot {background-color: #0dc5ed; position: static; vertical-align: middle; display: inline-block; width: clamp(-16px,0.8vw,16px); height:clamp(-16px, 0.8vw,16px)}
#section-3 .key .dot-2 {background-color: #91ed0e}
#section-3 .key .dot-3 {background-color: #80cacf}
#section-3 .key .dot-4 {background-color: #ffda50}
#section-3 .key .dot-5 {background-color: #ff7b31}
#section-3 .key .dot-6 {background-color: #cc8ffb}
#section-3 .key .dot-7 {background-color: #d54b4b}

#section-3 .key p {margin-bottom: 0; font-size: clamp(-30px,1.5vw,30px); line-height: 1}
#section-3 .key .row {border-bottom: 1px solid #FFF; padding: clamp(-34px,1.7vw,34px) 0}
#section-3 .key .row:first-child {border-top: 1px solid #FFF;}


#section-4 {background: url(img/mauritius/section-4-bg.jpg?cache=2) no-repeat left top; background-size: 95% auto; padding: clamp(-200px,10vw,200px) 0 0 clamp(-64px,3.2vw,64px); position: relative; z-index: 5}
#section-4 h2 {font-size: 10vw; line-height: 1.1; color: #7dea13; white-space: nowrap; text-align: center;}
#section-4 .pl-5 {padding-left: clamp(-100px,5vw,100px) !important}
#section-4 p {line-height: 1.8}
#section-4 p.large {color: #9940dd}
#section-4 .img-1 {margin-bottom: -25vw; width: 100%;}
#section-4 .img-2 {width: 65%; position: absolute; left: 0; bottom: clamp(-400px,-20vw,400px)}
#section-4 .textline {background: #000; color: #FFF; display: inline-block; font-size: clamp(-34px,1.7vw,34px); text-transform: uppercase; font-family: 'NB Architekt Std'; padding: 0 clamp(-20px,1vw,20px); margin-bottom:clamp(-10px,0.5vw,10px); white-space: nowrap}

#section-4 .plus.a {left: clamp(-100px,5vw,100px); top: clamp(-680px,34vw,680px)}
#section-4 .plus.b {left: clamp(-100px,5vw,100px); top: clamp(-1080px,54vw,1080px)}
#section-4 .plus.c {left: clamp(-100px,5vw,100px); top: clamp(-1766px,88vw,1766px)}
#section-4 .plus.d {right: clamp(-100px,5vw,100px); top: clamp(-1766px,88vw,1766px)}
#section-4 .square.a {left: clamp(-100px,5vw,100px); top: clamp(-1340px,67vw,1340px)}
#section-4 .square.b {right: clamp(-100px,5vw,100px); top: clamp(-800px,40vw,800px)}
#section-4 .square.c {right: clamp(-100px,5vw,100px); top: clamp(-2360px,118vw,2360px)}




#section-5 {background: url(img/mauritius/section-5-bg.jpg) no-repeat center top; background-size: 100% auto; padding: 19vw 0 1vw; position: relative;}
#section-5 h3 {color: #ff7b31; font-size: clamp(-160px,8vw,160px)}
#section-5 .narrow {padding-left: clamp(-360px,18vw,360px); padding-right: clamp(-360px,18vw,360px)}
#section-5 .line.a {width: 25%; margin: 5vw 0 5vw}
#section-5 .line.b {width: 35%; margin: clamp(-60px,3vw,60px) clamp(-200px,-10vw,200px) clamp(-60px,3vw,60px) 0; float: right;}
#section-5 p.large {color: #ff7b31; }
#section-5 p:not(.large) {line-height: 2; font-size: clamp(-24px,1.2vw,24px); padding-right: 18%}
#section-5 .plants-1 {position: absolute; left: 0; top: clamp(-360px,18vw,360px); width: 35%}
#section-5 .plants-2 {position: absolute; right: 0; top: clamp(-260px,13vw,260px); width: 20%}

#section-5 .slashes {position: absolute; right: 5vw; top: 3vw; width: 40%;}

#section-5 .lower {background: url(img/mauritius/section-5-img-1.jpg) no-repeat center top; background-size: 100% auto; padding: clamp(-200px,10vw,200px) clamp(-120px,6vw,120px); max-width: 92%; position: relative; z-index: 10}
#section-5 .lower h4 {font-size: clamp(-140px,7vw,140px); max-width: 50%}
#section-5 .lower p {max-width: 73%}
 
#section-5 .pill {background: url(img/tasmania/pill.png) no-repeat center center; background-size: 100% 100%; max-width: clamp(-1400px,70vw,1400px); margin: clamp(-160px,-8vw,160px) auto 0; position: relative; z-index: 10}
#section-5 .pill p {font-size: clamp(-30px,1.6vw, 30px); padding: clamp(-56px,2.8vw,56px) 20% clamp(-56px,2.8vw,56px) 10%;line-height: 1.3; color: #FFF;}


#section-5 .plus.a {bottom: clamp(-120px,6vw,120px); left:clamp(-100px,5vw,100px);}
#section-5 .plus.b {bottom: clamp(-120px,6vw,120px); right:clamp(-100px,5vw,100px);}


#section-6 {
    overflow-y: hidden;
    position: relative;
	background: rgb(147,216,72);
	background: linear-gradient(0deg, rgba(147,216,72,1) 0%, rgba(255,255,255,0) 100%);
}
#section-6 .box.black {background: #000; color: #FFF; padding: 0 clamp(-10px,0.5vw,10px)}
#section-6 .contain {padding: 0 3%}
#section-6 .title {color: #FF7B31}
#section-6 .img-2 {position: absolute; right: 2.3%; bottom: clamp(-120px,-6vw,120px); width: 60%}
#section-6 .square {position: static; display: inline-block;}
#section-6 .inner-team {padding: 0 5%; margin-bottom: clamp(-40px,2vw,40px); margin-top: clamp(-40px,2vw,40px)}
#section-6 .inner-team img {aspect-ratio: 5 / 4; display: block; object-fit: cover; filter: saturate(0%); object-fit: cover; width: 100%}
#section-6 .inner-team p:not(.medium) {color: #454555; height: clamp(-70px,3.5vw,70px)}
#section-6 .people p.large{text-align: center; padding: 0 10%; font-size: clamp(-50px,2.5vw,50px);}
#section-6 .more-slashes {width: 140%; max-width: 200%;}

#section-6 .mountain {position: absolute; right: 0;  bottom: -18vw; width: 75%; }

#form {background: url(img/tasmania/form-bg.jpg) no-repeat center top; background-size: cover; padding: clamp(-120px,6vw,120px) 0 clamp(-80px,4vw,80px); color: #FFF;}
#form .upper {padding-left: 28%}
#form h3 {font-size: clamp(-130px,6.5vw,130px);}
#form p {font-size: clamp(-34px,1.7vw,34px)}

#form input[type="tel"],
#form input[type="email"],
#form select,
#form input[type="text"] {background: #000; border: none; height: clamp(-60px,3vw,60px); border-radius: 1000px; padding: 0 clamp(-30px,1.5vw,30px); color: #FFF; font-size: clamp(-20px,1vw,20px); outline: none}
#form select {cursor: pointer;appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative;}
#form .ginput_container_select {position: relative;}
#form .ginput_container_select:after {content:''; background: url('img/tasmania/chevron-down.svg'); width: clamp(-20px,1vw,20px); height: clamp(-20px,1vw,20px); position: absolute; right: clamp(-30px,1.5vw,30px); top: clamp(-18px,0.9vw,18px);}
#form ::placeholder {color: #FFF; font-size: clamp(-20px,1vw,20px);}
#form textarea {background: #000; border: none; height: clamp(-300px,15vw,300px); padding: clamp(-20px,1vw,20px) clamp(-30px,1.5vw,30px); color: #FFF; font-size: clamp(-20px,1vw,20px); outline: none}
#form .gform_button {background: #FFF; font-size: clamp(-20px,1vw,20px); padding: clamp(-20px,1vw,20px) clamp(-40px,2vw,40px)}
#form .gform_button:hover {background: #ee4e38; border-color: #ee4e38}


.news-container {background-color: #000}
.news-container .title-area .line {opacity: 0.3}



@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:center !important; padding: 0; margin: 0}
	#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: 11vw}
	#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-1 p.grey {max-width: 100%}

	#section-1 .img-thy {margin-top: -50vw; margin-bottom: -15vw; z-index: 10; position: relative;}
	#section-1 .img-3 {display: none}

	#section-1 .img-2 {max-width: 30%; top: 50vw; right: -5vw}
	#section-1 .img-1 {max-width: 45%}
	#section-1 p.large {font-size: 5vw}

	#section-1 .lower div {font-size: 6.5vw; padding: 1vw 1.5vw}


	#section-2 {background-size: 230%; background-position: top left; background-color: #234908; background-repeat: no-repeat; padding-bottom: 0}
	#section-2 h2 {font-size: 11vw;}
	#section-2 .stats .stat {font-size:15vw; line-height: 0.7}
	#section-2 .stats sup {font-size: 7vw}
	#section-2 .stats p {font-size: 5vw; margin-bottom: 10vw}


	#section-3 .upper h3 {font-size: 4.5vw}
	#section-3 .list {font-size: 3.5vw}
	#section-3 .list .text-right {font-size: 1.7vw}
	#section-3 .list .row {padding: 2vw 0}
	#section-3 .ecosystems {width: 120%; max-width: none; margin-left: -10%}
	#section-3 .key p {font-size: 4.5vw; line-height: 1.3}
	#section-3 .key .row {padding: 4vw 0}
	#section-3 .key .dot {width: 3vw; height: 3vw}

	#section-4 {background-size: 300%; background: none; padding: 10vw 0 3vw}
	#section-4 .plus {display: none;}
	#section-4 .square {display: none;}
	#section-4 .img-1 {margin-bottom: 10vw}
	#section-4 .img-2 {width: 40%; bottom: -2vw; left: 4vw}


	#section-4 .textline {font-size: 4.3vw; padding: 1vw 3vw; margin-bottom: 2vw; white-space: nowrap}


	#section-5 {background-size: 250%}
	#section-5 p:not(.large) {font-size: 3.5vw}
	#section-5 .plants-2 {top: 110vw}
	#section-5 .plants-1 {top: 140vw}
	#section-5 h3 {font-size: 11vw; margin-bottom: 5vw}
	#section-5 .line {display: none}
	#section-5 .narrow {padding-left: 10vw; padding-right: 8vw}

	#section-5 .lower {padding: 3vw;}
	#section-5 .lower h4 {background: rgba(0,0,0,0.5); padding: 2vw; margin-bottom: 0}
	#section-5 .lower p {max-width: 70%; line-height: 1.5; background: rgba(0,0,0,0.5); padding: 2vw}
	#section-5 .pill {background: #ed503c; font-size: 4vw; padding: 3vw}
	#section-5 .pill p {font-size: 4vw; padding: 0; margin: 0; text-align: center;}

	#section-6 p.medium  {margin-bottom: 1vw}
	#section-6 .inner-team p:not(.medium) {margin-bottom: 0; height: auto}
	#section-6 .inner-team {margin-bottom: 9vw}

	#form .upper {padding-left: 13%}
	#form h3 {font-size: 9vw}
	#form p {font-size: 3vw}
	#form input[type="tel"], 
	#form input[type="email"], 
	#form select, 
	#form input[type="text"] {height: 10vw; font-size:3vw; padding: 0 5vw}
	#form ::placeholder {color: #FFF; font-size:3vw }
	#form textarea {padding: 3vw 5vw; height: 25vw}
	#form .gform_button {font-size: 4vw; padding: 0 5vw}

}