﻿body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(239,239,239);
    color: #333;
    font-family: "GloberRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14pt;
    min-width: 680px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}
b {
    font-family: "GloberBold";
}
.pover_ground {
    position: absolute;
    width: 100%;
    /*height: calc( 100% - 1px );*/
    transition: transform ease 0.8s;
}

.pover_master_title {
    position: absolute;
    left: 0;
    padding-left: 78px;
    top: -75px;
    font-size: 2.2em;
    font-weight: 600;
    background-repeat: no-repeat;
    text-align: left;
    height: 64px;
    /* width: 590px; */
    background-size: 48px 48px;
    background-position: 0px 7px;
}

/*.pover_master_title.business {
        background-image: url('../media/symbols/usericonBlue.png');
    }

    .pover_master_title.home {
        background-image: url('../media/symbols/usericonorange.png');
    }

    .pover_master_title.student {
        background-image: url('../media/symbols/usericonGreen.png');
    }*/


.pover_wide_mastercontainer {
    position: relative;
    height: 550px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1430px;
    margin-top: 150px;
    margin-bottom: 42px;
    background-position: center;
    background-position-x: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../media/ql_Office3.jpg');
}

   .pover_wide_mastercontainer.voice {
    min-height: 620px;
    background-image: url('../media/Voice Teaser.jpg');
}

    .pover_wide_mastercontainer.internet {
        background-image: url('../media/Teaser Internet.jpg');
         min-height:620px;
    }

    .pover_wide_mastercontainer.duo {
        background-image: url('../media/Teaser Duo.jpg');
        min-height:692px;
    }

    .pover_wide_mastercontainer.fiber {
        background-image: url('../media/Teaser Fiber.jpg');
         min-height:620px;
    }


/*IndexÜbernahme*/

/*.pover_wide_mastercontainer.index {
        background-image: url('../media/back.jpg');
        --margin-top: 125px;
        height: 490px;
    }


    .pover_wide_mastercontainer.business {
        height: 650px;
        margin-bottom: 42px;
        background-image: url('../media/ProduktübersichtBusinessBack.jpg');
    }

        .pover_wide_mastercontainer.business.neu {
            background-image: url('../media/ql_Office3.jpg');
            height:550px;
            background-position-x:0px;
        }

    .pover_wide_mastercontainer.home.neu {
        height: 650px;
        margin-bottom: 42px;
        background-image: url('../media/Home.png');
    }

    .pover_wide_mastercontainer.student.neu {
        height: 650px;
        margin-bottom: 42px;
        background-image: url('../media/Student.png');
    }*/


.pover_featurebox {
    position: absolute;
    left: 20px;
    bottom: 50px;
    width: 330px;
    margin: 50px;
    background-color: rgba(240,240,240,0.9);
    padding: 25px;
}

.pover_featurebox_business {
    position: absolute;
    display: flex;
    flex-flow: column;
    right: 20px;
    bottom: -25px;
    width: 330px;
    margin: 50px;
    background-color: rgba(240,240,240,0.9);
    padding: 25px;
}

.pover_featurebox_index {
    position: absolute;
    right: 20px;
    bottom: -36px;
    width: 400px;
    margin: 50px;
    background-color: rgba(255,255,255,0.9);
    /*height: 396px;*/
}

.paddingbox {
    position: relative;
    padding: 20px 30px;
    /*padding-bottom:0;*/
}

.pfb_prod_name {
    font-size: 1.4em;
    color: rgb(255, 115, 0);
    font-weight: 600;
    /*margin-bottom: 10px;*/
}

    .pfb_prod_name.home {
        font-size: 1.4em;
        font-weight: 600;
    }

.pfd_prod_description {
    color: rgb(255, 115, 0);
    margin-bottom: 16px;
}


.featurelistbox {
    font-size: 1.1em;
    position: relative;
    height: 150px;
}

    .featurelistbox.business {
        height: 160px;
        margin-top: 10px;
    }

    .featurelistbox.small {
        height: 100px;
    }


