/* General font and body Settings */
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	margin: 0px;
	background-color: #fff;
	color: #222;
	font-family: "Arial", Gadget, sans-serif;
	font-weight: 400;
}
.site-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 45rem auto;
	grid-template-areas: 'header' 'sub_header' 'mobile_mockup' 'footer';
}
.sub_header {
    line-height: 1.4;
    margin-bottom: 2rem;
    font-size: 1rem;
    text-align: center;
    justify-self: center;
    grid-area: 'sub_header';
    max-width: 67%;
}
.header {
    line-height: 1.4;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
    font-size: 3rem;
    justify-self: center;
    grid-area: 'header';
    text-align: center;
}
.footer {
	display: grid;
	grid-template-columns: auto;
	background-color: #302e2d;
	grid-area: 'footer';
}
#footer-content {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
	justify-self: center;
    align-items: center;
    text-align: center;
}
#footer-text {
	color: white;
    justify-self: center;
}

.cmp_iframe {
    position: relative;
    height: 94.5%;
    top: 2.22%;
    border-radius: 2.5rem;
    width: 64%;
    left: 18.5%;
    overflow: hidden;
    z-index: 5;
    border-width: 0rem;
    scrollbar-width: none;
}

.mobile_mockup {
    grid-area: 'mobile_mockup';
    justify-self: center;
    width: calc(45rem * (745/1093));
    margin-bottom: 1rem;
}

.smartphone_frame {
    position: absolute;
    height: 45rem;
    z-index: 0;
}