@media screen and (max-width: 768px) {

  .penguin  {
    display: none
  }
  .ice {
    display: none
  }
  .penguin {
    display: none
  }
  .dfltNotFoundErrMsg {
    padding-left: 30px;
  }

}

#err {
  padding-top: 30px;
  position: absolute;
  right: 0px;
  left: 0px;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    50%  {left:200px; top:200px;}
    75%  {left:0px; top:200px;}
    100% {left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {right:10px; top:0px;}
    25%  {right:10px; top:8px;}
    50%  {right:10px; top:10px;}
    75%  {right:10px; top:2px;}
    100% {right:10px; top:0px;}
}
@keyframes pinguinAni {
    0%   {right:10px; top:0px; transform: rotate(0deg);}
    25%  {right:10px; top:8px; transform: rotate(2deg);}
    50%  {right:10px; top:10px; transform: rotate(2deg);}
    75%  {right:10px; top:2px;}
    100% {right:10px; top:0px; transform: rotate(0deg);}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes waveani {
    0%   {background-size: 100% 100%; background-position-x: 0px;}
    50%  {background-size: 100% 50%; background-position-x: 20px;}
    100% {background-size: 100% 100%; background-position-x: 0px;}
}

/* Standard syntax */
@keyframes waveani {
  0%   {background-size: 100% 100%; background-position-x: 0px;}
  50%  {background-size: 100% 50%; background-position-x: 20px;}
  100% {background-size: 100% 100%; background-position-x: 0px;}
}

@-webkit-keyframes waveani2 {
  0%   {background-size: 100% 40%; background-position-x: 0px; padding-top: 10px;}
  50%  {background-size: 100% 80%; background-position-x: -10px; padding-top: 20px;}
  100% {background-size: 100% 10%; background-position-x: 0px; padding-top: 10px;}
}

/* Standard syntax */
@keyframes waveani2 {
  0%   {background-size: 100% 40%; background-position-x: 0px; padding-top: 10px;}
  50%  {background-size: 100% 80%; background-position-x: -10px; padding-top: 20px;}
  100% {background-size: 100% 10%; background-position-x: 0px; padding-top: 10px;}
}

@keyframes example3 {
  0%   {transform: rotate(0deg); -ms-transform: rotate(10); -webkit-transform: rotate(0deg);}
  50%  {transform: rotate(10deg); -ms-transform: rotate(5); -webkit-transform: rotate(5);}
  100% {transform: rotate(0deg); -ms-transform: rotate(10); -webkit-transform: rotate(0);}
   /* IE 9 */
   /* Safari 3-8 */
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example3 {
  0%   {transform: rotate(0deg); -ms-transform: rotate(0); -webkit-transform: rotate(0);}
  50%  {transform: rotate(10deg); -ms-transform: rotate(5); -webkit-transform: rotate(5);}
  100% {transform: rotate(0deg); -ms-transform: rotate(0); -webkit-transform: rotate(0);}
}

.bg-mountain {
  background-image: url("./../images/404/bg_mountains.png");
  background-repeat: repeat-x;
  height: 90px;
  width: 100%;
}

.bg-sea {
  background-image: url("./../images/404/bg_sea.png");
  background-repeat: repeat-x;
  height: 160px;
  width: 100%;
  position: absolute;
  margin-top: 20px;
}

.wave {
  background-image: url("./../images/404/wave_top.png");
  background-repeat: repeat-x;
  height: 20px;
  width: 100%;
  -webkit-animation-name: waveani; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 6s infinite; /* Safari 4.0 - 8.0 */
  animation-name: waveani;
  animation-duration: 6s;
  animation-iteration-count:infinite;
  background-position: bottom 0px right 0px;
  background-size: 100% 100%;
  position: absolute;
}

.aphro {
  background-image: url("./../images/404/aphro.png");
  background-repeat: repeat-x;
  width: 100%;
  -webkit-animation-name: waveani2; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 6s infinite; /* Safari 4.0 - 8.0 */
  animation-name: waveani2;
  animation-duration: 6s;
  animation-iteration-count:infinite;
  background-position: bottom 7px right 0px;
  background-size: auto 100%;
  position: absolute;
}


.ice {
  background-image: url("./../images/404/ice.png");
  background-repeat: no-repeat;
  margin-right: 115px;
  height: 248px;
  width: 284px;
  position: absolute;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 8s infinite; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 8s;
  animation-iteration-count:infinite;
  margin-top: 55px;
}

.penguin {
  background-image: url("./../images/404/penguin.png");
  background-repeat: no-repeat;
  height: 248px;
  width: 195px;
  position: absolute;
  -webkit-animation-name: pinguinAni; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 8s infinite; /* Safari 4.0 - 8.0 */
  animation-name: pinguinAni;
  animation-duration: 8s;
  animation-iteration-count:infinite;
  margin-top: 15px;
  margin-right: 85px;
}

.numErr {
  background-image: url("./../images/404/404.png");
  background-repeat: no-repeat;
  height: 79px;
  width: 181px;
  position: absolute;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 8s infinite; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 8s;
  animation-iteration-count:infinite;
  margin-top: 0px;
  left: 145px;
  margin-top: 83px;
}

.dfltNotFoundErrMsg {
  position: absolute;
  color: #669900;
  padding-top: 30px;
  padding-left: 150px;
}

#err {
  padding-top: 50px;
}
.searchSuggest {
  padding-top: 340px;
}