cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- WATCH IT FULLSCREEN PLZ -->

<div class="divider divider--vertical"></div>
	<div class="divider divider--vertical"></div>
	<div class="divider divider--vertical"></div>
	<div class="divider divider--horizzontal"></div>
	<div class="divider divider--horizzontal"></div>
	<div class="hero-container">
		<div class="cta cta--prev">
			<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M30.55 39.69c.567-.475.645-1.314.17-1.882L20.044 25 30.72 12.19c.474-.566.396-1.408-.17-1.88-.564-.474-1.407-.397-1.88.17L17.28 24.145c-.208.248-.312.552-.312.855s.104.608.31.855L28.67 39.52c.474.566 1.316.642 1.882.17z"/></svg></svg>
		</div>
		<div class="cta cta--next">			
			<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M19.45 10.31c-.567.475-.644 1.314-.17 1.88L29.956 25 19.28 37.81c-.473.566-.396 1.408.17 1.88s1.408.397 1.88-.17l11.39-13.664c.208-.248.312-.552.312-.855s-.104-.607-.31-.854L21.33 10.48c-.474-.566-1.316-.643-1.882-.17z"/></svg>
		</div>
		<div class="cta cta--down">
			<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M40.69 19.87c-.475-.568-1.313-.645-1.88-.172L26 30.374 13.19 19.697c-.565-.472-1.408-.395-1.88.17-.474.567-.397 1.41.17 1.882l13.665 11.386c.248.207.552.312.854.312.303 0 .607-.104.854-.312L40.52 21.75c.567-.474.644-1.315.17-1.88z"/></svg>
		</div>
		<div class="text-wrapper">
			<div data-slide="0" class="text-container text-container--0 text--active">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Life is a <br> wild adventure</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Life is a <br> wild adventure</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Life is a <br> wild adventure</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">be wild</div>
				</div>
			</div>
			<div data-slide="1" class="text-container text-container--1">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">I wanna be <br> young forever</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">I wanna be <br> young forever</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">I wanna be <br> young forever</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">teenager</div>
				</div>
			</div>
			<div data-slide="2" class="text-container text-container--2">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Breathtaking <br> landscapes</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Breathtaking <br> landscapes</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Breathtaking <br> landscapes</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">panorama</div>
				</div>
			</div>
			<div data-slide="3" class="text-container text-container--3">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the power <br> of nature</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the power <br> of nature</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the power <br> of nature</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">power</div>
				</div>
			</div>
			<div data-slide="4" class="text-container text-container--4">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the sense <br> of freedom</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the sense <br> of freedom</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the sense <br> of freedom</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">infinity</div>
				</div>
			</div>
		</div>
		<div class="slider-container">
			<div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
			</div>
			<div class="slider-overlay"></div>
		</div>
	</div> <!-- CLOSE HEADER-->
	<section class="page-container">
		<article data-article="0">
			<h1>Life is a <br> wild adventure</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
		<article data-article="1">
			<h1>I wanna be <br> young forever</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
		<article data-article="2">
			<h1>Breathtaking <br> landscapes</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
		<article data-article="3">
			<h1>Feel the power <br> of nature</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
		<article data-article="4">
			<h1>Feel the sense <br> of freedom</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
	</section>
            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=Biryani:400,900';
