body,
body article,
body article div,
body header,
body main,
body>* {
  display: inline-flex
}

body main,
body>* {
  width: 100%
}

article i,
article span {
  cursor: pointer
}

body article,
body main,
header form {
  align-content: center
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline
}

:focus,
a:active,
a:hover {
  outline: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

body {
  line-height: 1;
  flex-direction: column;
  width: 100vw;
  font-family: 'Open Sans';
  font-weight: 100
}

article span,
h1,
p a,
p strong {
  font-family: BebasNeue
}

ul {
  display: inline-flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%


}

li {
  margin: 0 .5vh .5vh 0;
  font-family: BebasNeue;
  font-size: 1.5rem;
  background: #666;
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
}

ol,
ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: '';
  content: none
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none
}

input[type=search] {
  -moz-appearance: none;
  -webkit-appearance: textfield;
  box-sizing: content-box
}

audio,
canvas,
video {
  display: inline-block;
  max-width: 100%
}

.fa-backward,
[hidden],
main .info {
  display: none
}

audio:not([controls]) {
  display: none;
  height: 0
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}

a:focus {
  outline: dotted thin
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle
}

fieldset,
figure,
form {
  margin: 0
}

legend {
  white-space: normal
}

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline
}

button,
input {
  line-height: normal
}

button,
select {
  text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}

button[disabled],
html input[disabled] {
  cursor: default
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

button,
html,
input,
select,
textarea {
  color: #666
}

::-moz-selection {
  background: #8f867a;
  text-shadow: none
}

::selection {
  background: #8f867a;
  text-shadow: none
}

.chromeframe {
  margin: .2em 0;
  background: #ccc;
  color: #000;
  padding: .2em 0
}

h1,
p {
  margin-bottom: 2vh
}

@font-face {
  font-family: BebasNeue;
  src: url(../webfonts/BebasNeue.otf)
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url(../webfonts/open-sans-v17-latin-300italic.eot);
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(../webfonts/open-sans-v17-latin-300italic.eot?#iefix) format('embedded-opentype'), url(../webfonts/open-sans-v17-latin-300italic.woff2) format('woff2'), url(../webfonts/open-sans-v17-latin-300italic.woff) format('woff'), url(../webfonts/open-sans-v17-latin-300italic.ttf) format('truetype'), url(../webfonts/open-sans-v17-latin-300italic.svg#OpenSans) format('svg')
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(../webfonts/open-sans-v17-latin-regular.eot);
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../webfonts/open-sans-v17-latin-regular.eot?#iefix) format('embedded-opentype'), url(../webfonts/open-sans-v17-latin-regular.woff2) format('woff2'), url(../webfonts/open-sans-v17-latin-regular.woff) format('woff'), url(../webfonts/open-sans-v17-latin-regular.ttf) format('truetype'), url(../webfonts/open-sans-v17-latin-regular.svg#OpenSans) format('svg')
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url(../webfonts/open-sans-v17-latin-700.eot);
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../webfonts/open-sans-v17-latin-700.eot?#iefix) format('embedded-opentype'), url(../webfonts/open-sans-v17-latin-700.woff2) format('woff2'), url(../webfonts/open-sans-v17-latin-700.woff) format('woff'), url(../webfonts/open-sans-v17-latin-700.ttf) format('truetype'), url(../webfonts/open-sans-v17-latin-700.svg#OpenSans) format('svg')
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url(../webfonts/open-sans-v17-latin-700italic.eot);
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(../webfonts/open-sans-v17-latin-700italic.eot?#iefix) format('embedded-opentype'), url(../webfonts/open-sans-v17-latin-700italic.woff2) format('woff2'), url(../webfonts/open-sans-v17-latin-700italic.woff) format('woff'), url(../webfonts/open-sans-v17-latin-700italic.ttf) format('truetype'), url(../webfonts/open-sans-v17-latin-700italic.svg#OpenSans) format('svg')
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url(../webfonts/open-sans-v17-latin-300.eot);
  src: local('Open Sans Light'), local('OpenSans-Light'), url(../webfonts/open-sans-v17-latin-300.eot?#iefix) format('embedded-opentype'), url(../webfonts/open-sans-v17-latin-300.woff2) format('woff2'), url(../webfonts/open-sans-v17-latin-300.woff) format('woff'), url(../webfonts/open-sans-v17-latin-300.ttf) format('truetype'), url(../webfonts/open-sans-v17-latin-300.svg#OpenSans) format('svg')
}

body footer,
body header {
  background: #fff
}

article.active,
body article,
body article:hover,
body main {
  background: #DCDC48
}

body header {
  height: 400px;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

body header img {
  align-self: center;
  height: 80px;
  width: auto
}

body footer {
  height: 100px
}

body main {
  color: #fff;
  text-align: center;
  box-shadow: inset 0 0 33px 8px rgba(0, 0, 0, .29);
  align-items: center;
  padding: 5vh 0;
  flex-grow: 1;
  justify-content: space-around;
  flex-wrap: wrap;
  align-self: center;
  min-height: calc(100vh - 600px);
  height: auto;
  flex-direction: row
}

article span {
  color: rgba(102, 102, 102, .5);
  transition: all .2s
}

article.active span,
article:hover span {
  color: rgba(102, 102, 102, 1)
}

article.active,
h1,
p {
  color: #666
}

h1 {
  font-size: 2rem
}

p {
  line-height: 140%
}

p a,
p strong {
  font-size: 1.5rem
}

body article {
  border-radius: 50px;
  box-shadow: 20px 20px 60px #bbbb3d, -20px -20px 60px #fdfd53;
  width: 200px;
  height: 200px;
  margin: 2vw;
  justify-content: center;
  align-items: center;
  transition: all .2s;
  padding: 10px;
  overflow: hidden;
  font-size: 2rem;
  position: relative;
  text-transform: uppercase
}

body article:nth-child(1) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) both
}

body article:nth-child(2) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .1s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .1s both
}

body article:nth-child(3) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .2s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .2s both
}

body article:nth-child(4) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .3s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .3s both
}

