:root
{
    --color-content-txt         : rgb(54, 54, 54);
    --color-elements-red        : rgb(220, 2, 14);
    --color-elements-red-dark   : rgb(180, 0, 10);
    --color-elements-grey       : rgb(66, 63, 61);
    --color-elements-grey-light : rgb(110, 103, 97);
    --color-elements-cream      : rgb(204, 198, 193);
    --color-content-bg          : rgb(240, 239, 238);
    --color-herobanner-txt      : rgb(255, 255, 255);
    --color-herobanner-bg       : rgb(66, 63, 61);
}

html
{
    min-height : 101%;
    height     : 100%;
}

body
{
    min-height       : 100%;
    margin           : 0;
    padding          : 0 0 184px; /*padding-bottom: footer-height + buffer*/
    font-weight      : 300;
    font-family      : 'Aktiv Grotesk', sans-serif;
    background-color : var(--color-content-bg);
    position         : relative;
}

body,
body *
{
    box-sizing : border-box;
}

/*###############################################################
TEXT STYLES
###############################################################*/
.h-prefix,
.h-suffix
{
    font-size      : 11px;
    letter-spacing : 1.5px;
    font-weight    : 500;
    line-height    : 14px;
    text-transform : uppercase;
    text-align     : center;
    padding        : 0 45px;
    color          : var(--color-elements-grey-light);
}

.h-suffix
{
    margin : 0 0 30px;
}

.h-prefix.hp-left,
.h-suffix.hs-left
{
    text-align : left;
    padding    : 0;
}

h1
{
    margin         : 15px 0 30px;
    padding        : 0 25px;
    font-weight    : 100;
    font-size      : 36px;
    line-height    : 36px;
    letter-spacing : 3px;
    text-align     : center;
    text-transform : uppercase;
    color          : var(--color-elements-grey-light);
}

@media screen and (min-width : 720px)
{
    h1
    {
        padding        : 0 45px;
        font-size      : 44px;
        line-height    : 44px;
        letter-spacing : 6px;
    }
}

h1:first-child
{
    margin-top : 0;
}

h2
{
    margin         : 15px 0 30px;
    font-weight    : 300;
    font-size      : 26px;
    line-height    : 26px;
    letter-spacing : 2px;
    color          : var(--color-elements-grey-light);
}

h2.has-suffix
{
    margin-bottom : 15px;
}

p
{
    font-family : 'Minion Pro', serif;
    color       : var(--color-content-txt);
}

a,
a:link,
a:visited
{
    color           : var(--color-elements-red);
    text-decoration : none;
    transition      : color ease-in-out 250ms;
}

a:hover,
a:active,
a:focus
{
    color           : var(--color-elements-red-dark);
    text-decoration : none;
}

/*###############################################################
HEAD
###############################################################*/
header
{
    background-color : #ffffff;
    padding          : 20px;
}

header .header
{
    max-width       : 1440px;
    margin          : 0 auto;
    display         : flex;
    flex-direction  : row;
    justify-content : flex-start;
    align-items     : center;
    flex-wrap       : nowrap;
}

header .header > div
{
    flex-basis  : auto;
    flex-grow   : 0;
    flex-shrink : 0;
    padding     : 0 15px;
}

header .header > div:last-child:not(:first-child)
{
    margin-left : auto;
}

header a.logo
{
    display : block;
    margin  : 0;
    padding : 10px 0;
}

header svg.logo
{
    display   : block;
    margin    : 0;
    max-width : 100px;
    height    : auto;
}

@media screen and (min-width : 720px)
{
    header svg.logo
    {
        max-width : 200px;
    }
}

header svg.logo .logo-letter
{
    fill         : var(--color-elements-cream);
    fill-opacity : 1;
    fill-rule    : nonzero;
    stroke       : none
}

header svg.logo .logo-letter.ll-r
{
    fill : var(--color-elements-red);
}

/*###############################################################
FOOTER
###############################################################*/
footer
{
    position         : absolute;
    left             : 0;
    right            : 0;
    bottom           : 0;
    background-color : #ffffff;
    text-align       : center;
    padding          : 35px 20px 55px;
}

footer > div
{
    max-width      : 1080px;
    margin         : 0 auto;
    font-size      : 9px;
    font-weight    : 500;
    line-height    : 14px;
    text-transform : uppercase;
    color          : var(--color-elements-grey-light);
}

footer a
{
    display        : inline-block;
    letter-spacing : 1.2px;
    padding        : 2px;
}

footer a + a
{
    margin : 0 0 0 10px;
}

/*###############################################################
HERO
###############################################################*/
.hero
{
    background-repeat   : no-repeat;
    background-position : center center;
    background-size     : cover;
    background-color    : var(--color-herobanner-bg);
}

.hero:empty
{
    background-image : url('../img/161103_mfd_06-headerbild-kursraum_sm-1380x349.jpg');
    height           : 340px;
    max-height       : 30vh;
}

