@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400');
    @import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,500,900');
    
    * {
        font-family: 'Poppins', sans-serif;
        font-weight: 200;
        
    }

.desktoponly {
    display: block !important;
}

.mobileonly {
    display: none !important;
}


#bpsViewChanger {
position: fixed;
right: 1rem;
top: 1rem;
color: #fff;
z-index: 1000;
}

#bpsViewChanger a {
font-size: 2rem;
width: 3rem;
background-color: #fff;
display: inline-block;
text-align: center;
color: #000;
border-radius: 0.5rem;
opacity: 0.3;
}
#bpsViewChanger a:hover {
    opacity: 1;
}

        form {
            padding-bottom: 7rem;
        }

html {
    height: auto;
    
    min-width: 1300px;
}

.noimage {
    background: none !important;
    height: 3rem !important;
}

.container {
    max-width: 1350px !important;
}

.pageimage {
    background-repeat: no-repeat;
    background-size: cover;
    height: 75vh;
    margin-bottom: 2rem;
    background-position: center;
    overflow: hidden;
}

div.container-flex {
    display: flex;
    width: 100%;
    flex-direction: row;
    display: flex;
}



div.slider-right {
    flex: 0 0 50%;
    background-color: rgba(108,108,108,0.0);
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    transform: skew(-10deg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* enable flex items to wrap */
    justify-content: center;
}

div.slider-content {
    flex: 0 0 100%;
    text-align: center;
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
    justify-content: center;
    z-index: 1000;

}
    div.slider-content h1 {
        color: #fff;
        font-weight: bold;
    }

div.slider-console {
    position: absolute;
    width: 100%;
}

    div.slider-console div.slider-button-left {
        float: left;
        margin-left: 1rem;
        margin-top: auto;
        cursor: pointer;
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -o-transform: skew(10deg);
        transform: skew(10deg);
        z-index: 1001;
        position: relative;
    }

    div.slider-console div.slider-button-right {
        float: right;
        margin-right: 1rem;
        margin-top: auto;
        cursor: pointer;
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -o-transform: skew(10deg);
        transform: skew(10deg);
        z-index: 1001;
        position: relative;
    }

div.slider-console-dots {
    position: absolute;
    width: 100%;
    align-items: flex-end;
    bottom: 0px;
    text-align: center;
    padding: 1rem;
}
    div.slider-console-dots .dot {
        width: 1rem;
        height: 1rem;
        display: inline-block;
        border-radius: 50%;
        background-color: #fff;
        opacity: 0.7;
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -o-transform: skew(10deg);
        transform: skew(10deg);
        cursor: pointer;
    }

        div.slider-console-dots .dot:hover, div.slider-console-dots .dot.active {
            opacity: 0.9;
        }
        div .slider-left {
        flex: 0 0 100%;
        background-color: rgba(35,55,108,0.8);
        display: flex;
        -webkit-transform: skew(-10deg);
        -moz-transform: skew(-10deg);
        -o-transform: skew(-10deg);
        transform: skew(-10deg);
        padding: 6rem 0rem;
        margin-left: -50%;
        padding-left: 50%;
    }

div.slider-left-text {
    float: right;
    width: 50%;
    max-width: 700px !important;
    min-width: 600px;
    display: inline-block;
    -webkit-transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -o-transform: skewX(10deg);
    transform: skewX(10deg);
    color: #fecc00;
    height: 100%;
}

    div.slider-left-text H2 {
       font-size: 28px;
       transform: skew(0deg);
    }

    div.slider-left-text p {
        color: #fecc00 !important;
    }

    div.slider-left-text p, div.slider-left-text ul {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        font-size: 20px;
    }

    div.slider-left-text li {
        padding-bottom: 1.5rem;
        font-size: 16px;
        color: #fff;
    }

    div.slider-left-text div.btn-schraeg {
        border-radius: 5px;
        background-color: #5985de;
        left: 2rem;
        width: 100%;
        transform: skew(-10deg);
        margin-left: -20px;
        /* height: 50%; */
        text-align: center;
    }

    div.slider-left-text a {
        color: #fff;
        display: block;
        cursor: pointer;
        width: 100%;
        height: 100%;
        padding: 1rem;
        transform: skew(10deg);
        font-size: 20px;
        text-decoration: none;
    }

    div.slider-left-text div.btn-schraeg-out {
        border-radius: 5px;
        left: 2rem;
        margin-right: 2rem;
        bottom: 4rem;
        overflow: hidden;
        transform: skew(0deg);
    }





div.fixed-header {
    background-color: rgba(35,55,108,0.8);
    width: 100%;
    position: fixed;
    z-index: 999;
}

#lnkLogo img {
    height: 50px;
}

