@import url(https://fonts.googleapis.com/css?family=VT323);

@font-face {
    font-family: 'pixel';
    src: url('pixelated.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: translate3d(0, 0, 0);
  font-family: litterbox;
      font-family: 'pixel';
  font-weight: 400; }

html, body {
  position: fixed;
    overscroll-behavior: none;

  /*cursor: url(images/cursor/cerotto.png) 20 0, auto !important; */
}
a{text-decoration: none;}
html, body, .site, .main-content, .container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #fff !important; }

* {
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: translate3d(0, 0, 0);
  font-family: pixel !important;
  font-weight: 400; }

footer#bottomfooter {
  display: none !important; }

body {
  background-color: #000;
  margin: 0;
  padding: 0; }

#background, #background2 {
  position: absolute;
  z-index: 0;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  /*background-size: 100% auto !important;*/
  background-position: 50% 0% !important;
  background-repeat: repeat-y;
  background-color: #17a2d7;
  background-image: url(images/game/cover_bkg.gif); 
  background-image: url(images/game/specchi/fondo2.jpg); 
  background-size: contain; 
  background-repeat: repeat;
}

#background2 {
  opacity: 0; }

#gameview {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed; }


.logo {
    position: fixed;
    z-index: 1000;
    margin: 0;
    padding: 0;
    display: block;
    max-width: 500px;
    margin-top: 20px;
    transform: translateX(-50%);
    left: 50%;
    opacity: 0
  }

  .logo-intro {
    position: fixed;
    z-index: 1000;
    margin: 0;
    padding: 0;
    display: block;
    max-width: 500px;
    margin-top: 20px;
    transform: translateX(-50%);
    left: 50%;
    width: 300px;
    m
    margin-top: 45vh;
  }

  @media screen and (max-width: 768px){
    .logo{
      max-width: 250px;
    }
    
    .logo-intro {
    margin-top: 49vh;
    }

  }

#points {
position: fixed;
    width: 100%;
    bottom: 0px;
    margin-bottom: 0;
    z-index: 5;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 20px;
  }
  #points div.riga {
    float: left;
    box-sizing: border-box;
    padding: 0px 0;
    text-align: center; }
    #points div.riga#punti {
     /* width: 35%; */
    }
      @media screen and (max-width: 768px) {
        #points {
          height: 42px;
          padding: 0;
        }
        #points div.riga#punti {
          text-align: left;
          padding-left: 5px; } }
    #points div.riga#vite {
      /*width: 20%; */}
    #points div.riga#help {
     /* width: 45%;*/ }
      #points div.riga#help img {
        display: inline-block;
        height: 26px;
        margin-left: 16px;
        position: relative;
        top: -2px; }
        @media screen and (max-width: 768px) {
          #points div.riga#help img {
            display: none; } }
      @media screen and (max-width: 768px) {
        #points div.riga#help {
          text-align: right;
          padding-right: 5px; } }
    #points div.riga label, #points div.riga span {
      text-transform: uppercase;
      color: #fff;
      font-size: 24px;
      display: inline-block; }
      @media screen and (max-width: 1024px) {
        #points div.riga label, #points div.riga span {
          font-size: 18px; } }
      @media screen and (max-width: 768px) {
        #points div.riga label, #points div.riga span {
          font-size: 11px; } }

#popup, #cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  background-color: #fff;
  background-size: cover;
  background-size: 100% auto;
  background-position: 50% 0%;
  background-image: url(images/game/bkg.gif);
  z-index: 10;
  display: none; }
  #popup.lost, #cover.lost {
    background-image: url(images/game/lose.gif);
    background-size: cover;
    background-position: 50% 50%; }
  #popup .table, #cover .table {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    vertical-align: middle; }
    #popup .table .cell, #cover .table .cell {
      position: relative;
      display: table-cell;
      width: 100%;
      height: 100%;
      vertical-align: middle; }
      #popup .table .cell .wrapper, #cover .table .cell .wrapper {
        position: relative;
        width: 100%;
        margin: auto;
        text-align: center;
        box-sizing: border-box;
        padding: 100px 0; }
        #popup .table .cell .wrapper a, #cover .table .cell .wrapper a {
          display: inline-block;
          color: red;
          font-size: 40px;
          padding: 5px 30px;
          line-height: 50px;
          /*animation-name: onoff;
          animation-duration: 2s;
          animation-iteration-count: infinite;
          animation-timing-function: linear; */
          z-index: 1000;
        }

@keyframes onoff {
  50% {
    opacity: 0; }
  60% {
    opacity: 0; } }
