html{
  min-height:100%;
  height:100%;  
}
body {
	color: #fff;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	font-size: 13px;
	min-height: 100%;
	height: 100%;
	position: fixed;
	overflow-y:scroll;
	overflow: hidden;
  -webkit-overflow-scrolling: touch; /* iOS velocity scrolling */
  font-family: 'Concert One', cursive;
}
body.noScroll { /* ...or body.dialogShowing */
  overflow: hidden;
}
#app-container {
  position:absolute;
  overflow:hidden;
  top:0;   left:0;
  bottom:0; right:0;
}

@keyframes animatedBackground {
  from {
    background-position: 5000% 0;
  }
  to {
    background-position: 0% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url("../img/bg_cloud.jpg");
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 100s linear infinite;
}
#animate-area-home {
  /* width: 200px;
  height: 200px; */
  background-image: url("../img/bg_home.jpg");
  background-position: center center;
  background-repeat: repeat-x;
  animation: animatedBackground 100s linear infinite;
}



#fs {
  position:absolute;
  overflow:hidden;
  top:0;   left:0;
  bottom:0; right:0;
}
#info {
	position: absolute;
	top: 0px; width: 100%;
	padding: 5px;
	text-align: center;
	z-index: 1;
}
#info_background{
	position: relative;
    width: 300px;
    height: 145px;
    background-color:
    #222;
    border-radius: 5px !important;
    left: 50%;
    margin-left: -150px;
    top: -125px;
    z-index: 10;
    opacity: 0.8;
}
#info_txt{
	position:relative;
	z-index: 15;
	top:5px;
}

a {
	color: #0080ff;
	text-decoration: none;
}
a:hover {
	color: #f00;
}
#footer { 
	width: 100%; 
	margin: 2em auto; 
	text-align: center; 
	position: absolute; 
	bottom: -145px;
	z-index: 99999999999999;
}
strong { color: yellow}

#footer_background{
	position: relative;
	width:300px;
	height:150px;
	background-color: #222;
	border-radius: 5px !important;
	left: 50%;
	margin-left: -150px;
	top: -15px;
	z-index: 10;
	opacity: 0.8;
}
#footer_txt{
	position: relative;
	z-index: 15;
	top: 15px;
}

#slide-out{
	z-index: 5550;
}

#testo_txt.is-left {
    right: 55%;
}

#testo_txt {
    position: absolute;
    width: 50%;
    max-width: 480px;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    text-align: left;
    z-index: 200;  
}

@keyframes image_blur {
    0% { -webkit-filter: blur(30px);}
    50% { -webkit-filter: blur(5px);}
    100% { -webkit-filter: blur(2px);}
}

@keyframes color_change {
  0%   {color: rgb(217, 65, 255);}
  25%  {color: rgb(255, 251, 7);}
  50%  {color: rgb(0, 204, 255);}
  100% {color: rgb(0, 235, 0);}
}


@keyframes color_change_bg {
  0%   {background-color: rgb(217, 65, 255);}
  50%  {background-color: rgb(255, 251, 7);}
  100%  {background-color: rgb(0, 204, 255);}
}

@keyframes color_change2 {
  0%  {color: rgb(0, 129, 161);} 
  50%   {color: rgb(217, 65, 255);}
  100%  {color: rgb(0, 129, 161);} 
}

@keyframes color_change3 {
  0%  {color: rgb(241, 237, 0);} 
  50%   {color: rgb(255, 255, 255);}
  100%  {color: rgb(241, 237, 0);} 
}
.bg_preload{
  animation-name: color_change_bg;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.messaggio{
  animation-name: color_change2;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.messaggio2{
  animation-name: color_change3;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#messaggio{
  animation-name: color_change;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.soft_intro{
    animation: image_blur 1s; 
    visibility: visible;
}

#tr{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 200;
}
#tl{
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 200;
}
#br{
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 200;
}
#mr{
  position: fixed;
	bottom: 40px;
	left: 100%;
	z-index: 200;
	/* position: absolute;
	top: 45%;
	right: 0px;
  margin-top: -155px;
	z-index: 200; */
}
#bl{
	position: fixed;
	bottom: 13px;
    left: 5px;
    z-index: 200;
}
#cc{
  position: absolute;
  top:50%;
  left:50%;
  margin-left: -139.5px;
  margin-top: -130px;
}


