/* ==========================================================================
   Deuter's custom styles
   ========================================================================== */


/* ==========================================================================
   disable lg breakpoints until all temnplates are ready for lg resolution !!!
   remove this later when banner temaplates and other stuff is read to handle
   all rlesulotions properly !!!
   ========================================================================== */

@media (min-width:970px) and (max-width: 4300px) {
    .temporary_lg_disabler > .container {
        width:970px;
    }
}



/* General Page Items -- Begin */
body {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #44586C;
    background-color: #FFF;
    /*uncomment on live system to disable horizontal scrollbars
     showing up on breakpoint switches from bootstrap
     use scroll: auto on divs if overflow scroll is needed*/
 /*   overflow-x: hidden;*/
}


strong,
b {font-weight: 500;}

h1 {
    font-size: 1.6em;
    font-weight: 400;
    color: #35A5D9;
}
h2 {
    font-size: 1.5em;
    font-weight: 400;
    color: #35A5D9;
}
h3 {
    font-size: 1.4em;
    font-weight: 400;
    color: #35A5D9;
}
h4 {
    font-size: 1.25em;
    font-weight: 300;
}
h5 {
    font-size: 1em;
    font-weight: 300;
}
h6 {
    font-size: 1em;
    font-weight: 400;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong {font-weight: 400;}
h6 strong {font-weight: 500;}


.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}



a link {
    text-decoration: none;
}
/* ==========================================================================
   header
   ========================================================================== */
#site-branding a {
    color: white;
}

header .container-fluid {
    padding-left: 0;
    padding-right: 0;
}


@media (min-width: 768px) {

    .header-banner {
        background-image: url('../img/header/header_1800_ohne_logo.png');
        width: 1800px;
        height: 204px;
    }

    .site-header {
        background-image: url('../img/header/header_extension.png');
        width: 100%;
        background-repeat: repeat-x;
        height: 204px;
    }

    .custom-header-image {
        margin: 0 auto;
        background-repeat: no-repeat;
        background-position: center center;
        max-width: 100%;
        padding: 0;
    }
}


@media (max-width: 479px) {

    .header-banner {
        background-image: url('../img/header/header_small_ohne_logo_320.png');
        width: 780px;
        height: 164px;
    }

    .site-header {
        width: 100%;
        height: 164px;
    }

    .custom-header-image {
        background-repeat: no-repeat;
        background-position: left center;
        max-width: 100%;
        padding: 0;
    }

    .header-logo {
        position: absolute;
        top: -10px;
        left: 15px;
        width: 110px;
    }

    .nav-links-top-small {
        position: relative;
        color: white;
        top: 10px
    }
}


@media (min-width: 480px) and  (max-width: 767px) {

    .header-banner {
        background-image: url('../img/header/header_small_ohne_logo_2.png');
        width: 780px;
        height: 164px;
    }

    .site-header {
        width: 100%;
        height: 164px;
    }

    .custom-header-image {
        background-repeat: no-repeat;
        background-position: left center;
        max-width: 100%;
        padding: 0;
    }

    .header-logo {
        position: absolute;
        top: -20px;
        left: 40px;
        width: 140px;
    }

    .nav-links-top-small {
        position: relative;
        color: white;
        top: 10px
    }
}


@media (min-width: 1200px) {

    .header-logo {
        position: relative;
        top: -20px;
        left: 178px
    }

    header .utility-nav {
        position: absolute;
        top: 0;
        right: -40px;
        z-index: 10;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 0.035em;
    }

    header .utility-nav > ul > li > a {
        display: inline-block;
        padding: 8px 28px ;
    }

    header .main-nav {
        position: relative;
        top:25px;
        z-index: 10;
        font-size: 18px;
        font-weight: 300;
        letter-spacing: 0.035em;
        width: 1000px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        left: -10px;
    }

    header .main-nav > ul > li > a {
        display: inline-block;
        padding-left: 0;
        padding-right: 54px ;
    }

    .deuter-breadcrumb {
        position: relative;
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        height: 43px !important;
    }

    .breadcrumb > li a {
        color: #093a7f;
        font-size: 19px;
        font-weight: 500;

    }

    .breadcrumb > .active {
        color: #35A5D9;
        font-size: 19px;
    }
}


