/*****************************/
/* LANDING PAGES EMAILTESTER */
/*****************************/
.marketing.emailtester h3.centered {
    font-size: 45px;
}

.marketing.emailtester h4 {
    font-size: 25px;
}

.marketing .featurette .container .emailtester.col-md-12 {
    padding: 25px 13% 50px;
}

.navbar-wrapper + .container.emailtester .featurette:first-child {
    padding-top: 25px;
}

.container.emailtester {
    padding-top: 50px;
}

div.emailtester > div.featurette h3 {
    color: #518947;
}

.container.emailtester ul {
    padding-left: 20px;
}

div.emailtester .row > .note {
    font-weight: bold;
    color: #e2712c;
    margin: 10px 0 25px;
    font-size: 16px;
    padding: 0 5px;
}

#cloudEmailtester {
    display: none;
    float: right;
    width: 250px;
    margin-top: 35px;
}

#scientist {
    max-width: none;
    width: auto;
    margin-bottom: auto;
    position: absolute;
    display: none;
    right: 50px;
    bottom: 25px;
}


/********************/
/* PRODUCT PACKAGES */
/********************/
.mde .productComparison:not(.contractual) .packages-cols .container {
    height: calc(100% - 135px);
}

.mde .productComparisonTable .comparisonBlock .row > div.featureDetails > div {
    width: calc(100% / 6);
    min-width: 125px;
}

/**** temporary style for new PureMail package in Germany ****/
.mde .mdesk {
    margin-left: 640px;
}

.mde .blocksWrapper {
    overflow-x: auto;
}

.mde .productComparisonTable .comparisonBlock .row {
    width: 100%;
}

.mde .productComparisonTable .comparisonBlock,
.mde .productComparisonTable .comparisonBlock .row.header {
    width: min-content;
}

.mde .productComparisonTable .comparisonBlock .featureName > div {
    width: calc(100vw - 60px);
    position: sticky;
    left: 15px;
}

.mde .productComparisonTable .comparisonBlock .row.header .featureName div,
.mde .productComparisonTable .comparisonBlock .row.subheader .featureName div {
    text-align: center;
}

.mde .productComparisonTable .comparisonBlock .featureName svg {
    width: 22px;
    height: 22px;
    vertical-align: center;
    padding: 2px 7px;
    position: absolute;
    right: 0;
    border-radius: 50%;
    background-color: #fff;
    --outline: var(--main--blue--dark);
    cursor: pointer;
}

.mde .productComparisonTable .comparisonBlock .featureName svg.scrollLeft {
    left: 0;
    transform: rotate(180deg);
}

.mde .productComparisonTable .comparisonBlock .row.subheader .featureName svg {
    --outline: var(--main--blue--light);
}

.mde .container.packages {
    max-width: 1280px;
}

.mde .packages-cols {
    display: flex;
    gap: 10px;
    overflow: hidden;
    padding: 0 30px;
}

.mde .packages-cols > div {
    padding-right: 0;
    padding-left: 0;
    min-width: 100%;
    height: min-content;
}

.mde .packages-cols .row.name h3 {
    font-size: 35px;
}

.mde .packages-control-wrapper div.mask {
    position: absolute;
    top: 0;
    height: 100%;
    width: 25px;
}

