Divi Blog Extras New Layouts - CSS

/* Grid Extended 1 */

@media screen and (min-width: 981px) {    
    .ge1 .et_pb_post_extra.el_dbe_grid_extended .post-content {
        order: 0;
        width: 66% !important;
    }
    
    .ge1 .et_pb_post_extra.el_dbe_grid_extended .post-media {
        width: 34% !important;
    }    
}

/* Grid Extended 2 */

@media screen and (min-width: 981px) {    
    .ge2 .et_pb_post_extra.el_dbe_grid_extended {
        margin-left: 20px;
    }
    
    .ge2 .et_pb_post_extra.el_dbe_grid_extended .post-content {
        order: 3;
        width: 66% !important;
    }
    
    .ge2 .et_pb_post_extra.el_dbe_grid_extended .post-media {
        width: 34% !important;
        margin: -20px 0 -20px -20px;
    }    
}

/* Grid Extended 3 */

@media screen and (min-width: 981px) {    
    .ge3 .grid_extended {
        display: flex;
        flex-wrap: wrap;
    }
    
    .ge3 .et_pb_post_extra.el_dbe_grid_extended {
        width: calc(50% - 10px);
        float: left;
        margin-bottom: 20px;
    }
    
    .ge3 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) {
        margin-left: 20px;
    }
    
    .ge3 .et_pb_post_extra.el_dbe_grid_extended .post-content {
        width: 60% !important;
        padding: 20px !important;
    }
    
    .ge3 .et_pb_post_extra.el_dbe_grid_extended .post-media {
        width: 40% !important;
    }    
}


/* Grid Extended 4 */

@media screen and (min-width: 981px) {    
    .ge4 .grid_extended {
        display: flex;
        flex-wrap: wrap;
    }
    
    .ge4 .et_pb_post_extra.el_dbe_grid_extended {
        width: calc(50% - 20px);
        float: left;
        margin-bottom: 40px;
    }
    
    .ge4 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) {
        margin-left: 40px;
    }
    
    .ge4 .et_pb_post_extra.el_dbe_grid_extended .post-content {
        padding: 20px !important;
    }
    
    .ge4 .et_pb_post_extra.el_dbe_grid_extended:nth-child(4n+3) .post-media {
        order: 0 !important;
    }
    
    .ge4 .et_pb_post_extra.el_dbe_grid_extended:nth-child(4n+4) .post-media {
        order: 1 !important;
    }    
}

/* Grid Extended 5 */

@media screen and (min-width: 981px) {    
    .ge5 .grid_extended {
        display: flex;
        flex-wrap: wrap;
    }
    
    .ge5 .et_pb_post_extra.el_dbe_grid_extended {
        width: calc(50% - 20px);
        float: left;
        margin-bottom: 40px;
    }
    
    .ge5 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) {
        margin-left: 40px;
    }
    
    .ge5 .et_pb_post_extra.el_dbe_grid_extended .post-content {
        padding: 20px !important;
    }
    
    .ge5 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+1) .post-media {
        order: 0 !important;
    }
    
    .ge5 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) .post-media {
        order: 1 !important;
    }    
}

/* Grid Extended 6 */

@media screen and (min-width:981px) {     
	.ge6 .et_pb_post_extra.el_dbe_grid_extended { 
		width: calc(50% - 20px);
		float: left;
		margin-bottom: 40px;
	}

	.ge6 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+2) {
		 margin-left: 40px;
	}

	.ge6 .et_pb_post_extra.el_dbe_grid_extended .post-content { 
		width: 100% !important;
		padding: 30px 0 0 !important;
	}
	
	.ge6 .et_pb_post_extra.el_dbe_grid_extended .post-media { 
		width: 100% !important;
	}

	.ge6 .et_pb_post_extra.el_dbe_grid_extended:nth-child(2n+1) .post-media { 
		order: 0 !important;
	}
}

