/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
}

@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
}

@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
}

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
}
/*and (orientation: portrait)*/

/*MIN*/
@media (min-width: 1px) {

    .news-item {
      /*2 Spalte  */
      flex: 0 50%;                         
      min-width: 0;    
      padding: 5px;
    }

    /*body::-webkit-scrollbar { -webkit-appearance: none;}*/

    #headerSmall, #header_mobile_plch {
        display: block;
    }
    /*Menü umschalten*/
    .div_banner.slogan {
        background: none;
        width: 34%;
        float: right;
    }
    /*Menü umschalten*/
    .div_banner.ham {
        display: block;
        width: 34%;
        float: left;
        color: #6a7373;
    }
    /*Menü umschalten*/

    .row {
        display: block;
    }
    /*Anmelden/Shoppen/Sparen*/

    .service_block_wrapper {
        padding: 0px;
    }

    .service_area {
        padding-bottom: 50px;
    }

    .main-section.client.customer {
        padding: unset;
    }

    .main-section.client.shops {
        padding: 0;
    }

    /*Kunden*/
    .client_profile, .client_profile.flt {
        float: none;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .quote_section {
        width: 90%;
        float: none;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    /*so funktionierts*/
    .team-leader-box {
        width: 65%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 40px;
        height: auto;
        float: none;
        cursor: pointer;
    }

    .team-leader-block {
        width: 75%;
        margin: 2% auto auto auto;
        font-size: 18px;
    }

    .container.impressum2 {
        height: auto;
    }

    .impressum2 {
        padding: 0px 20px;
    }

    .impressum {
        width: 100%;
        height: auto;
        float: none;
        padding: 20px;
        border-right: none;
    }

        .impressum:first-child {
            width: 100%;
            height: auto;
            float: none;
            padding: 20px;
            border-right: none;
        }

    #registerForm {
        width: 85%;
    }

    .row.ColForm {
        padding-top: 40px;
    }

    .downloadsection {
        font-size: 9px;
        padding-top: 20px;
    }

    .downloadh1 {
        color: #f00;
        font-size: 12px;
        padding-top: 40px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .downloadsection .downloadh1 {
        width: 50%;
    }

        .downloadsection .downloadh1 .spacer {
            width: 0%;
        }

    .downloadh2 {
        color: white;
        font-size: 8px;
        padding-top: 10px;
    }

        .downloadh2 a {
            font-size: 9px;
        }

    .downloadfooter2 .downloadh2 {
        padding-left: 30px;
        text-align: left;
    }

    .downloadh1f {
        color: #f00;
        font-size: 10px;
        padding-top: 35px;
        padding-left: 30px;
    }

    .downloadh2f {
        color: white;
        font-size: 8px;
        padding-top: 12px;
        padding-left: 30px;
    }

    .downloadsection > div {
        width: 49%;
    }

    .downloadicon {
        margin-bottom: 5px;
        max-width: 100px;
    }

    .downloadfooter1 {
        margin-top: 30px;
    }

    .downloadfooter2 {
        padding-bottom: 30px;
    }

    .downloadfooter3 {
        width: 100%;
    }

    .downloadfooter4 {
        padding-bottom: 15px;
        padding-top: 15px;
        color: white;
        font-size: 7px;
    }

    .downloadmail {
        height: 8px;
        margin-right: 5px;
    }

    .section {
        margin-top: 50px;
        padding: 10px;
    }



    body {
        font-size: 8pt;
        line-height: 1.1;
    }

    .smallerFont {
        font-size: 7pt;
    }

    .container_row { /*display:block;*/
        text-align: left;
        padding: 3px;
    }

    .container_r {
    }

    .container_l {
    }

    .footer_font {
        font-size: 10px;
    }

    .page-wrap {
        margin-bottom: -60px;
    }
    /*.footer_section { height: 60px; }*/


    .container {
        max-width: 96%;
    }

        .container h1 {
            font-size: 20px;
            margin: 20px 6px 0px;
        }

        .container h3 {
            font-size: 14px;
        }

    .infotext {
        width: 100%;
        padding: 10px;
    }

    .service_block h3 {
        font-size: 14px;
    }

    .project-overlay2bottom {
        font-size: 10px;
    }

    .project-overlay2top {
        font-size: 8px;
    }

    .project-overlay {
        padding-top: 90%;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 8px;
        padding-top: 0px;
    }

    .form-control, .form {
        font-size: 9px;
        height: unset;
        padding: 2px 12px;
    }
    /*Höhe macht bei Admin Input Feldern Stress height:20px;*/
    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 7px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 7px;
        margin-top: 0px;
    }

    .spacer1 {
        padding-bottom: 16px;
    }

    input.login {
        font-size: 10px;
        height: 34px;
    }

        input.login.small {
            font-size: 8px;
        }

    .btn.shopInfoBtn {
        font-size: 8px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 1px;
    }

    /*Register*/
    .modal-center {
        width: 100% !important;
    }

    #registerForm {
        overflow-y: visible;
        height: auto;
    }

    .carousel-indicators {
        bottom: 0px;
    }

    .formCenter {
        width: 95%;
    }

    .form {
        margin: 0px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 90%;
        margin: auto;
        top: 50px;
    }

    .quote_section p {
        font-size: 14px;
    }

    .carousel-indicators .active, .carousel-indicators li {
        width: 8px;
        height: 8px;
        bottom: 0px;
    }

    .modal-title {
        font-size: 10px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 8pt;
    }

    .close {
        font-size: 16px;
        line-height: 1.8;
    }

    .carousel-caption {
        bottom: 10px;
    }

    /*NEU*/
    .div_banner {
        height: 17px;
        background-position: right 0px;
    }

    header .spk-logo {
        width: 80px;
        margin: -3px 0 0 0;
    }

    header #headerBig {
        height: 36px;
    }

    img.headerimg {
        padding-top: 36px;
    }

    div.headerimg {
        top: 36px;
    }

    .co_l > div {
        padding: 8px 0 8px;
        width: 100%;
    }

    .footer_section > .container-fluid {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .stage { /*Höhe Slider*/
        height: 183px;
    }

    .slider {
        height: 183px;
    }

    .welcome {
        top: 140px;
        width: 80%;
    }

    .customerq2 h1 {
        font-size: 16px;
    }

    .customerq2 h2 {
        font-size: 10px;
    }

    .customerq2 h3 {
        font-size: 12px;
    }

    .customerq {
        width: 98%;
    }

    .soeinfach {
        width: 60%;
    }

    .btn {
        font-size: 12px;
    }

    h1 {
        font-size: 18px;
    }

    .Passwortvergessen {
        padding-top: 15px;
        padding-bottom: 5px;
    }

    /*Kundenkonto*/
    .col-md-9 {
        padding-left: 0px;
    }

    .container-fluid.container-fluid.admin {
        padding-top: 50px;
        padding-bottom: 20px;
    }

    .shoppage {
        margin-top: 30px;
    }

    .shoppageText {
        font-size: 14pt;
        padding-left: 34px;
        padding-bottom: 2px;
    }

    #shopCode, #shopCode2, #shopCode3, #shopCode4 {
        width: 100%;
        margin-top: 1px;
        margin-bottom: 3px;
    }
}

