body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #fff;
	line-height: 30px;
	text-align: center;
	/* background: url('../img/backgrounds/bg-login.jpg'); */
	background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../img/backgrounds/bg-login.jpg');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	position: relative;
}

strong { font-weight: 500; }

a, a:hover, a:focus {
	color: #5C9DE1;
	text-decoration: none;
	-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

h1, h2 {
	margin-top: 10px;
	font-size: 38px;
	font-weight: 100;
	color: #fff;
	line-height: 50px;
}

h3 {
	font-size: 22px;
	font-weight: 300;
	color: #fff;
	line-height: 30px;
}

img { max-width: 100%; }

::-moz-selection { background: #5C9DE1; color: #fff; text-shadow: none; }
::selection { background: #5C9DE1; color: #fff; text-shadow: none; }


.btn-link-1 {
	display: inline-block;
	height: 50px;
	margin: 5px;
	padding: 16px 20px 0 20px;
	background: #fff;
	font-size: 16px;
	font-weight: 300;
	line-height: 16px;
	color: #fff;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active { outline: 0; opacity: 0.6; color: #fff; }

.btn-link-1.btn-link-1-facebook { background: #4862a3; }
.btn-link-1.btn-link-1-twitter { background: #55acee; }
.btn-link-1.btn-link-1-google-plus { background: #dd4b39; }

.btn-link-1 i {
	padding-right: 5px;
	vertical-align: middle;
	font-size: 20px;
	line-height: 20px;
}

.btn-link-2 {
	display: inline-block;
	height: 50px;
	margin: 5px;
	padding: 15px 20px 0 20px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #fff;
	font-size: 16px;
	font-weight: 300;
	line-height: 16px;
	color: #fff;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.btn-link-2:hover, .btn-link-2:focus,
.btn-link-2:active, .btn-link-2:active:focus { outline: 0; opacity: 0.6; background: rgba(0, 0, 0, 0.3); color: #fff; }


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

html, body {
	height: 100%;
	color: #fff;
}

label {
	font-weight: 400;
}

.inner-bg {
	padding: 50px 0;
}

.top-content {
	height: 100%;
	background: rgba(0,0,0,0)
}
.top-content .container {
	position: absolute;
	width: 100%;
	max-width: 1170px;
	top: 50%;
	left: 50%;
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
    background: rgba(255,255,255,.3);
    border-radius: 1rem;

    /*box-shadow: 0 10px 50px #000;*/
}
.logo {
	height: 120px;
	margin-bottom: 1rem;
}
.title {
	font-size: 1.2rem;
	line-height: 1.2rem
}
.description {
	padding: 0;
	font-size: 5rem;
	letter-spacing: .125rem;
	-webkit-filter: brightness(0) invert(1);
	-moz-filter: brightness(0) invert(1);
	-o-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

.login-tools {
	text-align: center;
}

.top-content .text {
	color: #fff;
}

.top-content .text h1 { color: #fff; }

.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 {
	text-shadow: 0 1px 10px #333;
}
.form-box h1,
.form-box h2 {
	color: #fff;
}

.form-top {
	overflow: hidden;
	padding: 0 25px 15px 25px;
	background: #444;
	background: rgba(0, 0, 0, 0.45);
	-moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
	text-align: left;
}

.form-top-left {
	float: left;
	width: 75%;
	padding-top: 25px;
}

.form-top-left h3 { margin-top: 0; color: #fff; }
.form-top-left p { opacity: 0.8; color: #fff; }

.form-top-right {
	float: left;
	width: 25%;
	padding-top: 5px;
	font-size: 66px;
	color: #fff;
	line-height: 100px;
	text-align: right;
	opacity: 1;
}

.form-bottom {
	text-align: left;
	margin-top: 1rem;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	/*background: rgba(255,255,255,0.9);*/
	/*border-radius: 10px;*/
	/*box-shadow: 0 0 11px rgba(32,32,32,0.8);*/
}

.form-bottom form textarea {
	height: 100px;
}

.form-bottom form button.btn {
	width: 100%;
}

.form-bottom form .input-error {
	border-color: #fff;
}

.form-bottom h3 {
	font-weight: 400;
	text-align: center;
}

.form-bottom a {
	font-weight: 400;
	text-align: center;
}
.form-bottom .btn {
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.4))
}


.social-login {
	margin-top: 20px;
}

.social-login h3 {
	color: #fff;
}

.social-login-buttons {
	margin-top: 25px;
}

a.forget:hover{
	text-decoration: underline;
}

.form-control {
	font-size: .9rem
}
.form-control:focus {
	color: #495057;
	background-color: transparent;
	border-color: none;
	outline: 0;
	box-shadow: none;
}

.input-group {
	padding: .25rem;
	background: rgba(255,255,255,1);
	border-radius: .5rem;
	display: flex;
	align-items: center;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.custom-checkbox .custom-control-label:before {
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.5))
}
.input-group img {
	object-fit: cover
}
.input-group .input-group-text {
	width: 40px;
	height: 24px;
	justify-content: center;
	background: transparent;
	border: none;
	border-right: 1px solid #6d6e70
}
.input-group input {
	/*padding-top: .5rem;*/
	/*padding-bottom: .5rem;*/
	background: transparent;
	border: none
}

.btn.btn-primary {
	background-color: #5C9DE1;
	border-color: #5C9DE1;

	font-weight: 300;
	letter-spacing: 3px;
}
.btn.btn-primary:active {
	background-color: #a09936!important;
	border-color: #a09936!important;
	box-shadow: 0 0 0 0.2rem rgba(204, 195, 93,.5)!important
}
.btn.btn-primary:focus {
	box-shadow: 0 0 0 0.2rem rgba(204, 195, 93,.5)
}

.custom-control-label::before,
.custom-control-label::after {
	top: 50%;
	transform: translateY(-50%)
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: #a09936;
}

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

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	.top-content .container > .row > div:last-child {
		border-left: 1px solid #eee
	}
	.top-content .container{
		max-width: 720px;
	}
	.login-tools > div {
		text-align: left;
	}

	.logo {
		height: 200px
	}
	.title {
		font-size: 1.5rem;
		line-height: 1.5rem
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.top-content .container {
		max-width: 960px;
	}

	.form-bottom {
		width: 400px;
	}
	.login-tools > div:first-child {
		text-align: left;
	}
	.login-tools > div:last-child {
		text-align: right;
	}
	.logo {
		height: 250px
	}
	.title {
		font-size: 2rem;
		line-height: 2rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.top-content .container{
		max-width: 1120px;
	}
}