@media (min-width: 993px) and (max-width: 1199px) {

    .header-logo {
        position: relative;
        top: -20px;
        left: 88px;
    }

    header .utility-nav {
        position: absolute;
        top: 0;
        right: -40px;
        z-index: 10;
        font-size: 13px;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 0.035em;
    }

    header .utility-nav > ul > li > a {
        display: inline-block;
        padding: 8px 28px ;
    }

    header .main-nav {
        position: relative;
        top:27px;
        z-index: 10;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 0.035em;
        width: 992px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        left: -10px;
    }

    header .main-nav > ul > li > a {
        display: inline-block;
        padding-left: 0;
        padding-right: 55px ;
    }

    .deuter-breadcrumb {
        position: relative;
        width: 992px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        height: 43px !important;
    }

    .breadcrumb > li a {
        color: #093a7f;
        font-size: 19px;
        font-weight: 500;
    }

    .breadcrumb > .active {
        color: #35A5D9;
        font-size: 19px;
    }
}



@media (min-width: 800px) and (max-width: 991px) {

    .header-logo {
        position: relative;
        top: -20px;
        left: -20px;
    }

    header .utility-nav {
        position: absolute;
        top: 0;
        right: -26px;
        z-index: 10;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 0.035em;
    }

    header .utility-nav > ul > li > a {
        display: inline-block;
        padding: 8px 15px ;
    }

    header .main-nav {
        position: relative;
        top:27px;
        z-index: 10;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 0.035em;
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        left: -10px;
    }

    .main-nav > ul > li > a {
        display: inline-block;
        padding-left: 0;
        padding-right: 30px;
    }

    .deuter-breadcrumb {
        position: relative;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        height: 43px !important;
    }

    .container-fluid .deuter-breadcrumb {
        padding-left: 0;
        padding-right: 0;
    }

    .breadcrumb > li a {
        color: #093a7f;
        font-size: 16px;
        font-weight: 500;
    }


    .breadcrumb > .active {
        color: #35A5D9;
        font-size: 16px;
    }
}


@media (min-width: 768px) and (max-width: 800px) {
    .header-logo {
        position: relative;
        top: -20px;
        left: -20px;
    }

    header .utility-nav {
        position: absolute;
        top: 0;
        right: -26px;
        z-index: 10;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 0.035em;
    }

    header .utility-nav > ul > li > a {
        display: inline-block;
        padding: 8px 15px ;
    }

    header .main-nav {
        position: relative;
        top:27px;
        z-index: 10;
        font-size: 15px;
        font-weight: 300;
        letter-spacing: 0.035em;

        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        left: -10px;
    }

    .main-nav > ul > li > a {
        display: inline-block;
        padding-left: 0;
        padding-right: 30px;
    }

    .deuter-breadcrumb {
        position: relative;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        height: 43px !important;
    }

    .container-fluid .deuter-breadcrumb {
        padding-left: 0;
        padding-right: 0;
    }

    .breadcrumb > li a {
        color: #093a7f;
        font-size: 16px;
        font-weight: 500;
    }

    .breadcrumb > .active {
        color: #35A5D9;
        font-size: 16px;
    }
}


.breadcrumb  >li  a:hover {
    color: #35A5D9 !important;
    text-decoration: none !important;
}

.search-icon img{
    width: 20px;
    height: 20px;
}

.nav-links-top-right {
    position: relative;
    bottom: 190px;
    color: white;
    font-size: 13px;
    right:20px;
}

.nav-links-bottom-row {
    position: relative;
    bottom: 65px;
    color: white;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.035em;
}

.counter-watchlist {
    background-color: #004f95;
    padding-left: 8px;
    padding-right: 8px;
    color: white;
}


.flag-icon {
    width: 20px;
    position: relative;
    top: -2px;
    margin-left: 5px;
}

.header-search {
    position: relative;
    bottom: 180px;
}

#imaginary_container{
    position: absolute;
    top: 35px;
    width: 250px;
    margin-right: 10px;
    right:10px;
}

#desktopsearchstring {
    color: white;
}

.stylish-input-group .input-group-addon{
    background: transparent;
    border-color: #fff;
    padding: 5px 12px;
    color: #fff;
}
.stylish-input-group .form-control{
    border-right:0;
    box-shadow:0 0 0;
    border-color: #fff;
    background-color: transparent;
    height: 38px;
}

.stylish-input-group button{
    border:0;
    background:transparent;
    background-color: transparent;
}

