@charset "UTF-8";
/*=============================================
=      TIPOGRAFIA DEL SITIO                   =
=============================================*/
html {
  font-size: 16px;
}

body {
  font-family: "Rubik", sans-serif;
  /* color: #696969; */
}

img .tamaño {
  width: 500px;
  height: 500px;
}

.navbar-collapse {
  flex-grow: 0;
}

.navbar-brand img {
  height: 80px;
  width: 180px;
}

.encabezado {
  /*background: $texto;feac00*/
  background: #fefefe;
  color: #1298f1;
  transition: all 0.5s ease;
}

.encabezado.fondo-menu {
  background: #f5f6f8;
  /*background: $principal;*/
  padding: 1rem 0;
}

#menu-principal ul li a:hover,
#menu-principal ul li.active a {
  color: #337ab7;
  background: #6969691a;
  border-radius: 10px;
  text-align: center;
}

.ir-arriba {
  position: fixed;
  bottom: 1.5rem;
  right: 0.5rem;
  font-size: 3rem;
  color: rgba(255, 171, 183, 0.6);
  text-decoration: none;
  z-index: 9999;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.ir-arriba.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ir-arriba:hover,
.ir-arriba:focus {
  outline: 0;
  text-decoration: none;
  color: #e37612;
}

/*=============================================
=                   PRELOAD                   =
=============================================*/

/* Contenedor del preload centrado */
#preload {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Texto del porcentaje de carga */
#porcentajeCarga {
  color: #0c0101;
  font-size: 6vw;
  font-weight: 100;
  margin-bottom: 20px;
  text-align: center;
}

/* Spinner */
#estadoCarga {
  background: url(../images/Spinner-2.gif) no-repeat center;
  background-size: contain;
  width: 30vw;
  height: 30vw;
  max-width: 200px;
  max-height: 200px;
  margin-bottom: 20px;
}

/* Mensaje de carga */
#estadodecarga {
  color: #333;
  font-size: 4vw;
  font-weight: 400;
  text-align: center;
}
/* #preload {
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Texto del porcentaje de carga */
#porcentajeCarga {
  color: #0c0101;
  font-size: 6vw; /* Escala con ancho de pantalla */
  font-weight: 100;
  margin-bottom: 20px;
  text-align: center;
}

/* Spinner */
#estadoCarga {
  background: url(../images/loader-2.gif) no-repeat center;
  background-size: contain;
  width: 30vw; /* Escala para responsive */
  height: 30vw;
  max-width: 200px;
  max-height: 200px;
  margin-bottom: 20px;
}

/* Mensaje extra como "Cargando contenido..." */
#estadodecarga {
  color: #333;
  font-size: 4vw;
  font-weight: 400;
  text-align: center;
}
*/
/* #preload {
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: #fff;
}

#porcentajeCarga {
  position: absolute;
  text-align: center;
  width: 100%;
  color: #0c0101;
  top: 52%;
  font-size: 100px;
  font-weight: 100;
}

#estadoCarga {
  position: absolute;
  background: url(../images/Spinner-2.gif) no-repeat;
  background-position: center;
  background-size: contain;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
} */

/*============  End of PRELOAD  =============*/
/*=============================================
=      COLOR DE FONDO PRINCIPAL                 =
=============================================*/
.bg-primary {
  background-color: #525251 !important;
}

/*=============================================
=      COLOR DE TEXTO PRINCIPAL                 =
=============================================*/
.text-primary {
  color: #337ab7 !important;
}

/*=============================================
=     ESTILOS GENERALES DE  BOTONES           =
=============================================*/
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 3rem;
  padding: 1rem 2rem;
}

.btn:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.31);
}

.btn:after {
  font-family: "FontAwesome";
  content: "\f0a9";
  position: relative;
  left: 0.5rem;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.btn:hover:after {
  left: 1rem;
  -webkit-transform: rotateZ(-360deg);
  transform: rotateZ(-360deg);
}

/*=============================================
=     ESTILOS BOTON PRINCIPAL ".btn-primary"         =
=============================================*/
.btn-primary {
  background-color: #feac00 !important;
  border-color: #c78804 !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #c78804 !important;
}

.btn-primary:active {
  background-color: #1d4567 !important;
  border-color: #122a3f !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(51, 122, 183, 0.5) !important;
}

/*=============================================
=     ESTILOS BIENVENIDOS "#presentacion"        =
=============================================*/
#presentacion {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.bienvenidos {
  flex-grow: 1;
}

/*ESTILOS PAR INTERNET EXPLORER 11+*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  body {
    display: flex;
    flex-direction: column;
  }

  .navbar {
    min-height: 1px;
  }
}
/*=============================================
=     ESTILOS BIENVENIDOS ".bienvenidos"        =
=============================================*/
.bienvenidos {
  background: url("../images/fondo_bienvenidos_md_2.jpg") no-repeat center
    center/cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  margin-top: 8rem;
}

.bienvenidos:before {
  content: "";
  background: rgba(0, 0, 0, 0.61);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bienvenidos .btn {
  width: 70%;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/*=============================================
=     ESTILOS separador ".separador-titulos"        =
=============================================*/
.separador-titulos {
  display: inline-block;
  margin-top: 2rem;
  height: 4px;
  width: 180px;
  background: #337ab7;
}

/*=============================================
=     ESTILOS PROYECTOS "#proyectos"        =
=============================================*/
.proyecto {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.proyecto .mascara {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: rgba(31, 29, 86, 0.73);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 10;
}

.proyecto .mascara h3,
.proyecto .mascara p {
  position: relative;
  top: -2rem;
  transition: all 0.3s ease;
  /*Correcion para IE11+*/
  width: 100%;
}

.proyecto .mascara .btn {
  position: relative;
  top: 2rem;
  transition: all 0.3s ease;
}

.proyecto img {
  width: 100%;
  transition: all 0.3s ease;
}

/*Estado Over de cada Proyecto*/
.proyecto:hover .mascara {
  opacity: 1;
}

.proyecto:hover .mascara h3,
.proyecto:hover .mascara p,
.proyecto:hover .mascara .btn {
  top: 0;
}

.proyecto:hover img {
  transform: scale(1.2);
}

/*=============================================
=     EMPIEZAN LAS MEDIAS QUERIES        =
=============================================*/
@media (min-width: 768px) {
  .bienvenidos {
    background-image: url("../images/fondo_bienvenidos_md_2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: left;
  }

  .bienvenidos .btn {
    width: auto;
    margin-bottom: 0;
    margin-right: 1rem;
    font-size: 1.5rem;
  }
}
@media (min-width: 990px) {
  html {
    font-size: 16px;
  }
}

/*# sourceMappingURL=estilos.css.map */

.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 100%; /* o una altura fija, como 300px */
}