/*iPhone 4 und kleinere Phones*/
@media (min-width: 200px) {

    body {
        font-size: 8pt;
        line-height: 1.1;
    }

    .smallerFont {
        font-size: 7pt;
    }

    .container {
        max-width: 96%;
    }

        .container h1 {
            font-size: 30px;
        }

        .container h3 {
            font-size: 18px;
        }

    .service_block h3 {
        font-size: 24px;
    }

    .project-overlay2bottom {
        font-size: 12px;
    }

    .project-overlay2top {
        font-size: 10px;
    }

    .project-overlay {
        padding-top: 90%;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 9px;
        padding-top: 0px;
    }

    .form-control, .form {
        font-size: 10px;
    }
    /*Höhe macht bei Admin Input Feldern Stress height:20px;*/

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 7px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 7px;
        margin-top: 0px;
    }

    .spacer1 {
        padding-bottom: 16px;
    }

    .footer_font {
        font-size: 11px;
    }

    .page-wrap {
        margin-bottom: -60px;
    }
    /*.page-wrap:after, .footer_section { height: 60px; }*/


    input.login {
        font-size: 12px;
        height: 34px;
    }

        input.login.small {
            font-size: 10px;
        }

    .btn.shopInfoBtn {
        font-size: 9px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 2px;
    }

    /*Register*/
    .modal-center {
        width: 100% !important;
    }

    #registerForm {
        overflow-y: visible;
        height: auto;
    }

    .formCenter {
        width: 95%;
    }


    .form {
        margin: 0px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 90%;
        margin: auto;
        top: 50px;
    }

    .quote_section p {
        font-size: 14px;
    }

    .carousel-indicators .active, .carousel-indicators li {
        width: 9px;
        height: 9px;
        bottom: 0px;
    }

    .modal-title {
        font-size: 11px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 8pt;
    }

    .close {
        font-size: 16px;
        line-height: 1.8;
    }

    .carousel-caption {
        bottom: 10px;
    }
}

