@font-face {
    font-family: 'Arimo';
    src: url('Arimo-VariableFont_wght.woff') format('woff'),
		url('Arimo-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('Arimo-Italic-VariableFont_wght.woff') format('woff'),
		url('Arimo-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
}

* { padding: 0; margin: 0; }
body { font-family: 'Arimo', sans-serif; font-size:100%; margin: 0; padding: 0; color:#FFF; background-image: url("images/bg.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; }
html { height: 100%; }

#top_rilievo { width: 100%; z-index:100; position:fixed; top:0px; background-color: #000; /*background-color: rgba(255,255,255,0.70);*/ }
div.menu_spacer { height: 48px; }

div.principale { min-height: 100%; width:100%; /*padding-left:4%; padding-right:4%;*/ background-color:#000; background-color:rgba(0,0,0,0.30); /*background-color:transparent;*/ margin-bottom: -96px; }
	div.bumper_footer { height: 96px; width: 100%; }
div.principale_bottom { width:100%; }
div.principale_esito { width:100%; /*background-color:#518ac0;*/ }
div.principale_esito_bottom { width:100%; }

* html principale { height: 100%; } /* per ie6 */


/*div.separatore_diagonale { height: 129px; color:#fff; background-color: #B70A0C; background-image: url("images/bg_azzurro_diagonali.jpg"); background-size: cover; background-position: right; text-align: center; }*/
div.separatore_diagonale { padding-top: 35px; padding-bottom: 35px; }
div.separatore50sx { float: left; width: 49%; text-align: right; }
div.separatore50dx { float: right; width: 49%; text-align: left; }

div.box_blu { background-image: url("images/bg_esito.jpg"); background-size: cover; min-height: 214px;/*+4px per pareggiare il -4 del margin-top*/ padding-top: 30px; padding-bottom: 37px; text-align: center; color:#fff; margin-top: -5px; }
	h2.titolo200 { font-size: 200%; font-weight: bold; }
	h3.titolo150 { font-size: 150%; font-weight: bold; }
	h4.titolo_premio { font-size: 125%; font-weight: bold; color: #00bcf2; text-align: left; max-width: 325px; margin-left: auto; margin-right: auto; }
	div.descrizione_premio { text-align: left; max-width: 325px; margin-left: auto; margin-right: auto; margin-bottom: 45px; }

div.box_blu_small { background-image: url("images/bg_esito.jpg"); background-size: cover; min-height: 54px;/*+4px per pareggiare il -4 del margin-top*/ padding-top: 30px; padding-bottom: 37px; text-align: center; color:#fff; margin-top: -5px; }


/* Add a black background color to the top navigation */
.topnav {
  /*background-color: #333;*/
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  /*color: #f2f2f2;*/
	color: #aee2fa;
	background-color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  /*background-color: #ddd;*/
	/*background-color: #fff;*/
  	color: #00bcf2;
	background-color: #000;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  /*background-color: #000000; background-color: rgba(0,0,0,0.70);
	background-color: #c0a67b; background-color: rgba(160,123,61,0.40);*/
	text-decoration: underline;
	color: #aee2fa;
	background-color: #000;
  /*color: white;*/
}
.topnav a.active:hover {
  /*background-color: #ddd;*/
	/*background-color: #F00;*/
  	color: #00bcf2;
	background-color: #000;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

a.link { color:#aee2fa; }
a.link:hover { text-decoration:none; }
a.link:visited { color:#aee2fa; }
a.richiedi_premio { color:#00bcf2; background-color: #fff; padding: 3px 15px 3px 15px; text-decoration: none; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; border-top-left-radius: 7px; border-top-right-radius: 7px; }
a.richiedi_premio:hover { background-color: #aee2fa; }
a.richiedi_premio:visited { color:#00bcf2; background-color: #fff; padding: 3px 15px 3px 15px; text-decoration: none; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; border-top-left-radius: 7px; border-top-right-radius: 7px; }
a.link_red { color:#aee2fa; }
a.link_red:hover { text-decoration:none; }
a.link_red:visited { color:#aee2fa; }
a.nolook { color:#aee2fa; text-decoration:none; }
a.nolook:hover { text-decoration:underline; }
a.nolook:visited { color:#aee2fa; }
a.link_credits { color:#fff; font-weight:bold; font-style:italic; }
a.link_credits:hover { text-decoration:none; }
a.link_credits:visited { color:#fff; }
a.link_pulsante { padding: 10px 30px 10px 30px; color:#000; background-color:#aee2fa; border: 3px solid #000; text-decoration:none; font-weight:bold; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
a.link_pulsante:hover { text-decoration:none; }
a.link_pulsante:visited { color:#fff; }
a.link_footer { color:#aee2fa; display: inline-block; margin-right:35px; }
a.link_footer:hover { text-decoration:underline; color:#00bcf2; }
a.link_footer:visited { color:#aee2fa; }
a img { text-decoration: none; }

div.clear { clear:both; }
div.separatore_azzurro { width:100%; height:5px; background-color:#F00; }
div.banner_punti { max-width:621px; /*height:78px; line-height: 78px; padding-top: 17px; padding-bottom: 17px;*/ height:112px; line-height: 112px; padding-left: 10px; padding-right: 10px; margin-right: auto; margin-left:auto; text-align: center; color: #F00; font-size: 300%; font-style: italic; font-weight: bold; background-image: url("images/pulsanti/banner_punti.png"); background-size: cover; background-repeat: no-repeat; background-position: center; }

div.contieni_punti { max-width:641px; width:100%; margin-left: auto; margin-right: auto; }
	div.banner_punti_over { position: relative; overflow: hidden; }
		div.banner_punti_over img { margin: 0; padding: 0; border: none; }
		div.banner_punti_over span { position: absolute; left: 0; bottom: 0; margin: 0; padding: 0px; height: 112px; line-height: 112px; width: 100%; color: #00bcf2; font-size: 300%; font-style: italic; font-weight: bold; text-align: center; }

div.trentatre { margin-bottom:50px; }
	div.piutrenta { margin-bottom:35px; }
	
span.domanda { color:#F00; font-weight:bold; }

img { outline: none; margin-bottom:0px; }
img { margin-bottom: -2px; }
img.logo_menu { display: none; }
img.claim_bottom { max-width: 750px; }
img.claim { border-top: 3px solid #F00; border-bottom: 3px solid #F00; margin-bottom:50px; }
/*pulsanti link*/
img.partecipa { max-width: 249px; margin-top: 41px; }
img.accedi { max-width: 249px; margin-top: 41px; }
img.dati_utente { max-width: 236px;}
img.privacy { max-width: 390px;}
img.esito_iscrizione { max-width: 236px;}
img.autenticazione { max-width: 236px;}
img.dati_fattura { max-width: 236px;}
img.esito_caricamento { max-width: 287px;}
img.conferma_richiesta { max-width: 287px;}
img.esito_richiesta { max-width: 287px;}
img.storico_premi { max-width: 236px;}
img.dati { max-width: 236px;}
img.scegli_premio { max-width: 303px;}
img.punti { max-width: 203px;}
img.punti_accumulati { max-width: 275px;}
img.pulsanti_home { max-width: 286px;}
img.pulsanti_premi { max-width: 325px;}
img.back { max-width: 249px; margin-top: 41px; }
img.richiedi { max-width: 236px;}
/*fine pulsanti link*/

.mob { display:inline; }
.web { display:none; }
span.corsivo { font-style:italic; }
span.normal { font-style:normal; font-weight:normal; font-size:100%; }
span.red { color: #00486d; }

h1.titolo_sottolineato { font-size:120%; color:#F00; font-weight:bold; text-align:center; padding-bottom:8px; border-bottom: 1px solid #1b4470; }
h1.titolo_no_sottolineato { font-size:120%; color:#F00; font-weight:bold; text-align:center; padding-bottom:8px; }
h1.titolo_sottolineato_azzurro { font-size:120%; color:#FF4D4D; font-weight:bold; text-align:center; padding-bottom:8px; border-bottom: 1px solid #5c8abb; }
/*h1.titolo_no_sottolineato_azzurro { font-size:120%; color:#FF4D4D; font-weight:bold; text-align:center; padding-bottom:8px; }*/
span.titolo_no_sottolineato_azzurro { font-size:140%; padding: 10px 30px 10px 30px; color: #fff; background-color: #00bcf2; text-align:center; padding-bottom:8px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; width: auto; font-family: 'Anton', sans-serif; }

ol.nospazi { padding-left:20px; }

div.credits { width:96%; padding-left:2%; padding-right:2%; font-size:70%; text-align:center; background-color: #00486d; color:#fff; }

/*esito*/
div.top_200_normal { font-size:150%; font-weight:bold; text-align:center; }

h1.esito { font-size:200%; font-family: 'Alfa Slab One', cursive; color:#F00; }
h2.esito { font-size:150%; font-family: 'Alfa Slab One', cursive; color:#F00; }
div.istruzioni_sx { font-size:120%; font-style:italic; text-align:left; width:80%; padding-left:10%; padding-right:10%; font-weight:bold; }
h3.esito { font-size:120%; font-family: 'Alfa Slab One', cursive; color:#F00; }
/*esito*/

/*premi*/

/*premi*/

div.testata { text-align:center; }
	img.testata_home { max-width:696px; }

div.center { text-align:center; font-size:130%; }
div.center_big { text-align:center; font-size:130%; }
div.center_big2 { text-align:center; font-size:180%; }
div.center_mid { text-align:center; font-size:120%; }
div.center_premi { text-align:center; font-size:130%; font-style:italic; }
div.contenitore_testo { text-align:left; font-size:100%; width:90%; margin-left:auto; margin-right:auto; }
div.contenitore_testo_italic { text-align:left; font-size:100%; font-style:italic; width:90%; margin-left:auto; margin-right:auto; }


/*form*/
form { margin:0px; padding:0px; border:none; }
div.cinquanta_sx { padding-bottom:15px; }
div.cinquanta_dx { padding-bottom:15px; }
div.cinquanta_sx_premi { padding-bottom:15px; text-align: center; }
div.cinquanta_dx_premi { padding-bottom:15px; text-align: center; }
div.home_iscriviti { padding-bottom:15px; text-align:center; }
div.home_gioca { padding-bottom:15px; text-align:center; }
input.input_testo { width:90%; height: 30px; line-height:30px; padding:2px; font-size:115%; }
input.input_testo_solo { width:90%; height: 30px; line-height:30px; padding:2px; font-size:115%; }
div.consensi_info { width:80%; padding: 5px; background-color:#fff; color:#1d1d1b; font-style:normal; font-weight:normal; font-size:85%; height:50px; overflow:auto; border: 1px solid #a9a9a9; }
div.check_privacy { float:left; padding-right:50px; font-size:80%; }
div.dichiarazione_privacy { padding-bottom:10px; font-weight:bold; font-size:90%; }
div.riga_blu { padding-bottom:0px; border-bottom: 1px solid #F00; }

/*input.iscrivi_button:active { background-image:url(images/iscrizione/registrati_active.png); border:0px; border:none; outline: none; }*/

input.iscrivi_button { width:249px; height:46px; margin-top: 41px; border:0px; background-image:url("images/pulsanti/registrati.png"); background-repeat:no-repeat; background-color:transparent; border:none; outline: none; }
input.accedi_button { width:249px; height:46px; margin-top: 41px; border:0px; background-image:url(images/pulsanti/accedi.png); background-repeat:no-repeat; background-color:transparent; border:none; outline: none; }
input.carica_fattura_button { width:249px; height:46px; margin-top: 41px; border:0px; background-image:url("images/pulsanti/carica_fattura.png"); background-repeat:no-repeat; background-color:transparent; border:none; outline: none; }
input.richiedi_button { width:249px; height:46px; margin-top: 41px; border:0px; background-image:url(images/pulsanti/richiedi.png); background-repeat:no-repeat; background-color:transparent; border:none; outline: none; }
input.invia_button { width:249px; height:46px; margin-top: 41px; border:0px; background-image:url(images/pulsanti/invia.png); background-repeat:no-repeat; background-color:transparent; border:none; outline: none; }
input.modifica_button { width:249px; height:46px; margin-top: 41px; border:0px; background-image:url(images/pulsanti/modifica.png); background-repeat:no-repeat; background-color:transparent; border:none; outline: none; }
input.conferma_premio_button { width:249px; height:46px; margin-top: 41px; border:0px; background-image:url("images/pulsanti/richiedi_premio.png"); background-repeat:no-repeat; background-color:transparent; border:none; outline: none; }

input.input_interi { padding:5px; width:40%; border: 1px solid #000; font-size:115%; text-align:right; }
input.input_decimali { padding:5px; width:18%; border: 1px solid #000; font-size:115%; }
input.input_select { padding:5px; border: 1px solid #000; font-size:120%; }
select.selectStyle { padding:5px; border: 1px solid #000; font-size:115%; }

div.privacy { /*padding-left: 1%; padding-right: 12%;*/}
div.contenuto_privacy { padding: 1%; height: 70px; overflow:auto; font-size:70%; border: 1px solid #fff; background-color:#fff; color:#000; }

/*radio personalizzati*/

td { padding:4px; }
td.intestazione { font-weight: bold; background-color:#00bcf2; color:#fff; padding-top: 4px; padding-bottom: 4px; }

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #D7D7D7;
    border-radius: 50%;
	border:1px solid #333;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #eee;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 3px;
	left: 3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #333;
}

/*radio personalizzati*/

/*form*/

.youtube {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
}
.youtube iframe,
.youtube object,
.youtube embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

div.footer { min-height: 96px; padding:0px; background-color: #000; color:#fff; }
	div.footer_inner { line-height: 96px; background-color: #000; color:#fff; }
		div.footer_logo { min-height: 96px; float: left; background-color: #000; color:#fff; }
		div.footer_text { min-height: 96px; line-height: 96px; float: right; background-color: #000; color:#fff; }




@media (min-width: 768px) {
	body { /*background-image:url("images/bg768.gif"); background-repeat: repeat-x;*/ } 
	
	#top_rilievo { height: 92px; line-height: 92px; /*width: 768px;*/ }
	div.menu_spacer { height: 92px; }
	div.topnav { width: 768px; margin-left: auto; margin-right: auto; }
	img.logo_menu { display: inline; }
	.topnav a {
	  padding-top: 0px;
	  padding-bottom: 0px;
		background-color: #000;
	}
	
	div.principale { width:768px; padding-left:0px; padding-right:0px; margin-left:auto; margin-right:auto; background-color: rgba(0,0,0,0.60) }
	div.principale_bottom { width:768px; padding-left:0px; padding-right:0px; margin-left:auto; margin-right:auto; background-color: rgba(0,0,0,0.60) }
	div.principale_esito { width:768px; padding-left:0px; padding-right:0px; margin-left:auto; margin-right:auto; background-color: rgba(0,0,0,0.60) }
	div.principale_esito_bottom { width:768px; padding-left:0px; padding-right:0px; margin-left:auto; margin-right:auto; background-color: rgba(0,0,0,0.60) }
	
	h1.titolo_rosso { font-size:120%; margin-left:10%; margin-right:10%; }
	div.sottolineato_rosso { margin-left:10%; margin-right:10%; padding-bottom:15px; }
	
	div.home_sx { width:58%; padding:0px; float:left; }
	div.home_dx { width:42%; padding:0px; float:left; }
	
	div.trentatre { width:29%; padding-left:2%; padding-right:2%; float:left; }

	.mob { display:none; }
	.web { display:inline; }
	span.centottanta { font-size:170%; }
	
	img.claim { border-top: 0px; }
	
	div.testata { }
		img.testata_home { max-width:640px; }
	
	div.home_iscriviti { width:48%; padding-left:2%; float: left; text-align:right; }
	div.home_gioca { width:48%; padding-left:2%; float: left; text-align:left; }
	
	div.center { font-size:120%; }
	div.center_big { font-size:120%; }
	div.center_big2 { font-size:170%; }
	div.center_mid { font-size:110%; }
	div.center_premi { font-size:120%; }
	div.contenitore_testo { width:88%; margin-left:auto; margin-right:auto; }
	div.contenitore_testo_italic { width:88%; margin-left:auto; margin-right:auto; }
	
	/*form*/
	div.box_spostato_cinquanta {padding-left:2%; }
		div.cinquanta_sx { width:48%; padding-left:2%; float: left; }
		div.cinquanta_dx { width:48%; padding-left:2%; float: left; }
		div.cinquanta_sx_premi { width:48%; padding-left:2%; float: left; }
		div.cinquanta_dx_premi { width:48%; padding-left:2%; float: left; }
	div.box_spostato {padding-left:4%; }
		div.consensi_info { padding: 10px; height:100px; width:94%;  }
		input.input_testo_solo { width:50%; margin-left:auto; margin-right:auto; }
	/*form*/
	

	div.footer_inner { margin-left:auto; margin-right:auto; width:768px; line-height: 96px; }

	
	
}

/* When the screen is less than 767px pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 999px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
	
  .topnav a.icon_other {
    float: right;
    display: inline-block;
  }
	
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 999px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


@media (min-width: 1000px) {
	
	body { /*background-image:url("images/bg1000.gif");*/ }
	#top_rilievo { }
	div.topnav { width: 1000px; }
	.topnav {
	  width:1000px; 
	}
	
	
	span.centottanta { font-size:180%; }
	div.principale { width:1000px; padding-left:0px; padding-right:0px; }
	div.principale_bottom { width:1000px; padding-left:0px; padding-right:0px; }
	div.principale_esito { width:1000px; padding-left:0px; padding-right:0px; }
	div.principale_esito_bottom { width:1000px; padding-left:0px; padding-right:0px; }
	
	
	div.testata { }
		img.testata_home { max-width:696px; }
	
	div.center { font-size:150%; }
	div.center_big { font-size:130%; }
	div.center_big2 { font-size:170%; }
	div.center_mid { font-size:130%; }
	div.center_premi { font-size:150%; }
	
	/*form*/

	/*form*/
	
	/*premi*/

	/*premi*/
	
	div.footer_inner { width:1000px; }
	
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}