body{background: #222;}


/* FORM */
form *{box-sizing: border-box;}
form a{color: #fff;}
form a:hover{color: rgba(255,255,255,.65);}
form .formItem{position: relative; margin: auto auto 5px auto; width: 100%;}



/* SELECT */
select{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
select.not_chosen{color:#3E4554;}
select option{color:#3E4554; }
select option[default]{color:#fff; font-size:0px; display:none;}


/* INPUT */
.form-control{
	#-webkit-appearance: none;
	width: 100%;
	border: 0;
	font-family: inherit;
	padding: 15px 0 10px 12px;
	height: auto;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 0 solid transparent;
	background: none;
	border-radius: 0;
	color: rgb(22, 44, 72);
	transition: all .15s ease;
	box-shadow:none;
	z-index: 1;
	position: relative;
}
.form-control:focus{
	box-shadow: none !important; outline: none;
	border-bottom: 0 solid transparent;
}

/* Label */
.form-control + div{
	color: rgba(0,158,226,.6);
	position: absolute;
	bottom: 10px;
	left: 10px;
	
	#z-index: -1;
	transition: all .15s ease;
	font-weight: bold;
}
input.form-control:focus + div,
input.form-control:valid + div,
select:focus + div,
select:not(.not_chosen) + div{
	color: rgba(0,158,226,1);
	transform: translateY(-22px)  translateX(0);
	font-size: .7em;
	font-weight: 400;
	background: #fff;
	padding: 0 5px;
	z-index: 2;
}


/* placeholder */
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(0,0,0,.3);
}
.form-control::-moz-placeholder { /* Firefox 19+ */
  color: rgba(0,0,0,.3);
}
.form-control:-ms-input-placeholder { /* IE 10+ */
  color: rgba(0,0,0,.3);
}
.form-control:-moz-placeholder { /* Firefox 18- */
  color: rgba(0,0,0,.3);
}
select.not_chosen{color:rgba(0,0,0,.3);}

/* estilo de input y estados ////////////////////////////////////*/
/* input border bottom */
.form-control + div + .border{
	background: rgba(0,158,226,1);
	position: absolute;
	bottom: 0; left: 0;
	height: 2px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 0;
	transition: all .35s ease;
	z-index: 2;
}
input.form-control:focus + div + .border,
input.form-control:valid + div + .border,
select:focus + div + .border,
select:not(.not_chosen) + div + .border{
	transform: scaleX(1);
}
/* input bordes redondeados */
.form-control + div + .borderRadius{
	position: absolute;
	top: 5px;bottom: 0;left: 0;right: 0;
	margin:auto;
	border:solid 2px rgba(255,255,255,.65);
	border-radius: 12px;
	overflow: hidden;
	#z-index: -1;
	transition: all .35s ease;
	background: rgba(255,255,255,.8);
}
input.form-control:focus + div + .borderRadius,
input.form-control:valid + div + .borderRadius,
select:focus + div + .borderRadius,
select:not(.not_chosen) + div + .borderRadius{ 
	border-color: #EF4136;
}
/*///////////////////////////////////////////////////////////////*/
/* EMAIL */
#email input.form-control{
	text-transform: lowercase;
}


/* CHECKBOX */
input[type="checkbox"]{
	display: none;
}
input[type="checkbox"] + label{
	#font-size: .8em;
	position: relative;
	padding-left: 30px;
	padding-top: 11px;
	cursor: pointer;
	color: rgba(255,255,255,1);
}
input[type="checkbox"] + label:before, 
input[type="checkbox"] + label:after{
	font-size: 30px;
	font-family: FontAwesome;
	position: absolute;
	top: 0;
	left:0;
}
input[type="checkbox"] + label:before{
	content: '\f096';
}
input[type="checkbox"] + label:after{
	content: '\f00c';
	font-size: 18px;
	top: 8px; left: 0;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: all 0.30s;
	-moz-transition: all 0.30s;
	-o-transition: all 0.30s;
	transition: all 0.30s;
	color: rgba(255,255,255,.65);
}
input[type="checkbox"]:checked + label::after{
	max-width: 23px;
	opacity: 1;
	width: 23px;
}
input[type="checkbox"]:checked + label{
	color:rgba(255,255,255,1);
}


/* FILE */
input[type='file']#file {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
 }
label[for='file'] {
 #font-size: 14px;
 #font-weight: 600;
 #color: #fff;
 #background-color: #106BA0;
 #display: inline-block;
 #transition: all .5s;
 #cursor: pointer;
 #padding: 10px 20px !important;
 #text-transform: uppercase;
 #width: fit-content;
 #text-align: center;
 #display: inline-block;
 }


/* BTN */
.submitbtn{background: red;padding:8px 100px;}
.submitbtn:not([disabled]):hover{background: #7BF4D5;}
.submitbtn:not([disabled]):hover, .submitbtn, .submitbtn[disabled]{color: #121126;text-transform: uppercase;font-size: 1.2em;font-weight: 600;letter-spacing: 3px;margin-top: 9px;}


.respuesta{
}
.loadingdiv{
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    background-size: cover;
    vertical-align: middle;
}
.loadingdiv i,
.loadingdiv span{
	position: absolute;
}
/*
placeholder: rgba(0,0,0,.4);
color :#333;
color active: #fff;
btn: #0077FF;
btn: hover #004FAA;
PRELOAD: http://www.uch.edu.pe/sites/default/files/loading.gif;
*/

.checklist .form-control p{
	padding: 0 0 0 3px;
	height: auto;
	font-size: 14px;
	font-weight: 600;
}
.checklist.active input.form-control{
	display: none;
}
.checklist input.form-control + div + .borderRadius + span{
	display: none;
}
.checklist input.form-control:focus + div + .borderRadius + span,
.checklist input.form-control:valid + div + .borderRadius + span,
.checklist.active input.form-control + div + .borderRadius + span{
	display: block;
}

.checklist input[type="checkbox"] + label:after{
	font-size: 16px;
	top: 8px; left: 4px;
}