@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,900;1,300&display=swap');

@import url(../modulo/footer/footer.css);

/*video header*/

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

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: 2;
}

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

@media (pointer: coarse) and (hover: none) {
  header {
  }
  header video {
    /*display: none;*/
  }
}






/*-----------------------*/



/*.header-area {
  position: relative;
  height: 100vh;
  background-image: url(../images/banner.jpg);
  background-attachment: ;
  background-position: center center;
  background-repeat: no-repear;
  background-size: cover;

} */
.banner {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  color: #fff;
  text-align: center;
  z-index: 1;
}


.navbar {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  width: 100%;
  transition: background 0.6s ease-in;
  z-index: 99999;
  background-color: #303030;
  font-size: 1.3em ;

}
.navbar .navbar-brand {
  font-family: 'Lobster', cursive;
 /* font-size: 2rem;*/
 color:#303030;
}
.navbar .navbar-toggler {
  position: relative;
  height: 50px;
  width: 50px;
  border: none;
  cursor: pointer;
  outline: none;
}
.navbar .navbar-toggler .menu-icon-bar {
  position: absolute;
  left: 15px;
  right: 15px;
  height: 2px;
  background-color: #303030;
  opacity: 0;
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  transition: all 0.3s ease-in;
}
.navbar .navbar-toggler .menu-icon-bar:first-child {
  opacity: 1;
  -webkit-transform: translateY(-1px) rotate(45deg);
  -ms-sform: translateY(-1px) rotate(45deg);
  transform: translateY(-1px) rotate(45deg);
}
.navbar .navbar-toggler .menu-icon-bar:last-child {
  opacity: 1;
  -webkit-transform: translateY(-1px) rotate(135deg);
  -ms-sform: translateY(-1px) rotate(135deg);
  transform: translateY(-1px) rotate(135deg);
}
.navbar .navbar-toggler.collapsed .menu-icon-bar {
  opacity: 1;
}
.navbar .navbar-toggler.collapsed .menu-icon-bar:first-child {
  -webkit-transform: translateY(-7px) rotate(0);
  -ms-sform: translateY(-7px) rotate(0);
  transform: translateY(-7px) rotate(0);
}
.navbar .navbar-toggler.collapsed .menu-icon-bar:last-child {
  -webkit-transform: translateY(5px) rotate(0);
  -ms-sform: translateY(5px) rotate(0);
  transform: translateY(5px) rotate(0);
}
.navbar-dark .navbar-nav .nav-link {
  position: relative;
  color: #FFF;
 /* font-size: 1.6rem;*/
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: #3074f1;
}
.navbar .dropdown-menu {
  padding: 0;
  background-color: rgba(0, 0, 0, .9);
}
.navbar .dropdown-menu .dropdown-item {
  position: relative;
  padding: 10px 20px;
  color: #fff;
 /* font-size: 1.4rem;*/
  border-bottom: 1px solid rgba(48, 116, 241, .1);
  transition: color 0.2s ease-in;
}
.navbar .dropdown-menu .dropdown-item:last-child {
  border-bottom: none;
}
.navbar .dropdown-menu .dropdown-item:hover {
  background: transparent;
  color: #c0ca33;
}
.navbar .dropdown-menu .dropdown-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  width: 5px;
  background-color: #FFF;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
.navbar .dropdown-menu .dropdown-item:hover::before {
  opacity: 1;
}
.navbar.fixed-top {
  position: fixed;
  -webkit-animation: navbar-animation 0.6s;
  animation: navbar-animation 0.6s;
  background-color: #2a2b2c;
  box-shadow: 1px 2px 3px ; 
}
.navbar.fixed-top.navbar-dark .navbar-nav .nav-link.active {
  color: #c0ca33;
}
.navbar.fixed-top.navbar-dark .navbar-nav .nav-link::after {
  background-color: #c0ca33;
}
.content {
  padding: 120px 0;
}
@media screen and (max-width: 768px) {

  .navbar-brand {
    margin-left: 20px;
  }
  .navbar-nav {
    padding: 0 20px;
   /* background-color: rgba(0, 0, 0, .9);*/
  }
  .navbar.fixed-top .navbar-nav {
    background: transparent;
  }
    .header-area{
  background-image: url(../images/responsive.png);

  }
}
@media screen and (min-width: 767px) {


  .banner {
    padding: 0 150px;
  }
  .banner h1 {
    font-size: 5rem;
  }
  .banner p {
    font-size: 2rem;
  }
  .navbar-dark .navbar-nav .nav-link {
    padding: 23px 15px;
  }
  .navbar-dark .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 30%;
    right: 30%;
    height: 3px;
    background-color: #3074f1;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    transition: transform 0.1s ease-in;
  }
  .navbar-dark .navbar-nav .nav-link:hover::after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
  }
  .dropdown-menu {
    min-width: 200px;
    -webkit-animation: dropdown-animation 0.3s;
    animation: dropdown-animation 0.3s;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
  }
}
@-webkit-keyframes navbar-animation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes navbar-animation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes dropdown-animation {
  0% {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
  }
  75% {
    -webkit-transform: scaleY(1.1);
    -ms-transform: scaleY(1.1);
    transform: scaleY(1.1);
  }
  100% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes dropdown-animation {
  0% {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
  }
  75% {
    -webkit-transform: scaleY(1.1);
    -ms-transform: scaleY(1.1);
    transform: scaleY(1.1);
  }
  100% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }
}

 
.titulo_banner {
  font-family: 'Lato', sans-serif;
  font-weight: 900 ;
  color: rgb( 254, 254, 254 );
  text-shadow: 3px 5.196px 3px rgb( 0, 0, 0 );
 /* background-image: url(../images/bgventana.png);*/
}
.titulo_sin_fondo{
  font-family: 'Lato', sans-serif;
  font-weight: 900 ;
  color: rgb( 254, 254, 254 );
  text-shadow: 1px 2px 3px rgb( 0, 0, 0 );
}
.titulo_seccion{
  font-family: 'Lato', sans-serif;
  font-weight: 900 ;
  color: rgb( 70, 69, 69 );
}
.titulo_seccion_blanco{
  font-family: 'Lato', sans-serif;
  font-weight: 900 ;
  color: #FFF;
}

