html {
  font-size: 14px;
}
body {
  padding: 0;
  margin: 0;
  line-height: 1.4;  
  font-family: 'Lato',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; 
}

#landing {
  background-color: #fafafa;  
}

.logo {
  width: 100%;
  height: auto;
  max-width: 391px;
}

#logo-planas {
	align-self: center;
}

.button {
	font-size: var(--20px);
  display: inline-block;
  text-align: center;
  line-height: 1.4;
  border: none;
  border-radius: 4px;
  padding: 10px;
  background: #0075b9;
  color: white;
  transition-duration: 0.4s;
}
  .button:hover {
    background: #004a99;
    text-decoration: none;
  }

h2 {
  font-size: 2.8rem;
	line-height: 1.2;
}
h3 {
  font-size: 2rem;
	line-height: 1.2;
}
h4 {
  font-size: 1.8rem;
	line-height: 1.2;
}

@media screen and (min-width:481px) and (max-width:990px) {
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.4rem;
  }
	h4 {
    font-size: 1.26rem;
  }
}

@media screen and (max-width:480px) {
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.6rem;
  }
	h4 {
    font-size: 1.3rem;
  }
}


/*
========================================================================================================================
HELPERS
========================================================================================================================
*/

.p-0 {
  padding: 0;
}
.p-1 {
  padding: 2rem;  
}

.img-fluid {
  width: 100%;
	height: 100%;
	object-fit: cover;
}

.flex-content {
	padding: 3rem;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: left;
	flex-direction: column;	
}

@media screen and (max-width:480px){
	.xs-w100 {
		width: 100% !important;
	}	
}



/*
========================================================================================================================
HEADER
========================================================================================================================
*/

header {
  padding: 15px 0;
  margin: 0;
}

/*
========================================================================================================================
FOOTER
========================================================================================================================
*/

#footer {
	background: var(--grey-700);
}
	#footer .line1 {
		padding-top: var(--30px);
		padding-bottom: var(--30px);
		color: #fff;
	}
	#footer .line1:after {
		content: '';
		display: block;
		clear: both;
	}
		#footer .right {
			text-align: center;
		}
			#footer .line1 ul {
				list-style: none;
				padding: 0;
				margin: var(--30px) 0 var(--30px) 0;
			}
				#footer .line1 li {
					display: inline-block;
					padding: 0;
					margin-right: var(--10px);
				}
					#footer .line1 li > a {
						background: #fff;
						color: #333;
						border-radius: 50%;
						width: var(--36px);
						height: var(--36px);
						display: grid;
						align-content: center;
						text-align: center;
						transition: all .3s ease;
						text-decoration: none;
						font-weight: 800;
					}
					#footer .line1 li > a:hover {
						background: #f1f1f1;
						color: #000;
					}
				#footer .line1 .btn:hover {
					border-color: #fff;
					color: #fff;
				}

			#footer .name {
				display: block;
				font-weight: 500;
				position: relative;
				padding-bottom: var(--15px);
				margin-bottom: var(--30px);
				font-size: var(--24px);
			}
			#footer .name:after {
				content: " ";
				position: absolute;
				left: 0;
				width: var(--60px);
				bottom: 0;
				border-bottom: var(--5px) solid #eee;
			}

			#footer .text {
				display: block;
				font-weight: 500;
				padding: 0;
				margin: 0;
				font-size: var(--18px);
			}

#footer .line2 {
	background: #252525;
	color: #fff;
	padding: var(--30px) 0;
}
	#footer .icon-logo {
		color: #fff;
		display: block;
		margin-bottom: var(--space);
	}
	#footer .line2 p {
		color: #fff;
	}
	#footer .line2 ul {
		margin: 0;
		margin-top: var(--15px);
		padding: 0;
		list-style: none;
	}
		#footer .line2 li {
			display: inline-block;
			border-left: 1px solid #fff;
			line-height: var(--16px);
			padding-left: var(--10px);
			margin-left: var(--10px);
		}
			#footer .line2 a {
				color: #fff;
			}


@media (min-width: 768px) {

	#footer .right {
		float: right;
		position: relative;
		z-index: 1;
		text-align: left;
	}

	#footer .line1 ul {
		text-align: right;
		margin-bottom: var(--30px);
	}
}

/*
========================================================================================================================
FORM
========================================================================================================================
*/

