/* elements.css for >VPAK< */

.werbelink {
    float:right;
    line-height: 1;
    padding: 1.25rem 0.625rem;
    text-decoration: none;
    opacity: .15;
}

.werbelink span {
    font-weight: normal;
    /* background: rgb(184,15,34); */
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 0.25em;
    border-radius: 0.25em;
    font-size: 0.5em;
    vertical-align: top;
    display: inline-block;
}

/* cookieconsent */
.cc-link {
    padding: 0;
    display: inline;
}

/* lightbox - we have fontawesome? awesome! */
@media all {
    .ce-media-image a { position:relative; }

    .ce-media-image a::before {
        content: '\f0c1';
        font-family: FontAwesome;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1;

        width: 1rem;
        height: 1rem;
        position: absolute;
        z-index: 1;
        top: auto;
        bottom: 0.3125rem;
        right: 0.3125rem;

        color: rgb(255,255,255);
        text-shadow: 0 0 1px rgb(0,0,0);
        background: none;
        display:none;
    }
    .ce-media-image a {
        text-decoration: none;
    }

    .ce-media-image a.lightbox::before {
        content: '\f00e';
    }
    .ce-media-image .ce-media-caption a::before {
        content: none;
    }
}

/* news */
@media all {

    .news-list-item + .news-list-item {
        border-top: 1px solid rgb(153,153,153);
        padding-top: 1.25rem;
    }
    .news-list-item + .news-list-item.news-list-item-teaser {
        border: none;
        padding-top: 0;
    }

    .news-list .news-date {
        display: none;
        margin-top: 0.3125rem;
    }
    .news-list-link .fa {
        padding-left: 0.5em;
    }

    .news-list-item-teaser {
        width: 100%;
    }
    .modernizr-flexbox .news-list-teaser .ce-textpic-inner {
        display: flex;
        flex-direction: column;
    }

    .modernizr-flexbox .news-list-teaser .news-teaser-text {
        flex-grow: 1;
    }

    .news-list-masonry .has-pagination {
        margin-bottom: 5rem; /*FIXME */
    }

    .news-list-masonry .pagination {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }
}

