/* Iconos*/
@font-face {
  font-family: 'supecq';
  src: url('../font/supecq.eot?37178546');
  src: url('../font/supecq.eot?37178546#iefix') format('embedded-opentype'),
       url('../font/supecq.woff2?37178546') format('woff2'),
       url('../font/supecq.woff?37178546') format('woff'),
       url('../font/supecq.ttf?37178546') format('truetype'),
       url('../font/supecq.svg?37178546#supecq') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "supecq";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
.icon-phone:before { content: '\e800'; } /* '' */
.icon-mail:before { content: '\e801'; } /* '' */

/* Reset */

*{
	margin: 0;
	padding: 0;
	outline: 0;
}

/* Generales */

a{
	color: #8194cd
}

a, a:hover, a:focus, a:active, button, button:focus, button:active{
	text-decoration: none;
	outline: 0
}

p{
	color: #343434;
	font-size: 14px;
	line-height: 30px;
	margin: 0;
}

h4{
	font-size: 16px
}

ul, li{
	margin: 0;
	padding: 0
}

li{
	list-style: none;
}

body{
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	color: #343434;
	position: relative;
}

.text-right {
    text-align: right !important;
}

/* Header */
#header{
	min-height: 138px;
}

#top{
	background-color: #4e6684;
	color: #fff;
	height: 50px;
	width: 100%
}

#top p, #top a{
	color: #fff;
	font-size: 13px;
	float: left;
	line-height: 16px;
	padding: 15px 0
}

#top a{
	margin-left: 20px;
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;		
}

#top a:hover{
	color: #8194cd;
}

#top i{
	color: #8194cd;
	padding-right: 5px
}
#botonera{
	width: 100%;
    z-index: 10000	
}

#botonera.affix {
    top: 0;

}

.navbar{
	margin-bottom: 0;
	min-height: 85px;
}

.navbar-default{
	background-color: #fdfdfd;
	border: 0;
}

.navbar-brand {
    height: auto;
    padding: 10px 15px;
}

#navbar a{
	color: #020d1b;
	font-size: 14px;
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;	
}

#navbar a.active, #navbar a:hover{
	color: #8194cd;
}

.nav>li>a {
    padding: 15px 0 15px 15px;
}

.navbar-default .navbar-toggle {
    border: 0;
    background-color: transparent;
    border-radius: 0;
    margin-top: 25px
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #020316;
}

#banner-wide {
	height: 200px;
	width: 100%;
 	display: -webkit-flex;
    -webkit-align-items: center;
    display: flex;
    align-items: center;	
}

#banner-wide h1{
	color: #fff;
	font-size: 40px;
	text-transform: uppercase;
	text-align: center;
}

/* Inicio */

#inicio{
	padding-top: 70px;
	padding-bottom: 70px;
	float: left;
	width: 100%;
	min-height: 400px
}

#carousel{
	width: 100%;
	height: 350px;
}
 
.carousel-inner, 
.carousel-inner .item {
    height: 100%;
}

#carousel a.call {
    position: absolute;
    z-index: 1000;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 140px;
    top: 220px;
	background-color: #fff;
	color: #020d1b;
	text-align: center;
	padding: 10px 15px;
	-webkit-transition: color 0.3s ease, background-color 0.3s ease;
	-moz-transition: color 0.3s ease, background-color 0.3s ease;
	-ms-transition: color 0.3s ease, background-color 0.3s ease;
	-o-transition: color 0.3s ease, background-color 0.3s ease;
	transition: color 0.3s ease, background-color 0.3s ease;	    
}

#carousel a.call:hover{
	background: #020d1b;
	color: #fff;
}

.carousel-inner .item h1, .carousel-inner .item h2{
	color: #fff;
	font-size: 40px;
	text-transform: uppercase;
	text-align: center;
	margin-top: -40px
}

