:root {
	--blue: #02a7c5;
	--font2: 'Myriad Pro', Arial, sans-serif
}

body {
	color: #013475;
	padding: 63px 0;
	font-size: 21px;
	font-family: 'Crimson Text', sans-serif;
	background-color: #8084b2
}

a {color: inherit}
a:hover, a:focus {text-decoration: none}

img, object, iframe, video {max-width: 100%; height: auto;}

p {margin-bottom: 0}
p+p {margin-top: 20px}

.fc-blue {color: var(--blue)!important}

.italic {font-style: italic!important}
.bold {font-weight:500}

.wrapper {
	padding: 20px;
	width: 90%;
	max-width: 720px;
	margin: 0 auto;
	min-height: 500px;
	background-color: #fff;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2)
}

.header {margin-bottom: 40px}

.owner img {border: 10px solid #eee}
.branding {margin-bottom: 20px}
.branding .logo {margin-bottom: 20px}
.branding .slogan {color: #013475; font-size: 19px; font-style: italic}

.about {
	display: flex;
	align-items: center;
	padding: 3px 0;
	border-width: 1px 0;
	border-style: solid;
	border-color: #eee;
	margin-bottom: 15px
}

.about .name {
	margin: 7px 0 0;
	color: #013475;	
	font-size: 40px;
	font-weight: 600;
	margin-right: 45px;
	line-height: 1;
}

.social-icons a {color: var(--blue); display: inline-block}
.social-icons a:not(:last-child) {margin-right: 11px}

.content {padding: 0 12px}
ul.contact-info {list-style: none; text-align: left; font-size: 14px; padding: 0; margin: 0; font-family: var(--font2)}
ul.contact-info .icon {color: var(--blue); text-align: center; min-width: 20px; margin-right: 4px}
ul.contact-info>li:not(:last-child) {margin-bottom: 5px}

.copyright {margin: 40px 0 30px; font-size: 12px; text-align: center; font-family: var(--font2)}

@media screen and (max-width: 768px) {
	body {padding: 0}
	.wrapper {margin: 25px auto}
	.header {text-align: center}
	.owner {margin-bottom: 30px}
	.about {justify-content: center}
	ul.contact-info {display:table; margin: 0 auto}
	.about {display: block}
	.about .name {margin: 7px 0 0}
	.content {text-align: center}
}