#cover {
  display: block;
  background-image: url(images/game/cover_bkg.gif); 

  background-image: url(images/game/specchi/fondo2.jpg); 
  background-size: contain;
  background-repeat: repeat;
}
  #cover a.new {
    display: block;
    position: absolute;
    color: red;
    text-align: center;
    box-sizing: border-box;
    padding: 5px 20px;
    font-family: pixel !important;
    line-height: 30px;
    /*animation-name: onoff;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;*/
    left: 0%;
    right: 0;
    margin: auto;
    font-size: 3vh;
    top: 65vh;
    color: #000000;
    text-decoration: auto;
    /*background: #fff;
    max-width: max-content;*/
    }
    #cover a.new img {
      width: 120px;
    }
    @media screen and (max-width: 736px) {
      #cover a.new {
        top: 75vh; }
        #cover a.new.mobile {
          font-size: 4vh;
          top: 52vh !important; } }
  #cover #cover_help {
    position: absolute;
    bottom: 45px;
    text-align: right;
    font-size: 3vh;
    pointer-events: none;
    padding: 20px;
    box-sizing: border-box;
    color: #000;
    line-height: 30px;
    font-family: 'VT323', monospace !important;
    box-sizing: border-box;
    text-align: right;
    width: 70vh;
    margin-left: -75vh;
    left: 50%;
    left: 0;
    width: calc(50vw - 6vh);
    margin-left: 0;
    text-align: center;
    font-size: 2.0vw; 
    left: 50%;
    transform: translateX(-50%);
    }
    #cover #cover_help img {
      height: 2.0vh; }
    @media screen and (max-width: 736px) {
      #cover #cover_help {
        display: none; } }
  #cover #cover_impostazioni {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(50vw - 6vh);
    padding: 20px;
    box-sizing: border-box;
    margin-left: 0;
    text-align: center;
    font-size: 2.0vw;
    line-height: 30px;
    font-family: 'VT323', monospace !important;
    color: #fff;
    display: none; }
    #cover #cover_impostazioni span, #cover #cover_impostazioni a {
      color: inherit;
      font-family: 'VT323', monospace !important;
      line-height: inherit;
      margin: 0 .6vw; }
    #cover #cover_impostazioni img {
      height: 2vh; }
    @media screen and (max-width: 736px) {
      #cover #cover_impostazioni {
        bottom: auto;
        right: auto;
        top: 0;
        margin-top: 26px;
        left: 0;
        margin-left: 20px;
        padding: 0px;
        font-size: 5.0vw;
        line-height: 30px;
        text-align: left; }
        #cover #cover_impostazioni span, #cover #cover_impostazioni a {
          color: inherit;
          font-family: 'VT323', monospace !important;
          line-height: inherit;
          margin: 0 .6vw; }
        #cover #cover_impostazioni img {
          height: 2vh; }
        #cover #cover_impostazioni span {
          display: none; } }
  #cover img#cover_player {
    position: absolute;
    display: block;
    height: 56vh;
    bottom: 0%;
    left: 0%;
    right: 0;
    margin: auto; }
    @media screen and (max-width: 736px) {
      #cover img#cover_player {
        height: 50vh; } }

  #cover img#cover_title {
    position: absolute;
    display: block;
    height: 21vh;
    left: 0%;
    right: 0;
    margin: auto;
    margin-top: 110px;
    animation: mycover 1s linear 0s infinite;

    margin-top: 5vh;
     
        height: auto;
        max-width: 350px;

  }

#cover_title{
position: absolute;
    display: block;
    width: max-content;
    top: 15%;
    left: 50%;
    transform: translate(-50%, 50%);
    font-size: 4vw;
    text-align: center;
   /*color: #feff66;*/
    
        -webkit-text-fill-color: red;
    -webkit-text-stroke-color: #fff;
    -webkit-text-stroke-width: 2px;
}
#cover_title div{
       font-family: pixel!important;
       animation: mycover 1s linear 0s infinite;

  }

@media screen and (max-width: 736px) {
 
  #cover_title{
    font-size: 15vw;
    top: 12vh;
  }

}