.carousel-fade .carousel-inner { background: #495577; }
.carousel-fade .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

.carousel-fade .item .txt{
	height: 100%;
	width: 100%;
   display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

  .carousel-fade .next.left,
  .carousel-fade .prev.right,
  .carousel-fade .item.active { opacity: 1; }

  .carousel-fade .active.left,
  .carousel-fade .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
    }


/* Safari Fix */
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/* Institucional */

#banner-wide.institucional{
	background: url("../img/banner_institucional.jpg") no-repeat center;
	background-size: cover;	
}

#institucional{
	float: left;
	width: 100%
}

#institucional h2{
	color: #020d1b;
	font-size: 36px;
	text-align: left;
	font-weight: 600;
	margin-bottom: 70px;
	position: relative;
}

#institucional h2:after{
	position: absolute;
	content: "";
	background: #dbdde4;
	height: 7px;
	width: 70px;
	left: 0;
	top: 50px;
}

#institucional h2.text-right:after{
	left: auto;
	right: 0
}

.historia, .staff{
	background-color: #ffffff;
	padding-right: 70px;
	float: left;
	width: 100%
}
.historia, .mision, .vision, .staff{
	padding-top: 70px;
	min-height: 550px
}

.newsletter{
	padding-top: 70px;
	min-height: 450px
}

.newsletter p{
	color: #fff
}

.historia p, .staff p{
	color: #343434;
	font-size: 14px;
	line-height: 30px;
	margin-bottom: 50px;
}

.padding-cero{
	padding-left: 0;
	padding-right: 0;
}

.director{
	height: 175px;
	margin-bottom: 70px;
	padding: 20px;
	position: relative;
	width: 100%
}

.director:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 7px;
    background: #19283d;
    bottom: -5px;
}

.director div{
	float: left;
	position: relative;
	width: 50%
}

img.foto-director {
    margin: -46px -20px;
}
p.nombre{
	color: #020d1b;
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 5px;
	text-align: right;
	text-transform: uppercase;
}

p.cargo{
	color: #8ea5e7;
	font-size: 16px;
	margin-bottom: 10px;
	text-align: right;
	text-transform: uppercase;
}

.link{
	background-color: #19283d;
	color: #fff;
	font-size: 12px;
	float: right;
	padding: 10px 15px;	
	-webkit-transition: color 0.3s ease, background-color 0.3s ease;
	-moz-transition: color 0.3s ease, background-color 0.3s ease;
	-ms-transition: color 0.3s ease, background-color 0.3s ease;
	-o-transition: color 0.3s ease, background-color 0.3s ease;
	transition: color 0.3s ease, background-color 0.3s ease;	
}

.link:hover{
	background-color: #fff;
	color: #19283d;
	font-size: 12px;
	float: right;
	padding: 10px 15px
}

.mision, .vision, .newsletter{
	padding-left: 70px
}

.mision{
	background: url("../img/nuestra_mision.jpg") no-repeat center;
	background-size: cover;
	width: 100%
}

.vision{
	background: url("../img/nuestra_vision.jpg") no-repeat center;
	background-size: cover;
	width: 100%
}

#institucional .mision h2, #institucional .vision h2{
	font-size: 30px;
	line-height: 32px;
	padding-left: 20px
}

#institucional .mision h2 span, #institucional .vision h2 span{
	font-size: 20px;
	font-weight: 400;
	display: block;
}

#institucional .mision h2:after, #institucional .vision h2:after{
	position: absolute;
	content: "";
	background: #dbdde4;
	height: 100px;
	width: 7px;
	left: 0;
	top: 0px;
}

#institucional .newsletter h2:after{
	background: #171a2f;
}

.mision p{
	color: #000;
	font-size: 15px;
	line-height: 30px
}

#institucional .vision h2, #institucional .newsletter h2{
	color: #fff
}

.vision p{
	color: #fff;
	font-size: 15px;
	line-height: 30px
}

.newsletter{
	background-color: #020316;
	color: #fff
}

.newsletter form{
	margin-top: 30px;
}

.form-group input{
	background-color: #fff;
	border-radius: 0;
	border: 0;
	color: #000;
	float: left;
	font-size: 13px;
	height: 40px;
	line-height: 40px;	
	margin-right: 10px;
	width: 46%;
	-webkit-transition: background-color 0.3s ease;
	-moz-transition: background-color 0.3s ease;
	-ms-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;	
}