/* Grid Extended 7 */

.ge7 .et_pb_post_extra .post-content { 
    order: 0;
}

/* Grid Extended 8 */

.ge8 .et_pb_post_extra .post-content { 
    order: 3;
}

/* Box Extened 1 */

.be1 .et_pb_post_extra {
    float: left;
    width: calc(50% - 15px);
    margin-bottom: 30px !important;
}

.be1 .et_pb_post_extra:nth-child(2n+2) {
    margin-left: 30px;
}

.be1 .post-media {
    display: none;
}

.be1 .post-content {
    margin: 0 !important;
    width: 100% !important; 
}

@media screen and (max-width: 980px) {
    .be1 .post-content {
        box-shadow: 0 0 5px 1px rgba(0,0,0,.4);
    }     
}

@media screen and (max-width: 767px){    
    .be1 .et_pb_post_extra {
        width: 100% !important;
    }
    
    .be1 .et_pb_post_extra:nth-child(2n+2) {
        margin-left: 0 !important;
    } 
}

/* Box Extended 2 */

.be2 .post-content {
	width: 25% !important;
}

.be2 .post-media {
	width: calc(75% + 100px) !important;
}

@media screen and (max-width: 980px) {    
    .be2 .post-content{
        box-shadow: 0 0 5px 1px rgba(0,0,0,.4);
        width: 100% !important;
     }
    
    .be2 .post-media {
        margin: 0 auto;
     }    
}

/* Box Extended 3 */

.be3 .post-content {
    background: rgba(255, 255, 255, 0.9);
    width: 80% !important;
}

.be3 .post-media {
	width: calc(20% + 100px) !important;
}

@media screen and (max-width: 980px) {    
    .be3 .post-content {
       box-shadow: 0 0 5px 1px rgba(0,0,0,.4);
       z-index: 999;
     }    
}

/* Box Extended 4 */

.be4 .post-content{
    box-shadow: none !important;
    order: 1 !important;
    width: 80% !important;
    -webkit-box-shadow: none  !important;
}

 .be4 .post-media {
    width: calc(20% + 100px) !important;
}

@media screen and (max-width:980px) {    
    .be4 .post-content,
    .be4 .post-media {
        margin: 0 !important;
        width: 100% !important;
    }
}

/* Box Extended 5 */

.be5 .post-content{
    box-shadow: none !important;
    order: 0 !important;
    width: 80% !important;
    -webkit-box-shadow: none  !important;
}

.be5 .post-media {
    width: calc(20% + 100px) !important;
}

@media screen and (max-width:980px) {    
    .be5 .post-content,
    .be5 .post-media {
        margin: 0 !important;
        width: 100% !important;
    }
}

/* Box Extended 6 */

@media screen and (min-width: 981px) {     
    .be6 .et_pb_post_extra .post-media { 
        order: 1;
    } 
    
    .be6 .et_pb_post_extra.el_dbe_box_extended .post-content { 
        margin: 50px -100px 50px 0 !important;
    }    
}

/* Box Extended 7 */

@media screen and (min-width: 981px) {    
    .be7 .et_pb_post_extra.el_dbe_box_extended .post-content { 
        order: 1 !important;
        margin: 50px 0 50px -100px !important;
    }    
}

/* Block Extended 1 */

.bl1 .post-content {
    box-shadow: 0px 0px 10px 0px;
    border-radius: 10px 0px 10px 0px;
    margin: 0 auto;
    padding: 20px!important;
    position: relative;
    top: -70px;
    width: 85%!important;
}

