input[type='number'] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input-form::placeholder { 
    color: #afafaf;
    opacity: 1;
}

.input-form::-webkit-input-placeholder {
    color: #afafaf;
}

.input-form:-moz-placeholder {
    color: #afafaf;
    opacity: 1;
}

.input-form::-moz-placeholder {
    color: #afafaf;
    opacity: 1;
}

.input-form:-ms-input-placeholder {
    color: #afafaf;
}

.input-form::-ms-input-placeholder {
    color: #afafaf;
}


.input::placeholder {
    color: rgba(255,255,255,0.3);
    opacity: 1;
}

.input::-webkit-input-placeholder {
    color: rgba(255,255,255,0.3)
}

.input:-moz-placeholder {
    color: rgba(255,255,255,0.3);
    opacity: 1;
}

.input::-moz-placeholder {
    color: rgba(255,255,255,0.3);
    opacity: 1;
}

.input:-ms-input-placeholder {
    color: rgba(255,255,255,0.3);
}

.input::-ms-input-placeholder {
    color: rgba(255,255,255,0.3);
}

@media (max-width: 62em) {
    #content {
        margin-left: 0;
        margin-right: 0;
        margin-top: 80px;
    }
}

#header {
    position: fixed;
    height: 128px;
    background-color: white;
    width: 100%;
    border-bottom: 2px solid #D1D1D1;
    top: 0;
    text-align: center;
    z-index: 100;
    padding-top: 5px;
}

@media (max-width: 62em) {
    #header {
        left: 0;
        height: 68px;
    }
}

#brand-logo {
    height: 120px;
    width: 120px;
    display: block;
    position: relative;
    margin: auto;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 62em) {
    #brand-logo {
        height: 60px;
        width: 60px;
    }
}

#basket {
    position: fixed;
    top: 200px;
    right: 50px;
    width: 500px;
    font-size: 18px;
    color: #333;
    z-index: 100;
    -webkit-transition: height .1s linear;
    -moz-transition: height .1s linear;
    -ms-transition: height .1s linear;
    -o-transition: height .1s linear;
    transition: height .1s linear;
}

    #basket p {
        margin-left: 40px;
    }

#basket-container {
    background-color: #FAFAFA;
    border: 1px solid #F2F2F2;
    padding: 40px 40px;
    margin-bottom: 30px;
}

@media (max-width: 62em) {
    #basket {
        background-color: white;
    }

        #basket, #basket.centered-basket {
            height: 50px;
            left: 0 !important;
            right: 0 !important;
            bottom: 0px;
            top: inherit !important;
            width: inherit;
            border-radius: 0;
            padding: 0px 5px 0 5px;
        }

    #basket-container {
        background-color: #FAFAFA;
        border: 1px solid #F2F2F2;
        padding: 10px;
        margin-bottom: 0;
    }

    #basket.openned {
        height: 170px;
    }

    #basket p {
        display: none;
    }

    #basket-container {
        height: 170px;
    }

    #basket #article {
        margin-top: 10px !important;
    }

    #basket #mobile-club {
        font-size: 12px;
        margin-top: 10px;
    }

    #basket.openned #article {
        display: block;
        font-size: 12px;
        padding-right: 16px;
    }

        #basket.openned #article .price {
            text-align: right;
        }
}

#basket .icon .circle {
    background-color: #006698;
    font-size: 15px;
    height: 32px;
    width: 32px;
    padding-left: 7px;
    padding-top: 6px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 16px;
}

#basket .icon {
    font-size: 12px;
}

#basket .mobile-price {
    font-size: 14px;
}

    #basket .mobile-price h2 {
        margin: 0;
        color: #006698;
        opacity: 0.6;
        font-size: 12px;
    }

#basket .icon .circle i {
    color: white;
}

#basket.centered-basket {
    top: 308px;
    left: calc(20% + 530px);
    right: inherit;
}

@media (max-width: 90em) {
    #basket.centered-basket {
        left: 530px;
        top: 150px;
    }

    #basket {
        width: 450px;
    }
}

#basket .col-md-4 {
    padding: 0;
}

#payment .col-md-4 {
    padding-right: 5px;
    padding-left: 5px;
}

    #payment .col-md-4.begin {
        padding-left: 14px;
    }

    #payment .col-md-4.end {
        padding-right: 14px;
    }

@media (max-width: 62em) {
    #payment .col-md-4 {
        padding-right: 14px;
        padding-left: 14px;
    }
}


#basket h2 {
    margin-top: 0;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
}

