.banner {
	width: 100vw;
	min-height: 430px;
	background-color: black;
	color: #FFFFFF;
	display: flex;
	align-items: baseline;
	background: url('/wp-content/themes/JOTA/theme-2022/assets/banner-pro.png') no-repeat;
	background-attachment: inherit;
	background-position: right;
	background-size: contain;
	background-position-x: right;
	background-position-y: top;
	background-color: #1F2128;
}

@media screen and (max-width: 1000px) {
	.banner {
		background: #1F2128;
	}
}

.banner-line {
	border: 2px solid #FFFFFF;
	width: 142px;
	margin-right: 16px;
}

@media screen and (max-width: 550px) {
	.banner-line {
		display: none;
	}
}

.banner-text {
	padding: 44px 0;
}

@media screen and (max-width: 550px) {
	.banner-text {
		padding: 24px;
		width: 100%;
	}
}

.banner-title-container {
	display: flex;
	align-items: center;
}

.banner-title {
	font: 700 44px/52px 'Playfair Display', normal;
	text-transform: uppercase;
	margin: 0;
}

.banner-pro {
	font: 700 20px/24px 'Roboto', normal;
	width: 58px;
	height: 34px;
	background-color: #F05841;
	border-radius: 4px;
	padding: 4px 6px;
	margin: 0 0 0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner-know-pro {
	font: 400 16px/24px 'Roboto', normal;
	color: #D3D3D9;
	padding: 18px 0 44px 0;
	margin: 0;
	max-width: 668px;
}

.verticals {
	display: flex;
}

@media screen and (max-width: 550px) {
	.verticals {
		flex-direction: column;
		width: 100%;
		max-width: 100%;
	}
}

.vertical {
	padding: 0 16px 0 0;
}

.vertical-title {
	font: 700 18px/24px 'Roboto', normal;
	margin: 0;
	padding-bottom: 12px;
}

.vertical-text {
	font: 400 16px/24px 'Roboto', normal;
	color: #D3D3D9;
	max-width: 212px;
	margin: 0;
	padding-top: 12px;
}

@media screen and (max-width: 550px) {
	.vertical-text {
		margin-bottom: 24px;
		max-width: 100%;
	}
}

.button-know-pro {
	font: 700 14px/20px 'Roboto', normal;
	text-transform: uppercase;
	color: #FFFFFF;
	background-color: #F05841;
	width: auto;
	height: 40px;
	border-radius: 4px;
	padding: 10px 16px;
	border: none;
	margin-top: 40px;
	cursor: pointer;
}

.button-know-pro:hover {
	background-color: #AF2E1D;
}

.button-know-pro:active {
	background-color: #7C1600;
}

#pro-poder {
	border-top: 2px solid #5588FF;
}

#pro-tributos {
	border-top: 2px solid #3F9B7F;
}

#pro-saude {
	border-top: 2px solid #30B1E4;
}
