/************************************/

/* Criado por id3 Design & Web/2017 */

/************************************/

html, body {
    height: 100%;
    min-height: 100%;
}

body {
	.Light;
	font-size: 16px;

	color:@preto;
}


/* Opções de Posicionamento */
.fLeft { float:left; }
.fRight { float:right; }
.clearfix { clear: both; }

/* Esquema de cores */
@verde_claro: #41e79e;
@verde: #065f38;
@preto: #494f5a;
@cinza:#a9b1bc;
@cinza_claro:#ccd0d9;
@fundo: #f4f4f4;
@vermelho: #d42738;
.fundoteste { background-color:rgba(0,0,0,0.15); }
*::selection { background: lighten(@verde_claro, 10%); }
*::-moz-selection { background: lighten(@verde_claro, 10%); }

/************ Fontes */
@import url('https://fonts.googleapis.com/css?family=Merriweather:700|Montserrat:300,500');
.Light { font-family:"Montserrat"; font-weight:300; }
.Regular { font-family:"Montserrat"; font-weight:500; }
.Bold { font-family:"Merriweather"; font-weight:700; }

strong { .Regular; }

/* Perfumaria */
.escondeTexto { text-indent:-9999px; }
.cursor { cursor:pointer; }
.borda (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	-ms-border-radius: @radius;
	-o-border-radius: @radius;
	border-radius: @radius;
}
.limitaTexto {
	text-overflow: ellipsis;
	white-space: nowrap;
    overflow: hidden;
}
.boxSizing {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.center { text-align: center; }

.calc(@prop; @val) {
  @{prop}: calc(~'@{val}');
  @{prop}: -moz-calc(~'@{val}');
  @{prop}: -webkit-calc(~'@{val}');
  @{prop}: -o-calc(~'@{val}');
}

/* .calc(prop; "100% - 0px"); */

.avisoIE { display: none; }

.btn {
	padding: 23px 50px;
	background: none;
	.borda(80px);
	color: @verde;
	text-align: center;
	border:none;
	.cursor;
	margin: 10px auto;
	font-size: 18px;
	.boxSizing;
	display: block;
	border: 3px solid @verde;
	.uppercase;
	&:hover {
		background: @verde_claro;
		color: @verde;
		border-color: @verde_claro;
	}
}

.btnNeg {
	border-color: #fff;
	color: #fff;
	&:hover {
		background: #fff;
		color: @verde;
		border-color: #fff;
	}
}

.btnSmall {
	padding: 8px 18px;
	font-size: 12px;
	color: @preto;
	background: darken(@fundo, 10%);
	border: none;
}

/* Grid sizes */

.grid1 {
	width: 40px;
	@media only screen and (min-width : 1200px) { width: 55px; }
}
.grid2 {
	width: 100px;
	@media only screen and (min-width : 1200px) { width: 130px; }
}
.grid3 {
	width: 160px;
	@media only screen and (min-width : 1200px) { width: 205px; }
}
.grid4 {
	width: 220px;
	@media only screen and (min-width : 1200px) { width: 280px; }
}
.grid5 {
	width: 260px;
	@media only screen and (min-width : 1200px) { width: 355px; }
}
.grid6 {
	width: 340px;
	@media only screen and (min-width : 1200px) { width: 430px; }
}
.grid7 {
	width: 400px;
	@media only screen and (min-width : 1200px) { width: 505px; }
}
.grid8 {
	width: 460px;
	@media only screen and (min-width : 1200px) { width: 580px; }
}
.grid9 { 
	width: 520px;
	@media only screen and (min-width : 1200px) { width: 655px; }
}
.grid10 { 
	width: 580px;
	@media only screen and (min-width : 1200px) { width: 730px; }
}
.grid11 {
	width: 640px;
	@media only screen and (min-width : 1200px) { width: 805px; }
}
.grid12 {
	width: 700px;
	@media only screen and (min-width : 1200px) { width: 880px; }
}
.grid13 {
	width: 760px;
	@media only screen and (min-width : 1200px) { width: 955px; }
}
.grid14 {
	width: 820px;
	@media only screen and (min-width : 1200px) { width: 1030px; }
}
.grid15 {
	width: 880px;
	@media only screen and (min-width : 1200px) { width: 1105px; }
}
.grid16 {
	width: 940px;
	@media only screen and (min-width : 1200px) { width: 1180px; }
}



/*****##########################  SETUP DE COLUNAS  */

.cols-2 {
	display: flex;
	justify-content: center;
	.col {
		width: 50%;
		&[data-col="img"] { .fundoteste; }
		&[data-col="conteudo"] {
			padding: 60px 0;
			.boxConteudo {
				.grid8;
				.boxSizing;
			}
		}
		&[data-pos="left"] {
			.boxConteudo {
				.fRight;
				padding-right: 50px;
				text-align: right;
			}
		}
		&[data-pos="right"] {
			.boxConteudo {
				.fLeft;
				padding-left: 50px;
			}
		}
	}
}



/** Big Bang **/

.wrapper {
	width: 100%;
	min-width: 940px;
	.fLeft;
	@media only screen and (min-width : 1200px) { min-width: 1180px; }
}

.boxConteudo {
	.grid16;
	margin: auto;
	h1, h, h3, h4, h5, h6 { color: @verde; }
	h1, h2, h3 {
		.Bold;
		margin-bottom: 10px;
	}
	h1 {
		font-size: 64px;
		letter-spacing: -2px;
	}
	h2 { font-size: 34px; }
	h3 { font-size: 24px; }
	h4 {
		font-size: 18px;
		.Bold;
		color: lighten(@preto, 35%);
	}
	p {
		margin-bottom: 10px;
		line-height: 24px;
	}
}

.vertPad { padding: 60px 0; }
.fundoClaro { background: @fundo; }
.fundoEscuro {
	background: @preto;
	* { color: #fff; }
}

.uppercase {
	text-transform: uppercase;
	.Regular;
	letter-spacing: 2px;
}

/* ################################# HEADER */

.nav-topo {
	padding: 12px 0 10px 0;
	.boxConteudo {
		.ligue {
			.grid7;
			.fLeft;
			.uppercase;
			margin-bottom: 0;
			color: @verde;
			span { margin-left: 20px; }
		}
		.menu-topo {
			.fRight;
			.grid9;
			text-align: right;
			li {
				display: inline;
				color: @verde;
				line-height: 24px;
				margin-left: 60px;
				.uppercase;
				a { color: @verde; }
			}
		}
	}
}

.header-principal {
	.boxConteudo {
		height: 150px;
		.logo-principal {
			width: 240px;
			.fLeft;
			height: 100%;
			.escondeTexto;
			background: url(../imagens/logo-belloriso.svg) no-repeat center;
			background-size: contain;
		}
		.menu-principal {
			.calc(width; '100% - 260px');
			.fRight;
			text-align: right;
			li {
				display: inline;
				a {
					text-transform: uppercase;
					letter-spacing: 1px;
					color: @verde;
					margin-left: 40px;
					line-height: 150px;
					.Regular;
					&:hover {
						color: @verde_claro;
					}
				}
			}
		}
	}
}


/* ################################# PÁGINA INICIAL */


.hero {
	height: 490px;
	display: flex;
	align-items: center;
	background: url(../imagens/banner-topo.jpg) no-repeat center;
	background-size: cover;
	.boxConteudo {
		h1 {
			color: #fff;
		}
		p {
			.grid11;
			color: @verde_claro;
			font-size: 20px;
			.Light;
			line-height: 32px;
			margin-bottom: 20px;
		}
	}
}

.clinica-home {
	.col {
		.boxConteudo {
			h2 { color: @verde; }
			address {
				width: 100%;
				.fLeft;
				text-align: left;
				color: #fff;
				.uppercase;
				font-style: normal;
				margin-top: 70px;
				background: url(../imagens/pin-address.png) no-repeat left center;
				padding-left: 50px;
				.boxSizing;
				p {
					line-height: 24px;
					margin-bottom: 0;
				}
			}
		}
		&[data-pos="left"] { background: url(../imagens/clinica-home.jpg) no-repeat center right; }
	}
}

.painel-home {
	.boxSizing;
	height: 50vh;
	border-bottom: 10px solid #fff;
	transition: height .3s ease, padding .3s ease;
	background: no-repeat center;
	background-size: cover;
	.boxConteudo {
		height: 100%;
		display: flex;
		align-items: flex-end;
		.card-painel {
			width: 100%;
			background: #fff;
			display: flex;
			align-items: center;
			padding: 35px 50px;
			.boxSizing;
			box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.25);
			.borda(10px);
			span {
				.calc(width; '100% - 280px');
				padding-right: 200px;
				.boxSizing;
				* { color: @verde; }
				p {
					margin-bottom: 0;
					font-size: 18px;
				}
			}
			.btn {
				width: 280px;
			}
		}
	}
	&:hover {
		height: 55vh;
		padding: 40px;
	}
}


/* ################################# RODAPÉ */

footer {
	padding: 40px 0;
	border-top: 1px solid darken(@fundo, 7%);
	.boxConteudo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.simbolo-belloriso {
			width: 29px;
			height: 50px;
			background: url(../imagens/simbolo-belloriso.png) no-repeat left center;
		}
		.legal {
			.grid6;
			text-align: center;
			font-size: 12px;
			.Regular;
			color: @cinza;
			line-height: 18px;
		}

		.logocubi {
			width: 40px;
			height: 40px;
			.escondeTexto;
			background: url(../imagens/logocubi.png) no-repeat right center;
		}
	}
}


