/*
Theme Name: Brunelli Advogados
Theme URI: http://www.fc.net.br/
Author: Fabiano Coelho
Author URI: http://www.fc.net.br/
Description: Site de Brunelli Advogados | 2021
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700&family=Roboto:wght@400&display=swap');

:root {
	--karla: 'Karla', sans-serif;
	--roboto: 'Roboto', sans-serif;
	--clr-blue: #1E9CF8;
	--clr-dark: #21252c;
	--clr-primary: #fff;
	--clr-badge: #545E71;
	--clr-card: rgba(0, 0, 0, 0.1);
}

html, body {
	height: 100%;
}

body {
	font: 300 18px/24px 'Karla', sans-serif;
	color: var(--clr-primary);
	background-image: url('assets/img/bg-dark.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-color: var(--clr-dark);
	background-attachment: fixed;
}

a {
	text-decoration: none;
	color: var(--clr-blue);
	transition: .5s;
	font-weight: 300;
	padding-bottom: 3px;
}

a:hover {
	color: var(--clr-blue);
}

.hidden {
	display: none;
}

pre {
	font-family: 'Courier New', Courier, monospace;
	white-space: pre-wrap;
	padding: 1rem;
	border: 1px solid var(--clr-badge);
	background-color: var(--clr-card);
	border-radius: 4px;
}

.wp-block-pullquote p {
	font-size: inherit;
}

.bg-light {
	/* background-color: rgba(38, 43, 51, 0.3) !important; */
	background-color: transparent !important;
}

/* @group Fonts */

.karla {
	font-family: var(--karla);
}

.roboto {
	font-family: var(--roboto);
}

.extralight {
	font-weight: 200;
}

.light {
	font-weight: 300;
}

.medium {
	font-weight: 400;
}

.title {
	font-size: 3.8rem !important;
	line-height: 3.8rem !important;
}

.f-10 {
	font-size: 1rem;
}

.f-20 {
	font-size: 1.2rem;
}

.f-30 {
	font-size: 2.5rem;
	line-height: 2.6rem;
}

.f-40 {
	font-size: 3rem;
	line-height: 2.8rem;
}

.l-2 {
	line-height: 2rem;
}

.l-40 {
	line-height: 2.5rem;
}

.regular {
	font-weight: 400;
}

.bold, strong {
	font-weight: 500;
}

.semibold {
	font-weight: 500;
}

.dark {
	color: var(--clr-primary);
}

.silver {
	color: #c9c9c9;
}

.footer-social-icons {
	font-size: 1.8rem !important;
}

.footer-social-icons:hover {
	color: #a4a4a4 !important;
}

.white {
	color: white !important;
}

/* @end */

/* @group Margin & Padding */

.nomargin {
	margin: 0;
	padding: 0;
}

/* @end */

/* @group Buttons */

.bt-transp {
	border: 1px solid var(--clr-primary);
	text-transform: uppercase;
	font-size: .8rem;
	padding: 10px 38px;
	color: var(--clr-primary);
	text-decoration: none !important;
	font-weight: 600;
	letter-spacing: .1rem;
	border-radius: 6px;
}

.bt-transp:hover {
	color: var(--clr-primary);
	background-color: var(--clr-blue);
	border-color: var(--clr-blue);
}

/* @end */

/* @group Navbar */

.logo {
	width: 213px;
}

.navbar {
	font-family: var(--karla);
	font-size: 16px !important;
}

.navbar-brand {
	margin-right: 40px;
}

.navbar-nav a {
	margin-right: 22px;
	color: var(--clr-primary);
}

.navbar-nav a:hover {
	color: var(--clr-blue);
}

/* @end */

/* @group Footer */

.footer {
	font-size: 1rem;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.bg-footer {
	background-color: rgba(38, 43, 51, 0.3);
}

.footer-ul {
	list-style: none;
	margin-left: -30px;
	line-height: 1.5rem;
}

.footer-ul li {
	margin-bottom: .8rem;
}

.footer-ul li a {
	color: var(--clr-primary);
	text-decoration: none;
	font-weight: 200;
}

.footer-ul li a:hover {
	color: var(--clr-blue);
}

.footer-title {
	font-size: 1.6rem;
	font-weight: 500;
	margin: 2rem 0 !important;
	letter-spacing: -1px;
}

.icon-social:hover {
	opacity: .4;
}

.copyright {
	font-size: .9rem;
	font-weight: 200;
}

.copyright p {
	margin: 0;
	padding: 0;
	line-height: 1.2rem;
}

/* @end */

/* @group Lists */

.ul-inline {
	list-style: none;
	margin-left: -30px;
	display: block;
}

.ul-inline li {
	display: inline;
	margin-right: 10px;
}

/* @end */


/* @group Page template */

#page_content h1, h2, h3, h4, h5, h6 {
	color: var(--clr-blue);
	font-weight: 300 !important;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#page_content h1 {
	font-size: 2.5rem;
}

#page_content h2 {
	font-size: 2rem;
}

