/*
@media_width_xs : 0;
@media_width_ms : 525;
@media_width_sm : 768;
@media_width_md : 992;
@media_width_lg : 1200;

@media_width_ms-1 : @media_width_ms - 1;
@media_width_sm-1 : @media_width_sm - 1;
@media_width_md-1 : @media_width_md - 1;
@media_width_lg-1 : @media_width_lg - 1;

@media_height_xs : 0;
@media_height_ms : 450;
@media_height_sm : 680;
@media_height_md : 900;
@media_height_lg : 1028;

@media_height_ms-1 : @media_height_ms - 1;
@media_height_sm-1 : @media_height_sm - 1;
@media_height_md-1 : @media_height_md - 1;
@media_height_lg-1 : @media_height_lg - 1;
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat');


.border-radius-5 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

.border-round {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}

.flex-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-container > div {
}

* {
	font-family: 'Montserrat', sans-serif;
}

html, body {
	height: 100%;
	width: 100%;
}

body {

	margin: 0;

	background-color: #CCCCC4;

	background-image: url('../images/background.2.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	padding-top: 0px;
	/*padding-bottom: 60px;*/

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

main > span
{
	height: 40px;
}

#logo
{
	display:none;
}

#logosmall
{
	display:block;
}

a {
	padding: 5px;
	text-decoration: none;
	color: #888;
}

a:hover {
	background-color: rgba(255, 255, 255, 0.5);
	/*border: 1px solid #ddddd8;*/
}

a.border-round {
	padding: 20px;
}

#emailmain {
	display: none;
}

#emailfooter {
	display: block;
	padding: 10px;
}

footer {
	color: #555;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 60px;
	/*line-height: 60px;*/
	background-color: rgba(255, 255, 255, 0.5);
	border-top: 1px solid #ddddd8;
	padding: 0px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

footer > span {
	min-width: 40px;
}

@media (min-height : 512px) {
	#emailmain {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#emailfooter {
		display: none;
	}

	#logo
	{
		display:block;
	}

	#logosmall
	{
		display:none;
	}


}


/* Tooltip container */
.tooltip {
	/* display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; */
	  /* position: relative;
  display: inline-block; */
  /* border-bottom: 1px dotted black; If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  /* width: 120px; */
  background-color: rgba(255, 255, 255, 0.5);
  color: #888;
  text-align: center;
  padding: 3px 5px;
  border-radius: 6px;
  margin-top: 110px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}