<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- 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>
<script>
(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);
</script>
@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;
}
.divider--vertical:nth-of-type(1) {
left: 25%;
width: 2px;
top: 0;
height: 100%;
}
.divider--vertical:nth-of-type(2) {
left: 50%;
width: 2px;
top: 0;
height: 100%;
}
.divider--vertical:nth-of-type(3) {
left: 75%;
width: 2px;
top: 0;
height: 100%;
}
.divider--horizzontal:nth-of-type(4) {
top: 33vh;
width: 100%;
height: 2px;
}
.divider--horizzontal:nth-of-type(5) {
top: 66vh;
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 {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.text-slice:nth-of-type(3) .text-main-inner {
-webkit-transform: translateX(-200%);
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) {
.text-main-wrapper {
font-size: 80px;
line-height: 85px;
}
}
.text-label-container {
position: absolute;
display: inline-block;
overflow: hidden;
width: 0px;
height: 35px;
left: -10px;
top: 100px;
-webkit-transition: all 1s 0s;
transition: all 1s 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;
}
.text-label:before {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-top: 0px solid transparent;
border-bottom: 5px solid transparent;
-webkit-transform: rotate(-71deg);
transform: rotate(-71deg);
-webkit-transform-origin: top left;
transform-origin: top left;
left: 0;
top: 25px;
z-index: -1;
-webkit-transition: all 0.4s 0s;
transition: all 0.4s 0s;
}
.text--active .text-label-container {
width: 200px;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.text--active .text-label:before {
border-top: 25px solid transparent;
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s;
}
.text-container--0 .text-label {
background: #169216;
}
.text-container--0 .text-label:before {
border-left: 13px solid #093909;
}
.text-container--1 .text-label {
background: #C9567D;
}
.text-container--1 .text-label:before {
border-left: 13px solid #8c2d4d;
}
.text-container--2 .text-label {
background: #24c7c0;
}
.text-container--2 .text-label:before {
border-left: 13px solid #14716d;
}
.text-container--3 .text-label {
background: #6593d6;
}
.text-container--3 .text-label:before {
border-left: 13px solid #2d5fa8;
}
.text-container--4 .text-label {
background: #1fbeca;
}
.text-container--4 .text-label:before {
border-left: 13px solid #116b72;
}
.slider-container {
position: relative;
overflow: hidden;
}
.slider-container:after {
content: "";
display: table;
clear: both;
}
.slider-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #0a0a0a;
opacity: 0.2;
}
.slider-slice {
position: relative;
width: 25%;
height: 33.33vh;
float: left;
overflow: hidden;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.slider-slice img {
position: relative;
}
.slider-slice-imageContainer {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
.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;
-webkit-transform: translateZ(0);
transform: translateZ(0);
border: solid 2px white;
opacity: 0.5;
-webkit-transition: all 0.2s;
transition: all 0.2s;
background: rgba(120, 160, 170, 0.4);
cursor: pointer;
}
.cta svg {
z-index: 101;
position: absolute;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: .3;
}
.cta:hover {
opacity: 1;
}
.cta:hover svg {
opacity: 1;
}
.cta--next {
right: 20px;
top: 50%;
}
.cta--next:hover svg {
-webkit-transform: translateX(4%);
transform: translateX(4%);
}
.cta--prev {
left: 20px;
top: 50%;
}
.cta--prev:hover svg {
-webkit-transform: translateX(-4%);
transform: translateX(-4%);
}
.cta--down {
bottom: 20px;
left: 50%;
margin-left: -25px;
}
.cta--down:hover svg {
-webkit-transform: translateY(4%);
transform: translateY(4%);
}
.page-container {
position: relative;
max-width: 700px;
width: 90%;
margin: 150px auto 0 auto;
}
