/*=============================================
BLOG GENERAL
=============================================*/
.background{ opacity:0.25; }



/*=============================================
BLOG ROOT
=============================================*/
section.postlist{ position:relative; top:100px; display:block; width:100%; max-width:1200px; height:auto; min-height:calc(100% - 100px); margin:0 auto; box-sizing:border-box; padding:0 10px; }
section.postlist.featured{ height:auto; min-height:0; max-height:initial; margin-bottom:0; }
section.postlist.categories{ height:auto; min-height:0; max-height:initial; margin-bottom:0; }
section.postlist.all{ height:auto; min-height:0; max-height:initial; margin-bottom:100px; }
@media(max-width:1000px){
    
}
@media(max-width:800px){
    section.postlist{ padding:0 0; }
}

section.postlist h2{ position:relative; display:block; height:auto; margin:0 0 30px 0; box-sizing:border-box; padding-left:10px; text-align:inherit; font-family:zendots; font-size:30px; font-weight:600; color:black; }
@media(max-width:900px){
    section.postlist h2{ font-size:24px; }
}

section.postlist a{ text-decoration:none; }

/* Grid */
section.postlist .grid{ display:flex; flex-wrap:wrap; align-items:center; width:100%; height:100%; margin:auto; }
section.postlist.featured .grid{}
/* section.postlist.featured .grid .post:nth-child(1){ order:1; flex:0 0 40%; }
section.postlist.featured .grid .post:nth-child(2){ order:2; flex:0 0 35%; }
section.postlist.featured .grid .post:nth-child(3){ order:3; flex:0 0 25%; } */
section.postlist.all .grid{}
section.postlist.categories .grid{}
@media(max-width:1000px){
    
}
@media(max-width:800px){
    section.postlist.featured .grid{ flex-wrap:nowrap; overflow:auto; scroll-snap-type:x mandatory; }
    section.postlist.featured .grid::-webkit-scrollbar{ display:none; }
    section.postlist.categories .grid{ flex-wrap:nowrap; overflow:auto; scroll-snap-type:x mandatory; }
    section.postlist.categories .grid::-webkit-scrollbar{ display:none; }
    section.postlist.all .grid{  }
}

/* Post */
section.postlist .grid .post{ flex:0 0 33.33%; margin-bottom:0; box-sizing:border-box; padding:0 10px; overflow:visible; }
section.postlist.featured .grid .post{ flex:0 0 50%; margin-bottom:0; box-sizing:border-box; padding:0 10px; }
section.postlist.categories .grid .post{ flex:0 0 20%; margin-bottom:0; box-sizing:border-box; padding:0 10px; }
section.postlist.all .grid .post{ flex:0 0 33.33%; margin-bottom:0; box-sizing:border-box; padding:0 10px; }
@media(max-width:1000px){
    section.postlist .grid .post{ flex:0 0 50%; }
    section.postlist.featured .grid .post{ flex:0 0 50%; }
    section.postlist.categories .grid .post{ flex:0 0 25%; }
}
@media(max-width:800px){
    section.postlist .grid .post{ flex:0 0 100%; max-width:400px; }
    section.postlist.featured .grid .post{ flex:0 0 90%; max-width:100%; scroll-snap-align:center; }
    section.postlist.categories .grid .post{ flex:0 0 38%; scroll-snap-align:center; }
    section.postlist.all .grid .post{ flex:0 0 100%; max-width:100%; }
}

