@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Questrial&display=swap");
:root{
--fw-1: 400;
--fw-2: 700;
--fw-3: 700;
--fs-1: 1.125rem;
--fs-2: 1.25rem;
--fs-3: 2rem;
--fs-small: .75rem;
--clr-1: #fff;
--clr-2: #255996;
--clr-3: #1b3049;
--clr-4: #171f29;
--clr-5: #1fd030;
--clr-dark: rgba(0,0,0,.25);
--clr-body: rgba(255,255,255,.8)
}

*,*::before,*::after{
-webkit-box-sizing:border-box;
box-sizing:border-box
}

body{
min-height:100vh;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
font-family:'Montserrat', sans-serif;
background-color:var(--clr-4);
background:url("../images/sfondo-login.jpg");
background-repeat:repeat;
color:var(--clr-body);
font-size:var(--fs-1);
font-weight:var(--fw-1);
line-height:1.6
}

p{
margin:0 0 .25em 0
}

a{
color:var(--clr-1)
}

a:hover{
color:inherit
}

strong{
font-weight:var(--fw-3)
}

.title,.subheading{
color:var(--clr-1);
text-transform:uppercase;
letter-spacing:1px;
line-height:1
}

.title{
font-size:var(--fs-2);
font-weight:var(--fw-3)
}

.subheading{
margin-top:0;
font-size:var(--fs-2)
}

.logohome{
font-family:'Questrial', sans-serif;
font-size:44px;
letter-spacing:1px;
line-height:1;
margin:0 0 1rem 0;
font-weight:400;
color:white;
 text-shadow: 3px 3px #000;
}

.fineprint{
font-size:var(--fs-small)
}

.button{
all:unset;
cursor:pointer;
display:inline-block;
background-color:#A3A3B1;
padding:.5em 1.75em;
color:rgba(0,0,0,0.7);
font-weight:var(--fw-3);
-webkit-transform:scale(1);
transform:scale(1);
-webkit-transition:-webkit-box-shadow ease-in-out 0.200s;
transition:-webkit-box-shadow ease-in-out 0.200s;
transition:box-shadow ease-in-out 0.200s;
transition:box-shadow ease-in-out 0.200s, -webkit-box-shadow ease-in-out 0.200s;
margin-top:1.25rem;
-webkit-box-shadow:2px 2px 5px 2px rgba(0,0,0,0.15);
box-shadow:2px 2px 5px 2px rgba(0,0,0,0.15);
 border:none
}

.button:hover{
-webkit-box-shadow:0 0 30px 7px rgba(255,255,255,0.1);
box-shadow:0 0 30px 7px rgba(255,255,255,0.1)
}

.button+*{
margin-left:2em
}

.flex-center{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center
}

.desksite-signup-form{
display:-ms-grid;
display:grid;
width:960px;
-ms-grid-rows:(auto)[3];
grid-template-rows:repeat(3, auto);
-ms-grid-columns:35% minmax(500px, 1fr) 3em;
grid-template-columns:35% minmax(500px, 1fr) 3em;
position:relative
}

.front{
color: rgba(255,255,255,.8);	
-webkit-box-ordinal-group:3;
-ms-flex-order:2;
order:2;
background-color:var(--clr-2);
background-image:-webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0)), to(var(--clr-dark)));
background-image:linear-gradient(to bottom right, rgba(0,0,0,0), var(--clr-dark));
padding:3rem;
grid-row:1 / -1;
-ms-grid-column:2;
-ms-grid-column-span:1;
grid-column:2 / 3
}

.back{
color: rgba(255,255,255,.8);
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
-ms-grid-row:2;
-ms-grid-row-span:1;
grid-row:2 / 3;
-ms-grid-column:1;
-ms-grid-column-span:1;
grid-column:1 / 2;
padding:2rem;
}

.back::after{
content:'';
display:block;
background:rgba(27,48,73,0.95);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:-1;
-ms-grid-row:2;
-ms-grid-row-span:1;
grid-row:2 / 3;
}

.form{
margin:1.5em 0 0
}

@media (max-width: 959px){
.desksite-signup-form{
display:-ms-grid;
display:grid;
width:100%;
-ms-grid-rows:auto;
grid-template-rows:auto;
-ms-grid-columns:1fr;
grid-template-columns:1fr;
position:relative
}

.front{
color: rgba(255,255,255,.8);	
-webkit-box-ordinal-group:3;
-ms-flex-order:2;
order:2;
background-color:var(--clr-2);
background-image:-webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0)), to(var(--clr-dark)));
background-image:linear-gradient(to bottom right, rgba(0,0,0,0), var(--clr-dark));
padding:2rem;
-ms-grid-row:3;
-ms-grid-row-span:1;
grid-row:3 / 4;
-ms-grid-column:1;
-ms-grid-column-span:1;
grid-column:1 / 2
}

.back{
color: rgba(255,255,255,.8);	
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
padding:2rem
}

.lost{
width:100%;
display:block;
float:left;
margin-top:1rem;
margin-left:0
}


}

.form__label{
display:-webkit-box;
display:-ms-flexbox;
display:flex
}

.form__text{
color:black;
all:unset;
display:block;
margin:.25em 0 1em;
background:var(--clr-dark);
width:calc(100% - 32px);
padding:.6em;
 border:none;
 height: calc(100% - 32px);

}

.form__tooltip{
font-size:var(--fs-small);
background:var(--clr-dark);
display:inline-block;
width:1rem;
height:1rem;
border-radius:50%;
text-align:center;
-ms-flex-item-align:center;
-ms-grid-row-align:center;
align-self:center;
margin-left:.5em;
position:relative;
line-height:1.3
}

.form__tooltip::after{
content:attr(data-tooltip);
display:none;
position:absolute;
padding:1em;
background:var(--clr-dark);
bottom:1.5em;
text-align:left;
width:250px;
color:var(--clr-1)
}

.form__tooltip:hover::after{
display:block
}


#errore{
margin-top:15px
}


@media (max-width: 400px){

	#errore{
margin-top:50px!important
}
}
/*# sourceMappingURL=login.css.map */