﻿.blogs-list-wrapper {
    display: block;
}

    .blogs-list-wrapper .blogs-list-item .blogs-list-content a {
        text-decoration: none
    }

    .blogs-list-wrapper .blogs-list-item {
        display: block;
    }

        .blogs-list-wrapper .blogs-list-item p {
            font-size: 1em;
            line-height: 1.5em;
        }

        .blogs-list-wrapper .blogs-list-item a {
            display: block;
        }

        .blogs-list-wrapper .blogs-list-item .blog-readmore {
            text-decoration: none;
            font-weight: bold;
            color: #00244d;
            text-transform: uppercase;
        }

        .blogs-list-wrapper .blogs-list-item img {
            width: 100%;
        }

.blogs-list-content span.blog-title {
    display: block;
    margin-top: 15px;
    font-size: 1.25em;
    font-weight: bold;
    color: #00244d;
}

.blogs-detail-description p {
    margin: 10px 0;
    font-size: 1.15em !important;
}

.blog-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 50px 10px;
}

    .blog-tools .blog-sort,
    .blog-tools .blog-category {
        width: 48%
    }

    .blog-tools select {
        width: 100%;
        padding: 10px;
        border: 1px solid gray;
        font-style: italic;
        font-weight: 600;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, gray, gray);
        background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.4em;
        background-size: 5px 5px, 5px 5px, 1px 2em;
        background-repeat: no-repeat;
    }

        .blog-tools select:focus {
            background-image: linear-gradient(45deg, #182d50 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #182d50 50%), linear-gradient(to right, gray, gray);
            background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.4em;
            background-size: 5px 5px, 5px 5px, 1px 2em;
            background-repeat: no-repeat;
            border-color: #182d50;
            outline: 0;
        }

.blog-tool select::-ms-expand {
    display: none;
}

@media (min-width: 48em) {
    .blogs-list-wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

        .blogs-list-wrapper .blogs-list-item {
            width: calc(100% * (1/2) - 20px);
            margin: 10px;
        }

    .blog-tools .blog-sort,
    .blog-tools .blog-category {
        width: 40%
    }
}

@media (min-width: 60em) {
    .blogs-list-wrapper .blogs-list-item {
        width: calc(100% * (1/3) - 40px);
        margin: 10px 20px;
    }

    .blog-tools {
        max-width: 48em;
        margin: 75px auto;
    }
}

@media (min-width: 75em) {
    .blogs-list-wrapper .blogs-list-item {
        width: calc(100% * (1/3) - 60px);
        margin: 10px 30px;
    }
}
