@charset "utf-8";
/* 
Start CSS stylesheet version SW 0.1 
font-family: 'Monserrat', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Nunito Sans'; 
/************************************
Color wall
red ink theme: #cc0000;
gold: #FFD700
blue: #004F9D
*/
* {
	scroll-behavior: smooth;
	overflow-x: hidden;
}
html{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
body {
  margin: 0; 
font-family: 'Monserrat', sans-serif;
	overflow: hidden;
}
#sideNav{
	display: none;
} 

/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
0.x container
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/	 

.container{
	width: 100vw;
	height: 100vh;
	display: inline-flex;
	margin: 0;
	overflow: hidden;
}
#login{
	width: 50%;
	height: 100vh;
	background-color: white;
	margin: 0;
	z-index: 0;	overflow-y: hidden;
}
.bg{
	background-image: url("../../bg0.jpg");
	background-size: 200% 100%;
	width: 50%;
	height: 100vh;
	margin: 0;
	z-index: 0;
}
/*######################################################*/
 /*   1.0 Responsitive form    #########################*/
/*######################################################*/		
	.responsitive_form{
		text-align: center;
		margin: auto;
	    height: auto;
		width: 100%; 
		background-image: linear-gradient(#fff,#fff);
		border-radius: 5px;
		box-shadow: 1px 1px 21px 3px #ddd;	
		overflow-y: hidden;
	}
	.headerForm{
		width: 100%;
		height: auto;
		background-image: linear-gradient(#fff,#f6f6f6);
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.headerForm h3{
		color: #666; 
		padding: 21px 5px 0px 5px; 
		font-size: 27px;
		font-family: 'Spline', sans-serif;
	}
	.headerForm p{
		color: #999; 
		margin: -13px 5px 0px 5px;
		font-size: 17px;
	}
	.btnLogin{
		text-decoration: none;
		transition: 0.6s ease;
		padding: 13px;
		font-size: 21px;
		font-weight: 100;
		background-color: #cc0000;
		color: white;
		outline: none;
		border: 0px solid transparent;
		border-radius: 121px;
		font-family: 'Monserrat', sans-serif;
	}
	.btnLogin:hover{
		text-decoration: none;
		transition: 0.6s ease;
		padding: 13px;
		font-size: 21px;
		font-weight: 100;
		background-color: #860000;
		color: white;
		outline: none;
		border: 0px solid transparent;
		border-radius: 121px;
		font-family: 'Monserrat', sans-serif;
	}
/*######################################################*/
 /*   1.1 Contenedor formulario    #########################*/
/*######################################################*/		 
	.contenedor-formulario {
		width: 80%;
		height: 100%;
		color: #0E6AC0;
		z-index: 9999;
	} 
	.contenedor-formulario p{
		color: #333;
	}.contenedor-formulario a{
		color: dodgerblue;
		text-decoration: none;
	}
	.contenedor-formulario .formulario {
		width: 100%;
	    height: 100%; 
        margin: 0;
	}
    .contenedor-formulario .formulario .input-group {
		position: relative;
        margin-bottom: 32px;
		overflow: hidden;
	}
    .contenedor-formulario .formulario .input-group input[type="text"],
    .contenedor-formulario .formulario .input-group input[type="email"],
    .contenedor-formulario .formulario .input-group input[type="password"] {
        font-size: 21px;
        color: #003778;
        width: 90%;
        outline: none; 
        background-color: #eee;
		border: none;
		border-radius: 5px;
		padding: 21px;    
		overflow: hidden;
	}
    .contenedor-formulario .formulario .input-group input[type="text"]:focus, 
	.contenedor-formulario .formulario .input-group input[type="text"]:active,
    .contenedor-formulario .formulario .input-group input[type="email"]:focus,
    .contenedor-formulario .formulario .input-group input[type="email"]:active,
    .contenedor-formulario .formulario .input-group input[type="password"]:focus,
    .contenedor-formulario .formulario .input-group input[type="password"]:active {
          outline: none;
          border: 1px solid #0275d8;
	}
    .contenedor-formulario .formulario .input-group input[type="text"].error,
    .contenedor-formulario .formulario .input-group input[type="email"].error,
    .contenedor-formulario .formulario .input-group input[type="password"].error {
          border: 1px solid #D32F2F;
	}
    .contenedor-formulario .formulario .input-group input[type="text"].error + label,
    .contenedor-formulario .formulario .input-group input[type="email"].error + label,
    .contenedor-formulario .formulario .input-group input[type="password"].error + label {
          color: #D32F2F;
	}
    .contenedor-formulario .formulario .input-group label {	
          background-color: transparent;   
	}
    .contenedor-formulario .formulario .input-group label.label {
          background-color: transparent;
		  color: #cc0000;
		  -webkit-transition: all 0.3s ease;
		  -o-transition: all 0.3s ease;
          transition: all 0.3s ease;
          font-size: 21px;
          line-height: 16px;
          position: absolute;
          top: 33%;
          left: 5%; 
		  font-weight: 900;overflow: hidden;
		z-index:99;
	}
    .contenedor-formulario .formulario .input-group label.label.active {
          background-color: transparent;
	      top: -1px;
          font-size: 12px;
		  padding: 3px;
          line-height: 12px;
          color: #0275d8; 
	} 
    .contenedor-formulario .formulario .input-group.error label {
          color: #D32F2F; 
	}
    .contenedor-formulario .formulario .input-group.error label:hover {
          background: rgba(211, 47, 47, 0.2);
	}
    .contenedor-formulario .formulario .input-group.error label:before {
          border: 2px solid #D32F2F; 
	}
    .contenedor-formulario .formulario .input-group.radio input[type="radio"] {
          display: none; 
	}
    .contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked + label:before {
          display: none; 
	}
    .contenedor-formulario .formulario .input-group.radio input[type="radio"]:checked + label {
          padding: 5px 15px;
          background: #303F9F;
          border-radius: 2px;
          color: #f2f2f2;
	} 

/*######################################################*/
 /*   3.0 Footer    #########################*/
/*######################################################*/	
	.footer{
		width: 100%;
		height: auto;
		background-color: #eee;
		margin-top: 33px;
		text-align: center;
		bottom: 0;
		position: relative;
		margin-bottom: -21px;
	}	
	.footer p{
		padding: 33px;
		font-size: 19px;
		font-weight: 300;
		font-family: sans-serif;
	}
	
.eye{
	position: absolute;
	right: 13px;
	top: 13px;	
}






















/* Mobile AND Small Tablets */
@media (max-width: 767px) { 
/*********************************************************************
	x.0 
**********************************************************************/
.container{
	width: 100vw;
	height: 100vh;
	display: block;
	margin: 0;
	overflow: hidden;
}
#login{
	width: 100%;
	height: 100vh;
	background-color: white;
	margin: 0%;
	z-index: 1;
	position: absolute;
}
.bg{ 
	width: 100%;
	height: 100vh;
	margin: 0;
	z-index: 0;
	position: absolute;
}
	
.headerForm h3{
		color: #666; 
		padding: 5px 5px 0px 5px; 
		font-size: 19px;
		font-family: 'Spline', sans-serif;
	}
.eye{
	position: absolute;
	right: 13px;
	top: 13px;	
}

  .contenedor-formulario .formulario .input-group input[type="password"] {
        font-size: 21px;
        color: #003778;
        width: 85%;
        outline: none; 
        background-color: #eee;
		border: none;
		border-radius: 5px;
		padding: 21px;    
		overflow: hidden;
	}	
	
}