/*iPhone 5 + 6*/
@media (min-width: 350px) {

    body {
        font-size: 9pt;
    }

    .smallerFont {
        font-size: 8pt;
    }

    .container {
        max-width: 92%;
    }

        .container h1 {
            font-size: 34px;
            margin: 36px 6px 0px;
        }

        .container h3 {
            font-size: 24px;
        }

    .service_block h3 {
        font-size: 26px;
    }

    .project-overlay2bottom {
        font-size: 14px;
    }

    .project-overlay2top {
        font-size: 12px;
    }

    .project-overlay {
        padding-top: 90%;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 12px;
        padding-top: 0px;
    }

    .form-control, .form {
        font-size: 10px;
    }
    /*Höhe macht bei Admin Input Feldern Stress height:20px;*/

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 7px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 7px;
        margin-top: 0px;
    }

    .spacer1 {
        padding-bottom: 16px;
    }

    .footer_font {
        font-size: 12px;
    }

    .page-wrap {
        margin-bottom: -60px;
    }
    /*.page-wrap:after, .footer_section { height: 60px; }*/

    input.login {
        font-size: 12px;
        height: 34px;
    }

        input.login.small {
            font-size: 10px;
        }

    .btn.shopInfoBtn {
        font-size: 12px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 4px;
    }

    /*Register*/
    .modal-center {
        width: 100% !important;
    }

    #registerForm {
        overflow-y: visible;
        height: auto;
    }

    .formCenter {
        width: 95%;
    }

    .form {
        margin: 0px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 90%;
        margin: auto;
        top: 50px;
    }

    .quote_section p {
        font-size: 14px;
    }

    .carousel-indicators .active, .carousel-indicators li {
        width: 9px;
        height: 9px;
        bottom: 0px;
    }

    .modal-title {
        font-size: 12px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 9pt;
    }

    .close {
        font-size: 21px;
        line-height: 1;
    }

    .carousel-caption {
        bottom: 12px;
    }

    h1 {
        font-size: 24px;
    }

    .impressum2 {
        padding: 40px 20px;
    }
}

/*Größer als 500*/
@media (min-width : 500px) {
    .downloadsection {
        font-size: 11px;
        padding-top: 20px;
    }

    .downloadh1 {
        color: #f00;
        font-size: 16px;
        padding-top: 60px;
    }

    .downloadsection .downloadh1 {
        width: 50%;
    }

        .downloadsection .downloadh1 .spacer {
            width: 0%;
        }

    .downloadh2 {
        color: white;
        font-size: 10px;
        padding-top: 15px;
    }

        .downloadh2 a {
            font-size: 10px;
        }

    .downloadh1f {
        color: #f00;
        font-size: 14px;
        padding-top: 35px;
        padding-left: 30px;
    }

    .downloadh2f {
        color: white;
        font-size: 9px;
        padding-top: 12px;
        padding-left: 30px;
    }

    .downloadsection > div {
        width: 49%;
    }

    .downloadicon {
        margin-bottom: 5px;
    }

    .downloadfooter1 {
        margin-top: 30px;
    }

    .downloadfooter2 {
        padding-bottom: 30px;
    }

    .downloadfooter3 {
        width: 100%;
    }

    .downloadfooter4 {
        padding-bottom: 15px;
        padding-top: 15px;
        color: white;
        font-size: 8px;
    }

    .downloadmail {
        height: 8px;
        margin-right: 5px;
    }

    .container h1 {
        margin: 66px 6px 0px;
    }

    .impressum2 {
        padding: 70px 20px;
    }

    #shopCode, #shopCode2, #shopCode3, #shopCode4 {
        width: 40%;
        margin-top: 1px;
        margin-bottom: 3px;
    }
}

