@font-face {
	font-family: Montserrat-ExtraBold;
	font-weight: normal;
	src: url(../../../fonts/Montserrat-ExtraBold.ttf);
  }
  @font-face {
	font-family: Montserrat-Bold;
	font-weight: normal;
	src: url(../../../fonts/Montserrat-Bold.ttf);
  }

  @font-face {
	font-family: Montserrat-Regular;
	font-weight: normal;
	src: url(../../../fonts/Montserrat-Regular.ttf);
  }
  @font-face {
	font-family: Montserrat-Light;
	font-weight: normal;
	src: url(../../../fonts/Montserrat-Light.ttf);
  }

  .row{

	margin-right: 0;
  }
/* que mida como minimo 1024*/
.labellogin{
  color: white;
  font-family: Montserrat-Light;
 
  text-align: center;
  

}
.alogin{
  color: white;
 /* padding-left: 10px;*/
  text-decoration: underline white;
  font-family: Montserrat-Light;


}
.labelpass{
	color: white;
	font-family: Montserrat-Regular;
	font-size: 1.3rem;
  
  }

  .btnreset {
    background-color: #333333;
    border-color: #333333;
    width: 80%;
    padding: 20px;
    border-radius: 15px;
	margin-top: 0px;

	font-family: Montserrat-Bold;

}

.btn-primary:hover {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
}
.btn-primary:focus{
    color: #fff;
    background-color: #333333;
    border-color: #333333;
}



@media screen and (min-width: 1024px) {

  
	body {
  background-color: #d0017d;

}

   .logo{
  	width: 50%;
  	padding-right: 0%;/*da un espacio al contenedor*/
  	margin-left: 25%   /*baja el contenedor por completo*/
  }

    .hotspot{
		background-color: #333333;
		border-color: #333333;
		width: 90%;
		padding: 15px 20px;
		border-radius: 10px;
		margin-top: 80px; 
		font-family: Montserrat-Bold;
		color: white;

  }

 }


@media only screen and (max-width: 775px) {
  body {
   background-image: url(../../images/fondo_login.png);
   background-repeat : no-repeat;
  background-position : top;
  background-attachment : fixed;
  background-size: 100% 106%; /*cubrira todo el contenedor*/ 
   margin:0;
  border:0;
  padding:0;
  /*background-position: center center;*/
  }

  .logo{
  	width: 100%;
  	padding: 10%;/*da un espacio al contenedor*/
  	margin-top: 25%;/*baja el contenedor por completo*/
  }
  .alert-gray {
	width: 90%;
	color: #FFFFFF !important;
	background-color: #333333 !important;
	border-color: #333333 !important;		
	padding: 15px 20px;	
    margin: 5px 22px;
	display: inline-block;	
    border: 1px solid #ccc;
    border-radius: 10px;
	box-sizing: border-box; 
	font-family: Montserrat-Light;   
  }
  .alert-custom {
	
	color: #FFFFFF !important;
	background-color: #333333 !important;
	border-color: #333333 !important;		
	padding: 15px 20px;	  
	text-align: center;	
	
    border: 1px solid #ccc;
    border-radius: 15px;	
	font-family: Montserrat-Light;  
	width: 90%; 
	margin-left: 20px;
  }
 
 
  .inputlogin{
  	  width: 90%;
	  padding: 15px 20px;
	  margin: 8px 10px;
	  display: inline-block;
	  border: 1px solid #ccc;
	  border-radius: 10px;
	  box-sizing: border-box;
	  font-size: 20px;
	  font-weight: normal;
	  font-family: Montserrat-Light;

  }
  .hotspot{
	background-color: #333333;
	border-color: #333333; 
  	width: 90%;
	padding: 15px 20px;
	border-radius: 10px;
	margin-top: 80px;
	font-family: Montserrat-Bold;
	color: white;  
	

  }
}

@media only screen and (max-width: 768px) {
  /*Modificado*/
	.hotspot{
		margin-top: 50px;
		padding: 20px 20px;	background-color: #333333;
		border-color: #333333;
		font-family: Montserrat-Bold;
		color: white;


	}
}


