@font-face {
	    font-family: National-ExtraBold;
		    src: url(../fonts/National-Extrabold.woff2);
		}

		@font-face {
	    font-family: National-Bold;
		    src: url(../fonts/National-Bold.woff2);
		}

		@font-face {
	    font-family: National-Bold;
		    src: url(../fonts/National-Medium.woff2);
		}
		

		@font-face {
	    font-family: National-Regular;
		    src: url(../fonts/National-Regular.woff2);
		}


	    * {
	    	margin: 0;
	    }

	    html {
	    	background-color: #000;
	    	font-family: National-Regular;
	    	font-size: 18px;
	    	line-height: 1.3;
	    	color: #fff;
	    }
	    	
    	body {
		    opacity: 1;
		    transition: 1s opacity;
		}
		body.fade-out {
		    opacity: 0;
		    transition: none;
		}



		#mask {
			height: 100vh;
			width:100%;
			position: fixed;
			background-color: #000;
		}

		#treespace_logo {
			width: 300px;
			position: fixed;
			right: 5%;
			top:5%;
			z-index: 9999;
		}

		.fix_me {
			position: fixed;
		}



		/*
		*
		*
		*	NAV ARROWS
		*
		*
		* * * * * * * * * * * * * * * */


		#arrow_holder {
			top: calc(50% - 50px);
			transition: all 0.5s ease;

		}

		#arrow_holder {
			transition: all 0.5s ease;
			width:40px;
			position: fixed;
			left: 0;
			top: calc(50% - 60px);
			z-index: 9999;
			list-style: none;
			margin-left: 0;
			padding-left: 0;
		}

		.menu_triangle_1 polygon,
		.menu_triangle_2 polygon,
		.menu_triangle_3 polygon {
			fill:#fff;
		}
		.menu_triangle_1,
		.menu_triangle_2,
		.menu_triangle_3 {
			width: 40px;

		}

		.menu_triangle_1:hover polygon,
		.menu_triangle_2:hover polygon,
		.menu_triangle_3:hover polygon
		 {
			fill:#f39323!important;
			cursor: pointer;
		}

		ul#arrow_holder li.active a svg polygon {
			fill:#f39323!important;
		}







		/*
		*
		* Main Banner - Full Screen Video
		*
		* * * * * * * * * * * * * * * */


		.bg_video {
		    display: none;
		}

		#close_btn {
		    color: #fff;
		    font-size: 90px;
		    font-weight: normal;
		    position: fixed;
		    right:5%;
		    top:5%;
		    cursor: pointer;
		     z-index: 99999;
		}


		@media screen and (min-width: 1024px) { 

		  #bgvid { 
		      position: fixed;
		      top: 50%;
		      left: 50%;
		      min-width: 100%;
		      min-height: 100%;
		      width: auto;
		      height: auto;
		      -webkit-transform: translateX(-50%) translateY(-50%);
		      -ms-transform: translateX(-50%) translateY(-50%);
		      transform: translateX(-50%) translateY(-50%);
		      background-size: cover;
		      -webkit-transition: 1s opacity;
		      -o-transition: 1s opacity;
		      transition: 1s opacity;
		      z-index: 99998;
		  }

		}


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

		  #bgvid {
		      position: fixed;
		      top: 0;
		      left: 0;
		      width: 100%;
		      height: 100%;
		      background-size: contain;
		      z-index: 99998;
		      background: black;
		  }

		    #close_btn {
		      color: #fff;
		      font-size: 60px;
		      font-weight: normal;
		      position: fixed;
		      right:20px;
		      top:20px;
		      cursor: pointer;
		       z-index: 99999;
		  }

		}







		/*
		*
		*
		*	SLIDES
		*
		*
		* * * * * * * * * * * * * * * */


		#fp-nav ul li, .fp-slidesNav ul li {
		    width: 20px;
		    height: 10px;
		    margin: 8px;
		}



		#fp-nav ul li a span, .fp-slidesNav ul li a span {
		    border-radius: 0;
		    position: absolute;
		    height: 6px;
		    width: 30px;
		    background: #fff;
		    margin: -2px 0 0 0;
		}

		#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
		    	height: 6px;
			    width: 30px;
		    	margin: -2px 0 0 0;
		    	background: #f39323;
		}

		#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
	    		height: 6px;
			    width: 30px;
		    	margin: -2px 0 0 0;
		    	background: #f39323;
		    	border-radius: 0;
		}

		.fp-controlArrow.fp-prev {
		    display: none;
		}


		.fp-controlArrow.fp-next {
		    right: 0px;
		    border-width: 44px 0 44px 88px;
		    border-color: transparent transparent transparent #454d33;
		}

		.fp-controlArrow.fp-next:hover {
		    border-color: transparent transparent transparent #f39323;
		}







		.section, .slide {
			background-size: cover;
			background-position: center;
			text-align:center;
		}


		#section0  {
			background-image: url(../images/treespace_landrover.jpg);
			
		}
		#section1  {
			background-image: url('../images/treespace_trees.jpg');
		}
		#section2  {
			background: #454d33;
		}

		#section3 {
			
		}

			#purpose1 {
				background-image: url('../images/wildlife.jpg');
			}
			#purpose2 {
				background-image: url('../images/mountain-biking.jpg');
				background-position: right;
			}
			#purpose3 {
				background-image: url('../images/architecture_2200px.jpg');
			}


		
		#section4  {
			background-image: url('../images/coronet-peak-sunrise.jpg');
		}
		#section5 {
			background-image: url('../images/wakatipu_basin.jpg');
		}
		#section6  {
			background: #454d33;
		}
		#section7  {
			background-image: url('../images/coronet.jpg');
		}
		#section8  {
			background: #454d33;
		}
		#section9  {
			background: #454d33;
		}


		/*
		*
		*
		*	SLIDE FORMATTING
		*
		*
		* * * * * * * * * * * * * * * */


		#icon_play {
			width:65px;
			cursor: pointer;
			margin-top: 30px;
		}

		.intro {
/*			display: flex;
			align-items: center;
			justify-content: center;*/
		}

		h1 {
		    font-family: National-Bold, sans-serif;
		    color: #fff;
		    font-size: 50px;
		    text-transform: uppercase;
		    line-height: 1.3;
		    text-align: center;
		    letter-spacing: 8px;
		}

		h2 {
			font-family: National-Bold, sans-serif;
		    color: #fff;
		    font-size: 50px;
		    text-transform: uppercase;
		    line-height: 1.3;
		    text-align: center;
		    letter-spacing: 8px;
		    margin-bottom: 30px;
		}


		h3 {
		    color: #fff;
		    font-size: 28px;
		    font-weight: normal;
		}

		

		.dash:after {
		    display: block;
		    content: '';
		    background: #fff;
		    height: 1px;
		    width: 15px;
		    margin-top: 12px;
		    margin-bottom: 12px;
		}

		.text_wrapper {
			width: 80%;
			max-width: 600px;
			margin: 0 auto;
			text-align: left;
		}


		.green_triangle {
			width: 220px;
			margin-left: -110px;
			/*cursor: pointer;*/
			position: absolute;
			bottom: 0;
		}

		.green_triangle path {
			fill:#454d33;
		}
		/*.green_triangle:hover path {
			fill:#f39323;

		}*/




		.text_wrapper..purpose h3 {
			font-family: National-Regular;
			font-size: 31px;
			font-weight: normal;
		}



		.mt_dewar h6 {
		    display: inline-block;
		    width: 125px;
		    font-size: 47px;
		    line-height: 50px;
		    color: #f39323;
		    text-align: right;
		    margin-right: 10px;
		    vertical-align: middle;
		}

		.mt_dewar p {
		    display: inline-block;
		    width: calc(100% - 175px);
		    color: #fff;
		    vertical-align: middle;
		}

		.mt_dewar hr {
		    background-image: url(../images/SVG/dash.svg);
		    background-size: 15px;
		    background-repeat: repeat-x;
		    height: 3px;
		    width: 100%;
		    border: none;
		    margin: 5px 0;
		}

		.kms, .has {
			font-size: 18px;
			line-height: 18px;
			width: 30px;
		}

		.mt_dewar h6.infinity {
			font-size: 65px;
			line-height: 65px;
		}
