@media (min-height: 0px) and (max-height: 320px) {
    #benefit_map_container {
        height: 20em;
    }

    #benefit_list {
        background-color: #ffffff;
        height: 20em;
    }
}

@media (min-height: 320px) and (max-height: 480px) {
    #benefit_map_container {
        height: 24em;
    }

    #benefit_list {
        background-color: #ffffff;
        height: 24em;
    }
}

@media (min-height: 500px) and (max-height: 640px) {

    #benefit_map_container {
        height: 32em;
    }

    #benefit_list {
        background-color: #ffffff;
        height: 32em;
    }
}

@media (min-height: 640px) and (max-height: 1000px) {
    #benefit_map_container {
        height: 42em;
    }

    #benefit_list {
        background-color: #ffffff;
        height: 42em;
    }
}

@media (min-height: 1000px) {
    #benefit_map_container {
        height: 46em;

    }

    #benefit_list {
        background-color: #ffffff;
        height: 46em;
    }
}

#benefit_list {
    border-bottom: 1px solid #4a8ae1;
    margin-top: 1em;
    margin-right: 1em;
    overflow-x: hidden; /*enables scrolling of benefit list*/
}

#benefit_map_container {
    position: relative;
    margin-top: 1em;
}

/*benefit on google maps, needed otherwise no map will be displayed*/
#benefit_map {
    height: 100%;
    width: 100%;
}

#map_control {
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
    display: none; /*initially invisible*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 90%;
    padding: 0.5em;
}

#directions_panel {
    display: none;
    background: #f5f5f5;
    height: 100%;
    width: 100%;
}

#chooseMapView {
    font-size: 14px;
    width: 100%;
}

#finishRouteLink {
    color: #4a8ae1;
    width: 40%;
}

#search_address {
    color: #4F5357;
    font-size: 14px;
    width: 75%;
    margin-top: 0.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Verdana, FrutigerRoman, Tahoma, sans-serif;
    background-color: #FFF;
    border: 1px solid black;
    padding-top: 0.4em;
}

#searchAddresslabel {
    font-weight: bold;
    font-size: 14px;
    width: 25%;
    float: left;
    padding-top: 0.8em;
}

#myposition-address {
    color: #4F5357;
    font-size: 14px;
    margin-top: 0.3em;
}

/*Info Box with simple information about the benefit, is opened when the user clicks on a marker*/
.benefitInfoWindow {
    width: 250px;
    overflow: auto;
}

/*
* the same size as from implicit cms styles
*/
.infoWindowImage img {
    width: 68px;
    height: 68px;
}

.infoWindowImage {
    width: 35%;
    float: left;
}

.infoWindowText {
    width: 65%;
    float: left;
    margin-bottom: 5px;
}

.infoWindowText .small {
    font-size: 0.8em;
}

.infoWindowText h3 {
    color: #0086c3;
    font-weight: bold;
    font-size: 0.8em;
}

/*
    Container for address information
*/
.infoWindowAddress {
    width: 100%;
    float: left;
    position: relative;
    margin-bottom: 1em;
}

.infoWindowAddress span {
    color: #0086c3;
    font-size: 0.8em;
}

.routeContainer {
    width: 100%;
    float: left;
}

/*desktop*/
.routeImage {
    background-image: url("/more/app/img/location.png");
    height: 2em;
    width: 2em;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    float: right;
}

.infoWindowAddress .routeImage {
    background-image: url("/more/app/img/location.png");
    height: 2em;
    width: 2em;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    float: right;
}

.routeLabel {
    float: left;
    width: 100%;
    height: 2em;
}

.routeLabel a {
    color: #0086c3;
    text-decoration: underline;
    cursor: pointer;
    height: 2em;
}

/*Benefit Info Container in the infowindow holding image and text specific to a benefit*/
.infoWindowHeader {
    float: left;
    border-bottom: 2px solid #E1E1E1;
    height: 5.5em;
    width: 100%;
}

.benefitInfoList {
    float: left;
    width: 100%;
}

/*only used to prefill the infowindow with 'empty' space as we cannot resize the infowindow later*/
.infoWindowBenefitInfo {
    height: 6em;
    width: 100%;
    float: left;
}

/*Info List-Teaser Styles the Styles are used to Style the list elements left of the Map showing benefits*/

/* container for the image */
.infoListImage {
    float: left;
    width: 30%;
}

/* benefit image */
.infoListImage img {
    float: left;
    width: 68px;
    height: 68px;
    padding: 1em;
}

.filterBox {
    padding: 3.5em 0;
    float: left;
    width: 10%
}

/* typo styling */
.infoListText {
    padding: 0.5em 0em 0.5em 0em;
    color: #0086c3;
    float: left;
    width: 60%;

}

/* style for link */
.benefitLinkLabel {
    color: #0086c3;
    font-weight: bold;
}

/* style for the headline */
.infoListText h3 {
    font-size: 0.9em;
    color: #0086c3;
}