div.fixed-header .navbar {
    padding: 0rem 1rem 0rem 1rem;
    border-bottom: solid 1px #fecc00;
    background-color: rgba(35,55,108,1);
}

        div.fixed-header .navbar ul {
            margin-top: 2rem;
        }

.navbar-nav .nav-link:hover, .navbar-nav .nav-link-aktiv {
    border-bottom: solid 4px #fecc00;
    color: #fecc00 !important;
}

.tracking-desktop {
    position: absolute;
    margin-left: calc(-400px + 4rem);
    margin-top: calc(3rem + 3px) !important;
    width: 400px;
    background-color: #fff;
    padding: 0px;
    border: solid 1px rgba(60,60,60,.7);
    border-top: solid 1px transparent;
    height: 45px;   
}

    .tracking-desktop input {
        width: 100%;
        padding: 0.6rem;
        border: none;
    }

#btnTrackingDesktop {
    position: absolute;
    right: 0px;
    width: 40px;
    top: 0px;
    padding: 0.5rem;
    border-radius: 0px;
    margin-left: -5%;
    background-color: transparent;
    background-image: url(../images/trackingstart.png);
    background-position: center center;
    background-repeat: no-repeat;
}

.navbar-nav .nav-link {
    margin: 0px 10px !important;
    padding: 0px !important;
    border-bottom: solid 4px transparent;
    height: 50px;
    font-size: 1.5rem;
    white-space: nowrap;
}

.nav-link, .nav-link:hover   {
    font-size: 1.5rem;
    color: #fff;
}

.nav-item-tracking {
    height: 3rem;
    width: 4rem;
}

    .nav-item-tracking a {
        width: 4rem;
        margin-top: -1rem;
        height: calc(4rem + 2px);
        background-image: url("../images/trackingwhite.png");
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;
    }
        .nav-item-tracking a:hover, .desktop-selected {
            background-color: #fff;
            background-image: url("../images/trackingblack.png") !important;
        }
.lnkSubmenuArrow {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(../images/arrowwhitesmall.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}
/* Mainimages */
.mainimage {
    position:relative;
    background-size: cover;
    overflow: hidden;
    transition: background 1s linear;
}

.imagechanger {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/slider/dpdbg.jpg) center center;
    background-size: cover;
}
.imageprefetch {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/slider/bps.jpg) center center;
    background-size: cover;
}

    .icon-4 {
    width: 100px;
}

.container-slogan {
    width: 100%;
    position: absolute;
    margin-top: calc(40vh);
    text-align: center;
}
    .container-slogan h1 {
        color: #fff;
        font-size: 1.8rem;
        font-weight: 200;
        margin-top: 30px;
    }

    /* Text-sizer */
    .text-sizer-links {
    margin-top: -1rem;
}
.text-sizer-links td {
    width: 0.8rem;
    height: 0.8rem;
    padding: 0.1rem;
    
}

.text-sizer-link {
    width: 1rem;
    height: 100%;
    border: solid 1px #000;
}
a.text-sizer {
    display: inline-block;
    cursor: pointer;
    width: 2rem;
    line-height: 2rem;
    text-align: center;
    text-decoration: none;
}

    a.text-sizer:hover, a.text-sizer-aktiv {
        font-weight: 600 !important;
        color: #fecc00;
        border: solid 1px #fecc00;
    }
    /* Footer */

