@charset "utf-8";
/* CSS Document */

:root {
  --gris:#6C6D70;
  --azul:#3963A8;
  --text: #111;
  --blanco: #fff;
}

.montserrat-text {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

body {
  font: 400 0.9rem "Montserrat", Helvetica, Arial, sans-serif;
  color: var(--gris);
}

.navbar {
  letter-spacing: 0.3rem;
}
/*nav {
  grid-template-columns:auto calc(var(--grow) * 240px) auto;
  transition: 1s var(--custom);
}

@keyframes expand{ to { --expand: 1; } }
body {
  animation: expand steps(1);
  animation-timeline: --hero;
  animation-range: exit;
}*/

.navbar .navbar-brand img{
  height: 40px;
  padding: 0px 15px;
}
.navbar li a, .navbar .navbar-brand {
  color: var(--gris) !important;
  font-weight: 500;
  border-bottom: 1px solid rgba(248, 249, 250);
 
  transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
  color: var(--azul) !important;
  border-bottom: 1px solid var(--azul);
  
  transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
}
.navbar .navbar-toggle {
  border-color: transparent;
  color: var(--gris) !important;
}
.navbar .navbar-toggle:hover {
  background-color: var(--blanco) !important;
  color: var(--azul)!important;
}

.mainvideo {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-center{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 450px;
}

.video-center p{
  align-self: center;
  font-size: 2.1rem;
  letter-spacing: 0.3rem;
  color: var(--blanco);
  text-shadow: 0px 0px 5px var(--text);
}

.video-bottom{
  position: absolute;
  height: 4rem;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.5em;
}

.video-bottom img{
  height: 100%;
  float: left;
  margin: 0 1rem;
  filter: drop-shadow(0 0 1px var(--blanco));
}

.video-bottom i{
  float: right;
  font-size: 1.5rem;
  margin: 0 0.5rem;
  color: var(--gris);
  cursor: pointer;
  text-shadow: 0px 0px 1px var(--blanco);
  animation: rebound 1s ease-out infinite;
}

@keyframes rebound {
  0%{
    transform: translate(0, 0);
    color: var(--gris);
  }
  50%{
    transform: translate(0, -.4rem);
    color: var(--azul);
  }
  100%{
    transform: translate(0, 0);
    color: var(--gris);
  }
}

#content {
  width: 100vw;
  padding: 0px;
  min-height: 100vh;
  transition: all 0.3s;
}

#servicios {
  background:url(../images/back-pattern.jpg) no-repeat center;
  background-size: cover;
}

#proyectos{
  background: linear-gradient(to bottom, var(--blanco) 0%, #dcdfe3 60%, var(--blanco) 100%);
}

#sectores{
  background: linear-gradient(to bottom, var(--blanco) 0%, #dcdfe3 40%, var(--blanco) 90%);
}

/*#servicios div{
  -webkit-backdrop-filter: blur(3px) brightness(0.6);
  backdrop-filter: blur(3px) brightness(0.6);

  -webkit-mask-image: linear-gradient(to left, transparent, 15%, #dcdfe3);
  mask-image: linear-gradient (to left, transparent, 15%, #dcdfe3);
  
}*/

.quote{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: center;
  transition: all 0.7s ease-in-out;
}

/*.quote:hover {
  transition: all 0.7s ease-in-out;
  background-size: 110%;
}*/

.quote p{
  font-size: 1.4rem;
  color: #dcdfe3;
  text-shadow: 0px 0px 2px #BBB;
  -webkit-backdrop-filter: blur(3px) brightness(0.6);;
  backdrop-filter: blur(3px) brightness(0.6);;
  height: 100%;
  width: 100%;
  padding: 2rem;
  border-radius: 1rem;
}

.quote q{
  font-style: italic;
}

.fullsizeview {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding: 5rem;
}

h2 {
  color: var(--text);
}

h3, h5, h6 {
  color: var(--azul);
}

.row-section{
  position: relative;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
  max-width: 1200px;
}

