/**
 * (en) Uniform design of form elements
 * (de) Einheitliche Standardformatierungen für Formular-Elemente
 *
 * @copyright			Copyright 2015, crossbase mediasolution GmbH
 * @version				1.0
 */

@-webkit-keyframes progress {
    from {
    }

    to {
        width: 50%
    }
}

@keyframes progress {
    from {
    }

    to {
        width: 50%
    }
}

@media screen {

    /* (en) format form element label and containers */
    /* (de) Formatierung von Form-Element Bezeichnungen und Containern */
    /*------------------------------------------------------------------------------------------------------*/
    button {
        font-family: 'Source Sans Pro Bold', sans-serif;
        cursor: pointer;
        outline: none;
        border: none;
        text-align: left;
        background-color: transparent;
    }

    button.text-only {
        color: #000;
        -webkit-transition: color 0.3s ease 0s;
        transition: color 0.3s ease 0s;
    }

    button.text-only:hover {
        color: #ff6600;
    }

    label {
        position: relative;
    }

    label.float-left {
        margin-right: 4px;
        float: left;
    }

    .select2-style-label {
        line-height: 24px;
    }

    .select2-style-label label {
        display: inline;
    }

    .select2-style-input,
    .select2-style-result {
        font-family: 'Source Sans Pro Regular', sans-serif;
        display: block;
        position: relative;
        overflow: hidden;
        font-size: 100%;
        line-height: 24px;
        border-radius: 0px;
        padding: 4px 8px;
        margin-bottom: 24px;
        background: #fff;
        color: #000;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }

    .select2-style-result {
        display: inline-block;
        margin: 0 0 0 8px;
    }

    .select2-style-input.icon-button {
        padding-right: 44px;
    }

    ::-webkit-input-placeholder {
        color: #909090;
    }

    :-moz-placeholder {
        color: #909090;
    }

    ::-moz-placeholder {
        color: #909090;
    }

    :-ms-input-placeholder {
        color: #909090;
    }


    /* (en) format info icons in form element containers	*/
    /* (de) Formatierung von Info-Icons in Form-Element Containern */
    /*------------------------------------------------------------------------------------------------------*/
    .select2-style-input.inline-icon {
        padding: 4px 8px 4px 32px;
    }

    .select2-style-input.inline-icon .fa {
        position: absolute;
        left: 12px;
        top: 6px;
    }

    /* (en) format radio und checkbox elements	*/
    /* (de) Formatierung von Radio- und Checkbox-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    .checkbox-radio-group {
        margin: 0 0 24px 0;
    }

    .checkbox-radio-group .float-col.float-col-text {
        margin: 0;
        line-height: 26px;
    }

    input[type='radio'],
    input[type='checkbox'] {
        position: absolute;
        left: 4px;
        top: 4px;
        opacity: 0;
        cursor: pointer;
    }

    .select-img input[type='radio'],
    .select-img input[type='checkbox'] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    input[type='radio'] + span,
    input[type='checkbox'] + span {
        cursor: pointer;
    }

    input[type='radio'] + span:before,
    input[type='checkbox'] + span:before {
        font-family: FontAwesome;
        font-weight: 900;
        font-size: 22px;
        line-height: 22px;
        padding-left: 2px;
        display: inline-block;
        width: 22px;
        -webkit-transition: color 0.3s ease 0s;
        transition: color 0.3s ease 0s;
    }

    input[type='radio'] + span:hover:before,
    input[type='checkbox'] + span:hover:before {
        /* (de) nicht verwendet, da Mobile Safari Checkboxen im Hintergrund nicht erkennt */
        /* (de) not used because mobile safari does not recognize checkboxes in background */
        /*color: #ff6600;*/
    }

    input[type='radio'] + span:before {
        content: '\f111'; /* circle-blank */
    }

    input[type='radio']:checked + span:before {
        content: '\f192'; /* circle */
    }

    input[type='checkbox'] + span:before {
        content: '\f0c8'; /* check-empty */
    }

    input[type='checkbox']:checked + span:before {
        content: '\f14a'; /* check */
    }

    .checkbox,
    .radio {
        margin: 0;
        position: relative;
        display: block;
    }

    .checkbox:after,
    .radio:after {
        /*content: '\00a0';*/
    }

    .checkbox span,
    .radio span {
        margin-left: 32px;
        display: inline-block;
    }

    .checkbox label,
    .radio label {
        background: #fff;
        border: 1px solid #fff;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        border-radius: 0px;
        cursor: pointer;
        height: 20px;
        width: 20px;
        position: absolute;
        top: 2px;
        -webkit-transition: background-color 0.3s ease 0s;
        transition: background-color 0.3s ease 0s;
    }

    .checkbox.select-img label,
    .radio.select-img label {
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        height: auto;
        width: auto;
        position: relative;
    }

    .radio label {
        border-radius: 100%;
    }

    .radio.select-img label {
        border: none;
        border-radius: 0;
        display: block;
    }

    .checkbox label::after,
    .radio label::after {
        background: transparent;
        border-color: #000;
        border-style: none none solid solid;
        border-width: medium medium 3px 3px;
        content: "";
        height: 5px;
        width: 9px;
        left: 4px;
        top: 4px;
        opacity: 0;
        position: absolute;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }

    .checkbox.select-img label::after,
    .radio.select-img label::after {
        display: none;
    }

    .radio label::after {
        border-style: solid;
        border-width: 3px;
        border-radius: 100%;
        height: 6px;
        width: 6px;
    }

    .checkbox label:hover,
    .radio label:hover {
        background: #980000;
    }

    .checkbox.select-img label:hover,
    .radio.select-img label:hover {
        background: transparent;
    }

    .checkbox label:hover::after,
    .radio label:hover::after {
        border-color: #fff;
        /*opacity: 0.5;*/
    }

    .checkbox.select-img label:hover::after,
    .radio.select-img label:hover::after {
        opacity: 0;
    }

    .checkbox input[type="checkbox"]:checked + label,
    .radio input[type="radio"]:checked + label {
        background: #980000;
    }

    .checkbox.select-img input[type="checkbox"]:checked + label,
    .radio.select-img input[type="radio"]:checked + label {
        background: transparent;
    }

    .checkbox input[type="checkbox"]:checked + label::after,
    .radio input[type="radio"]:checked + label::after {
        opacity: 1;
        border-color: #fff;
    }

    .checkbox.select-img input[type="checkbox"]:checked + label::after,
    .radio.select-img input[type="radio"]:checked + label::after {
        opacity: 0;
    }

    .checkbox.select-img input + label > img + img,
    .radio.select-img input + label > img + img {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }

    .checkbox.select-img input[type="checkbox"]:checked + label > img + img,
    .radio.select-img input[type="radio"]:checked + label > img + img {
        display: block;
    }

    .checkbox.float-left,
    .radio.float-left {
        float: left;
        margin: 0 28px 24px 0;
    }

    .label-icon {
        padding: 12px 0
    }

    .label-icon {
        padding: 12px 0
    }

    .label-icon img {
        left: 32px;
        position: absolute;
        top: 2px;
    }

    .label-icon img + span {
        padding: 0 0 0 52px;
    }


    /* (en) basic format of form elements */
    /* (de) Grundlagende Formatierung von Form-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    .select2-style-input input,
    .select2-style-input input:focus,
    .select2-style-input input:hover,
    .select2-style-input select,
    .select2-style-input select:focus,
    .select2-style-input select:hover,
    .select2-style-input textarea,
    .select2-style-input textarea:focus,
    .select2-style-input textarea:hover {
        line-height: 24px;
        min-height: 24px;
        background: transparent;
        border: none;
        width: 100%;
        padding: 0;
        margin: 0;
        font-family: 'Source Sans Pro Regular', sans-serif;
        color: #000;
        outline: none;
    }

    .select2-style-input.textarea textarea,
    .select2-style-input.textarea:focus textarea,
    .select2-style-input.textarea:hover textarea {
        height: 158px;
    }

    .select2-style-input select,
    .select2-style-input select:focus,
    .select2-style-input select:hover {
        padding: 0;
        height: 24px;
        line-height: 24px;
    }

    .invalid,
    .invalid * {
        background: red !important;
        color: #fff !important;
    }

    /* (en) format of button elements */
    /* (de) Grundlagende Formatierung Schaltflächen-Elementen */
    /*------------------------------------------------------------------------------------------------------*/
    br + .button {
        margin-top: 6px;
    }

    .button,
    a.button:visited,
    a.button:focus,
    a.button:active {
        font-family: 'Source Sans Pro Regular', sans-serif;
        display: inline-block;
        line-height: 22px;
        vertical-align: bottom;
        border-radius: 0px;
        padding: 4px 12px;
        background: #980000;
        border: 1px solid transparent;
        color: #fff;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

    .button.inverted,
    a.button.inverted:visited,
    a.button.inverted:focus,
    a.button.inverted:active {
        background: #fff;
        color: #980000;
    }

    .button.index-button {
        height: 50px;
        line-height: 42px;
    }

    .button.button-small {
        padding: 2px 12px;
    }

    .button:hover,
    a.button:hover {
        background: #fff;
        color: #980000;
    }

    .button.inverted:hover,
    a.button.inverted:hover {
        background: #980000;
        color: #fff;
        border: 1px solid #fff;
    }


    .button-inactive,
    .button-inactive:active,
    .button-inactive:focus,
    .button-inactive:visited,
    .button-inactive:hover,
    [class*='button'][disabled],
    [class*='button'][disabled]:active,
    [class*='button'][disabled]:focus,
    [class*='button'][disabled]:visited,
    [class*='button'][disabled]:hover {
        font-family: 'Source Sans Pro Bold', sans-serif;
        line-height: 24px;
        border-radius: 0px;
        padding: 4px 12px;
        background: #d8d8d8;
        color: rgba(112, 112, 112, 0.5);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
        display: inline-block;
    }

    [disabled]:hover {
        background: #d8d8d8;
        color: rgba(112, 112, 112, 0.5);
    }

    p.disabled {
        opacity: .4;
    }

    div[class*=select2-style-button] {
        font-size: 0;
    }

    div[class*=select2-style-button]::after,
    div[class*=select2-style-button]::before {
        content: ' ';
        display: table;
    }

    div[class*=select2-style-button].float-col {
        font-size: inherit;
    }

    div[class*=select2-style-button] > * {
        font-size: 17px;
    }

    .select2-style-button-box > * {
        margin: 0 24px 24px 0;
        text-align: left;
    }

    .select2-style-button-box > br {
        margin: 0;
    }

    .select2-style-button-box-right {
        text-align: right;
    }

    .select2-style-button-box-right > * {
        margin: 0 0 24px 24px;
        text-align: left;
    }

    .select2-style-button-box-center > * {
        margin: 0 0 24px 0;
        text-align: left;
    }

    .select2-style-button-box-center > * + * {
        margin: 0 0 24px 24px;
    }

    .select2-style-button-box-with-text > * {
        margin: 0 0 24px 0;
        float: left;
    }

    .select2-style-button-box-with-text > span {
        padding: 4px 6px;
    }

    .select2-style-button-box-center *,
    .select2-style-button-100-center * {
        text-align: center;
    }

    .select2-style-button-100-left > *,
    .select2-style-button-100-left > a.button,
    .select2-style-button-100-center > *,
    .select2-style-button-100-center > a.button {
        display: block;
        margin: 0 0 12px 0;
    }

    .select2-style-button-100-left > button,
    .select2-style-button-100-center > button {
        width: 100%;
    }

    .divider + .boxgroup-wrapper {
        margin-top: -12px;
    }


    .select2-style-button-with-input {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .float-col.select2-style-button-box > a,
    .float-col.select2-style-button-box > span {
        margin-top: 4px;
    }

    /* (en) format file upload element */
    /* (de) Formatierung des File-Upload Elements */
    /*------------------------------------------------------------------------------------------------------*/
    .select2-style-input.upload-button {
        padding-left: 160px;
    }

    .select2-style-button-with-file-upload {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0px;
    }

    .select2-style-input input.file-upload-element {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        font-size: 17px;
        height: 32px;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer !important;
    }

    /* (en) format select element */
    /* (de) Formatierung des Select-Elements */
    /*------------------------------------------------------------------------------------------------------*/
    .custom-select {
        position: relative;
        z-index: 1;
        padding: 4px 8px;
        height: 24px;
        display: block;
    }

    .custom-select:before {
        display: block;
        font-family: FontAwesome;
        font-weight: 900;
        content: '\f107';
        font-size: 1em;
        height: 100%;
        line-height: 1.9em;
        padding: 0 0.625em;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        width: 1em;
        z-index: -1;
        color: #fff;
        background: #980000;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .custom-select:hover::before {
        color: #333;
        background: #fff;
    }

    .custom-select select {
        background-color: transparent;
        display: inline-block;
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }

    .custom-select select::-ms-expand {
        display: none; /* to ie 10 */
    }

    .custom-select select:focus {
        outline: none;
    }

    :-moz-any(.custom-select):before {
        /* this is necessary for overcome the caret default browser */
        background: #980000;
        pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events	*/
        z-index: 1; /* this is necessary for overcome the pseudo element */
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    :-moz-any(.custom-select):hover::before {
        background: #fff;
        color: #333;
    }

    /* (en) format elements in form GUIs */
    /* (de) Formatierung von Elementen in Formular-GUIs */
    /*------------------------------------------------------------------------------------------------------*/
    .grid-element-wrapper .boxgroup-wrapper.basic {
        margin: 0 -6px;
    }

    .grid-element-wrapper .basic {
        margin-bottom: 12px;
    }

    .grid-element-wrapper .basic > [class*='ym-g'] > [class*='ym-gbox'] {
        margin-left: 6px;
        margin-right: 6px;
    }

    .grid-element-wrapper .basic .ym-gbox h3 {
        padding: 4px 12px;
    }

    .grid-element {
        margin-bottom: 24px;
    }

    .grid-element-wrapper {
        margin: -12px -12px 0 -12px;
        position: relative;
    }

    .grid-element-wrapper + h3 {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 0;
    }

    .grid-element-wrapper h4,
    .grid-element-wrapper .float-col label,
    .grid-element-wrapper .float-col span,
    .grid-element-wrapper .select2-container,
    .grid-element-wrapper .select2-style-input,
    .grid-element-wrapper .select2-style-button [class*=button],
    .grid-element-wrapper .select2-style-button-box [class*=button],
    .grid-element-wrapper .select2-style-button-box-right [class*=button],
    .grid-element-wrapper .select2-style-button-100-center [class*=button],
    .grid-element-wrapper .select2-style-button-box-with-text [class*=button],
    .grid-element-wrapper .grid-element,
    .grid-element-wrapper .image-wrapper.float-left,
    .grid-element-wrapper .box-bottom-100,
    .grid-element-wrapper .basic,
    .grid-element-wrapper p.pdefault,
    .grid-element-wrapper .checkbox-radio-group {
        margin-bottom: 12px;
    }

    .grid-element-wrapper .float-col .float-col span {
        margin: 0;
    }

    .grid-element-wrapper .select2-style-button-box-right > * {
        margin-left: 12px;
    }

    .grid-element-wrapper .select2-style-button-box > * {
        margin-right: 12px;
    }

    .grid-element-wrapper .select2-style-button-box-middle {
        margin: 0;
    }

    .grid-element-wrapper .float-right {
        margin: 0;
    }

    .grid-element-wrapper .divider {
        margin: 0;
    }

    .grid-element-wrapper .position-bottom-right {
        right: 12px;
    }

    .grid-element-wrapper .position-bottom-right > * {
        margin-bottom: 0;
    }

    .grid-element-wrapper .divider div {
        border-bottom: 2px solid #fff;
        margin: 0 0 12px 0;
    }

    .grid-nomargin-wrapper {
        margin: -24px -24px 0 -24px;
    }

    .grid-element-wrapper .mobile-seamless-table-wrapper {
        margin-left: -12px;
        margin-right: -12px
    }

    .inline-popup .grid-element-wrapper .box-bottom-100-content {
        background: #fff;
    }

    .inline-popup .grid-element-wrapper h3 {
        margin: -24px -12px 12px -12px;
        padding: 12px 48px 12px 12px
    }

    .inline-popup .grid-element-wrapper .box-wrapper-100 h3 {
        background: #707070;
        margin: 0;
        padding: 4px 12px;
    }

    .inline-popup .grid-element-wrapper .box-wrapper-100 h3:hover {
        background: #ff6600;
    }

    .grid-nomargin-wrapper .box-group .box-top-100 h3 {
        border-radius: 0;
    }

    .grid-nomargin-wrapper .box-group + .grid-element-wrapper {
        margin-top: 12px;
    }

    .grid-nomargin-wrapper .box-group .box-wrapper-100 {
        margin-bottom: 12px;
    }

    .grid-nomargin-wrapper .box-group .box-bottom-100-content {
        margin-bottom: -12px;
    }

    .grid-nomargin-wrapper .accordion,
    .grid-nomargin-wrapper .accordion .pane,
    .grid-nomargin-wrapper .accordion h3.h3accordion:last-of-type {
        margin-bottom: 0;
    }

    .grid-nomargin-wrapper .accordion > h3.h3accordion {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .grid-nomargin-wrapper .accordion .pane + h3.h3accordion,
    .grid-nomargin-wrapper .accordion .pane + h3.h3accordion.current {
        border-radius: 0;
    }

    .grid-favorite-wrapper {
        padding-right: 35px;
        position: relative;
    }

    .grid-favorite {
        position: absolute;
        right: -1px;
        top: 3px
    }

    .grid-favorite-pane {
        position: absolute;
        right: 0px;
        top: 3px
    }

    .form-group,
    .form-group * {
        white-space: nowrap;
        margin: 0 0 12px 0;
    }

    .form-group .select2-style-input {
        display: inline-block;
        width: 28px;
        overflow: inherit;
        padding: 0 4px;
    }

    table .form-group *,
    table .form-group .select2-style-input {
        margin: 0;
    }

    div[class*="select2-style-button"] .form-group {
        display: inline;
    }

    table .form-group .amount-controls {
        position: relative;
        padding: 0 14px 0 0;
    }

    table .form-group .amount-controls > * {
        display: inline-block;
        position: absolute;
        left: 0;
        line-height: 8px;
    }

    table .form-group .amount-controls span.fa {
        line-height: 8px;
    }

    table .form-group .amount-controls .up {
        top: 0;
    }

    table .form-group .amount-controls .down {
        bottom: 0;
    }

    /* (en) format elements in Inline-Flow Sections */
    /* (de) Formatierung von Elementen Inline-Flow Bereichen */
    /*------------------------------------------------------------------------------------------------------*/
    .flow-inline {
        margin: 0;
        font-size: 0;
        white-space: nowrap;
    }

    .flow-inline:after {
        content: "";
        display: table;
        clear: both;
    }

    .flow-inline.flow-center {
        text-align: center;
    }

    .flow-inline.flow-right {
        text-align: right;
    }

    .flow-inline > li {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }

    .flow-inline > li > * {
        display: inline-block;
        vertical-align: middle;
    }

    .flow-inline > li > * > * {
        font-size: 17px;
        vertical-align: middle;
    }

    .flow-inline .select2-style-label {
        margin: 0 12px 12px 0;
    }

    .flow-inline .select2-style-label-right {
        margin: 0 0 12px 12px;
    }

    .flow-inline .select2-style-label span {
        display: block;
        padding: 4px 0;
    }

    .flow-inline .select2-container {
        width: auto;
        min-width: 72px;
    }

    /* (en) format form elements in head area */
    /* (de) Formatierung von Form-Elementen im Head-Bereich */
    /*------------------------------------------------------------------------------------------------------*/
    .topnav-toggle .select2-style-button-box .button {
        border-radius: 0 0 0 0;
        margin-right: 0;
    }

    #topnav .select2-style {
        float: right;
        margin: 0 0 24px 24px;
        width: 218px;
    }

    #topnav .select2-style .select2-container {
        margin: 0;
    }

    #topnav [class*=select2-style-button] {
        margin: 0;
        float: left;
    }

    #topnav [class*=select2-style-button] > *,
    #topnav [class*=select2-style-button] > button,
    #topnav [class*=select2-style-button] > a,
    #topnav [class*=select2-style-button] > * > button {
        color: #000;
        font-family: 'Source Sans Pro Bold', sans-serif;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
        font-size: 13px;
        line-height: 22px;
        text-transform: uppercase;
        margin: 0;
        background: transparent;
        padding: 0;
        border: none;
    }

    #topnav [class*=select2-style-button] > button::before,
    #topnav [class*=select2-style-button] > a::before,
    #topnav [class*=select2-style-button] > * > button::before {
        line-height: 20px;
    }

    #topnav [class*=select2-style-button] > *:hover,
    #topnav [class*=select2-style-button] > * > button:hover {
        color: #980000;
    }

    #topnav [class*=select2-style-button] > button {
        padding: 4px 0 4px 0;
        box-shadow: none;
    }

    #topnav [class*=select2-style-button] > a.book-icon {
        padding: 4px 14px 4px 0;
        box-shadow: none;
    }

    #topnav [class*=select2-style-button] > * > button {
        padding: 4px 14px 4px 0;
    }

    #topnav [class*=select2-style-button] > * > button.globe-icon {
        padding: 4px 14px 4px 0;
    }

    #topnav [class*=select2-style-button] > * > button.language-icon {
        padding: 4px 14px 4px 18px;
    }

    #topnav [class*=select2-style-button] > * > div,
    .select2-style-button-with-input > * {
        margin: 0;
        opacity: 0.95;
    }

    /*#topnav [class*=select2-style-button] > * > div a {*/
    /*    font-family: 'Source Sans Pro Bold', sans-serif;*/
    /*    border-bottom: 1px solid #ddd;*/
    /*    background-color: #fff;*/
    /*    text-align: right;*/
    /*    color: #000;*/
    /*    padding: 4px 14px 4px 8px;*/
    /*}*/

    #topnav [class*=select2-style-button] > * > div a:hover {
        color: #980000;
    }

    #topnav .dropdown-button::after {
        right: 0;
        top: 3px;
        font-size: 16px;
    }

    #topnav .select2-container {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0);
    }

    #topnav .select2-container .select2-choice {
        padding: 3px;
        background-color: transparent;
    }

    #topnav .select2-arrow b::before {
        padding: 3px 0 0 0;
    }

    #topnav .select2-container .select2-choice .select2-arrow {
        background-color: transparent;
    }

    .s2-drop-topnav {
        font-size: 13px;
        line-height: 24px;
        text-transform: uppercase;
        padding: 4px;
        line-height: 16px;
    }

    .select2-drop.s2-drop-topnav {
        min-width: 150px;
    }

    .fluid-width-video-wrapper {
        padding-top: 50% !important;
    }

    /* (en) format upload area */
    /* (de) Formatierung des Upload-Bereichs */
    /*------------------------------------------------------------------------------------------------------*/
    .upload-area {
        background: #fff;
        border-radius: 0px;
        height: 288px;
        overflow-y: auto;
        margin: 0 0 12px 0;
        padding: 6px;
        position: relative;
    }

    .upload-area .upload-field-label {
        position: absolute;
        display: block;
        left: 0;
        right: 0;
        top: 50%;
        text-align: center;
        opacity: 0.5;
    }

    .upload-area > ul {
        font-size: 0;
        line-height: 0;
        margin: 0 0 6px 0 !important;
        background: #fff;
    }

    .upload-area > ul:after {
        clear: both;
        content: "";
        display: table;
    }

    .upload-area > ul > li {
        float: left;
    }

    .upload-area ul > li > div {
        background: #ededed;
        border-radius: 0px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        display: inline-block;
        font-size: 17px;
        height: 120px;
        width: 120px;
        margin: 6px;
        padding: 6px;
        position: relative;
        text-align: center;
        vertical-align: bottom;
        -webkit-transition: background 1s;
        transition: background 1s;
    }

    .upload-area ul > li > .upload-error {
        background: #dc6b58;
    }

    .upload-area ul > li > div > div {
        padding: 2px;
        background: #fff;
        border-radius: 0px;
        height: 80px;
        line-height: 80px;
        position: relative
    }

    .upload-area ul > li > div img {
        max-height: 60px;
        vertical-align: middle;
    }

    .upload-area ul > li > div [class*=icon] {
        text-align: center;
        background: #fff;
    }

    .upload-area ul > li > div [class*=icon]:before {
        font-family: FontAwesome;
        font-weight: 900;
        font-weight: normal;
        line-height: 22px;
        padding-right: 6px;
    }

    .upload-area ul > li > div p {
        position: absolute;
        bottom: 6px;
        left: 6px;
        line-height: normal;
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
        text-align: left;
        text-overflow: ellipsis;
        max-width: 90%;
        -webkit-transition: color 1s;
        transition: color 1s;
    }

    .upload-area ul > li > .upload-error p {
        color: #fff;
    }

    .upload-area ul > li > div > div .upload-meter {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .upload-area ul > li > div > div .upload-meter > span {
        border-radius: 0px;
        height: 4px;
        min-height: 4px;
        width: 0;
        display: block;
        background-color: #001489;
        position: relative;
        overflow: hidden;
        -webkit-transition: width 2s;
        transition: width 2s;
        -webkit-animation: progress 2s 1 forwards;
        animation: progress 2s 1 forwards;
    }

    .upload-meter-button {
        cursor: default;
        position: relative;
        min-width: 150px;
    }

    .upload-meter-button:hover {
        background: #707070;
    }

    .upload-meter-button:after {
        content: '\00a0';
    }

    .upload-meter-button .button-progress-text {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        display: block;
        margin: 0 !important;
        text-align: center;
    }

    .upload-meter-button .button-progress {
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 0px;
        width: 0%;
        height: 100%;
        display: block;
        margin: 0 !important;
        background-color: #001489;
        -webkit-transition: width 2s;
        transition: width 2s;
        -webkit-animation: progress 2s 1 forwards;
        animation: progress 2s 1 forwards;
    }

    /* (en) format expandable input */
    /* (de) Formatierung expandierender Input-Felder */
    /*------------------------------------------------------------------------------------------------------*/
    .searchbox-wrapper {
        width: 100%;
        overflow: hidden;
        margin: 0 0 24px 0;
    }

    .searchbox {
        position: relative;
        min-width: 37px;
        width: 0%;
        height: 32px;
        float: right;
        overflow: hidden;
        border-radius: 0px;
        -webkit-transition: width 0.3s;
        transition: width 0.3s;
    }

    .searchbox-input {
        background: #d8d8d8 none repeat scroll 0 0;
        border-radius: 0px;
        color: #707070;
        display: block;
        font-size: 100%;
        line-height: 22px;
        margin-bottom: 24px;
        overflow: hidden;
        padding: 4px 44px 4px 8px;
        position: relative;
    }

    .searchbox-input input {
        border: none;
        background: transparent;
        width: 100%;
        outline: none;
    }

    .searchbox .searchbox-submit {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        margin: 0;
        border: 0;
        outline: none;
        line-height: inherit;
        text-align: center;
        cursor: pointer;
        border-radius: 0px;
    }


    .searchbox-open {
        width: 100%;
    }

    .searchbox-open .searchbox-input {
        display: block;
    }

    /* (en) Dropdown Button */
    /* (de) Auswahlliste Schaltfläche */
    /*------------------------------------------------------------------------------------------------------*/
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-button {
        background-color: #707070;
        color: #fff;
        padding: 4px 32px 4px 8px;
        cursor: pointer;
        margin: 0 0 24px 0;
        line-height: 22px;
        border-radius: 0px;
        transition: all ease 0.3s;
        -webkit-transition: all ease 0.3s;
    }

    .dropdown-button::after {
        font-family: FontAwesome;
        font-weight: 900;
        content: '\f107';
        position: absolute;
        right: 10px;
        top: 6px;
        width: auto;
        text-align: left;
        background: transparent;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: transform 300ms ease 0s;
        -webkit-transition: -webkit-transform 300ms ease 0s;
        transition: -webkit-transform 300ms ease 0s;
        transition: transform 300ms ease 0s, -webkit-transform 300ms ease 0s;
        transform: rotate(0deg);
    }

    .dropdown-button:hover,
    .dropdown-button:focus {
        background-color: #ff6600;
    }

    .show .dropdown-button {
        border-radius: 0 0 0 0;
    }

    .show .dropdown-button::after {
        -webkit-transform: rotate(-179.999deg);
        transform: rotate(-179.999deg);
    }

    .dropdown-content {
        display: none;
        position: absolute;
        margin: -24px 0 0 0;
        background-color: #d8d8d8;
        border-radius: 0 0 0 0;
        min-width: 160px;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3);
        z-index: 1;
        overflow: hidden;
    }

    .dropdown-content button,
    .dropdown-content a,
    .dropdown-content a:visited,
    .dropdown-content a:focus,
    .dropdown-content a:active {
        color: #707070;
        padding: 4px 8px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover,
    .dropdown-content button:hover {
        background-color: #ff6600;
        color: #fff
    }

    .show .dropdown-content {
        display: block;
        opacity: 1;
    }

    .select2-style-button-dropdown .dropdown {
        margin: 0 24px 0 0;
    }

    .select2-style-button-dropdown .dropdown-content {
        min-width: 100%;
    }

}

