:root {
	--primarycolor: #4e91ba;
	--hoverprimarycolor: #1e6794;
}

.logo {
	min-width: 120px;
	max-width: 120px;
	max-height: 80px;
}

.form-signin {
	max-width: 330px;
	padding: 15px;
	margin: 120px auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.sflogin {
	background: url(../images/sflogin.jpg) no-repeat center center fixed;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.box{
	padding:5px;
}

.txtshadow
{
	color:#FFFFFF;
	text-shadow: 2px 2px 4px #000000;
}

.rosso {
	color: var(--primarycolor);
}

.boxpwddimenticata
{
	max-width:400px;
	/*background:#FFFFFF url(../images/sfpwd.png) repeat top left; */
	background:#FFFFFF; 
	margin:auto;
}

.contenutilogin{
    margin-top:100px;
    min-height:780px;
}

/*** pulsante rosso ***/

.btn-rosso {
	color: #ffffff;
	background-color: var(--primarycolor);
	border-color: var(--primarycolor);
}

	.btn-rosso:focus,
	.btn-rosso.focus {
		color: #ffffff;
		background-color: var(--primarycolor);
		border-color: var(--primarycolor);
	}

	.btn-rosso:hover {
		color: #ffffff;
		background-color: var(--hoverprimarycolor);
		border-color: var(--hoverprimarycolor);
	}

	.btn-rosso:active,
	.btn-rosso.active,
	.open > .dropdown-toggle.btn-nero {
		color: #ffffff;
		background-color: var(--primarycolor);
		border-color: var(--primarycolor);
	}

		.btn-rosso:active:hover,
		.btn-rosso.active:hover,
		.open > .dropdown-toggle.btn-rosso:hover,
		.btn-rosso:active:focus,
		.btn-rosso.active:focus,
		.open > .dropdown-toggle.btn-rosso:focus,
		.btn-rosso:active.focus,
		.btn-rosso.active.focus,
		.open > .dropdown-toggle.btn-rosso.focus {
			color: #ffffff;
			background-color: var(--primarycolor);
			border-color: var(--primarycolor);
		}

	.btn-rosso:active,
	.btn-rosso.active,
	.open > .dropdown-toggle.btn-rosso {
		background-image: none;
	}

	.btn-rosso.disabled:hover,
	.btn-rosso[disabled]:hover,
	fieldset[disabled] .btn-rosso:hover,
	.btn-rosso.disabled:focus,
	.btn-rosso[disabled]:focus,
	fieldset[disabled] .btn-rosso:focus,
	.btn-rosso.disabled.focus,
	.btn-rosso[disabled].focus,
	fieldset[disabled] .btn-rosso.focus {
		background-color: var(--primarycolor);
		border-color: var(--primarycolor);
	}

	.btn-rosso .badge {
		color: #ffffff;
		background-color: var(--primarycolor);
	}

.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}

	.btn-default:focus,
	.btn-default.focus {
		color: #333;
		background-color: #e6e6e6;
		border-color: #8c8c8c;
	}

	.btn-default:hover {
		color: #333;
		background-color: #e6e6e6;
		border-color: #adadad;
	}

	.btn-default:active,
	.btn-default.active,
	.open > .dropdown-toggle.btn-default {
		color: #333;
		background-color: #e6e6e6;
		border-color: #adadad;
	}

		.btn-default:active:hover,
		.btn-default.active:hover,
		.open > .dropdown-toggle.btn-default:hover,
		.btn-default:active:focus,
		.btn-default.active:focus,
		.open > .dropdown-toggle.btn-default:focus,
		.btn-default:active.focus,
		.btn-default.active.focus,
		.open > .dropdown-toggle.btn-default.focus {
			color: #333;
			background-color: #d4d4d4;
			border-color: #8c8c8c;
		}

	.btn-default:active,
	.btn-default.active,
	.open > .dropdown-toggle.btn-default {
		background-image: none;
	}

	.btn-default.disabled:hover,
	.btn-default[disabled]:hover,
	fieldset[disabled] .btn-default:hover,
	.btn-default.disabled:focus,
	.btn-default[disabled]:focus,
	fieldset[disabled] .btn-default:focus,
	.btn-default.disabled.focus,
	.btn-default[disabled].focus,
	fieldset[disabled] .btn-default.focus {
		background-color: #fff;
		border-color: #ccc;
	}

	.btn-default .badge {
		color: #fff;
		background-color: #333;
	}

.btn-xs,
.btn-group-xs > .btn {
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}

/****** ANIMAZIONE ******/


.area {
	background: var(--primarycolor);
	/*background: -webkit-linear-gradient(to left, var(--primarycolor), var(--primarycolor));*/
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: -10;
	top: 0;
}

.circles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

	.circles li {
		position: absolute;
		display: block;
		list-style: none;
		width: 20px;
		height: 20px;
		background: rgba(255, 255, 255, 0.2);
		animation: animate 25s linear infinite;
		bottom: -150px;
	}

		.circles li:nth-child(1) {
			left: 25%;
			width: 80px;
			height: 80px;
			animation-delay: 0s;
		}


		.circles li:nth-child(2) {
			left: 10%;
			width: 20px;
			height: 20px;
			animation-delay: 2s;
			animation-duration: 12s;
		}

		.circles li:nth-child(3) {
			left: 70%;
			width: 20px;
			height: 20px;
			animation-delay: 4s;
		}

		.circles li:nth-child(4) {
			left: 40%;
			width: 60px;
			height: 60px;
			animation-delay: 0s;
			animation-duration: 18s;
		}

		.circles li:nth-child(5) {
			left: 65%;
			width: 20px;
			height: 20px;
			animation-delay: 0s;
		}

		.circles li:nth-child(6) {
			left: 75%;
			width: 110px;
			height: 110px;
			animation-delay: 3s;
		}

		.circles li:nth-child(7) {
			left: 35%;
			width: 150px;
			height: 150px;
			animation-delay: 7s;
		}

		.circles li:nth-child(8) {
			left: 50%;
			width: 25px;
			height: 25px;
			animation-delay: 15s;
			animation-duration: 45s;
		}

		.circles li:nth-child(9) {
			left: 20%;
			width: 15px;
			height: 15px;
			animation-delay: 2s;
			animation-duration: 35s;
		}

		.circles li:nth-child(10) {
			left: 85%;
			width: 150px;
			height: 150px;
			animation-delay: 0s;
			animation-duration: 11s;
		}



@keyframes animate {

	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
		border-radius: 0;
	}

	100% {
		transform: translateY(-1000px) rotate(720deg);
		opacity: 0;
		border-radius: 100%;
	}
}