/* what a nightmare...  I'm just creating a new class to handle the layout for all similar grid layouts of posts and adding the rules here.. seems easier than trying to rewrite this dudes code  what a nightmare -cn @integritive */

#home-main{
    margin-right: 2%

}

#home-featured{
    width: 100%;
    background: #fff;
    padding: 50px 50px 25px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

#home-main, #home-featured .teasers{
    float: left;
    width: 49%;
    height: 508px;
    position: relative;
}

#home-main .breaking-news-icon{
    width: auto !important;
    height: auto !important;
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
}

#home-main-image{
    width: 100%;
    height: 400px;
}


#home-main img,.integ-grid img{
    background: #fff; /* Fix for safari black hover */
    object-fit: cover;
    width: 100%;
    height: 100% !important;
    opacity: 1;
}

.integ-grid:hover img,#home-main:hover img{
    opacity: .5;
}

.integ-grid img,#home-main img{
transition: opacity 0.4s ease-in-out;
}


.teasers{
    padding-bottom: 25px;
}

.integ-grid img,.wpp-thumbnail,#home-main img,#home-main .img-txt{

    border-radius: 5px;
}

.integ-grid{
    float: left;
    position: relative;
    height: auto;
    margin: 0 0 1.6%;
    width: 47.5%;
}


.teasers .integ-grid{

    width: 100%;
    margin: 0 0 1.6%;
}


.additional-stories .integ-grid{
    margin: 0 0 1.3%;
}

.additional-stories .integ-grid:nth-child(4){
    margin: 0;
}

/*.category .more-stories .integ-grid,.integ-grid.more-stories-item{
    margin-top: 25px;
}*/

.additional-stories{
    margin: 25px 0 0;
}


.more-stories .integ-grid,
.d1-interactive-posts .integ-grid,.additional-stories .integ-grid{
    height: 170px;
    margin: 0 2% 0 0;
}

.trending .integ-grid {
    margin-bottom: 15px;
}


.story-img{

    width: 30%;
    float: right;

}


.teasers .story-img{

    width: 19%;

}

.img-txt{
    position: absolute;
    bottom: 0;
    padding: 7px 10px;
    box-sizing: border-box;
    background-color: #000;
    width: 100%;
}

.integ-grid.headline-photo .img-txt{
    border-radius: 0 0 5px 5px;
}


#home-main .img-txt,.headline-photo .img-txt{
    position: relative;
    background-color: transparent;
    top: 15px;

}

.list .img-txt{

    position: relative;
    padding: 0 10px;
    box-sizing: border-box;
    background: none;
    width: 69%;
    float: left;
}

.teasers.list .img-txt{
    width: 80%;
}


.img-txt p{
    color: #fff !important;
}

.img-txt p.meta{

    font-size: 14px;

}

.img-txt h1.post-title{
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 21px;
    line-height: 30px;
}

#home-main .img-txt h1.post-title,.headline-photo .img-txt h3.post-title{
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 900;
}


.img-txt h3.post-title{
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 21px;
    line-height: 23px;
}

.img-txt h3.post-title a:hover,#sidebar-top-headlines li a:hover,aside li a:hover, .aside li a:hover, a:hover h1.post-title,#home-main .img-txt h1.post-title a:hover{
    color: #0A66CC;
    text-decoration: underline;
}

.list .img-txt h3.post-title,.list .img-txt p,#home-main .img-txt h1.post-title,#home-main .img-txt p,.headline-photo h3.post-title, .headline-photo .img-txt p{
    color: #313131 !important;
},

.list h3.post-title{

    font-size: 16px;
}

.list .img-txt p.meta a,#home-main .img-txt p.meta a,.integ-list p.meta a{
    color: rgba(43, 113, 56, 1);
}

.list .img-txt p.meta.category a{
    color: rgba(116, 115, 116, 1);
}

.list .img-txt p.meta.category a:hover{
    color: rgba(43, 113, 56, 1);
}

/*#home-featured .teasers .integ-grid .img-txt h1.post-title{

    font-size: 21px;
    line-height: 22px;

}*/



.integ-grid.headline-photo{
    height: auto;
}

.img-txt .excerpt{
    display: none;
    color: #fff;
}

#home-main .img-txt .excerpt{
    display: inline-block;
}

.img-txt .excerpt *{

    font-size: 14px;
    line-height: 20px;

}

#home-main .img-txt .excerpt *{
    font-size: 17px;
}

/*for the bottom border*/

.integ-grid{

  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}

#home-main.integ-grid{
    border-bottom:  none;
}

.teasers .integ-grid{

    padding: 0 0 10px 0;
    box-sizing: border-box;
}

.teasers .integ-grid:last-child{
    border-bottom: none;
    padding: 0;
}

.more-stories .integ-grid,
.d1-interactive-posts .integ-grid,.additional-stories .integ-grid{

    padding: 20px 0 0;
}

.trending .integ-grid{

   /*padding: 0 0 10px 0;*/
   margin-right: 2%;
	 overflow: hidden;
}

.archive #wrap main .post-content{

    border-bottom: none;
}

@media (max-width: 1350px) {

    #home-main{
        margin-right: 20px;
    }

    .img-txt h3.post-title{
        font-size: 20px;
    }


}/**/


@media (max-width: 1089px){

    #home-main{
        margin-right: 15px;
    }

}/**/


@media (max-width: 991px){

    #home-main, #home-featured .teasers{
        height: auto !important;
        width: 100%;

    }

    #home-featured{

        padding: 0;
    }

    #home-main{
        margin-bottom: 25px;

    }

    #home-main.integ-grid{
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
    }

    #home-main-image{
        height: auto;
        width: 95%;
        margin: auto;
    }

    .teasers {
     padding-bottom: 0;
	}

    .integ-grid,.list .integ-grid{
        height: auto !important;
        /*margin: 0 0 25px !important;*/
        width: 100% !important;
        float: none;
    }

    .more-stories .integ-grid {

        padding: 0 0 10px;

    }

    .list .integ-grid{
        clear: both;
        margin: 10px 0;
		padding: 0 0 10px;
        min-height: 100px;
    }

    #wrap .list .row+.row {

        margin: 0;
    }



    #home-featured,.trending, .more-stories, .additional-stories{
        width: 95%;
        margin: auto;
    }

    .headline-photo.integ-grid{
        border: none;
    }


    .row.load-more > .integ-grid:first-child{
        margin: 0;
    }

    #home-main .img-txt h1.post-title{

            font-size: 22px;

    }

    .headline-photo .img-txt h3.post-title,.img-txt h3.post-title{

            font-size: 17px;
    }


   .story-img{

            width: 19%;

    }


}/**/

@media (max-width: 640px){

    #home-main.integ-grid{
        height: auto !important;
    }
}