*,
	*:after,
	*:before 
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
	html, body 
	{
		position: absolute;
		height: 100%;
		width: 100%;
		background: rgb(243, 243, 243);
		color: rgba(0,0,0,0.6);
		font-family: RobotoDraft,Roboto;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
	body header {
		position: relative;
		width: 100%;
		height: 80px;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
		background: #5F1678;
		font-size: 30px;
		font-weight: 300;
		color: rgb(242, 251, 253);
		text-align: center;
		line-height: 75px;
	}
	@media only screen and (max-width: 2900px) {
		div.admin_icon{
			width: 96%;
			position: absolute;
			cursor: pointer;
		}
		img.admin_icon{
			left: 0;
			text-align: left;
			width: 16px;
			opacity: 0.4;
			position: absolute;
		}
		img.admin_icon:hover{
			width: 16px;
			opacity: 1;
		}
		img.back_icon{
			position: absolute;
			right: 0;
			text-align: right;
			width: 16px;
			opacity: 0.4;
		}
		img.back_icon:hover{
			width: 16px;
			opacity: 1;
		}
		.copyright {
			position: absolute;
			width: 100%;
			bottom: 0;
			text-align: center;
			font-size: 12px;
			padding-bottom: 25px;
		}
		img.logo_fccc{
			width: 50px;
		}
		.logo_empresa{
			width: 	300px;
			margin-top: 10px;
		}
		.login {
			position: relative;
			padding: 10px;
			margin-top: 10px;
			margin: 40px auto 80px auto;
			width: 400px;
			height: 460px;
			border-radius: 3px;
			background: white;
			box-shadow: 0 1px 5px 0 rgba(0,0,0,0.26);
			overflow: hidden;
		}
		.login > i {
			position: relative;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			float: right;
			cursor: pointer;
		}
		.login .photo {
			position: relative;
			width: 100px;
			height: 100px;
			margin: 30px 135px;
			border-radius: 50%;
			background: rgb(223, 223, 223);
			border: 13px solid rgb(223, 223, 223);
			overflow: hidden !important;
			transform: rotate(-1deg);
		}
		.login .photo:before {
			position: absolute;
			content: '';
			width: 35px;
			height: 35px;
			top: 0px;
			right: 18px;
			border-radius: 50%;
			background: #aaa;
			border: 2px solid #fff;
			transform: scale(0);
			transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
			-webkit-animation: user-head 0.5s 0s forwards;
			-moz-animation: user-head 0.5s 0s forwards;
			-ms-transition: user-head 0.5s 0s forwards;
			-o-transition: user-head 0.5s 0s forwards;
			animation: user-head 0.5s 0s forwards;
		}
		.login .photo:after {
			position: absolute;
			content: '';
			width: 140px;
			height: 220px;
			top: 38px;
			right: -32px;
			border-radius: 50%;
			background: #aaa;
			border: 2px solid #fff;
			transform: translateY(36px);
			transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
			-webkit-animation: user-body 0.5s 0.3s forwards;
			-moz-animation: user-body 0.5s 0.3s forwards;
			-ms-transition: user-body 0.5s 0.3s forwards;
			-o-transition: user-body 0.5s 0.3s forwards;
			animation: user-body 0.5s 0.3s forwards;
		}
		.login > span {
			display: block;
			text-align: center;
			margin: -15px 0;
			font-size: 15px;
		}
		form {
			position: relative;
			width: 100%;
			margin: 50px 15px;
		}
		.form-group {
			width: 92%;
			position: relative;
			margin-top: 35px;
			margin-bottom: 20px;
		}
		.form-control {
			display: block;
			height: 36px;
			width: 100%;
			border: none;
			border-radius: 0 !important;
			font-size: 15px;
			font-family: inherit;
			font-weight: 300;
			padding: 0;
			background-color: transparent;
			box-shadow: none;
			border-bottom: 1px solid rgba(117, 117, 117, 0.15);
		}
		.form-control:focus {
			border-bottom: 2px solid #5F1678;
			outline: none;
			box-shadow: none;
		}
		.form-highlight {
			position: absolute;
			height: 60%;
			width: 60px;
			top: 25%;
			left: 0;
			pointer-events: none;
			opacity: 0.4;
		}
		.form-control:focus ~ .form-highlight {
			-webkit-animation: inputHighlighter 0.3s ease;
			-moz-animation: inputHighlighter 0.3s ease;
			-ms-transition: inputHighlighter 0.3s ease;
			-o-transition: inputHighlighter 0.3s ease;
			animation: inputHighlighter 0.3s ease;
		}
		.float-label {
			position: absolute;
			left: 0;
			top: 10px;
			font-size: 16px;
			color: #999;
			font-weight: 300;
			transition: 0.2s ease all;
			-moz-transition: 0.2s ease all;
			-webkit-transition: 0.2s ease all;
			-ms-transition: 0.2s ease all;
			-o-transition: 0.2s ease all;
		}
		.form-control:focus ~ .float-label, .form-control:valid ~ .float-label {
			top: -15px;
			font-size: 12px;
		}
		.form-group erroru, .form-group errorp {
			position: absolute;
			width: 100%;
			left: 0;
			top: 38px;
			font-size: 11px;
			color: #d34336;
			font-weight: 300;
			transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
			-moz-transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
			-webkit-transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
			-ms-transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
			-o-transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
			opacity: 0;
		}
		.form-group erroru i,.form-group errorp i {
			position: absolute;
			right: 0;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			float: right;
		}
		.form-group erroru i svg, .form-group errorp i svg {
			fill:#d34336;
		}
		.form-group[errr] .float-label {
			color: #d34336 !important;
		}
		.form-group[errr] .form-control {
			border-bottom: 1px solid #d34336 !important;	
		}
		.form-group[errr] .form-control:focus {
			border-bottom: 2px solid #d34336 !important;	
		}
		.form-group[errr] erroru, .form-group[errr] errorp  {
			opacity: 1;
		}
		input[type=checkbox]
		{
			display: none;
			visibility: hidden;
		}
		input[type="checkbox"] + label
		{
			cursor: pointer;
			font-size: 15px;
			font-weight: 500;
			transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
		}
		input[type="checkbox"] + label:before
		{
			display: inline-block;
			content: "";
			margin: 0 15px 3px 0px;
			width: 18px;
			height: 18px;
			background-color: #fff;
			border: 2px solid #5a5a5a;
			border-radius: 2px;
			vertical-align: middle;
		}
		input[type=checkbox]:checked + label:before
		{
			background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDIwIDE1Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNy4xNDMsMTQuOTM4IDAsNy43OTYgMi4wMjEsNS43NzYgNy4xNDMsMTAuODk4IDE3Ljk3OSwwLjA2MiAyMCwyLjA4MiAiLz4NCjwvc3ZnPg0K');
			background-color: #5F1678;
			border-color: #5F1678;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			-webkit-background-size: 11px auto;
			-moz-background-size: 11px auto;
			-o-background-size: 11px auto;
			-ms-transition: 11px auto;
			background-size: 11px auto;
		}
		button[type="submit"] {
			position: relative;
			float: right;
			font-family: inherit;
			font-weight: 100;
			font-size: 15px;
			border: 0;
			width: 100%;
			margin: -3px 0px;
			padding: 5px 15px;
			border-radius: 3px;
			cursor: pointer;
			background: #5F1678;
			color: #fff;
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
		}
		button[type="submit"]:focus {
			outline: none;
		}
		footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 30px;
			margin-left: -10px;
			line-height: 29px;
			text-align: center;
			cursor: pointer;
			border-top: 1px solid rgba(117, 117, 117, 0.15);
		}
		footer a {
			display: block;
			text-decoration: none;
			font-size: 12px;
			color: inherit;
		}
		footer a:hover {
			color: rgba(0,0,0,0.9);
			text-decoration: underline;
		}
		footer a:focus {
			outline: none;
		}

		.copyright a {
			text-decoration: none;
			color: #5F1678;
		}
		.copyright a:hover {
			transition: none;
			border-bottom: 1px solid #5F1678;
		}
		/* -- highlighter animation --------------------------- */
		@-webkit-keyframes inputHighlighter {
			from { background:#5264AE; }
			to { width:0; background:transparent; }
		}
		@-moz-keyframes inputHighlighter {
			from { background:#5264AE; }
			to { width:0; background:transparent; }
		}
		@keyframes inputHighlighter {
			from { background:#5264AE; }
			to { width:0; background:transparent; }
		}
		@-webkit-keyframes user-head {
			100% {
				-webkit-transform:scale(1);
				transform:scale(1);
				-moz-transform:scale(1);
			} 
		}
		@-moz-keyframes user-head {
			100% {
				-webkit-transform:scale(1);
				transform:scale(1);
				-moz-transform:scale(1);
				-ms-transition:
				-o-transition: 
			} 
		}
		@keyframes user-head {
			100% {
				-webkit-transform:scale(1);
				transform:scale(1);
				-moz-transform:scale(1);
			} 
		}
		@-webkit-keyframes user-body {
			100% {
				-webkit-transform:translateY(2px);
				transform:translateY(2px);
				-moz-transform:translateY(2px);
			} 
		}
		@-moz-keyframes user-body {
			100% {
				-webkit-transform:translateY(2px);
				transform:translateY(2px);
				-moz-transform:translateY(2px);
			} 
		}
		@keyframes user-body {
			100% {
				-webkit-transform:translateY(2px);
				transform:translateY(2px);
				-moz-transform:translateY(2px);
			} 
		}
		[ripple] {
			position: relative;
			overflow: hidden;
			-webkit-transition: box-shadow .4s;
			-moz-transition: box-shadow .4s;
			-ms-transition: box-shadow .4s;
			-o-transition: box-shadow .4s;
			transition: box-shadow .4s;
			cursor: inherit;
		}
		[ripple] .touch {
			background: rgba(255, 255, 255, 0.3);
			pointer-events: none;
			border-radius: 100%;
		}
	}
	@media only screen and (max-width: 500px) {
		div.admin_icon{
			width: 95%;
			position: absolute;
			cursor: pointer;
			margin: 0 auto;
			left: 0;
			right: 0;
			margin-right: auto;
			margin-left: auto;
			margin-top: 10px;

		}
		.copyright {
			position: absolute;
			width: 100%;
			bottom: 0;
			text-align: center;
			font-size: 12px;
			padding-bottom: none;
		}
		.form-group {
			width: 100%;
			position: relative;
			margin-top: 35px;
			margin-bottom: 20px;
		}
		.login {
			padding: 0px;
			margin: 20px auto 80px auto;
			width: 95%;
		}
		.copyright {
			position: relative;
			width: 100%;
			bottom: 0;
			margin-top: 0%;
			margin-bottom: 5%;
		}
		.login .photo {
			width: 100px;
			height: 100px;
			margin: 30px 35%;
		}
		.form-control {
			width: 90%;
		}
		button[type="submit"] {
			float: left;
			width: 90%;
		}
	}
	@media only screen and (max-width: 335px) {
		body header {
			position: relative;
			width: 100%;
			height: 70px;
		}
		.logo_empresa{
			width: 260px;
			margin-top: -8px;
		}
		.login .photo {
			position: relative;
			width: 100px;
			height: 100px;
			margin: 30px 32%;
			border-radius: 50%;
			background: rgb(223, 223, 223);
			border: 13px solid rgb(223, 223, 223);
			overflow: hidden !important;
			transform: rotate(-1deg);
		}
		.form-control {
			width: 75%;
		}
		.copyright {
			position: relative;
			width: 100%;
			bottom: 0;
			margin-top: 0%;
			margin-bottom: 5%;
		}
		button[type="submit"] {
			width: 75%;
		}
	}