.lato_thin{
  font-family: 'Lato', sans-serif;
  color: rgb( 70, 69, 69 );
  font-style: italic;
  text-align: left;
  font-weight: 300 ;
}
.lato_thin_blanco{
  font-family: 'Lato', sans-serif;
  color: #FFF;
  font-style: italic;
  text-align: left;
  font-weight: 300 ;
}
.servicios{
  /* background-color: #ededed;*/
}

.titulo-servicio{
   font-family: 'Lato', sans-serif;
  font-weight: 900 ;
  color:#FFF;
}
.seccion1 {
  position: relative;
  height: 50vh;
  background-image: url(../images/nserv01.jpg);
  background-attachment: ;
  background-position: center center;
  background-repeat: no-repear;
  background-size: cover;
}
.text-vertical-center1 {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  text-align: left ;
  z-index: 1;
}
.seccion2 {
  position: relative;
  height: 50vh;
  background-image: url(../images/nserv02.jpg);
  background-attachment: ;
  background-position: center center;
  background-repeat: no-repear;
  background-size: cover;
}
.text-vertical-center2 {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  text-align: left;
  z-index: 1;
}
.seccion3 {
  position: relative;
  height: 50vh;
  background-image: url(../images/nserv03.jpg);
  background-attachment: ;
  background-position: center center;
  background-repeat: no-repear;
  background-size: cover;
}
.text-vertical-center3 {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  text-align: left;
  z-index: 1;
}
.seccion4 {
  position: relative;
  height: 50vh;
  background-image: url(../images/nserv04.jpg);
  background-attachment: ;
  background-position: center center;
  background-repeat: no-repear;
  background-size: cover;
}
.text-vertical-center4 {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  text-align: left;
  z-index: 1;
}
.seccion5 {
  position: relative;
  height: 50vh;
  background-image: url(../images/nserv05.jpg);
  background-attachment: ;
  background-position: center center;
  background-repeat: no-repear;
  background-size: cover;
}
.text-vertical-center5 {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  text-align: left;
  z-index: 1;
}
.seccion6 {
  position: relative;
  height: 50vh;
  background-image: url(../images/nserv06.jpg);
  background-attachment: ;
  background-position: center center;
  background-repeat: no-repear;
  background-size: cover;
}
.text-vertical-center6 {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  text-align: left;
  z-index: 1;
}

/*whatsapp */

.float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:300px;
  right:10px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
    font-size:30px;
  box-shadow: 2px 2px 3px #999;
    z-index:100;
}

.my-float{
  margin-top:16px;
}

@include keyframes(bounce){
  0%, 20%, 50%, 80%, 100% {
    @include transform(translateY(0));
  }
  40% {
    @include transform(translateY(-30px));
  }
  60% {
    @include transform(translateY(-15px));
  }
}

.bounce{
  @include animation(bounce 2s infinite);
}


/*animacion de texto*/


   .button-animado {
    transition:All 0.3749s ease;
    -webkit-transition:All 0.3749s ease;
    -moz-transition:All 0.3749s ease;
    -o-transition:All 0.3749s ease;
    transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    -ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    }
    .button-animado:hover{
    transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);
    -webkit-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);
    -moz-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);
    -o-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);
    -ms-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);
    }

/*animacion boton*/


    .btn-header {
    -webkit-animation: cssAnimation 0.7686s 18 ease;
    -moz-animation: cssAnimation 0.7686s 18 ease;
    -o-animation: cssAnimation 0.7686s 18 ease;


    


    }
    @-webkit-keyframes cssAnimation {
    from { -webkit-transform: rotate(0deg) scale(0.633) skew(-1deg) translate(-3px); }
    to { -webkit-transform: rotate(0deg) scale(0.96) skew(-1deg) translate(-3px); }
    }
    @-moz-keyframes cssAnimation {
    from { -moz-transform: rotate(0deg) scale(0.633) skew(-1deg) translate(-3px); }
    to { -moz-transform: rotate(0deg) scale(0.96) skew(-1deg) translate(-3px); }
    }
    @-o-keyframes cssAnimation {
    from { -o-transform: rotate(0deg) scale(0.633) skew(-1deg) translate(-3px); }
    to { -o-transform: rotate(0deg) scale(0.96) skew(-1deg) translate(-3px); }
    }