@charset "UTF-8";
/* CSS Document
	Hospitalde Mascotas 450 -  Municipio de León
	Dirección de Tecnologías de La Información y Gobierno Digital
 */

/* ----------------------------------------------------
					FUENTES
----------------------------------------------------- */
@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-Bold.eot');
    src: url('font/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/Poppins-Bold.woff') format('woff'),
        url('font/Poppins-Bold.svg#Poppins-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;}

@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-Black.eot');
    src: url('font/Poppins-Black.eot?#iefix') format('embedded-opentype'),
        url('font/Poppins-Black.woff') format('woff'),
        url('font/Poppins-Black.svg#Poppins-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;}

@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-Light.eot');
    src: url('font/Poppins-Light.eot?#iefix') format('embedded-opentype'),
        url('font/Poppins-Light.woff') format('woff'),
        url('font/Poppins-Light.svg#Poppins-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;}

@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-Regular.eot');
    src: url('font/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Poppins-Regular.woff') format('woff'),
        url('font/Poppins-Regular.svg#Poppins-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;}

/* ----------------------------------------------------
					GENERAL
----------------------------------------------------- */
html {
	box-sizing: border-box;}

*, *:before, *:after {
  box-sizing: inherit;}

body {
	font-size: 13px;	
	padding:35px 15px;
	color:#888;
	font-family: 'Poppins';
	background:#f1f5f9;}

main#content {
	margin:0 auto;
	max-width: 1366px;
	padding:10px 0px 0px 0px;
	background:#fff;}

.ruta{
	clear:both;
	padding: 15px 20px;
	text-align: right;
	font-size: 16px;
	line-height: 18px;	}

.ruta a{
	color:#888;
	font-weight: bold;
	text-decoration: none;}

.ruta a:hover{
	color:#0194fe;
	text-decoration: none;}

/* ----------------------------------------------------
					ENCABEZADO
----------------------------------------------------- */
#encabezado{
	height:120px;
	padding:15px;}

.logotipo{
	width:210px; 
	float: left;  
	margin:0px 0px 0px 10px;}

/* ----------------------------------------------------
					BARRA DE NAVEGACIÓN
----------------------------------------------------- */
.navegacion {
	position: relative;
	z-index: 2;
	float:left;
	padding:5px 0px;
	left: 30px;
	border-bottom: 1px solid #005eb8}

.navegacion nav div {
	float: left;
	color: #005eb8;
	text-align: right;
	cursor: pointer;
	display: none;}

.navegacion nav ul {
/*	float: right;*/
    margin: 15px 0px 0px 0px;
    padding: 0px;
    list-style-type: none; }
 
.navegacion nav ul li {
	font-size: 16px;
    display: inline-block;}
 
.navegacion nav ul li a {
	font-family: 'Poppins';	
    font-weight: bold;
    font-style: normal;
	color: #005eb8;
	text-decoration: none;
	padding:10px 15px;
	display: block;}
 
.navegacion nav ul li a:hover {
	color:#fff;
	background:#0194fe;
	border-radius:5px;}
 
.navegacion nav ul ul {
      position: absolute;
      min-width:160px;
		margin:0px 5px;
		padding: 5px;
	border-radius: 5px;
      background: #e0edff; 	
      display: none;}
 
.navegacion nav ul ul li {
      display: block;
      background: #nav ul;}
 
.navegacion nav ul li:hover ul {
      display: block;}
 
.navegacion nav ul li i {
      color: #292929;
      float: right;
      padding-left: 10px;}

.ico-menu{
	width: 30px;
	height: 30px; }

a.contacto{
	float: left;
    display: block;
	width:150px;
    height:30px;
    text-decoration: none;
    background:url("img/contacto.svg") 0 0  no-repeat;
	background-size:30px 30px;
	margin:25px 0px 0px 60px;
	padding-left: 35px;
	color:#0194fe;
	font-weight: bold;
	font-size: 16px;}

a:hover.contacto{
    background-position: -30px 0;
	text-decoration:none;
    background:url("img/contacto-roll.svg") 0 0 no-repeat;
	background-size:30px 30px;
	color:#ffc000}

/* ----------------------------------------------------
					SLIDER
----------------------------------------------------- */
.slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  background-color: #e2e2e2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;}

.slider {
  position: relative;
  width: 9999px;}

.slider:before,
.slider:after {
  display: table;
  content: ' ';}

.slider:after {
  clear: both;}

.slider__item {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  height: 100%;}

.slider__item img {
  display: block;
  max-width: 100%;
  height: auto;}

.slider__switch span {
  color: #fff;
  display: block;
  width: 32px;
  height: 32px;}

/* Arrows */
.slider__switch {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  padding: 10px 5px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
  border-radius: 1px;
  background: #000;
  opacity: .3;
  transition: opacity .15s ease;
  fill: #fff;}

.slider__switch--prev {
  left: 10px;}

.slider__switch--next {
  right: 10px;}

.slider__switch:hover {
  opacity: .85;}

.slider__switch[disabled] {
  visibility: hidden;
  opacity: 0;}

.slider__caption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  display: block;
  max-width: 500px;
  padding: 10px;
  color: #fff;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 20px 10px rgba(0,0,0,.4);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* ie8 */}

.slider__caption[disabled] {
  opacity: 0;
  visibility: hidden;}

.slider-nav {
  line-height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 99999;
  filter: alpha(opacity=90); /* ie8 */}

.slider-nav__control {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 3px;
  -webkit-transition: background .5s ease;
     -moz-transition: background .5s ease;
       -o-transition: background .5s ease;
          transition: background .5s ease;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;}

.slider-nav__control.is-active {
  width: 12px;
  height: 12px;
  background: #fff;}

.slider.has-touch {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor:    -moz-grabbing;}


/* ----------------------------------------------------
					BIENVENIDOS
----------------------------------------------------- */
#bienvenidos{
	clear: both;
	padding:80px 50px 80px 50px;
	background:url("img/bienvenidos.jpg") top center;
	background-repeat:no-repeat;
	background-color:#fff;
	background-size:cover;
	background-position:center;
    background-position-y: initial;}

#bienvenidos h1{
	color:#005eb8;
	font-size: 50px;
	letter-spacing: 1px;
	text-align: center;
	margin: 0px;}

.txt{
	margin: 0 auto;
	width: 80%;
	padding: 10px;
	text-align: center;
	font-size: 18px;
	font-weight: 300;
	line-height: 26px;}

.txt strong{font-weight: bold;}


/* ----------------------------------------------------
					SERVICIOS
----------------------------------------------------- */
#servicios{
	clear: both;
	padding:80px 0px 0px 0px;
	background:url("img/servicios.jpg") top center;
	background-repeat:no-repeat; 
	background-size:cover;
	background-position:center;
    background-position-y: initial;}

.info-servicios {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;}

.info-servicios > div {
	padding:0px;
	margin: 0px; }

.box-descripcion {	
	flex-basis:400px;
	flex-grow: 2;
	order: 1;}

.box-ilustra {
	flex-basis:450px;
	flex-grow: 3; 
	font-size: 0px;
	line-height: 0px;
	text-align: right;
	order: 2;}

.box-descripcion h1{
	color:#005eb8;
	font-size: 50px;
	letter-spacing: 1px;
	text-align: left;
	padding: 10px 35px;
	margin: 0px;}

.imagen{
	margin-top: -190px;
	width:90%;}

.txt-servicios{
	padding: 10px 35px;
	text-align:left;
	font-size: 18px;
	font-weight: 300;
	line-height: 26px;
	color:#005eb8;}

.txt-servicios strong{ font-weight: bold;}

#contenedor-menu-servicios{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	

.mod-servicios{
	display: -webkit-flex;
	-webkit-flex-direction: column;}

.info-item{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	margin:5px;
	padding:25px 20px;}	

.servicio {
	font-size: 15px;
	line-height: 20px;}

.servicio a {
	color:#005eb8;
	text-decoration: none;}

.servicio a:hover {
	color:#0194fe;
	text-decoration: none;}

.ico-servicio{
	float: left;
	width:55px;
	margin-right:5px;}

.servicio strong {
	font-weight: bold;
	font-size: 18px;}

a.bot-ver-mas{
	margin: 0 auto;
    display: block;
	width:130px;
    height:50px;
	line-height:50px;
    text-decoration: none;
    background:url("img/mas-servicios.svg") 0 0  no-repeat;
	background-size:50px 50px;
	padding-left:55px;
	color:#0194fe;
	font-weight: bold;
	font-size: 16px;}

a:hover.bot-ver-mas{
    background-position: -30px 0;
	text-decoration:none;
    background:url("img/mas-servicios-roll.svg") 0 0 no-repeat;
	background-size:50px 50px;
	color:#ffc000}

/* ----------------------------------------------------
					TIPS
----------------------------------------------------- */
#tips{
	background:#fff;
	padding:10px 0px 50px 0px;
	text-align: center;
	margin-top: -45px;}

.encabezado-tips{
	font-size: 0px;
	line-height: 0px;
	margin-top:70px;
	text-align: center;}

.banner{
	width:100%;}

#carrusel-tip{
	padding: 25px;
	margin:20px 20px;}

#tips h1{
	color:#005eb8;
	font-size: 50px;
	letter-spacing: 1px;
	text-align: center;
	padding: 10px 35px;
	margin: 0px;}

.txt-tips-intro{
	margin: 0 auto;
	width: 35%;
	text-align: center;
	color:#005eb8;
	font-size:21px;
	padding: 15px;
	line-height: 28px;}

#mixedSlider { position: relative; }

#mixedSlider .MS-content {
  white-space: nowrap;
  overflow: hidden;
  margin:0px 5px 20px 5px; }

#mixedSlider .MS-content .item {
  display: inline-block;
  width: 33%;
  height: 100%;
	text-align: center;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  white-space: normal;
  padding:5px;}

#mixedSlider .MS-content .item .imgTitle {  position: relative; }

#mixedSlider .MS-content .item .imgTitle .blogTitle {
	color: #005eb8;
	margin: 0px;}

#mixedSlider .MS-content .item .imgTitle img {
	height: auto;
	width:55%;}

#mixedSlider .MS-content .item .imgTitle a img {
	border: 0px;  }

