/****************************************************************************
 * Default Container
 *
 * @TODO: export this to a seperate css
 ****************************************************************************/
#content { position: relative;  }
*:focus{ outline: none !important; }
.wrapper{ position: relative; padding-top: 4rem; }


/****************************************************************************
 * Default Content-Section
 ****************************************************************************/
.content_section{
    position: relative;
    padding: 2rem 1rem;
    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 */
}


/****************************************************************************
 * Slim Content-Sections
 ****************************************************************************/
.content_section.slim_padding{ padding: 1rem; }
.content_section.slim_padding_top{ padding-top: 1rem; }
.content_section.slim_padding_bottom{ padding-bottom: 1rem; }


/****************************************************************************
 * Bold Content-Sections
 ****************************************************************************/
.content_section.bold_padding{ padding: 4rem 1rem; }
.content_section.bold_padding_top{ padding-top: 4rem; }
.content_section.bold_padding_bottom{ padding-bottom: 4rem; }


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



@media screen and (min-width: 40em){
    /****************************************************************************
     * Default Content-Section
     ****************************************************************************/
    .content_section { padding: 3rem 2rem; }
    
    
    /****************************************************************************
     * Slim Content-Sections
     ****************************************************************************/
    .content_section.slim_padding{ padding: 1rem 2rem; }
    .content_section.medium-slim_padding{ padding: 1rem 2rem; }
    .content_section.medium-slim_padding_top{ padding-top: 1rem; }
    .content_section.medium-slim_padding_bottom{ padding-bottom: 1rem; }
    
    
    /****************************************************************************
     * Bold Content-Sections
     ****************************************************************************/
    .content_section.bold_padding{ padding: 6rem 2rem; }
    .content_section.bold_padding_top{ padding-top: 6rem; }
    .content_section.bold_padding_bottom{ padding-bottom: 6rem; }
    .content_section.medium-bold_padding{ padding: 6rem 2rem; }
    .content_section.medium-bold_padding_top{ padding-top: 6rem; }
    .content_section.medium-bold_padding_bottom{ padding-bottom: 6rem; }
    
    
    /****************************************************************************
     * Padding-Less Content-Sections
     ****************************************************************************/
    .content_section.medium-no_padding{ padding: 0; }
    .content_section.medium-no_padding_top{ padding-top: 0; }
    .content_section.medium-no_padding_left{ padding-left: 0; }
    .content_section.medium-no_padding_right{ padding-right: 0 ; }
    .content_section.medium-no_padding_bottom{ padding-bottom: 0; }
}

@media screen and (min-width: 64em){
    
    /****************************************************************************
     * Default Content-Section
     ****************************************************************************/
    .content_section { padding: 4rem 4rem; }
    
    
    /****************************************************************************
     * Slim Content-Sections
     ****************************************************************************/
    .content_section.slim_padding{ padding: 1rem 4rem; }
    .content_section.large-slim_padding{ padding: 1rem 4rem; }
    .content_section.large-slim_padding_top{ padding-top: 1rem; }
    .content_section.large-slim_padding_bottom{ padding-bottom: 1rem; }
    
    
    /****************************************************************************
     * Bold Content-Sections
     ****************************************************************************/
    .content_section.bold_padding{ padding: 8rem 4rem; }
    .content_section.bold_padding_top{ padding-top: 8rem; }
    .content_section.bold_padding_bottom{ padding-bottom: 8rem; }
    .content_section.large-bold_padding{ padding: 8rem 4rem; }
    .content_section.large-bold_padding_top{ padding-top: 8rem; }
    .content_section.large-bold_padding_bottom{ padding-bottom: 8rem; }
    
    
    /****************************************************************************
     * Padding-Less Content-Sections
     ****************************************************************************/
    .content_section.large-no_padding{ padding: 0; }
    .content_section.large-no_padding_top{ padding-top: 0; }
    .content_section.large-no_padding_left{ padding-left: 0; }
    .content_section.large-no_padding_right{ padding-right: 0 ; }
    .content_section.large-no_padding_bottom{ padding-bottom: 0; }
    
    
}