.nav-link-top-icons {
    font-size: 30px;
    position: absolute;
    right: 15px;
}


.smalldevice-navigation {
    display: none;
    color: white;
    font-size: 16px;
    width: 100%;
    overflow-x: hidden;
}

.small-device-link {
    border-top: 1px solid white;
    line-height: 50px;
    background-color: #35A5D9;
    text-align: center;
    cursor: pointer;
}

.small-device-lang {
    border-top: 1px solid #35A5D9;
    line-height: 50px;
    background-color: #00487e;
    text-align: center;
    cursor: pointer;
}

.small-device-langlist {
    display: none;
}

.active-lang {
    color: #35A5D9 !important;
    text-decoration: underline;
}

.flag-icon-small {
    position: relative;
    padding-right: 5px;
    top: -4px;
}

.iconlink {
    cursor: pointer;
}

#smalldevice-searchcontainer {
    display: none;
    background-color: #35A5D9;
    border-top: 1px solid white;
    height: auto;
}

#smalldevice-searchcontainer .stylish-input-group .form-control {
    height: 50px;
    font-size: 24px;
    color: white;
}

#smalldevice-searchcontainer .stylish-input-group .input-group-addon {

    font-size: 24px;
}

.small-device-search {
   padding: 30px;
}


#mobile_btn_merkliste {
    height: 30px;
}

#mobile_btn_search {
    height: 28px;
}

#mobile_btn_burger {
    height: 20px;
}


#mobilesearch {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

#mobilesearchstring {
    position: relative;
    top: 2px;
    width: 60%;
    height: 35px;
    border-radius: 4px;
    background-image: none;
    padding: 6px 12px;
    border: 1px solid white;
}

.mobilesearchbtn {
    margin-left: 5px;
    margin-right: 5px;
    width: 34%;
    background: #004f95;
    color: white;
    height: 35px;
}

.mobilesearchbtn:hover {
    margin-left: 5px;
    margin-right: 5px;
    width: 34%;
    background: #004385;
    color: white;
    height: 35px;
}

header .badge {
    background: white;
    border-radius: 11px;
    color: #38a5d7;
    height: 22px;
    width: 22px;
    padding: 4px 3px 0 3px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    position: relative;
    top: 15px;
    left: -20px
}

.main-nav {
    position: absolute;
    top: 0;
    left: 0;
}

header .main-nav > ul {
    list-style: none;
    height:30px;
    overflow-y:hidden;
    margin-top:10px;
}

header .main-nav > ul > li {
    float: left
}

header .main-nav > ul > li > a:hover {
    text-decoration: none
}

.utility-nav {
    position: absolute;
    top: 0;
    right: 0;
}

header .utility-nav > ul {
    list-style: none
}

header .utility-nav > ul > li {
    float: left
}

header .utility-nav > ul > li > a:hover {
    text-decoration: none
}

header .langselect > ul {
    list-style: none
}

header .langselect > ul > li > a {
    padding: 30px 0px ;
}

.langselect {
    list-style: none;
    background: white;
    display: none;
    margin-left: 0;
}

.langselect a {
    color: #00487e !important;
}


.langselect-open {
    background: white !important;
    color: black; !important;
}

.langselect-open a {
    color: #00487e !important;
}

ul.langselect {
    padding: 0;
}

.langitem {
    height: 35px;
    border-top: 1px solid #d6d6d6;
    text-align: right;
    padding-right: 28px;
    padding-top: 8px;
}
.active-lang-desktop {
    color: #35A5D9 !important;
    text-decoration: underline;
}

#deuterheader  a.active {
    text-decoration: none;
    color: #004f95 ;
    font-weight: bold;
}

#deuterheader a:hover {
    color: #004f95;
    text-decoration: none;
}

/* ==========================================================================
   end header
   ========================================================================== */




/* ==========================================================================
   breadcrumb
   ========================================================================== */

.breadcrumb {
    padding: 8px 15px;
    list-style: none;
    background-color: #fff;
    border-radius: 0;
}

.breadcrumb > li + li:before {
    content: "\2022";
    padding: 0 5px;
    color: #093a7f;
}

.breadcrumb-bottom {
    border-bottom: 1px solid lightgray;
    position: relative;
    height: 1px;
    width: 100%;
}
/* ==========================================================================
   end breadcrumb
   ========================================================================== */








/* ==========================================================================
   template two box half picture
   ========================================================================== */

