*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
	font-family: helvetica, verdana, arial;
	margin: 0;
}

html {
  background: url('../img/login/main-bg-wallpaper-cover.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

div.logoContainer { display: table; margin: 0 auto; padding: 60px 60px 40px 60px; }

div.logoContainer img { max-width: 100%; }


.clear { clear: both; }
img { border: 0; }

.pageContentContainer {
	min-height: 300px;
	padding: 30px 0;
}

.mainContainer {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.row { margin-right: -15px; margin-left: -15px; }
.row:before, .row:after { display: table; content: " "; }
.row:after { clear: both; }

.row .column-2 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

div.servicesContainer { display: inline-block; }
div.servicesContainer a img { display: inline-block; }
div.servicesContainer a {
	background: #fff;
	float: left;
	display: block;
	padding: 3px 15px;
	height: 30px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin-right: 10px;
}

.footer { text-align: center; padding: 0 30px; }

div.centeredContentContainer { display: table; margin: 0 auto; }

.errorMessage { border: 1px solid #c00; margin: 10px 20px 20px 20px; padding: 15px; text-align: center; background: rgba(120, 0, 0, 0.5); }
.successMessage { border: 1px solid #090; margin: 10px 20px 20px 20px; padding: 15px; text-align: center; background: rgba(0, 120, 0, 0.5); }
.infoMessage { border: 1px solid #e26901; margin: 10px 0 20px 0; padding: 15px; text-align: center; background: rgba(169, 78, 0, 0.5); }

/* TEXT STYLES */

h1 { margin: 0 0 20px 0; font-size: 24px; }

a { color: #fff; text-decoration: none; }


.pageContentContainer { color: #fff; }

h1 { font-weight: normal; }
h2 { font-weight: normal; font-size: 14px; }

p, ul, ol { font-size: 14px; line-height: 18px; color: #fff; }

.pageContentContainer ul p { margin-top: 0; }
.pageContentContainer ul h2 { margin-bottom: 0; }


.centeredText { text-align: center; }
.linkPadding { padding: 0 15px; }


/* BUTTONS */

a.button, input.button {
	outline: 0;
  border: none;
  -webkit-appearance: none;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	display: inline-block;
	font-size: 14px;
	line-height: 40px;
	padding: 0 20px;
	position: relative;
	text-decoration: none;
	width: auto !important;
	background: #0a0a0a;
	color: #ffffff;
  cursor: pointer;
}
input.button:focus { border: none; }

.rightMargin { margin-right: 20px;}



/* FORM STYLING */

label { color: #bdbdbd; }


.group input.error { border-bottom:1px solid #c00; }

.group {
	position:relative;
	margin-bottom:45px;

}
.group input, .group textarea {
	font-size:18px;
	padding:10px 10px 10px 5px;
	display:block;
	width:300px;
	border:none;
	color: #fff;
	background: none;
	border-bottom: 1px solid #bdbdbd;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.group textarea {
	position: relative;
	font-family:'Roboto';
	max-width: 300px;

	/* fallback height for Opera Mini*/
	height: 6em;

	/* height for 3 lines + padding top and bottom*/
	height: calc(1.6em*3 + 20px);

	line-height: 1.6em;
	padding-left: 5px;
	/*remove scrollbar in IE*/
	overflow: auto;
}

input:focus, textarea:focus, input.error:focus, textarea.error:focus { outline:none; border-bottom:1px solid #444; }

/* LABEL ======================================= */
.group label,
.group input:placeholder-shown ~ label,
.group textarea:placeholder-shown ~ label {
	color:#ccc;
	font-size:18px;
	font-weight:normal;
	position:absolute;
	pointer-events:none;
	left:5px;
	top:10px;
	transition:0.2s ease all;
	-moz-transition:0.2s ease all;
	-webkit-transition:0.2s ease all;
	z-index: 1;
}

/* active state */
/* changed from input:valid to a state which check if input is empty*/
.group input:focus ~ label,
.group textarea:focus ~ label,
.group input:not(:placeholder-shown) ~ label,
.group textarea:not(:placeholder-shown) ~ label {
	top:-20px;
	font-size:14px;
	color: #fff;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
	content:'';
	height:2px;
	width:0;
	bottom:1px;
	position:absolute;
	background: #fff;
	transition:0.2s ease all;
	-moz-transition:0.2s ease all;
	-webkit-transition:0.2s ease all;
}
.bar:before {
	left:50%;
}
.bar:after {
	right:50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after,
textarea:focus ~ .bar:before, textarea:focus ~ .bar:after
{
	width:50%;
}



/* HIGHLIGHTER ================================== */
.highlight {
	position:absolute;
	height:1.6em;
	width:100px;
	top:10px;
	left:0;
	pointer-events:none;
	opacity:0;
	background: #5264AE;
}

/* active state */
input:focus ~ .highlight,
textarea:focus ~ .highlight{
	-webkit-animation:inputHighlighter 0.3s ease;
	-moz-animation:inputHighlighter 0.3s ease;
	animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
/* changed Keyframes from animating the background to opacity */
@-webkit-keyframes inputHighlighter {
	from { opacity: .5; }
	to 	{ width:0; opacity: 0; }
}
@-moz-keyframes inputHighlighter {
	from { opacity: .5; }
	to 	{ width:0; opacity: 0; }
}
@keyframes inputHighlighter {
	from { opacity: .5; }
	to 	{ width:0; opacity: 0; }
}

/* add support for no-required inputs and textareas */
/* !!IMPORTANT FOR THE MARKUP: REQUIRES AN EMPTY PLACEHOLDER ATTRIBUTE FOR ALL INPUTS */


/* MEDIA QUERIES */

@media (min-width: 768px) {
	.row .column-2 {
		float: left;
		width: 50%;
	}
	.mainContainer {
		width: 700px;
	}
}

@media (min-width: 860px) {
	.mainContainer {
		width: 800px;
	}
}