.bl1 .block_extended .et_pb_post_extra {
    border-radius: 0px;
    border: 0px;
    box-shadow: 0px 0px 0px 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.bl1 .el-read-more-btn a.et_pb_button,
.bl2 .el-read-more-btn a.et_pb_button,
.bl3 .el-read-more-btn a.et_pb_button{
    border-radius: 0px 10px 0px 10px !important;
}

.bl1 h2.entry-title {
    min-height: 100px;
}

.bl1 .post-media {
    border-radius: 0px 10px 0px 10px;
}

/* Block Extended 2 */

.bl2 .post-content {
    min-height: 240px;
}

/* Block Extended 3 */

.bl3 .et_pb_post,
.bl3 .block_extended .et_pb_post_extra {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.bl3 .post-content {
    min-height: 210px;
    padding: 20px!important;
    box-shadow: 0px 0px 10px 0px;
}

.bl3 h2.entry-title {
    background-color: rgba(255, 255, 255, 0.94);
    padding: 30px!important;
    min-height: 150px;
    border-radius: 10px 0px 10px 0px;
}

@media screen and (max-width: 767px) {    
    .bl3 .et_pb_post,
    .bl3 .block_extended .et_pb_post_extra {
        margin-bottom: 30px;
    }    
}

/* Block Extended 4 */

@media screen and (min-width: 981px) {     
    .bl4 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+1) { 
        width: 60% !important;
        margin-right: 3.5% !important;
    }  

    .bl4 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+2) { 
        width: 36.5% !important;
        margin-right: 0 !important;
    }           
}

/* Block Extended 5 */

@media screen and (min-width: 981px) {     
    .bl5 .et_pb_post_extra.el_dbe_block_extended {
        width: 48.25% !important;
    } 
    
    .bl5 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+1) { 
        margin-right: 3.5% !important;
    } 
    
    .bl5 .et_pb_post_extra.el_dbe_block_extended:nth-child(2n+2) { 
        margin-right: 0 !important;
    }    
}

/* Block Extended 6 */

@media screen and (min-width: 981px) {     
    .bl6 .et_pb_post_extra.el_dbe_block_extended { 
    	width: 23.5% !important;
    	margin-right: 2% !important;
    } 
    
    .bl6 .et_pb_post_extra.el_dbe_block_extended:nth-child(4n+4) {
    	margin-right: 0 !important;
    }
    
    .bl6 .et_pb_post_extra.el_dbe_block_extended .post-media-container,
    .bl6 .et_pb_post_extra.el_dbe_block_extended .post-media { 
    	height: 150px;
    }
}

/* Block Extended 7 */

@media screen and (min-width: 981px) {    
    .bl7 .et_pb_post_extra.el_dbe_block_extended { 
        width: 15% !important;
        margin-right: 2% !important;
        padding-bottom: 0 !important;
    } 
    
    .bl7 .et_pb_post_extra.el_dbe_block_extended:nth-child(6n+6) {
    	margin-right: 0 !important;
    }
    
    .bl7 .et_pb_post_extra.el_dbe_block_extended .post-media-container,
    .bl7 .et_pb_post_extra.el_dbe_block_extended .post-media { 
    	height: 100px;
    }
    
    .bl7 .et_pb_post_extra.el_dbe_block_extended .post-content { 
        padding: 10px !important;
    }
}

/* Block Extended 8 */

.bl8 .et_pb_post_extra.el_dbe_block_extended { 
	display: flex;
	align-items: center;
}

.bl8 .et_pb_post_extra.el_dbe_block_extended.image-background .post-media:before { 
	background: rgba(255,255,255,0.5);
}

.bl8 .et_pb_post_extra.el_dbe_block_extended.image-background:hover .post-media:before { 
	background: rgba(255,255,255,0.2);
}

.bl8 .et_pb_post_extra.el_dbe_block_extended.image-background .post-content { 
	padding: 70px 30px;
}

.bl8 .et_pb_post_extra.el_dbe_block_extended { 
	padding-bottom: 0;
}

/* Block Extended 9 */

.bl9 .et_pb_post_extra.el_dbe_block_extended { 
    width: 50% !important;
    margin-left: 25%;
    margin-right: 0 !important;
}

/* Block Extended 10 */