/*
Loading animation without background
*/
.plainLoading {
    background: url("https://static.o2.de/resource/img/ajax-loader.gif") no-repeat scroll 50% 20px;
    position: absolute;
    left: 10%;
    top: 60%;
    padding: 11px 21px;
    min-height: 60px;
    width: 130px;
    height: 60px;
}

.plainLoadingSmall {
    background: url("https://static.o2.de/resource/img/ajax-loader.gif") no-repeat scroll 60% 25px;
    position: absolute;
    left: 2%;
    top: 30%;
    padding: 5em;
    min-height: 60px;
    width: 130px;
    height: 60px;
}

/**
    FREUNDE EMPFEHLEN LAYOUT
*/

#recommendationText {
    font-size: 1.1em;
    width: 100%;
    padding: 0.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*font-family: Verdana, FrutigerRoman, Tahoma,sans-serif;*/
    background-color: #FFF;
    color: #4f5357;
}

#moreEmailAddress[disabled] {
    background-color: #CCCCCC;
    background-image: none;
}

.prospect_text {
    color: #01b7b4;
    font-weight: bold;
}

.basic_text {
    color: #000066;
    font-weight: bold;
}

.silber_text {
    color: #91c90e;
    font-weight: bold;
}

.silver_text {
    color: #91c90e;
    font-weight: bold;
}

.premium_text {
    color: #ff7f41;
    font-weight: bold;
}

.basic_silber_text {
    color: #91c90e;
    font-weight: bold;
}

.basic_silver_text {
    color: #91c90e;
    font-weight: bold;
}

.exklusiv_text {
    color: #f4364c;
    font-weight: bold;
}

.unbekannt_text {
    color: #4499CA;
    font-weight: bold;
}

.mobile_benefit_details_signet_silver {
    width: 100%;
    height: 30px;
    background-color: #A7D22E;
}

.mobile_benefit_details_signet_basic {
    width: 100%;
    height: 30px;
    background-color: #D9DADC;
}

.mobile_benefit_details_signet_premium {
    width: 100%;
    height: 30px;
    background-color: #55CEC3;
}

.mobile_benefit_details_signet_exklusiv {
    width: 100%;
    height: 30px;
    background-color: #953594;

}

.mobile_benefit_details_signet_unbekannt {
    width: 100%;
    height: 30px;
    background-color: #D9DADC;
}

.mobile_benefit_details_signet_basic_silver {
    width: 100%;
    height: 30px;
    background-color: #A7D22E;
}

.mobile_benefit_details_text {
    font-family: Verdana, FrutigerRoman, Tahoma, sans-serif;
    font-size: 10pt;
    margin-left: 20px;
    color: #ffffff;
    line-height: normal;
    position: relative;
    top: 25%;
    font-weight: bold;
}

.desktop_wording {
    font-family: Verdana, FrutigerRoman, Tahoma, sans-serif;
    font-size: 10pt;
    color: #ffffff;
    font-weight: bold;
    padding-bottom: 1em;
    padding-top: 1em;
}

.mobile_wording {
    font-family: Verdana, FrutigerRoman, Tahoma, sans-serif;
    font-size: 8pt;
    color: #ffffff;
    font-weight: bold;
    padding-bottom: 0.4em;
    padding-top: 0.4em;
}

.desktop_list_status_container{
    width: 172px;
    height: 34px;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
}

.mobile_list_status_container{
    width: 140px;
    height: 28px;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
}

.status_color_prospect{
    background-color: #D9DADC;
}

.status_color_basic{
    background-color: #D9DADC;
}

.status_color_silver{
     background-color: #91c90e;
 }

.status_color_silber{
    background-color: #91c90e;
}

.status_color_premium{
    background-color: #55CEC3;
}
.status_color_basic_silver{
    background-color: #A7D22E;
}
.status_color_exklusiv{
    background-color: #953594;
}

.status_color_unbekannt{
    background-color: #4499CA;
}



.intro {
    overflow: auto;
    padding: 2%;
    width: 96%;
}

.sticky {

    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

}

.button_spacer {

    height: 5em;

}

nav span.o2-more-logo::before, nav div.o2-more-logo::before {
    display: block;
    width: 40px;
    height: 44px;
    margin: 10px auto 0 auto;
    content: url("/more/app/img/Logo_blau_44x118.png");
    background-size: 30%;
}

nav span.o2-more-logo::before, nav div.o2-more-logo::before img {
    display: block;
    width: 40px;
    height: 44px;
    margin: 10px auto 0 auto;
    content: url("/more/app/img/Logo_blau_44x118.png");
    background-size: 30%
}

/*Teaser Blue*/


/*Teaser Blue*/

