/*
 * Brand-specific complement to bootstrap.css.
 * Layout (grid, spacing, alignment, vertical centering) is handled by
 * Bootstrap's own utility classes in the markup. This file only holds
 * what Bootstrap has no utility for: brand colors, background images,
 * fixed brand components (hero, buttons, slider, header/footer chrome).
 */

/* base */
article, figcaption, figure, footer, header, nav, section {
	display: block
}
#contentShow * {
	font-family: "Segoe UI", Verdana, Sans-Serif
}
#contentShow h1, #contentShow h1 * {
	font-weight: 400;
	font-family: Georgia, Serif
}
#contentShow h2, #contentShow h2 *, #contentShow h3, #contentShow h3 * {
	font-family: 'Segoe UI', sans-serif;
	font-weight: 400
}
#Content {
	margin-top: 116px
}
@media only screen and (min-width:560px) {
	#Content { margin-top: 144px }
}
@media only screen and (min-width:860px) {
	#Content { margin-top: 110px }
}
#ContactFooter, #pageShowTitle {
	display: none
}
#Content section {
	clear: both;
	margin: 0;
	margin-top: 30px
}
#Content section.first {
	margin-top: -64px
}
@media only screen and (min-width: 860px) {
	#Content section.first { margin-top: -30px }
}
#Content .wrapper {
	max-width: 100%;
	padding: 0;
}
.container-thin {
	max-width: 720px;
}
/* Bootstrap ships text-center/text-md-start etc. but no responsive
   text-justify utility; this is the one alignment rule Bootstrap has
   no built-in equivalent for. */
@media only screen and (min-width:728px) {
	.text-justify-md { text-align: justify; }
}

/* section chrome */
.gray {
	background-color: #f3f3f5
}
.blue {
	background: #01386d;
}
.blue * {
	color: #fff;
}
.module {
	padding: 40px 0;
}
@media only screen and (min-width:728px) {
	.module {
		height: 600px;
	}
}

/* fonts */
h1, h1 * { color: #333; font-size: 1.5rem }
h2, h2 * { color: #333; font-size: 1.2rem }
h3, h3 * { color: #333; font-size: 1.1rem }
h4, h4 * { color: #333 }
#Content h1, #Content h1 *, #Content h2, #Content h2 *, #Content h3, #Content h3 *, #Content h4, #Content h4 * {
	line-height: 120%
}
h1 sup, h2 sup, h3 sup {
	color: inherit;
	font-size: .4em;
	padding-left: .1rem
}
sup {
	font-size: .6em;
	padding-left: .1rem
}
strong, sup {
	color: inherit
}
strong {
	font-weight: 700;
	font-size: inherit
}
#Content p {
	padding: 20px 0
}
#Content p+p {
	padding: 0 0 20px;
}
#Content p+p:last-of-type {
	padding: 0;
}
#Content h2+p {
	padding-top: 0
}
#Content * {
	line-height: 150%
}
a {
	color: #004e96
}
#middlesite a, #middlesite a *, #MiddleFooter a, #MiddleFooter a * {
	transition: all .4s ease-in-out
}
@media only screen and (min-width:420px) {
	h1, h1 * { font-size: 1.6rem }
}
@media only screen and (min-width:960px) {
	h1, h1 * { font-size: 2rem }
	h2, h2 * { font-size: calc(4rem / 3) }
}

