/*image-caption.css (C) redesign-berlin.de 2022*/

/*delay
------------------------*/
.cc-pagemode-default .image_caption .cc-m-hgrid-column {
    opacity: 0;
    transition: all 0.025s ease;
}


.image_caption:hover .altCaption {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.35);
    height: 100%;

    text-align: center;
    font-size: 24px;
    line-height: 22px;
    color: transparent;
    z-index: 0;
}

@media(max-width:767px) {
    .image_caption {
        max-width: 250px;
        margin: auto;
    }
}

[class*="captionContent-"] {
    position: absolute;
    transition: all 1.5s ease-in;
    margin: 0;
    padding: 0;
    top: 0;
}


.mycaption h1,
.mycaption h2 {
    font-size: calc(2.5 * (1vw + 1vh - 1vmin));
}

@media(min-width:1180px) {

    .mycaption h1,
    .mycaption h2 {
        font-size: 35px;
    }

}

.mycaption h1,
.mycaption h2,
.mycaption p,
.mycaption li,
.mycaption td {
    color: #fff;
    padding: 0;
    margin: 0;

}

.mycaption p,
.mycaption li,
.mycaption td {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
}


/*Buttons
--------------------------------------------------*/

.mycaption [class*='j-calltoaction-link-style'] {
    /* background-color: transparent !important; */
    color: #fff !important;
    border-color: #fff !important;
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    max-width: 200px;
    width: 200px;
    min-width: 0;
    margin: 0;
}


.mycaption [class*='j-calltoaction-link-style']:hover {
    background-color: rgba(33, 33, 33, .6) !important;
    border-color: rgba(33, 33, 33, 1) !important;
    color: #fff !important;
}




@media (min-width:768px) and (max-width:1023px) {

    /*
    .mycaption .cc-m-spacer {
        min-height: 5px !important;
        height: 5px !important;
    }
    */

    .mycaption h2 {
        font-size: calc(2.1 * (1vw + 1vh - 1vmin)) !important;
    }


    .mycaption p,
    .mycaption li,
    .mycaption td {
        font-size: calc(1.2 * (1vw + 1vh - 1vmin)) !important;
        font-weight: normal !important;
        font-style: normal !important;
    }

    .mycaption a[class*='j-calltoaction-link-style'] {
        transform: scale(0.75);
        transform-origin: top center
    }

}



@media (max-width:767px) {

    .mycaption h2 {
        font-size: calc(2.5 * (1vw + 1vh - 1vmin)) !important;
    }

    .mycaption p,
    .mycaption li,
    .mycaption td {
        font-size: 12px;
        font-weight: normal !important;
        font-style: normal !important;
    }

    .mycaption a[class*='j-calltoaction-link-style'] {
        padding: 5px;
        max-width: 200px;
        width: 200px;
        min-width: 0;
        margin: 0;
    }

}