body{
	color: #fff;
	background-color:rgba(0, 0, 0, 0);
	font-family: Helvetica, Arial;
	-webkit-transform: scale(0.67);
	-moz-transform: scale(0.67);
	transform: scale(0.67);
	margin-top: -88px;
	background: url(../../img/life-level.png);
	background-repeat: no-repeat;
	    background-attachment: fixed;
    background-position: top center;
}

.items{
	display:none;
	max-width: 920px;
	min-height: 520px;
	border: 1px solid #ccc;
	margin: 0 auto;
	position: relative;
	background-color: black;
}

/*************************************  slide-mix  ******************************************/


#slide-mix .title{
	text-align: center;
}

#slide-mix-bar {
	display: block;
	height: 10px;
	/*border: 1px solid #fff;*/
	color: white;
	background-color: white;
border: 2px solid #FFF;
margin: 4px;
}

#slide-mix-bar > div {
	background-color: black !important;
}


#slide-mix-left {
	float: left;
	margin-left: 10%;
}
#slide-mix-right {
	float: right;
	margin-right: 10%;
}

#slide-mix-container {
	width: 90%;
	margin-left: 7%;
	margin-top: 26%;
}

.mix-values {
	margin-bottom: 1%;
}

#slide-mix-plus {
	float: right;
}
#slide-mix-minus {
	float: left;
}

#slide-mix-center {
	width: 85%;
	text-align: center;
}

#mix-bar-top-right , #mix-bar-bottom-right {
	float: right;
}

.mix-text {
	font-size: 1.5em;
}

.mix-bar-container {
	margin-top: 7%;
}

/*************************************  slide-1  ******************************************/


#slide-1 .title{
	text-align: center;
}


#slide-1 .title h1{
    font-size: 29px;
    font-weight: normal;
    margin-top: 5%;
}

#slide-1 .slide-container{
	width: 70%;
	margin:0 auto;
	margin-top: 15%;
}


#slide-1 #plus,#slide-1 #minus{

}

.plus, .minus{
	width: 80px;
	float: left;
}

.barre{
	width: 75%;
	float: left;
	height: 70px;
}

.barre p{
	height: 10px;
	background-color: #fff;
	margin: 2px 5% 0px 5%;
}
.barre h2{
	margin: 0px;
	text-align: center;
	font-weight: normal;
}

#slide-1 .buttons{
    margin: 0 auto;
    width: 80%;
    position: absolute;
    bottom: 20px;
    left: 10%;
}

#slide-1 .buttons p{
    float: left;
    border: 2px solid #fff;
    padding: 10px;
    font-size: 30px;
    /*margin: 0% 2% 0% 4%;*/
    margin: 0% 1% 0% 4%;
    width: 40%;
    text-align: center;
    text-transform: uppercase;
}



/*************************************  slide-2  ******************************************/


.title{
	text-align: center;
}

.title h1{
    font-size: 29px;
    font-weight: normal;
    margin-top: 5%;
}

.slide-container, .slide-container2{
	width: 70%;
	margin:0 auto;
	margin-top: 5%;
}

.slide-container{
	margin-top: 11%;
}

.slide-container2{
	margin-top: 23%;
}

.slide-buttons {
float: left;
}


.plus, .minus, .plus2, .minus2{
	width: 80px
}

.sliders{
	border: 1px solid #fff;
}

.bars {
		width: 62%;
    float: left;
    height: 10px;
    margin-top: 10px;
    margin: 0px 40px;
    /*border: 1px solid #fff;*/
    border: 2px solid #fff;
    position: relative;
    top: 36px;

}


.bar-container h2{
	margin: 0px;
	text-align: center;
	font-weight: normal;
	margin-top: 1px;
	position: absolute;
    width: 70%;
}

.buttons{
    margin: 0 auto;
    width: 80%;
    position: absolute;
    bottom: 20px;
    left: 10%;
}

.buttons p{
    float: left;
    border: 2px solid #fff;
    padding: 10px;
    font-size: 30px;
    /*margin: 0% 2% 0% 4%;*/
    margin: 0% 1% 0% 4%;
    width: 40%;
    text-align: center;
    text-transform: uppercase;
}

.ui-widget-header {
    border: 1px solid #fff !important;
    background: #fff !important;
}


/*************************************  numerone  ******************************************/

#numerone{
	max-width: 920px;
	min-height: 520px;
	border: 1px solid #ccc;
	margin: 0 auto;
	position: relative;
}

#numerone .title{
    font-weight: normal;
    /*margin-top: 2%;*/
    /*width: 75%;*/
    width: 90%;
    left: 5%;
    position: absolute;
}

#numerone .title-temperature{
    font-weight: normal;
    margin-top: 2%;
    width: 42%;
    right: 4%;
    position: absolute;
    text-align: right;
}
#numerone .title h1, #numerone .title-temperature h2{
    font-size: 32px;
    font-weight: normal;
    margin-top: 5%;
    text-align: left;
}

