html, body { margin: 0; padding: 0; height: 100%; }
html { height: 100%; }
html * { box-sizing: border-box; }

body { font: 19px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #2b2d2e;	background: #fafafa; display: flex; flex-direction: column; }
.content, .error { flex: 1; }
.header { width: 100%; height: 15px; margin-bottom: 20px; border-radius: 0 0 30px 30px; }
.content { width: 100%; max-width: 850px; margin: auto;	display: none;}
.error { width: 100%; padding: 30px; box-sizing: border-box; background: rgba(0,0,0,0.075); text-align: center; }

.panel {  padding: 30px; background: rgba(0, 0, 0, 0.04); border-radius: 10px; text-align: center; }
.presentation { display: flex; align-items: center; }
.presentation__agent, .presentation__connect { width: 100%; }
.presentation__agent { }
.agent-photo { border: 4px solid #bbbdbc; border-radius: 5px; max-height: 65%; max-width: 65%; }
.agent-name { font-size: 1.6em; font-weight: 700;line-height: 1; margin: 0; padding-top: 10px; }
.agent-license { font-size: 0.9em; font-weight: 400; line-height: 1; margin: 0; padding-top: 10px;}
.agent-mls { font-size: 0.8em; font-weight: 600; margin: 0; padding-top: 10px; }
.agent-broker { font-size: 1.2em; font-weight: 300; line-height:1; margin: 0; padding-top: 10px; }
.agent-telephone { display: block; line-height:1; margin: 0; padding-top: 10px; }
.installation-box { margin-top: 20px; padding: 8px 20px; display: block; background: rgba(255,255,255,0.75); border-radius: 5px;
	border: 1px solid; font-size: 0.7em; text-decoration: none; text-transform: uppercase; }
.installation-box:hover { background: white; }
.stores { font-weight: 600; margin-top: 20px; }
.stores__app-name { font-size: 1.8em; font-weight: 300; color: black; margin-top: -15px; }
.stores__links { display: inline-flex; }
.stores__install-code { width: 100%; margin-top: 10px; padding: 8px; background: rgba(255,255,255,0.5);	border: 1px solid;
	text-transform: uppercase; font-size: 1.5em; }

footer { width: 100%; padding: 20px 0; background: rgba(0,0,0,0.05); text-align: center; font-size: 0.7em; }


@media (max-width: 768px) {

	.presentation { flex-direction: column; }
	.agent-name { font-size: 1.3em; padding-top:0; }
	.agent-broker { font-size: 1em; padding-top:0; }
	.agent-license { font-size: 0.8em; padding-top:0; }
	.agent-mls { font-size: 1em; padding-top:0; }
	.agent-telephone { padding-top:0; }
	.agent-photo { max-height: 80px; border: 5px solid white; border-radius: 100px; }
	.stores__app-name { font-size: 1.2em; margin-bottom: 10px; }
	.panel > *:first-child { margin-top: 0; }
	.presentation__explanations { display: none; }

}