/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */


@keyframes move-bobble {
    0% {top: -650px;}
    100% {top: 0px;}
}
@-webkit-keyframes move-bobble {
    0% {top: -650px;}
    100% {top: 0px;}
}
@-moz-keyframes move-bobble {
    0% {top: -650px;}
    100% {top: 0px;}
}
@-ms-keyframes move-bobble {
    0% {top: -650px;}
    100% {top: 0px;}
}


@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}



#block-block-39 {
  overflow: hidden;
  height: 500px;
}

.bobble {
  position: absolute;
  cursor: pointer;
}

.bobble_body_face {
  height: 470px;
  width: 339px;
  left: 30px;
  background:transparent url(images/body_face.png) no-repeat top center;
  z-index: 7;  
  -moz-animation:move-bobble 2s ease-out 1;
  -ms-animation:move-bobble 2s ease-out 1;
  -o-animation:move-bobble 2s ease-out 1;
  -webkit-animation:move-bobble 2s ease-out 1;
  animation:move-bobble 2s ease-out 1;
}

.bobble_packages {
  height: 612px;
  width: 402px;
  left: 310px;
  background:transparent url(images/christmas_package.png) no-repeat top center;
  z-index: 6;
  -moz-animation:move-bobble 3s ease-in-out 1;
  -ms-animation:move-bobble 3s ease-in-out 1;
  -o-animation:move-bobble 3s ease-in-out 1;
  -webkit-animation:move-bobble 3s ease-in-out 1;
  animation:move-bobble 3s ease-in-out 1;
}

.bobble_time_me {
  height: 579px;
  width: 297px;
  left: 675px;
  background:transparent url(images/time_me.png) no-repeat top center;
  z-index: 5;
  -moz-animation:move-bobble 2.5s ease-in-out 1;
  -ms-animation:move-bobble 2.5s ease-in-out 1;
  -o-animation:move-bobble 2.5s ease-in-out 1;
  -webkit-animation:move-bobble 2.5s ease-in-out 1;
  animation:move-bobble 2.5s ease-in-out 1;
}

.bobble_face {
  height: 505px;
  width: 332px;
  left: 925px;
  background:transparent url(images/christmas_face.png) no-repeat top center;
  z-index: 6;
  -moz-animation:move-bobble 3s ease-out 1;
  -ms-animation:move-bobble 3s ease-out 1;
  -o-animation:move-bobble 3s ease-out 1;
  -webkit-animation:move-bobble 3s ease-out 1;
  animation:move-bobble 3s ease-out 1;
}

.stars, .twinkling, .clouds, .graphics {
  position:absolute;
  width:1400px;
  height:500px;
  display:block;
}

.graphics {
  background: url(images/bg.png) no-repeat;
  z-index: 3;
}

.stars {
  background:#000 url(images/stars2.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(images/twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(images/clouds.png) repeat top center;
    z-index:4;

  -moz-animation:move-clouds-back 600s linear infinite;
  -ms-animation:move-clouds-back 600s linear infinite;
  -o-animation:move-clouds-back 600s linear infinite;
  -webkit-animation:move-clouds-back 600s linear infinite;
  animation:move-clouds-back 600s linear infinite;
}


#christmas_header_container {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position:absolute;
}

#christ_header_backup {
  display:none;
  visibility: hidden;
}

@media (max-width: 1200px) {
  .bobble_packages { 
    display: none;
  }
  
  .bobble_face {
    position: absolute;
    left: 300px;
  }
  
  .bobble_time_me {
    position: absolute;
    left: 600px;
  }
}

@media (max-width: 900px) {
  #christmas_header_container {
    display: none; 
    visibility: hidden;
  }
  #christ_header_backup {
    display: block;
    visibility: visible;
    width: 100%;
    height: auto;
  }
  
  #block-block-39 {
    position: static;
    height: auto;
  }
}