html {
    box-sizing: border-box
}

*,
*:before,
*:after {
    box-sizing: inherit
}

body {
    font-family: sans-serif;
    background-color: #000;
    color: #fff
}

body.default {
    background-image: url(../img/arm_hips_30.gif);
    background-position: right bottom;
    background-repeat: no-repeat;
    height: 100vh
}

a,
a:hover,
a:active {
    color: rgba(255, 255, 255, 0.5)
}

a i,
a:hover i,
a:active i {
    font-size: 1.5em
}

a:hover {
    color: #ffc800;
    transition-duration: 1s
}

.content {
    position: relative;
    float: left;
    padding-bottom: 5em;
    width: 100%
}

.right {
    float: right
}

#sign {
    position: fixed;
    bottom: 0.5em;
    left: 0.5em
}

#sign a {
    padding-right: 1em
}

.form-group,
.formcheckbox,
button {
    width: 50%;
    margin-left: 25%
}

.form-group label,
.form-group input,
.form-group button,
.form-group textarea,
.formcheckbox label,
.formcheckbox input,
.formcheckbox button,
.formcheckbox textarea,
button label,
button input,
button button,
button textarea {
    width: 100%;
    position: relative;
    float: left;
    margin-top: 0.5em;
    padding-top: 0.5em;
    border-radius: 0.5em
}

.form-group label,
.formcheckbox label,
button label {
    display: none
}

.form-group input,
.form-group textarea,
.form-group button,
.formcheckbox input,
.formcheckbox textarea,
.formcheckbox button,
button input,
button textarea,
button button {
    background-color: #000;
    color: #fff
}

.form-group .help-block,
.formcheckbox .help-block,
button .help-block {
    display: none
}

#yform-formular-login {
    padding-top: 25vh
}

.chat .form-group #yform-table-rex_chat-message,
.chat .yform #yform-table-rex_chat-message {
    width: 85%;
    position: relative;
    float: left
}

.chat .form-group #yform-table-rex_chat-message textarea,
.chat .yform #yform-table-rex_chat-message textarea {
    width: 100%;
    margin: 0;
    height: 5em;
    opacity: 1
}

.chat .form-group button,
.chat .yform button {
    width: 15%;
    margin: 0.25 0 0 0;
    margin-left: 0 !important;
    height: 5em;
    opacity: 1
}

.refresh {
    position: fixed;
    right: 0.5em;
    bottom: 0.5em
}

#insider {
    position: relative;
    float: left;
    width: 100%
}

#insider .dan .icon,
#insider .al .icon {
    width: 100%;
    position: relative;
    float: left;
    text-align: center
}

#insider .dan .icon i,
#insider .al .icon i {
    font-size: 7em;
    padding: 3%;
    opacity: 0.33
}

#insider .dan .first,
#insider .dan .second,
#insider .al .first,
#insider .al .second {
    position: relative;
    float: left;
    max-width: 70%;
    font-size: 1.75em;
    margin: 2% 3%;
    padding: 2%;
    font-style: italic;
    border-radius: 0.5em
}

#insider .dan .second,
#insider .al .second {
    margin-left: 15%;
    text-align: right;
    float: right
}

#insider span {
    opacity: 0.8;
    font-size: 0.8em;
    position: relative;
    float: right;
    width: 80%;
    padding-right: 5%;
    text-align: right
}

#insider .dan .first {
    background-color: rgba(255, 150, 0, 0.1);
    color: #ffc800
}

#insider .dan .second {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5)
}

#insider .al .first {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5)
}

#insider .al .second {
    background-color: rgba(255, 150, 0, 0.1);
    color: #ffc800
}

#count {
    position: fixed;
    right: 0.5%;
    top: 1%;
    color: #ffc800
}

#events,
#event {
    position: relative;
    float: left;
    padding: 1%;
    width: 100%
}

