/* Febio - Bootstrap Theme (http://www.com)
 * Personal Code v1.0. -2016 by FRAO 
color: #0064FA #e2b48b; #c27632; #ba5410; #843c0c; #cfd8dc; #EFEFEF = rgba(239,239,239,0.9)!important
 background-color: rgba(207,216,220,0.55); background: rgba(207,216,220,0.75);
drop-shadow(-142px 10px 235px #000000);
text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;*/

body{overflow-x:hidden;overflow-y:overlay;
	width: 100%;
	font-family: 'Encode Sans Expanded', sans-serif;
	color: #222 ;/* One Font to Rule Them All ej: burlywood forestgreen*/
	/*font-size: 16px;*/font-size: 14px;
	background-color:#ECEFF1;
	background-color:#cfd8dc; background-color:TRANSPARENT; background-color:#F1F1F1;
	-webkit-tap-highlight-color:TRANSPARENT;
  	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer */
   	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
	z-index: 1;	}

::-webkit-scrollbar{ width: 14px; height: 14px;}
::-webkit-scrollbar-button{display: none;}
::-webkit-scrollbar-thumb{	border-radius: 7px 0 7px 0;border: none;
							box-shadow: inset 0px 0px 2px #777;
							background-color:transparent;transition: 0.5s;}
::-webkit-scrollbar-thumb:hover{ background-color: #fff;box-shadow: inset 0px 0px 5px #777;}
::-webkit-scrollbar-track{ background-color: transparent; }

::-moz-selection{text-shadow:none;background:TRANSPARENT}
::selection{text-shadow:none;background:TRANSPARENT;color: #aaa}
img::-moz-selection{background:0 0}
img::selection{background:0 0}

 /* colores de textos */
.textoclaro{color:#e2b48b}
.textointenso{color:#c27632}
.textooscuro{color:#843c0c}

p{line-height:1.75;}
@media screen and (min-width: 768px) {p{line-height:1.75}} /* anulado el 01/10/2021 p{font-size:18px;} */
p.large{font-size:16px}
a,a:hover,a:focus,a:active,a.active{outline:0;}
a{color:inherit}
.coltext{color:#c27632}
a:hover,a:focus,a:active,a.active{color:#843c0c; }

.color-enfasis{color: #0064fa}

h1,h3,h4,h5,h6{font-family: 'Encode Sans Expanded', sans-serif;font-weight:700;}
h2{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;}

.img-centered{margin:0 auto;border-radius: 15px 0 15px 0}
.img-concealed {opacity: 0; height: 100%; width: 100%;}

.textocentrado{text-align: center}
.aladerecha{text-align:right}
.centroabsoluto{position: absolute; top: 50%; left: 50%; transform: translateX(-50%);}

/* header, #services,#about,#portfolio,#faq,#contact,#footer */

header{
	width:100%; height: 100vh;/* adaptable */
	/*TEXTO DE CABECERA (LETRERO GRANDE "formas con c...")*/
	color:#fff;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	/*anulada IMAGEN estática de CABECERA :
	background-image:linear-gradient(rgba(0,0,0,0.09),rgba(0,0,0,0.4)), url(../images/portada2.jpg);background-position: center center;*/}
	
header::before {
	content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
	/*Animación de IMAGEN DE CABECERA*/	
	animation: para3portadas 30s linear infinite;
    animation-iteration-count: infinite;
	background-attachment:fixed;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	filter: grayscale(0%) blur(0px) contrast(90%) brightness(90%) opacity(100%);	}
@keyframes para3portadas {
	0%,31%,100%	{ background-image: url('../images/portada1.jpg');}
	33%,64%		{ background-image: url('../images/portada2.jpg');}
	66%,98%		{ background-image: url('../images/portada3.jpg');}		}

#services {
	background-color: #cfd8dc;
	filter: blur(0px) brightness(100%) opacity(100%);}
#services::before {
	content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
	/*Animación de IMAGEN DE SERVICIOS*/	
	animation: para2imgservices 20s linear infinite;
	filter: grayscale(0%) blur(0px) brightness(70%) opacity(1);
	background-size:cover;
	-webkit-background-size: cover;	
	background-repeat:no-repeat;
	background-attachment: fixed;
	z-index: 0;
    animation-iteration-count: infinite;
	background-position: center center;	}
@keyframes para2imgservices {
	0%,48%,100%	{ background-image: url('../images/torso-masculino.jpg');}
	50%,98%		{ background-image: url('../images/torso-femenino.jpg');}		}

#about::before {
	content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
	background-image: url("../images/fondo.jpg");
	filter: grayscale(100%) blur(6px) contrast(100%) brightness(100%) opacity(100%);
	-webkit-background-size: cover;	
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-position: center center; }

#portfolio {
	filter: blur(0px) brightness(100%) opacity(100%);}
#portfolio::before {
	content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
	background-image: url("../images/fondo.jpg");
	filter: grayscale(100%) blur(6px) contrast(100%) brightness(100%) opacity(100%);
	-webkit-background-size: cover;	
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-position: center center; }

#faq {background-color: #EFEFEF;}

#contact {background: #EFEFEF;
		position: relative;
		z-index: 1042 ; margin-bottom: 0;}

@media screen and (min-width: 1600px) {/* adaptable  solo lo requieren pantallas enormes */
	#portfolio, #contact {height: 100vh;}
	body{font-size: 16px;} }

#footer {
	position: fixed;
	z-index: -2;
	right: 0; bottom: 0; left: 0;}
#footer::before {
	content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
	background-image: url("../images/consultorio.jpg");
	filter: blur(1px) brightness(90%);
	-webkit-background-size: cover;	
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-position: center bottom;}


/*posiciona texto de portada: */
.lema {vertical-align:middle; cursor:default; padding: 0; text-align:center;}

/*sublineado dinámico de texto de portada: */
.delinear {text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .5s;}
.delinear:hover, .delinear:focus {background-size: 100% 2px;}

.satLema{font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: bold;font-size: 20px}

.navbar-brand {width:auto; padding:0; height: auto; text-align:left; vertical-align:middle;
	z-index:1050;position:absolute;
 	-webkit-margin-left: 0;
 	margin-left: 0; }

.navbar{min-height:60px}

@media screen and (min-width: 768px) {.navbar-brand img {width: auto;} }
@media (max-width: 767px) {.logo{ width:40%;} }
@media (max-width:480px) {.gf-menu-toggle {position: fixed; z-index: 1000 !important;}
	.layout-mode-responsive .gf-menu {float: left;} 
	.social-icons, .reach-out {display: none;} }
 

/*BARRA DE NAVEGACIÓN*/

/*(Colapsada) solo banda nav superior en movil*/
.navbar-default{
	background-color: rgba(207,216,220,0.95); background-color: lime; background-color: transparent;
	border-color:none;border:none;	z-index:1041;}
.navbar-default:hover{border-color:none;border:none;z-index:1041;}

/*TÍTULO DE LOGO DR FA*/
.navbar-default .navbar-brand, 
.navbar-default .navbar-brand:focus{
	color:#0064fa;
	font-family:"Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;border-radius:10px 0 10px 0;}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus:hover {color:#fff;}

.logo-image,
.logo-image-map {
	margin: 0 5px 0 0;
    float: left;
	background-color: transparent;}

.logo-image {background-image:url(../images/logofa.png);
	height: 60px; width: 26px;}
.logo-text {
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: bold; vertical-align:bottom;
	margin:0; margin-top: 10px; margin-left:0px; white-space:nowrap;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
	transition: 0.3s}
.navbar-brand:hover .logo-text {
	text-shadow: 0 12px 4px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 2px black;}

.sublogo-text {color: #ba5410; line-height: 1.0; font-size:0.85em;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
	/*animación de sublineado: */
	text-decoration: none;
    background-image: linear-gradient(#fff, #fff);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
	transition: 0.3s;}
.navbar-brand:hover .sublogo-text{
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.8));
	background-size: 100% 2px;transition: background-size .5s;transition-delay: .3s;}

	/*animación de resplandor del logo:*/
.navbar-default:active .navbar-brand,
.navbar-default:active .logo-text,
.navbar-default:focus .logo-text{
	animation-name:fulgor;
	-webkit-animation-name:fulgor;
	animation-duration:250ms;
	-webkit-animation-duration:250ms;
	animation-fill-mode:none;
	-webkit-animation-fill-mode:none;
	animation-iteration-count:1;
	animation-direction: alternate;
	background-color:transparent;}
	/*prefijos web-kit:*/