/*kleine Tablets*/
@media (min-width: 768px) {
    .news-item {
      /*3 Spalten  */
      flex: 0 33.2%;                         
      min-width: 0;    
      padding: 5px;
    }
    body {
        font-size: 10pt;
        padding-top: 0px;
    }

    .smallerFont {
        font-size: 9pt;
    }

    .container {
        max-width: 88.5%;
    }


        .container h1 {
            font-size: 39px;
            margin: 20px 6px 0px;
        }

        .container h3 {
            font-size: 28px;
        }

    .infotext {
        padding: 10px;
    }

    .service_block h3 {
        font-size: 30px;
    }

    .footer_font {
        font-size: 12px; /*height: 30px;*/
    }

    .page-wrap {
        margin-bottom: -40px;
    }
    /*.page-wrap:after, .footer_section { height: 60px; }*/

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 12px;
        padding-top: 0px;
    }

    .navwrapper {
        height: 22px;
        line-height: 22px;
    }

    .form-control, .form {
        font-size: 14px;
    }
    /*Höhe macht bei Admin Input Feldern Stress height:20px;*/

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 10px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 10px;
        margin-top: 0px;
    }

    .spacer1 {
        padding-bottom: 1.4%;
    }

    input.login {
        font-size: 14px;
        height: 24px;
    }

        input.login.small {
            font-size: 12px;
        }


    .btn.shopInfoBtn {
        font-size: 16px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .btn {
        font-size: 14px;
    }

    .project-overlay2bottom {
        font-size: 18px;
    }

    .project-overlay2top {
        font-size: 14px;
    }

    .project-overlay {
        padding-top: 85%;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        margin: auto;
        max-width: 95%;
        top: 50px;
    }

    .quote_section p {
        font-size: 24px;
    }

    .carousel-indicators .active, .carousel-indicators li {
        width: 10px;
        height: 10px;
    }

    .modal-title {
        font-size: 14px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 10pt;
    }

    .carousel-caption {
        bottom: 14px;
    }


    .navwrapper, #header_outer, #header_outer_plch {
        display: block;
    }
    /*Menü umschalten*/
    #headerSmall, #header_mobile_plch {
        display: none;
    }
    /*Menü umschalten ALT*/
    .div_banner.slogan {
        display: block;
        width: 34%;
        height: 38px;
        background: url("/Content/img/siesind.png") no-repeat;
        background-size: contain;
        background-position: right; /*9px;*/
        background-attachment: local;
    }
    /*Menü umschalten*/
    .div_banner.ham {
        display: none;
        width: 34%;
        float: left;
    }
    /*Menü umschalten*/

    /*Kunden*/
    .client_profile {
        float: left;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

        .client_profile.flt {
            float: right;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

    .quote_section {
        width: 53%;
        float: left;
        margin: 4% 5% 4% 5%;
    }

    /*so funktionierts*/
    .team-leader-box {
        margin-right: 2%;
        margin-left: 2%;
        width: 29%;
        margin-bottom: 40px;
        height: auto;
        float: left;
    }

    .team-leader-block {
        width: 80%;
        margin: 2.5% auto auto auto;
    }

    #registerForm {
        width: 75%;
    }

    .row {
        display: flex;
    }
    /*Umbruch auch in Anmelden/Shoppen/Sparen*/

    .downloadsection {
        font-size: 16px;
        padding-top: 30px;
    }

    .downloadh1 {
        color: #f00;
        font-size: 18px;
    }

    .downloadsection .downloadh1 {
        width: 22%;
    }

        .downloadsection .downloadh1.spacer {
            width: 12%;
        }

    .downloadh2 {
        color: white;
        font-size: 12px;
        padding-top: 20px;
    }

        .downloadh2 a {
            font-size: 16px;
        }

    .downloadh1f {
        color: #f00;
        font-size: 17px;
        padding-top: 35px;
        padding-left: 30px;
    }

    .downloadh2f {
        color: white;
        font-size: 11px;
        padding-top: 12px;
        padding-left: 30px;
    }

    .downloadsection > div {
        width: 25%;
    }

    .downloadicon {
        margin-bottom: 10px;
    }

    .downloadfooter1 {
        margin-top: 40px;
    }

    .downloadfooter2 {
        padding-bottom: 40px;
    }

    .downloadfooter3 {
        width: 70%;
    }

    .downloadfooter4 {
        padding-bottom: 20px;
        padding-top: 20px;
        color: white;
        font-size: 10px;
    }

    .downloadmail {
        height: 14px;
        margin-right: 10px;
    }


    .div_banner {
        height: 17px;
        background-position: right 0px;
    }

    header .spk-logo {
        width: 150px;
        margin: -3px 0 0 0;
    }

    .navwrapper {
        margin-top: 78px;
    }

    header #headerBig {
        height: 60px;
    }

    img.headerimg {
        padding-top: 60px;
    }

    div.headerimg {
        top: 60px;
    }

    .footer_section > .container-fluid {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .stage {
        height: auto;
    }

    .slider {
        height: 100%;
    }

    .slick-carousel {
        height: 550px;
    }

    .welcome {
        top: 460px;
        width: 65%;
    }

    .co_l > div {
        float: left;
        width: auto;
        border-bottom: none;
        width: auto;
        padding: 5px 0 5px;
    }
    /*.co_l > div:last-child {float: right;} Copyright doch linksbündig*/

    .customerq2 h1 {
        font-size: 20px;
    }

    .customerq2 h2 {
        font-size: 14px;
    }

    .customerq2 h3 {
        font-size: 16px;
    }

    .customerq {
        width: 48%;
    }

    .soeinfach {
        width: 60%;
    }

    h1 {
        font-size: 26px;
    }

    .Passwortvergessen {
        padding-top: 5px;
        padding-bottom: 0px;
    }

    .row.ColForm {
        padding-top: 70px;
    }

    .container-fluid.container-fluid.admin {
        padding-top: 70px;
        padding-bottom: 20px;
    }
}

