/*
 Theme Name:   Colativo
 Theme URI:    https://colativo.com.br/
 Description:  Tema exclusivo do site do Colativo.
 Author:       Colativo
 Author URI:   https://colativo.com.br/
 Version:      1.0.0
 License: GPL
 License URI: http://www.gnu.org/copyleft/gpl.html
 Text Domain:  colativo
*/


@import url('https://use.typekit.net/xqp0gwc.css');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;1,400;1,700&display=swap');



@charset 'UTF-8';
/* var */
:root {
	--bloco-lado: calc( 100% / 20 );

	--preto: #000000;
	--preto-transp: #000000aa;
	--branco: #FFFFFF;
	--magenta: #ED186A;
	--amarelo: #ECE725;
	--roxo: #814F9F;
	--verde: #72CAC2;
	--laranja: #F37421;

	--erro: #FF6577;
	--errobg: #F8E0E0;
	--sucesso: #31C29F;
	--sucessobg: #31C29F33;
	--atencao: #FFC107;
	--atencaobg: #FCF8E3;
}



* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}
html {
	height: 100%;
	text-rendering: geometricPrecision;
	font-family: 'Raleway', sans-serif;
	font-size: 24px;
	line-height: 1.3;
}
body {
	color: var(--branco);
	margin: 0;
	background: var(--preto);
	min-height: 100%;
}

body.admin-bar {
	margin-top: -32px;
}

a {
	transition: 0.2s color;
}

a.skip-link {
	position: fixed;
	z-index: 1000;
	top: 0px;
	right: 0px;
	display: block;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

img {
	max-width: 100%;
	height: auto;
}

.container {
	width: 1168px;
	max-width: calc( 100% - 144px );
	margin: auto;
	position: relative;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Alfarn', sans-serif;
	line-height: 1;
	text-transform: uppercase;
	font-weight: normal;
}

h1, h2 {
	font-size: 1.5rem;
}

section {
	padding: 55px 0 105px;
}


#single-wrapper {
	overflow: hidden;
}


/**
 * FORMS
 */
.btn {
	font-size: 0.875rem;
	height: 51px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 10px 25px;
	border: 1px solid var(--amarelo);
	transition: 0.2s border-color;
	color: var(--branco);
	text-decoration: none;
}
.btn:hover {
	border-color: var(--magenta);
}



/**
 * HOME - INTRO
 */
.titulo-secao-p {
	font-family: Raleway, sans-serif;
	font-weight: normal;
	font-size: 18px;
}
.titulo-secao-p span {
	text-transform: none;
}

/**
 * HOME - INTRO
 */
#intro {
	padding-top: 20px;
	padding-bottom: 190px;
}
#intro h2 {
	font-size: 2rem;
}
#intro h2 span {
	display: block;
}
#intro p {
	width: 38%;
}
#intro .btn {
	margin-top: 38px;
}


/**
 * HOME - CASE
 */
.case {
	position: relative;
}
.case-box {
	opacity: 0.2;
	transition: 0.5s opacity ease-out;
}
.case-box * {
	pointer-events: none;
}
.case-box.emtela {
	opacity: 1;
	transition: 0.5s opacity cubic-bezier(.81,.12,.77,.99);
}
.case-box img {
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	height: 100%;
	height: 80%;
	transition: 0.5s height ease-out;
}
.case-box.emtela img {
	height: 100%;
	transition: 0.5s height cubic-bezier(.81,.12,.77,.99) 0.1s;
}
.case a {
	color: var(--branco);
	text-decoration: none;
	display: block;
}
.case h3 {
	font-size: 36px;
	margin-bottom: -1.2rem;
	position: relative;
	z-index: 2;
	margin-top: 2.5rem;
	max-width: 32%;
}
.case h3 span {
	display: block;
}
.case-box {
	padding-top: 39.5%;
	left: 50%; /* mesmo do boson-container  */
	transform: translateX(-50%); /* mesmo do boson-container  */
	width: 88%; /* mesmo do boson-container  */
	position: relative;
	z-index: 1;
}
.case-box h4 {
	font-family: Raleway, sans-serif;
	font-weight: normal;
	font-size: 0.5rem;
	position: absolute;
	top: -1.6rem;
	left: 30.72%;
	margin: 0 0;
/*	color: var(--amarelo);*/
}
#case-secao-0 {
	padding-bottom: 0;
	margin-bottom: -65px;
}


/**
 * TAMANHOS DE LETRA EM TELAS INTERMEDIÁRIAS.
 */
@media (min-width: 768px) and (max-width: 1310px) {
	html {
		font-size: 1.8vw;
	}
}


