/*
 * Software by John Liddiard (aka JohntheFish)
 * www.c5magic.co.uk
 *
 * This package contains software copyright and proprietary to John Liddiard
 *
 */

/*
 * Base for the background, shows as a grey if there is no image, or gets masked by the image
 * Image is applied as a style in the view over this
 */
.ccm-block-page-title.dtp-banner{
    position: relative;
    min-height: 30vh;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(27, 47, 69, 0.6);
}
.dtp-banner-60 .ccm-block-page-title.dtp-banner.dtp-has-image,
.dtp-banner-60.ccm-block-page-title.dtp-banner.dtp-has-image{
    min-height: 60vh;
}
.dtp-banner-75 .ccm-block-page-title.dtp-banner.dtp-has-image,
.dtp-banner-75.ccm-block-page-title.dtp-banner.dtp-has-image{
    min-height: 75vh;
}
.dtp-banner-100 .ccm-block-page-title.dtp-banner.dtp-has-image,
.dtp-banner-100.ccm-block-page-title.dtp-banner.dtp-has-image{
    min-height: 100vh;
}

/*
 * A mask color only applied over the optional image
 */
.ccm-block-page-title .dtp-banner-mask-04{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0.4;
    background-color: rgba(27, 47, 69);
}

/*
 * Used within the size maker to force the container to have a size that is big enough for the title
 * The title here is transparent. Gets overridden by the below to add colour in the next layer.
 */
.ccm-block-page-title.dtp-banner .dtp-page-title{
    color: rgba(0, 0, 0, 0);
    padding: 100px 2em 100px 2em;
    margin: 0;
    width:100%;
}

/*
 * Container for the text overlay
 */
.ccm-block-page-title .dtp-banner-text-position{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}


.ccm-block-page-title.dtp-banner .dtp-banner-text-position .dtp-page-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--bs-gray-100);
}

.ccm-block-page-title.dtp-banner .dtp-title-size{
    font-weight: 200;
    font-family: var(--bs-body-font-family);
    font-size:200%;
}