*{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body{
  background: #f8cb32 url('/img/welcome/bkg_page_welcome.jpg') repeat-x left top;
}

body#welcome img{
  position: absolute;
  top: 0; right: 0;
}
#welcome-moble-noanime{
  display: none;
}
.welcome_content{
  position: relative;
  background: url('/img/welcome/bkg_welcome.jpg') no-repeat center top;
  min-height: 850px;
}
.animation_container{
  position: relative;
}

.blocco_ricerca{
  position: absolute;
  left: 0;
  right: 0;
  top: 500px;
  padding-top: 0;
  height: 143px;
  z-index: 11;
}
.blocco_ricerca_1{
  padding-top: 30px;
}
.blocco_ricerca_2{
  padding-top: 38px;
}
#menu_lingue{
  position: relative;
  padding-top: 0;
  height: auto;
}
#menu_lingue ul li{
  width: auto;
  margin-right: 20px;
  position: relative;
}
#menu_lingue ul li:after{
  content: '-';
  position: absolute;
  right: -15px;
  top: 0;
  font-weight: bold;
}
#menu_lingue ul li:last-child:after{
  content: '';
}
#menu_lingue ul{
  height: auto;
}#menu_lingue ul:before, #menu_lingue ul:after{
  content: '';
  display: table;
  clear: both;
  float: none;
}

#preload_image{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  right: 0;
  margin: auto;
  top: 20%;
}
.piva{
  padding-top: 50px;
}

#animation-welcome{
  width: 100%;
  max-width: 1200px;
  min-height: 650px;
  position: relative;
  margin: 0 auto;
}

#animation_container,
#canvas,
#canvas_up{
  width: 100% !important;
  max-width: 1200px;
  height: auto !important;
  margin: auto;
}
#canvas_up{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}
.noise{
  display: none;
  border-radius: 50%;
  overflow:hidden;
  background-image: url('/img/welcome/noiseh-min.png');
  background-repeat: no-repeat;
  position: absolute;
  animation: playnoise 5s steps(13) infinite;
  z-index: 2;
}
.video{
  display: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow:hidden;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 5;
}
@keyframes playnoise {
  100% { background-position: -1573px; }
}
#video1{
  background-image: url('/img/welcome/video1-min.jpg');
  animation: playvdo1 5s steps(58) infinite;
}
@keyframes playvdo1 {
  100% { background-position: -7482px; }
}
#video2{
  background-image: url('/img/welcome/video2-min.jpg');
  animation: playvdo2 5s steps(68) infinite;
}
@keyframes playvdo2 {
  100% { background-position: -7752px; }
}
#video3{
  background-image: url('/img/welcome/video3-min.jpg');
  animation: playvdo3 5s steps(62) infinite;
}
@keyframes playvdo3 {
  100% { background-position: -8246px; }
}
#video4{
  background-image: url('/img/welcome/video4-min.png');
  animation: playvdo4 5s steps(63) infinite;
}
@keyframes playvdo4 {
  100% { background-position: -7938px; }
}
#video1,
.noise.v1{
  /*width: 119px;
  height: 119px;*/
  width: 10%;
  height: 18%;
  top: 46.8%;
  left: 24.7%;
}
#video2,
.noise.v2{
  /*width: 102px;
  height: 102px;*/
  width: 8.5%;
  height: 15.5%;
  top: 36.2%;
  left: 37.4%;
}
#video3,
.noise.v3{
  /*width: 126px;
  height: 126px;*/
  width: 10.5%;
  height: 19.4%;
  top: 41.5%;
  left: 48.7%;
}
#video4,
.noise.v4{
  /*width: 118px;
  height: 118px;*/
  width: 9.8%;
  height: 18%;
  top: 34%;
  right: 23.8%;
}
#animation_container{ background: none !important; position: relative; }

@media only screen and (max-width: 768px) {
  body#welcome img{
    position: relative;
  }
  #animation-welcome{
    min-height: auto;
  }
  #animation_container{ display: none; }
  #welcome-moble-noanime{ display: block; }
  #welcome-moble-noanime img{
    max-width: 100%;
    height: auto;
    display: block;
  }

  #video1,#video2,#video3,#video4,.noise{ animation: none; background-size: cover; }
  .blocco_ricerca{ position: inherit; height: auto; }
  .blocco_ricerca_2{ padding-top: 0; }
  #menu_lingue ul { height: auto; background: url('/img/pre/footer_middle.png') repeat-y top center; }

}
