/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
body{
	background-color: #131327;
}
.gridHero {
    display: flex;
	/*align-items: stretch;*/
}
.carosello {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.innerCarosello {
    display: flex;
    transition: transform 0.5s ease-in-out;
	height: 100%;
}
.itemCarosello {
    min-width: 100%;
}
.itemCarosello img, .imgCardHero a img, .postCat > a > img {
	aspect-ratio: 1.91 / 1;
	width: 100%;
    object-fit: cover;
}
.captionCarosello {
	width: 100%;
	border-bottom: 3px solid #2d4dec;
}
.captionCarosello a, h2.titleCarosello a, button.prev, button.next, span.catCardHero a, span.catPost a, h2.titleCat{
    color: #fff;
}
span.catCarosello, span.catCardHero, span.catPost {
	background: #2D4DEC;
    text-transform: uppercase;
    font-weight: bold;
    padding: 2px 6px;
}
span.catCarosello:focus-visible, span.catCarosello a:focus-visible, span.catCarosello:focus-visible, span.catCardHero a:focus-visible, span.catPost:focus-visible, span.catPost a:focus-visible {
    outline: none !important;
}
h2.titleCarosello, p.autoreCarosello, h2.titleCardHero, p.autoreCardHero, h2.titleCat, h2.titlePost{
	margin: 0;
}
button.prev,
button.next {
    position: absolute;
    background: rgba(30,30,51,0.7);
    border: none;
    cursor: pointer;
	border-radius: 50%;
	padding: 0 !important;
}
button.prev {
    left: 10px;
}
button.next {
    right: 10px;
}
.cardHero > a, .postCat > a {
    line-height: 0;   
}
.cardHero img {
	width: 100%;
}
.contCardHero, .contPost {
    border-bottom: 3px solid #2D4DEC;
	background: white;
}
.contCardHero, .postCat, .contPost, .innerContPost{
	display: flex;
    flex-direction: column;
}
h2.titleCardHero a, p.autoreCardHero a, .titlePost a, span.autorePost a{
    text-decoration: none;
	color: #131327;
}
.contTitleCat {
    position: relative;
	text-align: center;
}
.contTitleCat::after {
    position: absolute;
    content: '';
    height: 17px;
    background: linear-gradient(to right, #2D4DEC00 0%, #2D4DEC 50%, #2D4DEC00 100%);
    width: 100%;
    bottom: -9px;
	left: 50%;
    transform: translate(-50%, 0);
}
.listPost {
    display: flex;
	flex-wrap: wrap;
}
.picPost a {
	display: block;
	line-height: 0;
}
.contPost, .innerContPost{
	flex: 1;
}
.listCatPost {
    display: flex;
    grid-gap: 5px;
}
.metaPost{
	display: flex;
	margin-top: auto;
	justify-content: space-between;
}
@media (max-width: 550px) {	
	.gridHero {
		margin-bottom: 12vw;
	}
	.captionCarosello {
		padding: 5vw 5vw 3vw 0;
	}
	span.catCarosello, span.catCardHero {
		font-size: 2.74vw;
		line-height: 4vw;
	}
	h2.titleCarosello {
		font-size: 5.47vw;
		line-height: 6vw;
	}
	p.autoreCarosello, p.autoreCardHero {
		font-size: 1.82vw;
		line-height: 2vw;
	}
	.contCardHero {
		padding: 4vw;
	}
	h2.titleCardHero {
		font-size: 4.55vw;
	}
	.contTitleCat {
		margin-bottom: 8vw;
	}
	h2.titleCat {
		font-size: 9.1vw;
		line-height: 9.3vw;
	}
	.contPost {
		padding: 2.5vw;
	}
	.second {
		margin-top: 10vw;
	}
}
@media (min-width: 551px) and (max-width: 766.9px){	
	.gridHero {
		margin-bottom: 10vw;
		width: 102%;
	}
	.captionCarosello {
		padding: 3vw 3vw 3vw 0;
	}
	span.catCarosello, span.catCardHero {
		font-size: 2.73vw;
		line-height: 4vw;
	}
	h2.titleCarosello {
		font-size: 5.45vw;
		line-height: 5.8vw;
	}
	p.autoreCarosello, p.autoreCardHero{
		font-size: 1.83vw;
		line-height: 1.83vw;
	}
	.contCardHero, .contPost {
		padding: 3vw;
	}
	h2.titleCardHero {
		font-size: 4.54vw;
        line-height: 5vw;
	}
	.contTitleCat {
		margin-bottom: 6vw;
	}
	h2.titleCat {
		font-size: 9.1vw;
		line-height: 9.3vw;
	}
	.second {
		margin-top: 10vw;
	}
}
@media (max-width: 766.9px){
	.gridHero {
		flex-wrap: wrap;
		grid-gap: 6vw;
	}
    .innerCarosello {
        line-height: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		width: 100%;
    }
    .innerCarosello::-webkit-scrollbar {
      display: none;
    }
	.itemCarosello {
		display: flex;
		flex-direction: column;
		width: 100%;
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}
	.captionCarosello{
		display: flex;
		flex-direction: column;
	}
	.listCatCarosello, .listCatCardHero {
		margin-bottom: 2.5vw;
	}
	p.autoreCarosello, p.autoreCardHero {
		padding-top: 2.5vw;
	}
	button.prev, button.next {
		top: 25%;
		transform: translateY(-25%);
		width: 7vw;
		height: 7vw;	
	}
	.cardHero {
		width: 100%;
	}
	.cardHero > a{
		display: block;
	}
	.listPost {
		grid-gap: 6vw 4vw;
	}
	.postCat {
		flex: 0 0 calc((100% - 4vw) / 2);
	}
	.contPost {
		grid-gap: 1.5vw;
	}
	span.catPost {
		font-size: 1.83vw;;
		line-height: 2vw;
	}
	.innerContPost {
		grid-gap: 2vw;
	}
	h2.titlePost {
		font-size: 3.24vw;
        line-height: 3.5vw;
	}
	span.autorePost, span.dataPost {
		font-size: 1.47vw;;
		line-height: 1.5vw;
	}
}
@media (min-width: 767px){
	.carosello {
		flex: 0 1 65%;
	}
	.itemCarosello {
		position: relative;
	}
	button.prev,
	button.next {
		top: 50%;
		transform: translateY(-50%);
	}
	.itemCarosello img {
		height: 100%;
	}
	.captionCarosello {
		position: absolute;
		bottom: 0;
		left: 0;
		background: transparent linear-gradient(to top, #1E1E33 0%, #1e1e33ba 50%, #13132700 100%) 0% 0% no-repeat padding-box;
	}
	.cardHero {
		flex: 0 1 35%;
		display: flex;
		flex-direction: column;
	}
	.contCardHero{
		flex: 1;
	}
	p.autoreCardHero{
		margin-top: auto;
	}
}
@media (min-width: 767px) and (max-width: 899.9px){
	.listCatCarosello{
		padding-bottom: 1.2vw;
	}
	span.catCarosello, span.catCardHero, span.catPost {
		font-size: 1.67vw;
		line-height: 2vw;
	}
	h2.titleCarosello {
		font-size: 3.34vw;
		line-height: 3.6vw;
	}
	p.autoreCarosello, p.autoreCardHero, span.autorePost, span.dataPost {
		font-size: 1.12vw;
	}
	button.prev, button.next {
    	width: 4vw;
		height: 4vw;
		font-size: 1.6vw;
	}
	.contCardHero, .contPost, .innerContPost{
		grid-gap: 1.2vw;
	}
	h2.titleCardHero, h2.titlePost {
		font-size: 2.79vw;
		line-height: 3vw;
	}
	h2.titleCat {
		font-size: 5.57vw;
		line-height: 5.57vw;
	}
}
@media (min-width: 767px) and (max-width: 1400px){
	.gridHero {
		grid-gap: 3vw;
		margin-bottom: 6vw;
	}
	.captionCarosello, .contCardHero, .contPost {
		padding: 2vw;
	}
	.contTitleCat {
        margin-bottom: 4vw;
    }
	.listPost {
		grid-gap: 4vw 3vw;
	}
	.postCat {
		flex: 0 1 calc((100% - 6vw) / 3);
	}
	.second {
		margin-top: 6vw;
	}
}
@media (min-width: 900px) and (max-width: 1099.9px){
	span.catCarosello, span.catCardHero, span.catPost {
		font-size: 1.37vw;
		line-height: 1.6vw;
	}
	h2.titleCarosello {
		font-size: 2.73vw;
		line-height: 3vw;
	}
	p.autoreCarosello, p.autoreCardHero, span.autorePost, span.dataPost {
		font-size: 0.91vw;
	}
	h2.titleCardHero, h2.titlePost {
		font-size: 2.28vw;
		line-height: 2.5vw;
	}
	h2.titleCat {
		font-size: 5.56vw;
		line-height: 5.56vw;
	}
}
@media (min-width: 900px) and (max-width: 1400px){
	.listCatCarosello {
		padding-bottom: 0.8vw;
	}
	button.prev, button.next {
    	width: 3.5vw;
		height: 3.5vw;
		font-size: 1.3vw;
	}
	.contCardHero, .contPost, .innerContPost{
		grid-gap: 0.8vw;
	}
}
@media (min-width: 1100px) and (max-width: 1400px){
	span.catCarosello, span.catCardHero, span.catPost {
		font-size: 1.08vw;
		line-height: 1.2vw;
	}
	h2.titleCarosello {
		font-size: 2.5vw;
		line-height: 2.8vw;
	}
	p.autoreCarosello, p.autoreCardHero, span.autorePost, span.dataPost {
		font-size: 0.72vw;
	}
	h2.titleCardHero, h2.titlePost {
		font-size: 1.79vw;
		line-height: 2vw;
	}
	h2.titleCat {
		font-size: 4.55vw;
		line-height: 4.55vw;
	}
}
@media (min-width: 1401px){
	.gridHero {
		grid-gap: 40px;
		margin-bottom: 60px;
	}
	.captionCarosello{
		padding: 10vw 30px 30px;
	}
	.listCatCarosello {
		padding-bottom: 10px;
	}
	span.catCarosello, span.catCardHero, span.catPost {
		font-size: 15px;
		line-height: 18px;
	}
	h2.titleCarosello{
		font-size: 30px;
		line-height: 34px;
	}
	p.autoreCarosello, p.autoreCardHero, span.autorePost, span.dataPost {
		font-size: 10px;
	}
	p.autoreCarosello{
		margin-top: 10px;
	}
	button.prev,
	button.next {
		width: 40px;
		height: 40px;
	}
	.contCardHero, .contPost {
		padding: 20px;
	}
	.contCardHero, .contPost, .innerContPost {
		grid-gap: 10px;
	}
	h2.titleCardHero, h2.titlePost {
		font-size: 25px;
		line-height: 28px;
	}
	.contTitleCat {
		margin-bottom: 40px;
	}
	h2.titleCat {
		font-size: 50px;
		line-height: 50px;
	}
	.listPost {
		grid-gap: 40px 30px;
	}
	.postCat {
		flex: 0 1 calc((100% - 60px) / 3);
	}
	.second {
		margin-top: 60px;
	}
}