site.css

body {
  background:#1BBAEC;
  font:bold 18px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:#fff;
  margin:0; padding:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  }
ul { margin:0; padding:0; list-style:none; }
a {
  color:#8cdcf5;
  text-decoration:none;
  text-shadow:none;
  -webkit-transition:color 100ms linear;
     -moz-transition:color 100ms linear;
       -o-transition:color 100ms linear;
          transition:color 100ms linear;
  }
  a:hover {
    color:#fff;
    }

.fixed-700 {
  display:block;
  width:700px;
  margin:80px auto;
  }
.intro {
  display:block;
  padding:0 10px;
  margin:0 0 80px;
  font-size:27px;
  line-height:38px;
  color:#0e6681;
  text-shadow:0 1px 0 rgba(255,255,255,0.20);
  }

  .examples li {
    background:#10A1CF;
    text-align:center;
    display:inline-block;
    width:209px;
    height:20px;
    padding:30px 0 40px;
    margin:0 10px;
    position:relative;
    cursor:pointer;
    border-radius:10px;
    }

.popup {
  display:none;
  border:1px solid #ccc;
  background:#000;
  z-index:1000;
  position:absolute;
  left:50%;
  bottom:90px;
  width:170px;
  margin-left:-105px;
  border:none;
  padding:20px;
  font-size:22px;
  animation-duration:500ms;
  animation-fill-mode:both;
  box-shadow:0 4px 8px rgba(0,0,0,0.25);
  border-radius:4px;
  }
  .popup:after {
    top:100%;
    border:solid transparent;
    content:'';
    height:0;
    width:0;
    left:50%;
    position:absolute;
    pointer-events:none;
    border-top-color:#000;
    border-width:14px;
    margin-left:-14px;
    }

.on .popup {
  display:block;
  animation-name:fadeInUp;
  }
.off .popup {
  display:block;
  animation-name:fadeInUpOut;
  }

@keyframes fadeInUp {
	0%    { opacity:0; transform:translateY(20px); }
	100%  { opacity:1; transform:translateY(0); }
  }
@keyframes fadeInUpOut {
	0%    { opacity:1; }
	50%   { opacity:0.75; }
	100%  { opacity:0; }
  }