/* FONTS
================================================== */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin-ext');


/* BASE
================================================== */

body, html {
	min-height: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	word-spacing: 0;
	letter-spacing: 0;
	font-size: .75rem;
	font-weight: 300;
	color: #000;
	background: #026f8e url("../img/skin.jpg") center center no-repeat;
	-webkit-background-size: cover;
	        background-size: cover;
}

body:after {
	position: fixed;
	content: "";
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: .9;
	background: #026f8e;
	background: -moz-linear-gradient(-200deg, #023d5b 0%, #026f8e 100%);
	background: -webkit-linear-gradient(-200deg, #023d5b 0%,#026f8e 100%);
	background: linear-gradient(300deg, #023d5b 0%,#026f8e 100%);
}

body, input, button, textarea {
	font-family: Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 1.5rem;
	font-weight: 500;
}

p,
ul,
ol,
table,
figure {
	margin-bottom: 1.5rem;
}

a, input, textarea, button {
	-webkit-transition: color .3s, background, .3s, border-color .3s, opacity .3s;
	   -moz-transition: color .3s, background, .3s, border-color .3s, opacity .3s;
			transition: color .3s, background, .3s, border-color .3s, opacity .3s;
}

a,
a:focus {
	color: #000;
	font-weight: 500;
}

a:hover {
	color: #e12171;
}

a:hover,
a:focus {
	text-decoration: none;
}

*, *:focus {
	outline: none !important;
}

img {
	max-width: 100%;
}

/* MODULES
================================================== */

.card {
	-webkit-box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.04);
	        box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.04);
	-webkit-border-radius: .5rem;
	        border-radius: .5rem;
}

	.card-body {
		padding: 3rem 3rem 1rem;
	}
	
	.card__logo {
		margin-bottom: 3rem;
		text-align: center;
	}

		.card__logo img {
			max-width: 157px;
		}
	
		.card__logo a {
			display: inline-block;
		}
	
	.card__title {
		margin-bottom: 2rem;
		font-size: 1.25rem;
	}

/* COMPONENTS
================================================== */

/*
	Form control
*/

.form-control,
.form-control:focus {
	border-color: #ddd;
}

.form-control {
	padding: .8125rem;
	font-size: .8125rem;
	color: #000;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
}

.form-control.error {
	border-color: #d0021b !important;
}

.help-block {
	display: block;
	text-align: right;
	margin-top: .25rem;
	font-size: .75rem;
	font-weight: 400;
	color: #d0021b;
}

.help-icon {
	position: relative;
	font-size: 20px;
	top:5px;
}

.custom-control-label:before,
.custom-control-label:after {
	top: 0;
	cursor: pointer;
	-webkit-box-shadow: none !important;
			box-shadow: none !important;
}

.custom-control-label:before {
	border: 1px solid #ddd;
	background: #fff !important;
}

.custom-control-label:after {
	text-align: center;
	font-size: .75rem;
	line-height: 1rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before {
	background: #fff;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label:after {
	content: "\e5ca";
	font-family: "Material Icons";
	font-weight: 900;
}

.input-has-icons {
	position: relative;
}

	.input-has-icons .form-control {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.input-icon-left,
	.input-icon-right {
		position: absolute;
		top: 0;
		width: 3rem;
		font-size: 1.125rem;
		line-height: 3rem;
		text-align: center;
	}
	
	.input-icon-left {
		left: 0;
	}
	
	.input-icon-right {
		right: 0;
	}
	
		.input-icon-left i,
		.input-icon-right i{
			font-size: inherit;
			line-height: inherit;
		}

		.input-icon-right a {
			color: #000;
		}
		
		.input-icon-right a:hover {
			color: #999;
		}
		
/*
	Buttons
*/

.btn {
	position: relative;
	overflow: hidden;
	padding: .8125rem;
	font-size: .8125rem;
	text-transform: uppercase;
	-webkit-border-radius: 2rem;
	        border-radius: 2rem;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	-webkit-transition: all .5s;
	        transition: all .5s;
}

.btn:after {
	position: absolute;
	content: "";
	z-index: 1;
	top: 0;
	right: 100%;
	width: 100px;
	height: 100%;
	opacity: .2;
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .2) 100%);
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, .2) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, .2) 100%);
	-webkit-transition: all .3s;
	        transition: all .3s;
	-webkit-transform: skewX(-20deg);
            transform: skewX(-20deg);
}

.btn:hover:after {
	right: -110px;
}

.btn--red {
	border-color: transparent;
	color: #fff;
	background: #e12171;
	background: -moz-linear-gradient(left, #e12171 0%, #ea6668 100%);
	background: -webkit-linear-gradient(left, #e12171 0%,#ea6668 100%);
	background: linear-gradient(to right, #e12171 0%,#fabb60 100%);
	background-size: 200% 200%;
}

.btn--red:hover {
	border-color: transparent;
	color: #fff;
	background-position: 99% 50%;
}

.btn--icon-right {
	position: relative;
}

	.btn--icon-right i {
		position: absolute;
		top: 50%;
		right: 1rem;
		font-size: 1.5rem;
		-webkit-transform: translate(0, -50%);
		        transform: translate(0, -50%);
	}

/* GLOBALS
================================================== */

.c-white,
.c-white a,
.c-white a:focus {
	color: #fff;
}

.c-white a:hover {
	opacity: .8;
}

.c-red {
	color: #e12171;
}

.mt--100 {
	margin-top: 100px;
}

.scroll-anim {
	opacity: 0;
	-webkit-animation-duration: 1s;
			animation-duration: 1s;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
}

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

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

/* RESPONSIVE
================================================== */

/*
	Small devices 
*/

@media screen and (max-width: 767px) {
	
	.mt--100 {
		margin-top: 30px;
	}
	
	.card__logo {
		margin-bottom: 1rem;
	}

}

/*
	Extra small devices 
*/

@media screen and (max-width: 575px) {
	
	.card-body {
		padding: 2rem 1rem .5rem;
	}
	
}

/* KEYFRAMES
================================================== */

/* Fade In */

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Fade In Up */

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translate(0, 10%);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 10%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
	}
}