.twobox-halfpicture {
    margin-bottom: 20px;
}


.twobox-bottom-margin .col-sm-6{
    margin-bottom: 20px;
}

@media (max-width: 767px) {

    .twobox-halfpicture .col-min {
        width:280px;
    }
    .twobox-halfpicture .col-max {
        width:290px;
    }
}



.startpage-carousel {
    padding-top: 0 !important;
    padding-bottom: 20px !important;
}


.startpage-carousel img {
    padding-bottom: 25px;
}

/* ==========================================================================
   end template two box half picture
   ========================================================================== */







/* ==========================================================================
   template Boxen-Reihe  - bag carousel
   ========================================================================== */

#bag1-480-carousel {
  margin-bottom: 20px;
}

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

.box-row {
    margin-bottom: 10px;
}


.box-row p {
    width: 220px;
    margin-bottom: 15px;
}


@media (max-width: 767px) {

    .box-row .col-min {
        width:280px;
    }
    .box-row .col-max {
        width:280px;
    }
}


@media (min-width: 768px) and (max-width: 992px) {

    .box-row .col-sm-6 p {
        width: 245px;
    }

    .box-row .row {
        padding-left: 80px;
    }

    /*
    .box-row .col-min {
        width:280px;
    }
    .box-row .col-max {
        width:280px;
    }
    */
}



.carousel {
    z-index: 100;
}

.carousel ,.small-carousel-caption {
    padding-top: 25px;
    text-align: center;
}

.carousel-itemdescription {
    max-width: 250px;
    text-align: center;
    margin: auto;
}

.carousel-indicators li {
    border: 1px solid #000;
}

.carousel-control {
    color: #999999;
    position: absolute;
    top: 45%;
    font-size: 30px;
    z-index: 100;
}

.carousel-control:hover {
    color: #999999;
}

.carousel-control.right {
    background: none;
    color: #999999;
}

.carousel-control.left {
    background: none;
    color: #999999;
}

.carousel-indicators {
    top: 250px;
    right: 25px;
    z-index: 12;
}


.carousel-indicators li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 4px;
    text-indent: -999px;
    border: 1px solid #999999;
    border-radius: 14px;
    cursor: pointer;
    background-color: #999999;
}

.carousel-indicators  .active{
    width: 14px;
    height: 14px;
    border: 2px solid #35A5D9;
    position: relative;;
    margin: 4px;
}
/* ==========================================================================
   end template Boxen-Reihe -bag carousel
   ========================================================================== */




/* ==========================================================================
   small devices shortnav
   ========================================================================== */

#shortnav {
    position: relative;
    top: -20px;
    margin-left: 16px;
    margin-right: 16px;
}

#shortnav table {
    background-color: #35A5D9;
    width: 100%;
    color: white;
    font-size: 18px;
    text-align: center;
    margin-bottom: 0;
}

#shortnav .table-bordered tbody > tr > td {
    border: 4px solid white;
}

#shortnav td {
    line-height: 50px;
    cursor:pointer;
}
/* ==========================================================================
   ends mall devices
   ========================================================================== */







/* ==========================================================================
    two box half picture
   ========================================================================== */

.twobox-halfpicture p {
    width: 220px;
}

.box-itemdescription {
    max-width: 230px;
}


@media (min-width: 992px) {
    .twobox-top-margin {
        margin-top: 50px;
    }
}

@media (min-width: 1200px) {
    .twobox-top-margin {
        margin-top: 100px;
    }
}


@media (max-width: 757px) {
    .twobox-halfpicture .col-ms-6 {
        margin-bottom: 15px;
    }

    .twobox-halfpicture .col-xs-12 {
        margin-bottom: 15px;
    }
}
/* ==========================================================================
    end two box half picture
   ========================================================================== */




/* ==========================================================================
 two picture template
   ========================================================================== */

.two-picture .col-xs-12 {
    padding-bottom: 20px;
}


@media (min-width: 767px) {
    .two-picture {
          margin-bottom: 10px;
    }
}

/* ==========================================================================
 end  picture template
   ========================================================================== */


/* ==========================================================================
 3/4 picture template
   ========================================================================== */

.threequarterpicture {
    margin-bottom: 20px;
}


.threequarter-picture img {
    margin-bottom: 10px;
}

