/*****************Advent Calendar 2017 - 18******************/
/******One Half and Two Quarter Alternating Blog Layout******/
/************************By Divi Soup************************/
/*Position the posts and remove margin*/
.ds-advent-18 .et_pb_post {
position: relative;
float: left;
margin-bottom: 0;
cursor: default;
}
/*Set the widths and floats for the alternating posts on desktop*/
@media all and (min-width: 980px) {
/*Set posts to quarter width*/
.ds-advent-18 .et_pb_post {
width: 25%;
}
@media all and (height: 730px) {
/*Set posts to quarter height*/
.ds-advent-18 .et_pb_post {height: 25%;
}
/*Set every fifth post to half width starting at the first post*/
.ds-advent-18 .et_pb_post:nth-of-type(5n+1) {
width: 50%;
}
.ds-advent-18 .et_pb_post:nth-of-type(5n+1) img {
min-width: 100%;
}
/*Set every tenth post to float right starting at the sixth post*/
.ds-advent-18 .et_pb_post:nth-of-type(10n+6) {
float: right;
}
}
/*Resize posts for smaller screens*/
@media all and (max-width: 980px) {
/*Set all posts to half width*/
.ds-advent-18 .et_pb_post {
width: 50%;
}
}
@media alla and (max-height: 980px) {
/*Set all post to half heghth*/
.ds-advent-18 .et_pb_post {
height:50%;
}
}
@media all and (max-width: 479px) {
/*Set all posts to full width*/
.ds-advent-18 .et_pb_post {
width: 100%;
}
}
@media all and (max-height: 479px) {
/*set all post to full height*/
.ds-advent-18 .et_pb_post {
height: 100%;
}
}
/*Remove image margin*/
.ds-advent-18 .entry-featured-image-url {
margin-bottom: 0;
}
/*Add the gradient overlay*/
.ds-advent-18 .entry-featured-image-url:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0.01)), to(rgba(0, 0, 0, 1)));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%);
}
/*Position the title*/
.ds-advent-18 .entry-title {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 20px 20px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
/*Position the excerpt and read more*/
.ds-advent-18 .post-content {
position: absolute;
z-index: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
bottom: 0;
padding: 20px;
opacity: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
/*For IE11 - Prevent text overflow*/
.ds-advent-18 .post-content p {
display: block;
}
/*Style the read more*/
.ds-advent-18 a.more-link {
display: block;
clear: both;
text-transform: uppercase;
color: #000;
background: #fff;
width: 100px;
text-align: center;
margin-top: 10px;
}
/*Switch content on hover*/
.ds-advent-18 .et_pb_post:hover .entry-title {
opacity: 0;
z-index: 0;
}
.ds-advent-18 .et_pb_post:hover .post-content {
opacity: 1;
z-index: 1;
display: block;
}
/*Limit the excerpt length on smaller screens*/
@media all and (max-width: 1400px) {
.ds-advent-18 .post-content p {
display: block;
max-height: 9em;
overflow: hidden;
}
}
@media all and (max-width: 1280px) {
.ds-advent-18 .post-content p {
max-height: 6em;
}
}
@media all and (max-width: 1080px) {
.ds-advent-18 .post-content p {
max-height: 4.5em;
}
}
@media all and (max-width: 980px) {
.ds-advent-18 .post-content p {
max-height: 100%;
overflow: visible;
}
}
@media all and (max-width: 700px) {
.ds-advent-18 .post-content p {
max-height: 7.5em;
overflow: hidden;
}
}
@media all and (max-width: 479px) {
.ds-advent-18 .post-content p {
max-height: 100%;
overflow: visible;
}
}
/*If you are using pagination*/
.ds-advent-18 .pagination {
padding: 20px;
}
/*****************Advent Calendar 2017 - 18******************/
/***End - One Half and Two Quarter Alternating Blog Layout***/
/************************By Divi Soup************************/