#main-header {
  background: #f0f0f0;
  background-image: url(background_halloween.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/*BATS*/
#halloween-bat1, #halloween-bat2, #halloween-bat3{
  height: 200px;
  background-color: blue;
  position: absolute;
  left: 0;
  top: 0;
}

/*1*/
#halloween-bat1{
  width: 70px;
  background:  url(bat1.svg) left top no-repeat;
  left: 45px;
}
#halloween-bat1{
  animation: animation_bat1 5.5s infinite;
}
@keyframes animation_bat1 {
  0%   {top: -40px;}
  35%  {top: -90px;}
  70%  {top: -64px;}
  85% {top: -52px;}
  100% {top: -40px;}
}
@media (max-width: 1180px) {
  #halloween-bat1 {display: none;}
}

/*2*/
#halloween-bat2{
  width: 65px;
  background:  url(bat2.svg) left top no-repeat;
  left: 145px;
}
#halloween-bat2{
  animation: animation_bat2 5s infinite;
}
@keyframes animation_bat2 {
  0%   {top: -10px;}
  50%  {top: -50px;}
  100% {top: -10px;}
}
@media (max-width: 1360px) {
  #halloween-bat2 {display: none;}
}

/*3*/
#halloween-bat3{
  width: 50px;
  background:  url(bat3.svg) left top no-repeat;
  left: 260px
}
#halloween-bat3{
  animation: animation_bat3 6.5s infinite;
}
@keyframes animation_bat3 {
  0%   {top: -10px;}
  50%  {top: -86px;}
  68%  {top: -68px}
  100% {top: -10px;}
}
@media (max-width: 1580px) {
  #halloween-bat3 {display: none;}
}


/*PUMPKINS*/

#halloween-pumpkin1, #halloween-pumpkin2, #halloween-pumpkin3{
  height: 200px;
  /*background-color: blue;*/
  position: absolute;
  left: 0;
  top: 0;
}

/*1*/
#halloween-pumpkin1{
  width: 76px;
  background:  url(pumpkin1.svg) left top no-repeat;
  left: 5px;
}
#halloween-pumpkin1{
  animation: animation_pumpkin1 4.5s infinite;
}
@keyframes animation_pumpkin1 {
  0%   {top: -5px}
  15%  {top: -20px}
  45%  {top: 0px}
  75%  {top: -12px}
  100% {top: -5px}
}
@media (max-width: 1090px) {
  #halloween-pumpkin1{display: none;}
}

/*2*/
#halloween-pumpkin2{
  width: 60px;
  background:  url(pumpkin2.svg) left top no-repeat;
  left: 95px;
}
#halloween-pumpkin2{
  animation: animation_pumpkin2 3.5s infinite;
}
@keyframes animation_pumpkin2 {
  0%    {top: -15px}
  50%   {top: -50px}
  100%  {top: -15px}
}
@media (max-width: 1255px) {
  #halloween-pumpkin2 {display: none;}
}

/*3*/
#halloween-pumpkin3{
  width: 76px;
  background:  url(pumpkin3.svg) left top no-repeat;
  left: 195px
}
#halloween-pumpkin3{
  animation: animation_pumpkin3 6.5s infinite;
}
@keyframes animation_pumpkin3 {
  0%   {top: -6px}
  25%  {top: -60px}
  50%  {top: 0px}
  75%  {top: -20px}
  100% {top: -6px}
}
@media (max-width: 1480px) {
  #halloween-pumpkin3 {display: none;}
}


/*CASTLE*/
#halloween-castle{
  height: 100px;
  width: 200px;
  background-image: url('spooky_castle.svg');
  background-position: right;
  background-repeat: no-repeat;
  position: absolute;
  right: 140px;
  top:-3px;
}

/*MOON*/
#halloween-moon{
  width: 100px;
  height: 100px;
  background-image: url('moon.svg');
  position: absolute;
  right: 30px;
  top: -10px;
}

/*HILL*/

