/****************************************************************************
 * Default Container
 ****************************************************************************/
#content { position: relative;  }
/**:focus{ outline: none !important; }*/
.wrapper{ position: relative; padding-top: 4rem; }


/****************************************************************************
 * Default Content-Section
 ****************************************************************************/
.content_section{
    position: relative;
    margin: 0 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    display: flex;
}

.content_section > *{
    width: 100%; /* Required because Section-Elements are Flex-Elements */
}

/****************************************************************************
 * Padding-Less Content-Sections
 ****************************************************************************/
.wrapper .no_padding{ padding: 0; }
.wrapper .no_padding_top{ padding-top: 0; }
.wrapper .no_padding_left{ padding-left: 0; }
.wrapper .no_padding_right{ padding-right: 0 ; }
.wrapper .no_padding_bottom{ padding-bottom: 0; }

/****************************************************************************
 * Fullscreen Sections
 ****************************************************************************/
.content_section.fullscreen {
    height: 100vh;
}
.content_section.fullscreen.exclude_topbar {
    height: calc(100vh - 4rem);
}


/****************************************************************************
 * First Section
 ****************************************************************************/
.content > .content_section.fullscreen:not(.exclude_topbar):first-child {
    margin-top: -4rem;
}
.content > .start_from_top:first-child {
    margin-top: -4rem;
}