/* iPad */
@media (min-width: 1000px) {

    body {
        font-size: 11pt;
        line-height: 1.42857;
    }

    .smallerFont {
        font-size: 9pt;
    }

    .container h1 {
        font-size: 46px;
        margin: 2% 6px 0px;
    }

    .container h3 {
        font-size: 32px;
    }


    .infotext {
        padding: 20px;
    }

    .service_block h3 {
        font-size: 34px;
    }

    .footer_font {
        font-size: 14px; /*height: 34px;*/
    }

    .page-wrap {
        margin-bottom: -30px;
    }
    /*.page-wrap:after, .footer_section { height: 30px; }*/

    /*Menü*/
    .navwrapper {
        height: 26px;
        line-height: 26px;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 14px;
    }

    .navdivitem.first {
        width: 70px;
    }

    .form-control, .form {
        font-size: 16px;
    }


    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 14px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 14px;
        margin-top: 1%;
    }

    .spacer1 {
        padding-bottom: 2%;
    }

    input.login {
        font-size: 16px;
        height: 30px;
    }

        input.login.small {
            font-size: 14px;
        }

    .project-overlay2bottom {
        font-size: 20px;
    }

    .project-overlay2top {
        font-size: 18px;
    }

    .project-overlay {
        padding-top: 83.5%;
    }

    .btn.shopInfoBtn {
        font-size: 18px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .btn {
        font-size: 16px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        margin: auto;
        max-width: 95%;
        top: 100px;
    }

    .quote_section p {
        font-size: 26px;
    }

    .carousel-indicators .active, .carousel-indicators li {
        width: 11px;
        height: 11px;
    }

    .modal-title {
        font-size: 18px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 11pt;
    }

    .carousel-caption {
        bottom: 16px;
    }

    /*.navdivitem > a, .xcell.login  { font-size: 16px; padding-top:3px}
    .navdivitem {padding-top: 2px;}*/
    .container_row {
        padding: 0px 20px 0px 20px;
    }

    .service_block_wrapper {
        padding: 0px;
    }

    .service_area {
        padding-bottom: 30px;
    }



    .main-section.client.customer {
        padding-left: 15%; /*Beeinflusst die Größe der Shop Kacheln*/
        padding-right: 15%;
    }

    .main-section.client.shops {
        padding-left: 8%; /*Beeinflusst die Größe der Shop Kacheln*/
        padding-right: 8%;
    }

    .container.impressum2 {
        height: auto;
        padding: 40px 0px;
    }

    .impressum {
        width: 48%;
        height: auto;
        float: left;
        padding: 0px 0px 40px 40px;
    }

    .impressum2 {
        height: auto;
        padding: 90px 0px 40px 40px;
    }

    .impressum:first-child {
        width: 48%;
        height: auto;
        float: left;
        padding: 0px 40px 40px 0px;
        border-right: solid 1px rgb(0,47,100);
    }

    #registerForm {
        width: 65%;
    }


    .downloadsection {
        font-size: 18px;
        padding-top: 50px;
        padding-left: 30px;
    }

    .downloadh1 {
        color: #f00;
        font-size: 22px;
    }

    .downloadsection .downloadh1 {
        width: 22%;
    }

        .downloadsection .downloadh1.spacer {
            width: 12%;
        }

    .downloadh2 {
        color: white;
        font-size: 18px;
        padding-top: 16px;
        padding-left: 30px;
        padding-right: 30px;
    }

        .downloadh2 a {
            font-size: 15px;
        }

    .downloadfooter2 .downloadh2 {
        display: table-cell;
        vertical-align: middle;
        text-align: right;
    }

    .downloadh1f {
        color: #f00;
        font-size: 19px;
        padding-top: 45px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .downloadh2f {
        color: white;
        font-size: 13px;
        padding-top: 15px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .downloadicon {
        margin-bottom: 10px;
        max-width: 250px;
    }

    .downloadfooter1 {
        margin-top: 70px;
    }

    .downloadfooter2 {
        padding-bottom: 70px;
    }

    .downloadfooter3 {
        width: 58%;
        display: table-cell;
        vertical-align: middle;
    }

    .downloadfooter4 {
        padding-bottom: 30px;
        padding-top: 30px;
        color: white;
        font-size: 12px;
    }

    .downloadmail {
        height: 20px;
        margin-right: 10px;
    }

    .section {
        margin-top: 20px;
    }

    .co_l > div {
        padding: 8px 0 8px;
    }

    .footer_section > .container-fluid {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    h1 {
        font-size: 32px;
    }

    /*Kundenkonto*/
    .col-md-9 {
        padding-left: 15px;
    }

    .shoppage {
        margin-top: 58px;
    }

    .shoppageText {
        font-size: 18pt;
        padding-left: 14px;
        padding-bottom: 20px;
    }
}

/* Laptops */
@media (min-width: 1199px) {

    body {
        font-size: 12pt;
    }

    .smallerFont {
        font-size: 10pt;
    }

    .container h1 {
        font-size: 50px;
        margin: 2% 6px 0px;
    }

    .container h3 {
        font-size: 40px;
    }

    .btn {
        font-size: 18px;
    }

    .service_block h3 {
        font-size: 44px;
    }


    .page-wrap {
        margin-bottom: -30px;
    }
    /*.page-wrap:after, .footer_section { height: 30px; }*/

    /*Menü*/
    .navwrapper {
        height: 28px;
        line-height: 28px;
        margin-top: 124px;
    }

    .navdivitem > a, .xcell.login, .login-dropdown ul li a {
        font-size: 16px;
    }

    .navdivitem.first {
        width: 80px;
    }

    .form-control, .form {
        font-size: 18px;
        height: 35px;
    }

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 18px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 18px;
    }

    .spacer1 {
        padding-bottom: 2.2%;
    }

    input.login {
        font-size: 18px;
        height: 30px;
    }

        input.login.small {
            font-size: 15px;
        }

    .project-overlay2bottom {
        font-size: 24px;
    }

    .project-overlay2top {
        font-size: 22px;
    }

    .btn.shopInfoBtn {
        font-size: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        margin: auto;
        max-width: 88.5%;
        top: 90px;
    }

    .quote_section p {
        font-size: 26px;
    }

    .carousel-indicators .active, .carousel-indicators li {
        width: 13px;
        height: 13px;
    }

    .modal-title {
        font-size: 22px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 12pt;
    }

    .carousel-caption {
        bottom: 18px;
    }

    header .spk-logo {
        width: 240px;
        margin: 2px 0 0 0;
    }

    header #headerBig {
        height: 96px;
    }

    img.headerimg {
        padding-top: 96px;
    }

    div.headerimg {
        top: 96px;
    }

    .div_banner.slogan {
        width: 23%;
        height: 62px;
        background-position: right; /*26px;*/
    }
    /*nur Größe*/

    .co_l > div {
        padding: 8px 0 8px;
    }

    .footer_section > .container-fluid {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    h1 {
        font-size: 36px;
    }

    .shoppage {
        margin-top: 96px;
    }
}

/* Desktops  */
@media (min-width: 1399px) {

    body {
        font-size: 13pt;
    }

    .smallerFont {
        font-size: 11pt;
    }

    .container {
        max-width: 88.5%;
    }

        .container h1 {
            font-size: 64px;
            margin: 2% 6px 0px;
        }

        .container h3 {
            font-size: 54px;
        }

    .infotext {
        padding: 20px;
    }

    .btn {
        font-size: 24px;
    }

    .service_block h3 {
        font-size: 58px;
    }


    .page-wrap {
        margin-bottom: -34px;
    }
    /*.page-wrap:after, .footer_section { height: 34px; }*/
    /*Menü*/
    .form-control, .form {
        font-size: 20px;
        height: 42px;
    }

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 21px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 21px;
    }

    .spacer1 {
        padding-bottom: 2.9%;
    }

    input.login {
        font-size: 18px;
        height: 34px;
    }

        input.login.small {
            font-size: 16px;
        }

    .project-overlay2bottom {
        font-size: 30px;
    }

    .project-overlay2top {
        font-size: 24px;
    }

    .btn.shopInfoBtn {
        font-size: 22px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .btn.shopInfoBtn2 {
        font-size: 22px;
        padding-top: 0px;
        padding-bottom: 0px;
    }



    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 88.5%;
        margin: auto;
        max-width: 88.5%;
        top: 90px;
    }

    .quote_section p {
        font-size: 32px;
    }

    .carousel-indicators .active, .carousel-indicators li {
        width: 15px;
        height: 15px;
    }

    .modal-title {
        font-size: 24px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 14pt;
    }

    .carousel-caption {
        bottom: 20px;
    }

    .slideroverlayPlaceholder {
        max-height: 520px;
    }

    .slideroverlay {
        max-height: 800px;
    }

    .slider {
        max-height: 670px;
    }

    .downloadmail {
        height: 25px;
        margin-right: 20px;
    }
}