#landing-form {
  background: #a1b7cc;
  text-align: center;
  padding: 3rem;
}
  #landing-form > div {		
    background-color:white;
    border:2px solid #0075b9;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 15px;
  }
  #landing-form form {
    margin-top: 15px;
    text-align: center;		
  }
		#landing-form form > div {
			grid-gap: 0;
		}		
		#landing-form form p {
			font-size: 14px;
			line-height: 1.4;
		}		
  #landing .g-recaptcha > div {
    margin: 0 auto 15px auto;
  }	
	#landing input[type="text"], 
	#landing input[type="email"] {
    width: 300px;
    max-width: 100%;
    border: 2px solid #ccc;
    border-radius: 3px;    
    box-shadow: none;
    font-size: 14px;
    /* font-weight: 400; */
		margin: 0 auto 15px auto;
    display: block;
    box-sizing: border-box;
    height: 30px;    
    padding: 6px 12px;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }
	#landing input[type="checkbox"] {
    width: 15px;
    height: 15px;
    position: relative;
    top: 4px;
    margin-right: 10px;
		color: #555;
	}
	#landing .small-legal {
		font-size:11px;
		line-height: 1.4;
	}


/*
========================================================================================================================
TREATMENT PROPS
========================================================================================================================
*/

#treatment-props
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
  padding-top: 10%;
}
	#treatment-props > div {
		margin-bottom: 10%;
	}
	#treatment-props img
	{
		width: 10%;
		max-width: 127px;
	}
	#treatment-props h4 {
		display: inline-block;
		margin-left: 2rem;
		color: white;
	}

@media screen and (max-width: 768px ) {
	#treatment-props {
		position: relative;		
		background-color: #313131;
		padding-top: 0;
		height: initial;
	}	
	#treatment-props > div {
		margin-bottom: 10vw;
	}
	#treatment-props img
	{
		width: initial;
		margin: 0 auto;
		display: block;
		margin-bottom: 15px;
		max-width: 33%;
	}
	#treatment-props h4 {
		display: block;
		text-align: center;
		margin-left: 0;
	}
}




#notification {
	pointer-events: none;
	position: fixed;
	z-index: 2;
	bottom: 0;
	left: 0;
	right: 0;
	background: #b3f0ff;
	padding: var(--10px);
	text-align: center;
	font-weight: 600;
	transform: translateY(100%);
	transition: all .3s ease;
	opacity: 0;
}
#notification.open {
	transform: translateY(0);
	opacity: 1;
}

#notification[data-color="1"],
#notification[data-color="success"] {
	background: #b3ffe0;
}
#notification[data-color="0"],
#notification[data-color="warning"] {
	background: #fffcb3;
}
#notification[data-color="-1"],
#notification[data-color="error"] {
	background: red;
}




.form span.error {
	color: red;
	font-size: var(--16px);
	display: block;
	text-transform: none;
}
@media all and (min-width:768px)
{
	.form span.error {
		color: red;
		font-size: var(--18px);
		display: block;
	}
}

.has-error input,
.has-error select,
.has-error textarea {
	border-color: red !important;
}

.has-error .form-check > label::before {
	border-color: red;
}

.contact-fix-bottom {
	position:fixed; 
	bottom:100px; 
	right:20px;
	z-index:99 !important;
}
.contact-fix-circle {
	width:50px; 
	border:8px solid #cdd3a5;
	border-radius:100%; 
	text-align:center;
	cursor:pointer;
	box-shadow: 0 2px black;
	line-height:28px;
}

.contact-fix-circle .circle-icon {
	color:#cdd3a5;
	background-color:#ffffff;
	border-radius:80%;
	padding:10px;
}

.contact-fix-circle a {
	text-decoration:none !important;
}
.contact-fix-circle:hover {
	width:150px;
	background-color:#cdd3a5;
	border-radius:30px;
	text-align:left;
}

#call-fix .caption, #contact-fix .caption, #whatsapp-fix .caption {
	display:none;
}

#call-fix:hover .caption, #contact-fix:hover .caption, #whatsapp-fix:hover .caption {
	display:inline-block;
}

.contact-fix-question {
	display:none;
}

.contact-fix-bottom:hover .contact-fix-question {
	display:block;
}

.contact-fix-circle-separation {
	margin-top:10px;
}

.contact-fix-circle .caption {
	font-size:16px;
}

.circle-white {
	background-color:white;
	border-radius:100%;
	padding:5px;
}

.show_legal {
	text-decoration: underline;
	font-weight: bold;
	cursor:pointer;
}

.cond_legal {
	display:none;
}