.text-gradient {
	color: var(--cx-purple) !important;
	background: -webkit-linear-gradient(30deg, #9b59b6 5%, #004e96 110%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 600;
}
@media (min-width: 1024px) {
	.text-gradient {
		display: inline-block;
		max-width: 60%;
		white-space: normal;
		overflow-wrap: break-word;
	}
}

/* buttons & inputs */
input, select, textarea {
	border: 1px solid #C0C5D1
}
input.button { border: 0 }
::-webkit-input-placeholder { color: #9FA5B8 }
:-moz-placeholder { color: #9FA5B8 }
::-moz-placeholder { color: #9FA5B8 }
:-ms-input-placeholder { color: #9FA5B8 }
.blue select, .blue select option, .blue textarea { color: #333; }
.blue select:invalid { color: #9FA5B8 }
input[type=button], input[type=password], input[type=submit], input[type=text], textarea {
	-webkit-appearance: none;
	-webkit-border-radius: 0
}
.button, input[type=button].button, input[type=password].button, input[type=submit].button {
	transition: background .4s ease;
	border-radius: 5px;
	cursor: pointer;
}
a.button, input.button, div.button {
	display: inline-block;
	min-width: 100px;
	font-size: 14px;
	padding: 12px 20px;
	text-align: center;
	cursor: pointer;
	min-height: 48px;
	line-height: 25px
}
#middlesite a.button, #middlesite a.button:hover, #middlesite div.button:hover, #middlesite input.button, #middlesite input.button:hover, .button.orange, .button.gold:hover {
	color: #FFF
}
.button.orange, .Button.Orange {
	background-color: #F90;
	color: #FFF;
	border: 0
}
.button.gold, #middlesite .button.gold {
	border: 1px solid;
	color: #edcd6e;
	display: inline-block;
}
.button.orange:hover { background-color: #FF8000 }
#middlesite a.button.gold, #middlesite a.button.gold * { transition: none; }
button.button.gold { background-color: transparent; height: 48px; }
.Ghost { display: none; }
#QuizForm input { border: 0; }
a svg { vertical-align: middle; margin-right: 10px; }
a.gold svg { fill: #edcd6e; stroke: #edcd6e; }
a.gold:hover svg { fill: #fff; stroke: #fff; }
.botao-download {
	background-color: #004E96;
	color: white;
	font-size: 14px;
	padding: 14px 20px;
	text-decoration: none;
	border-radius: 5px;
	display: inline-block;
}
.botao-download:hover { background-color: #01386D; }

/* header */
header {
	top: 0;
	left: 0;
	height: 80px;
	background-color: #012549;
	width: 100%;
	z-index: 10;
	position: absolute
}
@media only screen and (min-width:960px) {
	header { position: fixed }
}
header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 10px;
}
@media only screen and (min-width:728px) {
	header .container { padding: 0 20px; }
}
header .hgroup img, #HeaderLogo img {
	height: 45px;
	width: auto;
}
@media only screen and (min-width: 480px) {
	header .hgroup img, #HeaderLogo img { height: 64px; }
}
#HeaderLogo {
	flex-grow: 2;
}
#HeaderMenu {
	display: inline-block;
	padding: 15px 0 15px 15px;
}

/* footer */
footer { clear: both }
#LastFooter {
	background-color: #012549;
	padding: 10px
}
#LastFooter a, #LastFooter span {
	color: #EDCD6C;
	font-size: 14px
}

/* hero */
#hero {
	height: calc(100vh - 150px);
	max-height: 600px;
	background: #01386d no-repeat 50% 50%/cover;
	background-image: url('../imgs/bg-hero.webp');
	position: relative;
}
#hero .hero-image {
	position: absolute;
	width: 100%;
	height: calc(100vh - 150px);
	max-height: 600px;
	background: url('../imgs/hero-showcase.webp') no-repeat calc(50% + 30px) 100%/auto 250px;
}
#hero .hero-text {
	padding: 50px 20px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	position: relative;
	z-index: 3;
}
#hero * { color: #fff; }
#hero p { display: none; }
#hero .SellPhoneBox { display: none; }
.hero-buttons { margin: 20px auto; }
.hero-button {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	align-items: center;
}
.hero-button a { width: 270px; margin: 5px 0; }
.hero-button>div { display: none; }
@media only screen and (min-width:728px) {
	.hero-text.middle {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
}
@media only screen and (min-width:728px) {
	#hero { height: 600px }
	#hero .hero-image {
		float: left;
		height: 350px;
		margin-top: 125px;
		background-size: auto 350px;
		background-position: calc(50% + 240px) calc(50% + 10px);
	}
	#hero .hero-text { width: 50%; float: left; }
	#hero h1 { max-width: 560px; }
	.hero-button { align-items: flex-start; }
	#hero .SellPhoneBox { display: block; }
	#hero .SellPhoneBox * { line-height: 125%; }
}
@media only screen and (min-width:860px) {
	#hero p { display: block; font-size: 24px; padding-top: 0; }
}
@media only screen and (min-width:960px) {
	#hero .hero-image { background-size: contain; background-position: calc(100% + 200px) 50%; }
	.hero-button { flex-direction: row; align-items: center; margin: 0; }
	.hero-button a { width: auto; }
	.hero-button>div { display: flex; padding: 0 10px; }
}
@media only screen and (min-width:1080px) {
	#hero .hero-image { background-size: contain; background-position: calc(50% + 300px) 50%; }
}
@media only screen and (max-width: 728px) and (max-height: 600px) {
	#hero .hero-image:after {
		position: absolute;
		width: 100%;
		height: 100%;
		content: '';
		background: #000;
		display: block;
		opacity: .4;
	}
	#hero .hero-text { padding: 10px; }
}
@media only screen and (max-width: 728px) and (max-height: 360px) {
	.SellPhoneBox { display: none; }
}
.NewSellsTitle { font-size: 18px }
.SellPhone { font-size: 24px; margin: 0 auto; font-weight: bold; }
#OpenTimeVendas, .OpenTimeVendas { font-size: 12px; }
@media only screen and (min-width : 420px) {
	.hgroup { padding: 18px 0; }
	.NewSellsTitle { font-size: 20px }
	.SellPhone { font-size: 30px; }
}

