/* Wait until all is loaded before doing any animation */
.js-loading *, .js-loading *::before, .js-loading *::after { animation-play-state: paused!important; }
html { min-width: 450px; height: 100%; scroll-behavior: smooth; }
body {
	display: flex;          
	flex-direction: column;
	height: 100vh;
	background-color: #e8eaf6; 
}
main {
	min-height: 400px;
	flex: 1 0 auto;
	padding-bottom: 15px;
}
footer {
	flex-shrink: 0;
	background-color: #bf0a30;
	color: #fff;
	padding-top: 10px;
}
footer p { 
	font-size: 14px; 
	text-align: center;
}
h1, h2 {
    font-family: Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
	font-weight: 500;
	color: #002868;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.sr-only-focusable:hover, .sr-only-focusable:focus {
	position: absolute;
	left: 1rem;
	display: inline-block;
	color: #fff;
}

/***** H E A D E R *****/
header {
	flex-shrink: 0;
	background-color: #3f51b5;
	width: 100%;
	height: 110px;
	text-align: center;
	padding: 10px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.headerBox { 
	position: relative;
	width: 550px;
	max-width: 100%;
	margin: 0 auto;
}
.headerBox .btn {
	position: absolute;
	top: 25px;
	left: 0;
	color: #fff;
	background: transparent;
	font-weight: 500;
	opacity: 0;
    border: 2px solid #fff;
	animation: fade 1s ease-out 2s forwards;
}
.headerBox .btn:hover, .headerBox .btn:focus { 
	background-color: rgba(0,0,0,0);
	color: rgba(255,255,255,0.8);
	border-color: rgba(255,255,255,0.8);
}
.profile-card {
	width: 320px;
	height: 90px;
	float: right;
}
.profile-card > div {
	position: relative;
	width: 0;
	height: 0;
	background-color: #bf0a30;
	margin: 0 auto;
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
	animation: grow 2s cubic-bezier(0.88, 0.32, 0.81, 0.96) forwards;
}
.profile-card > div::before { 
	content: "Hi!";
	color: #fff;
	text-align: center;
	opacity: 0;
	animation: hi 1.2s cubic-bezier(1, 0.15, 0.96, 0.95) forwards;
}
@media only screen and (max-width: 480px) {
	.profile-card, .profile-card > div { margin-right: -10%; }
	footer p { font-size: .8125rem; }
}
.profile-card h1 {
	opacity: 0;
	font-size: 36px!important;
	font-variant: small-caps;
	transform: translate3d(0, -85px, 0);
	animation: fade .5s ease-out 2.7s forwards;
}
.profile-card p {
	display: inline-block;
	background-color: #bf0a30;
	font-size: 14px;
	font-style: italic;
	color: #fff;
	padding: 2px 10px;
	border-radius: 3px;
	opacity: 0;
	transform: translate3d(0, -85px, 0);
	animation: fade .5s ease-out 3s forwards;
}
.avatar {
	opacity: 0;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	border: 5px solid #7986cb;
	border-radius: 50%;
	animation: opacity-translate .5s ease-out 2.2s forwards;
}

/***** P A G E  H E A D E R *****/
.page-header {
	position: relative;
	text-align: center;
	margin: 1.5rem 0;
}
.page-header h1 {
	position: relative;
	display: inline-block;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.page-header h1, .page-header h1 span, .page-header h1 i {
		background: #fff url(../stuff/img/bg_paint70.jpg);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		font-variant: small-caps;
		font-weight: 700;
		text-shadow: none;
		line-height: 1.1;
		animation: masked-animation 10s linear alternate infinite;
	}
}
.page-header h1::after {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.5rem;
	height: 2px;
	width: 120%;
	content: "";
	display: inline-block;
	background-image: -webkit-linear-gradient(left, rgba(26,35,126,0), rgba(26,35,126,1), rgba(26,35,126,0)); 
	background-image: -moz-linear-gradient(left, rgba(26,35,126,0), rgba(26,35,126,1), rgba(26,35,126,0)); 
	background-image: -ms-linear-gradient(left, rgba(26,35,126,0), rgba(26,35,126,1), rgba(26,35,126,0)); 
	background-image: -o-linear-gradient(left, rgba(26,35,126,0), rgba(26,35,126,1), rgba(26,35,126,0)); 
	margin-left: -10%;
	margin-right: -10%;
}
.page-header p { 
	margin-top: .625rem; 
	text-align: center;
}
@media only screen and (max-width: 767.98px) {
	.page-header h1::after {
		width: 100%;
		left: 10%;
	}
}
@media only screen and (max-width: 599.98px) {
	body { font-size: 15px; }
	.hide600 { display: none; }
	.col-6 { 
		width: 90%;
		margin-left: 5%;
	}
	.profile-card { margin-right: 12%; }
	.headerBox .btn { display: none; }
}
hr {
	clear: both;
	width: 80%;
	border: 0; 
	height: 1px; 
	background-image: -webkit-linear-gradient(left, rgba(26,35,126,0), rgba(26,35,126,1), rgba(26,35,126,0)); 
	background-image: -moz-linear-gradient(left, rgba(26,35,126,0), rgba(26,35,126,1), rgba(26,35,126,0)); 
	background-image: -ms-linear-gradient(left, rgba(26,35,126,0), rgba(26,35,126,1), rgba(26,35,126,0)); 
	background-image: -o-linear-gradient(left, rgba(26,35,126,0), rgba(26,35,126,1), rgba(26,35,126,0)); 
	margin: 1rem 10%;
}

/***** G O T O P *****/
.gotop, .gotop:focus {
	display: none;
	position: fixed;
	bottom: 1.5rem;
	right: .5rem;
	background-color: rgba(0,0,0,0);
	font-size: 3rem;
	color: #002868;
	opacity: 1;
	padding: 0;
	border: 0;
	-webkit-appearance: none; /* Safari */
	z-index: 50;
}
.gotop:hover { opacity: 0.8; }
@media only screen and (max-width: 991px) { .gotop { display: none!important; } }

/***** H I D D E N *****/
@media (max-width: 767.98px) { .hidden-sm-down { display: none !important; } }
@media (max-width: 991px) { .hidden-md-down { display: none !important; } }

/***** A N I M A T I O N S *****/
@keyframes opacity-translate {
	0% {
		opacity: 0;
		transform: translate3d(0, 50px, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(-195px, 0, 0);
	}
}
@keyframes fade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes grow {
	0% {
		opacity: 0;
		width: 0;
		height: 0;
	}
	5% {
		opacity: 1;
		width: 80px;
		height: 80px;
		padding: 10px;
		border-radius: 50%;
		transform: translate3d(0, -100px, 0);
	}
	60% {
		width: 80px;
		height: 80px;
		padding: 10px;
		border-radius: 50%;
		transform: translate3d(0, 0, 0);
	}
	100% {
		width: 320px;
		height: 90px;
		background-color: rgba(255,255,255,0.9);
		border-radius: 10px;
		transform: translate3d(0, 0, 0);
	}
}
@keyframes hi {
	0% { 
		font-size: 40px;
		line-height: 60px; 
		opacity: 0;
	}
	5% { opacity: 1; }
	99% { 
		color: rgba(255,255,255,0.9);
		font-size: 40px;
		line-height: 60px; 
		opacity: 1;
	}
	100% { 
		font-size: 0;
		opacity: 0; 
		padding: 0;
	}
}
@keyframes masked-animation {
	0% { background-position: left bottom; }
	100% { background-position: right bottom; }
}