body {
    min-height: 100vh;
    position: relative;
}

.footer {
    margin-top: 2rem;
    padding: 2rem;
    background-color: #23376c;
    position: absolute;
    width: 100%;
    bottom: 0px;
}
.footer a {
    margin-left: 0.5rem;
    color: #fff;
    text-decoration: underline;
}
    /* Globals */
    p {
    margin: 0px;
}


    /* Fonts */

h5 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* Formulars */

.form-control {
    margin-bottom: .5rem !important;
}

.form-header {
    color: #fff;
    background-color: #5b657e;
    margin: 1rem 0;
}
.form-header p {
    margin: 1rem 0;
}

.form-table table {
    width: 100%;
    table-layout: fixed;
}
.form-table table td {
    padding: 2px;
}
    .form-table table td:first-child {
        width: 200px;
    }

.form-table table td:last-child {
    width: 0px;
}
.item-image {
    padding: 0.2rem;
}
.item-image img {
    width: 100%;
}

.ueberuns-item {
    padding-bottom: 2rem;
}

.bps-erroricon {
    position: absolute;
    right: 1rem;
    top: 0.7rem;
}
.ueberunsitem {
    padding: 1rem;
    /*border-bottom: solid 1px #eee;*/
}

.ueberunsitem h3 {
    border-bottom: solid 1px;
    font-size: 1.5rem;
    cursor: pointer;
}

.ueberunsitem h3 .showhide {
    margin: .5rem;
    display: inline-block;
    float: right;
    cursor: pointer;
}

.ueberuns-item .icon-4 {
    display: inline-block !important;
    margin-bottom: 1rem !important;
}

.gotoitem {
    text-align: center;
    color: #fff;
}

a.lnk-gotocontent {
    margin-top: 70vh;
    position: absolute;
}

.bps-video {
    width: 100% !important;
    height: 100% !important;
}

.lnk-gotocontent {
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    background-image: url("../images/arrowwhite2.png");
    background-repeat: no-repeat;
    background-position: center;
}







.modal-tracking-input {
    border: solid 1px #ccc;
    border-radius: 3px;
}

    .modal-tracking-input button {
        width: 40px;
        height: 40px;
        float: right;
        margin-top: -38px;
        margin-right: 10px;
        background-color: transparent;
        background-image: url(../images/trackingstart.png);
        background-position: center center;
        background-repeat: no-repeat;
        border: none;
        cursor: pointer;
        z-index: 1000;
    }

    .modal-tracking-input input {
        width: calc(100%);
        border: none;
        margin-bottom: 0px !important;
    }


.modal {
    padding: 0 !important;
}

.modal-dialog {
    width: calc(100vw - 4rem);
    height: calc(100vh - 4rem);
    margin: 2rem auto;
    padding: 0;
    max-width: 1150px;
}

.modal-content {
    height: auto;
    border: 0 none;
    border-radius: 0;
}

.modal-content-loading {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    width: 100%;
    text-align: center;
    display: none;
}

    .modal-content-loading img {
        margin: 50px auto;
    }




.input-group input, select.form-control {
    border-radius: 0px !important;
}

.input-group-append {
    display: block !important;
}
/* Tracking */
.tracking-progress img {
    width: 100%;
}

.radio-container {
    margin-top: 0.5rem;
}

    .radio-container input {
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 0;
        margin-right: .5rem;
        float: left;
    }

div.tracking-infos-box {
    padding: 0px;
    margin: 1rem 0rem;
}

table.tracking-infos {
    width: 100%;
}

h5.tracking-infos {
    text-decoration: underline;
    font-size: 1.1rem;
}

table.tracking-history-info td {
    padding: 0.5rem 0.5rem;
}

.history-row.odditem td {
    background-color: #fff;
}

