* {
   margin:0;
   padding:0;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing: border-box;;
}
body{
  padding-top:  70px;
  margin: 0 0 50px; /* bottom = footer height */
}
html{
  position: relative;
    min-height: 100%;
}
body,
#wrap {
   height: 100%;
}
body > #wrap {
   height: auto;
   min-height: 100%;
}
#content {
   padding-bottom: 50px; /* Mis altura que el footer */
}
#footer {
  position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
  /* position: relative;
   margin-top: -50px;*/ /* Misma altura que el footer en negativo */
   /*height: 50px; */ /* Altura del footer */
   /*clear: both;*/
}
.carousel-inner{
  max-height: 35em;
}
#imagenes-carousel{
  margin-top: 1em;
}
#imagenes-carousel img{
  max-height: 148px;
  max-width: 100%;
  width: 100%;
}
.contenedor-miniatura{
  -webkit-box-shadow: 0px 2px 5px #888888;
  -moz-box-shadow: 0px 2px 5px #888888;
  box-shadow: 0px 2px 5px #888888;
}
.contenedor-miniatura img{
  padding-top: 1em;
}
.contenedor-miniatura:hover{
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
#footer{
  background-color: #25303a;
  max-height: 100%;
  color: #fff;
  padding: 1em 0 1em 0;
}
#my-video{
  max-height: 30em;
}
#pie-final{
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}
#formulario-contacto{
  /*background-color: #2c3a46;*/
  background-image: url('../img/abajo.jpg');;
  padding: 2em 1em 2em 1em;
  color: #fff;
}
#formulario-contacto h5{
  color: #fff;
}
#banner-superior{
  background-image: url('../img/bannerSCEP.png');;
}
#banner-superior h4{
  color: #fff;
}
/*#formulario-contacto .form-control:focus{
  border-color: #909090;
    box-shadow: 0 1px 1px rgba(0,0,0,.075) inset,0 0 8px rgba(101, 101, 101, 0.6);
    outline: 0 none;
}*/
/*estilos para la pagina de misión y visión*/
hr.borde-inferior {
    border-color: #2C3E50;
}
hr.borde-inferior {
    padding: 0;
    border: none;
    border-top: solid 5px;
    text-align: center;
    max-width: 250px;
    margin: 25px auto 30px;
}
hr.borde-inferior:after {
    background-color: #fff;
    /*color: #2C3E50;*/
}
hr.borde-inferior:after {
    content: "\f19c";
    font-family: FontAwesome;
    display: inline-block;
    position: relative;
    top: -.8em;
    font-size: 2em;
    padding: 0 .25em;
}
#area-media{
  padding: 2em 0 2em 0;
}
.contenedor-thumbnail{
  /*padding: 1.2em 0 1.2em 0;*/
}
.contenedor-thumbnail img{
  -webkit-box-shadow: 0px 2px 5px #888888;
  -moz-box-shadow: 0px 2px 5px #888888;
  box-shadow: 0px 2px 5px #888888;
}
@media (max-width: 500px) {
  .contenedor-thumbnail div{
    padding: 0.2em 0 0.2em 0;
  }
 }
 @media (min-width: 510px) {
  .contenedor-thumbnail div{
    padding: 1em 0 1em 0;
  }
 }
 .social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	right: 0; /* Establecemos la barra en la izquierda */
	top: 83px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 1000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
    padding: 15px;
    text-align: center;
}
	.social ul {
		list-style: none;
	}
	.social ul li a {
		display: inline-block;
		color:#fff;
		background: #1E71B8;
		padding: 10px 15px;
    font-size: 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}

/* Establecemos los colores de cada red social, aprovechando su class */
	/*.social ul li .icon-facebook {background:#3b5998;}
	.social ul li .icon-twitter {background: #00abf0;}
	.social ul li .icon-googleplus {background: #d95232;}
	.social ul li .icon-pinterest {background: #ae181f;}
	.social ul li .icon-mail {background: #666666; font-size: 18px;}*/

	.social ul li .icon-facebook:hover {
    padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
		background: #3b5998; /* Cambiamos el fondo cuando el usuario pase el mouse */
	}
    .social ul li .icon-twitter:hover {
    padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
		background: #00abf0; /* Cambiamos el fondo cuando el usuario pase el mouse */
	}
    .social ul li .icon-youtube:hover {
    padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
		background: #c4302b; /* Cambiamos el fondo cuando el usuario pase el mouse */
	}
    .social ul li .icon-instagram:hover {
    padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
		background: #3f729b; /* Cambiamos el fondo cuando el usuario pase el mouse */
	}
    .social ul li .icon-flickr:hover {
    padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
		background: #ff0084; /* Cambiamos el fondo cuando el usuario pase el mouse */
	}
    .social ul li .icon-envelop:hover {
    padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
		background: #808080; /* Cambiamos el fondo cuando el usuario pase el mouse */
	}
/*Cambiamos el color del borde cuando el input tenga la propiedad focus*/
/*textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgb(0, 204, 102);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}
.form-control:focus{
  border-color: rgb(0, 204, 102);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}*/

#contenedor-facebook{
    background: #10222d;
    padding-top: 5em;
    padding-bottom: 5em;
}