body{
	margin: 0;
	padding: 0;
	color: #424242;
	font-family: 'Georgia', serif;
	font-size: 21px;
	line-height: 34px;
}
body.u-blockScroll{
	height: 100%;
	overflow: hidden;
}
h1{
	font-family: 'Biryani', sans-serif;
	text-align: center;
	font-size: 80px;
	line-height: 73px;
	text-align: left;
    font-weight: 700;
    opacity: 1;
    margin-bottom: 30px;
}
h3{
	font-family: 'Biryani', sans-serif;
	opacity: 0.4;
	font-weight: 400;
	margin-top: 40px;
	margin-bottom: 5px;
	font-size: 32px;
}
p{
	margin-top: 0;
	margin-bottom: 29px;
}
.hero-container{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 100;
}
.divider{
	position: fixed;
	display: inline-block;
	background: rgba(130, 130, 130, 0.12);
	z-index: 200;
}
@for $i from 1 to 4{
	.divider--vertical:nth-of-type(#{$i}){
		left: #{25% * $i};
		width: 2px;
		top: 0;
		height: 100%;
	}
}
@for $k from 1 to 3{
	.divider--horizzontal:nth-of-type(#{$k + 3}){
		top: #{33vh * $k};
		width: 100%;
		height: 2px;
	}
}
.text-container{
	position: absolute;
}
.text-wrapper{
	position: absolute;
	z-index: 10;	
	left: 10%;
	bottom: 40%;
	font-family: 'Biryani', sans-serif;
	color:white;
}
.text-slice{
	width: 33.33%;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    padding: 20px 0px;
}
.text-slice:nth-of-type(2) .text-main-inner{
	transform: translateX(-100%);
}
.text-slice:nth-of-type(3) .text-main-inner{
	transform: translateX(-200%);
}
.text-main-wrapper{
	padding-top: 40px;
	font-size: 120px;
	line-height: 110px;
	font-weight: 900;
	text-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	@media screen and (max-width: 1000px){
		font-size: 80px;
		line-height: 85px;
	}
}
$durationLabelContainer: 1s;
$durationLabelTriangle: 0.4s;
$delayLabelContainer: 1s;
$delayLabelTriangle: 1.2s;
.text-label-container{
	position: absolute;
    display: inline-block;
    overflow: hidden;
    width: 0px;
    height: 35px;
    left: -10px;
    top: 100px;
    transition: all $durationLabelContainer 0s;
}
.text-label{
	display: inline-block;
	position: absolute;
	height: 25px;
	padding: 0px 10px;
	line-height: 28px;
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 5px;
	text-transform: uppercase;	
	font-weight: 900;
	&:before{
		content:"";
		position: absolute;
		width: 0px;
		height: 0px;
		border-top: 0px solid transparent;
		border-bottom: 5px solid transparent;
		transform: rotate(-71deg);
		transform-origin: top left;
		left: 0;
		top: 25px;
		z-index: -1;
		transition: all $durationLabelTriangle 0s;
	}
}
.text--active .text-label-container{
	width: 200px;
	transition-delay: $delayLabelContainer;
}
.text--active .text-label:before{
	border-top: 25px solid transparent;
	transition-delay: $delayLabelTriangle;

}
.text-container--0 .text-label{
	background: #169216;
	&:before{
		border-left: 13px solid darken(#169216, 20);
	}
}
.text-container--1 .text-label{
	background: #C9567D;
	&:before{
		border-left: 13px solid darken(#C9567D, 20);
	}
}
.text-container--2 .text-label{
	background: #24c7c0;
	&:before{
		border-left: 13px solid darken(#24c7c0, 20);
	}
}
.text-container--3 .text-label{
	background: #6593d6;
	&:before{
		border-left: 13px solid darken(#6593d6, 20);
	}
}
.text-container--4 .text-label{
	background: #1fbeca;
	&:before{
		border-left: 13px solid darken(#1fbeca, 20);
	}
}
.slider-container{
	position: relative;
	overflow: hidden;
	&:after{
		content: "";
		display: table;
		clear: both;
	}
}
.slider-overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgb(10,10,10);
	opacity: 0.2;
}
.slider-slice{
	position: relative;
	width: 25%;
	height: 33.33vh;
	float: left;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	img{
		position: relative;
	}
}
.slider-slice-imageContainer{
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
}
.slider-slice-imageContainer.image--active{
}
.slider-slice:nth-of-type(1) img{  
  top:0;
  left:0;
}
.slider-slice:nth-of-type(2) img{  
  top:0;
  left:-25vw;
}
.slider-slice:nth-of-type(3) img{  
  top:0;
  left:-50vw;
}
.slider-slice:nth-of-type(4) img{  
  top:0;
  left:-75vw;
}
.slider-slice:nth-of-type(5) img{  
  top:-33.33vh;
  left:0;
}
.slider-slice:nth-of-type(6) img{  
  top:-33.33vh;
  left:-25vw;
}
.slider-slice:nth-of-type(7) img{  
  top:-33.33vh;
  left:-50vw;
}
.slider-slice:nth-of-type(8) img{  
  top:-33.33vh;
  left:-75vw;
}
.slider-slice:nth-of-type(9) img{  
  top:-66.66vh;
  left:0;
}
.slider-slice:nth-of-type(10) img{  
  top:-66.66vh;
  left:-25vw;
}
.slider-slice:nth-of-type(11) img{  
  top:-66.66vh;
  left:-50vw;
}
.slider-slice:nth-of-type(12) img{  
  top:-66.66vh;
  left:-75vw;
}

.cta{
	position: fixed;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	z-index: 100;
	overflow: hidden;
	transform: translateZ(0);
	border: solid 2px white;
	opacity: 0.5;
	transition: all 0.2s;
	background: rgba(120,160,170,0.4);
	cursor: pointer;
	svg{
		z-index: 101;
		position: absolute;
		transition: all 0.2s ease-in-out;
		opacity: .3;
	}
	&:hover{
		opacity: 1;
	}
	&:hover svg{
		opacity: 1;
	}
}
.cta--next{
	right: 20px;
	top: 50%;
	&:hover svg{
		transform: translateX(4%);
	}
}
.cta--prev{
	left: 20px;
	top: 50%;	
	&:hover svg{
		transform: translateX(-4%);
	}
}
.cta--down{
	bottom: 20px;
	left: 50%;
	margin-left: -25px;
	&:hover svg{
		transform: translateY(4%);
	}
}
.page-container{
	position: relative;
	max-width: 700px;
	width: 90%;
	margin: 150px auto 0 auto;
}
            
          
!
            
              (function($){
	var image 				= $(".slider-slice img"),
		imageContainer 		= $(".slider-slice-imageContainer"),
		sliderSlice 		= $(".slider-slice"),
		imageActive 		= $(".image--active"),
		textActive 			= $(".text--active .text-main-wrapper"),
		textSlice			= textActive.find(".text-main-wrapper"),
		labelContainer		= $(".text-label-container"),
		sliderOverlay		= $(".slider-overlay"),
		CTA 				= $(".cta"),
		articleTitle		= $("article h1"),
		articlePara 		= $("article p"),
		articleSubTitle		= $("article h3"),
		activeLabel 		= $(".text--active .text-label"),
		vw,
		vh,
		delay 				= 0.06,
		delays 				= [];

	TweenMax.set(imageContainer, {xPercent: "100"});
	TweenMax.set(imageActive, {xPercent: "0"});
	TweenMax.set($(".text-container:not(.text--active) .text-main-wrapper"), {xPercent: 100});
	TweenMax.set(articleTitle, {autoAlpha:0, display:'none'});
	TweenMax.set(articlePara, {autoAlpha:0, display:'none'});
	TweenMax.set(articleSubTitle, {autoAlpha:0, display:'none'});

	$("body").addClass("u-blockScroll");



	for (var i = 0; i < 4; i++) {
		delays.push(i*delay);
	};

	/********************************
		FIT THE WINDOWS WITH THE IMAGES
	********************************/
	function positionImages(){
		vw 		= $(window).width();
		vh 		= $(window).height();
		var imageW 	= image.width();
		var imageH 	= image.height();
		ratioImg 	= imageW / imageH;
		ratioW 		= vw / vh;
		if(ratioImg > ratioW){
			image.css({"width": "auto", "height" : vh});
		}else{
			image.css({"width": vw, "height" : "auto"});
		}
	}
	positionImages();
	$(window).on("resize", positionImages);




	/********************************
		OPENING
	********************************/
	var tlOpening = new TimelineMax({delay: 2});
	var delayOpening = 0.05;
	tlOpening
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(0)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 1 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(1)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 2 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(2)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 3 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(3)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 4 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(4)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 2 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(5)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 3 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(6)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 5 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(7)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 5 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(8)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 3 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(9)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 4 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(10)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 5 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(11)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 6 * delayOpening)
		.staggerFromTo(($(".text-container.text--active .text-main-wrapper")), 1, {xPercent: -100}, {xPercent: 0, ease: Power2.easeInOut}, 0.2, "-=1")
		.fromTo(activeLabel, 1, {autoAlpha:0}, {autoAlpha: 1})
		.fromTo(CTA, 0.6, {autoAlpha:0}, {autoAlpha:1});


	/********************************
		SLIDE BACKGROUND & TEXT SLIDE
	********************************/
	var	durationSlide 	= 0.8;
	var	durationText 	= 0.8;
	var isMoving 		= false;
	function slideBackground(fromRight){
		isMoving = true;
		var tlSlideBackground 	= new TimelineMax({onComplete: function(){ isMoving = false}});
		var tlSlideText 		= new TimelineMax();
		imageActive 			= $(".image--active");

		if(fromRight === true){
			var from = 105;
			var to = -100;
		}else{
			var from = -105;
			var to = 100;
		}
		var k = 0;

		imageActive.each(function(i,el){
			var parent = $(el).closest(".slider-slice");
			if(fromRight === true){
				var nextSlice = $(el).next();				
			}else{
				var nextSlice = $(el).prev();	
			}
			if (nextSlice.is(':last-child') || nextSlice.is(':first-child')) {
				parent.find(".slider-slice-imageContainer").eq(0).appendTo(parent);
			}
			if(nextSlice.index() == -1){
				parent.find(".slider-slice-imageContainer").eq(0).appendTo(parent);
				var nextSlice = $(el).prev();
			}
			tlSlideBackground
				.to(el, (durationSlide * 1.1), {xPercent: to, ease: Power2.easeInOut}, delays[k])
				.fromTo(nextSlice, durationSlide, {xPercent: from}, {xPercent:0, ease: Power2.easeInOut}, delays[k])
			$(el).removeClass("image--active");
			nextSlice.addClass("image--active");
			k++;
			if(k==4){
				k=0;
			}
		});

		// SLIDE TEXT
		k= 0;
		textActive.each(function(i, el){
			var parent = $(el).closest(".text-container");
			if(fromRight === true){
				var nextText = parent.next().find(".text-main-wrapper");
			}else{
				var nextText = parent.prev().find(".text-main-wrapper");	
			}
			if (nextText.closest(".text-container").is(':last-child') || nextText.closest(".text-container").is(':first-child')) {
				console.log("yo, ultimi");
				$(".text-wrapper .text-container:first-child").appendTo(parent.closest(".text-wrapper"));
			}
			if(nextText.index() == -1){
				parent.eq(0).appendTo(parent.closest(".text-wrapper"));
				var nextText = parent.prev().find(".text-main-wrapper");
			}
			tlSlideText
				.to(el, durationText, {xPercent: to, ease: Power2.easeInOut}, (delays[k])*1.2)
				.fromTo(nextText, durationText, {xPercent: from}, {xPercent:0, ease: Power2.easeInOut}, (delays[k])*1.2)
			parent.removeClass("text--active");
			nextText.closest(".text-container").addClass("text--active");
			k++;
			if(k==4){
				k=0;
			}
			console.log(parent.first());

		});
		imageActive = $(".image--active");
		textActive = $(".text--active .text-main-wrapper");

	}

	/********************************
		CTA ACTIONS
	********************************/
	$(".cta--next").click(function(){
		var fromRight = true;
		if(!(isMoving)){
			slideBackground(fromRight);			
		}
	});
	$(".cta--prev").click(function(){
		var fromRight = false;
		if(!(isMoving)){
			slideBackground(fromRight);			
		}
	});
	$(".cta--down").click(function(){
		activeLabel		= $(".text--active .text-label");
		activeSlide 	= $(".text--active").attr("data-slide");
		var article 			= $("[data-article="+ activeSlide + "]article");
		var articleTitle		= $("[data-article="+ activeSlide + "]article h1");
		var articlePara 		= $("[data-article="+ activeSlide + "]article p");
		var articleSubTitle		= $("[data-article="+ activeSlide + "]article h3");

		var tlSlideUp 		= new TimelineMax(),
			tlSlideTextUp 	= new TimelineMax(),
			tlArticleShow 	= new TimelineMax(),
			tlMainSlideUp	= new TimelineMax({ onComplete: function(){TweenMax.set($(".hero-container"), {autoAlpha:0}) }});

		tlArticleShow
				.fromTo(articleTitle, 2, {y:50, autoAlpha:0},{y:0,autoAlpha:1, ease:Power4.easeOut, display:'block'}, "sliderOut-=0.5")
		article.children(":not(h1)").each(function(i,el){	
			tlArticleShow		
				.fromTo(el, 2.2, {y:20, autoAlpha:0},{y:0,autoAlpha:1, ease:Power4.easeOut, display:'block'}, ((i * 0.2)+0.6))
		});

		imageActive.each(function(i,el){
			k = 0;
			tlSlideUp
				.to(el, 0.8, {yPercent: -101, ease: Power2.easeInOut}, delays[k])
			k++;
			if(k==4){
				k=0;
			}
		});
		textActive.each(function(i, el){
			tlSlideTextUp
				.to(el, 0.8, {yPercent: -110, ease: Power2.easeInOut}, delays[k])
		});
		tlMainSlideUp
			.to(CTA, 0.2, {autoAlpha: 0})
			.add(tlSlideUp)
			.add(tlSlideTextUp, '0.2')
			.to(activeLabel, 0.8, {top: -40, ease: Power2.easeInOut}, "-=0.8")
			.to(sliderOverlay, 0.2, {autoAlpha: 0, onComplete: function(){ $("body").removeClass("u-blockScroll")}}, "-=0.5")
			.add("sliderOut")
			.add(tlArticleShow);
		tlMainSlideUp.play();

		


	});
})(jQuery);
            
          
!
999px
Loading ..................

Console