/* ################################# PÁGINAS INTERNAS */


.titulo-pagina {
	background: url(../imagens/banner-topo.jpg) no-repeat center;
	padding: 40px 0 25px 0;
	.boxConteudo {
		h1 {
			color: #fff;
			width: 100%;
			.fLeft;
			font-size: 54px;
			.btn {
				margin: 0;
				.fRight;
			}

		}
	}
}


/* ################################# CONHEÇA A CLINICA */


.sobre-premissa {
	background: url(../imagens/detalhe-sobre.png) no-repeat;
 	background-origin: content-box;
    background-position: bottom;
	.boxConteudo {
		p {
			.grid14;
			.center;
			font-size: 16px;
			line-height: 28px;
			.Regular;
			margin: auto;
			margin-bottom: 150px;
		}
	}
}

.sobre-localizacao {
	background: url(../imagens/fundo-endereco-sobre.jpg) no-repeat right center @fundo;
	.boxConteudo {
		p {
			background: url(../imagens/pin-sobre.png) no-repeat left center;
			padding-left: 80px;
			.boxSizing;
			.grid10;
			.fLeft;
			line-height: 28px;
		}
		.btn {
			margin-left: 80px;
			clear: both;
		}
	}
}

.sobre-servicos {
	/*background:url(../imagens/degrade-destaque-sobre.png) right repeat-y darken(@verde_claro, 10%);*/
	background: rgba(27,218,135,1);
	background: -moz-linear-gradient(left, rgba(27,218,135,1) 0%, rgba(19,194,118,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(27,218,135,1)), color-stop(100%, rgba(19,194,118,1)));
	background: -webkit-linear-gradient(left, rgba(27,218,135,1) 0%, rgba(19,194,118,1) 100%);
	background: -o-linear-gradient(left, rgba(27,218,135,1) 0%, rgba(19,194,118,1) 100%);
	background: -ms-linear-gradient(left, rgba(27,218,135,1) 0%, rgba(19,194,118,1) 100%);
	background: linear-gradient(to right, rgba(27,218,135,1) 0%, rgba(19,194,118,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1bda87', endColorstr='#13c276', GradientType=1 );
	.vertPad;
	border-top: 1px solid #22e38e;
	.boxConteudo {
		p {
			.grid14;
			margin: auto;
			.center;
			line-height: 32px;
			color: #fff;
			font-size: 24px;
		}
	}
}

/* ################################# DICAS */

.dicas-home {
	.boxConteudo {
		h3 {
			margin-bottom: 30px;
			width: 100%;
			.fLeft;
			.btn { margin: 0; }
		}
		.lista-dicas {
			width: 100%;
			.fLeft;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.item-dica {
				.grid4;
				background: #fff;
				box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
				.borda;
				overflow: hidden;
				margin:0 20px 20px 0;
				img {
					width: 100%;
					height: 200px;
					.fLeft;
					object-fit: cover;
				}
				p {
					width: 100%;
					.fLeft;
					padding: 10px 15px;
					.boxSizing;
					margin-bottom: 0;
					.center;
					font-size: 14px;
					.Regular;
					color: @verde;
				}
				&:nth-of-type(4n+4) { margin-right: 0; }
			}
		}
	}
}

.overlay-dica {
	width: 100vw;
	height: 100vh;
	.fLeft;
	background: rgba(20, 115, 75, 0.7);
	position: fixed;
	display: flex;
	align-items: center;
	overflow-y: scroll;
	padding: 40px 0;
	.boxSizing;

	display: none;


	.boxConteudo {
		background: #fff;
		.borda(10px);
		box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.25);
		.boxSizing;
		padding: 50px 60px;
		h3 {
			width: 100%;
			.fLeft;
			margin-bottom: 30px;
			.btn { margin: 0; }
		}
		.conteudoInterno {
			width: 100%;
			.fLeft;
			img {
				margin: 10px;
				box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
			}
		}
		
	}
}

/* ################################# TRATAMENTOS E ESPECIALIDADES */


.itemTratamento {
	padding: 50px 0;
	.boxConteudo {
		img {
			.borda;
			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
			width: 220px;
			.fLeft;
		}
		.descricao-tratamento {
			.calc(width; '100% - 260px');
			.fRight;
		}
	}
	&:nth-of-type(odd) {
		.boxConteudo {
			img {
				.fRight;
			}
			.descricao-tratamento {
				.fLeft;
				text-align: right;
			}
		}
	}
	&:nth-of-type(even) {
		background-color: @fundo;
	}
}


/* ################################# PROFISSIONAIS */


.painelProfissionais {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	.item-profissional {
		flex-grow: 1;
		flex-shrink: 1;
		width: 31%;
		margin: 10px;
		.fundoteste;
		background: #fff;
		box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
		.borda;
		overflow: hidden;
		img {
			width: 100%;
			height: 350px;
			.fLeft;
			object-fit: cover;
		}
		h2, span {
			width: 100%;
			.fLeft;
			padding: 0 10px ;
			.boxSizing;
			.center;
			.Regular;
		}
		h2 {
			margin-top: 15px;
			font-size: 18px;
			color: @verde;
			margin-bottom: 0;
		}
		span {
			font-size: 14px;

		}
		.btn {
			.fRight;
			margin: 10px 15px 15px 0;
		}
	}
}



.overlay-profissional {
	width: 100vw;
	height: 100vh;
	.fLeft;
	background: rgba(20, 115, 75, 0.7);
	position: fixed;
	display: flex;
	align-items: center;
	overflow-y: scroll;
	padding: 40px 0;
	.boxSizing;

	display: none;

	.boxConteudo {
		background: #fff;
		.borda(10px);
		box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.25);
		.boxSizing;
		width: 400px;
		overflow: hidden;
		.btn {
			margin: 15px 15px 0 0;
		}
		img {
			width: 300px;
			height: 300px;
			.borda(50%);
			margin: 5px 0 20px 50px;
			object-fit: cover;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
		}
		.conteudoInterno {
			width: 100%;
			.fLeft;
			padding:5px 25px 25px 25px;
			.boxSizing;
			h2 {
				font-size: 22px;
				color: @verde;
				margin-bottom: 0;
			}
			span { .Regular; }
			ul {
				width: 100%;
				.fLeft;
				margin-top: 10px;
				li {
					.Regular;
					font-size: 14px;
					margin-bottom: 8px;
					&:before {
						content: "›";
						margin-right: 8px;
					}
				}
			}
		}
		
	}
}