.feature_line {
    position: relative;
    margin-bottom: 3px;
    margin-bottom: 3px;
    color: rgb(64,64,64);
    font-size: 0.8em;
    font-weight: 100;
    background-color: rgb(208, 208, 208);
    padding: 2px;
    padding-left: 31px;
    background-position: 6px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-image: url('../media/symbols/info_square.svg');
    cursor: pointer;
}

.uvp_price {
    position: absolute;
    color: rgb(115, 115, 115);
    font-size: 1em;
}

    .uvp_price.big {
        font-size: 1.2em;
        margin-bottom: 12px;
    }

    .uvp_price.discount {
        font-size: 1em;
        vertical-align: super;
    }

    .uvp_price b {
        font-weight: 100;
        margin-right: 10px;
    }

    .uvp_price.dark {
        color: #fff;
    }

.left_price_div {
    position: absolute;
    left: 0;
    bottom: 60px;
}

    .left_price_div.small {
        bottom: 37px;
    }

.our_price_text {
    position: relative;
    left: 40px;
    top: 55px;
    color: rgb(115, 115, 115);
    font-weight: 400;
    margin-right: 5px;
}

    .our_price_text.dark {
        color: #fff;
    }

.mwst_text {
    font-size: 0.5em;
    text-align: right;
}

    .mwst_text.dark {
        color: #fff;
    }

    .mwst_text.small {
        position: relative;
        top: 32px;
    }

.product_price {
    position: absolute;
    right: 0;
    color: rgb(255, 115, 0);
    text-align: right;
    font-size: 2.9em;
    font-weight: 400;
    transition: opacity ease 0.3s;
}

    .product_price.big {
        font-size: 3.9em;
    }

    .product_price.small {
        font-size: 2.5em;
    }

.our_price {
    position: relative;
    height: 95px;
    right: 0;
}

    .our_price.dark {
        color: #fff;
    }

    .our_price.small {
        bottom: 23px;
    }

.small_price {
    vertical-align: 40%;
    font-size: 0.6em;
}

.byenow_button {
    padding: 5px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    background-color: rgb(255, 115, 0);
    margin-bottom: 30px;
    margin-top: 5px;
    cursor: pointer;
}

.byenow_button {
    margin-bottom: 8px;
}

.triplebox_container {
    position: relative;
    display: flex;
    flex-flow: wrap;
    align-items: stretch;
    justify-content: space-between;
    /*height: 600px;*/
    margin: 55px;
    margin-top: -45px;
    margin-bottom: 30px;
}

    .triplebox_container.index {
        margin-top: 0px;
    }

    .triplebox_container.indexNeu {
        margin-top: 30px;
        max-width: 1920px;
    }

.double_flex_container {
    display: flex;
    flex-flow: row;
}


.pover_smallfeaturebox {
    position: relative;
    width: 415px;
    min-height: 680px;
    background-color: #fff;
    margin-top: 30px;
    margin-bottom: 30px;
}

    .pover_smallfeaturebox.index {
        min-height: 10px;
        cursor: pointer;
    }



.product_featureimage {
    position: relative;
    width: 100%;
    height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

    .product_featureimage.index {
        height: 185px;
    }

#studioimage {
    background-image: url('../media/Surface-Studio.jpg');
}

#laptopimage {
    background-image: url('../media/Surface-Laptop.jpg');
}

#bookimage {
    background-image: url('../media/Surface-Book.jpg');
}