@media (max-width: 767px) {

    .threequarter-picture p {
       width: 200px;
        margin: 0 auto;
        text-align: center;
        padding-bottom: 15px;
    }

    .threequarter-picture .col-ms-12 {
        text-align: center;
    }


    .threequarter-picture .col-xs-12 {
        text-align: center;
    }

    .threequarter-picture img {
        margin: 0 auto;
        text-align: center;
    }
}
/* ==========================================================================
 end 3/4 picture template
   ========================================================================== */





/* ==========================================================================
 haendlersuche + gewinnspiel
   ========================================================================== */

.store-locator {
    margin-bottom: 20px;
}


/* --  sm                --*/
@media (min-width: 768px) {

    .contest-desktop {
        width: 220px;
        height: 191px;
    }

    .contest-overlay {
        width: 220px;
        height: 59px;
        background: white;
        opacity: 0.6;
        top: 132px;
        position: absolute;
    }

    .contest-headline {
        font-size: 15px;
        color: #00487e;
        position: absolute;
        top: 135px;
        margin-left: 20px;
        margin-right: 20px;
        font-weight: bold;
    }

    .contest-teaser {
        color: #34495E;
        font-size: 12px;
        position: absolute;
        top: 155px;
        margin-left: 20px;
        margin-right: 20px;
    }


    /*--------------------------*/

    .locator-content {
        height: 191px ;
    }

    .store-locator-bg {
        background: url("../img/startslide/haendlersuche_bg_470_197.png");
        height: 191px;
        width: 470px;
    }

    .desktop-storelocator-headline {
        color: #00487e;
        font-size: 14px;
        font-weight: bold;
        padding-left: 20px;
        padding-top: 20px;
    }

    #locator-desktop-search {
        position: absolute;
        bottom: 20px;
        left: 320px;
        color: white;
        font-size: 14px;
    }

    #locator-desktop-search .fa {
        font-size: 18px;
    }


    #locator-desktop-place {
        position: absolute;
        left: 40px;
        bottom: 17px;
    }


    #locator-desktop-place .form-control {
        width: 180px;
        height: 28px;
        background-color: transparent;
        border: 1px solid white;
        color: #fff;
        font-size: 13px;
    }

    #locator-desktop-country {
        position: absolute;
        bottom: 80px;
        left: 40px;
    }

    #locator-desktop-country .form-control {
        width: 180px;
        height: 28px;
        background-color: #35A5D9;
        border: 1px solid white;
        color: #fff;
        font-size: 13px;
    }

    #locator-desktop-country .fa {
        font-size: 28px;
        color: #fff;
        padding-right: 10px;
    }

}

/* --  md               --*/
@media (min-width: 992px) {

    .contest-desktop {
        /*background: url("../img/startslide/gewinnspiel_300_260.png");*/
        width: 293px;
        height: 255px;
    }

    .contest-overlay {
        width: 293px;
        height: 80px;
        background: white;
        opacity: 0.6;
        top: 175px;
        position: absolute;
    }

    .contest-headline {
        font-size: 18px;
        color: #00487e;
        position: absolute;
        top: 185px;
        margin-left: 20px;
        margin-right: 20px;
        font-weight: bold;
    }

    .contest-teaser {
        color: #34495E;
        font-size: 15px;
        position: absolute;
        top: 210px;
        margin-left: 20px;
        margin-right: 20px;
    }


    /*--------------------------*/
    .locator-content {
        height: 254px ;
    }


    .store-locator-bg {
        background: url("../img/startslide/haendlersuche_bg_620_260.png");
        height: 254px;
        width: 620px;
    }

    .desktop-storelocator-headline {
        color: #00487e;
        font-size: 18px;
        font-weight: bold;
        padding-left: 24px;
        padding-top: 24px;
    }

    #locator-desktop-search {
        position: absolute;
        bottom: 28px;
        left: 420px;
        color: white;
        font-size: 18px;
    }

    #locator-desktop-search .fa {
        font-size: 24px;
    }

    #locator-desktop-place {
        position: absolute;
        left: 40px;
        bottom: 24px;
    }


    #locator-desktop-place .form-control {
        width: 230px;
        height: 35px;
        background-color: transparent;
        border: 1px solid white;
        color: #fff;
        font-size: 18px;
    }

    #locator-desktop-country {
        position: absolute;
        bottom: 110px;
        left: 40px;
    }

    #locator-desktop-country .form-control {
        width: 230px;
        height: 35px;
        background-color: #35A5D9;
        border: 1px solid white;
        color: #fff;
        font-size: 18px;
    }

    #locator-desktop-country .fa {
        font-size: 35px;
        color: #fff;
        padding-right: 10px;
    }
}