.hero .hero-banner
{
    max-width           : 1080px;
    margin              : 0 auto;
    display             : flex;
    flex-direction      : row;
    flex-wrap           : wrap;
    justify-content     : flex-start;
    align-items         : flex-end;
    background-image    : url('../img/ELE_EB_Running_2_image-header_720x628px.jpg');
    background-repeat   : no-repeat;
    background-position : center center;
    background-size     : cover;
}

@media screen and (min-width : 720px)
{
    .hero .hero-banner
    {
        background-image : url('../img/ELE_EB_Running_2_image-header_1120x349px.jpg');
    }
}

@media screen and (min-width : 720px)
{
    .hero .hero-banner
    {
        background-position : left center;
    }
}

.hero .hero-banner .banner-buffer
{
    flex-basis  : 100%;
    flex-shrink : 0;
    flex-grow   : 0;
    padding     : 40% 0 0;
}

@media screen and (min-width : 720px)
{
    .hero .hero-banner .banner-buffer
    {
        display : none;
    }
}

.hero .hero-banner .banner-content
{
    text-align  : center;
    flex-basis  : 100%;
    flex-shrink : 0;
    flex-grow   : 0;
    padding     : 80px 20px 40px;
}

@media screen and (min-width : 720px)
{
    .hero .hero-banner .banner-content
    {
        padding    : 40px 20px;
        flex-basis : 50%;
    }
}

.hero .hero-banner .banner-title
{
    text-transform : uppercase;
    color          : var(--color-herobanner-txt);
    font-size      : 40px;
    font-weight    : 500;
}

@media screen and (min-width : 720px)
{
    .hero .hero-banner .banner-title
    {
        font-size : 50px;
    }
}

.hero .hero-banner .banner-text
{
    text-transform : uppercase;
    color          : var(--color-herobanner-txt);
    margin         : 1em 0;
    font-size      : 20px;
    font-weight    : 500;
}

@media screen and (min-width : 720px)
{
    .hero .hero-banner .banner-text
    {
        font-size : 24px;
    }
}

.hero .hero-banner .banner-button
{
}

.hero .hero-banner .banner-button a
{
}

.hero .hero-banner .banner-button a.button
{
}

@media screen and (min-width : 720px)
{
    .hero .hero-banner .banner-button a.button
    {
        padding   : .8171em 1.5715em;
        font-size : 14px;
    }
}

/*###############################################################
MAIN CONTENT
###############################################################*/
main
{
    max-width        : 1080px;
    padding          : 35px 15px;
    margin           : -55px auto 0;
    background-color : #ffffff;
    position         : relative;
    z-index          : 1;
}

main.login
{
    text-align : center;
}

main.no-offset
{
    margin-top : 0;
}

main > .content-contstraint
{
    max-width : 400px;
    margin    : 0 auto;
}

.coursesheet
{
    width     : calc(100% + 30px);
    max-width : 100vw;
    overflow  : auto;
    padding   : 0 0 20px;
    margin    : 0 -15px;
}

.course-table
{
    display : table;
    width   : 100%;
    padding : 0;
    margin  : 0;
}

.course-table .ct-tr
{
    display          : table-row;
    background-color : #ffffff;
}

.course-table .ct-tr.ct-bg-tr
{
    background-color : var(--color-content-bg);;
}

.course-table .ct-th,
.course-table .ct-td
{
    display        : table-cell;
    padding        : 0 10px;
    line-height    : 43px;
    font-size      : 10.5px;
    color          : var(--color-elements-grey-light);
    word-break     : break-word;
    white-space    : nowrap;
    vertical-align : middle;
}

.course-table .ct-th:first-child,
.course-table .ct-td:first-child
{
    padding-left : 15px;
}

.course-table .ct-th:last-child,
.course-table .ct-td:last-child
{
    padding-right : 15px;
}

.course-table .ct-th.align-right,
.course-table .ct-td.align-right
{
    text-align : right;
}

.course-table .ct-td
{
    font-weight : 500;
}

.course-table .ct-th
{
    font-weight : 700;
}

.course-table .ct-th > span,
.course-table .ct-td > span
{
    display     : inline-block;
    line-height : 18px;
}

.course-table .button.margin
{
    margin : 0 0 0 10px;
}

/*###############################################################
FORM
###############################################################*/
form .input-unit
{
    margin : 0 0 20px;
}

form .input-unit.radio-checkbox
{
    position : relative;
}

@media screen and (min-width : 720px)
{
    form .unit-group
    {
        display         : flex;
        flex-direction  : row;
        justify-content : flex-start;
        align-items     : flex-start;
        flex-wrap       : nowrap;
        margin          : 0 0 20px;
    }

    form .unit-group .input-unit
    {
        flex-basis  : calc(50% - 10px);
        flex-grow   : 0;
        flex-shrink : 0;
    }

    form .unit-group .input-unit.bigger
    {
        flex-basis : calc(68% - 10px);
    }

    form .unit-group .input-unit.smaller
    {
        flex-basis : calc(32% - 10px);
    }

    form .unit-group .input-unit:first-child
    {
        margin : 0 10px 0 0;
    }

    form .unit-group .input-unit:last-child
    {
        margin : 0 0 0 10px;
    }
}