#mixedSlider .MS-content .item .imgTitle a:hover img {
	border: 0px;}

#mixedSlider .MS-content .item p {
	color:#005eb8;
	margin: 0px;}

#mixedSlider .MS-content .item a { 
	color: #005eb8; 
	text-decoration: none;
	line-height: 20px;
	font-size: 16px;}

#mixedSlider .MS-content .item a:hover {
	color:#ffc000;}

#mixedSlider .MS-controls button {
  position: absolute;
  border: none;
  background-color: transparent;
  outline: 0;
  font-size: 50px;
  top: 45px;
  color: rgba(0, 0, 0, 0.8);
  transition: 0.15s linear;}

#mixedSlider .MS-controls button:hover {
  color: rgba(0, 0, 0, 0.8);}

#mixedSlider .MS-controls .MS-right {
  right: 0px;}

.MS-right {
    width: 70px;
    height: 70px;
    background: url(img/flecha-bis.svg) no-repeat;
    background-size: 70px 70px;
    cursor: pointer;}

.MS-left {
    left:0%;
    width: 70px;
    height: 70px;
    background: url(img/flecha.svg) no-repeat;
    background-size: 70px 70px;
	cursor: pointer;}
	
a.bot-ver-tips{
	margin: 0 auto;
    display: block;
	width:130px;
    height:50px;
	line-height:50px;
    text-decoration: none;
    background:url("img/mas-tips.svg") 0 0  no-repeat;
	background-size:50px 50px;
	padding-left:55px;
	color:#005eb8;
	font-weight: bold;
	font-size: 16px;}

a:hover.bot-ver-tips{
    background-position: -30px 0;
	text-decoration:none;
    background:url("img/mas-tips-roll.svg") 0 0 no-repeat;
	background-size:50px 50px;
	color:#ffc000}

/* ----------------------------------------------------
					CONTÁCTANOS
----------------------------------------------------- */
#contactanos{
	clear: both;
	padding:20px;
	background:url("img/contactanos.jpg") top center;
	background-repeat:no-repeat; 
	background-size:cover;
	background-position:center;
    background-position-y: initial;}

#contenedor-contacto{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	

.mod-datos{
	display: -webkit-flex;
	-webkit-flex-direction: column;}