a:hover{
	color:#F9FF2B;
}
a{
	color:#fff;
}

.tap-target-wave::before, .tap-target-wave::after {
    content: '';
    display: block;
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 20%;
}

.sponsor #_default_ {
	color: #000;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 15px 30px 20px;
    width: 299px;
    border-top: solid 1px #7c2989;
	background-color: #223edb;
    font-size: 14px;
    line-height: 1.5;
	opacity: 0;
}
.io_ioca{
	color: #f9ff00;
	padding: 2px;
}
.tu_ioca{
	color: #ACF8FF;
	padding: 2px;
}
.message{
	background-color: rgb(243, 71, 205);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 5px;
	padding: 5px;
}

#ico_arancia{
	position: absolute;
	left: 7px;
	top:60px;
}

#ico_banana{
	position: absolute;
	left:8px;
	top:100px;
}
#ico_mela{
	position: absolute;
	left:7px;
	top:140px;
}


#info_game{
	position: absolute;
	top:50%;
	left:50%;
	width: 450px;
	height: 450px;
	margin-left: -225px;
	margin-top: -140px;
	z-index: 99999999999999;
}

#info_game_background{
	position: relative;
	width:300px;
	height:250px;
	background-color: #e91ebc;
	border-radius: 60px !important;
	left: 50%;
	margin-left: -150px;	
	top:-295px;
	z-index: 10;
	opacity: 0.8;
}

#info_game_txt{
	width: 260px;
    position: relative;
    margin-left: 95px;
    z-index: 25;
}

/* SCHEDA 1 */
#scheda_1{
	position: absolute;
	top:50%;
	left:50%;
	width: 450px;
	height: 450px;
	margin-left: -225px;
	margin-top: -140px;
	display: none;
	z-index: 99999999999999;
}

#scheda_1_bg{
	position: relative;
	width:300px;
	height:250px;
	background-color: #e91ebc;
	border-radius: 60px !important;
	left: 50%;
	margin-left: -150px;	
	top:-295px;
	z-index: 10;
	opacity: 0.8;
}

#scheda_1_txt{
	width: 260px;
    position: relative;
    margin-left: 95px;
    z-index: 25;
}
/* FINE - SCHEDA 1 */

/* SCHEDA 2 */
#scheda_2{
	position: absolute;
	top:50%;
	left:50%;
	width: 450px;
	height: 450px;
	margin-left: -225px;
	margin-top: -140px;
	display: none;
	z-index: 99999999999999;
}

#scheda_2_bg{
	position: relative;
	width:300px;
	height:250px;
	background-color: #e91ebc;
	border-radius: 60px !important;
	left: 50%;
	margin-left: -150px;	
	top:-295px;
	z-index: 10;
	opacity: 0.8;
}

#scheda_2_txt{
	width: 260px;
    position: relative;
    margin-left: 95px;
    z-index: 25;
}
/* FINE - SCHEDA 2 */


/* SCHEDA 3  winner*/
#scheda_3{
	position: absolute;
	top:50%;
	left:50%;
	width: 450px;
	height: 450px;
	margin-left: -225px;
	margin-top: -175px;
	display: none;
	z-index: 99999999999999;
}

#scheda_3_bg{
	position: relative;
	width:300px;
	height:250px;
	background-color: #e91ebc;
	border-radius: 60px !important;
	left: 50%;
	margin-left: -150px;	
	top:-295px;
	z-index: 10;
	opacity: 0.8;
}

#scheda_3_txt{
	width: 260px;
    position: relative;
    margin-left: 95px;
    z-index: 25;
}
/* FINE - SCHEDA 3 */

/* SCHEDA 4 */
#scheda_4{
	position: absolute;
	top:50%;
	left:50%;
	width: 450px;
	height: 450px;
	margin-left: -225px;
	margin-top: -100px;
	display: none;
	z-index: 99999999999999;
}

