#mainbox {
	position:fixed;
	top:50%;
	left:50%;
	width:77%;
	height:90%;
	transform: translate(-50%, -50%);
	box-shadow: 0px 0 5px #ccc;
  border-radius: 9px;
  overflow: hidden;
	box-sizing: border-box;
}

.mainboxelement {
	position:relative;
	float:left;
	width:50%;
	height:100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: center;
  background-size: cover; 
  overflow-x: hidden;
  overflow-y: auto;
}

#ciancircle {
	position:absolute;
	left:1px;;
	width:230px;
	top:1px;
	height:230px;
	background-color:#A6E4F8;
	opacity:.5;
	border-radius: 50%;
}

.inputdiv2 {
	position:relative;
	width:9%;
	height:56px;
	float:left;
	margin-bottom:1rem;
	box-sizing: border-box;
	background-color: #fff;
	border-radius:3px;
}

.inputdiv3 {
	position:relative;
	width:90%;
	height:56px;
	margin-bottom:1rem;
	box-sizing: border-box;
	background-color: #fff;
	border-radius:3px;
}

.ml16 {
	margin-left:15px;
}

.ml16a {
	margin-left:0px;
}

.ml16b {
	margin-left:19px;
}

.inputfield1 {
	position:absolute;
	left:50%;
  text-align:center;
	width:95%;
	height:100%;
	top:0px;
  background-color:#fff;
  padding:5px;
  border: 1px solid #fff;
	display: block;
	outline: none;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-clip: padding-box;
  border-radius: .25rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  transform:translateX(-50%);
}
.inputfield1:focus {
	border: 3px solid #83BAF8;
}


#mainboxelement1_1 {
	position:absolute;
	top:0px;
	left:50%;
	transform:translateX(-50%);
	width:480px;
	height:100%;
	padding-top:1.5rem!important;
	padding-bottom:1.5rem!important;	
}

#logodicg {
	position:relative;
	width:100%;
	text-align:center !important;
	margin-top:1rem !important;
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
  line-height: 1.2;
  box-sizing: border-box;
  font-family: 'Open Sans', 'sans serif';	
}

#logodisp {
	position:relative;
	width:100%;
	text-align:center !important;
	margin-top:1rem !important;
	font-size: 1.75rem;
	margin-bottom: 1rem;
  line-height: 1.2;
  box-sizing: border-box;
  font-family: 'Open Sans', 'sans serif';	
  font-weight:bold;
}

.inputfield {
	position:absolute;
	left:0px;
	width:100%;
	height:100%;
	top:0px;
  background-color: #fff;
  padding: 12px 25px 15px 25px;
  border: 1px solid #fff;
	display: block;
	outline: none;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-clip: padding-box;
  border-radius: .25rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.inputfield:focus {
	border: 3px solid #83BAF8;
}

#loginform {
	position:relative;
	margin-bottom: 1rem;
	width:100%;
}

.codestring {
	position:relative;
	left:50%;
	transform:translateX(-50%);
}

.inputdiv {
	position:relative;
	width:100%;
	height:38px;
	margin-bottom:1rem;
	box-sizing: border-box;
	background-color: #fff;
	border-radius:3px;
}

.inputdiv5 {
	position:relative;
	width:100%;
	height:158px;
	margin-bottom:1rem;
	box-sizing: border-box;
	background-color: #fff;
	border-radius:3px;
}

.linklogin1 {
  color: #212529;
	cursor:pointer;
	text-decoration:underline;
}

.inputdiv3 {
	position:relative;
	width:100%;
	height:38px;
	line-height:1.1rem;
	margin-bottom:1rem;
	box-sizing: border-box;
	text-align:center;
}

.inputdiv4 {
	font-size:1.1rem;;
	font-weight:bold;
}


#accedi {
	width:100%;
	background-color:#191919;
	color:#fff;
	font-size: 1rem;
  font-weight: 700;
  padding: 1rem 1.75rem 1rem 1.75rem;
  border: none;
	font-family: 'Open Sans';
	cursor:pointer;
	border-radius: 6px;
  margin: 20px 0;
  line-height: 1.5;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#accedi:hover {
	background-color:#ffed4e;
	color:#191919;
}

#accedi1 {
	width:100%;
	background-color:#191919;
	color:#fff;
	font-size: 1rem;
  font-weight: 700;
  padding: 1rem 1.75rem 1rem 1.75rem;
  border: none;
	font-family: 'Open Sans';
	cursor:pointer;
	border-radius: 6px;
  margin: 20px 0;
  line-height: 1.5;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#accedi1:hover {
	background-color:#ffed4e;
	color:#191919;
}

#newcode {
	margin-bottom: 1.5rem !important;
	margin-top: .5rem !important;
	box-sizing: border-box;
	font-family: 'Open Sans', 'sans serif';
	font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
}

#recoverpass {
	margin-bottom: 1.5rem !important;
	margin-top: .5rem !important;
	box-sizing: border-box;
	font-family: 'Open Sans', 'sans serif';
	font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
}

#noregister {
	margin-top: .5rem !important;
	margin-bottom: .5rem !important;
	box-sizing: border-box;
	font-family: 'Open Sans', 'sans serif';
	font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
}

#warning0 {
	margin-top: 1.5rem !important;
	margin-bottom: .5rem !important;
	box-sizing: border-box;
	font-family: 'Open Sans', 'sans serif';
	font-size: .8rem;
  font-weight: 400;
  line-height: 1.5;
  color: #414549;
  text-align: left;
}

.linklogin {
	font-weight:bold;
  color: #212529;
	cursor:pointer;
	text-decoration:underline;
}
.linklogin {
}

@media (max-width: 1250px) {
	#ciancircle {
	width:200px;
	height:200px;
	}
}

@media (max-width: 1080px) {
	#ciancircle {
		width:175px;
		height:175px;
	}
	#mainboxelement1_1 {
		position:absolute;
		left:0px;
		transform:translateX(0%);
		width:100%;
		padding:1.5rem!important;
	}
}

@media (max-width: 950px) {
	#ciancircle {
		width:140px;
		height:140px;
	}
	#recoverpass {
		margin-bottom: 1rem !important;
		margin-top: .4rem !important;
		font-size: .8rem;
	}
	#noregister {
		margin-top: .4rem !important;
		margin-bottom: .4rem !important;
		font-size: .8rem;
	  line-height: 1.2;
	}
	#warning0 {
		margin-top: 1rem !important;
		margin-bottom: .4rem !important;
		font-size: .7rem;
	  line-height: 1.2;
	}
}

@media (max-width: 768px) {
	#mainboxelement1 {
		width:100%;
	}
	#mainboxelement2 {
		display:none;
	}
	#mainbox {
		width:90%;
	}
}

