/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Setup for the UNCODE THEME - CSS for the gordon james postloop will need to be changed with a new theme.. haha sorry. */

.gj-posts{
    display: table-caption;
}
.gj-post-media {
    height: 500px;
    display: flex;
}

.gj-post-media .gj-lrg {
    background-size: cover;
    flex: 1;
}

.gj-post-media .gj-sml-container {
    display: flex;
    flex-direction: column;
    flex: 0 0 35%;
}

.gj-post-media .gj-sml {
    background-size: cover;
    flex: 50%;
    margin-left: 20px;
}

.gj-post-media .gj-sml-container > div:first-child{
    margin-bottom: 20px;
}

.gj-post-meta {
    background-color: #fff;
    margin: 20px 0 40px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gj-post-title{
    flex:1;
    flex-direction: column;
    margin: 0;
}
.gj-post-button{
    flex:0 0 35%;
    text-align: right;
}

/*UNCODE SPECIFIC*/

.gj-post h2 a{
    font-weight: 600 !important;
    font-family: Poppins !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:#232323;
    padding-left:20px;
}
.gj-post h2 a:hover{
    color: #373737;
}

.gj-post-button .btn-container{
    margin:0;
}
.gj-post-button .btn-container a{
    color: #232323 !important;
}
.gj-post-button .btn-container a:hover{
    color: #fff !important;
}
.gj-post-media div a{
    display: block;
    width: 100%;
    height: 100%;
}

/* Paginate */
.gj-pagination {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 40px;
}

.gj-pagination span,
.gj-pagination a {
    display: inline-block;
    padding: 2px 10px;
}
.gj-pagination a {
    background-color: #ebebeb;
    color: #8b6f42;
}
.gj-pagination a:hover {
    background-color: #8b6f42;
    color: #fff;
}
.gj-pagination span.page-num {
    margin-right: 10px;
    padding: 0;
}
.gj-pagination span.dots {
    padding: 0;
    color: gainsboro;
}
.gj-pagination span.current {
    background-color: #8b6f42;
    color: #fff;
}

/* Media Queries for Responsive Design */

@media (max-width: 768px){

    .gj-post-media .gj-sml-container{
        display:none;

    }
    .gj-post-meta{
        display:block;
        text-align: center;
    }
    .gj-post-button{
        display:none;
    }
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.gj-sml-container .embed-container {

    position: absolute;
    width: 125%;
    max-width: 125%;
    height: 150%;
    top: -25%;

}
.gj-featured.gj-sml {

    position: relative;
    overflow: hidden;

}