﻿.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, -webkit-min-content);
    grid-auto-rows: minmax(50px, min-content);
    -moz-column-gap: var(--umb-block-grid--column-gap, 0);
    column-gap: var(--umb-block-grid--column-gap, 0);
    row-gap: var(--umb-block-grid--row-gap, 0);
}

.umb-block-grid__layout-item {
    position: relative;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
}


.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, -webkit-min-content);
    grid-auto-rows: minmax(50px, min-content);
    -moz-column-gap: var(--umb-block-grid--areas-column-gap, 0);
    column-gap: var(--umb-block-grid--areas-column-gap, 0);
    row-gap: var(--umb-block-grid--areas-row-gap, 0);
}

.umb-block-grid__area {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
    grid-row: span var(--umb-block-grid--area-row-span, 1);
}

.homepageBlocks {
}

.homepageBlock {
    margin: 20px 20px 0 20px;
    background: #ffffff;
    text-align: left;
    display: block;
}

.homepageBlockOverlay {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    margin: 20px 20px 0 20px;
    padding: 20px 30px;
    display:none;
    cursor:pointer;
}

.resourceBlocks {
}

.resourceBlock {
    margin: 0px 0px 50px 0px;
    background: #ffffff;
    text-align: left;
    display: block;
    position: relative;
}

.resourceBlockOverlay {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    margin: 0px 0px 0 0px;
    padding: 20px 30px;
    display: none;
    cursor: pointer;
}

.blockImage {
    max-width: 100%;
    margin: 0;
    width: 100%;
}

.blockHeading {
    padding: 20px 30px;
    text-transform: capitalize;
    color: #222E2E;
    font-size: 5.5vw;
}

.blockTitle {
    padding: 10px 10px;
    color: #222E2E;
    font-size: 7.5vw;
}


.blockHtml {
    padding: 0px 0 0px 0;
}


#mainContent .blockLink a {
    color:#000000;
    text-decoration:none;
}


@media (min-width: 576px) {

    .blockTitle {
        padding: 10px 10px;
        color: #222E2E;
        font-size: 3.5vw;
    }
}

    @media (min-width:768px) {


        .blockTitle {
            padding: 10px 10px;
            color: #222E2E;
            font-size: 3.5vw;
        }
    }


    @media (min-width:992px) {


        .blockTitle {
            padding: 10px 10px;
            color: #222E2E;
            font-size: 2.5vw;
        }


        .blockHeading {
            padding: 20px 30px;
            text-transform: capitalize;
            color: #222E2E;
            font-size: 2.5vw;
        }


        .blockHtml {
            padding: 0px 0 0px 0;
        }

    }


    @media (min-width:1024px) {
        .umb-block-grid__layout-item {
            grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
        }

        .umb-block-grid__area {
            grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
        }

        .blockTitle {
            padding: 10px 10px;
            color: #222E2E;
            font-size: 1.5vw;
        }


        .blockHeading {
            padding: 20px 30px;
            text-transform: capitalize;
            color: #222E2E;
            font-size: 1.5vw;
        }
    }