#scheda_4_bg{
	position: relative;
	width:300px;
	height:290px;
	background-color: #e91ebc;
	border-radius: 60px !important;
	left: 50%;
	margin-left: -150px;	
	top:-310px;
	z-index: 10;
	opacity: 0.8;
}

#scheda_4_txt{
	width: 260px;
    position: relative;
    margin-left: 95px;
    z-index: 25;
}
/* FINE - SCHEDA 4 looser*/


.tap-target-wrapper{
	z-index: 9999999999;
}
.tap-target-wave{
	z-index: 9999999999;
}
.collection_0{
	opacity: 1 !important;
}
.collection_0 .front{
	opacity: 1 !important;
	background-color: #fff !important;
}
.collection_0 .back{
	opacity: 1 !important;	
}

.collection_1{
	opacity: 1 !important;
}
.collection_1 .back{
	opacity: 1 !important;
}

.no_select_text{
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

.tap-target-content{
	width:370px !important;
	padding:26px !important;
	padding-top: 0px !important;
}

.stazione_radio{
    width: 100%;
    border-bottom: 1px solid #a0a0a0;
    padding: 5px;
    font-size: 25px;
    cursor: pointer;
}
.play{
 position: relative;
 float: right;
 cursor: pointer;
}

.line_allarm{
    width: 100%;
    border-bottom: 1px solid #a0a0a0;
    padding: 5px;
    font-size: 25px;
    cursor: pointer;
}

.radio_list_go_down{
    -webkit-animation-name: vai_giu_radio_list; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    animation-name: vai_giu_radio_list;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;    
    position:absolute;
    animation-timing-function: ease-out;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes vai_giu_radio_list {
    from {top: -500px;}
    to {top: 0px;}
  }
  
  /* Standard syntax */
  @keyframes vai_giu_radio_list {
    from {top: -500px;}
    to {top: 0px;}
  }

  .radio_list_go_up{
    -webkit-animation-name: vai_su_radio_list; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: vai_su_radio_list;
    animation-duration: 1s;
    animation-fill-mode: forwards;    
    position:absolute;
    animation-timing-function: ease-out;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes vai_su_radio_list {
    from {top: 0px;}
    to {top: -500px;}
  }
  
  /* Standard syntax */
  @keyframes vai_su_radio_list {
    from {top: 0px;}
    to {top: -500px;}
  }

  .color_manager_go_up{
    -webkit-animation-name: vai_su_color_manager; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: vai_su_color_manager;
    animation-duration: 1s;
    animation-fill-mode: forwards;    
    position:absolute;
    animation-timing-function: ease-out;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes vai_su_color_manager {
    from {top: 0px;}
    to {top: -600px;}
  }
  
  /* Standard syntax */
  @keyframes vai_su_color_manager {
    from {top: 0px;}
    to {top: -600px;}
  }

  .color_manager_go_dow{
    -webkit-animation-name: vai_down_color_manager; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: vai_down_color_manager;
    animation-duration: 1s;
    animation-fill-mode: forwards;    
    position:absolute;
    animation-timing-function: ease-out;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes vai_down_color_manager {
    from {top: -600px;}
    to {top: 0px;}
  }
  
  /* Standard syntax */
  @keyframes vai_down_color_manager {
    from {top: -600px;}
    to {top: 0px;}
  }

.timepicker-digital-display {    
    background-color: 
    #f2b500 !important;    
}

.timepicker-close {
    color: #000 !important;
}

.timepicker-canvas line {
	stroke:  #f2b500 !important;
}
.timepicker-canvas-bg {
    fill: #f2b500 !important;
}
.timepicker-canvas-bearing {
    fill: #f2b500 !important;
}
.timepicker::placeholder {
	color: #000;
	font-size: 1.2em;
	font-style: italic;
  }

  .help_close{
    -webkit-animation-name: vai_help_close; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    animation-name: vai_help_close;
    animation-duration: 3s;
    animation-fill-mode: forwards;    
    position:absolute;
    animation-timing-function: ease-out;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes vai_help_close {
    from {left: 0px;}
    to {left: -800px;}
  }
  
  /* Standard syntax */
  @keyframes vai_help_close {
    from {left: 0px;}
    to {left: -8000px;}
  }

  .help_open{
    -webkit-animation-name: vai_help_open; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: vai_help_open;
    animation-duration: 1s;
    animation-fill-mode: forwards;    
    position:absolute;
    animation-timing-function: ease-out;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes vai_help_open {
    from {left: -800px;}
    to {left: 0px;}
  }
  
  /* Standard syntax */
  @keyframes vai_help_open {
    from {left: -800px;}
    to {left: 0px;}
  }

  .microfono_open{
    -webkit-animation-name: microfono_open; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: microfono_open;
    animation-duration: 1s;
    animation-fill-mode: forwards;    
    position:absolute;
    animation-timing-function: ease-out;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes microfono_open {
    from {top: -1000px;}
    to {top: 0px;}
  }
  
  /* Standard syntax */
  @keyframes microfono_open {
    from {top: -1000px;}
    to {top: 0px;}
  }

  .microfono_close{
    -webkit-animation-name: microfono_close; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: microfono_close;
    animation-duration: 1s;
    animation-fill-mode: forwards;    
    position:absolute;
    animation-timing-function: ease-out;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes microfono_close {
    from {top: 0px;}
    to {top: -1000px;}
  }
  
  /* Standard syntax */
  @keyframes microfono_close {
    from {top: 0px;}
    to {top: -1000px;}
  }


.single_sound{
    width: 100%;
    border-bottom: 1px solid #a0a0a0;
    padding: 5px;
    font-size: 25px;
    cursor: pointer;
}


.sound_list_go_down{
  -webkit-animation-name: vai_giu_sound_list; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
  animation-name: vai_giu_sound_list;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;    
  position:absolute;
  animation-timing-function: ease-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes vai_giu_sound_list {
  from {top: -600px;}
  to {top: 0px;}
}

/* Standard syntax */
@keyframes vai_giu_sound_list {
  from {top: -600px;}
  to {top: 0px;}
}

.sound_list_go_up{
  -webkit-animation-name: vai_su_sound_list; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: vai_su_sound_list;
  animation-duration: 1s;
  animation-fill-mode: forwards;    
  position:absolute;
  animation-timing-function: ease-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes vai_su_sound_list {
  from {top: 0px;}
  to {top: -600px;}
}

/* Standard syntax */
@keyframes vai_su_sound_list {
  from {top: 0px;}
  to {top: -600px;}
}


.record_open{
  -webkit-animation-name: record_open; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: record_open;
  animation-duration: 1s;
  animation-fill-mode: forwards;    
  position:absolute;
  animation-timing-function: ease-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes record_open {
  from {top: -1000px;}
  to {top: 0px;}
}

/* Standard syntax */
@keyframes record_open {
  from {top: -1000px;}
  to {top: 0px;}
}

.record_close{
  -webkit-animation-name: record_close; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: record_close;
  animation-duration: 1s;
  animation-fill-mode: forwards;    
  position:absolute;
  animation-timing-function: ease-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes record_close {
  from {top: 0px;}
  to {top: -1000px;}
}

/* Standard syntax */
@keyframes record_close {
  from {top: 0px;}
  to {top: -1000px;}
}


.icon_close{
  -webkit-animation-name: chiudi_icon; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
  animation-name: chiudi_icon;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;    
  position:absolute;
  animation-timing-function: ease-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes chiudi_icon {
  from {left: -80px;}
  to {left: -400px;}
}

/* Standard syntax */
@keyframes chiudi_icon {
  from {left: -80px;}
  to {left: -400px;}
}

.icon_open{
  -webkit-animation-name: apri_icon; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0.3s; /* Safari 4.0 - 8.0 */
  animation-name: apri_icon;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;    
  position:absolute;
  animation-timing-function: ease-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes apri_icon {
  from {left: -400px;}
  to {left: -80px;}
}

/* Standard syntax */
@keyframes apri_icon {
  from {left: -400px;}
  to {left: -80px;}
}


.btn-floating.btn-large {
  width: 256px;
  height: 56px;
  padding: 0;
}