.mde .packages-control-wrapper .left .mask {
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.mde .packages-control-wrapper .right .mask {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.mde #products .productComparison:not(.contractual) .packages-control-wrapper .left .mask {
    background: linear-gradient(to bottom, rgb(0, 154, 255), rgb(0, 163, 255));
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.mde #products .productComparison:not(.contractual) .packages-control-wrapper .right .mask {
    background: linear-gradient(to bottom, rgb(0, 154, 255), rgb(0, 163, 255));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.mde .packages-control-wrapper svg {
    width: 30px;
    height: 30px;
    vertical-align: center;
    padding: 4px 8px;
    position: absolute;
    top: 35%;
    right: 0;
    border-radius: 50%;
    background-color: var(--main--blue--dark);
    --outline: #fff;
    cursor: pointer;
    display: block;
    z-index: 100;
}

.mde .packages-control-wrapper svg:hover {
    background-color: var(--main--blue--dark--second);
}

.mde .packages-control-wrapper .left svg {
    left: 0;
    transform: rotate(180deg);
}
.mde .pure .price {
    color: #ae9b7d; /*#245f5a; #555553;*/
}
/**** END - temporary style for new PureMail package in Germany ****/

.packages-cols .container.tree .row.tree.band {
    background: var(--bg--package--tree) url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 21'><path d='M14.3754 7.75881C14.494 7.40848 14.5608 7.03416 14.5608 6.64386C14.5608 4.92353 13.3136 3.49764 11.675 3.21198C11.5346 1.41502 10.0347 0 8.20198 0C6.3843 0 4.89326 1.39102 4.73106 3.16623C2.89655 3.26819 1.43916 4.78386 1.43916 6.64356C1.43916 7.03397 1.5061 7.40847 1.62462 7.7585C0.64935 8.37702 0 9.46288 0 10.7029C0 12.6289 1.56142 14.1905 3.48718 14.1905C4.32662 14.1905 5.09691 13.893 5.69871 13.3989C5.98359 13.6931 6.32184 13.9338 6.6947 14.1137V20.1264H9.30576V14.2778C9.76162 14.1246 10.1763 13.8825 10.527 13.5682C11.0909 13.9596 11.7745 14.1907 12.5128 14.1907C14.4389 14.1907 16 12.6289 16 10.7031C16 9.46311 15.3506 8.37694 14.3754 7.75873L14.3754 7.75881Z' fill='%23fff'/></svg>") no-repeat scroll 15px 14px;
    background-size: 16px 21px;
}

.packages-cols .container.tree .row.band {
    background: var(--bg--package--tree);
    color: #fff;
    padding: 13px 20px 13px 40px;
    font-size: 16px;
    font-weight: 700;
}

.packages-cols .ITsecurityBadge {
    width: calc(100% - 20px);
    max-width: 275px;
    margin: 20px 10px 0 10px;
}


/******************/
/* CAREER & PRESS */
/******************/
.featurette.career p {
    font-size: 12.5pt;
}

.featurette.career li {
    margin-left: -20px;
}

.featurette.press .col-md-9,
.featurette.career .col-md-9 {
    padding: 20px 30px;
}


/**********************/
/* ENVIRONMENT REPORT */
/**********************/
.featurette.report ul {
    list-style: none;
    margin-top: 10px;
}

.featurette.report ul li {
    background: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 1.5 16 16'><path d='m 7.13725,11.7255 c -0.25882,0 -0.47058,-0.1098 -0.66666,-0.3686 L 4.55686,9.00392 C 4.44706,8.8549 4.37647,8.6902 4.37647,8.51765 c 0,-0.3451 0.26667,-0.61961 0.60392,-0.61961 0.21961,0 0.39216,0.06274 0.58039,0.31372 l 1.5451,2.00004 3.25492,-5.22357 c 0.149,-0.22745 0.3451,-0.35294 0.5412,-0.35294 0.3294,0 0.6431,0.22745 0.6431,0.5804 0,0.17255 -0.102,0.34509 -0.1882,0.50196 L 7.77255,11.3569 C 7.61569,11.6 7.39608,11.7255 7.13725,11.7255 Z' fill='%231d2755'/></svg>") no-repeat scroll 0 -1px;
    background-size: 35px 35px;
    padding-left: 30px
}

.featurette.report ul.leaf li {
    background: url(../img/icons/leaf.png) no-repeat scroll 0 8px;
    background-size: 22px 9px;
}

.featurette.report img {
    text-align: center;
    border-radius: 12px;
}

.featurette.report .block {
    border-radius: 12px;
    padding: 5px;
    margin: 5px;
    width: auto;
}

.featurette.environment .block {
    background-color: #cff2dc;
}

.featurette.transparent .block {
    background-color: #fff;
}

.featurette.report .block h3 {
    margin-top: 0;
}

/***********/
/* SUPPORT */
/***********/
.support .featurette .tlfSupport {
    text-align: center;
    padding: 35px 0;
}

.support .featurette .tlfSupport a {
    color: #8DC63F;
    font-size: 18px;
    font-weight: bold;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 3px;
}

.support .featurette .tlfSupport img {
    height: 30px;
    border-left: 2px solid #8DC63F;
    padding-left: 10px;
    margin-left: 10px;
}

.support .featurette ul {
    text-align: left;
    list-style: none;
    font-size: 16px;
    padding: 0 10px;
}

.support .featurette ul li {
    background: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 1.5 16 16'><path d='m 7.13725,11.7255 c -0.25882,0 -0.47058,-0.1098 -0.66666,-0.3686 L 4.55686,9.00392 C 4.44706,8.8549 4.37647,8.6902 4.37647,8.51765 c 0,-0.3451 0.26667,-0.61961 0.60392,-0.61961 0.21961,0 0.39216,0.06274 0.58039,0.31372 l 1.5451,2.00004 3.25492,-5.22357 c 0.149,-0.22745 0.3451,-0.35294 0.5412,-0.35294 0.3294,0 0.6431,0.22745 0.6431,0.5804 0,0.17255 -0.102,0.34509 -0.1882,0.50196 L 7.77255,11.3569 C 7.61569,11.6 7.39608,11.7255 7.13725,11.7255 Z' fill='%23002752'/></svg>") no-repeat scroll 0 -3px;
    background-size: 35px 35px;
    padding-left: 30px
}

.marketing .featurette.telephone .footnote {
    margin-left: 20px;
}

/********/
/* BLOG */
/********/
.featurette.blog .abstract {
    min-height: 200px;
    position: relative;
    border-bottom: 1px solid #dadada;
    padding-bottom: 25px;
    margin-bottom: 40px;
}

.featurette.blog .abstract .body {
    min-height: 175px;
}

.featurette.blog .abstract h4 {
    margin-top: 210px;
    font-weight: bold;
}

.featurette.blog .abstract .body h6 {
    display: none;
}

.featurette.blog .abstract .calendar,
.featurette.blog .abstract .preview {
    position: absolute;
    top: 0;
}

.featurette.blog .abstract .calendar {
    margin-top: 180px;
}

.featurette.blog .article {
    padding: 15px 30px;
}

.featurette.blog .article .body h3:first-child {
    font-weight: bold;
}

.featurette.blog .preview {
    width: 300px;
    height: 165px;
    border-radius: 12px;
    overflow: hidden;
}

.featurette.blog .preview img {
    width: 100%;
    height: 165px;
    object-fit: cover;
}

.featurette.blog .article .preview,
.featurette.blog .article .calendar {
    display: none;
}

.featurette.blog .body {
    margin-bottom: 5px;
}

.featurette.blog .body .calendar,
.featurette.blog .body > h6 {
    color: var(--main--blue--light--second);
    margin-bottom: 20px;
    display: inline-block;
    font-size: 20px;
    font-weight: 450;
}

.featurette.blog .abstract .body:hover {
    cursor: pointer;
}

.featurette.blog .abstract .body:hover a {
    text-decoration: underline;
}

.featurette.blog .abstract .body .calendar {
    color: #888;
}

.featurette.blog .body > h6::before {
    content: "- ";
}

.featurette.blog .featurette-image,
.featurette.blog .body p,
.featurette.press .featurette-image {
    margin-bottom: 15px;
}

.featurette.blog .body ul {
    margin-bottom: 25px;
}

.featurette.blog .body ul li,
.featurette.press ul li {
    font-size: 16px;
}

.featurette.blog .body hr,
.featurette.press hr {
    border-color: #505050;
}

.featurette.blog .body table {
    width: 100%;
    margin: 20px 0 40px;
}

.featurette.blog .footer {
    overflow: hidden;
    white-space: nowrap;
}

.featurette.blog .footer > * {
    display: inline-block;
    vertical-align: middle;
}

.featurette.blog .footer hr {
    border-color: #77bfdd;
    width: calc(50% - 100px);
}

.featurette.blog .footer .btn {
    margin: 0 35px;
}


/*********************/
/* RESPONSIVE DESIGN */
/*********************/
@media (min-width: 600px) {
    /**** temporary style for new PureMail package in Germany ****/
    .mde .packages-cols > div {
        min-width: calc((100% - 10px) / 2);
        height: auto;
    }

    .mde .packages-control-wrapper svg {
        top: 38%;
    }

    .packages-cols .container .row.name h3 {
        font-size: 30px;
    }
    /**** END - temporary style for new PureMail package in Germany ****/

    .mde .packages-cols .container.tree.free .row.band,
    .mde .packages-cols .container.tree.pure .row.band {
        min-height: 94px;
    }

    .featurette.blog .abstract .body > *:not(.preview) {
        margin-left: 250px;
    }

    .featurette.blog .abstract h4 {
        margin-top: 40px;
    }

    .featurette.blog .abstract .calendar {
        margin-top: 0;
    }

    .featurette.blog .abstract .preview {
        width: 200px;
        height: auto;
        max-height: 165px;
    }
    .featurette.blog .preview img {
        width: 200px;
        height: auto;
    }

    .featurette.blog .body table {
        width: 90%;
        margin: 20px 5% 40px;
    }
}

@media (min-width: 768px) {
    .mde .productComparisonTable .comparisonBlock .featureName svg {
        display: none;
    }

    .container.emailtester {
        padding-top: 85px;
    }

    #cloudEmailtester {
        display: inline-block;
    }

    #scientist {
        display: block;
    }

    .marketing .featurette .container .emailtester.col-md-12 {
        padding: 25px 100px 50px
    }

    .featurette.blog .abstract .body > *:not(.preview) {
        margin-left: 350px;
    }

    .featurette.blog .abstract .preview {
        width: 300px;
        height: 165px;
    }

    .featurette.blog .preview img {
        width: 100%;
        height: 165px;
    }

    .mde .landingpage .productComparison .packages-cols .container {
        height: calc(100% - 110px);
    }
}