@media (max-width: 1310px) {
	section {
		padding: 4.2vw 0 8vw;
	}
	#intro {
		padding-top: 1.52vw;
		padding-bottom: 14.5vw;
	}
}


/**
 * MOBILE.
 */
@media (max-width: 767px) {
	html {
		font-size: 20px;
	}
	.container {
		max-width: calc( 100% - 50px );
		margin-left: 25px;
		margin-right: 0;
	}
	h1, h2, h3, h4, h5, h6 {
		line-height: 1.1;
	}
	#intro h2 {
		font-size: 1.2rem;
		width: 60%;
	}
/*	#intro h2 br,*/
	#intro h2 span {
		display: none;
	}
	#intro p {
		width: 50%;
		font-size: 0.8rem;
	}
	.case h3 {
		width: auto;
		max-width: 100%;
		margin-bottom: 0.8rem;
		font-size: 28px;
	}
	.case h3 br,
	.case h3 span {
		display: none;
	}
	.case-box h4 {
		top: 0;
		left: 0;
		z-index: 2;
	}
}
@media (max-width: 480px) {
	html {
		font-size: 16px;
	}
	h1, h2, h3, h4, h5, h6 {
		line-height: 1.1;
	}
	#intro {
		padding-bottom: 40.6vw;
		padding-top: 45px;
	}
	#intro h2 {
		width: 100%;
	}
	#intro p {
		width: 100%;
		font-size: 1rem;
	}
	.case-box {
		width: 100%;
		padding-top: 47%;
	}
	.boson-container {
		margin-top: 150px;
	}
}
@media (max-width: 420px) {
	.boson-container {
		margin-top: 180px;
	}
}
@media (max-width: 370px) {
	.boson-container {
		margin-top: 224px;
	}
	#intro .btn {
		padding: 10px;
		height: 40px;
	}
}


/**
 * Grid.
 */
.pos-relative {
	position: relative;
}
.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: -16px;
	margin-right: -16px;
}
.col-1-de-8,
.col-2-de-8,
.col-3-de-8,
.col-4-de-8,
.col-5-de-8,
.col-6-de-8,
.col-7-de-8,
.col-8-de-8,
.col-1-de-10,
.col-2-de-10,
.col-3-de-10,
.col-4-de-10,
.col-5-de-10,
.col-6-de-10,
.col-7-de-10,
.col-8-de-10,
.col-1-de-12,
.col-2-de-12,
.col-3-de-12,
.col-4-de-12,
.col-5-de-12,
.col-6-de-12,
.col-7-de-12,
.col-8-de-12,
.col-9-de-12,
.col-10-de-12,
.col-11-de-12,
.col-12-de-12 {
	padding: 0 16px;
	min-height: 1px;
}

.col-1-de-8 { width: 12.5%; }
.col-2-de-8 { width: 25%; }
.col-3-de-8 { width: 37.5%; }
.col-4-de-8 { width: 50%; }
.col-5-de-8 { width: 62.5%; }
.col-6-de-8 { width: 75%; }
.col-7-de-8 { width: 87.5%; }
.col-8-de-8 { width: 100%; }
.push-1-de-8 { margin-left: 12.5%; }
.push-2-de-8 { margin-left: 25%; }
.push-3-de-8 { margin-left: 37.5%; }
.push-4-de-8 { margin-left: 50%; }
.push-5-de-8 { margin-left: 62.5%; }
.push-6-de-8 { margin-left: 75%; }
.push-7-de-8 { margin-left: 87.5%; }

.col-1-de-10 { width: 10%; }
.col-2-de-10 { width: 20%; }
.col-3-de-10 { width: 30%; }
.col-4-de-10 { width: 40%; }
.col-5-de-10 { width: 50%; }
.col-6-de-10 { width: 60%; }
.col-7-de-10 { width: 70%; }
.col-8-de-10 { width: 80%; }
.col-9-de-10 { width: 90%; }
.col-10-de-10 { width: 100%; }
.push-1-de-10 { margin-left: 10%; }
.push-2-de-10 { margin-left: 20%; }
.push-3-de-10 { margin-left: 30%; }
.push-4-de-10 { margin-left: 40%; }
.push-5-de-10 { margin-left: 50%; }
.push-6-de-10 { margin-left: 60%; }
.push-7-de-10 { margin-left: 70%; }
.push-8-de-10 { margin-left: 80%; }
.push-9-de-10 { margin-left: 90%; }

