/*
 * NEW ARCHIVE
 */

/* Search field */

body, .blog, .infinite-scroll, .archive, .search {
    font-family: Caslon, serif;
}
.archive-nav {
    margin-bottom: 30px;
}

.search-form input {
    font-size: 15px;
    border: 2px solid #ccc !important;
    border-radius: 0px;
    padding-left: 15px;
    width: 250px;
    height: auto;
    max-width: 100%;
    font-family: inherit;
    -webkit-font-smoothing: inherit;
    background: transparent;
    padding: 0.625rem 0.2rem;
}

.search-form .search-submit {
    border: none !important;
}

.search-search-box label {
    display: inline-block;
}

.search-search-box {
    text-align: center;
    margin: 2rem 0 3rem;
}

.search-submit {
    height: 43px;
    width: 130px !important;
    margin-left: 8px;
    background-color: #4dbdeb !important;
    font-size: 16px;
    border-radius: 0px;
    border: none !important;
    color: white !important;
}

/* End search field */

h1.entry-title {
    font-size: 4rem;
    text-align: center;
    margin: 1rem 0 2rem;
}

.search-header h1.entry-title {
    margin: 1rem 0 0;
}

.search-header h2 {
    text-align: center;
}

.archives .entry-header h1,
.entry-content,
.content-area {
    max-width: 1120px;
    margin: 0 auto;
}

.filters {
    margin: 15px 0;
    font-size: 19px;
    text-align: right;
    float: right;
}

.list-post {
    font-size: 19px;
}

.list-post:hover .post-cover {
    opacity: 0.6;
}

.list-posts {
    margin: 0px;
    padding: 0px;
    font-size: 19px;
}

.list-post a {
    color: white;
}

.list-post h2, .list-post h2 a {
    margin-bottom: 1.5625rem;
    color: white;
}

.list-post p {
    margin-bottom: 1rem;
} 

.list-post dl {
    margin-bottom: 2rem;
}

.list-post .meta-avatar, .list-post .meta-data, .list-post .meta-desc {
    float: left;
    clear: none;
    width: 25%;
}

.list-post .meta-avatar, .list-post .meta-data, .list-post .meta-desc, .list-post .post-preview {
    list-style-type: none;
    box-sizing: border-box;
    padding: 0px 0px 0px 2.5rem;
    position:relative;
}

.list-post .post-preview {
    float: right;
    width: 75%;
    padding-right: 30px;
}

/*Can remove this one if I don't go with the new design where title comes before meta on mobile*/
.list-post .post-preview.intro::before {
    margin-bottom: 0;
}

.list-post li, li.list-post{
    list-style-type: none;
    margin: 0.22em auto;
    position: relative;
    background-color: black;
    color: white;
}

.list-post .meta-avatar::before, .list-post .meta-data::before, .list-post .meta-desc::before, .list-post .post-preview::before {
    content: "";
    display: block;
    /*border-top: 1px solid #D3D3D1;*/
    margin-bottom: 2.5rem;
}

.list-post .meta-avatar::after, .list-post .meta-data::after, .list-post .meta-desc::after, .list-post .post-preview::after {
    content: "";
    clear: both;
    display: table;
}


li.list-post::after {
    content: "";
    clear: both;
    display: table;

}

dl dd, dl dt {
    margin: 0;
    font-size: 15px;
}

dl dt {
    margin-top: 18px;
    font-family: Montserrat;
    font-size: 12px;
    color: #BBB;
}
 
dl dd {

}

.meta .avatar, .meta .thumbatar {
    float: none;
    width: auto !important;
    max-width: 68%;
}

.meta .avatar img, .meta .thumbatar img {
    max-width: 150px;
    width: auto !important;
}

.pagination-links {
    text-align: center;
    margin-bottom: 30px;
}

.categories h2 {
    text-align: center;
}

@media only screen and (max-width: 650px) {
    h1.entry-title {
        font-size: 2.5rem;
        text-align: center;
        margin: 1rem 0;
    }

    .archive-nav .search-form {
        float: none;
        width: auto;
        text-align: center;
    }

    .search-form label {
        display: inline-block;
    }

    .search-form input {
        float: none;
        width: 210px;
        padding-left: 10px;
        font-size: 15px;
        padding: 0.5rem 0.15rem;
    }

    .search-submit {
        width: 110px !important;
        font-size: 15px;
    }

    .filters {
        font-size: 16px;
        text-align: center;
        float: none;
    }

    .list-post .meta-avatar::before, .list-post .meta-data::before, .list-post .meta-desc::before, .list-post .post-preview::before {
        content: none;
        display: inline;
        margin-bottom: 0;
    }

    dl dt {
        margin-top: 0;
        float: left;
        clear: left;
        line-height: 2;
        margin-right: 0.4em;
    }

    dl dd {
        float: left;
        font-size: 14px;
    }

    .list-post .meta-data {
        float: none;
        width: 100%;
        padding: 0.1rem 1.2rem 0; /* Change 0.1rem back to 0.8rem f I don't go with test design */
    }

    .list-post .post-preview {
        float: none;
        padding: 1.2rem 1.2rem 0.6rem;    /* Change back to 1.2rem if I don't do the test */
        width: 100%;
    }

    .list-post h2.post-preview {
        padding: 1.4rem 1.2rem 0.6rem;    /* Change back to 1.2rem if I don't do the test */
    }

    .list-post .post-preview.intro {
        padding: 1.4rem 1.2rem 0.7rem;    /* Change back to 1.2rem if I don't do the test */
    }

    .list-post h2 {
        font-size: 110%;
        /* Remove if I don't go with the test design that puts title first on mobile */
        margin-bottom: 0;
    }

    .list-post p {
        font-size: 90%;
    }
}