.us-back-tr {
  height: 100%;
  background: url(../images/landmark.jpg) no-repeat right;
  -webkit-mask-image: linear-gradient(to right, transparent, 60%, #dcdfe3);
  mask-image: linear-gradient (to right, transparent, 60%, #dcdfe3);
  border-radius: 1rem;
  position: absolute;
  top: 0%;
  right: 0%;
  width: 60%;
  height: 100%;
  z-index: -1;
}

.us-back-tl {
  height: 100%;
  background: url(../images/landmark2.jpg) no-repeat left;
  -webkit-mask-image: linear-gradient(to left, transparent, 60%, #dcdfe3);
  mask-image: linear-gradient (to left, transparent, 60%, #dcdfe3);
  border-radius: 1rem;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 60%;
  height: 100%;
  z-index: -1;
}

.us-text {
  position: relative;
  padding: 1.5rem;
  margin: 0.3rem;
  height: 100%;
  border:1px solid rgba(100, 100, 111, 0.2);
  border-radius: 1rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.us-text h3 {
  color: var(--azul);
}

.us-text i{
  font-size: 1.7rem;
  color: var(--azul);
  text-align: center;
  margin: 0px 8px;
  width: 32px;
}

.us-text p{
  text-align:left; 
  /*text-shadow: 0px 0px 2px #BBB;
  color:#111;*/
  margin: 0.5rem 0;
}

.proyectos {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
  max-width: 1200px;
  gap: 1.5rem;
}

.proyectos article {
  max-width: 16rem;
  height: 25.88rem;
  width: 100%;
  cursor: pointer;
  position: relative;
  display: block;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  border-radius: 1rem;
}

.proyectos article h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.6rem;
  color: rgba(248, 249, 250);
}

.proyectos article p {
  color: rgba(248, 249, 250);
}

.proyectos article img {
  max-width: 100%;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
  height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  object-fit: cover;
}

.proyectos article:hover img {
  transform: scale(1.10);
}

.proyecto-preview {
  padding: 1.5rem;
  position: absolute;
  top: 60%;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, #111 0%, transparent 100%);
  opacity: 1;
  transform: translateY(65%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1;
}

.proyectos article:hover .proyecto-preview{
  opacity: 1;
  transform: translateY(0);
}

.proyectos figure {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  overflow: hidden;
  margin: 0 0 0rem;
  z-index: -1;
}

.sectores {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
  max-width: 1200px;
  gap: 1.5rem;
}

.sectores article {
  max-width: 30rem;
  width: 100%;
  cursor: pointer;
  position: relative;
  display: block;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  border:1px solid rgba(100, 100, 111, 0.2);
  border-radius: 1rem;
}

.sectores article:hover{
  transform: translate(0, -0.5rem);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.sectores article h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.6rem;
  color: var(--text);
  transition: transform 0.3s ease-out;
}

.sectores article i {
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
  height: 100%;
  font-size: 4rem;
  margin: 1rem;
}

.sectores article:hover i{
  transform: translate(4rem, 0);
  color: var(--azul);
}

.sectores article img {
  max-width: 100%;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  object-fit: cover;
}

.sectores article:hover img {
  transform: scale(1.10);
}

.sector-preview {
  padding: 1.5rem;
  background: white;
  height: 8.5rem;
  overflow: hidden;
}

.sectores figure {
  width: 100%;
  height: 10rem;
  overflow: hidden;
  margin: 0 0 0rem;
}

footer {
  padding:2rem;
}

footer img{
  width:50%;
  height:auto;
}
footer p{
  font-size: 0.8rem;
  color: #111;
  line-height: 1.15rem;
}
footer li{
  margin-bottom: 3px;
  list-style:none;
}
footer li a{
  font-size: 0.8rem;
  color: #111;
  text-decoration:none;
}
footer li a:hover{
  color: var(--azul);
}
footer i{
  font-size: 1.5rem;
  color: var(--gris);
  cursor:pointer
}
footer i:hover{
  color: var(--azul);
}

.slideanim {
  visibility:hidden;
}
.slide {
  visibility: visible;
  animation: slide 1s ease-out 1;
  animation-fill-mode: forwards;
}
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  } 
  100% {
    opacity: 1;
    transform: translateY(0%);
}
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  } 
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}