/**
Theme Name: Water Molecule
Author: ETC Labs
Author URI: https://www.etc-labs.com.br
Description: Tema desenvolvido exclusivamente para o website da Cimental (https://cimental.com.br), pela ETC-Labs (https://etc-labs.com.br/)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: water-molecule
Template: astra
*/

#page .site-content {
    flex-grow: 0;
}
.ast-plain-container.ast-no-sidebar #primary,
.page .entry-header.ast-no-thumbnail,
.page .entry-header.ast-no-meta {
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom:0;
	padding-top: 0;
}
.hero {
	height: 500px;
	left: 50%;
	margin-bottom: -1px;
	margin-left: -50vw;
	margin-right: -50vw;
	position: relative;
	right: 50%;
	width: 100vw !important;
}
.hero.owl-carousel .owl-stage-outer,
.hero.owl-carousel .owl-stage-outer .owl-stage,
.hero.owl-carousel .owl-item,
.hero.owl-carousel .owl-item > div,
.hero .photo,
.hero .photo img {
	height: 100%;
}
.hero .photo img {
	object-fit: cover;
}
.hero .text, .hero .owl-nav {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}
.hero .text .box {
	background: #fff;
	right: 76px;
	padding: 15px;
	position: absolute;
	top: 35%;
	width: calc(40% - 30px);
}
@media screen and (max-width: 1023px) {
	.hero .text .box {
		width: calc(60% - 76px)
	}	
}
@media screen and (max-width: 480px) {
	.hero .text .box {
		width: calc(100% - 76px)
	}	
}
.hero .text .box h2 {
    /* color: var( --e-global-color-primary ); */
	color: #32374A;
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
    /* font-size: var( --e-global-typography-primary-font-size ); */
	font-size: 30px;
    font-weight: var( --e-global-typography-primary-font-weight );
    text-transform: var( --e-global-typography-primary-text-transform );
    /* line-height: var( --e-global-typography-primary-line-height ); */
	line-height: 34px;
    letter-spacing: var( --e-global-typography-primary-letter-spacing );
	margin-bottom: 0;
}
.hero .text .box h2 b, .hero .text .box h2 strong {
    color: var( --e-global-color-primary );
}
.hero .text .box p {
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 16px;
	line-height: 20px;
}
.hero .text .box a {
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 12px 24px;
}
.hero.owl-carousel .owl-nav button.owl-prev {
	display: none;
}
.hero.owl-carousel .owl-nav button.owl-next {
	background-color: #082161;
	color: #fff;
	font-size: 24px;
	height: 76px;
	padding: 15px;
	position: absolute;
	right: 0;
	top: calc(35% - 77px);
	width: 76px;
}
.hero.owl-carousel .owl-dots {
	display: flex;
	padding: 10px;
	position: absolute;
	right: 0;
	text-align: center;
	top: 35%;
	width: 76px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
}
.hero.owl-carousel .owl-dots button {
	flex-basis: 100%;
	height: 24px;
	transition: .3s;
	text-align: center;
	width: 100%;
}
.hero.owl-carousel .owl-dots span {
	border: 1px solid #fff;
	border-radius: 13px;
	display: inline-block;
	height: 13px;
	transition: .3s;
	width: 13px;
}
.hero.owl-carousel .owl-dots button.active span {
	background-color: #fff;
}

.timeline.owl-carousel .owl-item > div {
	border: 1px solid #fff;
	margin-right: 20px;
	overflow: hidden;
	position: relative;
}
.timeline .photo img {
	object-fit: cover;
}
.timeline .text {
	background: rgba(8, 33, 97, 0);
	height: 100%;
	padding: 15px;
	position: absolute;
	top: 72%;
	transition: 0.3s;
	width: 100%;
}
.timeline .owl-item:hover > div .text {
	background: rgba(8, 33, 97, 0.8);
	top: 0;
}
.timeline .text h2 {
	color: #fff;
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: 48px;
    font-weight: var( --e-global-typography-primary-font-weight );
    text-transform: var( --e-global-typography-primary-text-transform );
	line-height: 54px;
    letter-spacing: var( --e-global-typography-primary-letter-spacing );
	margin-bottom: 0;
}
.timeline .text p {
	color: #fff;
	line-height: 1.4em;
}
.timeline.owl-carousel .owl-nav button {
	opacity:1;
	transition: 0.3s;
}
.timeline.owl-carousel .owl-nav button.disabled {
	opacity:0.5;
}
.timeline.owl-carousel .owl-nav button.owl-prev {
	background-color: #082161;
	color: #fff;
	font-size: 24px;
	height: 76px;
	padding: 15px;
	position: absolute;
	right: 136px;
    top: -115px;
    width: 76px;
}

.timeline.owl-carousel .owl-nav button.owl-next {
	background-color: #082161;
	color: #fff;
	font-size: 24px;
	height: 76px;
	padding: 15px;
	position: absolute;
    right: 50px;
    top: -115px;
    width: 76px;
}
@media screen and (max-width: 1024px) {
	.timeline .text {
		top: 66%;
	}
}
@media screen and (max-width: 768px) {
	.timeline.owl-carousel .owl-nav button.owl-prev,
	.timeline.owl-carousel .owl-nav button.owl-next {
		top: -108px;
	}
	.timeline .text {
		top: 80%;
	}
}

@media screen and (max-width: 600px) {
	.timeline.owl-carousel .owl-nav button.owl-prev,
	.timeline.owl-carousel .owl-nav button.owl-next {
		top: 50%;
		transform: translateY(-50%);
	}
	.timeline.owl-carousel .owl-nav button.owl-prev {
		left: -1.25em;
	}
	.timeline.owl-carousel .owl-nav button.owl-next {
		right: 0;
	}
	.timeline .text {
		top: 72%;
	}
}
@media screen and (max-width: 560px) {
	.timeline .text {
		top: 70%;
	}
}
@media screen and (max-width: 510px) {
	.timeline .text {
		top: 66%;
	}
}
@media screen and (max-width: 479px) {
	.timeline .text {
		top: 83%;
	}
}
@media screen and (max-width: 420px) {
	.timeline .text {
		top: 80%;
	}
}
@media screen and (max-width: 390px) {
	.timeline .text {
		top: 77%;
	}
}


footer p {
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
}