﻿.tileWidgetWrapper
{
    
}





.tileWidgetWrapper .tileWrapper
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.tileWidgetWrapper .tileWrapper.centered
{
    justify-content: center;
}

.tileWidgetWrapper .tileAnchor
{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 183px;
    width: calc(25% - 20px);
    display: flex;
    flex-direction: column;
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    justify-content: center;
    text-align: center;
    padding: 10px;
}



.tileWidgetWrapper .tileWrapper.centered .tileAnchor:last-child
{
    margin-right:0;
}

@media (min-width: 1385px)
{
    .tileWidgetWrapper .tileWrapper.centered .tileAnchor:nth-child(4n)
    {
        margin-right: 0;
    }
}


@media (max-width: 1384px) and (min-width: 986px)
{
    .tileWidgetWrapper .tileAnchor
    {
        width: calc(33% - 20px);
    }

    .tileWidgetWrapper .tileWrapper.centered .tileAnchor:nth-child(3n)
    {
        margin-right: 0;
    }
}

@media (max-width: 985px) and (min-width: 651px)
{
    .tileWidgetWrapper .tileAnchor
    {
        width: calc(50% - 20px);
    }

    .tileWidgetWrapper .tileWrapper.centered .tileAnchor:nth-child(2n)
    {
        margin-right: 0;
    }
}

@media (max-width: 650px)
{
    .tileWidgetWrapper .tileAnchor
    {
        width: 100%;
        margin-right:0;
    }
}




.tileWidgetWrapper .tileAnchor.large
{
    height: 400px;
    width: 400px;
    border-bottom: solid 1px rgba(128, 128, 128, .7);
}

.tileWidgetWrapper .tileAnchor.large
{
    border-right: solid 1px rgba(128, 128, 128, .7);
}



.tileWidgetWrapper .tileAnchor.continuous
{
    margin-right: 0;
    margin-bottom: 0;
    flex: calc(33.33%);
}


.tileWidgetWrapper .tileAnchor::before
{
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    /*background: linear-gradient(257deg, #0083bb, #002957);*/
    background: #808080;
    opacity: .60;
    z-index: 10;
}

.tileWidgetWrapper .tileAnchor:hover::before
{
    background: linear-gradient(180deg, #0083bb, #002957);
}

.tileWidgetWrapper .tileTitle,
.tileWidgetWrapper .tileAnchor:hover,
.tileWidgetWrapper .tileText
{
    z-index: 20;
    color: #fff;
    text-decoration: none;
}

.tileWidgetWrapper .tileTitle
{
    font-family: Montserrat-Medium;
    font-size: 22px;
}

.tileWidgetWrapper .tileText,
.tileWidgetWrapper .tileCallToAction
{
    font-size: 14px;
    margin-top: 5px;
    height: 0%;
    overflow: hidden;
    transition: all ease-in .5s;
}



.tileWidgetWrapper .tileCallToAction
{
    color: #c39428;
    font-weight: bold;
}


.tileWidgetWrapper .tileCallToAction::after
{
    content: ">>";
    font-weight: bold;
}


.tileWidgetWrapper .tileAnchor:hover .tileText,
.tileWidgetWrapper .tileAnchor:hover .tileCallToAction
{
    height: 33%;
}