#events .date,
#events .title,
#events .desc,
#event .date,
#event .title,
#event .desc {
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    float: left;
    width: 100%
}

#events .title,
#event .title {
    color: lightgrey
}

#events h3,
#event h3 {
    margin-top: 0
}

#events .desc p,
#event .desc p {
    margin-top: 0
}

#events .online .date,
#events .online .desc,
#event .online .date,
#event .online .desc {
    color: rgba(255, 255, 255, 0.5)
}

#events .online a:visited .title,
#events .online a:visited .desc,
#events .online a:link .title,
#events .online a:link .desc,
#event .online a:visited .title,
#event .online a:visited .desc,
#event .online a:link .title,
#event .online a:link .desc {
    color: #ffc800
}

#events .online a:hover .title,
#events .online a:hover .desc,
#event .online a:hover .title,
#event .online a:hover .desc {
    color: #fff
}

#event .online .desc,
#event .online .title {
    color: #fff
}

#event .warning {
    background-color: rgba(255, 0, 0, 0.15);
    color: red;
    padding: 3%
}

nav ul li {
    padding-top: 0.5em;
    padding-bottom: 0.5em
}

.yform {
    padding-bottom: 5em
}

.romages {
    height: 10em;
    width: 100%;
    background-color: rgba(255, 150, 0, 0.1);
    position: relative;
    float: left
}

.romages .romaprozent {
    height: 8em;
    margin-top: 1em;
    background-color: #ffc800;
    position: relative;
    float: left
}

.romages .romaprozent span {
    font-size: 2em;
    color: #000;
    padding: 1.25em 0 0 0.5em;
    position: relative;
    float: left
}

.bigger i {
    transform: scale(1.425)
}

.chat {
    position: relative;
    float: left;
    width: 100%;
    padding: 0 0 2em 0;
    margin: 0
}

.chat label {
    display: none
}

.chat textarea {
    width: 100%;
    height: 10vh
}

.chat div {
    position: relative;
    float: left;
    padding: 1%;
    margin-bottom: 1%;
    width: 100%
}

.chat div.user1 {
    width: 80%;
    background-color: rgba(255, 255, 255, 0.1);
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em
}

.chat div.user2 {
    width: 80%;
    background-color: rgba(255, 150, 0, 0.1);
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    margin-left: 20%
}

.chat div.yform {
    position: fixed;
    bottom: 2em;
    width: 100%
}

.chat div.yform div {
    padding: 0;
    margin: 0
}

.chat div.yform #yform-table-rex_chat-user {
    display: none
}

.galerie {
    position: relative;
    float: left;
    width: 100%
}

.galerie img {
    position: relative;
    float: left;
    padding: 1%;
    width: 98%
}

.cNoPadding {
    padding: 0 !important
}

@media only screen and (min-width: 900px) {
    .galerie img {
        width: 23%
    }
}

@media only screen and (max-width: 900px) {

    .form-group,
    .formcheckbox,
    button {
        width: 90%;
        margin-left: 5%
    }

    .form-group label,
    .form-group input,
    .form-group button,
    .formcheckbox label,
    .formcheckbox input,
    .formcheckbox button,
    button label,
    button input,
    button button {
        width: 100%;
        position: relative;
        float: left;
        margin-top: 0.5em;
        padding-top: 0.5em;
        border-radius: 0.5em
    }

    .galerie img {
        width: 31%
    }
}

@media only screen and (max-width: 756px) {

    .form-group,
    .formcheckbox,
    button {
        width: 100%;
        margin-left: 0
    }

    .form-group label,
    .form-group input,
    .form-group button,
    .formcheckbox label,
    .formcheckbox input,
    .formcheckbox button,
    button label,
    button input,
    button button {
        width: 100%;
        position: relative;
        float: left
    }

    .galerie img {
        width: 48%
    }
}

@media only screen and (max-width: 450px) {
    .galerie img {
        width: 98%
    }
}