.bl10 .et_pb_post_extra.el_dbe_block_extended { 
	margin-right: 0 !important;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
}

@media screen and (min-width: 767px) {    
    .bl10 .et_pb_post_extra.el_dbe_block_extended { 
    	width: 50% !important;
    }    
}

/* Full Width 1 */

.fw1 .post-media {
    width: 100px !important;
}

.fw1 .post-content {
	width: calc(100% - 220px) !important;
}

@media screen and (max-width:980px) {    
    .fw1 .post-content {
        margin: 0 !important;
        width: 100% !important;
    }
    
    .fw1 .post-media {
       width: calc(100% - 80px) !important;
    }    
}

@media screen and (max-width:767px) {    
    .fw1 .post-content {
        margin-left: 0 !important;
    } 
}

/* Full Width 2 */

.fw2 .post-media {
    width: 100px !important;
}

.fw2 .post-content {
    width: calc(100% - 120px) !important;
}

@media screen and (max-width: 767px) {    
    .fw2 .post-content {
        width: 100% !important;
     }    
}

/* Full Width 3 */

.fw3 .post-media {
     width: 100px !important;
}

.fw3 .post-content {
    width: calc(100% - 220px) !important;
    order: 0 !important;
}

@media screen and (max-width:980px) {    
    .fw3 .post-media {
       width: calc(100% - 80px) !important;
    }
    
    .fw3 .post-content {
        width: 100% !important;
        order: 1 !important;
    }    
}

/* Full Width 4 */

.fw4 .post-media {
    width: 300px !important;
}

.fw4 .post-content {
	width: calc(100% - 320px) !important;
}

@media screen and (max-width:980px) {    
    .fw4 .post-content {
        margin: 0 !important;
        width: 100% !important;
    }    
}

/* Full Width 6 */

@media screen and (min-width: 981px) {
    .fw6 .et_pb_post_extra.el_dbe_full_width .post-content {
        width: calc(100% - 100px) !important;
        padding: 0 !important;
        margin-left: 100px !important;
        margin-top: 20px;
    }
    
    .fw6 .et_pb_post_extra.el_dbe_full_width .post-media {
        width: calc(100% - 100px) !important;
        margin-right: 0 !important;
    }
}

/* Full Width 7 */

@media screen and (min-width: 981px) {    
    .fw7 .full_width {
        display: flex;
        flex-wrap: wrap;
    }
    
    .fw7 .et_pb_post_extra.el_dbe_full_width {
        width: calc(50% - 10px) !important;
        float: left;
        margin-bottom: 20px;
        border-bottom: none;
        padding: 30px !important;
    }
    
    .fw7 .et_pb_post_extra.el_dbe_full_width:nth-child(2n+2) {
        margin-left: 20px;
    }

    .fw7 .et_pb_post_extra.el_dbe_full_width .post-content {
        width: calc(100% - 100px) !important;
        padding: 0 !important;
        margin-left: 100px !important;
        margin-top: 20px;
    }
    
    .fw7 .et_pb_post_extra.el_dbe_full_width .post-media {
        width: calc(100% - 100px) !important;
        margin-right: 0 !important;
    }
}

/* Full Width 8 */

@media screen and (min-width: 981px) {    
    .fw8 .full_width {
        display: flex;
        flex-wrap: wrap;
    }
    
    .fw8 .et_pb_post_extra.el_dbe_full_width {
        float: left;
        margin-bottom: 20px;
        border-bottom: none;
        padding: 30px !important;
    }
    
    .fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+2),
    .fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+3) {
        width: calc(50% - 10px) !important;
    }
    
    .fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+3) {
        margin-left: 20px;
    }

    .fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+2) .post-content,
    .fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+3) .post-content {
        width: calc(100% - 100px) !important;
        padding: 0 !important;
        margin-left: 100px !important;
        margin-top: 20px;
    }
    
    .fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+2) .post-media,
    .fw8 .et_pb_post_extra.el_dbe_full_width:nth-child(3n+3) .post-media {
        width: calc(100% - 100px) !important;
        margin-right: 0 !important;
    }
}