div.col12 .tsr.pure.tsr-blue.height6.tsr-e-sumLink:not(.tsr-e-o2moreHead) img, div.col12 .tsr.pure.tsr-blue.height6.tsr-e-sumLink:not(.tsr-e-o2moreHead) .sprite {
    opacity: 1;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area {
    position: absolute;
    top: 120px;
    left: 527px;
    overflow: visible;
    width: 100%;
}

/*o2 more logo*/

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area h2.tsr-headline1 {
    position: absolute;
    top: -91px;
    left: 274px;
    font-size: 39px;
    font-family: FrutigerBold, sans-serif;
    color: white;
    letter-spacing: 0.03em;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area h2.tsr-headline1 sub {
    color: white;
    font-family: FrutigerBold, sans-serif;
    font-size: 16px;
    left: 115px;
    letter-spacing: 0.03em;
    position: absolute;
    top: 43px;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area h2.tsr-headline1 span.small {
    font-size: 33px;
    font-family: FrutigerBold, sans-serif;
    color: white;
    letter-spacing: -0.05em;
}

/*o2 more logo ende*/

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area h3.tsr-headline2 {
    color: white;
    font-family: FrutigerBold, sans-serif;
    font-size: 36px;
    line-height: 37px;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-copy p {
    color: white;
    font-family: frutigerlt;
    font-size: 24px;
}

/*button*/
div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer {
    position: absolute;
    top: 231px;
    left: 19px;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) .btn, a.btn, span.btn, button.btn {
    border-radius: 0px;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer ul.related-links li a.btn.red.mid.open {
    background-color: rgba(244, 54, 76, 1);
    background-image: none;
    color: white;
    padding: 0;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer ul.related-links li a.btn.red.mid.open::after {
    background: rgba(0, 0, 0, 0) url("/resource/v=12041351/img/ico-Benefit.png") no-repeat scroll 0 0;
    content: "";
    height: 10px;
    position: absolute;
    right: 15px;
    top: 17px;
    width: 15px;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) ul.related-links li a.btn.red.mid.open span {
    padding-right: 88px;
    text-align: left;
}


div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer ul.related-links li a.btn.red.mid.close {
    background-color: rgba(244, 54, 76, 1);
    background-image: none;
    color: white;
    padding: 0;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer ul.related-links li a.btn.red.mid.close::after {
    background: rgba(0, 0, 0, 0) url("/resource/v=12041351/img/ico-Benefit.png") no-repeat scroll 0 0;
    content: "";
    height: 10px;
    position: absolute;
    right: 15px;
    top: 17px;
    width: 15px;
}

div.col12 .tsr.pure.tsr-blue.height6:not(.tsr-e-o2moreHead) ul.related-links li a.btn.red.mid.close span {
    padding-right: 88px;
    text-align: left;
}

/*Teaser White*/

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area {
    position: absolute;
    top: 120px;
    left: 527px;
    overflow: visible;
    width: 100%;
}

/*o2 more logo*/

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area h2.tsr-headline1 {
    position: absolute;
    top: -91px;
    left: 274px;
    font-size: 39px;
    font-family: FrutigerBold, sans-serif;
    color: white !important;
    letter-spacing: 0.03em;
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area h2.tsr-headline1 sub {
    color: white;
    font-family: FrutigerBold, sans-serif;
    font-size: 16px;
    left: 115px;
    letter-spacing: 0.03em;
    position: absolute;
    top: 43px;
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area h2.tsr-headline1 span.small {
    font-size: 33px;
    font-family: FrutigerBold, sans-serif;
    color: white !important;
    letter-spacing: -0.05em;
}

/*o2 more logo ende*/

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area h3.tsr-headline2 {
    color: #16234f !important;
    font-family: FrutigerBold, sans-serif;
    font-size: 36px;
    line-height: 37px;
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-copy p {
    color: #16234f !important;
    font-family: frutigerlt;
    font-size: 24px;
}

/*button*/
div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer {
    position: absolute;
    top: 231px;
    left: 19px;
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) .btn, a.btn, span.btn, button.btn {
    border-radius: 0px;
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer ul.related-links li a.btn.red.mid.open {
    background-color: rgba(244, 54, 76, 1);
    background-image: none;
    color: white;
    padding: 0;
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer ul.related-links li a.btn.red.mid.open::after {
    background: rgba(0, 0, 0, 0) url("/resource/v=12041351/img/ico-Benefit.png") no-repeat scroll 0 0;
    content: "";
    height: 10px;
    position: absolute;
    right: 15px;
    top: 17px;
    width: 15px;
}


div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer ul.related-links li a.btn.red.mid.open:after {
    background: url(/resource/v=13041611/img/ico-Benefit.png) no-repeat 0 0;
    content: "";
    height: 10px;
    position: absolute;
    right: 15px;
    top: 11px;
    width: 15px
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) div.txt-area div.tsr-c-bottomContainer ul.related-links li a.btn.red.mid.closed:after {
    background: url(/resource/v=13041611/img/ico-Benefit.png) no-repeat 0 -91px;
    content: "";
    height: 10px;
    position: absolute;
    right: 15px;
    top: 11px;
    width: 15px
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) ul.related-links li a.btn.red.mid.open span {
    padding-right: 88px;
    text-align: left;
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead) .tsr-c-border {
    box-shadow: none;
}

div.col12 .tsr.pure.tsr-white.height6:not(.tsr-e-o2moreHead).tsr-e-sumLink:hover .tsr-c-border {
    box-shadow: none;
}

#benefitHeadTeaser div.content.grid12 div.col12{
    margin : 0px;
}