body
{
    overflow: hidden;
}

h1 {
    text-align: center;
    text-transform: uppercase;
    font-family: Roboto;
    font-size: 4em;
    color: #000000;
}

.back
{
  background: url(../images/back.jpg) no-repeat center center;
  background-size: cover;
  /*background-color: red !important;*/
}

.play
{
  background: url(../images/play.jpg) no-repeat center center;
  background-size: cover;
  /*background-color: blue !important;*/
}

.description
{
  background: url(../images/description.jpg) no-repeat center center;
  background-size: cover;
  /*background-color: green !important;*/
}

.panel
{
    width: 360px;
    height: 580px;
    text-align: center;
    color: white;
    font-size: 3em;
    overflow: hidden;
}


.panel a
{
    margin:0;
    width: 100%;
    height: 100%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-decoration: none;
    padding-top: 60%;
    color: white !important;
    display: block;
    font-weight: bold;
    overflow: hidden;
}

@-webkit-keyframes blinking {
  0% { opacity: 1;}
  50% { opacity: 0;}
  100% { opacity: 1;}
}

@-moz-keyframes blinking {
  0% { opacity: 1;}
  50% { opacity: 0;}
  100% { opacity: 1;}
}

@-o-keyframes blinking {
  0% { opacity: 1;}
  50% { opacity: 0;}
  100% { opacity: 1;}
}

@keyframes blinking {
  0% { opacity: 1;}
  50% { opacity: 0;}
  100% { opacity: 1;}
}

.panel a:hover
{
    text-decoration: none;
    background-color: rgba(211,211,211,0.4);
    overflow: hidden;
}

.panel a:hover p
{
    color: white;
    font-size: 1.1em;
    overflow: hidden;

   -webkit-animation: blinking 2000ms infinite;
   -moz-animation: blinking 2000ms infinite;
   -o-animation: blinking 2000ms infinite;
   animation: blinking 2000ms infinite;

}