#basket .price {
    font-weight: 700;
}

#basket #total {
    margin-top: 30px;
    color: #006698;
    font-weight: 700;
}

#basket .description {
    opacity: 0.8;
}

#basket #article {
    margin-top: 30px;
}

#payment-success {
    margin-top: 70px;
    margin-bottom: 50px;
}

#login, #lost-password, #register {
    max-width: 500px;
    width: 100%;
    margin-bottom: 100px;
}

@media (max-width: 62em) {
    #login, #lost-password, #register {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 0;
    }
}

#login a, #lost-password a, #register a, #payment-success a {
    color: rgba(255,255,255,0.3);
    text-decoration: underline;
    font-size: 13px;
    text-align: center;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

#payment, #register, #contact-form-content {
    margin-bottom: 100px;
}

#lost-password h2, #register h2, #login h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

#lost-password p, #register p, #login p {
    font-size: 14px;
    text-align: justify;
    color: rgba(255,255,255,0.8);
}

#contact-form-content h2, #payment h2 {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}

#contact-form-content h2 {
    margin-bottom: 30px;
}

        #contact-form-content h2 i, #payment h2 i {
            font-size: 20px;
            margin-left: 10px;
        }

        #contact-form-content h2 .fa-check-circle, #payment h2 .fa-check-circle {
            color: #57e26a;
        }

        #contact-form-content h2 .fa-times-circle, #payment h2 .fa-times-circle {
            color: #ff6073;
        }

    #contact-form-content label p {
        display: inline-block;
        margin-left: 20px;
        margin-right: 15px;
        color: #666;
        font-size: 16px;
    }

    #contact-form-content label .input-form {
        margin-right: 0;
        margin-left: 8px;
    }

    #contact-form-content .col-md-4 {
        padding-left: 0;
    }

        #contact-form-content .col-md-4.last {
            padding-right: 0;
        }

@media (max-width: 62em) {
    #contact-form-content p {
        text-align: left;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #contact-form-content .col-md-4 {
        padding-right: 0;
    }
}

#payment-success i {
    color: #57e26a;
    font-size: 100px;
}

#payment-success h1 {
    font-size: 48px;
    font-weight: 300;
}

#register i {
    font-size: 24px;
}

.info-box {
    background-color: #4f4f4f;
    color: white;
    position: relative;
    margin-bottom: 80px;
}

    .info-box i {
        margin-top: 27px;
        font-size: 20px;
    }

    .info-box .col-md-1 {
        padding: 0;
        text-align: right;
    }

    .info-box .col-md-11 {
        padding: 0;
    }

    .info-box p {
        padding: 20px 30px 15px 20px;
        font-size: 16px;
    }

@media (max-width: 62em) {
    .info-box i {
        position: relative;
        text-align: center;
        left: 0;
        right: 0;
        font-size: 32px;
        padding-top: 30px;
        margin: auto;
    }

    .info-box .col-xs-3 {
        text-align: center;
    }

    .info-box p {
        padding: 15px 30px 15px 0;
        margin-left: 0 !important;
        margin-top: 20px;
    }

    .info-box {
        margin-bottom: 30px;
    }
}

@media (max-width:789px) {
    .info-box i {
        padding-top: 40px !important;
    }
}

@media (max-width:512px) {
    .info-box i {
        padding-top: 50px !important;
    }
}

#contact-form-content, #payment {
    margin-top: 306px;
    width: 500px;
    text-align: left;
    margin-left: 20%;
}

@media (max-width: 90em) {
    #contact-form-content, #payment {
        margin-left: 20px;
    }
}

@media (max-width: 62em) {
    #contact-form-content, #payment {
        width: inherit;
        margin-top: 90px;
        margin-left: 0;
        margin-right: 0;
    }
}

#contact-form-content hr {
    width: 500px;
    margin: 50px 0 50px 0;
}

@media (max-width: 62em) {
    #contact-form-content hr {
        width: 100%;
    }
}

#contact-form-content .row {
    margin-left: 0;
    margin-right: 0;
}

#contact-form-content h4 {
    margin-top: 20px;
}

.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.rounded-button {
    display: inline-block !important;
    border: 2px solid #fff;
    color: #fff !important;
    background: none;
    text-decoration: none !important;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 18px !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin: 40px 0px !important;
    min-width: 200px;
    text-align: center;
}

@media (max-width: 62em) {
    .rounded-button {
        font-size: 16px !important;
        padding: 10px 20px;
        margin: 30px auto 10px auto !important;
        display: block !important;
    }
}