/* Ab 2160 x 1440 Beispiel 2523 x 1680 Faktor 1 */
@media (min-width: 1799px) {

    body {
        font-size: 14pt;
    }

    .smallerFont {
        font-size: 12pt;
    }

    .container {
        max-width: 1700px;
    }

        .container h1 {
            font-size: 82px;
            margin: 3% 6px 0px;
        }

        .container h3 {
            font-size: 55px;
        }

    .btn, .title {
        font-size: 24px;
    }

    .service_block h3 {
        font-size: 58px;
    }


    .page-wrap {
        margin-bottom: -44px;
    }
    /*.page-wrap:after, .footer_section { height: 44px; }*/

    /*Menü*/
    .form-control, .form {
        font-size: 24px;
    }

    .carousel .buttonNav .bullet, .carousel .buttonNav .bulletActive, .carousel .buttonNav .bullet:hover {
        width: 24px; /*Größe der Bullets png muss entsprechend angepasst werden*/
        height: 24px;
    }

    .spacer1 {
        padding-bottom: 3.6%;
    }

    input.login {
        font-size: 18px;
        height: 38px;
    }

        input.login.small {
            font-size: 16px;
        }

    .project-overlay2top {
        font-size: 28px;
    }

    .project-overlay2bottom {
        font-size: 34px;
    }

    .btn.shopInfoBtn {
        font-size: 24px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 50px;
        line-height: 1.4;
    }

    /*Modal Teaser Anmelden Gutschein*/
    .modal-dialog {
        width: 100%;
        margin: auto;
        max-width: 925px;
        top: 90px;
    }

    .quote_section p {
        font-size: 36px;
    }

    .carousel-indicators .active, .carousel-indicators li {
        width: 16px;
        height: 16px;
    }

    .modal-title {
        font-size: 28px;
    }

    .modal-content {
        width: 100% !important;
    }

        .modal-content.teaser {
            width: 100% !important;
            height: 100%;
        }

    .teaserSubline {
        font-size: 16pt;
    }

    .carousel-caption {
        bottom: 22px;
    }


    .navdiv {
        max-width: 1700px;
    }

    .modal-dialog {
        max-width: 925px;
    }

    .slideroverlayPlaceholder {
        max-height: 580px;
    }
}
/* *********************WIDTH*************************** */
/* *********************WIDTH*************************** */
/* *********************WIDTH*************************** */