/* Card */
section.postlist .grid .post .card{ position:relative; display:block; margin:0 auto 20px auto; padding-top:75%; background-color:white; border-radius:5px; box-shadow:1px 1px 5px rgba(0,0,0,0.25); overflow:hidden; }
section.postlist .grid .post .card figure{ position:absolute; top:0; left:0; display:block; width:100%; height:auto; box-sizing:border-box; padding-top:calc(75% - 70px); margin:0 0 10px 0; background-color:grey; background:linear-gradient(315deg,rgba(25,25,25, 1) 0%, rgba(75,75,75, 1) 100%); border-radius:0; box-shadow:none; overflow:hidden; cursor:pointer; }
section.postlist .grid .post .card figure img{ position:absolute; top:0; left:0; display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
section.postlist .grid .post .card figure>h2{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:0; color:white; }
section.postlist .grid .post .card figure .rollover{ position:absolute; top:0; display:flex; align-items:flex-end; justify-content:space-between; width:100%; height:100%; padding:1.6em 1.6em 1.5em 1.6em; visibility:hidden; opacity:0; color:#fff; background:linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); z-index:2; transition:all .3s; pointer-events:none; box-sizing:border-box; }
section.postlist .grid .post .card figure .rollover span.date{ position:absolute; left:20px; bottom:20px; display:block; margin:auto; font-family:lexend; font-size:14px; font-weight:300; color:white; }
section.postlist .grid .post .card figure:hover .rollover{ opacity:1; visibility:visible; }
section.postlist .grid .post .card infos{ position:absolute; left:0; top:initial; bottom:0; width:100%; height:auto; display:block; box-sizing:border-box; padding:10px; background-color:white; }
section.postlist .grid .post .card infos h2{ display:block; margin:0 auto 5px auto; padding:0; line-height:initial; font-family:lexend; font-size:18px; font-weight:500; color:rgb(34,34,34); }
section.postlist .grid .post .card infos date{ display:block; margin:0 auto; padding:0; line-height:initial; font-family:lexend; font-size:13px; font-weight:300; color:#666; }

/* Card featured */
section.postlist.featured .grid .post .card{ padding-top:75%; background-color:white; box-shadow:1px 1px 5px rgba(0,0,0,0.25); }
section.postlist.featured .grid .post .card figure{ position:absolute; box-shadow:none; padding-top:calc(75% - 70px); }
section.postlist.featured .grid .post .card infos{}
section.postlist.featured .grid .post .card infos h2{ font-size:22px; line-height:initial; }
section.postlist.featured .grid .post .card infos date{ font-size:14px; }
@media(max-width:800px){
    section.postlist.featured .grid .post .card{ padding-top:90%; }
    section.postlist.featured .grid .post .card figure{ padding-top:calc(90% - 70px); }
    section.postlist.featured .grid .post .card infos{}
    section.postlist.featured .grid .post .card infos h2{ font-size:18px; line-height:initial; }
    section.postlist.featured .grid .post .card infos date{ font-size:13px; }
}

/* Card categories */
section.postlist.categories .grid .post .card{ padding-top:80%; background-color:white; box-shadow:1px 1px 5px rgba(0,0,0,0.25); background:linear-gradient(315deg,rgba(25,25,25, 1) 0%, rgba(75,75,75, 1) 100%);  }
section.postlist.categories .grid .post .card infos{ position:absolute; left:50%; right:initial; top:50%; bottom:initial; transform:translate(-50%,-50%); width:auto; height:auto; box-sizing:border-box; padding:0; background-color:transparent; }
section.postlist.categories .grid .post .card infos h2{ text-align:center; color:white; }
@media(max-width:800px){
    section.postlist.categories .grid .post .card{ padding-top:75%; }
    section.postlist.categories .grid .post .card infos h2{ font-size:16px; }
}

/* Card all */
section.postlist.all .grid .post .card{ padding-top:100%; background-color:white; box-shadow:1px 1px 5px rgba(0,0,0,0.25); }
section.postlist.all .grid .post .card figure{ position:absolute; box-shadow:none; padding-top:calc(100% - 70px); }
section.postlist.all .grid .post .card infos h2{ font-size:18px; line-height:initial; }
section.postlist.all .grid .post .card infos date{ font-size:13px; }
@media(max-width:800px){
    section.postlist.all .grid .post .card{ padding-top:0; height:100px; margin-bottom:10px; }
    section.postlist.all .grid .post .card figure{ width:100px; padding-top:100px; }
    section.postlist.all .grid .post .card infos{ top:50%; bottom:initial; transform:translateY(-50%); width:calc(100% - 110px); left:110px; }
    section.postlist.all .grid .post .card infos h2{ font-size:16px; line-height:initial; }
    section.postlist.all .grid .post .card infos date{ font-size:12px; }
}



/*=============================================
BLOG POST SINGLE
=============================================*/
section.postsingle{ margin:120px 0; }

section.postsingle>.container{ display:flex; max-width:1200px; flex-wrap:wrap; }
@media(max-width:900px){
    section.postsingle>.container{ padding:0; }
}

section.postsingle .post{ flex:0 0 calc(100% - 300px); box-sizing:border-box; background-color:white; padding:40px 10px; border-radius:5px; box-shadow:1px 1px 5px rgba(0,0,0,0.25); overflow:hidden; }
section.postsingle .post .postheader{ display:flex; flex-wrap:wrap; margin-bottom:50px; }
section.postsingle .post .postheader>.left{ position:relative; flex:0 0 100%; margin-bottom:50px; }
section.postsingle .post .postheader>.right{ position:relative; flex:0 0 100%; margin-bottom:0px; }
section.postsingle .post .postheader .title{ position:relative!important; top:initial; bottom:0; left:0%; right:0; width:100%; max-width:initial!important; }
section.postsingle .post .postheader .title>h2{ position:relative; display:block; height:auto; margin:0 0 0 0; box-sizing:border-box; padding:0; text-align:center; font-family:lexend; font-size:60px; font-weight:600; color:black; }
section.postsingle .post .postheader .date{ position:relative!important; top:initial; bottom:0; left:0%; right:0; width:100%; max-width:initial!important; text-align:center; font-family:lexend; font-size:14px; font-weight:300; color:#666; }
section.postsingle .post .postheader .image{
    position:relative; width:calc(100% + 20px); padding-top:60%; margin:0 -10px; margin-bottom:0px; background-color:grey; background:linear-gradient(315deg,rgba(25,25,25, 1) 0%, rgba(75,75,75, 1) 100%); border-radius:0px; box-shadow:none; overflow:hidden;
    transform-origin:center center; transform:perspective(1000px) rotate3d(0,0,0,5deg);
}
section.postsingle .post .postheader .image>img{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; object-fit:cover; }
section.postsingle .post .postheader .image>img.background{ filter:blur(10px); }
section.postsingle .post .postheader .image>img.over{ object-fit:contain; }
section.postsingle .post .postheader .image>.overlay{ position:absolute; z-index:+1; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255, 0.0) 90%); }
section.postsingle .post .text{ position:relative; display:block; height:auto; margin:0; box-sizing:border-box; padding:0; text-align:left; font-family:lexend; font-size:16px; font-weight:300; color:black; }
section.postsingle .post .text h2{ display:block; height:auto; margin:0 0 10px 0; box-sizing:border-box; padding:0; text-align:left; font-family:lexend; font-size:40px; font-weight:500; color:black; }
section.postsingle .post .text h3{ display:block; height:auto; margin:0 0 10px 0; box-sizing:border-box; padding:0; text-align:left; font-family:lexend; font-size:35px; font-weight:500; color:black; }
section.postsingle .post .text h4{ display:block; height:auto; margin:0 0 10px 0; box-sizing:border-box; padding:0; text-align:left; font-family:lexend; font-size:30px; font-weight:500; color:black; }
section.postsingle .post .text h5{ display:block; height:auto; margin:0 0 10px 0; box-sizing:border-box; padding:0; text-align:left; font-family:lexend; font-size:25px; font-weight:500; color:black; }
section.postsingle .post .text h6{ display:block; height:auto; margin:0 0 10px 0; box-sizing:border-box; padding:0; text-align:left; font-family:lexend; font-size:20px; font-weight:500; color:black; }
section.postsingle .post .text mark{ color:grey; }
section.postsingle .post .text blockquote{ margin:10px 0 10px 10px; padding-left:10px; color:#555; border-left:5px solid #CCC; }
section.postsingle .post .text code{ display:block; margin:10px 0 10px 0; padding:5px; color:#555; background-color:#CCC; }
@media(max-width:900px){
    section.postsingle .post{ flex:0 0 100%; margin-bottom:50px; padding:0 10px; box-shadow:none; }
    section.postsingle .post .postheader .image{ padding-top:75%; }
    section.postsingle .post .postheader .title>h2{ font-size:30px; }
}

section.postsingle .recommendations{ flex:0 0 300px; margin-top:0; box-sizing:border-box; padding-left:20px; }
section.postsingle .recommendations .reco{ display:block; margin-bottom:20px; }
section.postsingle .recommendations .reco h2{  }
section.postsingle .recommendations .reco a{ text-decoration:none; }
section.postsingle .recommendations .reco .card{ display:block; width:100%; height:auto; box-sizing:border-box; padding:0 5px; background-color:white; box-shadow:1px 1px 5px rgba(0,0,0,0.25); border-radius:5px; overflow:hidden; }
section.postsingle .recommendations .reco figure{ position:relative; display:block; width:calc(100% + 10px); margin:0 -5px 5px -5px; padding-top:50%; border-radius:0; overflow:hidden; }
section.postsingle .recommendations .reco figure img{ position:absolute; top:0; left:0; display:block; width:100%; height:100%; object-fit:cover; }
section.postsingle .recommendations .reco h2{ position:relative; display:block; height:auto; margin:0 0 5px 0; box-sizing:border-box; padding:0; text-align:left; font-family:lexend; font-size:14px; font-weight:500; color:black; }
section.postsingle .recommendations .reco span.date{ position:relative; display:block; height:auto; margin:0 0 10px 0; box-sizing:border-box; padding:0; text-align:left; font-family:lexend; font-size:10px; font-weight:300; color:#666; }
@media(max-width:900px){
    section.postsingle .recommendations{ flex:0 0 100%; padding-left:0; padding:0 10px; }
}