/* pagination news & search */
@media all {

    .pagination {
        margin-bottom: 0.9375rem;
    }

    .pagination .pagination-count {
        margin-bottom: 0;
    }

    .pagination ul {
        display: block;
        margin: 0 -0.3125rem;
        padding:0;
    }

    .pagination li {
        display: block;
        float:left;
        line-height: 1;
        padding: 0.3125rem;
    }

    .pagination span,
    .pagination a {
        display: inline-block;
        font-size: 75%;
        color: currentColor;
        text-decoration: none;
        text-align: center;
        line-height: 1;
        width: 1.75rem;
        padding: 0.4375rem 0;
        border: 1px solid currentColor;
        border-radius: 3px;
    }
    .pagination a:not(.fa)::before { content: none; }

    .pagination .fa {
        margin: 0;
        padding: 0;
    }

    .pagination .current {
        background: currentColor;
        background-clip: padding-box;
    }
    .pagination .current b {
        color: rgb(255,255,255);
    }

    .pagination .paginator-ellip {
        border: none;
        padding: 0;
        width: auto;
    }
    .ce-layout-box a:not(.btn){
        color:rgb(0,90,112);
    }
    .slick-dots button{
        background-color:rgb(0,90,112);
        border:0.125rem solid rgb(242,247,248);
        width: 1rem;
        height: 1rem;
    }
    .slick-dots .slick-active button{
        background-color:rgb(250,70,22);
    }

    .slick-dots .slick-active button,
    .slick-dots button{
        opacity:1;    
    }
    .slick-dots button:hover{
        background-color:rgb(250,70,22);
    }

    .ce-slider .ce-bodytext{
        color:rgb(0,90,112);
        background:rgb(255,255,255);
        padding:1.25rem 0.625rem;
    }
    .ce-slider .ce-teaserlink-outer .ce-textpic-inner{
        position: relative;
    }
    /*.ce-slider .ce-teaserlink-outer .ce-textpic-inner::before{
    display:block;
    content'more';
    position: absolute;
    background:rgb(250,70,22);
    top:0;
    right:0;
    left:75%;
    bottom:0;
    content: "more";
    color: #fff;
    font-weight: 600;
    font-size: 112.5%;
    padding: 1.25rem 0.625rem 1.25rem 2.5rem;
    -webkit-clip-path: polygon(0.5rem 0, calc(100% - 0.5rem) 0, 100% 0.5rem, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0.5rem 100%,0 calc(100% - 0.5rem),0 0.5rem);
    clip-path: polygon(0px 0px, 100% 0px,100% 100%,50% 100%, 0 0);
}
    .ce-slider .ce-teaserlink-outer .ce-textpic-inner .ce-bodytext{
    display:block;
    max-width:75%;
}*/
    .ce-layout-box-outer{
        box-shadow:none;
        position: relative;
        background: none;
    }

    .ce-layout-box-outer::before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0rem 0rem 0rem 2rem;
        box-shadow: 0 0.5rem 1.25rem 0 rgba(0,90,112,0.1);
    }
    .ce-layout-box .ce-layout-box-inner{
        padding:1rem;
        -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0.75em 100%,0 calc(100% - 0.75em),0 0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0.75em 100%,0 calc(100% - 0.75em),0 0);
        background-color: rgb(255,255,255);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ce-layout-box .ce-layout-box-inner .ce-header{
        margin:0;
        text-align: center;
    }
    .ce-frame-inverted > div:not(.ce-header){
        background-color:rgb(0,90,112);
        position: relative;
    }
    .ce-frame-inverted > div:not(.ce-header)::before{
        display:block;
        content:'';
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background:linear-gradient(to top right,rgba(21,13,11,0.1), rgba(255,255,255,0,1));
        mix-blend-mode:overlay;
    }
    .ce-type-textmedia ul.ul-style1 {
        list-style: none;
        padding:0;
    }
    .ce-type-textmedia ul.ul-style1 li::before{
        display:inline-block;
        content:'\f058';
        font-family: FontAwesome;
        margin-right:0.625rem;
    }
    .ce-frame-inverted > div:not(.ce-header){
        text-shadow:none;
    }
    .ce-grid-fullwidth-bg{
        margin-bottom:2.5rem;        
        padding-top:2.5rem;

    }
    .ce-grid-fullwidth{
        width:auto;
        left:0;
    }
    .ce-grid-carousel{
    }
    .ce-grid-carousel .ce-column{
        padding:0;
    }
    .ce-carousel .slick-track > div{
        padding: 0 0.3125rem;
    }
    .ce-carousel .slick-dots{
        position: absolute;
        left:50%;
        transform: translate(-50%,-110%);
    }
    .ce-carousel .slick-slide .ce-above-header{
        position: relative;
    }
    .ce-carousel .slick-slide .ce-above-header > .ce-textpic-inner{
        position: absolute;
        z-index:1;
        bottom: 0;
        left: 50%;
        transform: translate(-50%,-30%);
        min-width: 20rem;
        color: rgb(255,255,255);
        text-shadow: 0 0 1rem rgba(0,90,112,0.5);
    }
    .ce-carousel{
        margin:0 -0.625rem 1.563rem;
    }
    .ce-type-div{
        margin:0 -0.625rem 1.563rem;
    }
    footer .ce-element img[data-sizes="auto"].lazyloaded{
        padding:0 2.5rem;
        opacity:0.15;
    }
    .ce-carousel .ce-gallery figure::after{
        display:block;
        content:'';
        position: absolute;
        top:75%;
        left:0;
        bottom:0;
        right:0;
        background: linear-gradient(to top, rgb(0,90,112), rgba(0,90,112,0));
        opacity:0.5;
        z-index:1;
    }
    .ce-carousel .ce-gallery figure{
        position: relative;
    }
    .ce-element{
        margin-bottom:1.25rem;
    }
    .ce-layout-box-outer{
        color:rgb(0,90,112);
        margin-bottom:0;
    }
    .ce-frame-teaser-image .ce-layout-box-inner .ce-header h2::before{
        display:inline-block;
        content:'';
        width:0.75rem;
        height:1.125rem;
        margin-right:0.625rem;
        background:url("/fileadmin/user_upload/Vario/0_Logo/vario-logo-ohne.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .ce-header + .ce-above .ce-gallery, .ce-below .ce-gallery{
        padding:0;
    }
    .ce-frame-teaser-container{
        position: relative;
    }
    .ce-frame-teaser-container > div::before{
        display:block;
        content'';
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background-color:rgba(0,90,112,.03);
        margin:0 -.625rem;
    }
    .ce-frame-teaser-container::before{
        display:block;
        content'';
        position: absolute;
        top:0;
        left:0;
        right:0;
        height:1.25rem;
        background:linear-gradient(to top, rgba(0,90,112,0.03), rgba(0,90,112,0));
        margin:-1.25rem -.625rem 0;
    }
    .ce-grid-100 .ce-col .ce-frame-teaser-container:nth-child(n + 3)::before{
        display:none;
    }
    .ce-frame-icon-container .ce-type-textmedia .ce-column{
        margin-bottom:0.625rem;
    }
    .ce-frame-icon-container .ce-type-textmedia p:nth-child(1){
        margin-bottom:0.25rem;
    }
    .werbelink:hover{
        opacity: 1;
    }
    [data-ce-columns="5"] .ce-column {
        max-width: 20%;
    }
    [data-ce-columns="6"] .ce-column {
        max-width: 16.6666%;
    }
    .ce-tabs .rc-head{
        border-radius:0;
        border:0;
    }
    .ce-tabs .rc-head .rc-link{
        -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0.75em 100%,0 calc(100% - 0.75em),0 0);
        clip-path:polygon(0 0, 100% 0, 100% 100%, 0.75em 100%,0 calc(100% - 0.75em),0 0);
        background-color:rgb(255,255,255);
    }
    .ce-tabs .rc-head::before{
        content: "";
        display: block;
        position:absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0rem 0rem 0rem 2rem;
        z-index: -1;        
        box-shadow: 0 0.5rem 1.25rem 0 rgba(0,90,112,0.1);
    }
    .ce-tabs > div{
        position: relative;
    }
    .ce-tabs .rc-container{
        border:0;
        -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0.75em 100%,0 calc(100% - 0.75em),0 0);
        clip-path:polygon(0 0, 100% 0, 100% 100%, 0.75em 100%,0 calc(100% - 0.75em),0 0);
        background-color:rgb(255,255,255);
    }
    .ce-tabs .rc-head.rc-open, .ce-accordeon .rc-head.rc-open{
        border:0;
    }
    .slider-btn::before{
        content:'';
        display:block;
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background-color:rgb(250,70,22);
        z-index: -1;
        transform:skew(42deg);
        margin-right:-100%;
    }
    .slider-btn{
        z-index:1;
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        width:33%;
        display:flex;
        justify-content: right;
        align-items: center;
        padding-left:2.5rem;
        color:rgb(255,255,255);
        font-weight:bold;
        text-align: right;
        padding: 1.25rem;
    }
    .slider-btn::after{
        display:inline-block;
        content:'\f0da';
        font-family: FontAwesome;
        margin-left:0.5rem;
        padding-top:0.25rem;
    }
    .ce-grid-slider .ce-teaserlink-outer .ce-bodytext p{
        max-width:66%;
    }
    .mfp-content{
        border:0;
    }
    .mfp-content figcaption,.mfp-content figcaption p{
        background:none;
        color:rgb(255,255,255);
    }
    .ce-grid-20 > .ce-col{
        float:left;
        width:50%;
    }
    .ce-grid-20 > .ce-col:nth-child(3){
        clear:both;
    }
    .ce-border .ce-media-image img{
        border:1px solid rgb(220,220,220);
    }

    .page-stage .slick-pause {
        display: none;
    }
    
}