.col-1-de-12 { width: 8.33%; }
.col-2-de-12 { width: 16.66%; }
.col-3-de-12 { width: 25%; }
.col-4-de-12 { width: 33.33%; }
.col-5-de-12 { width: 41.66%; }
.col-6-de-12 { width: 50%; }
.col-7-de-12 { width: 58.33%; }
.col-8-de-12 { width: 66.66%; }
.col-9-de-12 { width: 75%; }
.col-10-de-12 { width: 83.33%; }
.col-11-de-12 { width: 91.66%; }
.col-12-de-12 { width: 100%; }
.push-1-de-12 { margin-left: 8.33%; }
.push-2-de-12 { margin-left: 16.66%; }
.push-3-de-12 { margin-left: 25%; }
.push-4-de-12 { margin-left: 33.33%; }
.push-5-de-12 { margin-left: 41.66%; }
.push-6-de-12 { margin-left: 50%; }
.push-7-de-12 { margin-left: 58.33%; }
.push-8-de-12 { margin-left: 66.66%; }
.push-9-de-12 { margin-left: 75%; }
.push-10-de-12 { margin-left: 83.33%; }
.push-11-de-12 { margin-left: 91.66%; }

@media (max-width: 767px) {
	.col-1-de-8,
	.col-2-de-8,
	.col-3-de-8,
	.col-4-de-8,
	.col-5-de-8,
	.col-6-de-8,
	.col-7-de-8,
	.col-8-de-8,
	.col-1-de-10,
	.col-2-de-10,
	.col-3-de-10,
	.col-4-de-10,
	.col-5-de-10,
	.col-6-de-10,
	.col-7-de-10,
	.col-8-de-10,
	.col-1-de-12,
	.col-2-de-12,
	.col-3-de-12,
	.col-4-de-12,
	.col-5-de-12,
	.col-6-de-12,
	.col-7-de-12,
	.col-8-de-12,
	.col-9-de-12,
	.col-10-de-12,
	.col-11-de-12,
	.col-12-de-12 {
		width: 100%;
	}
	.push-1-de-8,
	.push-2-de-8,
	.push-3-de-8,
	.push-4-de-8,
	.push-5-de-8,
	.push-6-de-8,
	.push-7-de-8,
	.push-1-de-10,
	.push-2-de-10,
	.push-3-de-10,
	.push-4-de-10,
	.push-5-de-10,
	.push-6-de-10,
	.push-7-de-10,
	.push-8-de-10,
	.push-9-de-10,
	.push-1-de-12,
	.push-2-de-12,
	.push-3-de-12,
	.push-4-de-12,
	.push-5-de-12,
	.push-6-de-12,
	.push-7-de-12,
	.push-8-de-12,
	.push-9-de-12,
	.push-10-de-12,
	.push-11-de-12 {
		margin-left: 0;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.col-md-4-de-12 {
		width: 33.33%;
	}
	.push-md-1-de-12 {
		margin-left: 8.33%;
	}
}
@media (min-width: 546px) and (max-width: 767px) {
	.col-sm-6-de-12 {
		width: 50%
	}

	.col-sm-6-de-10 {
		width: 60%
	}
	.push-sm-4-de-10 {
		margin-left: 40%;
	}
}
@media (max-width: 545px) {
	.col-xs-6-de-12 {
		width: 50%
	}
}

.caixa {
	width: calc( 83.33% + 64px );
	margin: auto;
	padding: 72px 79px;
	position: relative;
}
@media (max-width: 1440px) {
	.caixa {
		padding: 5vw 5.48vw;
	}
}
@media (max-width: 991px) {
	.caixa {
		width: 100%;
	}
}
.caixa .boson {
	right: 0;
	left: auto;
	z-index: 0;
}
.caixa > h2 {
	font-size: 1.16rem;
	margin-top: 0;
	margin-bottom: 3.3rem;
}


@media (min-width: 768px) {
	.mob {
		display: none !important;
	}
}
@media (max-width: 767px) {
	.dktp {
		display: none !important;
	}
}


/**
 * Overlay para carregamento de página com Ajax.
 */
#overlay {
	background: var(--preto);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	opacity: 0;
	display: none;
	transition: 0.4s opacity;
}
.loading #overlay {
	opacity: 1;
}
#overlay .boson {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%) scale(0.6) rotate(0deg);
	animation: loader 1.6s infinite steps(1);
}
@keyframes loader {
	0% {
		transform: translate(-50%) scale(0.6) rotate(0deg);
	}
	25% {
		transform: translate(-50%) scale(0.6) rotate(90deg);
	}
	50% {
		transform: translate(-50%) scale(0.6) rotate(180deg);
	}
	75% {
		transform: translate(-50%) scale(0.6) rotate(270deg);
	}
	100% {
		transform: translate(-50%) scale(0.6) rotate(360deg);
	}
}

/**
 * Modal.
 */
#modal {
	background: var(--preto);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1500;
	opacity: 0;
	display: none;
	transition: 0.4s opacity;
}
#modal.abrir {
	opacity: 1;
}