#numerone .title-temperature h2{text-align: right}
#numerone .temperature{
    float: right;
    width: 25px;
    margin-left: 10px;
    margin-top: -11px;
}

#numerone #numbers{
	font-size: 257px;
    margin-top: 14%;
        /*width: 690px;*/
    	margin: 14% 0 auto;
    text-align: right !important;	
}


/*Temperatura */
.type-temp div {
    float: left;
}

.type-temp{
    /*width: 620px;*/
    width: 455px;
    margin: 0 auto;
    text-align: center;
    min-height: 234px;
}

.type-temp #numerone-point{
    margin: 0px 0px 0px -102px;
}

.type-temp #numerone-decimal{
	font-size: 78px;
    position: relative;
    margin-top: 161px;
    font-weight: 300;
        margin-left: -28px;
}

.timer-temp-big {
    font-size: 170px;
    text-align: center;
}

/*Timer*/

.timer-temp{
    font-size: 35px;
    font-weight: normal;
    margin-top: 5%;
    width: 13%;
    float: left;
    position: absolute;
    bottom: 21px;
    right: 40px;
    text-align: right;
}

.timer-temp div {
    display: inline;
}

#numerone .buttons{
    margin-top: 0;
    margin-left: 23%;
    margin-bottom: 0;
    width: 34%;
    position: absolute;
    bottom: 20px;
    left: 10%;
}

#numerone .buttons p {
    border: 2px solid #fff;
    padding: 10px 29%;
    font-size: 30px;
    margin: 0 auto;
    width: 40%;
    text-align: center;
    text-transform: uppercase;
}

#numerone .ventilazione{
    font-size: 35px;
    font-weight: normal;
    margin-top: 5%;
    /*width: 15%;*/
    width: 17%:
    float: left;
    position: absolute;
    bottom: 21px;
    left: 40px;
}

#numerone .ventola{
    float: left;
    width: 34px;
    margin-right: 10px;
    margin-top: 6px;
}
.cuore{
    position: fixed;
    width: 46px;
    margin-left: 10px;
    margin-top: -5px;
}

.numerone-integer{
    min-width: 275px !important;
    text-align: right;
}
#numerone-timer-temp{
	font-size: 35px !important;
	background: url(../../img/orologio.png);
    background-repeat: no-repeat;
    background-size: 28px;
    background-position-y: 5px;
}

#numerone-clessidra-temp{
	display: none;
	font-size: 35px !important;
	background: url(../../img/orologio.png);
    background-repeat: no-repeat;
    background-size: 28px;
    background-position-y: 5px;
}

/*************************************  griglia-9  ******************************************/


#griglia-9{
	max-width: 920px;
	min-height: 520px;
	border: 1px solid #ccc;
	margin: 0 auto;
	position: relative;
}

#griglia-9 .boxes {
    /*border: 1px solid #fff;
    width: 33.11%;*/
    border: 1px solid #FFF !important;
	width: 33.1%;
    float: left;
    text-align: center;
    /*padding: 7.22% 0%;
    padding: 7.29% 0% !important;*/
    font-size: 34px;
	height: 173px;
    display: table;
}

#griglia-9 .boxes:hover{
	background-color: #fff;
	color: #000;
}

#griglia-9 .boxes p{
    padding: 0px;
    margin: 0px;
    height: 82px;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

.griglia-active {
	background-color: #fff;
	color: #000;
}


.griglia-slide{
    position: absolute;
    z-index: 9999;
    width: 60px;
    bottom: 3px;
    padding-left: 440px;
}
.griglia-slide-point{
	width:50%;
	float:left;
}
.griglia-slide-point-full{
    width: 12px;
    height: 12px;
    display: block;
    background-repeat: no-repeat;
    float:left;
    background-color: #fff;
    border: 3px solid #fff;
    border-radius: 15px;
    margin: 0 3px 3px 0;
}

.griglia-slide-point-empty {
    width: 12px;
    height: 12px;
    display: block;
    background-color: #000;
    float:left;
    border: 3px solid #fff;
    border-radius: 15px;
    margin: 0 3px 3px 0;
}
/*************************************  si-no  ******************************************/



#answer-right,#answer-left  {
	color: #fff;
	text-decoration: none;
}

#si-no{
        max-width: 920px;
        min-height: 520px;
        border: 1px solid #ccc;
        margin: 0 auto;
        position: relative;
}

#si-no .title{
        text-align: center;
}

#si-no .title h1{
    font-size: 29px;
    font-weight: normal;
    margin-top: 5%;
}

#si-no #numbers span{font-size: 123px;}

#si-no-back {
    text-align: center;
    display: none;
}

#si-no .buttons{
    margin: 0 auto;
    width: 80%;
    position: absolute;
    bottom: 20px;
    left: 10%;
}
#si-no .buttons a{
    border: 2px solid #fff;
    padding: 10px;
    font-size: 30px;
    margin: 0 auto;
    width: 40%;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}