@media all and (min-width: 30em) {    

    .ce-carousel{
        margin:0 -1.25rem 1.563rem;
    }
    .ce-type-div{
        margin:0 -1.25rem 1.563rem;
    }
    .werbelink{
        padding:2.5rem 1.25rem;

    }
    .ce-frame-teaser-container::before{
        height:2.5rem;
        margin:-2.5rem -1.25rem 0;
    }
    .ce-frame-teaser-container > div::before{
        margin:0 -1.25rem;
    }
    .ce-grid-20 > .ce-col{
        width:33%;
    }
    .ce-grid-20 > .ce-col:nth-child(3){
        clear:none;
    }
    .ce-grid-20 > .ce-col:nth-child(4){
        clear:both;
    }
    .ce-teaserlink-outer:hover .ce-layout-box-inner .ce-header,
    .ce-teaserlink-outer:hover .ce-layout-box-inner .ce-header a{
        color:rgb(250,70,22);
    }
    .rc-tab-headings li button:hover > * {
        color:rgb(250,70,22);
    }
}

@media all and (min-width: 47.5em), print {

    .ce-div {
        position: relative;
        overflow: hidden; 
        height:1.875rem;
    }

    .ce-media-image a::before {
        right: 0.625rem;
        bottom: 0.625rem;
    }

    /* news teaser */
    .news-list-teaser {
        margin: 0 -0.625rem;
    }
    .news-list-item-teaser {
        width: 50%;
        float: left;
        padding: 0 0.625rem;
    }
    .news-list-teaser .news-list-item-teaser:nth-child(2n+1) {
        clear: left;
    }

    .ce-layout-box .ce-layout-box-inner .ce-header h2::before{
        display:none;
    }

    .ce-carousel .slick-track > div{
        padding: 0 0.625rem;
    }
    .rc-tab-panel{
        margin:0 -1.25rem;
        padding:1.25rem 1.25rem 0;
        border:none;
    }
    .rc-tab-headings{
        margin:0 -1.25rem;
        padding:0 1.25rem;
        position: relative;
    }
    .rc-tab-headings::before{
        display:block;
        content:'';
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background:linear-gradient(to top,rgba(0,90,112,0.1), rgba(0,90,112,0));
    }
    .rc-tab-headings li.rc-open button{
        color:rgb(250,70,22);
        z-index:10;
        box-shadow:0 0 1rem rgba(0,90,112,0.1);
        background-color: rgb(255,255,255);
    }
    .rc-tab-headings li.rc-open button::after{
        display:block;
        content:'';
        position: absolute;
        top:100%;
        left:0;
        bottom:0;
        right:0;
        margin-bottom: -1rem;
        background-color: rgb(255,255,255);
    }
    .rc-tab-headings button{
        opacity: 1;
        font-weight:bold;
        padding:2.5rem 1.25vw;
        padding:2.5rem 1.4vw;
        border:none;
        position: relative;
    }

    .rc-tab-headings button{
        font-size:1rem;
    }
    .ce-layout-box .ce-layout-box-inner{

        -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0.75em 100%,0 calc(100% - 0.75em),0 0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 3em 100%,0 calc(100% - 3em),0 0);
        background-color: rgb(255,255,255);
    }
    .ce-layout-box-outer::before{
        border-radius: 0rem 0rem 0rem 7rem;
        box-shadow: 0 0.5rem 1.5rem 0 rgba(0,90,112,0.1);
    }
    .ce-frame-teaser-image .ce-layout-box-inner::before{
        display:inline-block;
        content:'';
        width:1.625rem;
        height:2.25rem;
        float:left;
        margin-right:1rem;
        background:url("/typo3conf/ext/ti_base_vario/Resources/Public/Images/vario-logo-ohne.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .ce-frame-teaser-image .ce-teaserlink-outer{
        margin-bottom:2rem;
    }
    .ce-layout-box .ce-layout-box-inner{
        padding:5rem 2.5rem;
    }
    .ce-grid-100 .ce-col .ce-frame-teaser-container:nth-last-child(1) .ce-element{
        margin-bottom:2.5rem;
    }
    .ce-grid-20 > .ce-col:nth-child(4){
        clear:none;
    }
    .ce-grid-20 > .ce-col{
        width:20%;
    }
}

