:root {
    --link-color: #39c3d4;
    --font: 'Cera-Pro-Regular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-headings: 'Cera-Pro-Regular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-size: 14px;
    --text-color: #3a3a3a;
}


/* Default Font */
@font-face {
    font-family: Cera-Pro-Regular;
    src: url("/css/fonts/cerapro/Cera-Pro-Regular.otf") format("opentype");
    font-weight: normal;
}

@font-face {
    font-family: Cera-Pro-Regular;
    src: url("/css/fonts/cerapro/Cera-Pro-Bold.otf") format("opentype");
    font-weight: bold;
}

html,
body,
.regtd,
.regbutton,
.reginput,
.reglookup {
    font-family: 'Cera-Pro-Regular';
    font-size: 14px;
    color: #3a3a3a;
}



/* Body */
body {
    width: 100%;
    margin: 0px auto;
    background: none;
    padding-top: 5px;
}

@media all and (min-width: 900px) {
    body {
        width: 100%;
        max-width: 1200px;
    }
}



/* Headlines */
h1 {
    color: #e2001a;
    font-size: min(5vw, 50px);
    margin: 0px;
    text-transform: uppercase;
}

h2 {
    color: #e2001a;
    font-size: min(3vw, 20px);
    margin: 0px;
}



/* Links */
a,
#showfilterrow2,
#hidefilterrow2 {
    color: #39c3d4
}



/* Entrylist */
#overview .listcontainer {
    border: none;
    margin-left: 0px;
    padding: 2px 2px 2px 2px;
}

    #overview .listcontainer:hover {
        background-color: white;
    }

#results td {
    font-size: 14px;
}

.linkdetail {
    color: #39c3d4;
}

#popupheader {
    background-color: #39c3d4;
    color: #3a3a3a;
}

body.list.overview #overview .grouptitel,
body.list.overview #overview .group {
    border-bottom: none;
}



/* Registration Defaults */
.reggrouptitle,
.regheadline3 {
    color: #3a3a3a;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: normal;
    border-bottom: 1px solid grey;
    padding-bottom: 0px;
    margin-bottom: 10px;
}

.regbutton {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    padding: 0.85em 1em;
    border: 1px solid #39c3d4;
    border-radius: 6px;
    background-image: none !important;
    background-color: #39c3d4;
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-transition: background-color 0.15s ease-out, color 0.15s ease-out;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.reginput {
    height: 3em;
    border: 1px solid #f0f0f0;
    border-radius: 0;
    padding: 0.375em 0.75em;
    background-clip: padding-box;
    background-color: #f0f0f0;
    color: #333;
}

.regcheckbox {
    height: 24px;
    width: 24px;
}

.reglookup {
    background-color: #f0f0f0;
    border: 1px solid lightgrey;
    padding: 10px;
    width: 229px;
}

.reginput:focus,
.searchandfilterinput:focus {
    border-color: #d7d7d7;
    outline: 0;
}



/* Progress-Bar */
.progress-indicator > li.active,
.progress-indicator > li.active .bubble {
    color: #39c3d4;
}

    .progress-indicator > li.active .bubble,
    .progress-indicator > li.active .bubble:after,
    .progress-indicator > li.active .bubble:before {
        background-color: #39c3d4;
        border-color: #122a3f
    }



/* Header */
.header {
    border-spacing: 0px;
    border-collapse: collapse;
    width: 100%;
}

.headerlogo {
    width: 165px;
    padding: 0px;
}

.headerswissski {
    width: 100%;
    display: block
}

.headersponsoren {
    display: none;
    border-bottom: 1px solid lightgrey;
    padding-left: 100px !important;
    padding: 0px 0px 0px 150px;
}

    .headersponsoren img {
        vertical-align: middle;
        padding-right: 30px;
        box-sizing: unset;
    }

.headersunrise {
    width: 84px;
}

.headerraiffeisen {
    width: 84px;
}

.headerhelvetia {
    width: 86px;
}

.headerbkw {
    width: 87px;
}

.headereventlogo {
    height: 70px;
    position: absolute;
    top: 20px;
    right: 10px
}

@media all and (max-width: 700px) {
    .headereventlogo {
        height: 40px;
    }
}

.headerlanglink {
    border-bottom: 1px solid lightgrey;
    padding: 0px 10px 0px 10px;
    white-space: nowrap;
    text-align: right;
}

    .headerlanglink a {
        color: #3a3a3a;
        text-transform: uppercase;
        font-size: 16px;
    }

@media all and (min-width: 900px) {
    .headerlogo {
        width: 214px;
    }

    .headersponsoren {
        display: table-cell;
    }
}



/* Content */
.content {
    padding: 10px;
    position: relative;
}



/* Footer */
.footer {
    margin-top: 100px;
}

.eventcontact {
    font-size: 14px;
    margin: 10px 0px 30px 20px;
}


.eventcontactlogo {
    display: inline-block;
    vertical-align: top;
    padding-right: 20px
}

.eventcontacttext {
    display: inline-block;
    vertical-align: top
}

    .eventcontacttext a {
        color: #3a3a3a;
    }

.footerblue {
    background-color: #39c3d4;
    padding: 10px 20px 10px 20px;
    color: white;
}

    .footerblue a {
        color: white
    }

.footerblack {
    background-color: #3f3f3f;
    color: white;
    padding: 5px 10px 0px 10px;
    height: 30px;
    position: relative;
}

.tmlinks {
    width: 250px;
    margin: 0 auto;
    padding: 3px 0px 0px 0px;
}

    .tmlinks a {
        color: white;
        margin: 0px 10px 0px 10px;
    }

.tmlogo {
    position: absolute;
    height: 30px;
    right: 10px;
    top: 2px;
}

@media all and (max-width: 600px) {
    .tmlinks {
        margin: 0 0 0 0;
        padding: 3px 0px 0px 0px;
    }
}

.logobalken2 {
    width: 100%;
    max-width: 900px;
    padding: 0px 0px 20px 0px;
}

.logobalken3 {
    width: 100%;
    max-width: 500px;
    display: none;
    padding: 0px 0px 20px 0px;
}

@media all and (max-width: 700px) {
    .logobalken2 {
        display: none;
    }

    .logobalken3 {
        display: inline;
    }
}