/*#answers{
margin: 0 auto;
    width: 80%;
    position: absolute;
    top: 260px;
    left: 10%;
}*/

#answers p{
    border: 2px solid #fff;
    padding: 10% 0px 10% 0px;
    font-size: 30px;
    margin: 0px auto;
    width: 48%;
    text-align: center;
    float: left;
    vertical-align: middle;

}

#si-no .buttons a{
    float: left;
    border: 2px solid #fff;
    padding: 10px;
    font-size: 30px;
    margin: 0px 30% 0% 28%;
    width: 40%;
    text-align: center;
    text-transform: uppercase;
}


/*************************************  alert  ******************************************/



.alert{
    width: 125px;
    margin-top: 27px;
}

.title h1{
    font-size: 29px;
    font-weight: normal;
    /*margin-top: 12%;*/
}



#answers-alert{
text-align:center;
}

#answers-alert h1{
font-weight: normal;
}

#alert{
        max-width: 920px;
        min-height: 520px;
        border: 1px solid #ccc;
        margin: 0 auto;
        position: relative;
}

.title{
        text-align: center;
}

#numbers span{font-size: 123px;}

#buttons{
    margin: 0 auto;
    width: 80%;
    position: absolute;
    bottom: 20px;
    left: 10%;
}

#buttons p{
    border: 2px solid #fff;
    padding: 10px;
    font-size: 30px;
    margin: 0 auto;
    width: 40%;
    text-align: center;
    text-transform: uppercase;
}

#answers{
    margin: 0 auto;
    width: 80%;
    position: absolute;
    /*top: 242px;*/
    top: 33%;
    left: 10%;
}

.answers{
    border: 2px solid #fff;
    padding: 2% 0px 2% 0px;
    font-size: 30px;
    margin: 0 auto;
    width: 48%;
    text-align: center;
    float: left;
    vertical-align: middle;
	/*min-height: 70px;*/
	min-height: 34px;
	max-height: 36px;
}

.si_no {
    border: 2px solid #fff;
    padding: 2% 0px 2% 0px !important;
    font-size: 30px;
    margin: 0 auto;
    width: 48%;
    text-align: center;
    float: left;
    vertical-align: middle;
	/*min-height: 70px;*/
}



/*************************************  riepilogo  ******************************************/


.riepilogo {
	font-size: 30px;
	margin: 0 22%;
	width: 675px;
}

.riepilogo-key {
	text-align: right;
}
.riepilogo-value {
	text-align: left;
	padding-left: 12%;
	width: 61%;
}


/********************************    POPUP    ***********************************/



#titolo-popup{
    position: fixed;
    top: 37px;
    width: 482px;
    padding: 16px;
    background-color: #fff;
    text-align: center;
    font-size: 19px;
    margin: 0 auto;
    color: #000;
    left: 20%;
    right: 20%;
}

#programma-popup{
    position: fixed;
    top: 60px;
    height: 21px;
    padding: 16px;
    background-color: #fff;
    text-align: center;
    font-size: 19px;
    margin: 0 auto;
    color: #000;
    left: 6%;
}

#temperatura-popup{
    position: fixed;
    top: 60px;
    width: 245px;
    padding: 16px;
    background-color: #fff;
    text-align: center;
    font-size: 19px;
    margin: 0 auto;
    color: #000;
    right: 6%;
}

#intensita-popup{
	position: fixed;
    bottom: 60px;
    padding: 16px;
    background-color: #fff;
    text-align: center;
    font-size: 19px;
    margin: 0 auto;
    color: #000;
    left: 6%;
    width: 224px;
    text-align: left
}

#stop-popup{
    position: fixed;
    bottom: 13px;
    width: 482px;
    padding: 16px;
    background-color: #fff;
    text-align: center;
    font-size: 19px;
    margin: 0 auto;
    color: #000;
    left: 20%;
    right: 20%;
}

#temperatura2-popup{
    position: fixed;
    top: 200px;
    width: 245px;
    padding: 16px;
    background-color: #fff;
    font-size: 19px;
    margin: 0 auto;
    color: #000;
    right: 6%;
    width: 224px;
    text-align: left;
}

#tempo-popup{
	position: fixed;
    bottom: 13px;
    padding: 16px;
    background-color: #fff;
    text-align: center;
    font-size: 19px;
    margin: 0 auto;
    color: #000;
    right: 6%;
    width: 224px;
    text-align: left
}

#end-popup{
    position: fixed;
    bottom: -70px;
    width: 482px;
    padding: 16px;
    background-color: #fff;
    text-align: center;
    font-size: 19px;
    margin: 0 auto;
    color: #000;
    left: 20%;
    right: 20%;
}


/****************************** tempo residuo **************************/


#tempo-residuo {
	display: none;
    position: absolute;
    left: 170px;
    top: 139px;
}
#tempo-residuo img{
	width: 560px;
}