/*
 Theme Name:     Divi Child - Analogue Travelogue
 Theme URI:      https://www.analoguetravelogue.com
 Description:    Divi Child - Analogue Travelogue
 Author:         Darcy
 Author URI:     https://www.darcyperkins.com.au
 Template:       Divi
 Version:        1.0.0
*/
 
@import url("../Divi/style.css");
 
/* =Theme customization starts here
------------------------------------------------------- */

/* --- 2 COLUMM --- */

.ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(2, 48.5%);
    grid-column-gap: 3%;
}

/*--------------------------------------------------------------------*/
/*-----Two, Three and Four Column Square Blog Layout by Divi Soup-----*/
/*--------------------------------------------------------------------*/
/***Global styles required for all layouts***/
/*This scales the images keeping the aspect ratio. NOTE: Object-fit is not supported in IE and Edge so if you want to use the standard image size remove this section*/
.ds-grid-blog a img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    margin:0;
    margin-bottom: 80px;
}

/*This section hides the excerpt*/
.ds-grid-blog .post-content {
    display: none;
}
/*This section removes the bottom padding from the post and sets the position so we can move the title on top of the image*/
.ds-grid-blog .et_pb_post {
    position: relative;
    padding-bottom: 0;
    border: none;
}
/*This section adds the semi transparent overlay and border on the image. It also sets the post title to absolute center*/
.ds-grid-blog h2 a {
    position: absolute;
    top: 0;
    left: 0;
    height: 430px;
    width: 100%;
    padding: 360px 40px 10px 40px;
    margin: 0;
    background: rgba(0, 0, 0, 0.0);
    color: #000;
    text-align: center;
    outline: 0px solid #fff;
    outline-offset: 0px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
/*This section changes the border and overlay colour and border position on hover*/
.ds-grid-blog h2 a:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #8C0013;
    outline: 0px solid #000;
    outline-offset: 0;
}
.ds-grid-blog .et_pb_post { margin-bottom: 0;}
.ds-grid-blog .et_pb_post .entry-featured-image-url { margin-bottom: 0; }
.ds-grid-blog h2.entry-title { padding-bottom: 0 !important; }
.ds-grid-blog .et_pb_post .entry-featured-image-url {height: 100%; }

.bottom-nav { font-family: 'Trebuchet','Trebuchet MS',Helvetica,Arial,Lucida,sans-serif;
}

@media only screen 
and (min-device-width : 325px) 
and (max-device-width : 767px)
and (orientation: portrait) { 
	
.ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-column-gap: 0%;
}

.ds-grid-blog a img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    margin:0;
    margin-bottom: 80px;
}
.ds-grid-blog h2 a {
    height: 250px;
    width: 100%;
    padding: 180px 10px 10px 10px;
    margin: 0;
}
	
}

@media only screen 
and (min-device-width : 325px) 
and (max-device-width : 767px)
and (orientation: landscape) { 
	
.ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(2, 48.5%);
    grid-column-gap: 3%;
}

.ds-grid-blog a img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    margin:0;
    margin-bottom: 80px;
}
.ds-grid-blog h2 a {
    height: 250px;
    width: 100%;
    padding: 180px 10px 10px 10px;
    margin: 0;
}
	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation: portrait) { 
	
.ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(2, 48.5%);
    grid-column-gap: 3%;
}

.ds-grid-blog a img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin: 0;
    margin-bottom: 80px;
}
.ds-grid-blog h2 a {
    height: 280px;
    width: 100%;
    padding: 210px 10px 10px 10px;
    margin: 0;
}
	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation: landscape) { 
	
.ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(2, 48.5%);
    grid-column-gap: 3%;
}

.ds-grid-blog a img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    margin: 0;
    margin-bottom: 80px;
}
.ds-grid-blog h2 a {
    height: 360px;
    width: 100%;
    padding: 290px 10px 10px 10px;
    margin: 0;
}
	
}