/*		.plus {
			font-size: 35px;
		}
		.has {
			font-size: 18px;
			width: 30px;
		}
*/

		.text_wrapper.participate h3 {
			font-family: National-Regular;
			font-weight: normal;
			font-size: 25px;
		}

		.text_wrapper.participate p {
			margin: 0 0 7px 0;
			font-family: National-Regular;
			font-weight: normal;
		}
		.text_wrapper.participate .orange_p {
			color: #f39323;
		}

		#sign-up-form {

		}

		section#sign-up {
		    height: 100vh;
		    width: 100%;
		    background-color: #454C32;
		    position: fixed;
		    top: 0;
		    left: 0;
		    z-index: 9999;
		    display: none;
		}


		.text_wrapper.participate input.sign-up-btn {
	 		border: 1px solid #f39323;
		    background-color: #f39323;
		    border-radius: 3px;
		    font-size: 24px;
		    letter-spacing: 2px;
		    padding: 12px 70px;
		    margin: 20px 0 20px 0;
		   	font-family: National-Bold;
		     color: #fff;
		    /* color: #454C32;*/
		    transition: all .15s ease-in;
		    
		    display: block;
		    width: auto;
		    cursor: pointer;
		}




		/*
*
*
*
*
*		MEDIA QUERIES
*
*
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */



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


	#treespace_logo {
	    width: 250px;
	}

	h1 {
	    font-size: 40px;
	}


	#icon_play {
	    width: 50px;
	    margin-top: 10px;
	}

	.green_triangle {
	    width: 170px;
	    margin-left: -85px;
    }

    .menu_triangle_1, .menu_triangle_2, .menu_triangle_3 {
	    width: 35px;
	}

	h2 {
	    font-size: 40px;
	}

	.text_wrapper.participate h3 {
	    font-size: 21px;
	    line-height: 1.3;
	}




}


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

	.text_wrapper {
	    max-width: 700px;
	}
	
	h2 {
    	font-size: 32px;
	}

	h3 {
	    font-size: 24px;
	}

	.text_wrapper.participate input.sign-up-btn {
	    font-size: 22px;
	    padding: 8px 60px;
	}


}

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

	.text_wrapper {
	    max-width: 650px;
	}

	h2 {
	    font-size: 28px;
	    margin-bottom: 10px;
	}


	.green_triangle {
	    width: 120px;
	    margin-left: -60px;
	}

	.mt_dewar h6 {
	 
	    font-size: 37px;
	}

	.mt_dewar hr {
	 
	    height: 1px;
	    margin: 3px 0;
	}

	.mt_dewar h6 {
	    width: 105px;
	}

	.mt_dewar p {
	    width: calc(100% - 130px);
	    font-size: 17px;
	    line-height: 1.2;
	}

	.text_wrapper.participate h3 {
	    font-size: 19px;
	    line-height: 1.1;
	}

	.text_wrapper.participate p {
	    margin: 0 0 5px 0;
	    font-size: 16px;
	    line-height: 1.2;
	}



	}


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

		#treespace_logo {
	    	position: absolute;
		}

		.section {
			min-height: 560px!important;
		}

		#popup-form {
		    width: 100%;
		    position: relative;
		    min-height: 750px!important;
		    padding-top: 50px;
		    z-index: 9998!important;
		}

		section#sign-up .container {
		    display: block!important;
		    overflow-y: scroll;
		    overflow-x: hidden;
		    min-height: 600px;
		}

		.text_wrapper.participate input.sign-up-btn {
	    font-size: 20px;
	    padding: 8px 50px;
		}


	}

	@media screen and (max-height: 550px) {

		#treespace_logo {
	    position: absolute;
		}

		.section {
			height: 560px!important;
		}


	}

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

		#treespace_logo {
	    width: 190px;
	}

	h1 {
	    font-size: 30px;
	}

		.text_wrapper {
	    max-width: 650px;
	    width:75%;
	    margin: 25px auto;
	}

	h3 {
    	font-size: 22px;
	}

	#purpose1 {
		background-position-x: 72%;
	}

	.mt_dewar h6 {
	    width: 100%;
	    display: block;
	    text-align: left;
	}

	.mt_dewar p {
	    font-size: 17px;
	    line-height: 1.2;
	    display: block;
	    width: 100%;
	    margin-bottom: 7px;
	}


	}