:root{
	--color1: #f2f2f2;
	--color2: #0066cc;
}

html, body {
  /* IE 10-11 didn't like using min-height */
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  background-image:url('bg.jpg'); 
  background-repeat:no-repeat;
  background-size:cover;
  font-family: 'Roboto', sans-serif;
  /*font-family:  Arial, Helvetica, Verdana, sans-serif;*/
  font-size:1rem;
}

.btn.btn-primary{
    margin: 0.3rem auto;
}

.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */ 
  /*---*/
  display: flex;
  flex-direction: column;
}
.footer, .header{
	padding-left: 1rem;
	padding-right: 1rem;
}
.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background:var(--color1);
  /**/
  display: flex;
  flex-direction:row-reverse;
  font-size:0.8rem;
}
.header{
	padding-top: 1rem;
	padding-bottom: 1rem;
	background:var(--color1);
	/**/
	display: flex;
	flex-direction: row;
}

#logo
{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#logo img{
	max-height:2rem;
}

#kc-locale ul {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
}

#kc-locale li {
    flex: 0 0 auto;
    margin: auto 0.6rem;
}

#kc-locale-dropdown {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
}

#kc-current-locale-link {
    margin: auto 0.6rem;
}

/**/

#main{		
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;	
		justify-content: center;
		align-items: flex-start;		
	    align-content: center;
        flex: 1 0 auto;
	}
	#main > article {
		margin: 2rem;
		padding: 2rem;
		background: white;
		flex:0 0 auto;	
	}
	.vspacer{
		font-size:0.1rem;		
	}
	.authsp{
		margin:1rem auto;
	}
	
	@media only screen and (max-width: 600px) {
	  body {
		background-size: inherit !important;
	  }	 
	  #kc-locale{
				display:none !important;
	  }
	  .header, .footer{
	  justify-content: center !important;
	  }
	  #main{
		align-content: center !important;
		justify-content: center !important;
	  }
	}
	
	@media only screen and (min-width: 600px) {
		#main > article {		
			min-width:25rem;
		}
	}

	#kc-page-title{
		font-size:1.5rem !important;
	}
	
	.authsp.no-end{
		margin-bottom:0 !important;
	}
	
	
	.itm_level0{
		cursor:pointer;
		margin: 2rem 0 0 0;
	}
	.itm_level1, .itm_level2{
		color:#007bff;
	}