/* Full Width 9 */

@media screen and (min-width: 981px) {    
    .fw9 .full_width {
        display: flex;
        flex-wrap: wrap;
    }
    
    .fw9 .et_pb_post_extra.el_dbe_full_width {
        float: left;
        margin-bottom: 20px;
        border-bottom: none;
        padding: 30px !important;
    }
    
    .fw9 .et_pb_post_extra.el_dbe_full_width {
        width: calc(50% - 10px) !important;
    }
    
    .fw9 .et_pb_post_extra.el_dbe_full_width:nth-child(2n+2) {
        margin-left: 20px;
    }
}

/* Full Width Background 1 */

@media screen and (min-width: 981px) {
    .fwb1 .et_pb_post_extra.el_dbe_full_width_background .post-content {
        width: 55%;
        float: none !important;
        margin: 0 auto;
    }
}

/* Full Width Background 2 */

.fwb2 .el_dbe_full_width_background {
    width: calc((100% - 30px)/2);
    float: left;
    margin-bottom: 30px !important;
}

.fwb2 .full_width_background{
    display: flex;
    flex-wrap: wrap;
}

.fwb2 .el_dbe_full_width_background:nth-child(2n+2) {
	margin-left: 30px;
}

@media sccreen and (max-width: 480px) {    
    .fwb2 .el_dbe_full_width_background {
        width: 100%;
    }

    .fwb2 .el_dbe_full_width_background:nth-child(2n+2) {
        margin-left: 0 !important;
    }     
}

/* Full Width Background 3 */

.fwb3 .el_dbe_full_width_background {
    width: calc((100% - 30px)/2);
    float: left;
    margin-bottom: 30px !important;
}

.fwb3 .full_width_background{
    display: flex;
    flex-wrap: wrap;
}

.fwb3 .el_dbe_full_width_background:nth-child(2n+2) {
	margin-left: 30px;
}

.fwb3 .post-content {
    float: left !important;  
}

@media sccreen and (max-width: 480px) {    
    .fwb3 .el_dbe_full_width_background {
        width: 100%;
    }

    .fwb3 .el_dbe_full_width_background:nth-child(2n+2) {
        margin-left: 0 !important;
    }     
}

/* Full Width Background 4 */

.fwb4 .el_dbe_full_width_background {
    width: calc((100% - 90px)/4);
    float: left;
    margin-bottom: 30px !important;
}

.fwb4 .full_width_background{
    display: flex;
    flex-wrap: wrap;
}

.fwb4 .el_dbe_full_width_background {
	margin-left: 30px;
}

.fwb4 .el_dbe_full_width_background:nth-child(4n+1) {
	margin-left: 0;
}

.fwb4 .post-content {
    float: left !important;  
    width: 100% !important;
}

@media screen and (max-width: 980px) {
    .fwb4 .el_dbe_full_width_background:nth-child(4n+1) {
        margin-left: 30px;
    }
    
    .fwb4 .el_dbe_full_width_background {
        width: calc((100% - 100px)/3);
    } 
}

@media screen and (max-width: 767px) {    
    .fwb4 .el_dbe_full_width_background {
        width: calc((100% - 70px)/2);
    } 
}

@media sccreen and (max-width: 480px) {    
    .fwb4 .el_dbe_full_width_background {
        width: 100%;
    }

    .fwb4 .el_dbe_full_width_background {
        margin-left: 0 !important;
    }     
}

/* Full Width Background 5 */

