/*
  Landing video and header
*/

body{
    overflow-x: hidden;
    background-color: black;
    font-family: 'Roboto', sans-serif;
    overflow-y: scroll;
    
}

header {
    position: relative;
    background-color: black;
    height: 100vh;
    min-height: 40rem;
    width: 100%;
    overflow: hidden;
   
  }

.buttonC{
  color: #B8B8B8;
  border-color: #B8B8B8;
  transition: 0.2s;
}

.buttonC:hover{
  background-color: #151515!important;
  border-color: #3e3e3e!important;
  transform: scale(1.05);
  transition: 0.2s;
  color: #B8B8B8!important;

}

.navbar{
    z-index: 2;
    transition: ease 0.4s;
  }

.textHeader{
    color: #B8B8B8;
    font-size:500%;

  }


.h1config{
  color: #B8B8B8;
}

header video {
    position:absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

  }

  header .container {
    position: relative;
    z-index: 1;
  }
  header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 1;
  }

#buttonhero{
  position: absolute;
  top: 90%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

}


.nav-item{
  transition: ease 0.4s;
}
  .nav-item:hover{
    border-color: #B8B8B8;
    border-style:solid;
    border-width: 0.1rem;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    filter: opacity(0.5);
    transition: ease 0.4s;
    
    
  }

  .bg-light-subtle{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.708) 0%, rgb(0, 0, 0) 100%)!important;
  }


  /*
  Correcciones de iconos
  */

  .bi-vimeo, .bi-instagram, .bi-facebook, .bi-twitter{
    color: #B8B8B8;
    transition: ease 0.2s;
  }

  .bi-vimeo:hover, .bi-instagram:hover, .bi-facebook:hover, .bi-twitter:hover{
    color: rgb(49, 49, 49);
    transition: ease 0.2s;
  }

  .bi-camera-reels-fill, .bi-film, .bi-camera2{
    font-size: 5rem;
  }

  [data-title]:hover:after {
    transform: scale(1);
    transition: all 0.1s ease 0.5s;
    visibility: visible;
  }
  [data-title]:after {
    content: attr(data-title);
    background-color: #252525;
    color: #a8a8a8;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    transform: scale(0);
    z-index: 99999;
    visibility: hidden;
}
  [data-title] {
    position: relative;
  }

/*
Animaciones de los servicios
*/
#service01, #service02, #service03{
  transition: ease-in-out 0.5s;
}


#service01:hover, #service02:hover, #service03:hover{
  transform: scale(1.1);
  transition: ease-in-out 0.5s;

}

/*
Estilos de las secciones
*/



.sect01{ 
    position:fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    filter: brightness(0.1);
    transform: scale(1.2) rotate(90); 
    
}
/*Estilos Sect03: Servicios*/
.sect02{
  background-color: black;
  z-index: 3;
    
 }

.bange{
  transition: ease 0.2s;
}

.badge:hover{
  background-color: #151515!important;
  transition: ease 0.2s;
}

/*Estilos Sect03: Clientes*/

.sect03{
  filter: saturate(1);
  transition: 0.3s ease;
}
.sect03:hover{
  filter: saturate(1);
  transform: scale(1.05);
  transition: 0.3s ease;
}
/*
.sect04{
  background-image: url(../img/skull.webp);
  background-repeat: no-repeat;
  background-size:contain;
  background-position:center;
  
}
*/
.sect05{
  background-image: url(../img/back02.webp) ;
  background-repeat: no-repeat;
  background-size:cover;
  background-position:center;
}

.sect06{
  background-color: #151515;
  
}

.sect07{
  background-color: #151515;
}


/*
Estilos formularios
*/

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#B8B8B8 !important;
  opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:#B8B8B8 !important;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color:#B8B8B8 !important;
}

.form-control{
  text-decoration: #B8B8B8 !important;
}
form, input, label, p {
  color: white !important;
}
.form-group label, p{
  color: #fff!important;
}

textarea{
  color: #fff!important;
}

.carousel-control-prev, .carousel-control-next{
  background-color: #a8a8a843;
  width: 30px;
  transition: ease 0.2s;
 
  
}

.carousel-control-prev:hover, .carousel-control-next:hover{
  background-color: #a8a8a899;
  width: 35px;
  transition: ease 0.2s;
  
}