@import url('bootstrap-grid.min.css');


@media screen and (min-width:260px){

    .cajaBlog{
        display: inline-block;
        width: 100%;
        max-width: 300px;
        text-align: center;
        margin: 5px auto;
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }
    .theImage{
        display: block;
        padding: 5px;
        background-color: #fff;
        border-radius: 10px;
        transition: all 0.25s;
        z-index: 1;
    }

    .theImage img{
        display: block;
        width: 100%;
        height: auto;
        border-radius: 10px;
        transform: scale(1);
        transition: all 0.25s;
    }

    .blogTitle{
        display: block;
        width: 100%;
        background-color: var(--darkbluetwoRgba);
        color: #fff;
        font-size: 1.2em;
        padding: 2px 10px 5px 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: all 0.25s;
        z-index: 5;
    }
    .blogTitle a{
        text-decoration: none;
        color: #fff;
    }
    .blogContentDivs{
        flex: 1;
        margin: 0;
        width: 100%;
        min-width: 30%;
        background: var(--headerBg);
        border-radius: 3px;
        padding: 10px;
        font-size: 1.1em;
    }
    .blogContentDivs img{
        display: block;
        width: 100%;
        height: auto;
        margin: 10px auto;
    }

    .blogContentDivs h1,
    .blogContentDivs h2,
    .blogContentDivs h3,
    .blogContentDivs h4{
        color: var(--lightblue);
        font-family: var(--menuFont);
    }

    .blogContentDivs h1{
        font-size: 40px;

    }
    .blogContentDivs h2{
        padding: 15px 0;
        font-size: 34px;
        color:#0c71c3
    }

    .blogContentDivs h3{
        font-size: 28px;
        color:#0c71c3;
        padding-top:1em;
        padding-bottom:1em
    }

    .blogContentDivs p{
        line-height: 1.3;
        text-align: justify;
        color: var(--darkbluetwo);
    }

    .blogContentDivs a{
        text-decoration: none;
        font-weight: 700;
        font-style: italic;
        color: var(--darkbluetwo);
        font-family: var(--menuFont);
        font-size: 1.1em;
    }

    .blogContentDivs ul,
    .blogContentDivs ol{
        padding-top:1em
    }

    .blogContentDivs ul li,
    .blogContentDivs ol li
    {
        list-style-position: inside;
        font-size: 1.2em;
        line-height: 1.8;
    }

    .blogContentDivs ul li::before{
        content:'';
        display: inline-block;
        margin-left: -10px;
    }

    .blogContentDivs ol li::before{
        content:'';
        display: inline-block;
        margin-left: 5px;
    }
        
    a.btn_eom_blog {
        display: inline-block;
        padding: 5px 20px;
        margin: 10px auto;
        font-size: 2.3em;
        text-transform: uppercase;
        font-family: var(--menuFont);
        font-weight: 400;
        letter-spacing: 2px;
        background: #143c5d;
        color: #fff;
        border-radius: 50px;
    }


}

@media screen and (min-width:680px){
    .cajaBlog{
        display: inline-block;
        width: 100%;
        max-width: 300px;
        text-align: center;
        margin: 10px 30px;
        position: relative;
        overflow: hidden;
    }
}


@media screen and (min-width:1024px){

    .cajaBlog{
        display: inline-block;
        width: 100%;
        max-width: 300px;
        text-align: center;
        margin: 10px 30px;
        position: relative;
        overflow: hidden;
    }
    .theImage{
        display: block;
        transition: all 0.25s;
        z-index: 1;
    }

    .theImage img{
        display: block;
        width: 100%;
        height: auto;
        transform: scale(1);
        transition: all 0.25s;
    }
    .theImage:hover img{
        transform: scale(1.2);
        transition: all 0.25s;
    }
    .theImage:hover .blogTitle{
        background-color: var(--darkbluetwo);
        transition: all 0.25s;
    }
    .blogTitle{
        display: block;
        width: 100%;
        background-color: var(--darkbluetwoRgba);
        color: #fff;
        font-size: 1.2em;
        padding: 2px 10px 5px 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: all 0.25s;
        z-index: 5;
    }
    .blogTitle a{
        text-decoration: none;
        color: #fff;
    }


}