@keyframes mycover {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }
@keyframes mymove {
  from {
    top: -10vh; }
  to {
    top: 100vh; } }
  #cover img.idiot {
    position: absolute;
    display: block;
    width: 20vw;
    width: 100px;
    margin-left: 2vw;
    transform: scale(0.8); }
    @media screen and (max-width: 736px) {
      #cover img.idiot {
        /*transform: scale(1.6); } */
      }}
  #cover img.idiot0 {
    top: -20vh;
    left: 0%;
    animation: mymove 6s linear .0s infinite; }
  #cover img.idiot1 {
    top: -20vh;
    left: 10%;
    animation: mymove 5s linear 1s infinite; }
    @media screen and (max-width: 736px) {
      #cover img.idiot1 {
        /*display: none; */
        } }
  #cover img.idiot2 {
    top: -20vh;
    left: 20%;
    animation: mymove 7s linear .3s infinite; }
  #cover img.idiot3 {
    top: -20vh;
    left: 30%;
    animation: mymove 3s linear 1.2s infinite; }
    @media screen and (max-width: 736px) {
      #cover img.idiot3 {
        /*display: none;*/
         } }
  #cover img.idiot4 {
    top: -20vh;
    left: 40%;
    animation: mymove 4s linear .8s infinite; }
  #cover img.idiot5 {
    top: -20vh;
    left: 50%;
    animation: mymove 6s linear 1.6s infinite; }
    @media screen and (max-width: 736px) {
      #cover img.idiot5 {
        /*display: none; */
        } }
  #cover img.idiot6 {
    top: -20vh;
    left: 60%;
    animation: mymove 4s linear 1.2s infinite; }
  #cover img.idiot7 {
    top: -20vh;
    left: 70%;
    animation: mymove 5s linear 1s infinite; }
    @media screen and (max-width: 736px) {
      #cover img.idiot7 {
        /*display: none;*/ 
        } }
  #cover img.idiot8 {
    top: -20vh;
    left: 80%;
    animation: mymove 8s linear 2s infinite; }
  #cover img.idiot9 {
    top: -20vh;
    left: 90%;
    animation: mymove 4s linear .4s infinite; }
    @media screen and (max-width: 736px) {
      #cover img.idiot9 {
        /*display: none;*/ 
        } }

#rotate {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #a8dbf1;
  background-image: url(images/game/rotate_screen_icon.gif);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  z-index: 1000;
  background-size: auto 50%;
  display: none; }
  @media screen and (max-width: 736px) and (orientation: landscape) {
    #rotate {
      display: block; } }

#soundonoff {
  position: fixed;
  width: 40px;
  height: 40px;
  top: 0;
  margin: 40px;
  left: 0;
  background-image: url(images/game/soundonoff.png);
  background-size: 40px auto;
  background-position: 0 0;
  z-index: 100;
  cursor: pointer;
  display: none; }
  @media screen and (max-width: 736px) {
    #soundonoff {
      margin: 20px; } }
  #soundonoff.off {
    background-position: 0 100%; }

/*# sourceMappingURL=game.css.map */


.seletti {
    position: absolute;
    width: 60%;
    max-width: 300px;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 50%);
    filter: invert(100%);
    text-align: center;
}


.asino{
position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}


.intro-loghi {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  flex-direction: column;
  z-index: 100;
  position: relative;
}
.intro-loghi img {
  max-width: 90%;
  padding: 3vh;
}

img.pixel-intro {
  width: 350px;
         animation: mycover 1s linear 0s infinite;

}
img.seletti-intro{
  width: 230px;
  padding-bottom: 0; 
}
img.bruno-intro {
  width: 230px;
}
img.play-intro {
  width: 120px;
}




#buy-now div{
    padding: 10px 20px;
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    position: fixed;
    z-index: 100;
    bottom: 10px;
    transform: translateX(-50%);
    left: 50%;
    font-size: 20px;
    letter-spacing: 3px;
        line-height: normal;
}
#buy-now {
    position: fixed;
    z-index: 1000;
    width: 100%;
    animation: move 2s ease-in-out infinite;
    bottom: 20px;
}



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

  #buy-now div{
      bottom: 100px;
  }

}

@keyframes move {        
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-30px);
            }

            100% {
                transform: translateY(0);
            }
}






.buynow{
     bottom: 0;
    z-index: 1000;
    position: fixed;
    width: 100%;
}

div.string {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 0;
    background-color: #000;
}

div.string div.striscia-wrapper {
    width: 100000px;
    overflow: hidden;
    position: relative;
    left: 0;
    top: 0;
    transform: translateX(0px)
}

div.string div.striscia-wrapper div.wrap {
    float: left;
    overflow: hidden
}

div.string div.striscia-wrapper div.wrap span {
    display: block;
    float: left;
    color: #fff;
    margin-left: 25px;
    font-size: 20px;
    line-height: 30px;
    padding: 5px 0;
    letter-spacing: 2px;
}

div.string div.striscia-wrapper div.wrap span a {
    color: #000;
    font-size: inherit
}