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


html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	color: rgba(0,0,0,0.8);
	font-size: 9pt;
}

body {
	background-color: lavender;
	background-image: url("https://source.unsplash.com/WARZo0UjNs8/1600x900");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center; 
	height: 100%;
	box-sizing: border-box;
	
}

a {
	color: inherit;
}

table.align {
	td.align {
		vertical-align: middle;
		text-align: center;
		height: 100%;
		width: 100%;
	}
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	
}

@padOuter: 20px;
@padInner: 5px;



.card {
	td {
		text-align: center;
		vertical-align: middle;
	}

	td.logo{
		padding: @padOuter;
		padding-right: @padInner;
		img.logo {
			width: 80px;
			height: 81px;
		}
	}
	
	td.name {
		font-size: 20pt;
		-webkit-transition: font-size 0.3s; /* Safari */
    	transition: font-size 0.3s;
		h1 {
			margin: 0px;
			font-size: 130%;
			font-weight: bold;
		}
		.subname {
			font-size: 110%;
			white-space: nowrap;
		}
		padding: @padOuter @padInner;
	}
	
	td.addr {
		width: 230px;
		padding: @padOuter;
		padding-left: @padInner;
		text-align: left;
		white-space: nowrap;
		
	}
	
	background-color: rgba(255,255,255,0.8);
	border-radius: 4px;
	-webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.75);
	
	
	margin-left: auto;
	margin-right: auto;
}

@media all and (max-width: 810px) {
	.card {
		td.name {
			font-size: 150%;
		}
	}
}

@media all and (max-width: 710px) {
	.card {
		td.name {
			font-size: 130%;
		}
	}
}

@media all and (max-width: 620px) {
	.card {
		td.name {
			font-size: 120%;
		}
	}
}