@media screen and (min-width: 981px) {    
    .fwb5 .full_width_background {
        display: flex;
        flex-wrap: wrap;
    }
    
    .fwb5 .et_pb_post_extra.el_dbe_full_width_background {
        width: calc(50% - 15px);
        float: left;
        margin-bottom: 30px;
    }
    
    .fwb5 .et_pb_post_extra.el_dbe_full_width_background:nth-child(2n+2) {
        margin-left: 30px;
    }

    .fwb5 .et_pb_post_extra.el_dbe_full_width_background .post-content {
        width: 100% !important;
        height: 100%;
    }
}

@media sccreen and (max-width: 480px) {    
   .fwb5 .el_dbe_full_width_background {
        width: 100%;
    }     
}

/* Full Width Background 6 */

@media screen and (min-width: 981px) {    
    .fwb6 .full_width_background {
        display: flex;
        flex-wrap: wrap;
    }
    
    .fwb6 .et_pb_post_extra.el_dbe_full_width_background {
        width: calc(33.33% - 20px);
        float: left;
        margin-right: 30px;
        margin-bottom: 30px;
    }
    
    .fwb6 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+3) {
        margin-right: 0;
    }

    .fwb6 .et_pb_post_extra.el_dbe_full_width_background .post-content {
        width: 100% !important;
        height: 100%;
    }
}

/* Full Width Background 7 */

@media screen and (min-width: 981px) {    
    .fwb7 .full_width_background {
        display: flex;
        flex-wrap: wrap;
    }
    
    .fwb7 .et_pb_post_extra.el_dbe_full_width_background {
        margin-bottom: 20px;
    }
    
    .fwb7 .et_pb_post_extra.el_dbe_full_width_background .post-content {
        width: 100% !important;
        height: 100%;
    }
    
    .fwb7 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+1) {
        width: 100%;
    }
    
    .fwb7 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+2),
    .fwb7 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+3) {
        width: calc(50% - 10px);
        float: left;
    }
    
    .fwb7 .et_pb_post_extra.el_dbe_full_width_background:nth-child(3n+3) {
        margin-left: 20px;
    }
}

/* Full Width Background 8 */

@media screen and (min-width: 981px) {    
    .fwb8 .full_width_background {
        display: flex;
        flex-wrap: wrap;
    }
    
    .fwb8 .et_pb_post_extra.el_dbe_full_width_background {
        float: left;
        margin-bottom: 20px;
    }
    
    .fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(4n+1),
    .fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(4n+4) {
        width: 65%;
    }
    
    .fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(4n+2),
    .fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(4n+3) {
        width: calc(35% - 20px)
    }
    
    
    .fwb8 .et_pb_post_extra.el_dbe_full_width_background:nth-child(2n+2) {
        margin-left: 20px;
    }

    .fwb8 .et_pb_post_extra.el_dbe_full_width_background .post-content {
        width: 100% !important;
        height: 100%;
    }
}

/* Full Width Background Custom Layout 9 */

.fwb9s .fwb9r {
    max-width: 100% !important;
}

.fwb9s .fwb9r .et_pb_post_extra {
    height: 100vh;
}

.fwb9 .post-content {
    background: hsl(0, 0%, 100%) !important;
    float: left !important;
    padding: 30px !important;
    width: 40% !important;
}

.fwb9 .post-meta:after {
    background: none !important;
}

.fwb9 .post-media {
    background-attachment: fixed;
    background-position: center;			
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 980px) {    
    .fwb9 .post-content {
        margin: 0 !important;
        width: 100% !important;
    }    
}

/* Full Width Background 10 */

.fwb10 .el_dbe_full_width_background {
    width: 25%;
    float: left;
    margin-bottom: 0;
}

.fwb10 .full_width_background{
    display: flex;
    flex-wrap: wrap;
}

.fwb10 .el_dbe_full_width_background:nth-child(5n+1) {
		margin-left: 0;
}

.fwb10 .post-content {
    float: left !important;  
    width: 100% !important;
}

@media screen and (max-width: 767px) {    
    .fwb10 .el_dbe_full_width_background {
        width: 50%;
    }  
}