/* CSS Document */



* {

  box-sizing: border-box;

  margin:0 auto;

}



html{

height:100%;

overflow-x: hidden;

}



body {

  background-color: #ffffff;

  height:100%;

  font-family: Raleway, sans-serif;

}



h1 {

  text-align: center;

}







#mainwrap{

width:100%;

height:100%;

margin:0 auto;

background: rgb(0,14,155);

background: linear-gradient(180deg, rgba(0,14,155,1) 0%, rgba(95,104,192,1) 50%, rgba(255,255,255,1) 100%);



}





/*--- INTRO BOX ---------------------------------*/





#intro {

    position: relative;

    float: left;

    width: 50%;

    height: 100%;

    padding: 20px 38px;

    color: #fff;



}



#intro H1{

margin-top:50px;

text-align:left;

font-size: 4em;

line-height:0.9em;

font-weight: 700;

margin-bottom:none;

}



#intro .subtitle{

color: orange;

font-size:2.5em;

line-height:1.5em;

font-weight:500;

margin-top:-200px;

}



#intro p{

font-size:1.3em;

line-height:1.3em;

}



#intro .mainimage{

/*position:absolute;*/

//bottom:0px;

border:0px solid red;

height:70%;

margin-top:0px;

}



#intro .requi{

text-align:center;

width:30%;

float:left;

border:2px solid #fff;

padding:5px;

border-radius:5px;

margin-top:15px;

margin-right:15px;

}



/* Device = dispositivi sotto 1281px desktops --------------------------------------------*/





@media (max-width: 1281px){



              #mainwrap{

              height:70%;

              margin:0 auto;

             /* background-image: linear-gradient(to bottom, #418C4F, #C9DF29);   green*/

              }



              #intro {

              position: relative;

              float: left;

              width: 100%;

              height: 61%;

              padding: 36px 20px;

              color:#fff;

              clear: both;

              }







#intro H1 {

    font-size: 3em;

    margin-top: -10px;

}



              #intro .subtitle{

              font-size:1.5em;

              line-height:1em;

              font-weight:500;

              margin-top:-200px;

              }





              #intro IMG{ width:100%; float:left; left:-10px; height:auto;}



              #intro p{

              font-size:1em;

              line-height:1.3em;

              }



              #intro .requi{

              text-align:left;

              width:100%;

              float:left;

              border:2px solid #fff;

              padding:5px;

              border-radius:5px;

              margin-top:5px;

              /*margin-right:15px;*/

              }



              #intro .requi IMG{margin-right:10px;}



              #intro .mainimage{

              border:0px solid red;

              height:auto;  width:100%;

              }





			#infocontent .box {

				top: 60;

			}



			.logonexi{

				margin-top: 40px;

			}

}

/* Device = dispositivi sotto 1281px desktops --------------------------------------------*/





#wave {

    position: absolute;

    float: left;

    z-index: 10;

    width: 100%;

    height: 30px;

    /*background: url(../assets/img/wave2.png) left bottom repeat-x;*/

	/*background-color: blue;*/

    background-size: 100%;

    top:100%;

    //opacity:0.5;

}



        @media (max-width: 1281px){ #wave { top:57%; background-size: 150%;}   }





/*--- FORM BOX ---------------------------------*/



#formbox{

position:relative;

float:right;

width:50%;

z-index:20;

}



.fase{

border:1px solid #ccc;

border-radius:10px;

padding:10px;

font-size:0.9em;

color:#565556;

margin-right:25px;

}



.myfase{

border:2px solid #FF4300;

background: #fff;

border-radius:10px;

padding:10px 20px;

font-size:0.9em;

color:#FF4300;

font-weight:bolder;

margin-right:25px;

}





#regForm {

  background-color: #ffffff;

  margin: 50px auto;

  font-family: Raleway, sans-serif;

  padding: 40px;

  width: 80%;

  min-width: 300px;

  border-radius:10px;

  box-shadow: 2px 2px 25px #1A233A;

}





input, select {

  padding: 10px;

  width: 100%;

  font-size: 15px;

  color:#000;

  font-family: Raleway, sans-serif;

  border: 1px solid #aaaaaa;

  margin-bottom:10px;

  border-radius:10px;

}