/* ################################# CONTATO */


.col[data-col="mapa"] {
	iframe {
		width: 100%;
		height: 100%;
		.fLeft;
		filter:grayscale(90%);
	}
}

.formContato {
	h4 {
		width: 100%;
		.fLeft;
		font-size: 18px;
		.Regular;
		color: @verde;
		margin-bottom: 20px;
	}
	fieldset {
		width: 100%;
		.fLeft;
		margin-top: 15px;
		label {
			width: 100%;
			.fLeft;
			.uppercase;
			color: @verde;
			font-size: 12px;
		}
		input, select, textarea {
			width: 100%;
			.fLeft;
			.borda;
			border: 1px solid darken(@fundo, 10%);
			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
			padding: 10px 20px;
			.boxSizing;
			font-size: 18px;
			.Light;
			color: @verde;
		}
		textarea {
			resize: vertical;
			height: 140px;
			margin-bottom: 20px;
		}
	}
}

.pagina-contato {
	.boxConteudo {
		h1 { line-height: 100px; }
	}
}
.endereco-topo-contato {
	.grid6;
	.fRight;
	p {
		font-size: 16px;
		.Regular;
		font-style: normal;
		letter-spacing: 0;
		text-align: right;
		line-height: 22px;
		margin-bottom: 0;
		small {
			font-size: 14px;
			color: @verde_claro;
		}
	}
}

