<section id="stark">
    <img class="nav-icon" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png">
    <div class="profile-card">
      <div class="photo"></div>
      <div class="text-info-outer">
        <div class="text-info-inner">
          <div class="follow-button"><h4>Follow</h4></div>
          <h3>King in da Norf</h3>
          <h1>Ned Stark</h1>
          <h2>Followers: 1022</h2>
          <h2>Following: 20</h2>
          <p>Eddard Stark was the head of House Stark and Lord Paramount of the North. The North is one of the constituent regions of the Seven Kingdoms, and House Stark is one of the Great Houses of the realm. House Stark rules the region from their seat of Winterfell, and Eddard also held the title Lord of Winterfell. In addition, he was the Warden of the North.</p>
          <img src="http://orig02.deviantart.net/2c26/f/2013/084/6/7/stark_sigil_by_sircinnamon-d5zb2nw.png">
        </div>
      </div>
    </div>
  </section>
  <section id="martell">
    <img class="nav-icon" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png">
    <div class="profile-card">
      <div class="photo"></div>
      <div class="text-info-outer">
        <div class="text-info-inner">
          <div class="follow-button"><h4>Follow</h4></div>
          <h3>The Red Viper of Dorne</h3>
          <h1>Oberyn Martell</h1>
          <h2>Followers: 3k</h2>
          <h2>Following: 5</h2>
          <p>Prince Oberyn was the younger brother of Prince Doran Martell and Princess Elia Martell; like most members of House Martell, he was styled "Prince" instead of "Lord". He was nicknamed "the Red Viper" for his knowledge of poisons and for his unusual, deadly style of combat. Oberyn was known for being an accomplished warrior, but he was just as infamous for his sexual appetite, which extends to both men and women; Tyrion Lannister tells Bronn that Oberyn is "famous for fucking half of Westeros". Oberyn's paramour was Ellaria Sand; she is his wife in all but name, and Doran once noted that Ellaria made Oberyn very happy.</p>
          <img src="http://students.philip.acheang.com/2012/Que/HW5-JS/martell.png">
        </div>
      </div>
    </div>
  </section>
 <section id="baratheon">
    <div class="profile-card">
      <div class="photo"></div>
      <div class="text-info-outer">
        <div class="text-info-inner">
          <div class="follow-button"><h4>Follow</h4></div>
          <h3>King of the Andals and the First Men</h3>
          <h1>Robert Baratheon</h1>
          <h2>Followers: 5.2k</h2>
          <h2>Following: 100</h2>
          <p>Robert was the first son of Steffon Baratheon and Cassana Baratheon, and has two younger brothers, Renly and Stannis. Steffon was the head of House Baratheon and Lord Paramount of the Stormlands. The Stormlands are one of the constituent regions of the Seven Kingdoms and House Baratheon is one of the Great Houses of the realm. His parents died in his youth when their ship was caught in a storm; Robert, standing on the walls of Storm's End with Stannis, witnessed his parents ship that was returning from Essos break up on the rocks. He inherited the lordship, and was fostered by Jon Arryn, the head of House Arryn, another Great House. </p>
          <img src="http://img06.deviantart.net/cabc/i/2013/114/2/a/house_baratheon_by_azraeuz-d62um9k.png">
        </div>
      </div>
    </div>
  </section>

h1,h2,h3,h4{
  font-family:'Montserrat', sans-serif;
}
p{
  font-family: 'Libre Baskerville', serif;
}

$stark-color: grey;
$martell-color: #80252a;

html,body{
  overflow:hidden;
}

.nav-icon{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  margin:auto;
  opacity:.5;
  width:70px;
  cursor:pointer;
}
section{
  width:100%;
  height:100%;
  overflow:visible;
  -webkit-transition: all 1500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
   -moz-transition: all 1500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
     -o-transition: all 1500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
        transition: all 1500ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
}

.animate-out{
  transform:translate(-100%);
}

.animate-out-again{
  transform:translate(-200%);
}

#stark{
  position:absolute;
  .photo{
      background-image: url('https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/08/10/11/nedstark.jpg');
  background-position:center;
  background-size:cover;
  }
  .follow-button{
    background-color:#7b906f;
  }
}

#baratheon{
  position:absolute;
  left:100%;
  .photo{
    background-image: url('https://i.stack.imgur.com/uwi3K.jpg');
    background-position:center;
    background-size:cover;
  }
  .follow-button{
    background-color:#eeb42e;
    color:black;
  }
  h2,h3{
    color:#eeb42e;
  }
  h2{
    font-size:1em;
  }
  .text-info-inner{
    img{
      width:40%;
    }
  }
}

#martell{
  position:absolute;
  left:100%;
  .photo{
    background-image: url('https://img0.etsystatic.com/052/0/7689632/il_fullxfull.667950014_m563.jpg');
    background-position:center;
    background-size:cover;
  }
  .follow-button{
    background-color:#80252a;
  }
   h1{
    font-size:2em;
  }
  h3{
    color:#80252a;
  }
  h2{
    color:#80252a;
    
  }
  .text-info-inner{
    img{
      opacity:.15;
      width:70%;
      top:initial;
    }
  }
}

.profile-card{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  border-radius:20px;
  width:80%;
  max-width:1500px;
  height:90%;
  background-color:white;
  -webkit-box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
  -moz-box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
    box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
}

.photo{
  display:inline-block;
  float:left;
  width:40%;
  height:100%;
  border-radius: 20px 0 0 20px;
}

.text-info-outer{
  display:inline-block;
  width:60%;
  height:100%;
  float:left;
}

.text-info-inner{
  position:relative;
  height:100%;
  padding:30px;
  h1{
    margin:0 0 20px 0;
    text-transform:uppercase;
    font-size:3em;
  }
  h3{
    color:grey;
    text-transform:uppercase;
    text-size:1em;
    letter-spacing:.1em;
    margin:0;
  }
  h2{
    display:inline-block;
    text-transform:uppercase;
    font-size:.8em;
    padding-right:40px;
    color:grey;
  }
  p{
    line-height:2em;
    margin-top:40px;
  }
  img{
    position: absolute;
    opacity: .08;
    max-width: 80%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
  }
  .follow-button{
    position:absolute;
    top:40px;
    right:40px;
    border-radius:10px;
    padding: 5px 40px;
    color:white;
    cursor:pointer;
    h4{
      text-transform:uppercase;
      letter-spacing:.1em;
    }
    
  }
}

$("#stark .nav-icon").click(function(){  
  $("#stark").addClass("animate-out");
  $("#martell").addClass("animate-out");
});

$("#martell .nav-icon").click(function(){  
  $("#martell").addClass("animate-out-again");
  $("#baratheon").addClass("animate-out");
});