@-webkit-keyframes fulgor{
	0% {color:#fff;
		text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}
	100% {color:#fff;
		text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #CFD8DC, 0 0 30px transparent, 0 0 40px #CFD8DC, 0 0 55px transparent, 0 0 75px transparent;}}
	/*estandar:*/
@keyframes fulgor{
	0% {color:#fff;
		text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}
	100% {color:#fff;
		text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #CFD8DC, 0 0 30px transparent, 0 0 40px #CFD8DC, 0 0 55px transparent, 0 0 75px transparent;}}


/*BOTONES DE MENÚ*/
.navbar-default .nav li a{
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:600;letter-spacing:1px;
	color:#c27632;border-style:solid;border-width:1px;border-color:transparent;
	border-radius:15px 0 15px 0;text-align:center;
	text-shadow:-1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;
	Margin-Right:2px;Margin-Left:2px;/*<-Distancia entre botones*/
	/*suavizado*/
	transition: 0.3s}

.navbar-default .nav li a:hover/*,
.navbar-default .nav li a:focus*/{
	color:#fff;outline:0;
	background-color:#ba5410;
	border-radius:15px 0 15px 0;
	text-shadow:none;} /*<-fondo y borde al cursor*/

.navbar-default .nav li a:active{
	border-color:#fff;
	background-color:#843c0c;} /*<-oscurecimiento y borde al clic*/

.navbar-default .navbar-nav>.active>a{
	border-radius:15px,0,15px,0;
	color:#fff;
	background-color:#e2b48b;
	text-shadow:none}

.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus{
	color:#fff;background-color:#e2b48b;border-bottom-color:#fff;border-left-color:#fff;border-right-color:#fff;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.28)!important;}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover{
	background-color:transparent;border-color: transparent;}
.navbar-default .navbar-toggle{
	border-color: transparent; border: 1px solid #ECEFF1;}
.navbar-default .hamburguesa:hover{
	background-color:#fff}
.navbar-default .burguer-to-X.cambiado:hover{
	background-color:#fff;border-color: #eee;}


/* Componentes de NavIcon Hamburguesa */

.hamburguesa {
	display: none;
	position: relative;
	overflow: hidden;
	margin: 0;  padding: 0;
	width: 45px;  height: 40px;
	margin-top:8px;margin-right: 15px;
	font-size: 0;
	text-indent: -9999px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none;
	border-radius:20% 0 20% 0;
	border-color: none;
	cursor: pointer;
	transition: background 0.3s;}

@media (max-width:767px){.hamburguesa {display:table;}}
@media (max-width:930px){.hamburguesa {display:table;}}
@media (max-width:930px){.navbar-nav {display:none;}}

.hamburguesa:focus {outline: none;}
.hamburguesa:hover {border-color: transparent;}

.hamburguesa span {
	display: block;
	position: absolute;
	top: 18px;
	left: 8px;
	right: 8px;
	height: 3px;
	background: #c27632;
	border-radius: 4px 0 4px 0;}

.hamburguesa span::before,
.hamburguesa span::after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 3px;
	background: #c27632;border-radius: 4px 0 4px 0;
	content: "";}

.hamburguesa span::before {top: -8px;}
.hamburguesa span::after {bottom: -8px;}

.burguer-to-X:active span::before {top: -10px;}
.burguer-to-X:active span::after {bottom: -10px;}

/*Hamburger to "x". Forma hamburguesa,
barras deslizan hacia centro y se transforman en "x".*/

.burguer-to-X {background-color:rgba(255,255,255,0.2);}
/*.burguer-to-X:active,*/
.burguer-to-X:hover {background-color: #eee;border-color: #eee;}
.burguer-to-X span {transition: background 0s 0.3s;}

.burguer-to-X span::before,
.burguer-to-X span::after {
          transition-duration: 0.3s, 0.3s;
          transition-delay: 0.3s, 0s;}

.burguer-to-X span::before {transition-property: top, transform;}
.burguer-to-X span::after {transition-property: bottom, transform;}

/* active state, i.e. menu open */
.burguer-to-X.cambiado {background-color: #fff;}
.burguer-to-X.cambiado span {background: none;}

.burguer-to-X.cambiado span::before {
  top: 0;background-color:#e2b48b;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);}
.burguer-to-X.cambiado span::after {
  bottom: 0;background-color:#e2b48b;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);}

.burguer-to-X.cambiado span::before,
.burguer-to-X.cambiado span::after {transition-delay: 0s, 0.3s;}


/* Menú cortina para moviles, basado en tema Box Creado por: Ahmed Eissa
	http://ahmedessa.net/box	behance: https://www.behance.net/3essa*/	

.area-boton-navegacion {z-index:9990;position:absolute;right:5px;top:0;}
ul.box-primary-nav {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100vh;/* height Proporcional (antes:height: 100%)*/
	background: rgba(239,239,239,0.95);backdrop-filter: blur(10px);
    z-index: 1010;
    padding: 50px 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%);
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.4s;
	padding-top:60px ;}/* Desciende contenido centralizado bajo la altura del logo en pantalla movil*/
ul.box-primary-nav::before {filter:blur(10px)}

ul.box-primary-nav li {margin: 1vh 0;} /* separación vertical entre botones */
ul.box-primary-nav a {
    display: inline-block;
    transition: all 0.2s;
    text-decoration: none;text-shadow:none;text-align:center;
    font-weight: bold;
	outline:0;
	background-color:#fff;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.28);
	border-radius:15px 0 15px 0;
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	letter-spacing:1px;
	color:#c27632;
	margin:0.1vh;
	padding:3.5vh;/*dimensión botones*/
	width:100%}
.box-primary-nav ul {padding-left: 0;}
.box-primary-nav a:hover,
.box-primary-nav a:active {color:#fff;background-color:#ba5410;}
ul.box-primary-nav.is-visible {-webkit-transform: translateY(0);transform: translateY(0);}
.centradovertical{position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}


/*FRONTERA CON MENÚ COLAPSADO*/
.navbar-default .navbar-collapse{
	border-color:rgba(255,255,255,.02);
	margin: 7px;
	/* margin: 7px deja navbar colapsada más ancha pero tapando borde superior de acordion activo
	[Modificar scrollTop: $panel.offset().top -75 (antes 70);
	Original margin: 0 7px va con scrollTop: $panel.offset().top -70]*/
	max-height: 100% !important;
/*FONDO MENÚ COLAPSADO*/
	background-color:TRANSPARENT}


/*PARA PANTALLAS GRANDES*/
@media (min-width:768px){
	
	.navbar-default/*(Ancha Inicial)*/{
		background-color:transparent;padding:25px 0;
		transition:padding .3s;border:0}
	.navbar-default .navbar-brand{
		font-size:2em;
		transition:all .3s;}
	.navbar-default .navbar-nav>.active>a{
		border-radius:15px 0 15px 0}
	
/*MENÚ DELGADO NO COLAPSADO*/
.navbar-default.navbar-shrink{
	padding:0;
	background: rgba(239,239,239,0.9);background: transparent;
	box-shadow: rgb(0 0 0 / 55%) 0px 5px 20px 0px;
	backdrop-filter: blur(10px);}
	
.navbar-default.navbar-shrink .navbar-brand{font-size:1.5em}

/*BOTONES DE MENÚ NO COLAPSADO*/
.navbar-collapse .nav li a {
	background-color:TRANSPARENT;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.0);
	margin-top:5px}
.navbar-default .nav li a:hover{/*<-fondo y borde al cursor*/	
	color:#ba5410;outline:0;
	background-color:#fff;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.28);
	border-radius:15px 0 15px 0;
	text-shadow:none} 
	
/* Para Focus que vuelve a color inicial (para no quedar activo, luego del clic) */
.navbar-default .nav li a:focus{color: #c27632;
-webkit-animation-name:quitasombra;
animation-name:quitasombra;
-webkit-animation-duration:250ms;
animation-duration:250ms;
-webkit-animation-fill-mode:none;
animation-fill-mode:none;
animation-iteration-count:1;
animation-direction: alternate;}
.navbar-collapse .nav li a:link{color:#C27632;}
.navbar-default .navbar-nav>.active>a{color:#fff !important;}
.navbar-collapse .nav li a:hover{color:#ba5410;}
	
}/* finaliza aqui para pantallas grandes */

@media all and (max-width:990px){
	/*MENÚ DELGADO NO COLAPSADO*/
.navbar-default.navbar-shrink{background: rgba(239,239,239,0.9);backdrop-filter: blur(10px);}	}

@keyframes azulalclic{
    0%{background-color:#0064fa;color:#fff}
  100%{background-color:#0064fa;color:#fff}}
@-webkit-keyframes azulalclic{
    0%{background-color:#0064fa;color:#fff}
  100%{background-color:#0064fa;color:#fff}}

@keyframes quitasombra{
    0%{box-shadow: 0 0 0 rgba(0,0,0,0)}
  100%{box-shadow: 0 0 0 rgba(0,0,0,0)}}
@-webkit-keyframes quitasombra{
    0%{box-shadow: 0 0 0 rgba(0,0,0,0)}
  100%{box-shadow: 0 0 0 rgba(0,0,0,0)}}



/*Suaviza cambio color botones de menú*/
@media(min-width:768px) {
    .navbar-custom {
		padding: 20px 0;
		border-bottom: 0;
		letter-spacing: 1px;
		background: 0 0;
		transition: background .5s ease-in-out,padding .5s ease-in-out; }	}

/*MENÚ EXTENDIDO EN PANTALLA DISMINUIDA*/
@media (max-width:767px){
.navbar-default {/*color y sombra*/
	background: rgba(239,239,239,0.95);
	box-shadow: rgb(0 0 0 / 55%) 0px 5px 20px 0px;	}	}

header .intro-text{
	padding-top:60%;padding-bottom:15px;
	font-style:italic; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
header .intro-test:last-child{text-align: center;}
.intro-lead-in{
	font-size:40px;line-height:50px;margin-bottom:25px;
	font-family: "Montserrat Alternates", sans-serif;
	font-weight: 400;vertical-align: middle;
	-webkit-animation: ciclo1 20s ease-in-out infinite;
	animation: ciclo1 20s ease-in-out infinite;}
.intro-heading{
	font-size: 35px;line-height:35px;margin-bottom: 25px;
	vertical-align: middle;
	-webkit-animation: ciclo2 20s ease-in-out infinite;
	animation: ciclo2 20s ease-in-out infinite;}
.intro-headingScience{
	line-height:35px;margin-bottom: 25px;
	vertical-align:baseline;
	-webkit-animation: ciclo3 20s ease-in-out infinite;
	animation: ciclo3 20s ease-in-out infinite;}

@keyframes ciclo1 {
	0%, 15%, 22.5%, 65%, 72.5%, 100% {text-shadow: -1px 0 0 black, 0 1px 0 black, 1px 0 0 black, 0 -1px 0 black;}
	17.5%, 20%, 67.5%, 70% {text-shadow: 0 12px 7px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 2px black;}}
@keyframes ciclo2 {
  	0%, 40%, 47.5%, 100% {text-shadow: -1px 0 0 black, 0 1px 0 black, 1px 0 0 black, 0 -1px 0 black;}
	42.5%, 45% {text-shadow: 0 12px 7px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 2px black;}}
@keyframes ciclo3 {
  	0%, 40%, 47.5%, 90%, 97.5%, 100% {text-shadow: -1px 0 0 black, 0 1px 0 black, 1px 0 0 black, 0 -1px 0 black;}
	42.5%, 45%, 92.5%, 95% {text-shadow: 0 12px 7px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 2px black;}}
@keyframes ciclo4 {
	0%, 15%, 22.5%, 40%, 47.5%, 65%, 72.5%, 90%, 97.5%, 100%  {text-shadow: -1px 0 0 black, 0 1px 0 black, 1px 0 0 black, 0 -1px 0 black;}
	17.5%, 20%, 42.5%, 45%, 67.5%, 70%, 92.5%, 95% {text-shadow: 0 12px 7px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 2px black;}}

@keyframes sombrita {
  0%		{text-shadow:
  0 3px 2px rgba(0, 0, 0, 0.3),
  0 2px 2px rgba(0, 0, 0, 0.6),
  0 1px 2px rgba(0, 0, 0, 0.9),
  0 0px 1px rgba(0, 0, 0, 1),
  0 0 3px black;}
  100%		{text-shadow:
  0 7px 3px rgba(0, 0, 0, 0.1),
  0 6px 3px rgba(0, 0, 0, 0.2),
  0 5px 3px rgba(0, 0, 0, 0.3),
  0 0px 1px rgba(0, 0, 0, 1),
  0 0 1px black;}} 

@keyframes levitante {
  0% {transform: translatey(0px);	}
	50% {transform: translatey(-4px);}
	100% {transform: translatey(0px);}}


/*En pantalla aumentada*/	
@media (min-width:768px){
	header .intro-text{padding-top:35vh;padding-bottom:80px}
	header .intro-text .intro-lead-in{font-weight: 800;
	font-size:70px;line-height:40px;margin-bottom:25px}
	header .intro-text .intro-heading{margin-left:0.2em;
		font-weight: 700;
		font-size: 65px;
		line-height: 75px;
		margin-bottom: 150px}
a.fa.fa-angle-down {bottom: 2%}
	.satLema{font-size: 30px} }
	
.header .intro-text-scrolled {
  padding: 0px 0;
  background: rgba(0, 0, 0, 0.8);
  background: white;
  box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);}	
	
	
	/* Botones  */

.btn{border-radius:15px 0 15px 0}
.btn-primary{
	color:#fff;background-color:#e2b48b;border-color:#e2b48b;
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:700;border-radius:15px 0 15px 0;}
.btn:hover,.btn:focus,.btn:active,.open .dropdown-toggle.btn{color:#fff;background-color:#ba5410;border-color:#ba5410;}
.btn-primary.btn-primary:active{color:#fff;background-color:#843c0c;border-color:#fff;}

.btn-cta-modal{
	color:#fff;background-color:#0064fa;border:1px solid #fff;padding: 2.5% 5% ; margin: 2%;
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 16px;
	font-weight:700;border-radius:15px 0 15px 0;box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.28);
	transition: .3s;display: inline-block;}
.btn-cta-modal:hover,.btn-cta-modal:focus,.btn-cta-modal:active,.open .dropdown-toggle.btn-cta-modal{
	background-color:limegreen;border-color:#fff;
	box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.28);}
.btn-cta-modal.btn-cta-modal:active{background-color:#0064fa;border-color:transparent;box-shadow: none;}

.btn-option-modal{
	color:#fff;background-color:#e2b48b;border-color:#fff;
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:700;border-radius:15px 0 15px 0;
	transition: .3s;}
.btn-option-modal:hover,.btn-option-modal:focus,
.btn-option-modal:active,.open .dropdown-toggle.btn-option-modal{
	background-color:#e2b48b;border-color:#e2b48b;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.28);}
.btn-option-modal.btn-option-modal:active{color:#fff;background-color:#843c0c;border-color:#fff;}

.btn2{padding: 6px 12px;margin: 10px 0px;}
.btn-intratext2{border-style: none; margin-bottom: 0;}

.titulo-lista, .titulo-lista:hover, .titulo-lista:active {color:#c27632;background-color:transparent; 
	font-weight:600;letter-spacing:1px;
	border-style:none;font-size:inherit;
	border-radius:10px 0 10px 0;text-align:center;
text-shadow:-1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;white-space: pre-wrap}

.titulo-lista{border: 0;}
a>.titulo-lista{text-align:center;}
p>.btn{display:inline;line-height: 1.4}
.titulo-lista{font-size:18px;}

.titulo-lista:hover,
.titulo-lista:active{box-shadow:none;font-size:18px;}


ul {list-style-type: none; margin: 0;margin-left: 0em; padding: 0;padding-left: 2em;} 
@media(max-width:390px) { ul {padding-left: 0; } }

li{list-style-type: none;}

.ckecking{margin-top: 23px; margin-top: 0;}

.ckecking-safety>li{list-style-type:none;color:inherit;}
.ckecking-safety>li:before, .ckeckingMark>li:before {font-family: 'FontAwesome'; display: inline-block; color:#c27632;margin-left: -2em;
  width: 1em;padding-right: 0;}

.ckeckingMark>li:before { content:"\f00c"/*check-square-o*/; float: left; margin-right: 1em;}

.safety-check-icon {
    float: right;
    margin-left: 0.5em;
    margin-right: 0.5em;}

.ckecking-safety>li:hover .safety-check-icon,
.ckecking-safety>li:focus>.safety-check-icon,
.ckecking-safety>li:active>.safety-check-icon {
    animation-name: pop;
    animation-duration: .8s;
    animation-timing-function: linear;
    animation-iteration-count: 1; }
@keyframes pop {
	50% {transform: scale(1.25)}
  100% {transform: scale(1) }}

@media screen and (min-width: 768px) {.ckeckingMark>li:before {transform: translateY(12.5%);}}

.btn-outlined.btn-outlined:active{color:#fff;background-color:#843c0c;border-color:#fff;}
 /*-- durante clic --*/
 
/*boton header*/

.btn-xl:hover,.btn-xl:focus,.btn-xl:active,.btn-xl.active,.open .dropdown-toggle.btn-xl{
	color:#fff;background-color:transparent;}
.btn-xl:active,.btn-xl.active,.open .dropdown-toggle.btn-xl{background-image:none}
	
.btn-xl.disabled,.btn-xl[disabled],fieldset[disabled]
.btn-xl,.btn-xl.disabled:hover,.btn-xl[disabled]:hover,fieldset[disabled]
.btn-xl:hover,.btn-xl.disabled:focus,.btn-xl[disabled]:focus,fieldset[disabled] .btn-xl:focus,.btn-xl.disabled:active,.btn-xl[disabled]:active,fieldset[disabled] .btn-xl:active,.btn-xl.disabled.active,.btn-xl[disabled].active,fieldset[disabled]

/*esencial. impide incompatibilidad modal modificado distinto a bootstrap*/
.btn:focus,.btn:active,.btn.active,.btn:active:focus{outline:0}


/* Para boton semicuadrado con animacion de sombra 3d */
a.fa::before {
	-webkit-animation: ciclo4 20s ease-in-out infinite;
	animation: ciclo4 20s ease-in-out infinite;
	animation-play-state: running  }

/* Efecto de pausa de animación retirada porque desincronizaba animacion con la de lema
a.fa:hover::before {animation-play-state: paused}*/

a.fa.fa-angle-down {
	padding: 10px 15px;
	border: 1px solid #e2b48b; box-shadow: 0 0 0 0.5px #fff; text-decoration:none;
	color:#fff;background-color:rgba(255,255,255,0.2);
	border-radius: 25% 0;
	font-size: 30px;
	margin-top: 13%;
	transition: all 0.5s;}
a.fa.fa-angle-down:hover{
	border: 1px solid rgba(132,60,12,0.5);border: 1px solid #fff;
	background: #fff;
	color:#fff; color:#e2b48b; color: #ba5410;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);}
a.fa.fa-angle-down:focus{
animation-name:azulalclic;
-webkit-animation-name:azulalclic;
animation-duration:250ms;
-webkit-animation-duration:250ms;
animation-fill-mode:none;
-webkit-animation-fill-mode:none;
animation-iteration-count:1;
animation-direction: alternate;}



/*SECCIÓNES*/
section{padding:100px 0;}/* Pantallas menores: margen superior para scroll- era 0 en left y right (11-02-2022 cambiado: padding:100px 15px)*/
/*TÍTULOS FUENTE GRANDE LETRA MOLDE*/
section h2.section-heading{
	font-size:30px;margin-top:0;margin-bottom:15px;
	text-align:center;color: #c27632;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}

@media (min-width:768px){section{padding:70px 0 200px}}/* margen superior para scroll- era 150 en top y bottom. De ultimo le quite 300 en bottom*/
@media (min-width:768px){section h2.section-heading{font-size:40px}}
section h3.section-subheading{
	font-size: 16px;
	text-transform: none;
	font-style: normal;
	font-weight: 400;
	margin-bottom: 20px;}

.fa-check {color: #e2b48b;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}
.fa-check-square-o {color: #c27632; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}

.column-service {maÑTXrgin-top:50px; marÑTXgin-bottom:50px;}/* Reactivar y probar en pantalla maxima */

.service-heading{margin:15px 20;text-transform:none;color: #e2b48b;color: #c27632;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} 

.column-service:hover .service-heading {color: #ba5410; transition: 0.5s;}	

.fa-male,
.fa-user,
.fa-puzzle-piece {
  background-color: #e2b48b;
  text-shadow: none;
  border: solid 1px transparent;
  border-radius: 25px 0 25px 0;
  transition: ease-out .5s;
  margin-bottom: 5px;}

.column-service:hover .fa-male,
.column-service:hover .fa-user,
.column-service:hover .fa-puzzle-piece {
  border: solid 1px transparent;
  background-color: transparent;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  color: #c27632;
  transition: 0.5s;
  box-shadow: none;}

@media screen and (min-width: 768px) {.parrafo-espaciado{margin:30px 0}}/*solo en pantalla grande: aleja contenido*/



/*cajas delimitadas*/

.marco-service, .caja-service, .caja {backdrop-filter: blur(4px);
	box-shadow: 0px 5px 7px 0px rgba(0 0 0 / 55%);
	background-color: rgba(255,255,255,0.75);
	border:1px solid #fff;
	border-radius:15px 0 15px 0;
	transition: 0.5s;}
.marco-service, .caja {margin: 15px; padding: 15px;}
.caja-service {margin: 1em auto; padding: 2em;}

.caja:hover {
	background-color: rgba(255,255,255, 0.85);
	box-shadow: 0px 5px 15px 0px rgba(0 0 0 / 55%);}
.caja1:hover {
	background-color: rgba(255,255,255, 1);}
.marco-service:hover, .caja-service:hover {
	background-color: rgba(255,255,255,0.9);
	box-shadow: 0px 0px 15px 0px rgb(255 255 255 / 55%);}

.marco-service, .marco-values {display:table;margin: 1em auto;}
.marco-values {text-align: center;}

/* Mi foto*/
.photo .phototext {
	position: absolute; font-weight: bold;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, 0%);  }

.photo {
	border-radius:15px 0 15px 0;
	border:1px solid #fff;
	position: relative;
    overflow: hidden;
	margin:0;
	text-align: center;
    cursor:none;
    transition: 0.5s;
	transition-timing-function: ease-in-out;
	/*left: 50%; transform: translate(-50%, 0%); Left y transform se modifican con AOS */
  margin: auto;
  display: block;
	max-width: 400px; min-width: 150px;height: 275px;
	filter: brightness(110%) grayscale(30%) contrast(105%);filter: brightness(107%) grayscale(5%) contrast(105%);
	background-image:url(../images/dr-avila.jpg);  
	background-attachment:scroll;
	background-position:center;
	background-repeat: no-repeat;
	-webkit-background-size:cover;
	background-size:cover;
	color: #0064fa;/*Texto interno*/
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: bold;line-height: 17px;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;	}

.caja:hover >.photo {
	filter: brightness(107%) grayscale(5%) contrast(100%);filter: brightness(110%) grayscale(0%) contrast(105%);
	border:1px solid transparent;}
.sublogo-phototext{color: #ba5410; font-size: 0.85em;}

.photo:active {
	background-color: rgba(207,216,220,1);
	background-blend-mode:multiply;}



/*Logo habilitación*/
.habilit .habitext {color:blue;font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif" ;
	position: relative; font-size-adjust: none; 
    top: 80%; }
.habilit {background-image:url(../images/servicio_habilitado.png);text-align: center;font-size: 0.6em;
	width:100%; height: 110px;
	position: relative;
	margin:0 auto 1.5em; margin:0.5em auto 1.5em;
    cursor:inherit;
	background-attachment:scroll;
	background-position:center;
	background-repeat: no-repeat;
	-webkit-background-size:contain;
	background-size:contain;    
	-webkit-filter: sepia(100%) drop-shadow(0px 0px 0px rgba(0,0,0,0.0));
	filter: sepia(100%) drop-shadow(0px 0px 0px rgba(0,0,0,0.0));
	transform: translate(0, 5px);
	transition: 0.5s; transition-timing-function: ease-in-out;}
.facility:hover >.habilit {
	animation-delay: 0.5s;
	animation-name: sobreplano;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;}
.habilÑit:hover {
	animation-delay: 0.5s;
	animation-name: sobreplanear;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;animation-direction: alternate;}
@keyframes sobreplano {
	0% {transform: translate(0, 5px);filter: sepia(100%) drop-shadow(0px 0px 0px rgba(0,0,0,0.0));}
	5% , 95% {transform: translate(0, 0px);color:#ba5410;filter: sepia(0%) drop-shadow(0px 10px 5px rgba(0,0,0,0.55));}
  100% {transform: translate(0, 5px);filter: sepia(100%) drop-shadow(0px 0px 0px rgba(0,0,0,0.0));}}
@keyframes sobreplanear {
	0% {transform: translate(0, 5px);filter: sepia(100%) drop-shadow(0px 0px 0px rgba(0,0,0,0.0));}
	100% {transform: translate(0, 0px);color:#ba5410;filter: sepia(0%) drop-shadow(0px 10px 5px rgba(0,0,0,0.55));}}



/*TIMELINE*/

.cajatime {
	border-radius:15px 0 15px 0;
	transition: 0.5s;
	margin: 0px;
	padding: 0px;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.55);
	height: 215px;}

.timeline-container {
	background-color:rgba(239,239,239,0.75);
	backdrop-filter: blur(4px);
	width: 100%;
	height:215px;/*Impte: Cercanía de barra de desplazamiento horizontal. Era 230*/
	max-width: 2700px;
	transform: translateY(0px);/*separa renglon inferior*/
	overflow-y:hidden;
	border:1px solid #fff;
	border-radius:15px 0 5px 0;
	margin: 0px; padding: 0px;
	box-shadow: inset  0px 0px 7px 0px rgba(0,0,0,0.55);
	transition: all 0.5s ease 1.25s;}

.timeline-container:hover {
	box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.55);
	transition: all 0.5s linear;}


.th {
	width: 1350px; /*conserva nombres en barras. Desde 1625px aparecen números anuales. original: 1350px*/
	height: 220px; /*debe sobrepasar de 215 para evitar barra lateral*/
	margin: 0; position:relative;
	/*animation: slide ease infinite 10s;*/
	animation: exhibeMovil alternate infinite 20s; animation-delay: 2s;transition: 0.5s;}
@media screen and (min-width: 768px) {
	.th {animation: exhibePc alternate infinite 10s ;animation-delay: 2s;transition: 0.5s;}}/*solo pantalla grande*/

@keyframes desliza {
  0% {margin-left: 0px}
  60% {margin-left: 0}
  80% {margin-left: -100px}
  100% {margin-right: -1px}}
@keyframes exhibeMovil {
	from {transform: translateX(0)}
	to {transform: translateX(-30%) } }
@keyframes exhibePc {
	from {transform: translateX(0)}
	to {transform: translateX(-12%) } }

.th:hover{animation: return 40s;background-color: rgba(255,255,255,0.5);}

@keyframes return {
	0% {margin-left: inherit;}
	100% {margin-left: 0;}}


svg g:first-of-type rect {
    fill-opacity: 0.3;fill-opacity: 0;}/* translucidez de fondo opcional segun fondo de body. Opciones 0.25 o 1*/
svg g:first-of-type rect:not(:last-child) {
	fill:red;}/* #fafbfd color de fondo de timeline (era #fff). Opción gris: #cfd8dc */
svg g:first-of-type path:not(:last-child) {
    stroke: #cfd8dc;}/* lineas de cuadrícula (era #cfd8dc). Opción blancas: #fff */
rect {stroke-width: 0;}	/* impide oscurecimiento del borde de barras (0) al clic y retira bordes externos*/

#timeline-tooltip {
	white-space:pre-wrap;
	curñsor:move !important;}

.texto-enlace {
	text-decoration: none;
	display: inline-block;
	background-image: linear-gradient(#fff, #c27632);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: 0.3s;}
.texto-enlace:hover {
	cursor: pointer;
	background-size: 100% 2px;
    transition: background-size .5s;
    transition-delay: .3s;}



.tooltip-inner {white-space:pre-wrap;}

div.google-visualization-tooltip {
	padding: 10px;
	font-size: 12px;
	border-radius:15px 0 15px 0;
	max-width: 250px;/*Ancho de cuadros de aviso*/
	box-shadow:0px 4px 8px 0px rgba(0,0,0,0.28);
	border:solid 1px #fff;
	position: absolute;/* Position the tooltip */
	z-index: 1;}

@media screen and (max-width: 768px) {
div.google-visualization-tooltip {
	padding: 4px;
	border-radius:10px 0 10px 0;
	font-size: 10px;
	max-width: 140px;}	}
  
div.google-visualization-tooltip ul {
	margin: 0;
	padding-left: 15px;}


/* =====================
		Animations
======================== */

/*TEXTO TITILANTE*/
.alerta { -webkit-animation: cc 1.5s linear 1s infinite alternate; animation: cc 1.5s linear 1s infinite alternate;
 color: #843C0C; font-size: 18px;}

/*-----------------
	Procedimientos
-------------------*/

figure {
	position: relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
    cursor: pointer;
    border: 1px solid white;}

figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;	
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;}	/*Letras previas al hover*/


.muestrario {margin-top:15px;} /*Separación del texto superior*/

/*---Efecto para destacar recuadros ---*/
.muestrario:hover img {
	transition: 0.5s;
	transition-timing-function: ease-in-out;
	-webkit-filter: grayscale(100%) blur(3px) contrast(120%) brightness(94%) opacity(90%);
	-moz-filter: grayscale(100%) blur(3px) contrast(120%) brightness(94%) opacity(90%);
	filter: grayscale(100%) blur(3px) contrast(120%) brightness(94%) opacity(90%);  }

.img {opacity: 1.0;	transition: 0.5s; transition-timing-function: ease-in-out;}
.muestrario:hover figure.texto3d {
	box-shadow: rgba(0, 0, 0, 0.00) 0px 5px 15px 0px;
	transition: 0.5s;
	transition-timing-function: ease-in-out;}
figure.texto3d {
	margin-bottom: 30px;
	border-radius:15px 0 15px 0;
	box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px 0px;
	transition: 0.5s;
	transition-timing-function: ease-in-out;}

figure.texto3d img {
	box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 20px 0px;
    border: 1px solid white;
	opacity: 1;
	transition: 1.5s;
	-moz-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1.5);}
	
figure.texto3d:hover{
	box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 20px 0px !important;
    transform: scale(1.1);
	transition: 1.5s}
@media (max-width:480px) {
	figure.texto3d:hover{transform: scale(1.06);}}

figure.texto3d:hover img {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
	transition: 1.5s;
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	filter: blur(0px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}

figure.texto3d figcaption {
	transition: background-color 0.35s;}

figure.texto3d figcaption::before {
	position: absolute;
	top: 30px; right: 30px; bottom: 30px; left: 30px;
	border: 1px solid #fff;
	content: '';}

figure.texto3d h2 {color: #fff;/*Inicial*/
	margin: 20% 0 10px 0;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);}

figure.texto3d figcaption::before,
figure.texto3d p {color: #fff;/*emergente adelante y grande*/
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	text-shadow: 0 0 0 1px hsl(0, 0%, 0%);
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0.1);
	transform: scale(0.1);border-radius:15px 0 15px 0;}
figure.texto3d figcaption::before {
	box-shadow: 0 0 0 1px hsl(0, 50%, 90%);}

figure.texto3d:hover h2 {
	color: #fff;/*cuando esta atrás y disminuido. Antes era scale(0.5)*/
	-webkit-transform: scale(0.01);
	transform: scale(0.01);}

figure.texto3d:hover figcaption::before,
figure.texto3d:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);border-radius:15px 0 15px 0}
figure.texto3d:hover p {
	opacity: 1;
	animation: sombrita 1.5s ease-out;
	animation-fill-mode: forwards;animation-iteration-count:1;
	transform: translateY(-20px) scale(2.2);border-radius:15px 0 15px 0;}

@media screen and (max-width: 320px) {
figure.texto3d:hover p {
		transform: translateY(-20px) scale(1.8);}}

figure.texto3d:hover figcaption {background-color: rgba(0,255,0,0);}


/* =========================
		VENTANAS MODALES
============================ */

/*ventana modal procedimientos (antes era min-width:768px) */
@media (min-width:768px){
	.modal-dialog{margin:60px auto;}}
@media all and (min-width:900px) {
	.modal-dialog{width:80%}
	.medi-pantalla{width:55%;margin:10% auto} }
.modal-dialog{margin:60px auto;}

.send-w3layouts input{
	padding-left: 50px;
}
.send-w3layouts>label{
	display:run-in!important;
	-webkit-display:run-in!important;
	width: 100%;
	margin-bottom: 0!important}
.send-w3layouts>.row>.col-md-7>label,
.send-w3layouts>.row>.col-md-5>label{
	display:run-in;
	-webkit-display:run-in!important;
	width: 100%;
	margin-bottom: 0!important;
	-webkit-margin-bottom: 0!important}
/*.send-w3layouts>label>.form-fields{width: 100%!important;font-weight:400!important}*/
.send-w3layouts{text-align: left!important}
.form-fields{width: 100%!important;font-weight:400!important;min-height:45px}


/* Color Fondo detras de ventanas modales */
.modal-backdrop{
position:fixed;backdrop-filter: blur(4px);
z-index: 1040; /* con 1041 queda encima de navbar-top */
top:0;right:0;bottom:0;left:0;
background-color: #cfd8dc;background-color: #000;background-color: rgba(239,239,239,0.9)} /* antes #fff  luego #ECEFF1 */
.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}
.modal-backdrop.in{filter:alpha(opacity=95);opacity:.95} /* .75 es muy traslúcido*/
.portfolio-modal .modal-backdrop{opacity:0;display:none}
/* difuminado de fondo detras de ventanas modales */
.modal-backdrop{   backdrop-filter: blur(4px);   background-color: #01223770;}
.modal-backdrop.in{   opacity: 1 !important;}


.modal-content{
	box-shadow:0px 2px 8px black;
	border:1px solid #fff;
	border-radius: 15px 0 15px 0;
	position: relative;
	background-color:#fff;
	padding:0px;}

@media all and (min-width:768px){
	.modal-content{box-shadow:0px 10px 30px 0px rgba(0,0,0,0.75)}}

.modal-header .close, .modal-header-f .close {
	font-size: 30px;	position: absolute;	z-index: 999;
	right: 10px; top: 5px; 
	display: block;
	padding: 0 0 15px 40px;}
.modal-title, .modal-title-f {    
	font-size: 23px;
	text-align: center;    
	color: #c27632;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}

.modal-body {
	padding: 0 20px;
	text-align: justify;
	margin: 0;}
@media screen and (min-width: 769px){
	.modal-body {
	padding: 0 20px;}}

.modal-body p {margin: 30px 20px;}
/*lineas divisorias invisibles*/
.modal-header {border-bottom:1px blue;}
.modal-footer {border-radius:15px 0 15px 0;
	border-top:1px solid transparent;
	border-bottom:1px solid transparent;
	padding:0 0 15px;padding:0;
	text-align:center;position:relative;}

/* Pantallas disminuidas */
@media screen and (max-width: 480px) {
.modal-body {
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;}
.panel-body{
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	text-align: justify;}
.modal-header {
	font-size: 30px; position: relative; z-index: 999;
	top: 50%;
	padding:0px;
	border-radius:15px 0 15px 0}
.modal-header-f {
	font-size: 30px; position: relative; z-index: 999;
	top: 100%;
	padding:0px;
	border-radius:15px 0 15px 0}
.modal-title {
	position: absolute;	z-index: 5;
	left: 50%; top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
    padding:0px;
/* Letras fondo blanco sobre imagenes */
	color:#fff;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;}
.modal-title-f {
	position: relative;	z-index: 5;
	left: 0%; top: 0%;
	-webkit-transform: translate(0%, 0%);
	transform: translate(0%, 0%);padding:0px;}
.imagenproc {position: relative; top:1px}					}

/*Presets*/

@media (min-width:768px){.container{width:auto}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1200px}}

.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.row{margin-right:0px;margin-left:0px;} /* Anula margen negativo de bootstrap (afectaba estabilidad de navbar en moviles)*/
.service{margin-bottom: 5%}

.nav>li>a{position:relative;display:block;padding:10px 7px;margin:0}

@media(min-width:1200px){.nav>li>a{position:relative;display:block;padding:10px 15px;margin:0}}


/*Para intercambio de imágenes que encabezan Modales*/
.imagenproc {position: relative;}
.imagenproc .top-img {position: inherit;}
.imagenproc .bottom-img {position: absolute;}
.top-img {
	animation-name: fade-img;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 15s;
	animation-direction: alternate;}
@keyframes fade-img {
	0% {opacity: 1;}
	48% {opacity: 1;}
	52% {opacity: 0;}
	100% {opacity: 0;}}


/*Acordeon de preguntas de Orientaciones*/

.content-accordion{/*Caja contenedora*/
	height: 300px;height: 400px;height: 70vh;
	width: 100%;
	border: 1px solid #FFF;
	background-color: rgba(239,239,239,0.75);
	overflow-y: scroll;
	box-shadow: inset 0px 0px 7px 0px rgba(0,0,0,0.55);
	padding: 15px;	padding: 0 20px; border-radius:15px 0 15px 0;
	backdrop-filter: blur(8px);}

.panel-group .panel{
	border-radius:15px 0 15px 0;
	border: 0;
	border-bottom: 1px solid #fff;
	margin: 0px}
.panel-group .panel+.panel {
    margin-top: 0;}
.panel-heading {padding: 21px 15px;}/*zona de pregunta*/
.panel-body {padding: 0px 15px 20px; border-radius:0 0 15px 0;}/*zona de respuesta*/
/*.panel-body,
.panel-body:hover *,
.panel-body:focus *,
.panel-body:active *,
.panel-body:visited *,
.panel-body:link * {color:#222;} texto en zona de respuesta test con red */
.collapse-card {
	background-color: transparent;
	border-radius:15px 0 15px 0;
	cursor: help; color: inherit;padding: 0;
	transition: 0.4s}
@media only screen and (min-width: 990px) {
	.collapse-card {padÑOÑding: 1rem 0;} }
.pregunta{font-weight: normal; text-decoration: none !important;}/*retira efectos (Importante)*/

/* color iconos estrella  y separacion */
.collapse-card .title,.collapse-card:active .title,.collapse-card:focus .title {color:inherit }

.collapse-card .title i {color:#e2b48b ;
/* posición de icono y separacion */
	float: left; margin-left:-12px;
	text-shadow: none;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}
.collapse-card:hover .title i {color:#e2b48b;}

.collapse-card .title:before,.collapse-card .title:after {content: " "; display: table}
.collapse-card .title:after { clear: both }

.collapse-card .title span {float: right; /*margin-left: 1rem*/}
.collapse-card .title strong {
	display: block;
	margin-left: 15px; /* antes: margin-left:4rem */
	color:inherit;
	overflow: hidden; text-overflow: string;
	white-space: pre-line;}

/*cambio de color texto de pregunta al hover */
.collapse-card:hover .title strong {
	color:#ba5410;
	text-decoration: none !important;}

.collapse-card .title strong:active {
	color:#843c0c;
	text-shadow: -1px 0 #e2b48b, 0 1px #e2b48b, 1px 0 #e2b48b, 0 -1px #e2b48b;
	text-decoration: none !important;}

.collapse-card.active .title strong{color: #843c0c;}/*Fija oscurecmiento del título durante active*/
.collapse-card.active .title i{color: #c27632;text-shadow: none}

.collapse-card .title strong::after {
	color: #e2b48b;  font-family: 'FontAwesome'; font-size: 2rem;
	padding-left:.4rem; margin-right: 1rem; float: right;
	text-shadow: -1px 0 #e2b48b, 0 1px #e2b48b, 1px 0 #e2b48b, 0 -1px #e2b48b; }

.collapse-card .body {padding: 1rem; display: none}

.collapse-card * {box-sizing: border-box}

.collapse-card:hover {
	background-color: #fff; background-color: rgba(240,240,240,0.5);
	z-index: 190;text-decoration: none !important;}

/*lo ya activado con clic o tocado en touchscreens (pantallas sensibles)*/
.collapse-card.active {
	background-color: rgba(255,255,255,0.5);
	box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 45%);
	z-index: 200; margin: 1rem -1rem;padding:0 15px;
	text-decoration: none !important; cursor:n-resize}

.panel-group {border-color: white;}

.collapse-card.active .title strong::after { content: "\f106";padding-top:0;position:relative }
.collapse-card.active:hover .title strong::after { content: "\f0d8" } /*antes f139 y f102*/

.collapse-card .title strong::after { content: "\f107" }
.collapse-card:hover .title strong::after { content: "\f107"/*antes f13a*/; color:#ba5410}

.title strong:visited  { content: "\f0a5";padding-top:0;position:relative }

a:link,a:hover,a:focus,a:active,a:visited{text-decoration:none!important;}

.collapse-card:hover .title .fa-spin-hover{
   -webkit-animation: spin 2.5s infinite linear;
   -moz-animation: spin 2.5s infinite linear;
   animation: spin 2.5s infinite linear;}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);		transform: rotate(0deg);}
    100% {-webkit-transform: rotate(359deg);	transform: rotate(359deg);} }
@keyframes spin {
    0% {-webkit-transform: rotate(0deg);		transform: rotate(0deg);}
    100% {-webkit-transform: rotate(359deg);	transform: rotate(359deg);} }
		
		
/*====================================*/

/*DE VENTANAS -PROCEDIMIENTOS*/
.btn:focus,.btn:active,.btn.active,.btn:active:focus{outline:0}
.portfolio-modal .modal-content{border-radius:0;-webkit-background-clip:border-box;background-clip:border-box;box-shadow:none;border:0;min-height:100%;padding:100px 0;text-align:center}
.portfolio-modal .modal-content h2{margin-bottom:15px;font-size:3em}
.portfolio-modal .modal-content p{margin-bottom:30px}
.portfolio-modal .modal-content p.item-intro{margin:20px 0 30px;font-style:italic;font-size:16px}
.portfolio-modal .modal-content ul.list-inline{margin-bottom:30px;margin-top:0}
.portfolio-modal .modal-content img{margin-bottom:30px}
.portfolio-modal .close-modal{position:absolute;width:75px;height:75px;background-color:transparent;top:25px;right:25px;cursor:pointer}
.portfolio-modal .close-modal:hover{opacity:.3}
.portfolio-modal .close-modal .lr{height:75px;width:1px;margin-left:35px;background-color:#222;-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:1051}
.portfolio-modal .close-modal .lr .rl{height:75px;width:1px;background-color:#222;-webkit-transform:rotate(90deg);transform:rotate(90deg);z-index:1052}


p {  line-height: 1.5; margin: 0 0 1rem !important}

.navbar-fixed-bottom, .navbar-fixed-top {
	position: fixed;
	right: 0; left: 0;
	z-index: 1041;} /* con 1 queda bajo color de fondo de ventanas modales, originalmente es 1041 */

/* Navbar colapsa a 990 pixels (Cambia punto de colapso de navbar en bootstrap)*/
@media (max-width: 990px) {
    .navbar-header {float: none;}
    .navbar-toggle {display: block;}
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
    .navbar-collapse.collapse {display: none!important;}
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;}
    .navbar-nav>li {float: none;}
    .navbar-nav>li>a {padding-top: 10px; padding-bottom: 10px;}		}

@media only screen and (min-width: 990px) {
	.navbar-collapse { display: block; }
	.hamburguesa { display: none; }
	.navbar-toggle { display: none; } }
@media only screen and (max-width: 990px) {
	.navbar-collapse { display: none; }
	.hamburguesa { display: block; }
	.navbar-toggle { display: block; } }

@media screen and (max-width: 768px) {
@media (max-width:480px) {	}}


a.resalcont{
	font-weight: bold;
	transition: all .2s ease-in-out;transition: 0;
	color:dodgerblue;
	text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;
	cursor: pointer;}
a.resalcont:hover {color:limegreen;}



/* ===============
		MAPA
================== */


.map_container {
	padding-top: 50%;
	width: 80%;
	margin: 0 auto;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5) inset;
	z-index:1000;
	position:absolute; }
	
#map {
	margin: 0 auto;
	padding: 0;
	height: 400px;
	max-width: none;
	width: 85%;
 	border-radius:15px 0 15px 0;
	box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 55%);
	border: 1px solid white;}
@media (min-width:768px){#map{height: 400px}}
@media (min-width:992px){#map{height: 410px}} /* ÑÑ Testing antes:(min-width:992px){#map{height: 475px}} */
@media (min-width:1200px){#map{height: 420px}}
@media (min-width:1600px){#map{height: 550px}}
#map img {max-width: none !important;}

#map {height: 70vh;}

/* InfoWindow */

.gm-style-iw {
	widÑÑth: 157px !important; max-width: none;
	height: 92px!important;/*Altura de cartel de dirección en el mapa*/
	margin: 0px;
	left: 0px !important; white-space: nowrap;}

.gm-style .gm-style-iw-d {overflow: hidden!important;}

.gm-style-iw:hover {
box-shadow: 5px 5px 50px 5000px rgb(0 0 0 / 25%);}

/* X de cierre de InfoWindow  ÑÑ Testing: para evitar recuadro gris que aparece al redimensionar ventana del navegador, tambien con focus-visible*/
.gm-ui-hover-effect {border: none;}

.iw-container {margin-left: 0px;}
.ubitel {margin-top: 7px;}
.iw-container .iw-title {
	font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 0px;
	color:#0064fa;
	margin: 0;}
.iw-title {margin-top: 5px; width: 130px;}
.iw-subTitle {
	font-size: 14px;
	font-weight: 600;
	color:#ba5410;}


/* Esquinas InfoWindow*/
.gm-style .gm-style-iw-c {border-radius: 12px 0 12px 0 !important;}
/* centro InfoWindow:*/
.gm-style .gm-style-iw-c,
/* triangulo invertido*/
.gm-style .gm-style-iw-tc::after {
    padding: 10px 5px 5px 5px;
	background: #EFEFEF !important;
	border: 1px solid #fff;border-bottom: none;}
.gm-style .gm-style-iw-tc::after {border-top: none;}
/* destacar centro y triangulo InfoWindow */ 
.gm-style div > div:last-child:hover .gm-style-iw-c,
.gm-style div > div:last-child:hover .gm-style-iw-tc::after {
    background: #fff !important;}

/* Efecto de onda */ 
.pulse {position: absolute;
	 margin-top: -100px; margin-left: -100px;}
.pulse::after {
	display: block;
	width: 200px; height: 200px;/*corresponden al doble del LabelAnchor para quedar centrado*/
	content: "";
	animation: pulsate 10s infinite ease-out;
	border-radius: 50%;
	background-color: transparent;
	box-shadow: 0 0 2px 4px DodgerBlue;}
@keyframes pulsate {
  0% {transform: scale(0.01);opacity: 0;}
  92.5% {transform: scale(0.01);opacity: 1;}
  100% {transform: scale(1.2);opacity: 0;}}


/* FORMULARIO DE CONTACTO*/

.contactform h5 {text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff !important;}

input:focus, textarea:focus, keygen:focus, select:focus {outline: none;}
::-moz-placeholder {
	color: #666;
	font-weight: 300;
	opacity: 1;}

::-webkit-input-placeholder {
	color: #666;
	font-weight: 300;}

/* contact form design */
.sec1title {text-align: center;}
.sec1title h1 {
	font-size: 40px;
	margin: 25px;
	text-transform: uppercase;
	color: #843c0c;
	font-weight: 400;}

.section2 {	position: relative;}
.section2 .contactform {
	position: absolute; 
    top: 50%; width: 30%;
	right: 8%; /* lateralización del formulario en pantallas mayores */
    z-index: 99;
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(3px);
	padding: 15px ;
	box-sizing: border-box; 
	margin: auto;
	transform: translateY(-50%);
	border: 1px solid #fff;
	box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 55%);
	border-radius: 25px 0 25px 0;
	transition: 0.5s linear;}
.section2 .contactform:hover{
	background: #fff;/* sombras de formulario al hover */
	box-shÑÑadow: 0 0 0 2500px rgb(0 0 0 / 35%);	}
.section2 .contactform:focus-within{
	transition-delay:.5s;background: #fff;
	box-shadow: 0 0 0 5000px rgb(0 0 0 / 75%);/* sombras de formulario al focus */}

@media only screen and (min-width: 660px) {
	.section2 .contactform:focus-within{
		right: 10%;/* distanciamiento solo en  pantallas mayores */
		width: 80%;
		padding: 30px; }}

@media (max-width: 767px) 
.section2 .contactform {position:fixed; width:100%;}

@media screen (min-width: 799px)
.section2 .contactform {position:absolute;width: 20%;/*era 30 - margin-top: 0;*/}

/*Estado basal de cuadros, bordes, color letras y tiempo de transición*/
.section2 .contactform input.form-fields,
.section2 .contactform button.form-fields,/*
.section2 .contactform userFile.form-fields,*/
.section2 .contactform textarea.form-fields {
    padding: 0 0 0 40px;
    display: block;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    margin: 0;
    color: #222;
    min-height: 45px;
    text-shadow: none;
    position: relative;
	background-color: TRANSPARENT;
	border: 1px solid #fff;
	border-radius:15px 0 15px 0;
	cursor: pointer;
	transition: 0.4s;
	font-weight:300;}
[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
	margin:0rem;}
.section2 .contactform userFile.form-fields:hover{
	cursor:pointer!important;}

.section2 .contactform textarea.form-fields {
	padding-top: 10px;
	resize: none;}

.section2 .contactform:hover input.form-fields,
.section2 .contactform:hover textarea.form-fields {
	opacity: 1;color: #ccc; cursor:text;/*border: 1px solid #eee;background: #F7F7F7;*/}

.section2 .contactform input.form-fields:hover,
.section2 .contactform textarea.form-fields:hover {
	opacity: 1;cursor:text;border: 1px solid #ddd;/*color: #ccc; background: #FBFBFB;*/}

.inputfile:hover + label,
.inputfile.has-hover + label {
	opacity: 0.75;/*color: #ccc;*/ cursor:pointer;}

.section2 .contactform button.form-fields.button {
	padding: 0; margin: 0;
	background-color: dodgerblue;
	color: #fff;
	font-weight: 600; font-size: 14px;
	border-color: #fff; border-style: double;letter-spacing:1px;
	opacity: 1;	}

.section2 .contactform button.form-fields.button:hover {
	background-color: limegreen; /*(equivale a #32cd32 )*/
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.28);
	cursor: pointer; }

.section2 .contactform button.form-fields.button:focus{
	animation-name:azulalclic;
	-webkit-animation-name:azulalclic;
	animation-duration:250ms;
	-webkit-animation-duration:250ms;
	animation-fill-mode:none;
	-webkit-animation-fill-mode:none;
	animation-iteration-count:1;
	animation-direction: alternate;}

.section2 .contactform button.form-fields.button i {
	margin-left:10px;color: #fff;}
.section2 .contactform h5 {
	font-size: 16px;font-weight: 600;
    margin-bottom: 10px;margin-top: 10px;}
.section2 .contactform label .cntfrmicn {
	color: #e2b48b;
    padding: 14px;
    position: absolute;
    z-index: 99;}

/*solo pc: cambia color de icono al pasar cursor por area de texto*/
.section2 .contactform label:hover .cntfrmicn {	color: #ba5410;}

/*aumenta con clic en cada area de texto y aparece sombra de profundidad del area*/
.section2 .contactform input.form-fields:focus,
.section2 .contactform userFile.form-fields:focus,
.section2 .contactform textarea.form-fields:focus {
	background: #fff;
	opacity: 1;	color:#777; padding-left: 55px/*aparta la zona de escritura del icono*/;
	box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 55%);
	z-index: 90;
	text-decoration: none !important;border: 1px solid #fff;
	transform: scale(1.05);}

.section2 .contactform .cntfrmicn, .safety-check-icon {transition: 0.2s ease-in-out;}

.oscilante{
	border-radius:15px 0 15px 0;
	font-size:18px;
	-webkit-animation: levitante 2s ease-in-out infinite;
	animation: levitante 2s ease-in-out infinite;}
.section2 .contactform:hover .oscilante,
.section2 .contactform:focus .oscilante,
.section2 .contactform:active .oscilante{
	-webkit-animation: none;
	transition: .2s;
	animation: none;}

@media only screen and (max-width: 660px) {
	.container {padding: 0px 15px 15px;}
	.contmap {height: 475px !important;}
	.sec1title h1 {font-size: 28px;}
	.section2 .contactform {
		padding: 20px; right: 0; width: 80%;
		box-sizing:content-box;
		position: relative;	top: 0; transform: translateY(0);
		margin-bottom: 20px;}
	.section2 .contactform input.form-fields,
	.section2 .contactform button.form-fields,
	.section2 .contactform textarea.form-fields {width: 100%;}
}

					  
/* input oculto */
.section2 .contactform .input.inputfile-oculto {
    width: 0.1px; height: 0.1px; opacity: 0;
    overflow: hidden; position: absolute;
    z-index: -1;}

/* cuadro de selección de adjunto */
.inputfile + label {
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: block;
	overflow: hidden; /*auto*/
	padding: 0.625rem 1.25rem;/* 10px 20px */
	/*padding-top: 50%;*/ padding-left: 40px;
	margin: 0;-webkit-margin:0;
	font-size:14px;
	color:#666;
	font-weight:300;
	box-sizing: border-box;
	width: 100%;
	max-height: 45px!important;
	position: relative;
	text-shadow: none;
	border-radius:15px 0 15px 0;
	border: 1px solid #fff;
	outline: none;
	transition: 0.4s;}


.no-js .inputfile + label {display: none;}


.section2 .contactform:hover .inputfile + label {
	opacity: 1;cursor:text;/*color: #ccc; border: 1px solid #ddd;*/
	background: #f5f5f5;background: rgba(255,255,255,0.75);}

.inputfile + label:hover {
	opacity: 1;cursor:text;border: 1px solid #ddd;/*color: #ccc; background: #fbfbfb;*/}

/* Al presionar cuadro de selección de adjunto */
.inputfile:focus + label,
.inputfile.has-focus + label {
	padding-left: 50px;
	outline: none;
	opacity: 1;
	box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 55%);
	z-index: 90;
	text-decoration: none !important;
	transform: scale(1.05);}
.inputfile + label * {/* pointer-events: none; */
    /* in case of FastClick lib use */}


/*marco de formulario*/
.send-w3layouts {padding: 0px;margin: 0px;}


@media (min-width:992px){ /* mantiene juntos bordes internos de casilla de correo y celular. */
	.col-md-7{padding-right:0;}
	.col-md-5{padding-left:0;} }


section#contact .text-danger{color:#e74c3c}

/* Botón WhatsApp*/
.button-whatsapp-icon {
    position: fixed;
    bottom: 6rem;
    right: 15px;left: auto !important;top: auto !important;
    z-index: 100;}
#intra_button-whatsapp.shake {animation: shake 10s infinite;animation-delay: 5s;}
#intra_button-whatsapp {
    background: transparent url("../images/whatsapp-icon.png") center center no-repeat;
    z-index: 900;
    outline: none;
    width: 60px !important;
    height: 61px !important;
    background-size: 60px 60px !important;
	filter:drop-shadow(0px 5px 3px rgba(0,0,0,0.55));
    cursor: pointer;
	transition: 0.25s;
    border: 0 !important;}
#intra_button-whatsapp:hover{
filter:drop-shadow(0px 10px 5px rgba(0,0,0,0.55));
animation-play-state: paused;} 
@keyframes shake {
4.5%, 10.5% {transform: translate(0px, 0px) rotate(0deg);}
5% {transform: translate(1px, 1px) rotate(0deg);}
5.5% {transform: translate(-1px, -2px) rotate(-1deg);}
6% {transform: translate(-3px, 0px) rotate(1deg);}
6.5% {transform: translate(3px, 2px) rotate(0deg);}
7% {transform: translate(1px, -1px) rotate(1deg);}
7.5% {transform: translate(-1px, 2px) rotate(-1deg);}
8% {transform: translate(-3px, 1px) rotate(0deg);}
8.5% {transform: translate(3px, 1px) rotate(-1deg);}
9% {transform: translate(-1px, -1px) rotate(1deg);}
9.5% {transform: translate(1px, 2px) rotate(0deg);}
10% {transform: translate(1px, -2px) rotate(-1deg);}}



/*PIE DE PÁGINA*/

/*	Parallax for footer*/
#sitecontent {
	height: 100%; width: 100%;
	padding: 0px;	position: relative; /*margin-right: -10px; margin-left: -10px;*/
	box-shadow: rgb(0 0 0 / 55%) 0px 5px 20px 0px;}
.section { position: relative; margin-left: auto; margin-right: auto;}
#sitecontent::before {
	content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
	background-image: url("../images/fondo.jpg");
	filter: blur(2px) brightness(120%) opacity(50%);
	-webkit-background-size: cover;	
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-position: center center; }



footer{padding:25px 0 0;text-align:center;}

section#footer {padding:0; padding-top: 200px;}

span.copyright{line-height:40px;color:#EFEFEF;cursor:default;text-align:center}
.cc-white, .cc-blue {border-width:0; max-height: 20px;vertical-align: top;}
.cc-white {  position: relative;}
span .cc-blue {display: none;}
span:hover .cc-blue {display: inline-block;}
span .cc-white { display: inline-block;}
span:hover .cc-white { display: none;}
.cc-blue {
  position: relative; 
  top: 0;  
  left: 0;
  opacity: 0;
  transition: .5s;}
.cc-white:hover .cc-blue {  opacity: 1;}

.agileits-social{line-height:40px;}
/*-- social-icons --*/
.agileits-social ul{
	padding:0;
	margin:0;margin-bottom: 15px;
	background:rgba(255,255,255,0.5);background:none;
	border-radius: 15px 0 15px 0; border: 1px solid #fff;border: 0;
	text-align: center;/*centra al elemento hijo inline-block*/}

.agileits-social ul li {
    display: inline-block;
    margin-left:1%;
	margin-right:1%;
	margin-top: 5px; }

.agileits-social ul li a {color: #333; text-align: left;}

.agileits-social ul li a i.fa.fa-facebook:hover {background: #4267B2}
.agileits-social ul li a i.fa.fa-twitter:hover{background: #1da1f2}
.agileits-social ul li a i.fa.fa-pinterest-p:hover{background: #E60023}
.agileits-social ul li a i.fa.fa-linkedin:hover{background: #0A66C2}
.agileits-social ul li a i.fa.fa-instagram{transform: translateY(-2px);}
.agileits-social ul li a i.fa.fa-instagram:hover {
    background: -webkit-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -webkit-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
	background: -moz-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -moz-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
	background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);}

.agileits-social ul li:nth-child(4){margin-right:0;}

.agileits-social ul li a *{
	text-align: center;
	background: #EFEFEF;
	color:#c27632;
	height: 27px; width: 27px; line-height: 27px;
    border-radius: 7px 0 7px 0; /* 50% */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	transition:0.5s all;}
.agileits-social ul li a *:hover{
	color: #fff;
	box-shadow: 0 0 0px rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);}

.agileits-social {
    padding: 2px;
	width: 100%; margin: 0 auto;}
/*-- EnD social-icons --*/

span.apostilla,
span.nota {cursor:help; position:relative; }
span.apostilla {color: #c27632;white-space: pre; }
span.nota {color: #fff;}
span.apostilla:hover,
span.nota:hover{color:#00a7ca;/*Texto azul igual a cc_icon_blue.png*/}
span.apostilla::before,
span.nota::before {
	content: attr(data-info);
	position: absolute;
	white-space:pre;
	opacity: 0;
    visibility: hidden;
	padding: 10px;
	z-index: 1;
	border-radius:15px 0 15px 0;
	font-family: 'Arial', sans-serif;
	font-size: 1em;font-size: 11px;
	border:solid 1px #bdbdbd;
	background-color: #fff;color: #333;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.28);
	transition: all 0.5s ease 0.25s;}
span.apostilla::before {
	transform: translate(-40%, -100%);}
span.nota::before {
	transform: translate(-10%, -100%);
	line-height: 137.5%; }
span.apostilla:hover::before,
span.nota:hover::before {
	opacity: 1;
	visibility: visible;}



[data-title] {
    position: relative;}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    white-space:pre;
    opacity: 0;
    visibility: hidden;
	padding: 4px;
	z-index: 1;
	transform: translate(-65%, -80%);
	border-radius:7px 0 7px 0;
	font-family: 'Arial', sans-serif;
	font-size: 11px;
	color: #fff;
	transition: all 0.5s ease 0.25s;}
[data-title]:hover:after {
    opacity: 1;
    visibility: visible;}


.subtexto {position:relative; }
.subtexto::before {
	opacity: 0;
	content: attr(data-info);
	position: absolute;
	text-align:center;
	z-index: 1;
	top: -22px;
	left:50%;
	transform: translate(-50%, -50%);
	width:100%;
	font-size: 14px;
	transition: opacity .5s;}
.muestrario:hover .subtexto::before,
.container:hover .subtexto::before,
.subtexto:hover::before
{opacity: 100%;}


.buttonReturn{margin: 0 auto; }
.buttonReturn a{
	display:inline-block;
	text-align: center;
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
	background-color:#e2b48b;
	color:#fff;
	height:40px;width:40px;
	z-index: 1 !important;
	border-radius:15px 0 15px 0;
	border:1px solid #fff;
	margin: 4px;
	font-size:20px;line-height:40px;
	outline:0;
	transition:all .3s;  }
.buttonReturn-inside{right: 20px; bottom: 10px; position: fixed;}

/* remove the below if you don't want smooth scrolling 
html,body {	scroll-behavior: smooth;}*/

.buttonReturn a:hover{background-color:#c27632;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);	}
.buttonReturn a:focus,.buttonReturn a:active{
	-webkit-animation-name:azulalclic;
	animation-name:azulalclic;
	-webkit-animation-duration:250ms;
	animation-duration:250ms;
	-webkit-animation-fill-mode:none;
	animation-fill-mode:none;
	animation-iteration-count:1;
	animation-direction: alternate;}


/* para advertencia de activar javascript */
    .warning-no-js {
		position: fixed; z-index: 1042;padding: .75em 1em;background: #f8f8ff ;/*era #fdd*/
		color: #525252;
		border-radius: 15px 0 15px 0;
		margin-top: 1.2em;
		box-shadow: 0 2px 8px black;box-shadow: 0 10px 30px 0px rgba(0,0,0,0.75);
		bottom: 2em; left: 15%; right: 15%;
		text-align: center;	}
   


		/* Reach out me pop up message */
		.overlay-popup {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.816);
			z-index: 10000;
		}
		
		/* Styles for the pop-up */
		.popup {
			display: none;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			padding: 20px;
			z-index: 10001;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		}
		
		.popup-content {
			text-align: center;
		}
		
		.close {
			position: absolute;
			top: 10px;
			right: 10px;
			cursor: pointer;
			font-size: 20px;
		}