﻿.ctaBlockContainer
{
}

.ctaBlockContainer .ctaBlock
{
    width: 100%;
    float: left;
}

.ctaBlockContainer .ctaBlock .ctaBlockInner
{
    position: relative;
    background-color: #f4f4f4;
    width: 100%;
    height: 75px;
}

.ctaBlockContainer .ctaBlock .ctaBlockInner a
{
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: row;
    height: 100%;
}

.ctaBlockContainer .ctaBlock .ctaBlockInner a .ctaImageBlock
{
    flex: 1 1 36%;
    height: 100%;
}

.ctaBlockContainer .ctaBlock .ctaBlockInner a .ctaTextBlock
{
    flex: 1 1 64%;
    height: 100%;
    padding-left: 15px;
}

@media (min-width: 768px)
{
    .ctaBlockContainer .ctaBlock
    {
        width: 49%;
        width: calc(.50 * (100% - 90px));
    }

    .ctaBlockContainer .ctaBlock .ctaBlockInner
    {
        margin-right: 30px;
    }

    .ctaBlockContainer .ctaBlock .ctaBlockInner > :nth-child(2n)
    {
        margin-right: 0;
    }
}

@media (min-width: 992px)
{
    .ctaBlockContainer .ctaBlock .ctaBlockInner a .ctaImageBlock
    {
        flex: 1 1 25%;
    }

    .ctaBlockContainer .ctaBlock .ctaBlockInner a .ctaTextBlock
    {
        flex: 1 1 75%;
    }
}

@media (min-width: 1200px)
{
    .ctaBlockContainer .ctaBlock
    {
        width: 23%;
        width: calc(.25 * (100% - 90px));
    }

    .ctaBlockContainer .ctaBlock .ctaBlockInner
    {
        margin-right: 30px;
    }

    .ctaBlockContainer .ctaBlock .ctaBlockInner > :last-child
    {
        margin-right: 0;
    }
    
    .ctaBlockContainer .ctaBlock .ctaBlockInner a .ctaImageBlock
    {
        flex: 1 1 36%;
    }

    .ctaBlockContainer .ctaBlock .ctaBlockInner a .ctaTextBlock
    {
        flex: 1 1 64%;
    }
}

.ctaBlockContainer .ctaBlock .ctaBlockInner a .ctaTextBlock .title
{
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 2px;
    text-decoration: none;
}

.ctaBlockContainer .ctaBlock .ctaBlockInner a .ctaTextBlock .text
{
    font-size: 13px;
    text-decoration: none;
}

.ctaBlockContainer .ctaBlock .ctaBlockInner a:hover
{
    color: white;
    text-decoration: none;
    background-color: #393939;
}

.ctaBlockContainer .ctaBlock .ctaBlockInner a:hover .ctaTextBlock .title
{
    color: white;
    text-decoration: none;
}

.ctaBlockContainer .ctaBlock .ctaBlockInner a:hover .ctaTextBlock .text
{
    color: white;
    text-decoration: none;
}
