@font-face {
    font-family: 'uber_move_textmedium';
    src: url('../fonts/ubermovetext-medium-webfont.eot');
    src: url('../fonts/ubermovetext-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ubermovetext-medium-webfont.woff2') format('woff2'),
         url('../fonts/ubermovetext-medium-webfont.woff') format('woff'),
         url('../fonts/ubermovetext-medium-webfont.ttf') format('truetype'),
         url('../fonts/ubermovetext-medium-webfont.svg#uber_move_textmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
html{
    height: 100%;
}
body, html{
    padding:0;
    margin:0;
    height: 100%;
}
body{
    font-family:"uber_move_textmedium";
    background:url("../images/hulu-bg.png") repeat-x top center;
    background-size:contain;
    padding:0 15px;
}
h1, h2, h3, p{
    margin:0;
    padding:0;
}
a{
    text-decoration:none;
}
img{
    max-width:100%;
    height:auto;
    vertical-align:top;
}
*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.header{
    padding:20px 0 35px;
    display:inline-block;
    width:100%;
    background:url("../images/partition_Line.png") no-repeat bottom center;
    background-size:contain;
    margin-bottom:5px;
    height:145px;
}
.header h2{
    width:140px;
    float:left;
}
.header h1{
    float:right;
    width:80px;
    text-align:right;
}
.description{
    font-size:16px;
    color:#fff;
    margin-bottom:8px;
    height:42px;
}
.animatedimages{
    text-align:center;
    padding:5px 0 0;
    margin: 0 auto;
    height:calc(100% - 240px);
}
.item{
    height: 20%;
    padding-top: 5px;
    text-align:center;
}
.item a{
    display:inline-block;
    width:100%;
    height:100%;
}
@-webkit-keyframes animateCell {
    from {
      opacity: 0;
      -webkit-transform: scale(0.3);
      transform: scale(0.3);
      filter: hue-rotate(180deg);
    }
    to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      filter: hue-rotate(0deg);
    }
}
@keyframes animateCell {
    from {
      opacity: 0;
      transform: scale(0.3);
      filter: hue-rotate(180deg);
    }
    to {
      opacity: 1;
      transform: scale(1);
      filter: hue-rotate(0deg);
    }
}
.item img{
    margin:0 auto;
    height:100%;
    -webkit-animation: animateCell 600ms ease-out;
    animation: animateCell 600ms ease-out;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}
.item:nth-child(1) img {
    -webkit-animation-delay: calc(1 * 0.1s);
    animation-delay: calc(1 * 0.1s);
}
.item:nth-child(2) img {
    -webkit-animation-delay: calc(2 * 0.1s);
    animation-delay: calc(2 * 0.1s);
}
.item:nth-child(3) img {
    -webkit-animation-delay: calc(3 * 0.1s);
    animation-delay: calc(3 * 0.1s);
}
.item:nth-child(4) img {
    -webkit-animation-delay: calc(4 * 0.1s);
    animation-delay: calc(4 * 0.1s);
}
.item:nth-child(5) img {
    -webkit-animation-delay: calc(5 * 0.1s);
    animation-delay: calc(5 * 0.1s);
}

@media screen and (min-width:768px){
    .header{
        padding-bottom:80px;
        margin-bottom:10px;
        height:auto;
    }
    .header h2{
        width:20%;
    }
    .header h1{
        width:10%;
    }
    .description {
        font-size:24px;
        margin-bottom:15px;
        height:auto;
    }
    .animatedimages{
        height:calc(100vh - 290px);
    }
    
}

@media screen and (max-width:350px){
    .header{
        padding:15px 0 25px;
        margin-bottom:5px;
        height:auto;
    }    
    .description{
        font-size: 10px;
        margin-bottom: 5px;
        height:auto;
    }
    .animatedimages{
        height:calc(100vh - 140px);
    }
    .header h1{
        width:50px;
    }
    .header h2{
        width:90px;
    }
}