/* ################################# RESPONSIVO */


@media only screen and (max-width : 1200px) {
	header {
		.header-principal {
			.boxConteudo {
				.logo-principal {
					width: 220px;
				}
				.menu-principal {
					.calc(width; '100% - 240px');
					li a {
						letter-spacing: 0;
						margin-left: 30px;
						font-size: 16px;
					}
				}
			}
		}
	}
}



.antiBot {
	visibility: hidden;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	float:left;
}

.validate .invalid { border:1px solid #c21212 !important; }
.validate .valid {   border:1px solid #0cb169 !important; }

.emailEnviado {
	width: 100%;
	.fLeft;
	.fundoteste;
	padding:10px 20px 10px 60px;
	background: url(../imagens/confirmar.png) no-repeat 15px center lighten(@verde, 50%);
	background-size: 30px 30px;
	border: 1px solid lighten(@verde, 35%);
	.borda;
	.boxSizing;
	line-height: 26px;
	text-align: center;
	span { color: @verde; }	
	small {
		width: 100%;
		.fLeft;
		font-size: 14px;
		color: @cinza;
		margin-top: 5px;
		line-height: 20px;
	}
}

.dadosIncorretos {
	width: 100%;
	.fLeft;
	line-height: 26px;
	.boxSizing;
	padding:10px 20px 10px 60px;
	background: url(../imagens/erro.png) no-repeat 15px center lighten(@vermelho, 42%);
	background-size: 30px 30px;
	border: 1px solid lighten(@vermelho, 32%);
	.borda;
	color: @vermelho !important;
	text-align: center;
	small {
		width: 100%;
		.fLeft;
		font-size: 14px;
		color: @cinza;
		margin-top: 5px;
		line-height: 20px;
		a {
			color: @vermelho;
			text-decoration: underline;
		}
	}
}