@media (max-height : 1600px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 770px;
    }
}

@media (max-height : 1500px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 720px;
    }
}

@media (max-height : 1400px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 670px;
    }
}

@media (max-height : 1300px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 620px;
    }
}

@media (max-height : 1200px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 570px;
    }
}

@media (max-height : 1100px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 520px;
    }
}

@media (max-height : 1000px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 470px;
    }
}

@media (max-height : 900px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 420px;
    }
}

@media (max-height : 800px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 370px;
    }
}

@media (max-height : 700px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 320px;
    }
}

@media (max-height : 600px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 270px;
    }
}

@media (max-height : 500px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 220px;
    }
}

@media (max-height : 400px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 140px;
    }
}

@media (max-height : 300px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 90px;
    }
}

@media (max-height : 200px) {
    .carousel-inner > ..carousel-item > img {
        max-height: 50px;
    }
}

/*
    ************
    NEWS BEREICH
    ************
*/
@media (min-width: 1px) {

    .col-sm-4.news-col {
        border-left: hidden;
        padding: 0px;
        float: left;
    }

    .col-sm-8.shop-col {
        /*padding-right: 3px;*/
    }

    .shop-col {
        display: inline-block;
    }

    .container-fluid.shops { /*Container für Shop Boxes*/
        padding-top: 0px;
        padding-bottom: 20px;
    }

    .newsshops { /*News Korrektur auf Portalseite für Container für Shop Boxes*/
        padding-top: 5%;
        padding-bottom: 10px;
    }

    .news-header {
        font-size: 10px;
    }

    /*.container-fluid.newsshops {
        width: 200px;
    }*/

    /*.shop-item.shop-col-count {

    }*/

    /*.box-width {
        width: 79px;
    }
    .box-height {
        height: 79px;
    }
    .box-margin {
        margin:2px;
    }*/

    .shops-shop-item {
        width: 48%;
        height: 48%;
    }

    .container-teaser {
        position: relative;
        top: -25px;
    }

    /*NEUE BOXEN*/
    .shop-item {
        width: 48%;
        margin: 1%;
    }

    .news-item.box-width {
        width: 98%;
    }

    .news-item.box-margin {
        margin: 1%;
    }

    .box-width {
        width: 100%;
    }

    .box-height {
        height: 100%;
    }

    .box-margin {
        margin: 0px;
    }

    .shop-image > img, .shop-image2 > img {
        width: 100%;
        height: 100%;
    }

    .shop-item.box-margin {
        margin: 1%;
    }

    .container-fluid.newsshops {
        width: 95%;
    }

    .container-fluid.container-teaser {
        padding: 1%;
    }
}

@media (min-width: 200px) {
    .newsshops {
        padding-top: 6%;
        padding-bottom: 15px;
    }

    .container-fluid.shops {
        padding-top: 30px;
        padding-bottom: 20px;
    }
}

