/***** Top content *****/

.top-content { padding: 40px 0 170px 0; }

.top-content .text { color: #fff; }
.top-content .text h1 { color: #fff; }
.top-content .description { margin: 20px 0 10px 0; }
.top-content .description p { opacity: 0.8; }
.top-content .description a { color: #fff; }
.top-content .description a:hover, 
.top-content .description a:focus { border-bottom: 1px dotted #fff; }

.form-box { padding-top: 40px; }

.f1 {
	padding: 25px; background: #fff;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.f1 h3 { margin-top: 0; margin-bottom: 5px; text-transform: uppercase; }

.f1-steps { overflow: hidden; position: relative; margin-top: 20px; }

.f1-progress { position: absolute; top: 24px; left: 0; width: 100%; height: 1px; background: #ddd; }
.f1-progress-line { position: absolute; top: 0; left: 0; height: 0px; background: #f35b3f; }

.f1-step { position: relative; float: left; width: 33.333333%; padding: 0 5px; }

.f1-step-icon {
	display: inline-block; width: 40px; height: 40px; margin-top: 4px; background: #ddd;
	font-size: 16px; color: #fff; line-height: 40px;
	-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.f1-step.activated .f1-step-icon {
	background: #fff; border: 1px solid #f35b3f; color: #f35b3f; line-height: 38px;
}
.f1-step.active .f1-step-icon {
	width: 48px; height: 48px; margin-top: 0; background: #f35b3f; font-size: 22px; line-height: 48px;
}

.f1-step p { color: #ccc; }
.f1-step.activated p { color: #f35b3f; }
.f1-step.active p { color: #f35b3f; }

.f1 fieldset { display: none; text-align: left; }

.f1-buttons { text-align: right; }

.f1 .input-error { border-color: #f35b3f; }



/***** Media queries *****/

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 768px) and (max-width: 991px) {}

@media (max-width: 767px) {
	
	.navbar { padding-top: 0; }
	.navbar.navbar-no-bg { background: #333; background: rgba(51, 51, 51, 0.9); }
	.navbar-brand { height: 60px; margin-left: 15px; }
	.navbar-collapse { border: 0; }
	.navbar-toggle { margin-top: 12px; }
	
	.top-content { padding: 40px 0 110px 0; }

}

@media (max-width: 415px) {
	
	h1, h2 { font-size: 32px; }
	
	.f1 { padding-bottom: 20px; }
	.f1-buttons button { margin-bottom: 5px; }

}


/* Retina-ize images/icons */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	
	/* logo */
    .navbar-brand {
    	background-image: url(../img/logo@2x.png) !important; background-repeat: no-repeat !important; background-size: 162px 36px !important;
    }
	
}

/* Register Form + Progress Indicators */
#form-feedback {
	max-height: 0;
	overflow: hidden;
	text-align: center;
	margin: 0;
	transition: max-height 0.4s, margin 0.4s;
	color: #a94442;
	background-color: #f5f5f5;
}
#form-feedback.reveal {
	max-height: 80px; /* large enough to accomodate largest font size */
	padding: 5px 0;
	margin: 20px 0 0 0;
}
.progress-line {
	width: 60%;
	min-width: 175px;
	margin: 60px auto 80px auto;
	height: 1px;
	background-color: #ddd;
	position: relative;
}

.progress-fill {
	float: left;
	width: 0;
	height: 100%;
	background-color: #f35b3f;
	transition: width 0.2s;
}

.progress-line .step-icon {
	position: absolute;
	width: 50px;
	height: 50px;
}

.progress-line .step-icon.step1 {
	left: 0%;
	transform: translate(-50%, -50%);
}

.progress-line .step-icon.step2 {
	left: 50%;
	transform: translate(-50%, -50%);
}

.progress-line .step-icon.step3 {
	right: 0%;
	transform: translate(50%, -50%);
}

.progress-line .step-icon p {
	position: absolute;
	top: 110%;
	left: -50%;
	text-align: center;
	display: block;
	width: 100px;
}

.progress-line .step-icon .icon-anchor {
	width: 100%;
	height: 50px;
	padding: 10%;
	position: absolute;
	top: -50%;
	left: -50%;
	transition: padding 0.2s;
}
.progress-line .step-icon .fa {
	margin: 5%;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	background-color: #ddd;
	border: 1px solid #ddd;
	color: #fff;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: width 0.2s, height 0.2s;
	font-size: 20px;
}

.progress-line .step-icon.step3 .fa {
	left: auto;
	right: -50%;
}

.progress-line .step-icon.active .fa {
	border: 1px solid #f35b3f;
	background-color: #f35b3f;
	color: #fff;
	width: 100%;
	height: 100%;
	margin: 0;
}
.progress-line .step-icon.activated .fa {
	border: 1px solid #f35b3f;
	background-color: #fff;
	color: #f35b3f;
}

/* Minor responsiveness fixes for the forms */
@media all and (max-width: 480px) {
	#page-register .container,
	#page-update-card .container {
		padding: 0;
	}
	#page-register #sep,
	#page-update-card #sep {
		padding: 20px 0;
	}
	#page-register .well.login-box,
	#page-update-card .well.login-box {
		border-width: 1px 0;
	}

}