body article:nth-child(5) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .4s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .4s both
}

body article:nth-child(6) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .5s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .5s both
}

body article:nth-child(7) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .6s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .6s both
}

body article:nth-child(8) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .7s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .7s both
}

body article:nth-child(9) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .8s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .8s both
}

body article:nth-child(10) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .9s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) .9s both
}

body article:nth-child(11) {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) 1s both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) 1s both
}

body article div,
main .info {
  justify-content: space-between
}

ul {
  margin: 0 0 2vh 0
}

body article div {
  width: 40%;
  position: absolute;
  bottom: -80px;
  transition: all .1s;
  flex-direction: row;
  padding: 0 30% 20px
}

a {
  color: inherit;
  text-decoration: none
}

main .info {
  width: calc(100% - 200px - 4vw - 20vw);
  flex-direction: column;
  flex-wrap: nowrap;
  text-align: left;
  -webkit-animation: slide-in-elliptic-top-fwd .7s cubic-bezier(.25, .46, .45, .94) both;
  animation: slide-in-elliptic-top-fwd .7s cubic-bezier(.25, .46, .45, .94) both
}

article.active {
  border-radius: 50px;
  box-shadow: inset 20px 20px 60px #bbbb3d, inset -20px -20px 60px #fdfd53;
  overflow: visible
}

article.active .fa-backward {
  display: block
}

article.active .fa-info {
  display: none
}

body article:hover {
  border-radius: 50px;
  box-shadow: 20px 20px 30px #bbbb3d, -20px -20px 40px #fdfd53
}

body article:hover div {
  bottom: 0
}

article.active:hover {
  border-radius: 50px;
  background: #DCDC48;
  box-shadow: inset 20px 20px 60px #bbbb3d, inset -20px -20px 60px #fdfd53
}

article.active:hover div {
  bottom: -80px
}

header form {
  width: 80%;
  margin: 5vh 0 2vh;
  text-align: center;
  display: inline-flex;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  height: 20%
}

header form input[type=text] {
  width: 50%;
  padding: 5px;
  color: #666
}

input[type=submit] {
  border-radius: 4px;
  background: #fff;
  box-shadow: -3px -3px 8px #d6d6d6, 3px 3px 8px #fff;
  border: none;
  width: 40%;
  height: 30px;
  display: none
}

.scale-in-center {
  -webkit-animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) both;
  animation: scale-in-center .5s cubic-bezier(.25, .46, .45, .94) both
}

@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0
  }

  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1
  }
}

@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0
  }

  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1
  }
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

@media screen and (min-width:200px) and (max-width:500px) {
  body main {
    flex-direction: column;
    height: auto;
    padding: 50px 0
  }

  body header {
    height: 190px
  }

  header form {
    margin: 2vh 0
  }

  header form input[type=text] {
    width: 90%
  }

  main article {
    margin: 5vh
  }

  body article div {
    bottom: -80px
  }

  main .info {
    width: 80%;
    margin-top: 100px;
    text-align: center
  }
}