.feature_usericon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    background-image: url('../media/symbols/usericonorange.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



/*Änderungen für Student*/

.pfb_prod_name.student {
    color: #89cc00;
}

.product_price.student {
    color: #89cc00;
}

.byenow_button.student {
    background-color: #89cc00;
}

.pfd_prod_description.student {
    color: #89cc00;
}

.feature_usericon.student {
    background-image: url('../media/symbols/usericonGreen.png');
}
/*Ende*/

/*Änderungen für Business*/

.pfb_prod_name.business {
    color: #D4021D;
}

.product_price.business {
    color: #D4021D;
}

.byenow_button.business {
    background-color: #D4021D;
}

.pfd_prod_description.business {
    height: 40px;
    color: #D4021D;
    margin-top: 2px;
}

.feature_usericon.business {
    background-image: url('../media/symbols/usericonRed.png');
}
/*Ende*/

.mwLogo {
    position: absolute;
    left: 55px;
    top: 55px;
    height: 55px;
    width: 168px;
    background-image: url('../media/ModernWorkplaceLogo.png');
}


.abo_container {
    position: relative;
    display: flex;
    flex-flow: row;
    align-items: stretch;
    justify-content: space-between;
    margin-top: -15px;
}

.abo_box {
    position: relative;
    width: 105px;
    height: 57px;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all ease 0.1s;
}

.pover_featurebox_business .abo_box {
    background-color: rgb(208, 208, 208);
}

.pover_featurebox_business .user_selection_box {
    background-color: rgb(208, 208, 208);
}

/*.abo_box.aktiv {
        color: #D4021D;
    }*/

.abo_box_innerContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.abo_box_price_innerContent {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all ease 0.3s;
}

.month_text {
    font-size: 0.8em;
}

    .month_text.small {
        font-size:;
    }

    .month_text.aktiv {
        display: block;
        margin-top: 17px;
        font-size: 0.9em;
        font-weight: 600;
        color: #D4021D;
    }

    .month_text.home.aktiv {
        color: rgb(255, 115, 0);
    }

    .month_text.student.aktiv {
        color: #89cc00;
    }


.direct_buy_line {
    text-align: center;
    font-size: 0.9em;
}

.direct_buy_link {
    color: #D4021D;
    text-decoration: underline;
    cursor: pointer;
}


.price_container {
    position: relative;
    height: 95px;
}

    .price_container.business {
        position: relative;
        height: 115px;
    }

    .price_container.small {
        position: relative;
        top: 26px;
        height: 43px;
    }


.statt_text {
    font-size: 0.8em;
    color: rgb(115, 115, 115);
}

    .statt_text.small {
        font-size: 0.7em;
    }


.discount_text {
    font-size: 1.2em;
}

#pover_json_container {
    position: relative;
}

/*Filter*/
.filter_container {
    position: relative;
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 45px;
    background-color: #fff;
    display: flex;
    flex-flow: row;
}

.filter_right {
    position: relative;
    width: 67%;
}

.filter_left {
    position: relative;
    width: 535px;
    margin-right: 50px;
}

.filter_blocks {
    position: relative;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    font-size: 1.1em;
}


.filter_text {
    position: relative;
    top: 9px;
    left: 12px;
    color: #D4021D;
    font-weight: 600;
    font-size: 0.9em;
}

    .filter_text.home {
        color: rgb(255, 115, 0);
    }

    .filter_text.student {
        color: #89cc00;
    }

    .filter_text.hidden {
        display: none;
    }

.selected_text {
    position: relative;
    margin-right: -9px;
    z-index: 6;
    background-color: #fff;
}

.filter {
    position: relative;
    background-color: #E9E9E7;
    width: 24%;
    min-width: 195px;
    cursor: pointer;
    height: 42px;
    margin-top: 9px;
}


    .filter.aktiv {
        background-color: #D4021D;
        color: #fff;
    }

    .filter.home.aktiv {
        background-color: rgb(255, 115, 0);
    }

    .filter.student.aktiv {
        background-color: #89cc00;
    }

    .filter span {
        position: absolute;
        transform: translateY(18%) translateX(12px);
    }

.filter_indi_button {
    position: relative;
    background-color: #E9E9E7;
    width: 49%;
    height: 42px;
    min-width: 223px;
    cursor: pointer;
    margin-top: 9px;
}



    .filter_indi_button span {
        position: absolute;
        transform: translateY(18%) translateX(12px);
    }



    .filter_indi_button.aktiv {
        background-color: #D4021D;
        color: #fff;
    }

    .filter_indi_button.home.aktiv {
        background-color: rgb(255, 115, 0);
    }

    .filter_indi_button.student.aktiv {
        background-color: #89cc00;
    }

    .filter_indi_button.aktiv .filter_arrow {
        background-image: url('../media/symbols/pfeil_unten.png');
    }

