body {
    background: #fcd91d;
    background: -moz-radial-gradient(center, #fcd91d 0%, #FCD91D 47%, #303F44 100%);
    background: -webkit-radial-gradient(center, #fcd91d 0%, #FCD91D 47%, #303F44 100%);
    background: radial-gradient(ellipse at center, #fcd91d 0%, #FCD91D 47%, #303F44 100%);
}

#wrapper {
    width: 50vw;
    height: 30vh;
    display: block;
    position: relative;
    left: 50%;
    top: 9vh;
    transform: translate(-50%);
    overflow: hidden;
}

#intro {
    width: 95%;
    height: 100%;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    top: 1%;
    text-align: center;
}

#logo {
    max-width:80%;
    max-height:50%;
    position: relative;
    display: inline-block;
    top: 10px;
    transform: translate(0% -50%);
}

#main {
    width: 95%;
    height: 85%;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    top: 1%;
}

#posts {
    width: 95%;
    height: 95%;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    top: 1%;
    text-align: center;
}

article {
    width: 45%;
    height: 95%;
    margin: 0 auto;
    top: 1%;
    position: relative;
    display: inline-block;
}

article header h2 {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 3vh;
}

a.image img {
    max-width:80%;
    max-height:80%;
    position: relative;
    display: inline-block;
    border: 5px solid transparent;
    border-radius: 20% 20% 20% 20%;
}

article {
    text-align: center;
	margin: 0 0 5vh 0;
}

article p {
    display: block;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 2vh;
}

article button {
	width: 70%;
}


article button.image {
    max-width:80%;
    max-height:80%;
    position: relative;
    display: inline-block;
    border: 5px solid transparent;
    border-radius: 20% 20% 20% 20%;
	background-color: #303F44;
}

article button h2 {
	margin: 10% 0 10% 0;
	padding: 0 10% 0 10%;
	font-size: 4vh;
	color: #FFFFFF;
}

article button h2:hover {
	color: #FCD91D;
	text-decoration: underline;
}

article button h2 a {
	color: #FFFFFF;
}

article button h2 a:hover {
	color: #FCD91D;
}


/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.25);
}

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}