@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

/* HTML Elements */

html, body {
	height: 100%;
}

body {
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #f3f3f4;
	font-size: 13px;
	color: #676a6c;
	overflow-x: hidden;
}

h3, h4, h5 {
	margin-top: 5px;
	font-weight: 600;
}

.small, small {
	font-size: 80%;
	font-weight: 400;
}

/* INSPINIA Custom*/

.loginscreen.middle-box, .container-fluid {
	width: 99vw;
	min-height: 97vh;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.loginscreen.middle-box{
	display: flex;
}


.wrapper{ max-width: 300px; }
.logo-name {
	color: #c5c4c4;
	font-size: 60px;
	letter-spacing: 0;
	margin-bottom: 0;
}
.sub-logo{
	color: #e6e6e6;
}

#logout {
	color: #9900cc;
	border-color: #9900cc;
	background-color:transparent;
	position: fixed;
	top: -35px;
	right: 50px;
	border-radius: 3px;
	z-index: 50;
	transition: .5s ease-in-out;
}
#logout:hover {
	color: #fff;
	border-color: #9900cc;
	background-color: #9900cc;
}

/* Forms */
.form-control {
	background-color: #FFFFFF;
	background-image: none;
	border: 1px solid #e5e6e7;
	border-radius: 1px;
	color: inherit;
	display: block;
	padding: 6px 12px;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	width: 100%;
	line-height: 1.5;
	box-shadow: none;
}
.form-control.error:focus{
	border-color: red;
	border-style: dotted;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.form-control:focus{
	border-color: #337ab7;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.input-group-addon:first-child {
	border: 1px solid #e5e6e7;
	border-right: 0;
	border-radius: 1px;
	background: #8080804a;
}

.error{
	border: 1px dotted rgba(255, 0, 0, 0.51);
	background: rgba(255, 0, 0, 0.09);
}

.btn{
	border-radius: 0;
}
.btn-primary{
	color: #fff;
	background-color: #9900cc;
	border-color: #9900cc;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active:focus {
	color: #fff;
	background-color: #9900cc;
	border-color: #9900cc;
}

.buttonsGroup:first-child{
	margin-top: 40vh;
	margin-bottom: 5vh;
}

/* Helpers */

.text-center { text-align: center!important; }
.text-left{	text-align: left!important; }
.text-muted { color: #888888 !important; }

.m-t { margin-top: 15px; }
.m-b { margin-bottom: 15px; }

.vcenter { vertical-align: middle !important; }


/* Cool Button */

.icon {
	position: absolute;
	width: 64px;
	height: 64px;
	display: block;
	fill: white;
	top: -20px;
	opacity: 0;
	left: calc(50% - 32px);
}
.icon.active {
	top: 0;
	opacity: 1;
	transition: 0.3s ease-in-out;
	transition-delay: 2.8s;
}

.btn-cool {
	width: 150px;
	height: 60px;
	position: relative;
	background-color: transparent;
	border: 2px solid #819aa9;
	border-radius: 50px;
	color: #819aa9;
	font-weight: 400;
	font-size: 1.2em;
	cursor: pointer;
	overflow: hidden;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.btn-cool.active {
	-webkit-animation: upload 3s ease-in-out forwards;
	animation: upload 3s ease-in-out forwards;
}
.btn-coll:focus{
	outline: 0;
}

.rest {
	-webkit-transform: scale(0);
	transform: scale(0);
	clip: rect(0, 84px, 84px, 42px);
	height: 84px;
	width: 84px;
	position: absolute;
	left: calc(50% - 42px);
	top: calc(50% - 42px);
}
.rest.active {
	-webkit-animation: animate 1.05s linear 2;
	animation: animate 1.05s linear 2;
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.rest.active:after {
	-webkit-animation: animate2 1.05s linear 2;
	animation: animate2 1.05s linear 2;
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.rest:after {
	-webkit-transform: scale(0);
	transform: scale(0);
	clip: rect(0, 84px, 84px, 42px);
	content: "";
	border-radius: 50%;
	height: 84px;
	width: 84px;
	position: absolute;
}

@-webkit-keyframes upload {
	0% {
		width: 150px;
		height: 60px;
		color: #819aa9;
		background-color: transparent;
	}
	7% {
		width: 155px;
		height: 55px;
		font-size: 1.25em;
		color: #ffffff;
		background-color: #819aa9;
	}
	10% {
		width: 150px;
		height: 60px;
		font-size: 1.2em;
		color: transparent;
	}
	20% {
		width: 60px;
		height: 60px;
		font-size: 0em;
		background-color: transparent;
	}
	90% {
		width: 60px;
		height: 60px;
		color: transparent;
		font-size: 0em;
		background-color: transparent;
	}
	100% {
		width: 150px;
		height: 60px;
		color: transparent;
		font-size: 0em;
		background-color: #819aa9;
	}
}

@keyframes upload {
	0% {
		width: 150px;
		height: 60px;
		color: #819aa9;
		background-color: transparent;
	}
	7% {
		width: 155px;
		height: 55px;
		font-size: 1.25em;
		color: #ffffff;
		background-color: #819aa9;
	}
	10% {
		width: 150px;
		height: 60px;
		font-size: 1.2em;
		color: transparent;
	}
	20% {
		width: 60px;
		height: 60px;
		font-size: 0em;
		background-color: transparent;
	}
	90% {
		width: 60px;
		height: 60px;
		color: transparent;
		font-size: 0em;
		background-color: transparent;
	}
	100% {
		width: 150px;
		height: 60px;
		color: transparent;
		font-size: 0em;
		background-color: #819aa9;
	}
}
@-webkit-keyframes animate {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform: rotate(220deg);
		transform: rotate(220deg);
	}
}
@keyframes animate {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform: rotate(220deg);
		transform: rotate(220deg);
	}
}
@-webkit-keyframes animate2 {
	0% {
		box-shadow: inset #f36d66 0 0 0 4px;
		-webkit-transform: rotate(-140deg);
		transform: rotate(-140deg);
	}
	100% {
		box-shadow: inset #f36d66 0 0 0 4px;
		-webkit-transform: rotate(140deg);
		transform: rotate(140deg);
	}
}
@keyframes animate2 {
	0% {
		box-shadow: inset #f36d66 0 0 0 4px;
		-webkit-transform: rotate(-140deg);
		transform: rotate(-140deg);
	}
	100% {
		box-shadow: inset #f36d66 0 0 0 4px;
		-webkit-transform: rotate(140deg);
		transform: rotate(140deg);
	}
}
@-webkit-keyframes done {
	0% {
		top: -20px;
	}
	100% {
		top: 0px;
	}
}
@keyframes done {
	0% {
		top: -20px;
	}
	100% {
		top: 0px;
	}
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes shake {
	0%, 100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	10%, 30%, 50%, 70%, 90% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}

	20%, 40%, 60%, 80% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
}

@keyframes shake {
	0%, 100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	10%, 30%, 50%, 70%, 90% {
		-webkit-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
		transform: translateX(-10px);
	}

	20%, 40%, 60%, 80% {
		-webkit-transform: translateX(10px);
		-ms-transform: translateX(10px);
		transform: translateX(10px);
	}
}

.shake {
	-webkit-animation-name: shake;
	animation-name: shake;
}