/*
Theme Name: Caos Organizado
Author: Luan Oliveira
Author URI: https://wpcaos.com.br
Description: Caos organizado com blocos do Wordpress
Version: 1.0
*/

html {
	font-family:'Mulish',sans-serif;
}

* {
	box-sizing:border-box;
}

img {
	max-width:100%;
}

.page-archive {
	background-color:#F1F1F1;
	padding-top:338px;
	padding-bottom:100px;
}

.intro-single {
	width:100%;
	background-color:#F1F1F1;
		padding-top:338px;
}

.container-site {
	width:100%;
	max-width:1210px;
	padding:0 20px;
	margin:0 auto;
}

.intro-archive {
	margin:0 auto;
	width:100%;
	max-width:800px;
	text-align:center;
	padding:0 20px;
}

.breadcrumb {
	font-weight:700;
	color:#000000;
}

.breadcrumb a {
	color:#000000;
}

.intro-archive-title {
	font-size:48px;
	font-weight:700;
	line-height:1;
	margin-bottom:60px;
	margin-top:8px;
}

.intro-single .intro-archive-title {
	margin-bottom:0;
}

.grid-cards {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    grid-row-gap: 24px;
    grid-column-gap: 24px;
    width: 100%;
    list-style: none;
    padding: 0;
	width:100%;
	max-width:1210px;
	margin:0 auto 64px;
	padding:0 20px;
}

.card-txt p {
	margin-top:0;
}

.card-txt :last-child {
	margin-bottom:0px;
}

.nav-links {
	border:1px solid solid;
	width:100%;
	max-width:1210px;
	padding:20px;
	justify-content:center;
	align-items:center;
	display:flex;
}

/* .next e .prev*/

.page-numbers {
	border:1px solid #21A7D2;
	color:#21A7D2;
	width:28px;
	height:28px;
	aspect-ratio:1;
	border-radius:50px;
	display:flex;
	text-decoration:none;
	font-weight:600;
	font-size:13px;
	line-height:1;
	align-items:center;
	justify-content:center;
	padding-top:8px
}

.page-numbers.current, .page-numbers:hover {
	color:#ffffff;
	background-color:#21A7D2;
}


/*SINGLE*/

.intro-single {
	background-color:#F1F1F1;
	padding-top:338px;
	padding-bottom:36px;
}

.container-site {
	width:100%;
	padding:0 20px;
	max-width:1210px;
	margin:0 auto;
}

.single-body {
	width:100%;
	background: linear-gradient(180deg,#F1F1F1 126px, #ffffff 126px);
}

.archive-body {
	width:100%;
	background: #F1F1F1;
	padding-top:36px;
}

.single-content {
	display:flex;
	width:100%;
	max-width:1210px;
	margin:0 auto;
	padding: 0 20px;
}

.single-content .grid-cards {
	padding-left:0;
	padding-right:0;
}

.single-sidebar {
	width:40%;
	padding-left:48px;
}

.widget_block {
	margin-bottom:24px;
}

.single-content .page-content {
	flex-grow:1;
	width: 60%;
}

.single-thumb, .single-thumb img {
	width:100%;
	height:auto;
	display:block;
	border-radius:24px;
	aspect-ratio:8/3;
	object-fit:cover;
	margin-bottom:36px;
	background-color:#000000;
}

.ff_guten_block {
	width:100%;
}

.relacionados {
	background-color:#ECF2F4;
	padding:64px 0px 120px;
	margin-top:100px;
}

.intro-relacionados {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
	margin-bottom:36px;
	padding-right: 20px;
}

.relacionados-textos h2 {
	margin-top:0;
	margin-bottom:4px;
	font-weight: 700;
	font-style: Bold;
	font-size: 38px;
	line-height: 108%;
	letter-spacing: 0%;
}

.relacionados-textos h3 {
	margin-top:0;
	margin-bottom:4px;
	font-weight: 400;
	font-style: Regular;
	font-size: 17px;
	line-height: 130%;
	letter-spacing: 0%;
}

.btn-simple {
	font-weight: 700;
	font-size: 20px;
	line-height: 130%;
	color:#000000;
}

.btn-simple span {
text-decoration:underline;
}

.btn-simple svg {
	margin-left:4px;
}

.btn-simple svg path {
	fill:#50CDF5
}

.btn-simple:hover {
	color:#50CDF5;
}

.relacionados .container-site {
	padding-right: 0;
}

.separator > a {
    display: block;
}

.relacionados-textos {
    display: flex;
	align-items:flex-start;
}

.relacionados-textos img {
	width:68px;
	margin-right:12px;
	display:block;
}

.card-thumb img {
	object-fit: cover;
	object-position: center;
}

.intro-blog-title {
	display:flex;
	flex-wrap:wrap;
	width: 100%;
	justify-content: center;
	text-align:left;
	margin-top:8px;
	margin-bottom: 54px;
}

.intro-blog-title img {
	width: 68px;
	height: 68px;
	aspect-ratio:1;
	display: block;
	/* max-width: 95px; */
	margin-right:24px;
	margin-top:8px;
}

.intro-blog-title .intro-archive-title {
	margin-bottom:0;
	margin-top:0px;
}

.intro-blog-title .intro-archive-subtitle {
	margin-top:0;
	color: #000;
	font-family: Mulish;
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 108.3%; /* 41.154px */
	margin-bottom:0;
}


@media (max-width:1024px) {

	.intro-relacionados {
		flex-direction: column;
		align-items: flex-start;
	}

	.relacionados-textos {
		width: 100%;
		margin-bottom:8px;
	}

	.single-sidebar {
		padding-left:24px;
	}

	.intro-single {
		background-color:#F1F1F1;
		padding-top:220px;
		padding-bottom:36px;
	}
	
}

@media (max-width:767px) {

	.single-content {
		flex-wrap:wrap;
	}

	.single-content .page-content {
		width:100%;
	}
	
	.single-sidebar {
		padding-left:0px;
		width:100%;
		margin-top:48px;
	}
}

.card-destaque {
	aspect-ratio:4/2.75;
	border-radius:16px;
	overflow:hidden;
}

.card-destaque .card-destaque-link:after {
	content:"";
	width:100%;
	height:100%;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.00) 100%);
	display: flex;
	position: absolute;
	order: 1;
	left: 0;
	top: 0;
}

.card-destaque .card-destaque-link{
	position:relative;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	padding:24px;
	align-items:flex-end;
	justify-content:flex-end;
	text-decoration:none;
	color:#ffffff;
}

.card-destaque-img {
	position:absolute;
	order:-1;
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	left:0;
	top:0;
	margin:0;
}

.card-destaque .btn-simple,
.card-destaque .card-destaque-title{
	position:relative;
	order:4;

}

.card-destaque .card-destaque-title {
	text-align:left;
	color:#ffffff;

	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 105%; /* 29.4px */
}

.card-destaque .btn-simple{
	color:#ffffff;
	font-size:18px;
}

.card-destaque .btn-simple svg path {
	fill: #ffffff;
}

.posts-destaques .grid-cards {
	margin-bottom:0;
}


@media (max-width:940px) {
	.card-destaque .card-destaque-title {
		text-align:left;
		color:#ffffff;
		font-size: 21px;
		font-style: normal;
		font-weight: 700;
		line-height: 105%; /* 29.4px */
	}
	
	.intro-archive-title {
		font-size:32px;
	}
}