.tracking-history-single {
    width: 100px;
    background-image: url("../images/tracking-history-single.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.tracking-history-default {
    width: 100px;
    background-image: url("../images/tracking-history-default.png");
    background-repeat: no-repeat;
    background-position: center center;
}

    .tracking-history-default.firstitem {
        background-image: url("../images/tracking-history-first.png");
    }

    .tracking-history-default.lastitem {
        background-image: url("../images/tracking-history-last.png");
    }

.tracking-history-ort {
    font-size: 1.1rem;
    font-style: italic;
}

.tracking-history-lineicon {
    width: 40px;
    height: 40px;
}

.tracking-map {
    width: 100%;
    height: 400px;
    display: none;
    overflow:hidden;
}

    .tracking-map .psitem {
        position: absolute;
        background-color: rgba(255,255,255,0.8);
        border-radius: 1rem;
        padding: 1rem;
        margin-left: 1rem;
        margin-top: 1rem;
    } 

    .deliveryinfo {
        margin: 0px;
        padding: 0px;
    }

.item-versand {
    margin-top: -5.5rem;
}

.item-text h5 {
    min-height: 40px;
}


a#psinfo {
    cursor: pointer;
}

.paketshopdata {
    width: 100% !important;
    padding: 20px;
    min-height: 350px;
    background-color: #efefef;
    display: none;
}

.map-tooltip {
    position: absolute;
    display: none;
    border: solid 1px #336699;
    right: 40px;
    bottom: 20px;
    background-color: #eee;
    z-index: 1000;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    opacity: 0.8;
}

    .map-tooltip span {
        display: block;
    }

    .map-tooltip:hover {
        opacity: 1;
    }


.startsection {
    padding: 4rem 0rem;
}

.startsection h1 {
    font-size: 2rem;
}

.div4steps-background {
    text-align: center;
}

.h1_4steps {
    display: inline-block;
}


    .h1_4steps span {
        margin-left: 60px;
        font-size: 36px;
    }
    .h1_4steps .circle {
        border-radius: 50%;
        background-color: #23376c;
        color: #fff;
        width: 3.5rem;
        height: 3.5rem;
        position: absolute;
        margin-left: 0px;
        padding-left: 18px;
        font-size: 60px;
        margin-top: -20px;
    }

.div4steps-text {
 display: block;
 width: 30%;
 position: absolute;
 text-align: left;
}

    .div4steps-text.step1 {
        top: 150px;
        left: 20px;
    }

    .div4steps-text.step2 {
        top: 50px;
        right: 20px;
    }

    .div4steps-text.step3 {
        bottom: 150px;
        left: 20px;
    }

    .div4steps-text.step4 {
        bottom: 200px;
        right: 20px;
    }

    .div4steps-text h5 {
        color: #a3c2ff;
        font-size: 16px;
        padding-left: 2rem;
    }


.a4StepsBuchen, .a4StepsBuchen:hover {
    display: inline-block;
    margin: 2rem;
    margin-top: 6rem;
    color: #fecc00;
    border-radius: 30px;
    padding: 1rem 5rem;
    background-color: #23376c;
    font-weight: bold;
    text-decoration: none;
}


.div4steps-text .circle {
    margin-left: -2rem;
    background-color: #a3c2ff;
    color: #fff;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    padding-top: 0.2rem;
    text-align: center;
    position: absolute;
}

.startsection h1 {
    font-size: 36px;
}
.section2 h1 {
    font-size: 28px;
}

.section2 h1 {
    color: #23376c !important;
}

.div-section2-img {
    display: flex;
    flex: 0 0 auto;
}

.ul-section2-list {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}

.ul-section2-list li {
    width: 50%;
}

.div-section2-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    height: 300px;
    width: 100%;
}

.div-section2-textitem img {
    margin-right: 1rem;
}

.div-section2-textitem {
    width: 100%;
    margin: 2rem;
    text-align: left; /* will center text in <p>, which is not a flex item */
    font-size: 20px;
}

.div-section3 {
    width: 100%;
}

.div-section3 p {
    font-size: 20px;
}
.div-section3-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 4rem;
}