form .input-unit .input-hint
{
    font-size : 12px;
    color     : var(--color-elements-grey-light);
    margin    : 20px 0 0;
}

form .input-unit input:not([type=checkbox],[type=radio]),
form .input-unit select
{
    display        : inline-block;
    width          : 100%;
    transition     : border ease-in-out 250ms;
    height         : 40px;
    margin         : 0;
    padding        : 12px 22px;
    background     : none;
    border-radius  : 20px;
    font-weight    : 400;
    font-size      : 11px;
    line-height    : 16px;
    letter-spacing : 1px;
    font-family    : inherit;
}

form .input-unit input:not([type=checkbox],[type=radio])
{
    border : 1px solid var(--color-elements-grey-light);
    color  : var(--color-elements-grey-light);
}

form .input-unit input[type=checkbox],
form .input-unit input[type=radio]
{
    position : absolute;
    opacity  : 0;
    z-index  : -999;
}

form .input-unit input[type=checkbox] + label,
form .input-unit input[type=radio] + label
{
    display        : block;
    color          : var(--color-elements-grey-light);
    cursor         : pointer;
    position       : relative;
    padding        : 6px 0 0 60px;
    min-height     : 40px;
    font-weight    : 400;
    font-size      : 11px;
    line-height    : 16px;
    letter-spacing : 1px;
}

form .input-unit input[type=checkbox] + label::before,
form .input-unit input[type=radio] + label::before
{
    box-sizing       : border-box;
    content          : '';
    display          : block;
    position         : absolute;
    top              : 0;
    left             : 0;
    height           : 40px;
    width            : 40px;
    border-radius    : 20px;
    border           : 1px solid var(--color-elements-grey-light);
    background-color : transparent;
    transition       : border ease-in-out 250ms;
}

form .input-unit input[type=checkbox]:checked + label::before,
form .input-unit input[type=radio]:checked + label::before
{
    background-color    : var(--color-elements-grey-light);
    background-image    : url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-position : center center;
    background-size     : 30px 30px;
    background-repeat   : no-repeat;
}

form .input-unit select
{
    background-color : #ffffff;
    color            : var(--color-elements-red);
    border           : 1px solid var(--color-elements-red);
}

form .input-unit select option
{
    background-color : #ffffff;
    height           : 40px;
    padding          : 0 22px;
    font-weight      : 400;
    font-size        : 11px;
    line-height      : 40px;
    letter-spacing   : 1px;
    font-family      : inherit;
    color            : var(--color-elements-red);
}

form .input-unit select option:first-child
{
    border-top    : 1px solid var(--color-elements-red);
    border-right  : 1px solid var(--color-elements-red);
    border-left   : 1px solid var(--color-elements-red);
    border-radius : 20px 20px 0 0;
}

form .input-unit select option:last-child
{
    border-bottom : 1px solid var(--color-elements-red);
    border-right  : 1px solid var(--color-elements-red);
    border-left   : 1px solid var(--color-elements-red);
    border-radius : 0 0 20px 20px;
}

form .input-unit select option:not(:last-child):not(:first-child)
{
    border-right : 1px solid var(--color-elements-red);
    border-left  : 1px solid var(--color-elements-red);
}

form .input-unit select option[selected]
{
    color : var(--color-elements-grey-light);
}

form .form-actions
{
    text-align : center;
}

a.button,
form .form-actions input[type=submit],
form .form-actions input[type=button]
{
    display             : inline-block;
    border              : 1px solid var(--color-elements-red);
    border-radius       : 1.7143em;
    font-family         : inherit;
    font-weight         : 500;
    padding             : 1.2381em 2.381em;
    background          : var(--color-elements-red);
    color               : #ffffff;
    font-size           : 10.5px;
    line-height         : .9524em;
    letter-spacing      : .0952em;
    text-transform      : uppercase;
    text-decoration     : none;
    transition          : background ease-in-out 250ms, border ease-in-out 250ms, color ease-in-out 250ms;
    cursor              : pointer;

    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    user-select         : none;
}

a.button:hover,
form .form-actions input[type=submit]:hover,
form .form-actions input[type=button]:hover
{
    border-color : var(--color-elements-red-dark);
    background   : var(--color-elements-red-dark);
    color        : var(--color-elements-red);
}

form .form-footer
{
    margin         : 20px 0 0;
    font-size      : 10.5px;
    line-height    : 10px;
    text-transform : uppercase;
}

form .form-footer a
{
    display        : inline-block;
    margin         : 20px 0 0;
    font-size      : 10.5px;
    line-height    : 10px;
    text-transform : uppercase;
    padding        : 1px;
}

form .form-footer a + a
{
    margin : 0 0 0 10px;
}

form p.form-message
{
    color : var(--color-elements-red);
}

form input + p.form-message,
form select + p.form-message
{
    font-size   : 11px;
    line-height : 16px;
    margin      : 3px 0 0;
}