.info-contacto{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	margin:5px; 
	font-size: 16px;
	line-height: 22px;
	color:#fff;}

.info-contacto h1{
	color: #fff;
	font-size:40px;
	letter-spacing: 1px;
	text-align: left;
	margin: 0px;}

.datos-cont{
	padding: 5px;}

.datos-cont a{ 
	color:#fff;
	text-decoration: none;}

.datos-cont a:hover{ 
	color:#ffc000;
	text-decoration: none;}

.ico-contacto{
	float: left;
	width: 50px;
	margin:0px 10px 30px 0px;}

a.mail{
	margin: 0 auto;
    display: block;
    height:50px;
	line-height:50px;
    text-decoration: none;
    background:url("img/mail.svg") 0 0  no-repeat;
	background-size:50px 50px;
	padding-left:55px;
	color:#fff;
	font-size: 16px;}

a:hover.mail{
    background-position: -30px 0;
	text-decoration:none;
    background:url("img/mail-roll.svg") 0 0 no-repeat;
	background-size:50px 50px;
	color:#ffc000}

/* ----------------------------------------------------
					PIE DE PÁGINA
----------------------------------------------------- */
footer{
	padding:35px 20px 35px 20px;
	background: #005eb8;}

#contenedor-pie-pagina{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	

.mod-footer{
	display: -webkit-flex;
	-webkit-flex-direction: column;}

.info-footer{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	margin:5px; }

.identidad{
	width:95%;
	padding: 10px;
	margin-bottom: 20px;}

.logo-identidad{
	width:210px; 
	float: left;  
	margin:0px 0px 0px 10px;}

.social-media{
	width: 300px;
	height:50px;
	padding:0px 35px 0px 35px; }

a.facebook{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/facebook.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 35px;
	margin-bottom: 10px;
	margin-right:5px;}

a:hover.facebook{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/facebook-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:35px 35px;} 

a.x{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/x.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 350px;
	margin-bottom: 10px;
	margin-right:5px;}

a:hover.x{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/x-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:30px 30px;} 

a.instagram{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/instagram.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 35px;
	margin-bottom: 10px;
	margin-right:5px;}

a:hover.instagram{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/instagram-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:35px 350px;} 

a.tiktok{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/tiktok.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 35px;
	margin-bottom: 10px;
	margin-right:5px;}

a:hover.tiktok{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/tiktok-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:35px 35px;} 

a.youtube{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/youtube.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 35px;
	margin-bottom: 10px;
	margin-right:5px;}

a:hover.youtube{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/youtube-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:35px 35px;} 

.sub-menu{
	color:#fff;
	float: left;
	width: 49%;
	padding: 10px;}

.sub-menu span{
	font-weight: bold;
	font-size: 20px;}

.ico-footer{
	float: left;
	width: 35px;
	margin-right:5px;}

.sub-menu ul {
	margin: 10px 5px 10px 5px;
	padding: 0px;	}

.sub-menu li {
	list-style: none;
	clear: both;
	padding:0px 0px 5px 0px;}
	
.sub-menu  li a{
	color:#fff;
	font-size: 15px;
	line-height: 20px;
	text-decoration: none;
	outline: none;
	padding:0px 0px 5px 35px;}

.sub-menu li a:hover {
	text-decoration:none;
	color:#ffc000;}

/* ----------------------------------------------------
					COPY
----------------------------------------------------- */
#copy{
	clear: both;
	height: 55px;
	padding:5px 35px 5px 35px;
	background: #0194fe;
	color:#fff;
	font-size: 18px;
	line-height: 50px;
	text-align:center;}	

/* ----------------------------------------------------
					FILOSOFÍA
----------------------------------------------------- */
#filosofia{
	padding:40px 20px 180px 20px;
	background:url("img/filosofia.png") top right;
	background-repeat:no-repeat;
	background-color:#f1edee;
	background-size:cover;
	background-position:right;
	background-position-y: initial;}

#filosofia h1{
	color:#005eb8;
	font-size: 50px;
	letter-spacing: 1px;
	text-align: center;
	padding: 10px 10px;
	margin:10px 0px;}

.txt-mision h2{
	font-size: 30px;
	margin:10px 0px;}

.txt-mision{
	width: 45%;
	padding:40px 25px;
	font-size: 18px;
	line-height: 28px;}

#cintilla-filosofia{
	padding:25px 15px;
	text-align: center;
	background:#ebf3f9;}	

.img-filosofia{
	width: 250px;}
	
#filosofia-bis{
	padding:70px 20px 70px 20px;
	background:#f1edee;}

#filosofia-bis h2{
	text-align: center;
	font-size: 30px;
	margin:10px 0px 20px 0px;}

.txt-vision{
	margin: 0 auto;
	width: 52%;
	padding:35px 25px;
	font-size: 18px;
	line-height: 28px;
	text-align: center;}

.linea{
	margin: 0 auto;
	width: 80%;
	height: 1px;
	background: #ccc;}

.lista-valores{
	margin: 0 auto;
	width:79%;
	padding: 10px;}

#contenedor-valores{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	

.mod-valores{
	display: -webkit-flex;
	-webkit-flex-direction: column;}

.info-valor{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	margin:5px;
	text-align: center;
	font-size: 18px;}

.txt-valor{
	margin: 0 auto;
	padding: 10px;
	width: 150px;}

.ico-valor{
	width:140px;
	margin: 10px 0px 0px 0px;}


/* ----------------------------------------------------
					SERVICIOS
----------------------------------------------------- */
#informa-servicio{
	padding:60px 35px 140px 35px;
	background:url("img/consulta-servicio.jpg") top right no-repeat;
	background-repeat:no-repeat;
	background-color:#fff;
	background-size:cover;
	background-position:right;
	background-position-y: initial;}

.descripcion-servicio{
	width: 45%;
	padding:30px 25px;
	font-size: 18px;
	line-height: 28px;
	text-align:left;}

.descripcion-servicio h2{
	font-size: 32px;
	margin:10px 0px 25px 0px;}

.ico-informa{
	vertical-align: middle;
	width: 70px;
	margin-right: 5px;}

.info-requisito {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;}

.info-requisito > div {
	padding:30px 35px;
	margin: 0px; }