/* --  lg              --*/
@media (min-width: 1200px) {

    .contest-desktop {
        /*background: url("../img/startslide/gewinnspiel_363_315.png");*/
        width: 360px;
        height: 312px;
    }

    .contest-overlay {
        width: 360px;
        height: 102px;
        background: white;
        opacity: 0.6;
        top: 210px;
        position: absolute;
    }

    .contest-headline {
        font-size: 22px;
        color: #00487e;
        position: absolute;
        top: 220px;
        margin-left: 30px;
        margin-right: 30px;
        font-weight: bold;
    }

    .contest-teaser {
        color: #34495E;
        font-size: 18px;
        position: absolute;
        top: 255px;
        margin-left: 30px;
        margin-right: 30px;
    }
    /*--------------------------*/

    .locator-content {
        height: 312px ;
    }
    .store-locator-bg {
        background: url("../img/startslide/haendlersuche_bg_750_315.png");
        height: 312px;
        width: 750px;
    }

    .desktop-storelocator-headline {
        color: #00487e;
        font-size: 22px;
        font-weight: bold;
        padding-left: 24px;
        padding-top: 24px;
    }

    #locator-desktop-search {
        position: absolute;
        bottom: 35px;
        left: 500px;
        color: white;
        font-size: 22px;
    }

    #locator-desktop-search .fa {
        font-size: 28px;
    }

    #locator-desktop-place {
        position: absolute;
        left: 40px;
        bottom: 30px;
    }

    #locator-desktop-place .form-control {
        width: 280px;
        height: 44px;
        background-color: transparent;
        border: 1px solid white;
        color: #fff;
        font-size: 20px;
    }


    #locator-desktop-country {
        position: absolute;
        bottom: 140px;
        left: 40px;
    }

    #locator-desktop-country .form-control {
        width: 280px;
        height: 44px;
        background-color: #35A5D9;
        border: 1px solid white;
        color: #fff;
        font-size: 20px;
    }

    #locator-desktop-country .fa {
        font-size: 40px;
        color: #fff;
        padding-right: 10px;
    }
}


/* --  xs and ms           --*/
@media (max-width: 767px) {



    .contest-mobile {
        background: #35A5D9;
        padding: 20px;
    }

    .contest-mobile a {
        text-decoration: none !important;
    }
    .contest-mobile .contest-headline {
        font-size: 18px;
        font-weight: bold;
        color: #00487e;
        padding-bottom: 10px;
    }

    .contest-mobile .contest-teaser {
        font-size: 18px;
        color: white;
    }

    .row .col-sm-12 , .col-md-12 {
        padding-left: 15px;
        padding-right: 15px;
       /* padding-top: 15px;*/
    }

    .store-loacator-mobile {
        background: #35A5D9;
        padding: 20px;
        margin-top: 20px;
    }

    .locator-mobile-header {
        font-size: 18px;
        font-weight: bold;
        color: #00487e;
    }

    .mobile-locator-spacer {
        height: 24px;
    }

    .store-loacator-mobile > .btn {
        background: #00487e;
        width: 100%;
        text-align: center;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        color: #ffffff;
        font-size: 18px;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
    }

    .store-loacator-mobile > .btn:hover {
        background: #003d71;
        text-decoration: none;
        color: #ffffff;
    }

    #locator-mobile-place .form-control {
        width: 100%;
        height: 35px;
        background-color: transparent;
        border: 1px solid white;
        color: #fff;
        font-size: 18px;
    }


    #locator-mobile-country .form-control {
        width: 100%;
        height: 35px;
        background-color: #35A5D9;
        border: 1px solid white;
        color: #fff;
        font-size: 18px;
    }

    .inner-addon {
        position: relative;
    }

    .inner-addon .fa {
        position: absolute;
        pointer-events: none;
    }

    .right-addon .fa {
        right: 10px;
        font-size: 35px;
        color: #fff;
        padding-right: 10px;
    }
}


/* overwrite some disturbing browser nonsense */
.store-locator input[type="text"]::-webkit-input-placeholder {
    color: white !important;
}

