/* Add here all your CSS customizations */
:root{
	--blanco: #fff;
	--negro: #000;
	--verde: #68b9c6;
	--verdeF: #758492;
	--verdeC: #bbc2c8;
	--azulF: #132478;
	--azulC: #95ced6;
	--verdeM: #4aa1b1;
	--louis: 'Louis';
	--franklin: 'Franklin';

}

/*Fonts*/
@font-face {
	font-family: 'Louis';
	src: url(fonts/Louis-George-Cafe-Bold.ttf);
}
@font-face {
	font-family: 'Franklin';
	src: url(fonts/LibreFranklin-VariableFont_wght.ttf);
}
body{
	font-family: var(--franklin);
}
h1,h2,h3,h4,h5,h6,p{
	line-height: normal;
	text-transform: none;
}
.main{
	background-color: #f1f3f4; 
}
.header-logo img{
	width: 180px;
}
.header-top-opening-hours{
	margin-right: 15px;
}
.header-top-phone{
	font-size: 12px;
}
.iconHeader{
	width: 16px;
	height: auto;
	margin-right: 5px;
}
#header .header-nav-top .nav > li > span i{
	color: var(--azulF);
}
#header .header-nav-top .nav > li > span, #header .header-nav-top .nav > li > span a{
	color: var(--verdeC);
	font-family: var(--louis);
}
#header .header-nav.header-nav-links nav > ul li:hover > a, #header .header-nav.header-nav-links nav > ul:not(:hover) > li > a.active{
	color: var(--verde);
}
#header .header-nav.header-nav-links nav > ul li a{
	font-family: var(--louis);
	color: var(--verdeF);
}
.btnHeader{
	background: var(--verde);
	font-family: var(--franklin)!important;
	color: var(--blanco)!important;
}
.titleSlide{
	color: var(--azulC);
	font-family: var(--louis);
}
.subtitleSlide{
	color: var(--blanco);
	font-family: var(--franklin);
	text-transform: uppercase;
}
.square1{
	background: var(--azulC);
}
.square2{
	background: var(--verdeM);
}
.square3{
	background: var(--azulF);	
}
#nosotros .card-body img{
	width: 75px;
	height: auto;
}
.custom-cards{
	min-height: 240px;
}
.custom-cards .cards-container{
	top: -85%;
}
.custom-cards .cards-container .card{
	min-height: 320px;
}
.custom-cards .cards-container .card .card-body .card-title{
	line-height: normal;
	color: var(--azulC);
	font-family: var(--louis);
	font-size: 55px;
}
.custom-cards .cards-container .card.square1 .card-body .card-title, .custom-cards .cards-container .card.square3 .card-body .card-title{
	font-size: 80px;
}
.custom-cards .cards-container .card.square1 .card-body .card-title{
	color: var(--azulF);
}
.custom-cards .cards-container .card .card-body .card-text{
	color: var(--blanco);
	font-size: 17px;
}
.titleVentajas{
	line-height: normal;
	color: var(--verdeM);
	font-family: var(--louis);
}
#ventajas{
	padding-top: 10px;
}
#ventajas .description{
	color: #99A3AC;
	text-align: justify;
}
.custom-list-icons li{
	color: var(--verdeF);
}
.custom-list-icons li i{
	border-color: var(--verdeM)!important;
	color: var(--azulF);
}
#ventajas, .custom-cards, #slideHome{
	background: #f1f3f4;
}
.list.list-icons.list-icons-sm.list-icons-style-2 li span{
	color: var(--verde);
}

#servicios{
	background: var(--azulF);
}
#servicios .titleSmall{
	color: var(--blanco);
}
#servicios .title{
	color: var(--verde);
	white-space: pre-line;
	font-family: var(--louis);
}
#servicios .card-body{
	text-align: center;
}
#servicios .card-body img{
	width: 100px;
	height: auto;
}
#servicios .card-title{
	color: var(--azulF);
	font-family: var(--louis);
}
#servicios .card-text{
	color: #99a3ac;
}
#callToAction .title{
	color: var(--verde);
	font-family: var(--louis);
}
#callToAction .btnTransparent{
	background: transparent;
	border: 1px solid var(--verde);
	transition: .5s ease-in-out;
	color: var(--blanco);
}
#callToAction .btnTransparent:hover{
	background: var(--verde);
}

#contacto .titleSection{
	color: var(--verde);
}
#contacto .titleInfo{
	color: var(--azulF);
	font-family: var(--louis);
}
#contacto .textInfo, #contacto .textInfo a{
	color: #99a3ac;
	font-size: 14px;
}
#contacto .textInfo strong{
	color: var(--azulC);
}
.btnForm{
	background: var(--verde);
	color: var(--blanco);
	border: 1px solid var(--verde);
	transition: .5s ease-in-out;
}
.btnForm:hover{
	background: transparent;
	color: var(--verde);
}
#footer{
	background: var(--verdeF);
	border: none;
}
#footer .creator{
	width: 140px;
	height: auto;
}
#footer p, #footer a{
	color: var(--blanco)!important;
}
#footer span{
	margin: 0 10px;
}
#footer .flexRow{
	display: flex;
	align-items: center;
}
#header .header-btn-collapse-nav{
	background: var(--azulF);
}

/*** 

====================================================================
  Responsive
====================================================================

***/
/*Lap 1366px*/
@media only screen and (max-width: 1366px){
    
}
/*Ipad Pro Vertical*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait){
    
}

/*Ipad Pro Horizontal*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape){
    
}

/*Ipad Horizontal*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    
}

/*Ipad Vertical*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    
}

/*Phone Vertical*/
@media only screen
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: portrait){ 
  	.titleSlide{font-size: 35px!important;}
  	.subtitleSlide{font-size: 19px!important;}
  	.custom-cards .cards-container .card .card-body .card-title{font-size: 40px;}
  	.medical-services .cards-medical-services{flex-direction: column;}
  	#servicios .card-title{font-size: 21px!important;}
  	#servicios .card-text{font-size: 18px!important;}
  	#footer .flexRow{display: block;}
  	#footer .flexRow span{display: none;}
  	#footer .flexRow p{margin-bottom: 20px!important;}
  	#footer .justify-content-between{justify-content: center!important;}

}

/*Phone Horizontal*/
@media only screen
  and (min-width: 320px) 
  and (max-width: 736px) 
  and (orientation: landscape){ 
}