.rounded-button:hover {
    color: white !important;
    background-color: #fff;
}

.error, .message {
    color: white;
    padding: 10px 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 50px;
}

.error {
    background-color: #D8434e;
}

.message {
    background-color: #82C250;
}

.input {
    background: none;
    display: block;
    border: 0;
    border-bottom: 2px solid #ffffff;
    border-radius: 0;
    padding: 5px 10px;
    width: 100%;
    font-size: 18px;
    color: #ffffff; /*was #3e3e3e*/
    margin-top: 20px;
}

select.input option{
    color:#333;
}

.payment-box {
    border: 1px solid #f3f3f3;
    background-color: #f7f7f7;
    height: 135px;
    border-radius: 3px;
    text-align: center;
    padding-top: 20px;
    position: relative;
    margin-bottom: 10px;
}

    .payment-box.left {
        margin-right: 2px;
    }

    .payment-box.right {
        margin-left: 2px;
    }


    .payment-box.selected .radio-simple::after {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #009ee3;
        position: absolute;
        border-radius: 10px;
        left: 2px;
        top: 2px;
    }

#postfinance svg {
    background-color: #fc0;
    height: 60px;
}

#postfinance .radio-simple {
    margin-top: 19px;
}

#creditcard {
    color: #888;
    font-size: 42px;
}

.input-form {
    -webkit-appearance: none;
    display: block;
    background-color: #FAFAFA;
    border: 1px solid #F2F2F2;
    border-radius: 3px;
    padding: 5px 20px;
    font-weight: 500;
    height: 52px;
    font-size: 16px;
    color: #3e3e3e;
    margin-top: 10px;
    width: 100%;
    box-shadow: none;
}

    .input-form:disabled {
        background-color: white;
        opacity: 0.8;
    }

    .input-form.inline {
        display: inline-block !important;
        width: inherit;
    }

.input-info {
    padding-right: 40px;
    position: relative;
}

    .input-info #tooltip {
        position: absolute;
        right: 0;
        top: 0;
    }

#powered-by {
    text-align: center;
    position: fixed;
    height: 30px;
    font-size: 12px;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 200;
    background-color: white;
}

@media (max-width: 62em) {
    #powered-by {
        display: none;
    }
}

#powered-by.login {
    color: white;
    padding-top: 5px;
    font-size: 15px;
    background-color: RGBA(255,255,255,0.2);
    background-color: transparent;
}

#powered-by.login a {
    color: white;
}

select.form-control {
    height: 52px;
}

.select-form {
    position: relative;
    background-color: #fafafa;
    width: 100%;
    border: 1px solid #F2F2F2;
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 0;
}

    .select-form option {
        color: #3e3e3e;
    }

    .select-form select:disabled {
        background-color: white;
        opacity: 0.8;
    }

    .select-form select {
        display: inline-block;
        height: 52px;
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding-left: 20px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        font-weight: 400;
        font-weight: 500;
        font-size: 16px;
        color: #3e3e3e;
    }

        .select-form select.unselected {
            color: #afafaf;
        }

    .select-form i {
        position: absolute;
        font-size: 20px;
        pointer-events: none;
    }

    .select-form .fa-map-marker, .select-form .fa-phone, .select-form .fa-calendar {
        left: 0;
        padding: 11px;
        color: #d1d1d1;
    }

    .select-form .fa-angle-down {
        right: 1px;
        top: 1px;
        padding: 16px;
        background-color: #f8f8f8;
        border-left: 1px solid #e9e9e9;
        height: 50px;
    }

    .select-form .fa-sort {
        right: 1px;
        top: 1px;
        padding: 18px 16px;
        font-size: 14px;
        height: 50px;
        color: #b6b6b6;
    }

.payment-layout {
    margin-top: 306px;
    width: 500px;
    text-align: left;
    margin-left: 20%;
    border: 1px solid #e3e3e3;
    background-color: white;
    margin-bottom: 200px;
}

@media (max-width: 90em) {
    .payment-layout {
        margin-left: 20px;
        margin-top: 150px;
    }
}

@media (max-width: 62em) {
    .payment-layout {
        width: inherit;
        margin-top: 10px;
        margin-left: 0;
        margin-right: 0;
        border: 0;
    }
}

.payment-layout-item {
    padding: 0 20px 20px 20px;
}

@media (max-width: 62em) {
    .payment-layout-item {
        padding: 15px;
    }
}

.payment-layout h2 {
    font-size: 24px;
    font-weight: bold;
}