.store-locator input[type="text"]:-moz-placeholder { /* Firefox 18- */
    color: white !important;
}

.store-locator input[type="text"]::-moz-placeholder {  /* Firefox 19+ */
    color: white !important;
}

.store-locator input[type="text"]:-ms-input-placeholder {
    color: white !important;
}

/* disable nomal dropdown appearance on browsers */
.store-locator select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* disable nomal dropdown appearance for stupid ie */
.store-locator select::-ms-expand {
    display: none;
}

/* ==========================================================================
 end haendlersuche + gewinnspiel
   ========================================================================== */




/* ==========================================================================
   footer   bootstrap 5 default column definition layout for footer
   ========================================================================== */

.gototop {
    display: block;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99;
}


.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

/* footer media queries */

.sitemap-flap {
    display: none;
}

.social-font {
    font-size: 14px;
    font-weight: 300;
    color: #666666;
    line-height: 25px;
}


@media (max-width: 480px){
    .social-font {
        font-size: 10px;
        font-weight: 300;
        color: #666666;
        line-height: 25px;
    }
}

@media (max-width: 767px) {
    .sitemap {
        margin: 0 auto;
        margin-top: 0px;
        border-top: 0px solid #E8E7E5;
        background-color: #F0F0F0;
    }
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {

    .col-sm-15 {
        width: 20%;
        float: left;
    }

    .sitemap-flap {
        display: block;
    }

    .sitemap {
        margin-top: 26px;
        border-top: 30px solid #E8E7E5;
        background-color: #F0F0F0;
    }
    .footer-text{ margin-top: 45px; }

}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }

    .sitemap-flap {
        display: block;
    }

    .sitemap {
        margin-top: 26px;
        border-top: 30px solid #E8E7E5;
        background-color: #F0F0F0;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }

    .sitemap-flap {
        display: block;
    }

    .sitemap {
        margin-top: 26px;
        border-top: 30px solid #E8E7E5;
        background-color: #F0F0F0;
    }
}

footer {
    background: #F0F0F0;
    background-color: #F0F0F0;
}

.footer-text {
    font-size: 12px;
    color: #727272;
    line-height: 20px;
}

.footer-headline {
    color: #34495E;
    font-weight: bold;
}


.footer-headline a {
    color: #34495E !important;
}


.sitemap-headline {
    font-size: 20px;
    color: #34495E;
    left: 8px;
    top: 20px;
    position: relative;
}

.sitemap a {
    color: #666666;
}

.sitemap div {
    margin: 0 auto;
    margin-top: 25px;
}
.sitemap .sitemap-flap {
    width: 82px;
    height: 26px;
    margin-top: -55px;
    background: transparent url('../img/footer-flap-close.png') no-repeat scroll center top;
    cursor: pointer;
}
.sitemap .sitemap-content {
    display: none;
    margin-top: 30px;
    border-bottom: 1px solid #CACAC8;
    position: relative;
    overflow: hidden;
}

/* social footer */
.footer-social {
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: -30px
}

.social {
    margin: 0;
    padding: 0;
    text-align: center;
}

.social-position {
    position: relative;
    top: 15px;
}

.social-font-light {
    color: #999999;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 3px;
    list-style: none outside none;
    display: inline-block;
}

.social i {
    width: 55px;
    height: 55px;
    color: #FFF;
    background-color: #9f9f9f;
    font-size: 30px;
    text-align:center;
    padding-top: 18px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social .fa-facebook:hover { /* round facebook icon*/
    background: #4060A5;
}

.social .fa-youtube:hover { /* round youtube icon*/
    background: #FF1F25;
}

.social .fa-instagram:hover { /* round instagram icon*/
    background: #375989;
}

.social .fa-twitter:hover { /* round twitter icon*/
    background: #00ABE3;
}

/* ==========================================================================
 end footer
   ========================================================================== */













/* ==========================================================================
 helper stuff
   ========================================================================== */

#test1 p{
    padding: 50px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background: #f2f2f2;
}

#test2 p{
    padding: 50px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background: #afcff2;
}

#test3 p{
    padding: 50px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background: #7bf2d3;
}

#test4 p{
    padding: 50px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background: #57c759;
}


#test5 p{
    padding: 50px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background: #57c759;
}



#breakpoint-info {
    padding: 5px;
    font-size: 14px;
    text-align: center;
    background: #ca0807;
    color: white;
}