@import url(http://fonts.googleapis.com/css?family=Raleway|Pacifico);

body {
  margin-top: 7%;
  background: #1ca5c7;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxY2E1YzciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTY1NDdiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-radial-gradient(center, ellipse cover,  #1ca5c7 0%, #16547b 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1ca5c7), color-stop(100%,#16547b));
  background: -webkit-radial-gradient(center, ellipse cover,  #1ca5c7 0%,#16547b 100%);
  background: -o-radial-gradient(center, ellipse cover,  #1ca5c7 0%,#16547b 100%);
  background: -ms-radial-gradient(center, ellipse cover,  #1ca5c7 0%,#16547b 100%);
  background: radial-gradient(ellipse at center,  #1ca5c7 0%,#16547b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ca5c7', endColorstr='#16547b',GradientType=1 );
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Raleway;
  text-align: center;
  color: #fff;
}

a {
  color: #fff;
  font-family: Raleway;
  font-style: normal;
  text-decoration: none;
  font-size: 15px;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-family: Raleway;
  font-weight: normal;
  margin: 0;
}

#container {
  display: block;
  margin: 0 auto;
  text-align: center;
  -webkit-perspective: 2000px;
     -moz-perspective: 2000px;
      -ms-perspective: 2000px;
       -o-perspective: 2000px;
          perspective: 2000px;
}
  
  #information {
    margin-top: 1em;
    display: block;
    font-size: 15px;
  }
  
  #itemdescription {
    position: relative;
    width: 400px;
    margin: 0 auto;
    left: 6em;
    top: 2em;
    font-size: 50px;
    font-family: Pacifico;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.2);
  }
  
    #itemdescription span {
      display: none;
    }

  #itemlist {
    display: block;
    width: 400px;
    margin: 3em auto;
    position: relative;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }
  
  #itemlist img {
    position: absolute;
    cursor: pointer;
    left: 0;
    box-shadow: 0px 15px 50px rgba(0,0,0,0.4);
  }
  
    #itemlist img:hover {
      top: -5px;
    }
  
  #itemlist img.item-0 {
    z-index: 4;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  
  #itemlist img.item-1 {
    z-index: 3;
    left: -80px;
    -webkit-transform: scale(0.9);
       -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
            transform: scale(0.9);
  }
  
  #itemlist img.item-2 {
    z-index: 2;
    left: -160px;
    -webkit-transform: scale(0.8);
       -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
         -o-transform: scale(0.8);
            transform: scale(0.8);
  }
  
  #itemlist img.item-3 {
    z-index: 1;
    left: -240px;
    -webkit-transform: scale(0.7);
       -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
         -o-transform: scale(0.7);
            transform: scale(0.7);
  }
  
  .transition {
    -webkit-transition: 0.5s ease-out;
       -moz-transition: 0.5s ease-out;
        -ms-transition: 0.5s ease-out;
         -o-transition: 0.5s ease-out;
            transition: 0.5s ease-out;
  }
  
  .show {
    -webkit-animation: show 1s linear;
       -moz-animation: show 1s linear;
        -ms-animation: show 1s linear;
         -o-animation: show 1s linear;
            animation: show 1s linear;
  }
  		
@-webkit-keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    -webkit-transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    -webkit-transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    -webkit-transform: rotate3d(0,1,0,360deg);
  }
}
  		
@-moz-keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    -moz-transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    -moz-transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    -moz-transform: rotate3d(0,1,0,360deg);
  }
}
  		
@-ms-keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    -ms-transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    -ms-transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    -ms-transform: rotate3d(0,1,0,360deg);
  }
}
  		
@-o-keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    -o-transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    -o-transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    -o-transform: rotate3d(0,1,0,360deg);
  }
}
  		
@keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    transform: rotate3d(0,1,0,360deg);
  }
}