/* 	==========================================================================
							 SECTION  HERRO-BANNER
   	========================================================================== */
.wrapper-login .section{
	padding: 160px 0 60px 0;
	float: left;
	width: 100%
}
.wrapper-login .hero-banner { 
	background-image: url('../images/login.jpg');
    float: left;
    height: 310px;
    width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: calc(100%) auto;
	margin-top:  150px;
}
.wrapper-login .mask {
	background-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    height: 310px;
    padding-top: 125px;
    text-align: center;
    width: 100%;
}
.wrapper-login .mask h3{
	font-size: 45px; 
	margin-bottom: 35px;
	color: rgb(0,105,179);
}
/* 	==========================================================================
							SECTION  FORM-SIGN UP
   	========================================================================== */
.wrapper-login .group-descripton {
	text-align: center;
}
.wrapper-login .group-descripton .title { 
	color: rgb(0,105,179);
    font-size: 30px;
    font-weight: bold;
    float: left;
    width: 100%;
	margin-bottom: 10px;
}
.wrapper-login .group-descripton .description {
	font-size: 18px;
    margin-bottom: 60px;
    width: 100%;
    float: left;
	color: #888686;
}
.wrapper-login .back-ground {
	background-image: url('../images/what_is_disc.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
.wrapper-login .form-login {
	background-color: rgba(0,148,142,0.8);
	padding: 75px 75px 75px 75px;
}
.form-login .title { 
	color: #ffffff; 
	margin-bottom: 35px; 
	font-size: 18px;
}
.form-login .btn-default { 
	border-radius: 0;
	border-color: #156bb5;
	width: 100%;
	background-color: #156bb5;
	color: #fff;
	margin-bottom: 15px;
}
.form-login .btn-default:hover {
	background-color: #1b9792;
	border-color: #1b9792;
}
.form-login .forgot-pass {
	color: #ffffff;
	padding: 0;
}
.form-login .form-control {
	background-color: rgba(0,0,0,0);
	border-radius: 0;
	border-color: #ffffff;
	margin-bottom: 20px;
}

.form-login input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #FFFFFF;
}
.form-login input::-moz-placeholder { /* Firefox 19+ */
  color: #FFFFFF;
}
.form-login input:-ms-input-placeholder { /* IE 10+ */
  color: #FFFFFF;
}
.form-login input:-moz-placeholder { /* Firefox 18- */
  color: #FFFFFF;
}
.form-login input { 
	color: #ffffff !important;
	display: flex;
    align-items: center;
    line-height: 1.8;
    height: 50px;
    padding: 0 15px;
}
/* 	==========================================================================
					   SECTION  FORM-SIGN UP SOCIAL MEDIA
   	========================================================================== */

.wrapper-login .form-media {
	background-color: rgb(0, 105, 179);
    height: 360px;
    margin-left: -145px;
    margin-top: 40px;
    padding: 75px 30px;
	color: #ffffff;
}
.form-media .title { 
	text-align: center; 
	margin-bottom: 35px; 
	font-size: 18px;
}
.form-media .btn-default {
    background-position: 65px 5px;
    background-repeat: no-repeat;
    background-size: 35px auto;
    border-color: #ffffff;
    border-radius: 0;
    margin-bottom: 20px;
    width: 100%;
}
.wrapper-login .form-media a:nth-child(1) { background-image: url('../images/icon/linkin_sign_up.svg'); }
.wrapper-login .form-media a:nth-child(2) { background-image: url('../images/icon/fb_sign_up.svg'); }



/* 	==========================================================================
	==========================================================================
   							 		TABLATE
	==========================================================================
   	========================================================================== */

@media only screen 	and (min-width : 720px) and (max-width : 1280px){
	.wrapper-login .hero-banner{margin-top: 100px}
}

@media only screen 	and (min-width : 992px) and (max-width : 1024px){	
	.form-media .btn-default{
		padding-left: 70px;
		background-position: 70px 5px;
	}
}
@media only screen 	and (min-width : 768px) and (max-width : 992px){
	
	.wrapper-login {
		margin-top: 85px;
	}
	.wrapper-login .back-ground { margin-bottom: 30px; }
	.wrapper-login .form-media{
		background-color: rgb(0, 105, 179);
		padding: 50px 0;
		color: #ffffff;
		width: 100%;
		margin-left: 0;
		margin-top: 0
	}
	.wrapper-login .form-media form{ width: 60%; margin: 0 auto}
	.wrapper-sing-up .form-media .btn-default{
		background-position: 95px 5px;
		padding-left: 80px;
	}
	.wrapper-login .hero-banner {
		margin-top: 100px;
	}
}