.filter_arrow {
    background-image: url('../media/symbols/pfeil_unten_grey.png');
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 15px;
    top: 8px;
    transition: transform 0.5s;
}

.filter_suche {
    position: relative;
    background-color: #E9E9E7;
    width: 49%;
    height: 42px;
    min-width: 195px;
    cursor: pointer;
    margin-top: 9px;
}

.filter_suche_wide {
    width: 300px;
    float: none;
}

.filter_filter {
    position: relative;
    background-color: rgba(255,255,255,0.5);
    width: 300px;
    height: 42px;
    /*min-width: 223px;*/
    cursor: pointer;
    margin-top: 9px;
    margin-right: 50px;
    float: left;
}



.filter_indi_box {
    position: absolute;
    background-color: #eee;
    top: 59px;
    left: 0;
    width: 100%;
    min-width: 428px;
    z-index: 9;
}


.filter_indi_header {
    position: relative;
    background-color: #D4021D;
    height: 50px;
    width: 100%;
}

    .filter_indi_header.home {
        background-color: rgb(255, 115, 0);
    }

    .filter_indi_header.student {
        background-color: #89cc00;
    }

    .filter_indi_header div {
        color: #fff;
        position: relative;
        top: 8px;
        left: 17px;
        font-size: 1.2em;
    }

.filter_indi_container {
    position: relative;
    padding-top: 8px;
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: column;
    background-color: #E9E9E7;
}

.filter_indi {
    position: relative;
    height: 42px;
    font-size: 1.1em;
    cursor: pointer;
    background-color: #E9E9E7;
}

    .filter_indi.aktiv {
        color: #D4021D;
        background-color: rgb(208, 208, 208);
        background-image: url('../media/symbols/x_rot.svg');
        background-size: 17px 17px;
        background-position: 96% 13px;
        background-repeat: no-repeat;
    }

    .filter_indi.home.aktiv {
        color: rgb(255, 115, 0);
        background-image: url('../media/symbols/x_orange.svg');
    }

    .filter_indi.student.aktiv {
        color: #89cc00;
        background-image: url('../media/symbols/x_gruen.svg');
    }

    .filter_indi:hover {
        background-color: rgba(212,2,29,1);
        color: #fff;
    }

    .filter_indi.home:hover {
        background-color: rgb(255, 115, 0);
        color: #fff;
    }

    .filter_indi.student:hover {
        background-color: #89cc00;
        color: #fff;
    }

    .filter_indi span {
        position: relative;
        top: 5px;
        left: 17px;
    }


.filter_del {
    position: relative;
    z-index: 12;
    font-size: 0.6em;
    color: #333;
    cursor: pointer;
}

    .filter_del.hidden {
        display: none;
    }

.such_placeholder {
    position: absolute;
    left: 55px;
    top: 6px;
}


.such_icon {
    position: absolute;
    background-color: #fff;
    width: 42px;
    height: 42px;
    background-size: 17px 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../media/symbols/search.svg');
}

.filter_icon {
    position: absolute;
    background-color: #fff;
    width: 42px;
    height: 42px;
    background-size: 17px 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../media/symbols/Filter.svg');
}


.triplebox_title {
    position: relative;
    left: 80px;
    top: 22px;
    font-size: 2.2em;
    font-weight: 600;
}

.noProductText {
    width: 300px;
    height: auto;
    text-align: center;
    position: relative;
    margin: auto;
    font-size: 2em;
}


.ql_landingpage {
    background-color: #000;
    background-image: url('../media/LandingpageBG.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


    .ql_landingpage div {
        color: #fff;
        font-family: Arial;
        font-size: 70pt;
        margin-top: 12%;
    }