#halloween-hill, #halloween-big_hill{
  background-repeat: no-repeat;
  position: absolute;
  right: -20px;
  top: 2px;
}
#halloween-hill{
  width: 300px;
  height: 95px;
  background-image: url('hill_&_tree.svg');
}
#halloween-big_hill{
  width: 450px;
  height: 125px;
  background-image: url('hill_left.svg');
  top: -28px;
  right: 20px;
}


/*WITCH*/
#halloween-witch{
  width: 50px;
  height: 50px;
  background-image: url('witch.svg');
  position: absolute;
  right: 50px;
}
#halloween-witch{
  animation: animation_witch 7s infinite;
}
@keyframes animation_witch {
  0% {
    top: 5px;
    transform: rotate(-5deg);
  }
  15%{transform: rotate(10deg);}
  30%{transform: rotate(-10deg);}
  45%{
    top: 20px;
    transform: rotate(10deg);
  }
  60%{
    transform: rotate(-5deg);
  }
  75%{
    transform: rotate(5deg);
  }
  100%{
    top: 5px;
    transform: rotate(-5deg);
  }
}

/*RIGHT SIDE RESPONSIVITY*/
@media (max-width:1515px) {
  #halloween-hill{
    display: none;
  }
  #halloween-big_hill{
    background-image: url('hill_left_plain.svg');
    top: 40px;
    right: -130px;
  }
  #halloween-castle{
    right: 0;
  }
  #halloween-moon{
    right: 100px;
  }
  #halloween-witch{
    right: 120px;
  }
}
@media (max-width:1355px) {
  #halloween-castle{
    right: -50px;
  }
  #halloween-big_hill{
    right: -180px;
  }
  #halloween-moon{
    right: 60px;
  }
  #halloween-witch{
    right: 85px;
  }
}
@media (max-width:1270px) {
  #halloween-castle{
    display: none;
  }
  #halloween-big_hill{
    display: none;
  }
  #halloween-moon{
    right: -10px;
  }
  #halloween-witch{
    right: 15px;
  }

}
@media (max-width:1125px) {
  #halloween-moon{
    top: 20px;
  }
  #halloween-witch{
    animation: animation_witch_down 7s infinite;
  }

  @keyframes animation_witch_down {
    0% {
      top: 30px;
      transform: rotate(-5deg);
    }
    15%{transform: rotate(10deg);}
    30%{transform: rotate(-10deg);}
    45%{
      top: 45px;
      transform: rotate(10deg);
    }
    60%{
      transform: scale(1);
      transform: rotate(-5deg);
    }
    75%{
      transform: rotate(5deg);
    }
    100%{
      top: 30px;
      transform: rotate(-5deg);
    }
  }
}
@media (max-width:990px) {
  #halloween-moon,
  #halloween-witch,
  #halloween-bat1,
  #halloween-bat2,
  #halloween-bat3,
  #halloween-pumpkin1,
  #halloween-pumpkin2,
  #halloween-pumpkin3{
    display: block;
  }
  #halloween-moon{
    right: 15px;
    top: -5px;
  }
  #halloween-witch{
    right: 40px;
    top: 0px;
    animation: animation_witch 7s infinite;
  }
  #halloween-witch{
    right: 40px;
    top: 15px;
  }
}

/*SMALL SIZES RESPONSIVITY*/
@media (max-width:895px){
  #halloween-bat3{
    display: none;
  }
}
@media (max-width:840px){
  #halloween-pumpkin3{
    display: none;
  }
}
@media (max-width:730px){
  #halloween-bat2{
    display: none;
  }
}
@media (max-width:615px){
  #halloween-pumpkin2{
    display: none;
  }
}
@media (max-width:535px){
  #halloween-bat1{
    display: none;
  }
}
@media (max-width:480px){
  #halloween-moon{
    right: -12px;
  }
  #halloween-witch{
    right: 6px;
  }
}
@media (max-width:455px){
  #halloween-pumpkin1{
    display: none;
  }
}
@media (max-width:420px){
  #halloween-moon,
  #halloween-witch{
    display: none !important;
  }
}