@media (min-width: 350px) {

    .news-header {
        font-size: 14px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .newsshops {
        padding-top: 9%;
        padding-bottom: 30px;
    }

    /*.container-fluid.newsshops {
        width: 340px;
    }*/

    /*.shop-item.shop-col-count {
        width: 149px;
        height: 149px;
        margin:2px;
    }*/

    /*.box-width {
        width: 148px;
    }
    .box-height{
        height: 148px;
    }
    .box-margin {
        margin:2px;
    }*/

    .container-fluid.shops {
        padding-top: 84px;
        padding-bottom: 20px;
    }
    
    .news-item.box-width {
        width: 48%;
    }
}

@media (min-width: 500px) {

    .newsshops {
        padding-top: 14%;
        padding-bottom: 40px;
    }

    /*.container-fluid.newsshops {
        width: 480px;
    }*/

    .container-fluid.shops {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    /*.shop-item.shop-col-count {
        width: 217px;
        height: 217px;
        margin:3px;
    }*/

    /*.box-width {
        width: 217px;
    }
    .box-height{
        height: 217px;
    }
    .box-margin {
        margin:4px;
    }*/

    /*.shop-item-div2 {
        width: 217px;
        height: 217px;
        margin:3px;
    }*/
    /*.shops-shop-item {
        width: 23.2%;
        height: 23.2%;
    }*/



    .shops-shop-item {
        width: 31.3%;
        height: 31.3%;
    }
}

@media (min-width: 640px) {

    .newsshops {
        padding-top: 14%;
        padding-bottom: 40px;
    }

    /*.container-fluid.newsshops {
        width: 620px;
        padding-top: 7%;
        padding-bottom: 40px;
    }*/
    .newsshops {
    }
    /*.shop-item.shop-col-count {
        width: 285px;
        height: 285px;
        margin:4px;
    }*/

    /*.box-width {
        width: 285px;
    }
    .box-height{
        height: 285px;
    }

    .box-margin {
        margin:4px;
    }*/

    /*.shop-item-div2 {
        width: 285px;
        height: 285px;
        margin:4px;
    }*/

    /*.shop-item {width: 23%; height: 23%;}*/


}

@media (min-width: 768px) { /*Bootstrap SM*/
    /*ab hier Newsbereich rechts!*/

    .news-header {
        width: 100%;
        font-size: 14px;
        /*margin: 0 1% 1% 1%;*/
    }

    .col-sm-4.news-col {
        border-left: solid 1px;
        padding-right: 3px;
        padding-left: 10px;
        float: right;
        margin-top: 6px; /*linker Rahmen oben bündig*/
    }

    .newsshops {
        padding-top: 7%;
        padding-bottom: 40px;
    }

    /*.container-fluid.newsshops {
        width: 760px;
    }*/

    /*.shop-item.shop-col-count {
        width: 153px;
        height: 153px;
        margin:4px;
    }*/

    .news-item.box-width {
        width: 100%; /*News rechts und volle Breite*/
    }

    /*.box-width {
        width: 153px;
    }
    .box-height{
        height: 153px;
    }
    .box-margin {
        margin:4px;
    }*/

    /*.shop-item-div2 {
        width: 153px;
        height: 153px;
        margin:4px;
    }*/

    .container-teaser {
        top: -100px;
    }
    /*NEUE BOXEN*/

    .shop-item {
        width: 31%;
        margin: 1%;
    }

    .shops-shop-item {
        width: 23%;
        height: 23%;
    }
}

@media (min-width: 1000px) {
    .newsshops {
        padding-top: 8%;
        padding-bottom: 40px;
    }

    .news-header {
        font-size: 16px;
    }

    /*.container-fluid.newsshops {
        width: 760px;
    }*/

    /*.shop-item.shop-col-count {
        width: 149px;
        height: 149px;
        margin:6px;
    }*/

    /*.box-width {
        width: 149px;
    }
    .box-height{
        height: 149px;
    }
    .box-margin {
        margin:6px;
    }*/
    /*.shop-item-div2 {
        width: 149px;
        height: 149px;
                margin:6px;
    }*/

    .container-fluid.shops {
        padding-top: 70px;
        padding-bottom: 40px;
    }
}

@media (min-width: 1199px) {
    .newsshops {
        padding-top: 7%;
        padding-bottom: 20px;
    }

    .news-header {
        font-size: 18px;
    }

    /*.container-fluid.newsshops {
        width: 960px;
    }*/

    /*.shop-item.shop-col-count {
        width: 193px;
        height: 193px;
        margin: 6px;
    }*/

    /*.box-width {
        width: 193px;
    }
    .box-height{
        height: 193px;
    }
    .box-margin{
        margin: 6px;
    }*/

    /*.shop-item-div2 {
        width: 193px;
        height: 193px;
        margin: 6px;
    }*/

}

@media (min-width: 1399px) {
    .newsshops {
        padding-top: 7%;
        padding-bottom: 40px;
    }

    /*.container-fluid.newsshops {
        width: 960px;
    }*/
}

@media (min-width: 1799px) {
    .newsshops {
        padding-top: 5%;
        padding-bottom: 40px;
    }
}