@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url("../assets/fonts/OpenSans-Regular.woff") format("woff");
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url("../assets/fonts/OpenSans-Bold.woff") format("woff");
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url("../assets/fonts/OpenSans-Black.woff") format("woff");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: white; font-family: "Open Sans","Arial", sans-serif; line-height: 1.2; }

figure { margin: 0; min-width: 50px; width: 50px; }
img { width: auto; max-width: 100%; height: auto; }

h1 { font-size: calc(24px + 6 * ((100vw - 320px) / 680)); font-weight: 700; }

.flex { display: flex; flex-wrap: nowrap; align-items: center; }

.main-content, footer { max-width: 800px; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; }
.main-content { text-align: center; }
footer { font-family: "Arial", sans-serif; max-width: 900px; padding-bottom: 7rem; padding-top: 1.2rem; }
footer p { color: gray; text-align: justify; }
.bottomlink, .bottomlink a { color: white; text-align: center; }
.bottomlink { margin-top: 2rem; }

.att-box, .test-w { text-align: left; }
.att-box {
	color: #000;
    background: #FEF500;
    padding: 15px;
    text-shadow: 0px 0px 2px rgba(150, 150, 150, 1);
    font-size: 14px;
    margin-bottom: 20px;
}
.att-box p { margin: 0; }

.modal { background-color: white; color: #212529; border-radius: 8px 8px 0 0; margin-top: 2rem; }
.modal h2 { color: #D41000; font-size: 36px; text-shadow: 0px 0px 2px #D41000; font-weight: 400; margin: 0 0 5px; }
.modal h3 { font-size: 24px; text-shadow: 0px 0px 2px rgba(150, 150, 150, 1); margin: 0 0 15px; }
.modal-content { padding: 15px 5% 0; }

.test-w { background-color: #209DD2; margin-top: 1rem; color: white; font-size: 14px; padding: 14px 1rem; }
.test-w p { margin: 0; }
.divisor { margin: 0 2rem; height: 55px; background: white; width: 1px; max-width: 1px; }

.testimonials { max-width: 375px; display: grid; grid-template-areas:'testimonial'; align-items: center; }
.text { grid-area: testimonial; transition: 1s; opacity: 0; visibility: hidden; }
.text.active { opacity: 1; visibility: visible; }
.text p:last-child { margin-top: .3rem; }

.btn-raise-score { display: block; margin: 1rem 0; animation: pulse 1.6s infinite; }

@keyframes pulse {
	0% {
		transform: scale(1);
	} 50% {
		transform: scale(1.1);
	} 100% {
		transform: scale(1);
	}
}

@media (max-width: 500px) {
	.test-w > .flex { flex-flow: column; }
	.divisor { margin: 1rem 0; height: 1px; width: 100%; max-width: 100%; }
}