.form-group input:focus{
	background-color: #e0e0e0
}

button.enviar{
	background-color: #a5b6ea;
	color: #020d1b;
	border-radius: 0;
	border: 0;
	float: left;
	font-size: 13px;
	margin-top: 10px;
	height: 40px;
	width: 94%;
	-webkit-transition: color 0.3s ease, background-color 0.3s ease;
	-moz-transition: color 0.3s ease, background-color 0.3s ease;
	-ms-transition: color 0.3s ease, background-color 0.3s ease;
	-o-transition: color 0.3s ease, background-color 0.3s ease;
	transition: color 0.3s ease, background-color 0.3s ease;	
}

button.enviar:hover{
	background-color: #fff;
	color: #020d1b;
}

/* Servicios */

#banner-wide.servicios{
	background: url("../img/banner_servicios.jpg") no-repeat center;
	background-size: cover;	
}

#servicios .fila{
	padding-top: 70px;
	padding-bottom: 70px
}

#servicios h2{
	color: #020d1b;
	font-size: 26px;
	text-align: left;
	font-weight: 600;
	margin-bottom: 50px;
	position: relative;
	text-transform: uppercase;
}

#servicios h2:after{
	position: absolute;
	content: "";
	background: #dbdde4;
	height: 7px;
	width: 70px;
	left: 0;
	top: 40px;
}

#servicios h2.doble:after{
	top: 70px;
}

#servicios p{
	margin-bottom: 20px
}

.gris{
	background: url("../img/fondo_fila.jpg") no-repeat center;
	background-size: cover;
}

.fondo{
	background: url("../img/fondo_fila_2.jpg") no-repeat center;
	background-size: cover;
}

.lista li {
    line-height: 28px;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.lista li span{
	background-color: #020d1b;
	color: #fff;
	width: 30px;
	height: 30px;
	line-height: 30px;
	float: left;
	margin-right: 10px;
	text-align: center;
}

/* Formularios */

#banner-wide.formularios{
	background: url("../img/banner_formularios.jpg") no-repeat center;
	background-size: cover;	
}

/* Contacto */

#banner-wide.contacto{
	background: url("../img/banner_contacto.jpg") no-repeat center;
	background-size: cover;	
}

#map{
	width: 100%;
	height: 350px;
	margin-bottom: 30px;
}

#formularios{
	float: left;
	padding-top: 70px;
	padding-bottom: 70px;
	width: 100%
}

#formularios h2{
	color: #020d1b;
	font-size: 26px;
	text-align: left;
	font-weight: 600;
	margin-bottom: 40px;
	position: relative;
	text-transform: uppercase;
}

#formularios h2:after{
	position: absolute;
	content: "";
	background: #dbdde4;
	height: 7px;
	width: 70px;
	left: 0;
	top: 40px;
}

#formularios ul{
	margin-top: 60px
}

#formularios li{
	font-size: 15px;
	line-height: 50px
}

#formularios .lista li span {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    margin-top: 5px
}

.padding-left{
	padding-left: 50px
}

.fila-datos{
	color: #fff;
}

.fila-azul{
	background-color: #020316;
	padding-top: 30px;
	padding-bottom: 30px;
}

.fila-celeste{
	background-color: #a5b6ea;
	padding-top: 30px;
	padding-bottom: 30px;	
}

.fila-celeste p, .fila-celeste a{
	color: #020316;
	font-size: 16px;
	line-height: 30px
}

.fila-azul p, .fila-azul a{
	color: #fff;
	font-size: 16px;
	line-height: 30px
}


/* Contacto */

#contacto{
	padding-top: 70px;
	padding-bottom: 70px;
}

#contacto h2{
	color: #020d1b;
	font-size: 26px;
	text-align: left;
	font-weight: 600;
	margin-bottom: 40px;
	position: relative;
}

#contacto h2:after{
	position: absolute;
	content: "";
	background: #dbdde4;
	height: 7px;
	width: 70px;
	left: 0;
	top: 40px;
}