/* cta */
#cta {
	background: url(../imgs/bg-cta.jpg) no-repeat 50%/cover;
	padding: 0 10px;
}
#cta .cta-options {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: 20px auto;
}
.cta-options>div {
	max-width: 570px;
	margin: 0 auto;
}
#cta h1+p { padding-top: 10px; }
.cta-options h2 { margin-bottom: 10px; }
.cta-options p { display: none; }
.cta-options .image {
	display: block;
	height: 131px;
	width: 212px;
	margin: 0 auto;
}
#cta-cloud .image { background: url('../imgs/hidoctor-cloud.png') no-repeat 50%/212px auto; }
#cta-desktop .image { background: url('../imgs/hidoctor-desktop.png') no-repeat 50%/212px auto; }
.cta-options .button { min-width: 150px; }
@media only screen and (min-width:728px) {
	.cta-options p { display: block; }
}
@media only screen and (min-width:960px) {
	#cta .cta-options { flex-direction: row; }
}

/* section illustrations */
.imgcol { margin: 20px auto 10px; }
.imgcol.imgcol-basico { background: url('../imgs/toolbasic-96.webp') 50%/contain no-repeat; height: 96px; width: 96px; }
.imgcol.imgcol-avancado { background: url('../imgs/tooladvanced-96.webp') 50%/contain no-repeat; height: 96px; width: 96px; }
.imgcol.imgcol-transcricao { background: url('../imgs/mic-48-m.webp') 50%/contain no-repeat; height: 48px; width: 48px; }
.imgcol.imgcol-burocracia { background: url('../imgs/bolt-48-m.webp') 50%/contain no-repeat; height: 48px; width: 48px; }
.imgcol.imgcol-insights { background: url('../imgs/stethoscope-48-m.webp') 50%/contain no-repeat; height: 48px; width: 48px; }
.imgcol.imgcol-erros { background: url('../imgs/alert-48-m.webp') 50%/contain no-repeat; height: 48px; width: 48px; }
@media only screen and (min-width:1080px) {
	.imgcol { height: 96px; width: 96px; }
}
#offline .image, #financeiro .image, #medbook .image, #minipacs .image, #plataforma .image, #revista .image {
	width: 100%;
	max-width: 520px;
}
#offline .image { background: url('../imgs/sincronia.webp') 50%/contain no-repeat; height: 320px; }
#financeiro .image { background: url('../imgs/financeiro.webp') 50%/contain no-repeat; height: 284px; }
#medbook .image { background: url('../imgs/medbookapp.webp') 50%/contain no-repeat; height: 369px; }
#minipacs .image { background: url('../imgs/minipacs.webp') 50%/contain no-repeat; height: 363px; }
#plataforma .image { background: url('../imgs/plataforma.webp') 50%/contain no-repeat; height: 300px; }
#revista .image { background: url('../imgs/revista.webp') 50%/contain no-repeat; height: 280px; }
#tradicao, #tradicao * { color: #fff; text-shadow: 0 1px 2px #000; }