.div-section3-item {
    text-align: center;
    flex-grow: 1;
    width: 33%;
    margin: 1rem 0;
    padding: 1rem;
}
    .div-section3-item img {
        float: left;

        
    }
    .div-section3-item h5 {
        font-size: 24px;
        font-weight: bold;
        padding: 2rem 0 1rem 0;
    }

    .div-section3-item p {
        text-align: center;
        font-size: 18px;
        padding: 1rem;
    }

    .div-section3-item.itemleft {
        width: calc(33% - 0.5rem);
        margin: 0.5rem 0.5rem 0.5rem 0;
    }
    .div-section3-item.itemright {
        width: calc(33% - 0.5rem);
        margin: 0.5rem 0 0.5rem 0.5rem;
    }

    .div-section3-item.itemmiddle {
        width: calc(33% - 1rem);
        margin: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

.div-section3-item.item0 {
    background-color: #d1e0ff;
    color: #23376c;
}
    .div-section3-item.item1 {
        background-color: #cacaca;
        color: #000;
    }

.div-section4 {
    width: 100%;
}
.div-section4 h1 {
    font-weight: lighter;
    width: 100%;
    text-align: center !important;
}


.Iconname_links {
    list-style: none;
    font-size: 1rem;
    padding: 0;
}

    .Iconname_links li:before {
        margin-right: 10px;
        content: '';
        display: inline-block;
        height: 10px;
        width: 10px;
        background-image: url("../images/fulfillment/check.png");
        background-size: cover;
    }

.Iconname_rechts {
    list-style: none;
    font-size: 1rem;
    padding: 0;
    float: left;
}

.Iconname_rechts li:before {
    margin-right: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    width: 10px;
    background-image: url("../images/fulfillment/icon_check.png");
    background-size: cover
}

.fulfillment {
    padding: 2rem 0;
}

/*.item0 {
    transition: background-color 1s;
    background-color: #fff;
}

.item1 {
    background-color: rgba(209,224,255,1);
    transition: background-color 1s;
}

.item0:hover + .item1 {
    background-color: #fff
}

.item1:hover {
    background-color: rgba(209,224,255,1);
}

.item0:hover {
    background-color: rgba(209,224,255,1);
}

    .item1:hover + .item0 {
        background-color: #fff;
    }*/
.item0, .item1 {
    border: solid 1px transparent !important;
}
    .item0:hover {
        transition: background-color 1s;
        transition: border 1s;
        background-color: #fff;
        border: solid 1px #d1e0ff !important;
    }

    .item1:hover {
        transition: background-color 1s;
        background-color: #fff;
        border: solid 1px #cacaca !important;
    }


.section-recommendations h1 {
    text-align: left !important;
    font-weight: 500;
}

.container-recommendations {
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 30px calc((100% - 140px) / 3) calc((100% - 140px) / 3) calc((100% - 140px) / 3) 30px;
    grid-gap: 20px;
}

.recommendations-item {
    display: grid;
    grid-template-columns: 100px auto;

}

.recommendations-text {
    display: grid;
    grid-template-rows: 3rem 1.5rem auto;
}

.loadanimation {
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 100%;
}

.recommendations-nav {

}

.recommendations-name1 {
    font-size: 24px;
    font-weight: 300;
    color: #5b657e;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.recommendations-name2 {
    font-size: 16px;
    font-weight: 200;
    color: #898989;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.recommendations-description {
    font-size: 12px;
    font-weight: 300;
    color: #111111;
    background-image: url(../images/recommendations/quots.png);
    background-position: center;
    background-size: 100% 100%;
    padding: 1rem .5rem;
    min-height: 175px;
    margin: 0 -.5rem;
}

.recommendations-nav {
   background-position: center center;
   background-repeat: no-repeat;
   cursor: pointer;
}
.recommendations-next {
    background-image: url(../images/recommendations/next.png);
}
.recommendations-prev {
    background-image: url(../images/recommendations/prev.png);
}