@media (max-width: 62em) {
    .payment-layout h2 {
        font-size: 20px;
    }
}

.payment-layout h2.disabled {
    border-bottom: 1px solid #e3e3e3;
    padding: 20px;
    margin: 0;
    color: #adadad !important;
}

    .payment-layout h2.disabled.top {
        border-bottom: 0;
        border-top: 1px solid #e3e3e3;
    }

@media (max-width: 62em) {
    .payment-layout h2.disabled {
        padding: 15px;
    }
}

.payment-layout h2 i {
    font-size: 16px;
    color: #57e26a;
}

    .payment-layout h2 i.fa-times-circle {
        color: #ff6073;
    }

.payment-layout h3 {
    margin-top: 30px;
    font-size: 18px;
    font-weight: bold;
}

@media (max-width: 62em) {
    .payment-layout h3 {
        font-size: 16px;
    }
}

.payment-layout p {
    color: #939393;
    margin-bottom: 20px;
}

.payment-button {
    background-color: #f8f8f8;
    display: block;
    text-align: center;
    color: #fff;
    font-weight: bold;
    height: 50px;
    padding-top: 5px;
    border: 1px solid #f2f2f2;
    color: #666;
    min-height: 36px;
    min-width: 150px;
}

    .payment-button.green {
        background-color: #57e26a;
        color: #fff;
        border: 0;
    }

.payment-layout .row .col-md-6 {
    padding: 0;
}

.payment-layout .row {
    margin-left: 0;
    margin-right: 0;
}

.payment-layout .col-md-3 {
    padding-left: 3px;
    padding-right: 3px;
}

.payment-layout h4 {
    color: #666;
    padding-top: 19px;
    padding-left: 15px;
    font-weight: bold;
    font-size: 16px;
}

.payment-layout .grey-box.disabled {
    color: #ccc;
}

.payment-layout .grey-box {
    background-color: #f7f7f7;
    padding: 15px 30px;
    margin-bottom: 10px;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
}

    .payment-layout .grey-box.disabled .radio-simple {
        opacity: 0.3;
    }

.payment-layout .radio-simple {
    background-color: #fff;
    width: 20px;
    height: 20px;
    border: 2px solid #d7d7d7;
    display: inline-block;
    border-radius: 10px;
    margin-right: 3px;
    padding: 0;
    position: relative;
}

.payment-layout .grey-box.selected .radio-simple::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #009ee3;
    position: absolute;
    border-radius: 10px;
    left: 2px;
    top: 2px;
    cursor: default;
}

@media (max-width: 62em) {
    .payment-layout .grey-box .radio-simple {
        display: block;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
    }
}

.payment-layout .grey-box .inset {
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 27px;
    font-style: italic;
}

@media (max-width: 62em) {
    .payment-layout .grey-box .inset {
        margin-left: 0px;
    }
}

.payment-layout .grey-box .inset b {
    font-style: normal;
}

.payment-layout .grey-box .ast {
    margin-top: 20px;
    margin-left: 27px;
    font-style: italic;
}

@media (max-width: 62em) {
    .payment-layout .grey-box .ast {
        margin-left: 0px;
    }
}

.payment-layout h3 i {
    color: #ccc;
    font-size: 14px;
}

.payment-layout .col-md-4 {
    padding-left: 0;
}

.payment-layout .grey-box .price {
    font-weight: bold;
}

.payment-layout .grey-box.disabled .green {
    color: #ccf6d2;
}

.payment-layout .grey-box .green {
    font-weight: bold;
    color: #57e26a;
}

.intl-tel-input {
    width: 100%;
    margin-top: 10px;
}

.errorBorder {
    border-color: red;
}

.languagepicker {
    background-color: #FFF;
    display: inline-block;
    padding: 0;
    height: 40px;
    overflow: hidden;
    transition: all .3s ease;
    margin:0;
    vertical-align: top;
    float: left;
}

.languagepicker:hover {
    /* don't forget the 1px border */
    height: 122px;
}

.languagepicker a {
    color: #000;
    text-decoration: none;
}

.languagepicker li {
    display: block;
    padding: 0px 20px;
    line-height: 40px;
    border-top: 1px solid #EEE;
}

    .languagepicker li:hover {
        background-color: #EEE;
    }

.languagepicker a:first-child li {
    border: none;
    background: #FFF !important;
}

.languagepicker li img {
    margin-right: 5px;
}

.roundborders {
    border-radius: 5px;
}




#language {
    position: absolute;
    top: 0;
    right: 0;
}

label {
    color: white;
}