/* evidenzia in caso di errore */

input.invalid, select.invalid {

  background-color: #FFE9AF;

}



/* nascodi di default gli step */

.tab {

  display: none;

}



button {

  background-color: #FF4300;

  color: #ffffff;

  border: none;

  padding: 10px 20px;

  font-size: 17px;

  font-family: Raleway;

  cursor: pointer;

  border-radius:5px;

}



button:hover {

  opacity: 0.8;

}



#prevBtn {

  background-color: #bbbbbb;

}



/* pallini dei passaggi */

.step {

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbbbbb;

  border: none;

  border-radius: 50%;

  display: inline-block;

  opacity: 0.5;

}



.step.active {

  opacity: 1;

}



/* evidenzia step finale */

.step.finish {

  background-color: #506AAF; //#4CAF50;

}







.myCheckbox input {

  position: relative;

  z-index: -9999;

  float:left;



}

.myCheckbox select {

  position: relative;

  z-index: -9999;

  float:left;



}





.myCheckbox span {

  width: 20px;

  height: 20px;

  display: block;

  background: #ccc;

  float:left;

}



.myCheckbox input:checked + span {

  background: #2196F3 url('.././assets/img/check-w.png') no-repeat center;

  background-size: 80%;

}

.myCheckbox select:checked + span {

  background: #2196F3 url('.././assets/img/check-w.png') no-repeat center;

  background-size: 80%;

}





/* Device = dispositivi sotto 1281px desktops --------------------------------------------*/

                @media (max-width: 1281px){



                #formbox{

                position:relative;

                border:0px solid green;

                top:40%;

                float:left;

                width:100%;

                z-index:20;

                clear:both;

                }







                .fase{

                border:1px solid #ccc;

                padding:7px;

                font-size:0.8em;

                margin-right:5px;

                }



                .myfase{

                border:1px solid #FF4300;

                border-radius:10px;

                padding:7px;

                font-size:0.9em;

                color:#FF4300;

                font-weight:bolder;

                margin-right:5px;

                }





                #regForm {

                  margin: 0px auto;

                  padding: 20px;

                  width: 90%;

                  min-width: 300px;

                  border-radius:10px;

                  box-shadow: 1px 1px 10px #ccc;

					margin-top: 20px;

                }





                }

/* Device = dispositivi sotto 1281px desktops --------------------------------------------*/











/*--- FORM BOX ---------------------------------*/





#infocontent {

    position: relative;

    float: left;

    width: 100%;

    z-index: 30;

    margin-top: 20px;

    padding: 0 20px;

    border: 0px solid red;

}







#infocontent .box{

position:relative;

float:left:

width:100%;

background:#fff;

padding:10px 20px;

border-radius:10px;

box-shadow: 2px 2px 15px #bbb;

margin-bottom:30px;

}



#infocontent .box IMG{

float:left;

width:60px;

margin-right:20px;

}



#infocontent .box P{

line-height:1.5em;

}





#riepilogo{

color:#fff;

position:relative;

width:100%;

z-index:30;

margin-top: 10px;

padding:0 10%;

border:0px solid red;

}



#riepilogo .box{

position:relative;

float:left:

width:100%;

background:#000e9b;

padding:20px 20px;

border-radius:10px;

box-shadow: 2px 2px 15px #bbb;

margin-bottom:10px;

}





#riepilogo .box IMG{

float:left;

width:60px;

margin-right:20px;

}



/* Device = dispositivi sotto 1281px desktops --------------------------------------------*/

              @media (max-width: 1281px){



              HR{border:0px solid #fff;}



              #riepilogo{

              color:#fff;

              position:relative;

              float:left;

              width:100%;

              margin-top:20px;

              margin-bottom:180px;

              clear:both;

              }





              #riepilogo .box{

              position:relative;

              float:left:

              width:100%;

              padding:10px 20px;

              border-radius:10px;

              box-shadow: 2px 2px 15px #bbb;

              margin-bottom:44px;

              }





              #riepilogo .box IMG{

              float:left;

              width:60px;

              margin-right:20px;

              }





              }

/* Device = dispositivi sotto 1281px desktops --------------------------------------------*/



.fluo{background:yellow;}

.fluo2{background:pink;}