body {
margin: 0;    
padding: 0;
}

h1, .h1 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.5rem;
font-weight: 400;
line-height: 1.25;
color: #f5f5f5;
margin: 0.5rem 0;
}

h2, .h2 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.1;
color: #c3262e;
margin: 1.0rem 0;
text-align: center;
}

h3, .h3 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 0.90rem;
font-weight: 700;
line-height: 1.1;
color: #2c3691;
margin: 1.5rem 0 0.75rem 0;
border-top-style: dashed;
border-top-width: 1px;
border-bottom-style: dashed;
border-bottom-width: 1px;
padding: 5px 0;
text-align: center;
}

h4, .h4 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.1;
color: #5F5D5D;
margin: 1.5rem 0 0.5rem 0;
}

p {
font-size: 0.55rem;    
line-height: 1.7;
}

blockquote {
font-size: .60rem;
line-height: 1.5;
font-weight: 500;
background: #f3f3f3;
padding: 10px;
border-radius: 5px;
text-align: center;
clear: both;
}

ul {
font-size: 0.50rem;
font-weight: 500;
line-height: 1.5;
list-style-image: url('/assets/img/checkmark.png');
margin-bottom: 0.75rem;
}

li {
margin: 0.15rem;
color: #5F5D5D;
}

.point {
font-weight: 600;
color: #c3262e;
}

a.anchor {
display: block;
position: relative;
top: -130px;
visibility: hidden;
}

.shadow {
-webkit-box-shadow: 0 2px 1px -2px #1E6EAD;
-moz-box-shadow: 0 2px 1px -2px #1E6EAD;
box-shadow: 0 2px 1px -2px #1E6EAD;
}

.offset {
margin-top: 0;
}

.responsive {
width: 100%;
height: auto;
border-radius: 5px;
}


.assessment {
max-width: 475px;
}

.assessment:hover {
opacity: 0.8;
}

.center {
text-align: center;  
margin: 2rem;
}

/* Login Grid Container */
.container {
display: grid;
grid-template-columns: 2fr 8fr 2fr;
grid-template-areas:
"wrapper-top-one wrapper-top-one wrapper-top-one"
"wrapper-side-one wrapper-main-one wrapper-side-two"
"wrapper-bottom-one wrapper-bottom-one wrapper-bottom-one";
}

.top {
background: #fff;
padding: 10px;
position: fixed;
display: block;
width: 100%;
max-height: 120px;
}

.logo {
max-width: 400px;
margin: 0 auto;
}

.headline {
background: #a90329;
padding: 10px 20px 50px 20px;
text-align: center;
margin-top: 120px;
}

.area {
text-align: left;
}

.wrapper-top-one {
grid-area: wrapper-top-one;
}

.wrapper-side-one {
grid-area: wrapper-side-one;
}

.wrapper-main-one {
grid-area: wrapper-main-one;
height: auto;
background-color: #fff;
border-radius: 5px;
padding: 20px;
margin: -50px 10px 20px 10px;
}

.wrapper-side-two {
grid-area: wrapper-side-two;
}

.wrapper-bottom-one {
grid-area: wrapper-bottom-one;
height: auto;
background: #1d1d1d;
padding: 20px;
color: #f5f5f5;
text-align: center;
font-size: 0.4rem;
}

.img-left {
display: grid;
grid-template-columns: 5fr 7fr;
grid-gap: 20px;
}

.img-right {
display: grid;
grid-template-columns: 7fr 5fr;
grid-gap: 20px;
}

@media (max-width: 480px) {
.img-left {
display: grid;
grid-template-columns: 1fr;
}

.img-right {
display: grid;
grid-template-columns: 1fr;
}  
}

@media (max-width: 1024px) {
.container {
grid-template-columns: 1fr 10fr  1fr;
grid-template-areas:
"wrapper-top-one wrapper-top-one wrapper-top-one"
"wrapper-main-one wrapper-main-one wrapper-main-one"
"wrapper-bottom-one wrapper-bottom-one wrapper-bottom-one";
}
}

#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
width: 50px;
height: auto;
text-align: center;
line-height: 30px;
cursor: pointer;
border: 0;
border-radius: 2px;
text-decoration: none;
transition: opacity 0.2s ease-out;
opacity: 0;
}
#back-to-top:hover {
opacity: 0.9;
}
#back-to-top.show {
opacity: 1;
}
#content {
height: 5000px;
}