@media only screen and (max-width: 414px) {
  /*Modificado*/
 .hotspot{
   margin-top: 85px;
   background-color: #333333;
   border-color: #333333;
   font-family: Montserrat-Bold;
   color: white;

 }

 .labellogin{
   color: white;
  /* margin-left: 30px;*/
   font-family: Montserrat-Light;
   text-align: center;
 
 }

 .alogin{
   color: white;
  /* padding-left: 30px;*/
   text-decoration: underline white;
   font-family: Montserrat-Light;
 
 }
}

@media only screen and (max-width: 411px) {
  /*modificado*/
	.hotspot{
		margin-top: 165px;
		background-color: #333333;
		border-color: #333333;
		font-family: Montserrat-Bold;
		color: white;

	}
}

@media only screen and (max-width: 411px) and (max-height: 731px) {
  /*modificado*/
	 .logo{
  	width: 100%;
  	padding: 10%;/*da un espacio al contenedor*/
  	margin-top: 30%;/*baja el contenedor por completo*/
  }
	.hotspot{
		margin-top: 65px;
		background-color: #333333;
		border-color: #333333;
		font-family: Montserrat-Bold;
		color: white;
	}

 }



/*que min: que mida como minimo*/
 @media only screen and (max-width:390px) {
   /*modificado*/
	.hotspot{
		margin-top: 15px;
		background-color: #333333;
		border-color: #333333;
		font-family: Montserrat-Bold;
		color: white;

	}


 }


@media only screen and (max-width: 375px) {
	.hotspot{
		margin-top: 30px;
		background-color: #333333;
		border-color: #333333;
		font-family: Montserrat-Bold;
		color: white;

	}


 }

 @media only screen and (max-width: 375px) and (max-height:812px ) {
   /*Modificado*/
	.hotspot{
		margin-top: 190px;
		background-color: #333333;
		border-color: #333333;
		font-family: Montserrat-Bold;
		color: white;

  }
  
  .labellogin{
    color: white;
	/*margin-left: 30px;*/
	font-family: Montserrat-Light;
   text-align: center;
  
  }

  .alogin{
    color: white;
   /* padding-left: 30px;*/
	text-decoration: underline white;
	font-family: Montserrat-Light;;
  
  }


 }

 @media only screen and (max-width: 375px) and (max-height:667px ) {
  /*Modificado*/
 .hotspot{
   margin-top: 40px;
   background-color: #333333;
   border-color: #333333;
   font-family: Montserrat-Bold;
   color: white;

 }
 
 .labellogin{
   color: white;
  /* margin-left: 30px;*/
   font-family: Montserrat-Light;
   text-align: center;
 }

 .alogin{
   color: white;
 /*  padding-left: 30px;*/
   text-decoration: underline white;
   font-family: Montserrat-Light;;
 
 }


}


@media only screen and (max-width: 320px) {
/*modificado*/
  .logo{
  	width: 100%;
  	padding: 10%;/*da un espacio al contenedor*/
  	margin-top: 15%;/*baja el contenedor por completo*/
  }
	.hotspot{
		margin-top: 60px;
		padding: 10px 10px;
		background-color: #333333;
		border-color: #333333;
		font-family: Montserrat-Bold;
		color: white;
	}

 }

 @media only screen and (max-width: 320px) and (max-height: 533px) {
   /*modificado*/
	 .logo{
  	width: 100%;
  	padding: 10%;/*da un espacio al contenedor*/
  	margin-top: 10%;/*baja el contenedor por completo*/
  }
	.hotspot{
		margin-top: 40px;
		background-color: #333333;
		border-color: #333333;
		font-family: Montserrat-Bold;
		color: white;
	}

 }
 @media only screen and (max-width: 320px) and (max-height: 480px) {
   /*modificado*/
	 .logo{
  	width: 100%;
  	padding: 10%;/*da un espacio al contenedor*/
  	margin-top: 5%;/*baja el contenedor por completo*/
  }
	.hotspot{
		margin-top: 20px;
		padding: 5px;
		background-color: #333333;
		border-color: #333333;
		font-family: Montserrat-Bold;
		color: white;
	}


	

 }