@media (min-width: 850px) {
    /**** temporary style for new PureMail package in Germany ****/
    .mde .packages-cols > div {
        min-width: calc((100% - 20px) / 3);
    }

    .mde .packages-cols .container .logo {
        margin-left: 15px;
        width: 42px;
        height: 42px;
    }
    .mde .packages-cols .container .row.name {
        padding: 25px 15px 25px 70px;
    }

    .packages-cols .container .row.name h3 {
        font-size: 30px;
    }
    /**** END - temporary style for new PureMail package in Germany ****/
}

@media (min-width: 992px) {
    /**** temporary style for new PureMail package in Germany ****/
    .mde .productComparisonTable .comparisonBlock .row {
        display: block;
    }

    .mde .productComparisonTable .comparisonBlock .row.header .featureName,
    .mde .productComparisonTable .comparisonBlock .row.subheader .featureName {
        border-bottom: 1px solid #d3d3d3;
    }

    .mde .productComparisonTable .comparisonBlock .row div.featureDetails > div:not(:first-child) {
        border-left: 1px solid #d3d3d3;
    }

    .mde .productComparisonTable .comparisonBlock .row div.featureDetails > div:first-child {
        border-left: none;
    }

    .mde .productComparisonTable .comparisonBlock div[class="row"]:nth-child(2n) {
        background-color: transparent;
    }

    .mde .productComparisonTable .comparisonBlock div[class="row"] > div:not(.featureName) {
        background-color: #e8eaee;
    }
    /**** END - temporary style for new PureMail package in Germany ****/

    .mde .productComparisonTable .comparisonBlock,
    .mde .productComparisonTable .comparisonBlock .row.header {
        width: 100%;
    }

    .mde .productComparisonTable .comparisonBlock .featureName > div {
        width: auto;
        text-align: left;
        position: relative;
        left: 0;
    }

    #cloudEmailtester {
        width: auto;
        margin-top: 25px;
    }

    #scientist {
        right: 150px;
        bottom: 45px;
    }

    .featurette.report .block {
        padding: 25px 15px;
        margin: 20px 0;
    }

    .mde .landingpage .productComparison .packages-cols .container {
        height: calc(100% - 175px);
    }
}