.box-requisitos {
	flex-basis:550px;
	flex-grow: 2;
	order: 1;
	background: #2259ab;}

.box-requisitos h2{
	color:#fff;
	font-size:20px;
	line-height: 22px;
	margin:10px 0px 15px 0px;}

.box-ilustra-requisito {
	flex-basis:250px;
	flex-grow: 3; 
	order: 2;
	background:#0194fe;}

.box-ilustra-requisito h2{
	text-align: left;
	color:#fff;
	font-size: 32px;
	margin:10px 0px 0px 0px;}

.box-requisitos ul {
	margin: 5px;
	padding: 0px;	}

.box-requisitos li {
	list-style: none;
	clear: both;
	padding:0px 0px 12px 0px;}
	
.box-requisitos  li{
	color: #fff;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	outline: none;
	padding:0px 0px 10px 30px;
	background: url("img/bullet.svg") no-repeat;
	background-size:25px 25px;}

.costo{
	padding: 10px 10px 30px 10px;
	color: #fff;
	font-size: 16px;
	line-height: 22px;}

.ilustra-requisitos{
	margin: 0 auto;
	text-align: center;
	padding: 10px;}

.img-requisitos{
	width: 220px;
	margin:-20px 0px 10px 0px;}

.horarios {
    width: 100%;
    height:140px;
    padding:20px 60px 20px 60px;
    background: url("img/ornamento-1.svg");
    background-repeat: no-repeat;
    background-position: right;
	background-color: #fff;}

.horarios h2{
	font-size: 32px;
	margin:0px;}

.txt-horarios{
	padding:0px 10px;
	width:32%;
	font-size: 18px;
	line-height: 24px;}

/* ----------------------------------------------------
					TIPS
----------------------------------------------------- */
.info-tips {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;}

.info-tips > div {
	padding:0px;
	margin: 0px; }

.box-ilustra-tips {	
	flex-basis:90px;
	flex-grow: 2;
	order: 1;}

.box-info-tips {
	flex-basis:550px;
	flex-grow: 3; 
	order: 2;}

.ornamento {
    width:250px;
    height:140px;
    background: url("img/ornamento-2.svg");
    background-repeat: no-repeat;
    background-position: right;
	background-color: #fff;}

.box-info-tips h1{
	padding:15px 75px 15px 25px;
	color:#3b57a9;
	font-weight: bold;
	font-size: 32px;
	line-height: 36px;}

.txt-tips{
	width:80%;
	padding:10px 20px 50px 20px;
	font-size: 18px;
	line-height: 24px;}

.txt-tips strong{
	font-weight: bold;}

.tip-etiqueta{
	float: right;
	width:200px;
	vertical-align: middle;
	margin-left: 20px;}

.cintilla-tips{
	clear: both;
	margin: 20px 0px;}

.img-cintilla{
	width: 100%;}

.marca{
	margin: 0 auto;
	width: 120px;
	padding:20px 10px;
	text-align: center;}


/* ----------------------------------------------------
					DIRECTORIO
----------------------------------------------------- */
#directorio{
	clear: both;
	padding:50px 15px 50px 15px;
	background:url("img/back-directorio.jpg") top left;
	background-repeat:no-repeat;
	background-color:#e2e9f3;
	background-size:cover;
	background-position:left;
    background-position-y: initial;
	border-radius: 5px;}

#directorio h1{
	color:#005eb8;
	font-size: 50px;
	letter-spacing: 1px;
	text-align: center;
	margin: 0px;}

.txt-directorio{
	margin: 0 auto;
	width:55%;
	text-align: center;
	color:#005eb8;
	font-size:21px;
	padding: 15px;
	line-height: 28px;}

#contenedor-directorio{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	

.mod-funcionario{
	display: -webkit-flex;
	-webkit-flex-direction: column;}

.info-directorio{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	margin:10px 3px;}

.titular{
	margin: 0 auto;
	width: 33%;
	padding: 20px 0px;}

.tarjeta{
	margin: 0 auto;
	width:99%;
	background: #f4f4f6;
	line-height: 0px;
	text-align: center;}

.avatar{
	width: 100%;}

.nombre-funcionario{
	height:70px;
	background: #005eb8;
	padding: 10px;
	color:#fff;
	text-align: center;
	font-size: 15px;
	line-height: 20px;}

.datos-funcionario{
	height:70px;
	color:#888;
	text-align: left;
	font-size: 15px;
	line-height: 20px;	
    padding:10px 0px 10px 65px;
    background: url("img/detalle-directorio.svg");
    background-repeat: no-repeat;
    background-position:left;
	background-color: #fff;}

.datos-funcionario a{
	color:#888;}

.datos-funcionario a:hover{
	color:#ffc000;}

a.mail-funcionario{
	height:25px;
    display: block;
    text-decoration: none;
    background:url("img/mail-funcionarios.svg") 0 0  no-repeat;
	background-size:20px 20px;
	padding-left:25px;
	color:#888;
	margin-bottom:5px;
	font-size: 14px;}

a:hover.mail-funcionario{
    background-position: -30px 0;
	text-decoration:none;
    background:url("img/mail-funcionarios-roll.svg") 0 0 no-repeat;
	background-size:20px 20px;
	color:#ffc000}

.ico-tel{
	vertical-align: middle;
	width: 25px;
	margin-right: 10px;}

a.ver-area{
	float:right;
	width:90px;
	height:25px;
    display: block;
    text-decoration: none;
    background:url("img/bullet-directorio.svg") 0 0  no-repeat;
	background-size:20px 20px;
	padding-left:25px;
	color:#000000;
	margin-right:15px;
	font-size: 14px;}

a:hover.ver-area{
    background-position: -30px 0;
	text-decoration:none;
    background:url("img/bullet-directorio-roll.svg") 0 0 no-repeat;
	background-size:20px 20px;
	color:#0194fe;}

/* ----------------------------------------------------
					DIRECCIÓN DE AREA
----------------------------------------------------- */
#area{
	padding:40px 20px 180px 20px;
	background:url("img/back-area.jpg") top right;
	background-repeat:no-repeat;
	background-color:#f1edee;
	background-size:cover;
	background-position:right;
	background-position-y: initial;}

#area h1{
	color:#0194fe;
	font-size:35px;
	line-height:45px;
	text-align: left;
	margin:100px 520px 20px 20px;}

.txt-area{
	width:55%;
	padding:80px 20px 120px 20px;
	font-size: 19px;
	line-height:30px;}

.txt-area strong{font-weight: bold;}

.ubicacion {
    width:83%;
    height:150px;
    padding:20px 30px 20px 170px;
    background: url("img/ornamento-3.svg") no-repeat;
    background-repeat: no-repeat;
    background-position: top left;
	background-color: #edf5f9;
	background-size: 170px;
	border-top-left-radius: 100px;}

#contenedor-ubicacion{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	

.mod-ubicacion{
	display: -webkit-flex;
	-webkit-flex-direction: column;}

.info-area-ubi{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	margin:5px;}

.txt-ubica{
	padding:20px 10px;
	text-align:left;
	font-size: 16px;}

.txt-ubica a{
	color:#888;
	text-decoration: none;}

.txt-ubica a:hover{
	color:#005eb8;
	text-decoration: none;}


.ico-ubica{
	width: 60px;
	float: left;
	margin-right: 10px;}

/* ----------------------------------------------------
					CONTÁCTANOS
----------------------------------------------------- */
#contenedor-contactanos{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	

.mod-contactanos-secc{
	display: -webkit-flex;
	-webkit-flex-direction: column;}

.info-contactanos-secc{
	background:#f0f1f2;		
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;}	

.mod-img-secc-contacto{
	line-height: 0px;
	font-size: 0px;
	text-align: center;
	padding-bottom: 20px;
	background: #2fd5f7;}

.ilustra-contacto{
	width: 100%;}

.mod-contac-secc{
	font-size: 18px;
	line-height: 24px;
	padding:80px 25px 45px 25px;}

.mod-contac-secc h1{
	color:#0194fe;
	font-size:45px;
	margin:20px 0px;
	text-align: left;}

.ico-secc-contacto{
	float: left;
	width:40px;
	margin:0px 20px 20px 0px;}

a.mail-contacto-secc{
	height:45px;
    display: block;
    text-decoration: none;
    background:url("img/mail-funcionarios.svg") 0 0  no-repeat;
	background-size:40px 40px;
	padding-left:50px;
	color:#888;
	margin-bottom:5px;
	font-size: 18px;}

a:hover.mail-contacto-secc{
    background-position: -30px 0;
	text-decoration:none;
    background:url("img/mail-contacto.svg") 0 0 no-repeat;
	background-size:40px 40px;
	color:#0194fe}

/* ----------------------------------------------------
					SECCIÓN SERVICIOS
----------------------------------------------------- */
#servicios-secc{
	clear:both;
	padding:25px 20px 105px 20px;
	background:#edefee;}

.titulo{
	margin: 0 auto;
	width:350px;
	padding: 20px;}

#servicios-secc h1{
	color:#0194fe;
	font-size: 50px;
	letter-spacing: 1px;
	text-align: center;
	padding: 10px 10px;
	margin:10px 0px;}

.orla{
	float: left;
	width: 280px;
	margin: -70px 0px 30px -250px;}

.enc-seccion{
	margin: 0 auto;
	width:88%;
	padding:0px 20px;
	text-align: center;}

.img-central{
	width: 95%;
	margin:-150px 0px 0px 0px;}

.txt-servicios-secc{
	padding:0px 20px 20px 20px;
	margin: 0 auto;
	width:50%;
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	color:#005eb8}

#servicios-secc h2{
	color:#005eb8;
	font-size:20px;
	text-align: center;
	padding: 10px 10px;
	margin:10px 0px;}

#caja-busqueda{
	margin: 0 auto;
	width:46%;
	height:50px;
	padding:5px;
	border:1px solid #005eb8;
	border-radius: 5px;}

.input-buscar{
	width:98%;
	background-image: url('img/ico-buscar.svg');
	background-repeat: no-repeat;
	background-position: 4px center;
	background-size:25px;
	display: flex;
	align-items: center;
	padding:0px 0px 0px 35px;
	height: 35px;
	border: 0px;
	margin:0 auto; }

.input-buscar input { 
	width:99%;
	font-size: 16px;
	background: transparent;
	border: none;
	color:#005eb8;
	font-family: 'Poppins'}

.input-buscar input:focus { 
	
	outline: none;}

.input-buscar input::placeholder {
	color:#005eb8;}

.centrar-boton{
	margin: 0 auto;
	padding:20px 10px;
	width: 210px;}

.boton-buscar{
	width: 200px;
	height:50px;
	border:0px;
	border-radius:5px;
    background:#0194fe;
	font-size: 16px;
	font-family: 'Poppins';
	font-weight: 900;
	color: #fff;
	margin-top: 15px;}

.boton-buscar:hover{
	cursor: pointer;}

#paginacion{
	margin: 0 auto;
    width:95%;
    height: 30px;
    padding: 25px 15px 45px 15px;}

a.bot-pag-next{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:#dee0e2 url("img/flecha.svg") 0 0  no-repeat;
	background-position: center;
	background-size: 25px 25px;
	line-height:30px;
	margin:7px;
	border-radius:3px;}

a:hover.bot-pag-next{
    background-position: -35px 0;
	text-decoration:none;
    background:#005eb8 url("img/flecha-roll.svg") 0 0 no-repeat;
	background-position: center;
	background-size: 25px 25px;} 		

a.bot-pag-back{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:#dee0e2 url("img/flecha-bis.svg") 0 0  no-repeat;
	background-position: center;
	background-size: 25px 25px;	
	border-radius:3px;
	margin:7px;}

a:hover.bot-pag-back{
    background-position: -35px 0;
	text-decoration:none;
    background:#005eb8 url("img/flecha-bis-roll.svg") 0 0 no-repeat;
	background-position: center;
	background-size: 25px 25px;} 		

a.bot-pag{
	float: left;
    display: block;
    width:35px;
    height:35px;
	line-height:35px;
	font-size: 14px;
	font-family: 'Poppins';
	font-weight: 300;
	background: #dee0e2;
    text-decoration: none;
	text-align: center;
	color:#005eb8;
    background:#;
	margin:7px;
	border-radius:3px;}

a:hover.bot-pag{
    background-position: -25px 0;
	text-decoration:none;
	color:#fff;
    background:#005eb8;} 

.bot-pag-activo{
	float: left;
    display: block;
    width:25px;
    height:25px;
	line-height: 25px;
	font-size: 13px;
    text-align: center;
	color:#fff;
    margin:5px;
	border-radius: 5px;
	background-position: -25px 0;
	text-decoration:none;
    background:#3c105e;}

#contenedor-resultados{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	

.mod-result-servicios{
	display: -webkit-flex;
	-webkit-flex-direction: column;}

.info-result{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	padding:10px 5px;}	

.lista-resultados{
	clear: both;	
	padding:20px 20px; }

/* ----------------------------------------------------
					SECCIÓN TIPS
----------------------------------------------------- */
#tips-secc{
	clear: both;
	padding: 25px 20px 80px 20px;
	background: #fff;}

#tips-secc h1{
	color:#005eb8;
	font-size: 50px;
	letter-spacing: 1px;
	text-align: center;
	padding: 10px 35px;
	margin: 0px;}

.txt-tips-secc{
	margin: 0 auto;
	width: 35%;
	text-align: center;
	color:#005eb8;
	font-size:21px;
	padding: 15px;
	line-height: 28px;}

#tips-secc h2{
	color:#005eb8;
	font-size:20px;
	text-align: center;
	padding: 10px 10px;
	margin:10px 0px;}

#contenedor-result-tips{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	

.mod-result-tips{
	display: -webkit-flex;
	-webkit-flex-direction: column;}

.info-result-tips{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	padding:10px 5px;}	

.mod-result-tips ul {
	margin:0px 0px 0px 0px;
	padding: 0px;
	text-align: left;}

.mod-result-tips li {
	list-style: none;
	clear: both;
	line-height:20px;
	font-size: 16px;
	padding:0px 0px 35px 0px;}
	
.mod-result-tips li a{
	color: #005eb8;
	text-decoration: none;
	outline: none;
	padding:5px 0px 5px 45px;
	background: url("img/vineta.svg") no-repeat;
	background-size:30px 30px;}

.mod-result-tips li a:hover {
	text-decoration:none;
	background: url("img/vineta-roll.svg") no-repeat;
	color:#ffc000;
	background-size:30px 30px;}

#mascota-tips{
	margin: 0 auto;
	width: 85%;
	padding: 10px;
	text-align: center;}

.mascota{
	width: 98%;
	margin:-50px 0px 20px 0px;}

/* ----------------------------------------------------
					ARTÍCULO
----------------------------------------------------- */
#articulo{
	clear: both;
	padding: 25px 20px 80px 20px;
	background: #fff;}

.img-articulo{
	margin: 0 auto;
	width: 50%;
	padding: 10px;
	text-align: center;}

.banner-articulo{
	width:100%;}

.intro-articulo{
	width:92%;
	margin: 0 auto;
	padding: 10px 30px;
	background: #e8f1f9;
	border-radius: 5px;
	font-size: 18px;
	line-height: 24px;
	text-align: justify}

.intro-articulo strong{
	font-weight: bold;}

.intro-articulo h1{
	color:#005eb8;
	font-size: 25px;
	line-height: 28px;
	font-weight: 900;}

.vineta{
	vertical-align: middle;
	width: 60px;
	margin-right: 10px;
	margin-bottom:20px;}

.contenido-articulo{
	width:92%;
	margin: 0 auto;
	padding: 10px 30px;
	font-size: 18px;
	line-height: 24px;
	text-align: justify	}

.contenido-articulo a{
	display: block;
	width: 50%;
	margin: 0 auto;
	height: 55px;
	line-height:18px;
	border: 1px solid #005eb8;
	background: url("img/link.svg") no-repeat;
	padding:10px 0px 0px 40px;
	background-size:35px;	
	border-radius: 5px;
	font-size: 16px;
	text-decoration: none;
	color:#005eb8;}

.contenido-articulo a:hover{
	border: 1px solid #ffc000;
	background: url("img/link-roll.svg") no-repeat;
	padding:10px 0px 0px 40px;
	background-size:35px;	
	color:#ffc000;}

.contenido-articulo ul {
	margin:15px 0px 15px 0px;
	padding: 10px;
	text-align: left;}

.contenido-articulo li {
	list-style: none;
	clear: both;
	line-height:22px;
	font-size: 18px;
	background: url("img/vineta-lista.svg") no-repeat;
	background-size:30px 30px;	
	padding:5px 0px 10px 45px;}
	


/* ----------------------------------------------------
					MEDIA QUERY
----------------------------------------------------- */
@media (max-width: 1150px) {
	.navegacion { left:15px;  border-bottom: 0px;}
	
	.navegacion nav div {display: block; padding: 5px;}
	
 	.navegacion nav ul { clear: both; display: none; position: static; padding:20px 5px; background:#e2e2e2; border-radius: 5px; }

	.navegacion nav ul li { display: block;}

	.navegacion nav ul ul { position: static;}	
	
	.navegacion nav ul li {font-size: 12px;}
	
	#bienvenidos{padding:50px 20px 50px 20px;}	

	#bienvenidos h1{font-size: 35px;}	

	.txt{ width:90%; font-size: 15px; line-height: 22px;}	
	
	#servicios{padding:40px 0px 0px 0px;}

	.info-item{ padding:10px 5px;}		
	
	.box-descripcion {flex-basis:330px;}

	.box-ilustra {flex-basis:320px;}	
		
	.box-descripcion h1{font-size: 35px;  margin: 0px 0px;}
	
	.txt-servicios{font-size: 15px; line-height: 22px; padding:15px 25px;}	
		
	.imagen{margin-top: -130px; width:100%;}

	.ico-servicio{width:35px; margin-bottom: 25px;}

	.servicio b { font-size: 14px;}	

	.servicio { font-size: 12px; line-height:16px;}	
	
	#tips h1{font-size: 35px;}	
	
	.txt-tips-intro{ width:90%; font-size: 15px; line-height: 22px;}

	.info-contacto{ font-size: 13px; line-height:18px; }
	
	.info-contacto h1{ font-size:22px;}	

	.ico-contacto{ width: 30px;}

	a.mail{ height:30px; line-height:30px; background-size:30px 30px; padding-left:35px; font-size: 13px;}

	a:hover.mail{ background-size:30px 30px;}	
	
	.logo-identidad{width:120px; }

	.sub-menu span{ font-size:14px;}	
	
	.sub-menu  li a{ font-size: 12px; line-height:18px; padding:0px 0px 5px 0px;}
	
	.ruta{ font-size: 13px; line-height: 15px;}	
	
	#filosofia h1{font-size: 35px;}	
	
	#filosofia{padding:50px 10px 50px 10px; background-position:80%;}	
	
	.txt-mision h2{font-size:22px; }

	.txt-mision{ width: 45%; padding:20px 10px; font-size: 14px; line-height: 20px;}	
	
	.img-filosofia{width:180px;}	
	
	#filosofia-bis h2{font-size:22px; }
	
	.txt-vision{ width:75%; padding:20px 10px; font-size: 14px; line-height: 20px;}
	
	.lista-valores{ width:85%; }	
	
	.ico-valor{width:120px;	margin:5px 0px 0px 0px;}
	
	.info-valor{font-size: 15px;}
	
	#informa-servicio{padding:50px 20px 50px 20px; background-position:75%;}
	
	#informa-servicio h2{font-size:22px; margin:5px 0px 5px 0px;}

	.ico-informa{ width:50px;}	

	.descripcion-servicio{ width: 50%; font-size: 15px; line-height: 22px; padding:20px 10px;}	
	
	.info-requisito > div {	padding:20px 20px;}
	
	.box-requisitos h2{font-size:22px; }
	
	.box-ilustra-requisito{font-size:22px; }
	
	.box-requisitos  li a{ font-size: 13px; line-height:17px;}

	.ilustra-requisitos{width:250px;}
	
	.img-requisitos{ width: 200px;}	
	
	.box-requisitos { flex-basis:300px;}

	.box-ilustra-requisito {flex-basis:200px;}

	.costo{ font-size: 14px; line-height:18px;}
	
	.horarios {padding:20px 15px 20px 15px;}	
	
	.horarios h2{font-size:22px; }

	.txt-horarios{ width:75%; font-size: 15px; line-height:18px;}	
	
	.ornamento { width:200px; height:130px;}	
	
	.box-info-tips h1{font-size:20px; line-height: 24px;}	
	
	.txt-tips{width:95%; font-size: 14px; line-height:20px;}	
	
	.tip-etiqueta{ width:130px; margin-left: 10px;}	
	
	#directorio{padding:20px 15px 20px 15px; background-position:18%;}
	
	#directorio h1{font-size:20px; line-height: 24px;}	
	
	.txt-directorio{ width:90%; font-size: 15px; line-height: 22px;}
	
	.titular{ width: 98%;}
	
	.tarjeta{ width:98%;}

	a.mail-funcionario{ font-size: 11px;}	
	
	.nombre-funcionario{font-size: 13px; line-height: 16px;}	

	.datos-funcionario{height:70px; font-size: 12px; line-height:16px; padding:10px 0px 10px 65px;}	

	.ico-tel{width:20px; margin-right:5px;}	

	a.ver-area{font-size: 12px;}	
	
	#area{padding:30px 20px 200px 20px; background-position:60%;}	
	
	#area h1 { font-size: 25px; line-height:30px; margin:80px 400px 20px 20px;}	
	
	.txt-area {width: 60%; padding:80px 20px 70px 20px; font-size: 16px; line-height: 25px;}	
	
	.ubicacion {width:98%; padding:10px 10px 10px 150px;}

	.txt-ubica{  font-size: 14px;}	

	.ico-ubica{ width:40px; margin-right:5px;}	
	
	.mod-contac-secc h1{ font-size:25px; }	

	.mod-contac-secc{ font-size: 16px; line-height: 20px; padding:20px 15px 20px 15px; height: auto;}
	
	.ico-secc-contacto{ width:30px;}

	a.mail-contacto-secc{ height:35px; background-size:30px 30px; padding-left:35px; font-size: 16px;}	
	
	a:hover.mail-contacto-secc{background-size:30px 30px;}	

	.titulo{ width:370px; padding: 20px;}	

	#servicios-secc{ padding:25px 0px 105px 0px; }	
	
	#servicios-secc h1{font-size: 35px;}	
	
	.orla{ width:170px; margin: -60px 0px 80px -60px;}

	.img-central{ width:100%; margin:-140px 0px 0px 0px;}	
	
	.txt-servicios-secc{padding:0px 10px 0px 10px; width:68%; font-size: 16px; line-height: 20px}	
	
	#servicios-secc h2{font-size:16px; }
	
	#caja-busqueda{ width:70%;}
	
	.input-buscar input { font-size: 14px; }

	.boton-buscar{ font-size: 14px;}	
	
	#paginacion{ width:98%;}
	
	#tips-secc h1{font-size: 35px;}
	
	.txt-tips-secc{ width:95%; font-size: 15px; line-height: 22px;}
	
	#tips-secc h2{font-size:16px; }
	
	.intro-articulo{ padding: 10px 20px; font-size: 15px; line-height: 20px;}
	
	.intro-articulo h1{ font-size:18px; line-height: 23px;}

	.vineta{ width: 40px;}
	
	.contenido-articulo{ padding: 10px 20px; font-size: 15px; line-height: 20px;}
	
	.contenido-articulo li {line-height:20px; font-size: 15px;}

	.contenido-articulo a{ width:80%; font-size: 15px;}	
	
}


	
@media (max-width:1024px) {	
	.tarjeta{ width:45%; height:364px;}
	
	#contenedor-directorio {-webkit-flex-direction: column; width: 100%; }

	.mod-result-tips li { line-height:18px; font-size: 14px;}	
}

@media (max-width: 812px) {
	.logotipo{width:160px; }	
	
	a.contacto{clear: both; margin:0px 5px 0px 350px;}
	
	.imagen{ margin-top: -125px;}
	
	.box-descripcion {flex-basis:300px;}

	.box-ilustra {flex-basis:280px;}	
	
	#contenedor-contacto {-webkit-flex-direction: column; width: 100%; }
	
	a.mail{ margin: 0px;}
	
	.ico-contacto{ width: 30px; margin-bottom: 10px}	
	
	footer{	padding:35px 0px 35px 0px;}	
	
	#contenedor-pie-pagina {-webkit-flex-direction: column; width: 100%; }
	
	.logo-identidad{width:110px; }

	.social-media{ float: left; width: 200px; padding:0px 5px 0px 5px; margin:-15px 0px 0px 20px; }	
	
	a.facebook{ width:30px; height:30px; background-size:30px 30px;}
	
	a:hover.facebook{background-size:30px 30px;}
	
	a.instagram{ width:30px; height:30px; background-size:30px 30px;}
	
	a:hover.instagram{background-size:30px 30px;}
	
	a.x{ width:30px; height:30px; background-size:30px 30px;}
	
	a:hover.x{background-size:30px 30px;}
	
	a.tiktok{ width:30px; height:30px; background-size:30px 30px;}
	
	a:hover.tiktok{background-size:30px 30px;}
	
	a.youtube{ width:30px; height:30px; background-size:30px 30px;}
	
	a:hover.youtube{background-size:30px 30px;}
	
	#filosofia{background-position:70%;}
	
	#informa-servicio{padding:30px 20px 30px 20px; background-position:50%;}
	
	.descripcion-servicio{ width:45%; font-size: 13px; line-height: 18px; padding:5px 10px;}
	
	.box-requisitos  li a{ padding:0px 0px 5px 25px; background-size:20px 20px;}	

	.box-requisitos  li a:hover{ background-size:20px 20px;}

	.box-ilustra-tips {	flex-basis:80px; }
	
	.box-info-tips {flex-basis:480px; }
	
	.ornamento { width:80px; height:80px;}	
	
	.box-info-tips h1{ padding:5px 55px 5px 25px;}
	
	.tip-etiqueta{ width:100px;}
	
	.marca{ width:90px; }
	
	.tarjeta{ width:55%; height:355px;}
	
	#area h1 { font-size:20px; line-height:25px; margin:70px 220px 20px 10px;}	
	
	.txt-area {width:65%; padding:40px 10px 40px 10px; font-size: 16px; line-height: 25px;}	
	
	.mod-contac-secc{ font-size: 14px; line-height:18px; padding:5px 10px 10px 10px;}
	
	.mod-contac-secc h1{ font-size:18px; }	
	
	a.mail-contacto-secc{ font-size: 14px;}	
	
	.txt-servicios-secc{width:90%; font-size: 13px; line-height: 18px}
	
	#caja-busqueda{ width:80%;}	
	
	.input-buscar input { font-size: 13px; }	
	
	.lista-resultados{ padding:20px 0px; }
	
	#contenedor-result-tips{-webkit-flex-direction: column; width: 100%; }
	
	.mascota{ width:60%; margin:-30px 0px 20px 0px;}
	
	
}

@media (max-width: 668px) {
	#encabezado{ height:95px; padding:5px; }	
	
	.logotipo{ width:80px;}
	
	.navegacion {float:right;  left:18px; margin-right: 10px;}
	
	a.contacto{margin:0px 5px 0px 375px;}
	
	#bienvenidos h1{font-size: 25px;}	
	
	.txt{ width:98%; font-size: 14px; line-height:20px;}
	
	.info-servicios {-webkit-flex-direction: column; width: 100%; }	
	
	.box-descripcion {order: 2; flex-basis:190px;}	

	.box-ilustra {order: 1; flex-basis:150px;}	
	
	.imagen{  width:70%;}
	
	#contenedor-menu-servicios {-webkit-flex-direction: column; width: 100%; }

	.info-item{padding:0px 5px;}		
	
	.ico-servicio{width:30px; margin-bottom: 10px;}
	
	#mixedSlider .MS-content .item {width: 98%;}
	
	#mixedSlider .MS-content .item .imgTitle img {width:50%;}	

	#mixedSlider .MS-content .item a {line-height:16px; font-size: 13px;}
	
	.identidad{ float:none; height:80px; width:290px;  margin:0 auto; padding:0px 0px 20px 0px}
	
	.logo-identidad{width:115px; }
	
	.social-media{ float:none;  margin: 0 auto;}
	
	#filosofia{background-position:center;}
	
	.txt-mision{ width:60%; padding:20px 5px; font-size: 14px; line-height: 18px;}
	
	.txt-vision{ width:98%; font-size: 14px; line-height: 18px;}
	
	.ico-valor{width:80px;}
	
	.info-requisito{-webkit-flex-direction: column; width: 100%;}	
	
	.ico-informa{ width:40px;}
	
	#directorio{padding:20px 0px 20px 0px;  background-position:17%;}
	
	.tarjeta{ width:62%;}

	#area h1 { font-size:18px; line-height:22px; margin:50px 150px 20px 10px;}	
	
	.txt-area {width:65%; padding:100px 10px 60px 10px; font-size: 13px; line-height:20px;}	
	
	.ubicacion { background-size: 100px; height:200px; border-top-left-radius:50px; padding: 0px 0px 0px 90px}	
	
	#contenedor-ubicacion {-webkit-flex-direction: column; width: 100%; }
	
	#contenedor-contactanos {-webkit-flex-direction: column; width: 100%; }
	
	.enc-seccion{ width:100%; padding:0px 10px;}
	
    .titulo { width: 250px; padding: 20px 5px 120px 5px;}	
	
	#servicios-secc h1{font-size: 28px;}	
	
	.orla{ width: 110px; margin: -60px 0px 30px -30px;}
	
	#caja-busqueda{ width:90%;}	
	
	#contenedor-resultados{-webkit-flex-direction: column; width: 100%; }
	
	#tips-secc h1{font-size: 28px;}	
	
	#articulo{padding: 25px 5px 80px 5px;}
	
	.intro-articulo{ font-size: 13px; line-height: 17px;}
	
	.contenido-articulo ul { padding: 0px;}	
	
	.contenido-articulo a{ width:99%; font-size: 14px;}	
	
	.img-articulo{width:80%;}
	
	.contenido-articulo li {line-height:16px; font-size: 13px;}
	
}

@media (max-width: 595px) {
	body {padding:25px 5px;}	

	.navegacion {  padding:5px 15px;}
	
	a.contacto{margin:0px 5px 0px 230px;}
	
	.box-descripcion {flex-basis:180px;}	

	.box-ilustra {flex-basis:100px;}	

	#copy{font-size: 14px; line-height: 25px;}	
	
	#filosofia{background-position:48%;}
	
	.lista-valores{ width:95%; }	
	
	#informa-servicio{padding:20px 5px 20px 5px; background-position:65%;}
	
	.ilustra-requisitos{width:180px;}	
	
	.img-requisitos{ width:160px;}	
	
	.horarios h2{font-size:16px; }

	.txt-horarios{width:50%; font-size: 12px; line-height:15px; padding: 5px;}	
	
	.info-directorio{margin:18px 3px;}
	
	.tarjeta{ width:88%; height: 370px}
	
	.datos-funcionario{height:61px; padding:5px 0px 5px 55px;}
	
	.mascota{ width:80%; }
	
	
}

@media (max-width: 414px) {
	#encabezado{ height:100px; padding:5px; }	
	
	.logotipo{ width:90px;}
	
	a.contacto{margin:0px 5px 0px 120px;}
	
	.sub-menu{float: none;  width:220px; margin: 0 auto;}
	
	.box-info-tips h1{font-size:16px; line-height:20px;}	
	
	.horarios h2{font-size:12px; }
	
	.txt-directorio{ width:95%; font-size: 13px; line-height:18px;}
	
	.tarjeta{ width:95%; height:320px}
	
	#area h1 { margin:50px 30px 20px 10px;}	
	
	.txt-area {width:70%; padding:10px 10px 60px 10px;}	
	
	.ubicacion { width: 100%; background-size:85px; height:240px; padding: 0px 0px 0px 70px}	
	
	
}