body{
	text-align: center;
	vertical-align: center;
	background: #bdbdbb;
	font: 12px/20px 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
}
h2{
	font-size: 2em;
}

form {
	margin: 2em 0;
	margin-top: 0;
	text-align: left;
}
/**
* Make the field a flex-container, reverse the order so label is on top.
*/

.field {
	display: flex;
	flex-flow: column-reverse;
	margin-bottom: 7px;
}
/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the 
* pesky delay.
*/
label, input {
	transition: all 0.2s;
	touch-action: manipulation;
}

input , .custom-file-upload {
	font-size: 1.5em;
	border: 0;
	border-bottom: 1px solid #14395C;
	font-family: inherit;
	-webkit-appearance: none;
	border-radius: 0;
	padding:  7px 5px;
	padding-left: 10px;
	cursor: text;
}

input:focus {
	outline: 0;
	border-bottom: 2px solid #14395C;
}

label {
	padding-left:  5px;
	color: #da6964;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
label > span{
	display: none;
	font-size: 65%;
}


/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
input:placeholder-shown + label {
	cursor: text;
	max-width: 66.66%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform-origin: left bottom;
	transform: translate(0, 2.125rem) scale(1.5);
}

/**
/**
* By default, the placeholder should be transparent. Also, it should 
* inherit the transition.
*/
::-webkit-input-placeholder {
	opacity: 0;
	transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
input:focus::-webkit-input-placeholder {
	opacity: 1;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when 
* there's something in the input at all.
*/
input:not(:placeholder-shown) + label,
input:focus + label {
	transform: translate(0, 0) scale(1);
	cursor: pointer;
}
input.invalid:not(:placeholder-shown) + label > span, input.invalid:focus + label > span{
	display: inline-block;
	color: #212529;
}
input[type="file"], .fieldcfrmPwd{
	display: none;
}
.formHolder{
	/*margin:  0 auto;*/
	text-align: left;
	width:  100%;
}
.custom-file-upload {
	background: #ffffff;
	margin-top: 20px;
}

.styledBtn{
	border: 1px solid #da6964;
	color: #da6964;
	font-weight: bold;
	font-size: 1.1em;
	background: transparent;
	padding: 10px 20px;
	border-radius: 6px;
	border-width: 2px;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.1	em;
}
.frmLogin .styledBtn.btnLogin, .frmRegs .styledBtn.btnRegs{
	border-color: #14395C;
	color: #14395C;
	background: #da6964;
}
a.styledBtn{
	text-decoration: none;
	outline: none;
	color: #da6964;
	text-align: center;
}
.frmLogin .titleRegs{
	display: none;
	background: #123;
}
.frmRegs .titleLogin{
	display: none;
}
.frmRegs .btnField{
	flex-flow: column;
}
.frmRegs .fieldcfrmPwd{
	display: flex;
}
.contentContainer{
	position: relative;
	border-radius: 15px;
	background: #cccccc;
	min-width:  320px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding:  20px;
	box-sizing: border-box;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.centerVertical{
	position: relative;
	width: 100%;
	height: 100vh;
}
.centerVertical > div{
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;top: 50%;
}