@charset "utf-8";
/* CSS Document */

 
 /*   GUI UX/UI  Interface   
	How to target desktop, tablet and mobile using Media Query ?
	Mobile (Smartphone) max-width: 480px.
	Low Resolution Tablets and ipads max-width: 767px.
	Tablets Ipads portrait mode max-width:1024px.
	Desktops max-width:1280px.
	Huge size (Larger screen) max-width: 1281px and greater.
*/	
*{
	
	/*font-family: 'Montserrat', sans-serif; */
	/* font-family: 'Spline', sans-serif; */
	 font-family: 'Raleway', sans-serif; 
}
body{
		padding: 0;
		margin: 0;
		background-image:url(../cart.png);
		background-size: cover;
	}
.container{
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}	
/********************************######################################################################*/
 /*   GUI UX/UI  Interface  Big screens Desktop version */
/*********************************//*######################################################################*/	
/*######################################################*/
 /*   0.0 Header   #####################################*/
/*######################################################*/	
	.header{
		width: 100%;
		height: auto;
		padding: 0;
		margin: 0;
		background-color: white;
		border-bottom: 1px solid #ddd;
	}
	
/*######################################################*/
 /*   1.0 Responsitive form    #########################*/
/*######################################################*/		
	.responsitive_form{
		text-align: center;
		margin: auto;
	    height: auto;
		width: 34%; 
		background-image: linear-gradient(#fff,#fff);
		border-radius: 5px;
		box-shadow: 1px 1px 21px 3px #ddd;	
	}
	.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: 900;
		background-color: #0275d8;
		color: white;
		outline: none;
		border: 0px solid transparent;
		border-radius: 8px;
	}
	.btnLogin:hover{
		text-decoration: none;
		transition: 0.6s ease;
		padding: 13px;
		font-size: 21px;
		font-weight: 900;
		background-color: #0167BF;
		color: white;
		outline: none;
		border: 0px solid transparent;
		border-radius: 8px;
	}

/*######################################################*/
 /*   1.1 Contenedor formulario    #########################*/
/*######################################################*/		 
	.contenedor-formulario {
		width: 80%;
		height: 100%;
		color: #0E6AC0;
		z-index: 9999;
	}
	.contenedor-formulario .formulario {
		width: 100%;
	    height: 100%; 
        margin: 0;
	}
    .contenedor-formulario .formulario .input-group {
		position: relative;
        margin-bottom: 32px; 
	}
    .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: 100%;
        outline: none; 
        background-color: #fff;
		border: none;
		border-radius: 5px;
        border: 1px solid #ccc;
		padding: 2%;  
		margin-left: -3%; 
	}
    .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: #666;
		  -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: 1%; 
		  font-weight: 900;
	}
    .contenedor-formulario .formulario .input-group label.label.active {
          background-color: transparent;
	      top: -19px;
          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;
	}
	
/********************************######################################################################*/
 /*   GUI UX/UI  Interface   TABLET VERSION*/
/*********************************//*######################################################################*/
/* On screens that are 1024px  TABLET Version */
@media screen and (max-width:1024px)  {
/********************************######################################################################*/
 /*######################################################*/
 /*   0.0 Header   #####################################*/
/*######################################################*/	
	.header{
		width: 100%;
		height: auto;
		padding: 0;
		margin: 0;
		background-color: white;
		border-bottom: 1px solid #ddd;
	}
	
/*######################################################*/
 /*   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;	
	}
	.headerForm{
		width: 100%;
		height: auto;
		background-image: linear-gradient(#fff,#f6f6f6);
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.btnLogin{
		text-decoration: none;
		transition: 0.6s ease;
		padding: 13px;
		font-size: 21px;
		font-weight: 900;
		background-color: #0275d8;
		color: white;
		outline: none;
		border: 0px solid transparent;
		border-radius: 8px;
	}
	.btnLogin:hover{
		text-decoration: none;
		transition: 0.6s ease;
		padding: 13px;
		font-size: 21px;
		font-weight: 900;
		background-color: #0167BF;
		color: white;
		outline: none;
		border: 0px solid transparent;
		border-radius: 8px;
	}
	
/*######################################################*/
 /*   1.1 Contenedor formulario    #########################*/
/*######################################################*/		 
	.contenedor-formulario {
		width: 95%;
		height: 100%;
		color: #0E6AC0;
		z-index: 9999;
	}
	.contenedor-formulario .formulario {
		width: 100%;
	    height: 100%; 
        margin: 0;
	}
    .contenedor-formulario .formulario .input-group {
		position: relative;
        margin-bottom: 32px; 
	}
    .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%;
		height: 100%;
        outline: none; 
        background-color: #fff;
		border: none;
		border-radius: 5px;
        border: 1px solid #ccc;
		padding: 5%;  
		margin-left: -1%; 
	}
    .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: #666;
		  -webkit-transition: all 0.3s ease;
		  -o-transition: all 0.3s ease;
          transition: all 0.3s ease;
          font-size: 33px;
          line-height: 16px;
          position: absolute;
          top: 3%;
          left: 1%; 
		  font-weight: 900;
		 padding: 21px 3px 21px 3px;
	}
    .contenedor-formulario .formulario .input-group label.label.active {
          background-color: transparent;
	      top: -19px;
          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    #########################*/
/*######################################################*/	
 
	
/********************************######################################################################*/
}
/********************************######################################################################*/