/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 950 */
/* (de) Media Query 950 */
/*------------------------------------------------------------------------------------------------------*/

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

    #topnav .select2-style {
        width: 198px;
    }

    #topnav .select2-style-input.language {
        width: 160px;
    }

}

/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 850 */
/* (de) Media Query 850 */
/*------------------------------------------------------------------------------------------------------*/

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

    .grid-element-wrapper .linearize-level-1.boxgroup-wrapper {
        margin: 0;
    }

    .grid-element-wrapper .linearize-level-1.ym-equalize > [class*='ym-g'] > [class*='ym-gbox'],
    .grid-element-wrapper .linearize-level-1.basic > [class*='ym-gbox'] {
        margin: 0 0 12px 0;
        padding: 24px 24px 0 24px;
    }

    .linearize-level-1 .flow-inline,
    .linearize-level-1 .flow-inline.flow-right {
        text-align: center;
    }

    .grid-element-wrapper .linearize-level-1 > [class*='ym-g'] > [class*='ym-gbox'] > .select2-style-button-box [class*=button],
    .grid-element-wrapper .linearize-level-1 > [class*='ym-g'] > [class*='ym-gbox'] > .select2-style-button-box-right [class*=button] {
        display: block;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        width: 100%;
    }

    .grid-element-wrapper .float-right {
        float: none;
    }

    .grid-element-wrapper .float-right .button {
        margin: 0 0 12px 0;
    }

}