#form-contacto{
	margin-top: 25px
}

#contacto .form-group input{
	background-color: #020316;
	color: #fff;
	float: left;
	font-size: 13px;
	margin-bottom: 20px;
	width: 100%;
	-webkit-transition: background-color 0.3s ease;
	-moz-transition: background-color 0.3s ease;
	-ms-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;	
}

.form-group textarea{
	background-color: #020316;
	border: 0;
	color: #fff;
	float: left;
	font-size: 13px;
	height: 150px;
	line-height: 40px;
	margin-bottom: 10px;
	padding-left: 10px;
	width: 100%;
	resize: none;
	-webkit-transition: background-color 0.3s ease;
	-moz-transition: background-color 0.3s ease;
	-ms-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;	
}

#contacto button.enviar{
	width: 100%;
	font-size: 15px
}

#contacto button.enviar:hover{
	background-color: #020d1b;
	color: #fff;
}

.mail{
	color: #343434
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  opacity: 1
}
::-moz-placeholder { /* Firefox 19+ */
  opacity: 1
}
:-ms-input-placeholder { /* IE 10+ */
  opacity: 1
}
:-moz-placeholder { /* Firefox 18- */
  opacity: 1
}

/* Footer */

footer{
	background: #495577;
	color: #fff;
	padding-top: 45px;
	padding-bottom: 45px;
	float: left;
	width: 100%
}

footer p, footer a{
	color: #fff;
	font-size: 13px;
	display: inline;
}

footer a{
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;			
}
footer a:hover{
	color: #8194cd;
}

footer p span{
	color: #8ea5e7;
	margin: 0 5px;
}



/* Media queries */

@media (min-width: 768px) {
	.navbar-nav {
	    float: left;
	    margin: 19px 0px;
	}
}

@media (max-width: 1560px) {
	.newsletter{
		min-height: 550px
	}
}

@media (max-width: 1560px) and (min-width: 1200px) {
	.col-lg-offset-4 {
	    margin-left: 13.3333%;
	}
	.col-lg-8 {
	    width: 88.6667%;
	}
}

@media (max-width: 1199px) {
	#formularios li {
	    font-size: 13px;
	}
	.historia, .staff{
		padding-right: 30px
	}
	.mision, .vision, .newsletter{
		padding-left: 30px
	}
	.director::after{
		display: none;
	}
	img.foto-director{
	    margin: -22px -20px;
	    max-width: 200px
	}
}

@media (max-width: 991px) {
	.fila-celeste, .fila-azul {
	    width: 100%
	}
	#formularios li {
	    font-size: 15px;
	}	

}

@media (max-width: 768px) {
	#banner h1 {
	    font-size: 26px;
	    line-height: 36px
	}
	.ubicacion {
	    margin-top: 50px
	}
	.fila-celeste{
		margin-top: 20px
	}
	.navbar-brand>img {
	    max-width: 90%;
	}	
	#formularios li {
	    text-align: center;
	}	
	#formularios .pull-right {
	    width: 100%;
	    text-align: center;
	}
	.carousel-inner .item h1, .carousel-inner .item h2{
		font-size: 32px;
		padding: 0 25px;
	}	
}

@media (max-width: 400px) {
	h2:after{
		display: none;
	}
	.navbar-brand {
		padding-right: 0
	}
	.navbar-brand>img {
	    max-width: 80%;
	}	
	#top p, #top a {
	    font-size: 12px;
	}	
	#formularios .lista li span	{
		display: none;
	}
	#formularios li {
	    line-height: 24px;
	    margin-bottom: 30px;
	}	
	#formularios .pull-right {
	    margin-top: 10px
	}	
	img.foto-director{
		margin: 20px -20px;
		max-width: 120%
	}
	p.nombre {
	    font-size: 14px;
	    line-height: 20px;
	    margin-top: 34px
	}	
	p.cargo{
		font-size: 14px
	}
	.carousel-inner .item h1, .carousel-inner .item h2 {
	    font-size: 24px;
	    line-height: 32px;
	    padding: 0 25px;
	}	
}