body {font-family: 'Alegreya Sans', sans-serif; font-weight: 400; font-size: 16px }
body, html {height:100%;}
ul, li {margin: 0; padding: 0; list-style: none}
h1, h2 {font-weight: 300;}
h2 {font-size: 2em ; color: #232323;}
h2 span {color:	#00a3c8}
h3 {font-size: 30px; color: #28b6ff; font-weight: 400;}
h4 {font-size: 18px; text-transform: uppercase;}
p {font-size: 18px;}
p i {font-size: 14px !important; color: #999; margin-right: 10px}
.bgGrey {border-bottom: 1px dotted grey; border-top: 1px dotted grey; padding: 1em 0; margin-bottom: 2em}
.bgGrey p {font-size: 2em; color: #24aff7}
.bgGrey p span {color: #333}
.fa-ul {margin-left: 1.3em; margin-bottom: 2em; font-size: 20px;}
.fa-ul .fa {color: #b2b2b2; font-size: 16px }
.fa-li {top:0.2em;}
.fa-ul>li {position: relative;margin-bottom: 0.8em;line-height: 1.1em;}
.sinMargin {margin: 0}
.marginBottom1 {margin-bottom: 1em;}
.marginBottom2 {margin-bottom: 2em;}


/*header*/
header {}
header .container {position: relative;}
header .logo {margin: 0.7em 0; float: left; width: 170px;}
header .logoMobile {display: none; float: left; margin-top:0.1em;}
.redes{text-align: center;}
.redesH {float: right; margin-top: 0.2em;}
.redesF{float: none; text-align: right; margin-top:1em;}
.redes li {display: inline-block;}
.redes a {background-image: url(../images/redes.png); display: block; width: 30px; height: 30px;}
.redes span {display: none;}
.redes .face {background-position: 0 0; margin-right: 6px;}
.redes .face:hover {background-position: 0 -30px}
.redes .twitter {background-position: 30px 0}
.redes .twitter:hover {background-position: 30px -30px}
.info {float: right; margin-top:0.3em; text-align: right; }
.infoF {float:none; margin-top:0em;}
.info h3 {margin: 0; font-size: 20px; line-height: 1em}
.infoF h3 {color: #0286ca !important}
.info p {margin: 0; font-size: 19px}
.info .telEmerg {font-weight: 400; font-size: 34px; line-height: 1em }
.info i {color: #fff; margin-right: 5px; display: inline-block; background: #43a0d8; width: 32px; height: 32px; border-radius: 50%; position: relative; top: -8px; padding: 8px; box-sizing: border-box;}
nav {text-align: center;background: rgba(255,255,255,0.9); position: relative; z-index: 9999;}
nav li {display: inline-block;  }
nav a {text-decoration: none; text-transform: uppercase; font-size: 1.2em; height: 3em; line-height: 3em; display: block;padding: 0em 1em; color: #666; -webkit-transition: all 1s ease 0.1s; font-weight: 300;} 
nav a:hover, nav a:focus {text-decoration: none !important; font-weight: 500;} 

.slide {/*min-height: 500px; */box-sizing:border-box; color: white; line-height: 3.2em; position: relative;font-weight: 300; top: -58px;}
.main {color: #ececec; padding: 1em 0; position: absolute; bottom: -80px; z-index: 999;left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%)}
.main .container {background: rgba(67,160,216,1); padding: 10px 40px 15px;}
h1 {font-size:1.2em; line-height:1.4em;}
h1 span {font-size: 1.2em;}

.rslides {position: relative; overflow: hidden; width: 100%; color: #333; font-weight: 300}
.rslides li {position: absolute; display: none;width: 100%;left: 0; top: 0;}
.rslides li .container {position: absolute; z-index: 997; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); padding-top: 7%}
.rslides li:first-child {position: relative; display: block; float: left;}
.rslides img {display: block; height: auto; float: left; width: 100%; border: 0;}
.rslides h2 {font-size: 3.2em; width: 45%; margin-bottom: 10px;line-height: 1em; color: #33baff;}
.rslides p {font-size: 1.9em; font-weight: 300; width: 45%; margin: 0;line-height: 1em; }
.btn {background: rgba(67,160,216,0.8); color:#fff; padding: 5px 15px; border-radius: 20px; font-size: 18px; text-transform: uppercase; display: inline-block; margin-top: 1em}

#owl-demo {background: #efefef; padding: 1.5em 1em; box-sizing:border-box; margin-bottom: 2em}
#owl-demo h3 {font-size: 24px; color: #5a5a5a; font-weight: 600; margin-top: 0}

.marcas {vertical-align: middle;}
.marcas img {display: inline-block; margin: 0 5%;}

.elementoHover:hover {background:#f7f7f7; }
.elementoHover a {color: inherit;}
.elementoHover a:hover {text-decoration: none;}

section {padding-bottom: 4em}
section h2:first-child {margin-bottom:20px; text-transform: uppercase; }
#servicios {margin-top: 2em;}

.fotoStaff {margin: 1em 1em 0 0}
.listaDot li {list-style: disc; margin-left: 1em; margin-bottom: 0.5em}

.ilustraciones {margin: 1em 0}
.hbc img {width: 80%; margin: 0 auto}

.mapa {width: 100%; height: 350px; border: 0; margin-bottom: 2em}

/* Carousel 
#owl-demo-rubros {margin-bottom: 3em}
#owl-demo-rubros .item img {display: block; width: 100%; height: auto;}

#owl-demo-marcas .owl-item {display: table;}
#owl-demo-marcas .item{display: table-cell; vertical-align: middle; padding: 0 1.5em; height: 50px}
#owl-demo-marcas .item img{display: block; max-width: 100%; max-height: 100%;}*/

/*menu responsive*/
#nav-mobile{display: none; background: url(../images/nav.png) no-repeat center center; float: right; width: 60px; height: 60px; position: absolute; right: 65px; top:-5px; padding: 0; opacity: .6;} 
#nav-mobile.nav-active{opacity: 1;}

.estadisticas img {width: 60%; display: inline-block; margin: 0 auto 1em}

/* Noticias */ 
.noticias li {border-bottom: 1px dotted #797979; margin-bottom: 2em}

.nav-tabs {margin-bottom: 2em}
.nav-tabs>li {width: 50%}
.nav-tabs>li>a {text-transform: uppercase; text-align: center; font-size: 1.25em;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {color: #FFF; background: #99daf7}
.tab-pane {min-height: 400px}

/*footer*/
footer {background: #dcdcdc; color: #3a3a3a; padding: 2em 0; font-weight: 400}
footer .logoFooter {width: 160px}
footer .mail {margin-top: 0.2em; color: #0067bf; font-size: 1.2em; font-weight: 400;}
footer .mail:hover {color:#1d97ff; text-decoration: none;}
footer p {line-height: 1}

/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}



/*MEDIA QUERIES*/
@media screen and (max-width:1150px){
  .main {display: none}
/*  .main .container {padding: 0px 20px 5px;}*/
  #servicios {margin-top: 0}
}

@media screen and (max-width:992px){
  .estadisticas img {width: 30%; margin: 0 2% 1em;}
  .logoFooter {width: 90%
  }
}

@media screen and (max-width:950px){
	#nav-mobile{ display: block; }
		
	#menu{width: 100%; float: none; padding-top: 60px;}
	#menu ul{max-height: 0; overflow: hidden;}
	#menu li{border-bottom: 1px solid #282b30;display: block;}
	#menu ul.open-menu{max-height: 400px; transition: max-height .4s;}

  .rslides h2 {font-size: 2.5em; width: 60%}
  .rslides p  {font-size: 1.7em; width: 55%}
}  

@media screen and (max-width:768px){
  .rslides li .container {position: absolute; z-index: 997; padding-top: 7%; width: 100%;}
}

@media screen and (max-width:670px){
  header .logo {display: none;}
  header .logoMobile {display: block; width: 300px; margin:0.5em auto 1em; float: none}

  .info {margin-top: 0; float: none; text-align: center;}
  .info .telEmerg {font-size: 28px}
  
  .redesH {float: left; margin-top: 0.8em;}
  #nav-mobile {right: 0; top: -50px}

  #menu {padding-top: 0}
  .slide {top:0;}
  nav a {height: 2.5em; line-height: 2.5em}

  .rslides h2 {font-size: 2em; width: 65%; margin-top: 0}
  .rslides p  {font-size: 1em; width: 60%}
  .rslides .btn {margin-top: 0.5em; padding: 3px 15px;}
}

@media screen and (max-width:670px){
  .rslides h2, .rslides p, .rslides .btn  {display: none}
  .info .telEmerg {font-size: 22px}
}
@media screen and (max-width:580px){
  .redesF {text-align: center;}
}


@media screen and (max-width:340px){
  footer p {font-size: 15px;}
  .infoF {margin-top: 0.5em}
  .infoF p {font-size: 16px}
}