/*------------------------------------------------------------------------------------------------------*/
/* (en) Media Query 560 */
/* (de) Media Query 560 */
/*------------------------------------------------------------------------------------------------------*/

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

    #topnav .select2-style {
        margin: 0 12px 12px 0;
        float: left;
    }

    #topnav .select2-style-button-box {
        margin: 0 0 12px 0;
    }

    #topnav .select2-style-input.language {
        float: left;
        margin-left: 0;
    }

    #topnav .select2-style-button-box {
        float: left;
        margin: 0;
    }

    .select2-style-input,
    .select2-style-result {
        margin-bottom: 12px;
    }

    .select2-style-button-box > * {
        margin: 0 12px 12px 0;
    }

    .select2-style-button-box-right > * {
        margin: 0 0 12px 12px;
    }

    .select2-style-button-box-center > * {
        margin: 0 0 12px 0;
    }

    .select2-style-button-box-center > * + * {
        margin: 0 0 12px 12px;
    }

    .select2-style-button-box-with-text > * {
        margin: 0 0 12px 0;
    }

    .select2-style-button-100-left > *,
    .select2-style-button-100-center > * {
        margin: 0 0 12px 0;
    }

    .grid-element-wrapper {
        margin: 0;
    }

    .grid-element {
        margin-bottom: 12px;
    }

    .grid-nomargin-wrapper {
        margin: -12px -12px 0 -12px;
    }

    .inline-popup .grid-element-wrapper h3 {
        margin: -12px -12px 12px -12px;
    }

    .grid-element-wrapper .linearize-level-1.ym-equalize > [class*='ym-g'] > [class*='ym-gbox'],
    .grid-element-wrapper .linearize-level-1.basic > [class*='ym-gbox'] {
        padding: 12px 12px 0 12px;
    }

    .grid-element-wrapper .linearize-level-2.boxgroup-wrapper {
        margin: 0;
    }

    .grid-element-wrapper .linearize-level-2.ym-equalize > [class*='ym-g'] > [class*='ym-gbox'],
    .grid-element-wrapper .linearize-level-2.basic > [class*='ym-gbox'] {
        margin: 0 0 12px 0;
        padding: 24px 24px 0 24px;
    }

    .linearize-level-2 .flow-inline,
    .linearize-level-2 .flow-inline.flow-right {
        text-align: center;
    }

    .grid-element-wrapper .linearize-level-2 > [class*='ym-g'] > [class*='ym-gbox'] > .select2-style-button-box [class*=button],
    .grid-element-wrapper .linearize-level-2 > [class*='ym-g'] > [class*='ym-gbox'] > .select2-style-button-box-right [class*=button] {
        display: block;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    .grid-element-wrapper .position-bottom-right {
        right: 0;
    }

    .list-to-select.select2-style-input.custom-select {
        margin-bottom: 12px;
    }

    [class*=select2-style-button] > [class*=button].linearize {
        display: block;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    [class*=select2-style-button] > button[class*=button].linearize {
        width: 100%;
    }

    .checkbox-radio-group.float .float-col {
        width: 100%;
        margin: 0 0 4px 0;
    }

    .select2-style-button-dropdown .dropdown {
        display: block;
        margin: 0;
    }

    .dropdown-button {
        width: 100%;
    }

    .divider + .boxgroup-wrapper {
        margin-top: 0;
    }


}