/* CSS 1.2*/
/* variables */
:root{
--colour-1:#CA335C;
}
/* Buttons */
.btn-square .more-link{
display: inline-block !important;
padding: 7px 12px;
border: 1px solid rgba(0,0,0,0.1);
margin-top: 10px;
position: relative;
box-shadow:inset 0 0 0 0 rgba(0,0,0,0.5);
transition: all ease-out 0.15s;
}
.btn-square .more-link:hover{
box-shadow:inset 200px 0 0 0 rgba(0,0,0,0.2);
color: #fff;
}
.btn-blue .more-link{
background: var(--colour-1); !important;
}
#grid-blog.btn .more-link{
display:inline-block;
text-align:center;
padding:5px 20px;
box-shadow:inset 0 0 0 0 rgba(0,0,0,0.5);
transition:all ease 0.15s;
background:var(--colour-1);
}
#grid-blog.btn .more-link:hover{
box-shadow:inset 200px 0 0 0 rgba(0,0,0,0.2);
color: #fff;
}
#grid-blog.btn-orange .more-link{
background:orange;
color:rgba(0,0,0,0.6) !important;
}
#grid-blog.btn-orange .more-link:hover{
box-shadow:0px 0px 10px rgba(0,0,0,0.4);
color:#fff !important;
}
.btn-icon .more-link{
display: inline-block;
overflow: hidden;
text-indent: 100%;
border: 1px solid red;
white-space: nowrap;
width: 80px;
height: 80px;
border: 2px solid rgba(255, 255, 255, 1);
border-radius: 100%;
position: absolute;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDgwIDgwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA4MCA4MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQo8L3N0eWxlPgo8cG9seWxpbmUgY2xhc3M9InN0MCIgcG9pbnRzPSIyOCwxNiA1Miw0MCAyOCw2NCAiLz4KPC9zdmc+Cg==);
background-color:rgba(0,0,0,0.2) ;
}
#blog-grid.detail article > a,
#related.detail article .entry-featured-image-url{
display: block;
position: relative;
}
#blog-grid.detail article > a:after,
#related.detail article .entry-featured-image-url:after{
content: '';
display: block;
position: absolute;
width: 30px;
height: 30px;
background: var(--colour-1);
top: 0px;
right: 0px;
z-index: 2;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDMwIDMwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMCAzMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQo8L3N0eWxlPgo8cG9seWxpbmUgY2xhc3M9InN0MCIgcG9pbnRzPSI4LjgsMSAyMi4yLDE0LjUgOC44LDI4ICIvPgo8L3N2Zz4K')
;
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center center;
}
.single-post #respond{
padding: 20px;
background: rgba(0,0,0,0.05);
}
/* BLOG */
#blog-grid > div,
.col-3 > div,
.col-2 > div{
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:space-between;
}
#blog-grid.col-3 > div,
.col3 > div{
justify-content:normal;
}
#blog-grid article:last-of-type{
margin-left:auto !important;
}
@media(min-width:1024px){
/* 3 Columns per Row */
.col-3 article{
width:31.3%;
margin-bottom:40px;
margin-right:3%;
margin-left:0px !important;
}
.col-3 article:nth-child(3n){
margin-right:0px;
}
.col-2 article{
width:48.5%;
}
#blog-grid.col-2 article{
height:300px;
}
#blog-grid.col-3 article{
height:240px;
}
}
#blog-grid article{
position:relative;
overflow:hidden;
cursor:pointer;
}
#blog-grid article > a{
height:100%;
}
#blog-grid article img{
object-fit:cover;
object-position:center center;
height:100%;
}
#blog-grid article:before{
content:'';
z-index:2;
display:block;
position:absolute;
background: rgba(0,0,0,0.25);
width:100%;
height:100%;
transition:all ease 0.25s;
}
#blog-grid article .entry-title{
position:absolute;
bottom:60px;
z-index:2;
width:100%;
padding:5px 15px 0px 15px;
transition:all ease 0.45s;
/*border:1px solid red;*/
}
#blog-grid.col-1 article .entry-title{
bottom:auto;
top:50%;
text-align:center;
}
#blog-grid .post-meta{
position:absolute;
bottom:10px;
z-index:2;
width:100%;
padding:0px 15px 0px 15px;
transition:all ease 0.45s;
line-height:100%;
/*border:1px solid red;*/
}
#blog-grid.col-1 .post-meta{
bottom:auto;
bottom:50%;
text-align:center;
}
#blog-grid article:hover:before{
background: rgba(0,0,0,0.45);
}
@media(min-width:768px){
#blog-grid:not(.col-1) article:hover .entry-title{
bottom:160px;
}
#blog-grid:not(.col-1) article:hover .post-meta{
bottom:110px;
}
#blog-grid:not(.col-1) article:hover .post-content{
bottom:80px;
transition: all ease 0.25s 0.15s;
}
/* Hover blog-grid col 1 */
#blog-grid.col-1 article:hover .entry-title{
transform:translateY(15px);
}
#blog-grid.col-1 article:hover .post-content{
padding-bottom:30px
}
}
#blog-grid .post-content{
position:absolute;
z-index:2;
bottom:0px;
padding:20px;
transform:translateY(100%);
transition:all ease 0.25s;
}
#blog-grid.col-1 .post-content{
transform:translateY(0);
text-align:center;
background: linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 50%);
width:100%;
padding-top:25%;
}
/* BLOG PILLS */
/* IMAGEN ANIMACIÓN */
#blog-pills .entry-featured-image-url,
#blog-grid .entry-featured-image-url{
overflow:hidden;
margin-bottom:15px;
}
#blog-pills article:hover img, #blog-grid article:hover img{
transform:scale(1.15);
}
#blog-grid article:hover img{
filter: blur(4px);
}
#blog-pills .entry-featured-image-url img,
#blog-grid .entry-featured-image-url img{
transition:all ease 0.25s;
}
/* BLOG FLEX*/
.blog-flex article{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
margin: 0px auto;
padding:70px 0px;
}
.blog-flex .entry-featured-image-url{
margin-bottom:0px;
}
.blog-flex .blog-column-info{
width:100%;
}
@media(min-width:800px){
.blog-flex article > div{
width: 50% !important;
padding:0 5%;
}
.blog-flex article > a{
width: 50%;
}
.blog-flex article:nth-child(2n) {
flex-direction: row-reverse;
}
}
.blog-flex article img{
transition:all ease 0.15s;
}
.blog-flex img:hover{
transform:scale(1.03);
}
.blog-flex article .blog-column-info .entry-title{
transition:all ease 0.25s;
}
.blog-flex article .blog-column-info .entry-title:hover{
opacity:0.7;
transform:translateY(5px);
}
@media(max-width:980px){
.blog-flex article .blog-column-info .post-content{
display:none;
}
.blog-flex article{
padding:30px 0px;
}
}
/* END BLOG FLEX*/
/* BLOG LIST */
#blog-list article{
display:flex;
}
#blog-list article > a{
position: relative;
display: block;
overflow: hidden;
}
#blog-list article > a:before{
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.2);
transition: all ease-out 0.15s;
transform: translateX(-100%);
z-index: 2;
}
#blog-list article > a:hover:before{
transform: translateX(0%);
}
#blog-list article > a img{
transition: all ease 0.25s;
}
#blog-list article > a:hover img{
transform: scale(1.2);
}
@media(max-width: 1200px){
#blog-list article{
flex-direction: column;
}
}
@media(min-width:1201px){
#blog-list article .post-meta-wrapper{
padding-left:40px;
}
}
/* EN BLOG LIST */
/* MIX BLOG */
#blog-grid.min .et_pb_post{
margin-bottom: 23px;
}
.post-categories-wrapper{
position:absolute;
z-index:2;
left:15px;
top:15px;
}
.col-1 .post-categories-wrapper{
left:50%;
transform:translatex(-50%);
}
@media(max-width:767px){
.col-1 .post-categories-wrapper{
left:0px;
width:90%;
text-align:center;
}
}
.post-categories-wrapper a{
display:inline-block;
background:rgba(0,0,0,0.3);
padding:3px 6px;
border-radius:4px;
margin-right:10px;
color:#fff;
font-size:13px;
transition:all aese 0.25s;
line-height:1.2em;
}
.post-categories-wrapper a:hover{
background:rgba(0,0,0,0.6)
}
.blog-flex .post-categories-wrapper{
position:relative;
margin-bottom:20px;
left:0px;
}
.blog-flex .post-categories-wrapper a{
background:none;
color:#000;
}
.blog-flex .post-categories-wrapper a:hover{
color:#666;
}
/* PAGINATION */
.et_pb_blog_0 article ~ div{
width:100% !important;
display:block;
}
.last-posts article{
display:flex;
margin-bottom:30px;
align-items:center;
}
.single .last-posts article{
padding-bottom: 0px;
}
.last-posts .entry-featured-image-url{
width:100px !important;
margin-bottom:0px;
}
.last-posts .entry-title{
padding-bottom:0px;
margin-left:20px;
width:calc(100% - 100px);
}
/* SINGLE */
/* single side bars*/
.single-post #post h1,
.single-post #post h2,
.single-post #post h3,
.single-post #post h4,
.single-post #post h5,
.single-post #post h6{
padding: 30px 0;
}
.single-post #post .big-cap{
position: relative;
top: 8px;
display: flex;
align-items: center;
justify-content: center;
float: left;
margin: 0 15px 5px 0;
font-family: 'georgia';
font-style: italic;
font-size: 100px;
line-height: .7em;
font-weight: 400;
color: #1b1b1b;
opacity: 0.8;
padding: 8px;
}
.single #post ul{
padding-left: 0px;
}
.single #post ul li{
list-style: none;
position: relative;
padding-left: 20px;
}
.single #post ul li:before{
position: absolute;
content: '';
background: var(--colour-1);
display: block;
height: 8px;
width: 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0px;
}
.single-post #post > p:first-child,
.single-post #post .et_builder_inner_content > p:first-child{
border-left: 3px solid var(--colour-1);;
padding-left: 20px;
padding-bottom: 0px;
margin-bottom: 1em;
}
#post .et_pb_row{
padding:0px;
width:100%;
}
#post .et_pb_section_0{
padding-top:30px;
}
#post blockquote{
border: 1px solid rgba(0, 0, 0,0.05);
border-radius: 8px;
padding: 20px;
line-height: 1.2em;
position: relative;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDExMi45IDg5LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDExMi45IDg5LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7b3BhY2l0eTowLjE7fQo8L3N0eWxlPgo8ZyBjbGFzcz0ic3QwIj4KCTxwYXRoIGQ9Ik02MC41LDguOGMtNC43LTAuNS05LjMtMC4zLTEzLjgsMC40Yy00LjUsMC43LTguNiwxLjktMTIuNCwzLjdjLTMuOCwxLjgtNy4xLDMuOS0xMCw2LjVjLTIuOCwyLjYtNC45LDUuNi02LjIsOQoJCWMtMC44LDItMS4xLDQtMC44LDUuOGMwLjIsMS44LDAuOSwzLDIsMy40YzEuMiwwLjUsMi4zLDAuNiwzLjIsMC41YzEtMC4yLDItMC4zLDMtMC42czIuMi0wLjQsMy40LTAuNGMxLjIsMCwyLjcsMC4zLDQuNSwxCgkJYzEuOCwwLjcsMy40LDEuOCw0LjcsMy4yYzEuMywxLjQsMi4zLDMuMSwzLDQuOWMwLjcsMS45LDEsMy45LDEsNi4xYzAsMi4yLTAuNSw0LjQtMS4zLDYuN2MtMC45LDIuNC0yLjMsNC40LTQuMSw2CgkJYy0xLjgsMS42LTMuOCwyLjktNi4xLDMuN2MtMi4zLDAuOC00LjcsMS4yLTcuMywxLjJjLTIuNiwwLTUuMi0wLjUtNy44LTEuNWMtMy40LTEuMy02LjMtMy4zLTguNi02Yy0yLjQtMi43LTQuMS01LjctNS4zLTkuMgoJCUMwLjUsNDkuNy0wLjEsNDUuOSwwLDQyYzAuMS00LDAuOS03LjksMi40LTExLjljMi40LTYuMyw1LjktMTEuNiwxMC4zLTE1LjlTMjIsNi41LDI3LjQsNC4xYzUuNC0yLjQsMTEuMi0zLjcsMTcuNC00CgkJUzU3LjEsMC42LDYzLDIuNUw2MC41LDguOHogTTExMC40LDI4LjNjLTQuNi0wLjQtOS4yLTAuMy0xMy43LDAuNGMtNC41LDAuNy04LjcsMS45LTEyLjQsMy43Yy0zLjgsMS44LTcuMSw0LTkuOSw2LjYKCQljLTIuOCwyLjYtNC45LDUuNi02LjIsOWMtMC44LDItMS4xLDQtMC45LDUuOGMwLjIsMS44LDAuOSwzLDIuMSwzLjRjMS4yLDAuNSwyLjMsMC42LDMuMiwwLjVjMS0wLjIsMS45LTAuNCwyLjktMC42CgkJYzEtMC4yLDIuMS0wLjQsMy40LTAuNGMxLjIsMCwyLjcsMC4zLDQuNSwxYzEuOCwwLjcsMy40LDEuOCw0LjcsMy4yYzEuMywxLjQsMi4zLDMuMSwzLDQuOWMwLjcsMS45LDEsMy45LDEsNi4xCgkJYzAsMi4yLTAuNSw0LjQtMS4zLDYuN2MtMC45LDIuNC0yLjMsNC40LTQsNi4xYy0xLjgsMS43LTMuOCwyLjktNi4xLDMuN2MtMi4zLDAuOC00LjcsMS4yLTcuNCwxLjJjLTIuNiwwLTUuMy0wLjUtNy44LTEuNQoJCWMtMy40LTEuMy02LjMtMy4zLTguNi02Yy0yLjQtMi43LTQuMS01LjctNS4zLTkuMmMtMS4yLTMuNS0xLjgtNy4yLTEuNy0xMS4yYzAuMS00LDAuOS03LjksMi40LTExLjljMi40LTYuMyw1LjktMTEuNiwxMC4zLTE1LjkKCQlzOS4zLTcuNywxNC44LTEwLjFjNS41LTIuNCwxMS4zLTMuNywxNy40LTRjNi4xLTAuMywxMi4yLDAuNSwxOC4xLDIuNEwxMTAuNCwyOC4zeiIvPgo8L2c+Cjwvc3ZnPgo=');
background-size: 180px 180px;
background-position: -30px -10px;
background-repeat: no-repeat;
}
#post blockquote p{
line-height: 1.5em;
}
#post ~ .categories a{
padding: 5px 8px;
background: var(--colour-1);
margin-left: 10px;
border-radius: 4px;
transition: all ease 0.15s;
}
#post ~ .categories a:hover{
transform: translateY(-2px);
}
@media(max-width:767px){
#post .et_pb_section_0{
padding-top:0px;
}
}
@media(min-width: 768px){
.single-post #post ~ .et_pb_team_member .et_pb_team_member_image{
margin-right:30px;
}
}
#related.pills .et_pb_post .entry-featured-image-url{
margin-bottom:0px;
}
#related.pills article{
position: relative;
padding-bottom: 0px;
padding-top: 0px;
overflow: hidden;
padding:0px;
cursor:pointer;
}
#related.pills article:before{
position:absolute;
content:'';
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
z-index:2;
transition:all ease 0.15s;
}
#related.pills article:hover:before{
background:rgba(0,0,0,0.5);
}
#related.pills .et_pb_image_container{
margin:0px;
}
#related.pills article h2.entry-title {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
padding: 10px;
text-align: center;
z-index:3;
transition:all ease 0.15s;
}
#related.pills article:hover .entry-title{
transform: translateY(-80%);
}
#related.pills article .post-meta{
position: absolute;
bottom: 0px;
padding: 0px 10px;
width: 100%;
text-align: center;
opacity: 0.8;
left: 0px;
z-index:3;
}
#commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"]{
width:100%;
}
.no-colapse-2{
display:flex;
flex-wrap:wrap;
}
.no-colapse-2 .et_pb_column{
width:47% !important;
}
.et_pb_team_member_image{
margin:10px auto;
}
@media(max-width:767px){
.no-colapse-2 .et_pb_column{
width:50% !important;
}
}
/* **********************
GRID BLOGS
*************************************** */
/* GRID GENERAL */
#grid-blog > div{
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 8px;
grid-auto-rows: minmax(100px, auto);
}
#grid-blog > div article ~ div:last-child{
grid-column: 1 / -1;
}
#grid-blog article > div div{
grid-column: 1 / 4;
background: red;
}
#grid-blog article{
margin-bottom:0px;
position: relative;
overflow: hidden;
}
#grid-blog article .entry-title{
maring-bottom:0px !important;
position:absolute;
top:0px;
left:0px;
width:100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#grid-blog article .entry-title a{
padding:20px 20px 80px;
transition:all ease 0.25s;
display:block;
}
#grid-blog article:hover .entry-title a{
padding-top:30px;
}
#grid-blog article .entry-featured-image-url{
margin-bottom:0px;
height:100%;
overflow:hidden;
}
#grid-blog article .entry-featured-image-url img{
object-fit:cover;
height:100%;
transition:all ease 0.25s;
}
#grid-blog article:hover .entry-featured-image-url img{
height:115%;
transform: translateY(-7.5%);
}
#grid-blog .published{
display: inline-block;
padding-left: 25px;
background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDE2IDE1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNiAxNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8Zz4KCTxyZWN0IHg9IjAuNSIgeT0iNiIgY2xhc3M9InN0MCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjguNSIvPgoJPHJlY3QgeD0iMC41IiB5PSIyIiBjbGFzcz0ic3QwIiB3aWR0aD0iMTUiIGhlaWdodD0iMyIvPgoJPHJlY3QgeD0iMyIgeT0iMSIgY2xhc3M9InN0MCIgd2lkdGg9IjIiIGhlaWdodD0iMSIvPgoJPHJlY3QgeD0iMTEiIHk9IjEiIGNsYXNzPSJzdDAiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiLz4KPC9nPgo8L3N2Zz4K');
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: left center;
}
/* GRID 1 */
#grid-blog.grid-1 > div article:first-child,
#grid-blog.grid-1 > div article:nth-child(6){
grid-column: span 2;
grid-row: span 2;
}
#grid-blog.grid-1 > div article:nth-child(3){
grid-row: span 2;
}
#grid-blog.grid-1 > div article:nth-child(2),
#grid-blog.grid-1 > div article:nth-child(7){
grid-row: span 2;
}
#grid-blog.grid-1 article .more-link,
#grid-blog.grid-2 article .more-link,
#grid-blog.grid-3 article .more-link {
position: absolute;
bottom: 15px;
left: 15px;
}
#grid-blog.grid-1 article .post-meta,
#grid-blog.grid-2 article .post-meta,
#grid-blog.grid-3 article .post-meta{
position: absolute;
bottom: 10px;
right: 10px;
}
/* GRID 2*/
#grid-blog.grid-2 > div{
grid-template-columns: repeat(3, 3fr);
}
#grid-blog.grid-2 > div article:first-child,
#grid-blog.grid-2 > div article:nth-child(11){
grid-column: span 2;
grid-row: span 2;
}
#grid-blog.grid-2 > div article:nth-child(6),
#grid-blog.grid-2 > div article:nth-child(7){
grid-row: span 2;
}
/* GRID 4*/
#grid-blog.grid-4 > div{
grid-template-columns: repeat(4,4fr);
}
#grid-blog.grid-4 > div article,
#grid-blog.grid-5 > div article{
aspect-ratio:1;
}
#grid-blog.grid-4 .entry-title,
#grid-blog.grid-5 .entry-title{
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:none;
padding:0px;
transition:all ease 0.25s;
padding:0px 20px;
z-index: 3;
}
#grid-blog.grid-4 article .entry-title a,
#grid-blog.grid-5 article .entry-title a{
padding:0px;
}
#grid-blog.grid-4 article .entry-featured-image-url:before,
#grid-blog.grid-5 article .entry-featured-image-url:before{
content:"";
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
background:rgba(0,0,0,0.3);
transition:all ease 0.25s;
opacity:1;
z-index: 2;
}
#grid-blog.grid-4 article:hover .entry-featured-image-url:before,
#grid-blog.grid-5 article:hover .entry-featured-image-url:before{
opacity: 0;
}
#grid-blog.grid-4 article:hover .entry-title,
#grid-blog.grid-5 article:hover .entry-title{
top:40%;
opacity:0;
}
#grid-blog.grid-4 article .post-meta,
#grid-blog.grid-5 article .post-meta{
position:absolute;
bottom:0px;
padding:10px;
width:100%;
z-index: 3;
}
#grid-blog.grid-4 article .more-link,
#grid-blog.grid-5 article .more-link{
top: 50%;
left: 50%;
transform: translate(-50%,-40%);
transition: all ease 0.15s;
opacity: 0;
}
#grid-blog.grid-4 article:hover .more-link,
#grid-blog.grid-5 article:hover .more-link{
transform: translate(-50%,-50%);
opacity: 1;
}
/* GRID-5 */
#grid-blog.grid-5 > div{
grid-template-columns: repeat(3, 33%);
}
/* MEDIAS */
@media(max-width: 1280px){
#grid-blog.grid-1 > div article:nth-child(1){
grid-row: span 3;
grid-column: span 3;
}
#grid-blog.grid-1 > div article:nth-child(2),
#grid-blog.grid-1 > div article:nth-child(5){
grid-row: span 3;
}
#grid-blog.grid-1 > div article:nth-child(3),
#grid-blog.grid-1 > div article:nth-child(9){
grid-row: span 3;
grid-column: span 2;
}
#grid-blog.grid-1 > div article:nth-child(4){
grid-row: span 3;
grid-column: span 2;
}
#grid-blog.grid-1 > div article:nth-child(6),
#grid-blog.grid-1 > div article:nth-child(7),
#grid-blog.grid-1 > div article:nth-child(8){
grid-row: span 3;
}
#grid-blog.grid-2 > div article:nth-child(2),
#grid-blog.grid-2 > div article:nth-child(3),
#grid-blog.grid-2 > div article:nth-child(4),
#grid-blog.grid-2 > div article:nth-child(5),
#grid-blog.grid-2 > div article:nth-child(7){
grid-row: span 3;
}
#grid-blog.grid-3 > div{
grid-template-columns: 2fr 2fr;
}
#grid-blog.grid-4 > div{
grid-template-columns: 3fr 3fr 3fr;
}
#grid-blog.btn .more-link{
padding:5px 10px;
}
}
@media(max-width: 980px){
#grid-blog.grid-2 > div article:nth-child(6),
#grid-blog.grid-2 > div article:nth-child(8),
#grid-blog.grid-2 > div article:nth-child(12){
grid-row: span 3;
}
#grid-blog.grid-2 > div article:nth-child(9),
#grid-blog.grid-2 > div article:nth-child(13){
grid-row: span 2;
grid-column: span 2;
}
#grid-blog.grid-2 > div article:nth-child(10){
grid-row: span 2;
}
#grid-blog.grid-4 > div,
#grid-blog.grid-5 > div{
grid-template-columns: 2fr 2fr;
}
}
@media(max-width: 970px){
#grid-blog.grid-2 > div article,
#grid-blog.grid-1 > div article{
grid-column:1 / -1 !important;
grid-row: span 2 !important;
}
}
@media(max-width: 767px){
#grid-blog.grid-4 > div,
#grid-blog.grid-5 > div,
#grid-blog.grid-3 > div{
grid-template-columns: 1fr;
}
}