#page_content h3 {
	font-size: 1.8rem;
}

#page_content h4 {
	font-size: 1.4rem;
}

#page_content h5 {
	font-size: 1.2rem;
}

#page_content h6 {
	font-size: 1rem;
}

#page_content p {
	margin: 1.6rem 0;
}

#page_content ol li {
	margin: 1rem 0;
}

#page_content img {
	height: 100% !important;
	margin: 20px 0;
}

.wp-block-image.is-style-circle-mask img, .wp-block-image.is-style-rounded img {
	border-radius: 20px !important;
}

#page_content blockquote {
	border-left: .2rem solid var(--clr-primary);
	padding-left: 1rem;
	font-style: italic;
}

/* @end */

/* @group Single Page */

#single_content blockquote {
	border-left: .2rem solid var(--clr-primary);
	padding-left: 1rem;
	font-style: italic;
}

.single_content-title {
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 3rem;
}

.reading-time {
	background-color: var(--clr-badge);
	color: var(--clr-primary);
	font-size: .75rem;
	font-weight: 400;
	border-radius: 10px;
	letter-spacing: 0.5px;
	font-family: var(--roboto);
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: fit-content;
}

.social-share:hover {
	color: var(--clr-blue);
}

.card {
	border: none !important;
	background-color: var(--clr-card);
}

.card-title {
	font-weight: 500;
	line-height: 26px;
	letter-spacing: -1.2px;
	text-decoration: none;
}

.card-text {
	color: var(--clr-primary);
	line-height: 20px;
}

.card-img-top {
	max-height: 110px;
	object-fit: cover;
}

/* @end */

/* @group Width & Divs */

.w-50 {
	display: flex;
	width: 50%;
	margin-right: auto;
	margin-left: auto;
}

/* @end */

/* @group Pagination */

.pagination a {
	color: var(--clr-blue);
	font-size: .9rem;
}

.pagination .page-numbers {
	text-decoration: none;
	padding: 5px 10px;
	margin-right: 8px;
	border: 1px solid var(--clr-card);
	color: var(--clr-primary);
	border-radius: 3px;
}

.pagination .page-numbers:hover {
	background-color: var(--clr-badge);
	color: white;
}

.pagination .current {
	padding: 5px 10px;
	background-color: var(--clr-badge);
	color: var(--clr-primary);
	border: none;
	font-size: .9rem !important;
}

.pagination .next, .pagination .prev {
	background-color: var(--clr-primary);
	background-color: var(--clr-card);
}

.pagination .next:hover {
	background-color: var(--clr-badge);
	color: var(--clr-primary);
}

/* @end */

/* @group Background */

.img-bg {
	background: url('assets/img/bg2.png') center left no-repeat, url('assets/img/bg1.png') right center no-repeat;
}

.bg-atuacao {
	background: url('assets/img/area-atuacao.jpg') no-repeat left top;
	background-size: cover;
	color: var(--clr-primary);
	min-height: 770px;
	padding-top: 200px;
}

.bg-lightsilver {
	min-height: 670px;
	padding-top: 100px;
	padding-bottom: 100px;
}

/* @end */

/* Smartphones (portrait) ----------- */
@media (min-width: 320px) and (max-width: 640px) {

	body {
		background-repeat: repeat-y;
		background-size: initial;
		background-position: top right;
	}

	.title {
		font-size: 3.5rem !important;
		line-height: 3.3rem !important;
		letter-spacing: -2px !important;
	}

	.logo {
		width: 170px;
	}

	.navbar-brand {
		margin-right: 90px;
	}

	.navbar-center-sm {
		text-align: center;
	}

	.navbar-toggler-icon {
		color: var(--clr-primary);
	}

	.index-img {
		width: 88%;
	}

	.bg-atuacao {
		min-height: 770px;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.bg-lightsilver {
		padding-top: 50px;
		padding-bottom: 50px;
		min-height: 770px;
	}

	.bt-transp {
		font-size: .7rem;
		padding: 10px 24px;
		font-weight: 600;
		letter-spacing: .1rem;
		border-radius: 6px;
	}

	.footer-ul {
		line-height: 1.5rem;
	}

	.footer-ul li {
		margin-bottom: .5rem;
	}

	#page_content, #single_content {
		font-size: 1rem;
	}

	#page_content h1, h2, h3, h4, h5, h6 {
		font-weight: 400 !important;
		letter-spacing: -1px !important;
	}

	#single_content h1, h2, h3, h4, h5, h6 {
		font-weight: 400;
	}

	#page_content h1, #single_content h1 {
		font-size: 2rem;
	}

	#page_content h2, #single_content h2 {
		font-size: 1.8rem;
	}

	#page_content h3, #single_content h3 {
		font-size: 1.6rem;
	}

	#page_content h4, #single_content h4 {
		font-size: 1.4rem;
	}

	#page_content h5, #single_content h5 {
		font-size: 1.2rem;
	}

	#page_content h6, #single_content h6 {
		font-size: 1rem !important;
	}
}