/* desktop */
@media all and (min-width: 62.5em) {

    .news-list-item + .news-list-item {
        padding-top: 1.5625rem;
    }

    /* news teaser */
    .news-list-teaser {
        margin: 0 -1.25rem;
    }
    .news-list-item-teaser {
        width: 33.3333%;
        float: left;
        padding: 0 1.25rem;
    }
    .news-list-teaser .news-list-item-teaser:nth-child(2n+1) {
        clear: none;
    }
    .news-list-teaser .news-list-item-teaser:nth-child(3n+1) {
        clear: left;
    }
    .page-stage .ce-slider .ce-textpic-inner{
        background:rgb(255,255,255);
        border-radius:0;
        padding:0;
        width:50%;
        margin-left:calc(0rem - 5rem);
        left: 50%;
        position: absolute;
    }
    .page-stage .ce-slider .ce-bodytext{
        padding:1.25rem 1.25rem 1.25rem 2.5rem;        
        position: relative;
    }
    .page-stage .ce-slider .slick-dots{
        margin-bottom:-0.5rem;
        margin-top: 0;
    }
    .ce-slider .ce-teaserlink-outer .ce-textpic-inner::before{
        padding:2.5rem 2.5rem 2.5rem 3rem;
        font-size: 1.875rem;
    }
    .ce-grid-fullwidth-bg{
        margin-bottom:5rem;
        padding-top:5rem;
    }
    .ce-carousel{
        margin:0 -2.5rem 4.063rem;

    }
    .ce-carousel .slick-track > div{
        padding: 0 1.25rem;
    }
    .ce-carousel .slick-arrow.slick-disabled {
        opacity: 0.5;
        cursor: initial;
    }
    .ce-carousel .slick-arrow {
        display: block !important;
        position: absolute;
        color: rgba(0,0,0,0);
        width: 5rem;
        height: 5rem;
        border: 0;
        background: rgb(250,70,22);
        cursor: pointer;
        border-radius:0;
        top: calc(50% - 3.5rem);
        z-index:1;
    }
    .ce-carousel .slick-arrow.slick-prev{
        left: 0;
    }
    .ce-carousel .slick-arrow.slick-next {
        right: 0;
    }
    .ce-carousel .slick-arrow::before {
        content: "\f0d9";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: rgb(255,255,255);
        font-family: FontAwesome;
        font-size:2.5rem;
        font-weight: normal;
        font-style: normal;
    }
    .ce-carousel .slick-arrow.slick-next::before {
        content: "\f0da";
    }
    .ce-carousel .slick-arrow:not(.slick-disabled):hover{
        background-color:rgb(0,90,112);
    }
    .ce-carousel .slick-dots{
        transform: translate(-50%,-140%);
    }
    .ce-type-div{
        margin:0 -2.5rem 3.125rem;
    }

    .ce-nowrap .ce-gallery{
        margin-bottom:1.875rem;
    }
    .ce-element{
        margin-bottom:3rem;
    }

    .rc-tab-panel{
        margin:0 -2.5rem;
        padding:2.5rem 2.5rem 0;
    }
    .rc-tab-headings{
        margin:0 -2.5rem;
        padding:0 2.5rem;
    }
    .ce-frame-teaser-container > div::before{
        margin:0 -2.5rem;
    }
    .ce-frame-teaser-container::before{
        height:5rem;
        margin:-5rem -2.5rem 0;
    }
    .ce-grid-100 .ce-col .ce-frame-teaser-container:nth-last-child(1) .ce-element{
        margin-bottom:5rem;
    }
    .slider-btn{
        width:25%;
    }
    .ce-grid-slider .ce-teaserlink-outer .ce-bodytext p{
        max-width:72%;
    }
    .rc-tab-headings button{
        padding:2.5rem 2.5vw;
    }
}

/* desktop - xlarge */
@media (min-width:82.5em) {

    .ce-slider .ce-bodytext{
        color:rgb(0,90,112);
        font-size:1.875rem;
    }
    .page-stage .ce-slider .ce-bodytext{
        padding:2.5rem 1.25rem 2.5rem 2.5rem;        
        position: relative;
    }

    .news-list-item + .news-list-item {
        padding-top: 2.5rem;
    }
    .ce-carousel{
        margin-left:-10rem;
        margin-right:-10rem;
    }
    .ce-type-div{
        margin:0 -10rem 3.125rem;
    }
    .rc-tab-panel{
        margin: 0px -10rem;
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 5rem 10rem 0px;
        border:none;
    }
    .rc-tab-headings{
        margin:0 -10rem;
        padding:0 10rem;
    }
    .ce-grid-fullwidth{
        margin-left: -10rem;
        margin-right: -10rem;
    }
    .ce-frame-teaser-container > div::before{
        margin:0 -10rem;
    }
    .ce-frame-teaser-container::before{
        height:5rem;
        margin:-5rem -10rem 0;
    }
    .rc-tab-headings button{
        font-size: 1.25rem;
        padding:2.5rem 2.5rem;
    }
}