*{margin:0px;padding:0px;}

@font-face {
	font-family: 'Lota Grotesque';
	src: url('../fonts/lota-grotesque/LotaGrotesqueRegular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

html
{
	background: url("../img/Hub.jpg") no-repeat center center;

	background-size: cover;
	height: 100%;
}

body {

  font-family: "Lota Grotesque" !important;
	
}
  
  
	img{width:100%;height:auto;}

    #recuadroLogin
    {
		width: 1200px;
		margin-top:23em;		
    }
        
	#recuadroLoginManager{
		width: 1200px;
		margin-top:28em;	
	}
	.login button, a
	{
		width: 100%;
		height: 100%;
		background-color: #98ff84;	
		color:#093a33;	  
		border-radius: 50px;
	}

	.manual button, a
	{
		width: 100%;
		height: 100%;
		background-color: #ffffff;	
		color:#093a33;	  
		border-radius: 50px;
	}
	
	#secBtn
	{				
		display:flex;
		flex-direction: column;
		align-items: center;		
		align-content: center;
		justify-content: center;
		
	}
	#secBtn div, 
	#secBtn form 
	{
		width:100%;
		height:68px;
		max-width: 356px; 
		margin: 18px;
		margin-bottom: 6px;  
		/* and that, will result in a 10px gap */
	}
	button
	{
		border:0px;
		font-weight: bold;
		background-color:transparent;
		font-size:17px;
	}

	.btnMenu .login {
		background-color: #98ff84;
		color: #093a33;
		border: 0;
		border-radius: 50px;
		width: 100%;
		vertical-align: middle;
	}
	
	.btnMenu .manual {
		background-color: #ffffff;
		color: #093a33;
		border: 0;
		border-radius: 50px;
		width: 100%;
		vertical-align: middle;
	}

	form *{vertical-align: middle;}
	
	.btnMenu a 
	{
		margin:0;
		position: relative;
		text-decoration: none;
		top: 25%;
		bottom: 25%;
		border-radius:0px;
	}
	
	
	.btnMenu * {text-decoration:none;font-weight:bold;}

	.login button:hover{
		background-color:#093a33;
		color:#98ff84;
		cursor:pointer;
	}

	.manual button:hover{
		background-color:#093a33;
		color:#ffffff;
		cursor:pointer;
	}


@media screen and (max-width: 1200px) {
   
   #recuadroLogin
   {		
		float: none;
		margin: auto;		
		width: 80%;
		text-align: center;
		margin-right: 10%;
		margin-top: 25%;
		margin-bottom: 25%;
   }   
   
   #secBtn div, #secBtn form {width:100%;height:3em;max-width: 150px;}
   
}

@media screen and (orientation:landscape) and (max-height: 700px) {
   
   html{overflow:hidden;}
   
   #recuadroLogin
   {	
		
		float: none;
		margin: auto;		
		width: 50%;
		text-align: center;
		
		margin-top: 5%;
		margin-bottom: 25%;
   }   
   
   #secBtn div, #secBtn form {width:100%;height:3em;max-width: 150px;}
   
}

@media screen and (max-width: 600px) {
   
   #recuadroLogin
   {
		float: none;
		margin: auto;		
		width: 80%;
		text-align: center;
		margin-right: 10%;
		margin-top: 75%;
		margin-bottom: 0%;
   }
      
   #secBtn div, #secBtn form {width:100%;height:3em;max-width: 150px;}
  
}