@media (min-width: 1065px) {
    /**** temporary style for new PureMail package in Germany ****/
    .mde /*.contractual*/ .packages-cols > div {
        min-width: calc((100% - 30px) / 4);
    }
    /**** END - temporary style for new PureMail package in Germany ****/
}

@media (min-width: 1150px) {
    /**** temporary style for new PureMail package in Germany ****/
    .mde .packages-cols .container .logo {
        margin-left: 20px;
        width: 50px;
        height: 50px;
    }

    .mde .packages-cols .container .row.name {
        padding: 25px 20px 25px 85px;
    }

    .mde .packages-cols .container .row.name h3 {
        font-size: 30px;
    }
    /**** END - temporary style for new PureMail package in Germany ****/
}

@media (min-width: 1200px) {
    /**** temporary style for new PureMail package in Germany ****/
    .mde .productComparisonTable .comparisonBlock .row {
        display: flex;
    }

    .mde .productComparisonTable .comparisonBlock .row.header .featureName,
    .mde .productComparisonTable .comparisonBlock .row.subheader .featureName {
        border-bottom: none;
    }

    .mde .productComparisonTable .comparisonBlock .row.header .featureName div,
    .mde .productComparisonTable .comparisonBlock .row.subheader .featureName div {
        text-align: left;
    }

    .mde .productComparisonTable .comparisonBlock .row div.featureDetails > div:first-child {
        border-left: 1px solid #d3d3d3;;
    }

    .mde .productComparisonTable .comparisonBlock div[class="row"]:nth-child(2n) {
        background-color: #e8eaee;
    }

    .mde .productComparisonTable .comparisonBlock div[class="row"] > div:not(.featureName) {
        background-color: transparent;
    }
    /**** END - temporary style for new PureMail package in Germany ****/
}

@media (min-width: 1275px) {
    /**** temporary style for new PureMail package in Germany ****/
    .mde .packages-cols {
        padding: 0 40px;
    }

    .mde .packages-cols .container .row.name h3 {
        font-size: 35px;
    }

    .mde .packages-control-wrapper div.mask {
        width: 30px;
    }

    .mde .packages-control-wrapper svg {
        width: 40px;
        height: 40px;
        padding: 7px 12px;
    }
    /**** END - temporary style for new PureMail package in Germany ****/
}