/*	                                 */
/* COM.CSQ.CMP CSS STYLESHEET. LOGIN */
/*                                   */

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

html {
	height:100%;
}

body {
	
	font-family: 'Poppins',sans-serif;
	
	height:100%;
	width:100%;
	margin:0;
		
	background-color: #305b9b;
  	background: linear-gradient(-20deg,#3175db  20%,#305b9b 80%);
  	
  	display:table;
  	  	  	
}

#centerer {
	
	display:table-cell;
	vertical-align:middle;
}

#formContent {
	
	display:table;	
  	margin:auto;		
		
  	background: #fff;
  
  	width: 100%;
  	max-width: 450px;
    
  	height: 100%;
  	max-height: 650px;
    
  	border-radius: 10px 10px 10px 10px;  
  	box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  	text-align: center;
}

#placer {
	padding-left:25px;
	padding-right:25px;
	padding-top:15px;
	padding-bottom:20px;
}


h1 {
	font-size:25px;
	font-weight:600; 
	color: #204a87;
}

h2 {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  display:inline-block;
  color: #204a87;
}

#errorcaption {
	color:#f00;
	text-transform:uppercase;
	height:20px;
	width:100%;
	font-size:18px;
	font-weight:bolder;
}

#logo {
	width:100%;
	padding-bottom:10px;
	justify-content: center;
}

#csqlogo  {
	display:block;
	max-width:200px;
	max-height:200px;
	margin-left:auto;
	margin-right:auto;
	width:auto;
	height:auto;
}


.inputbox {
	
	background-color: #f6f6f6;
  	color: #0d0d0d;
  	padding-top: 15px 0px;
  	margin-bottom:3px;
  	height:50px;
  	text-align:center;
  	text-decoration: none;
	display: inline-block;
  	font-size: 16px;
  	width:100%;
  
	border: 1px solid #f6f6f6;
  	border-radius: 5px 5px 5px 5px;  	
}

.inputbox:placeholder {
  color: #ddd;
}

#loginbutton{
	text-shadow: none;
	font-weight: normal;
	color: #ffffff;
	background: #56baed !important;
	border: none;
	width: 100%;
	height: 50px;
	font-size: 17px;
  	box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  	border-radius: 5px 5px 5px 5px;
	margin: 5px 20px 40px 0px;
  	transition: all 0.3s ease-in-out;	
}


/**/
/* COM.CSQ.CMP: RESPONSIVE*/
/* MINIMUM SIZE: IPHONE4 - 320 x 480 
/**/

@media screen and (max-height: 600px), screen and (max-width:350px)
{	
	#formContent {
	  	border-radius: 0px 0px 0px 0px;  
  		box-shadow: none;
	}
}

@media screen and (max-height:620px)
{
	#csqlogo {
		max-height:100px;
	}
	
	#logo {
		margin:0px;
		display:inline-block;
		padding-bottom:0px; 
	}
}

@media screen and (max-width:330px), screen and (max-height:480px)
{
	#csqlogo {
		max-height:50px;
	}
	
	#logo {
		margin:0px;
		display:inline-block;
		padding-bottom:0px; 
	}
}


/*@media screen and (max-height:480px)
{
	#placer {
		padding-top:5px;
		padding-bottom:5px;
		padding-left:5px;
		padding-right:5px;
	}

	#csqlogo {
		max-height:50px;
	}
	
	#logo {
		height:auto;
		padding:0px;
		display:inline-flex;
	}
	
	#logotitle {
		visibility:hidden;
	}
}*/



/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}