/* LAYOUT STYLE */
header, main, footer, foobar{
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    z-index: 1;
}

main {
    margin-top: 4rem !important;
    height: 100%;
}

header, foobar {
    z-index: 998;
}


@media (min-width: 768px) {
    main {
        margin-top: 5rem !important;
    }
}


/* Section Styles */
section{
    position: relative;
}

.section-0   { padding-top:     0; padding-bottom:     0; }
.section-16  { padding-top:  16px; padding-bottom:  16px; }
.section-32  { padding-top:  32px; padding-bottom:  32px; }
.section-48  { padding-top:  48px; padding-bottom:  48px; }
.section-64  { padding-top:  64px; padding-bottom:  64px; }
.section-80  { padding-top:  80px; padding-bottom:  80px; }
.section-96  { padding-top:  96px; padding-bottom:  96px; }
.section-112 { padding-top: 112px; padding-bottom: 112px; }
.section-128 { padding-top: 128px; padding-bottom: 128px; }
.section-144 { padding-top: 144px; padding-bottom: 144px; }
.section-160 { padding-top: 160px; padding-bottom: 160px; }
.section-176 { padding-top: 176px; padding-bottom: 176px; }
.section-208 { padding-top: 215px; padding-bottom: 215px; }
.section-240 { padding-top: 225px; padding-bottom: 225px; }
.section-272 { padding-top: 272px; padding-bottom: 272px; }

.section-top-0   { padding-top:     0; }
.section-top-16  { padding-top:  16px; }
.section-top-32  { padding-top:  32px; }
.section-top-48  { padding-top:  48px; }
.section-top-64  { padding-top:  64px; }
.section-top-80  { padding-top:  80px; }
.section-top-96  { padding-top:  96px; }
.section-top-112 { padding-top: 112px; }
.section-top-128 { padding-top: 128px; }
.section-top-144 { padding-top: 144px; }
.section-top-160 { padding-top: 160px; }
.section-top-176 { padding-top: 176px; }
.section-top-208 { padding-top: 215px; }
.section-top-240 { padding-top: 225px; }
.section-top-272 { padding-top: 272px; }

.section-bottom-0   { padding-bottom:     0; }
.section-bottom-16  { padding-bottom:  16px; }
.section-bottom-32  { padding-bottom:  32px; }
.section-bottom-48  { padding-bottom:  48px; }
.section-bottom-64  { padding-bottom:  64px; }
.section-bottom-80  { padding-bottom:  80px; }
.section-bottom-96  { padding-bottom:  96px; }
.section-bottom-112 { padding-bottom: 112px; }
.section-bottom-128 { padding-bottom: 128px; }
.section-bottom-144 { padding-bottom: 144px; }
.section-bottom-160 { padding-bottom: 160px; }
.section-bottom-176 { padding-bottom: 176px; }
.section-bottom-208 { padding-bottom: 215px; }
.section-bottom-240 { padding-bottom: 225px; }
.section-bottom-272 { padding-bottom: 272px; }

.offset-1 { padding: 1rem; }
.offset-2 { padding: 2rem; }
.offset-3 { padding: 3rem; }
.offset-4 { padding: 4rem; }

.no-offset-top { padding-top: 0 !important; }


/* Container Styles */
.container {
    width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1232px) {
    .container { max-width: 1200px; }
}

/* Heading Styles */
.heading{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.heading > * {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 8px;
}

/* Wrapper Styles */
.wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-right: -16px;
    margin-left: -16px;
}