/* video */
#video iframe { width: 300px; height: 170px; }
@media only screen and (min-width: 480px) { #video iframe { width: 420px; height: 236px; } }
@media only screen and (min-width: 728px) { #video iframe { height: 180px; width: 320px; } }
@media only screen and (min-width: 960px) { #video iframe { height: 240px; width: 420px; } }
@media only screen and (min-width: 1200px) { #video iframe { height: 300px; width: 533px } }

.video-1x1 {
	aspect-ratio: 1 / 1;
	height: 480px;
	margin: 0 auto;
	line-height: 0;
	overflow: hidden;
}
.video-1x1 video, .video-5x4 video {
	display: block;
	height: 440px;
	object-fit: cover;
}
@media (min-width: 360px) {
	.video-1x1 { height: 400px; }
	.video-1x1 video, .video-5x4 video { height: 360px; }
}
.bg-video { object-fit: cover; border-radius: 8px; display: block; }
video { object-fit: contain; overflow-clip-margin: content-box; overflow: clip; }

#hidoctorlive .module {
	height: auto;
	min-height: 600px;
	padding-bottom: 0;
}
#hidoctorlive .video-1x1 {
	margin-top: 24px;
	position: relative;
	z-index: 1;
}

/* subscribe form (unused legacy block kept functional) */
#subscribe input, #subscribe .button, #subscribe select, #subscribe textarea { min-width: 240px; }
#subscribe input { color: #333; }
#subscribe textarea { height: 80px; }
input[type="text"], input[type="email"], #subscribe select, #subscribe textarea {
	display: block;
	margin: 0 auto;
	padding: 10px 20px;
	margin-bottom: 10px;
	border-radius: 4px;
}
#Content #FormText { padding: 0; }
p.obs, p.obs * { margin-top: 0; }
#MiddleFooter .button.orange { margin-top: 20px; }
footer li .Social { margin: 0 5px; }
@media only screen and (min-width : 420px) {
	#subscribe input, #subscribe .button, #subscribe select, #subscribe textarea { min-width: 360px; }
}

/* testimonial slider (class names are also used by res/script.js / footer.html slider script) */
#Content .center { text-align: center; }
#fadeDepo.sliderWrapper {
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 100%;
	margin-top: 20px;
}
#fadeDepo.sliderWrapper .slider {
	overflow: hidden;
	height: 290px;
	position: relative;
	width: 100%;
}
#fadeDepo.sliderWrapper .slider .slide {
	background: #f3f3f5;
	flex-direction: column;
	font-size: 24px;
	height: 100%;
	justify-content: space-around;
	margin: 0 auto;
	padding-top: 150px;
	text-align: center;
	width: calc(100% - 60px);
}
#fadeDepo.sliderWrapper .slider .slide blockquote {
	font-size: 1rem;
	margin-bottom: .5rem;
	font-style: italic;
	padding: 0 20px;
	line-height: 110%;
}
#middlesite blockquote:before { content: '\201C' }
#middlesite blockquote:after { content: '\201D' }
#fadeDepo.sliderWrapper .slider .slide .customerName { font-weight: bold; line-height: 100%; }
.customerSpecialty { font-size: .85rem; }
.customerSince { font-size: .85rem; color: #9FA5B8; }
.customerSince:before { content: 'Usu\00e1rio HiDoctor\00ae  desde '; }
#fadeDepo.sliderWrapper .slider-navigation {
	top: 10px;
	color: #333;
	left: calc(50% - 140px);
	width: 280px;
	text-align: center;
	position: absolute;
	z-index: 3;
}
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item {
	cursor: pointer;
	opacity: 0.3;
	border-radius: 100%;
	display: none;
	margin-left: 3px;
	margin-right: 3px;
	text-indent: -9999px;
	width: 60px;
	height: 60px;
	background-position: 50% 50%;
	background-size: 100%;
	transition: opacity .3s ease-in-out;
}
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item.active {
	width: 100px;
	height: 100px;
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: ease;
	opacity: 1;
}
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item.prev,
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item.active,
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item.next {
	display: inline-block;
}
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item.next,
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item.prev {
	margin-top: 20px;
}
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item.prev { float: left; }
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item.next { float: right; }
#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item:hover { opacity: 1; }
.slider-navigation-item-AnaElisaEvangelista { background-image: url('../depoimentos/AnaElisaEvangelista.jpg'); }
.slider-navigation-item-DanielKamlot { background-image: url('../depoimentos/DanielKamlot.jpg'); }
.slider-navigation-item-DeniseLellis { background-image: url('../depoimentos/DeniseLellis.jpg'); }
.slider-navigation-item-EdianeAvila { background-image: url('../depoimentos/EdianeAvila.jpg'); }
.slider-navigation-item-GustavoSolano { background-image: url('../depoimentos/GustavoSolano.jpg'); }
.slider-navigation-item-JosePauloPereira { background-image: url('../depoimentos/JosePauloPereira.jpg'); }
.slider-navigation-item-MarceloGiacobbe { background-image: url('../depoimentos/MarceloGiacobbe.jpg'); }
.slider-navigation-item-MariaAparecidaHabermann { background-image: url('../depoimentos/MariaAparecidaHabermann.jpg'); }
.slider-navigation-item-NageMounzer { background-image: url('../depoimentos/NageMounzer.jpg'); }
.slider-navigation-item-RodrigoLins { background-image: url('../depoimentos/RodrigoLins.jpg'); }
.slider-navigation-item-RodrigoMotta { background-image: url('../depoimentos/RodrigoMotta.jpg'); }
.slider-navigation-item-SheylaAlonso { background-image: url('../depoimentos/SheylaAlonso.jpg'); }
.slider-navigation-item-SuzaneHolzhacker { background-image: url('../depoimentos/SuzaneHolzhacker.jpg'); }
#fadeDepo.sliderWrapper .slider-directions .slider-directions-prev,
#fadeDepo.sliderWrapper .slider-directions .slider-directions-next {
	cursor: pointer;
	text-align: center;
	font-size: 0;
	font-weight: bolder;
	color: #FFF;
	height: 80px;
	position: absolute;
	bottom: 63%;
	width: 48px;
	z-index: 4;
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: ease;
}
#fadeDepo.sliderWrapper .slider-directions .slider-directions-prev { left: 0; }
#fadeDepo.sliderWrapper .slider-directions .slider-directions-next { right: 0; }
#fadeDepo.sliderWrapper .slider-directions .slider-directions-next:after,
#fadeDepo.sliderWrapper .slider-directions .slider-directions-prev:after {
	content: "_";
	background-image: url('../depoimentos/arrow-left-off.png');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: relative;
	height: 100%;
	display: block;
}
#fadeDepo.sliderWrapper .slider-directions .slider-directions-next:after { transform: rotate(180deg); }
#fadeDepo.sliderWrapper .slider-directions .slider-directions-prev:hover:after,
#fadeDepo.sliderWrapper .slider-directions .slider-directions-next:hover:after {
	background-image: url('../depoimentos/arrow-on.png');
}
@media screen and (min-width: 860px) {
	#fadeDepo.sliderWrapper { width: 80%; }
	#fadeDepo.sliderWrapper, #fadeDepo.sliderWrapper .slider { max-width: 960px; }
	#fadeDepo.sliderWrapper .slider .slide { padding-top: 150px; }
	#fadeDepo.sliderWrapper .slider-navigation { left: calc(50% - 160px); width: 320px; }
	#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item { width: 60px; height: 60px; }
	#fadeDepo.sliderWrapper .slider-navigation .slider-navigation-item.active { width: 100px; height: 100px; }
	#fadeDepo.sliderWrapper .slider-directions .slider-directions-prev,
	#fadeDepo.sliderWrapper .slider-directions .slider-directions-next { bottom: 55%; }
}