html {
  scroll-behavior: smooth;
}

body{
  background-color: #f7f7f7;
  overflow-x: hidden; 
}
#navbar{
  transition: top 0.3s ease;
  -webkit-transition: top 0.3s ease;	
  -moz-transition: top 0.3s ease;
}

.mt-5{
  margin-top: 7rem !important;
}

.carousel-item {
  height: 58vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: black;
}
  .carousel-item img {
    height: 127%;
    position: relative;
  }

.carousel-caption {
  bottom: 20%;
}

.carousel-caption h5 {
  font-size: 35px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 25px;
}

.carousel-caption p {
  width: 75%;
  margin: auto;
  font-size: 22px;
  line-height: 1.5;
}

div .slide1{
  bottom: 30%;
}


.navbar:not(.navbar--index) {
  box-shadow: -1px 4px 4px 0px #fff;
  transition: background 0.3s;
}

.navbar-light .navbar-brand {
  color: #fff;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  transition: 0.1s;
  z-index: 5;
}
  .navbar-light .navbar-brand:hover {
    color: #8e2c2c;
  }

.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
  color: black;
}

.navbar-light .navbar-nav .nav-link {
  color: black;
  position: relative;
  z-index: 2;
}

.navbar-toggler {
  background: #fff;
}

.navbar-nav {
  text-align: center;
  justify-content: center;
  flex-direction: row !important;
}
  .navbar-nav .nav-item {
    position: relative;
  }

    .navbar-nav .nav-item .nav-item__under-mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 0;
      height: 100%;
      box-shadow: inset 0px -3px 0px 0px #8e2c2c;
      transition: width 0.3s;
    }

    .navbar-nav .nav-item .nav-item__service-drop {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      transition: 0.2s;
      padding: 0;
      position: absolute;
      top: 2.3rem;
      right: -4rem;
      z-index: 20;
      width: 13.5rem;
      height: 0rem;
      border-radius: 5px;
      overflow: hidden;
      transform: translatex(4.5rem);
    }
    .navbar-nav .nav-item .nav-item__service-drop .service-drop__sub {
      position: relative;
      width: 100%;
      text-align: left;
    }
      
    .navbar-nav .nav-item .nav-item__service-drop .service-drop__sub:hover .nav-item__under-mask{
      width: 100%;
    }
      .navbar-nav .nav-item .nav-item__service-drop .service-drop__item {
        color: #fff;
        padding: 0;
        font-size: 1rem;
        position: relative;
        z-index: 2;
      }
      .navbar-nav .nav-item .nav-item__service-drop .service-drop__item:hover {
        text-decoration: none;
      }

    .navbar-nav .nav-item:hover .nav-item__service-drop {
      height: 4rem;
      padding: 0.4rem 0.2rem;
      box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(35, 35, 35, 0.5);
      background-color: #383838;
    }

.nav-link {
  padding-right: .5rem !important;
  padding-left: .5rem !important;
  font-size: 1.2rem;
  transition: 0.2s;
  padding-bottom: 0;
}
  .nav-link:hover {
    color: #8e2c2c !important;
  }
    .nav-item:hover > .nav-item__under-mask{
      width: 100%;
    }


.nav-link.active,.nav-link:focus{
  color: #fff;
}

.navbar-toggler {
  padding: 1px 5px;
  font-size: 18px;
  line-height: 0.3;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: #fff;
}

.navbar{
  background-color: #fff;
}

  .navbar .container .row {
    width: 100%;
    color: black;
  } 
    .navbar .container .row .nav--upper {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
      .navbar .container .row .nav--upper .nav--upper__contact{
        justify-content: flex-end;
      }
        .navbar .container .row .nav--upper .nav--upper__contact .phone,
        .navbar .container .row .nav--upper .nav--upper__contact .email{
          display: flex;
        }
        .navbar .container .row .nav--upper .nav__phone-image {
          background-image: url('../img/call.png');
          background-size: 100% 100%;
          background-repeat: no-repeat; 
          width: 1.5rem;
          height: 1.5rem;
        }
        .navbar .container .row .nav--upper .nav__email-image {
          background-image: url('../img/envelope.png');
          background-size: 100% 100%;
          background-repeat: no-repeat; 
          width: 1.5rem;
          height: 1.5rem;
        }
        
    .navbar .container .row .nav--bottom{
      position: relative;
      display: flex;
      justify-content: flex-end;
    } 
      .navbar .container .row .nav--bottom .navbar-brand {
        position: absolute;
        bottom: 0.8rem;
        left: 2%;
      }

.navbar.scrolled {
  background-color: #000;
}

.botones-carousel{
  margin-top: 15px;
}


.intro-page{
  background-image: url("../img/363.jpg") ;
  height: 275px;
}



.parrafo-bajo-header{
  font-size: 1.4rem;
}


.about-description{
  margin-top: 70px;
  font-size: 1.5em;
}

.mision{
  background-color: #595959;
  width: 100%;

}

.text{
  margin-top: 35%;
}

.color-text{
  color: white;
}

.vision{
  background-color: white;
  width: 100%;
  
}

.none-padding{
   padding-right: 0px;
   padding-left: 0px;
}

header.masthead .overlay-categorias{
  height: 65%;
}


.nav-categories{
  height: 60px;
  padding: 15px;
  font-size: 1em;
  margin-bottom: 1rem;
}

section.nav-categories .nav-link{
  color: black;
}

section.nav-categories .active{
  color: #8e2c2c;
  border-bottom: 3px solid #8e2c2c;
}

.img-producto{
  padding-bottom: 15px;
}

.img-procure{
 width: 120px;
 height: auto;
}

.tub-img{
  width: 55% !important;
}

.elevators-img{
  width: 65% !important;
}

.slips-drill{
  /* width: 85% !important; */
  margin-bottom: 1rem;
  /* height: 50% !important; */
}

.safety-t{
  /* width: 75% !important;
  height: 60% !important; */
}

.leaver-h{
  height: 75% !important;
}

.btn{
  background-color: rgb(142, 44, 44);
  color: #fff;
  box-shadow: 3px 4px 7px 0 rgba(0, 0, 0, 0.5);
  border-radius: 7px;
  transition: 0.2s;
}

.btn:hover{
  color: white;
  transform: scale(1.1)
}

.carousel-indicators li{
  width: 60px;
  height: 8px;;
}

footer{
  background-color: white;
}

.portfolio{
  font-size: 1.5em;
}

.portfolio-title{
  font-size: 3em;
}

.img-producto--hoisting {
  width: 98%;
}

hr{
  width: 80%;
}

.hr-style{
  border-top:  6px double rgb(142, 44, 44);
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.action-section {
  border-top: 6px double rgb(142, 44, 44);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin-top: 3rem;
  text-align: start !important;
  padding-left: 2%;
  padding-right: 2%;
}
  .action-section .action-text {
      font-size: 1.3rem;
      line-height: 1.7rem;
  }

  .action-section .btn{
      background-color: rgb(142, 44, 44);
      color: #fff;
      box-shadow: 3px 4px 7px 0 rgba(0, 0, 0, 0.5);
      border-radius: 7px;
      transition: 0.2s;
      display: block;
      width: 10rem;
      height: 2.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      margin-left: 5%;
      
  }

  .pdl{
    padding-left: 10% !important;
  }

  .btn-products{
    margin-top: -25px !important;
  }

.products-container .row {
  justify-content: space-evenly;
}

footer.footer {
  padding: 0;
}
  footer.footer .container {
    position: relative;
    top: 1rem;
  }

  footer.footer a{
    color: #8e2c2c;
  }
  footer.footer .footer__brand-logo {
    padding: 1rem 0;
    padding-right: 1rem;
    display: block;
    font-size: 2rem;
    position: relative;
    top: 0.5rem;
  }
  footer.footer .footer__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(0,0,0,0.4);
  }
    footer.footer .footer__nav ul{
      flex-direction: column;
      width: 100%;
      font-size: 0.8rem;
    }
  footer.footer .footer__contact {
    border-left: 1px solid rgba(0,0,0,0.4);
  }
    footer.footer .footer__contact .contact-info{
      font-size: 0.8rem;
    }
      footer.footer .footer__contact .contact-info p{
        margin-bottom: 0.5rem;
      }
  footer.footer .footer__btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  footer.footer .footer__btn a{
    color: #fff;
  }



  
  
.correo{
  text-decoration: none !important;
  color: black;

}

.correo:hover{
  color: #8e2c2c;
}

  
@media screen and (max-width: 430px) {
  .navbar .container .row .nav--bottom .navbar-brand {
    bottom: 1.8rem;
  }
  .navbar .container .row .nav--bottom .navbar-nav .nav-link {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 465px) {
  .nav-categories {
    margin-bottom: 4.5rem;
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 575px) {

  .portfolio-text{
    text-align: center;
    font-size: 2em;
  }

  .portfolio-state{
    text-align: center;
    font-size: 1.5em;
  }
  .portfolio-state-2{
    text-align: center;
    font-size: 1.5em;
    color: #595959;
    margin-bottom: 40px;
  }



}
@media screen and (max-width: 565px) {
  .navbar .container .row .nav--bottom .navbar-brand {
    bottom: 1.4rem;
  }
  .navbar .container .row .nav--bottom .navbar-brand img{
    width: 6rem;
  }
}
@media screen and (max-width: 600px) {
  .carousel-caption h5{
    font-size: 1.5rem;
  }
  .carousel-caption p{
    font-size: 1rem;
  }

  .slide1{
    font-size: 1rem;
  }

  header.masthead{
    padding: 0 !important;
  }

  .bt-1{
    font-size: 0.8rem;
  }

}

@media screen and (max-width: 730px) { 
  .action-section {
    flex-direction: column;
}
  .action-section .action-text {
      text-align: center;
      padding-left: 0.5rem;
      font-size: 1rem;
  }

  .action-section .btn{
      font-size: 1.1rem;
      
  }
}
@media screen and (max-width: 770px) { 
  footer.footer .footer__brand-logo {
    border: none;
  }
}
@media screen and (min-width: 465px) and (max-width: 770px) {
  
  .nav-categories {
    margin-bottom: 2.5rem;
  }
}

@media screen and (min-width: 565px) and (max-width: 770px) { 
  .navbar .container > .row {
    margin: 0;
  }
  .navbar .container .row .nav--upper {
    margin-top: 5rem;
    width: 100%;
    padding: 0;
  }
  .navbar .container .row .nav--upper .nav--upper__contact {
    justify-content: center;
    width: 100%;
    padding: 0;
    position: relative;
    right: 2rem;
  } 
  .navbar .container .row .nav--bottom .navbar-brand {
    bottom: 5rem;
    left: 11rem;
  }
}

@media screen and (min-width: 768px) {
  .slips-drill {
    width: 80% !important;
  }
  .leaver-h {
    width: 75% !important;
  }
}
@media screen and (max-width: 830px) { 
  .carousel-caption {
    bottom: 10%;
  }
  div.carousel-caption.slide1  {
    bottom: 10%;
  }
    div.carousel-caption.slide1  h5{
      font-size: 2rem;
    }
}
@media screen and (max-width: 992px) {  
  footer.footer .footer__upper {
    display: flex;
    flex-direction: column;
  }
  footer.footer .footer__nav {
    border: none;
  }
  footer.footer .footer__contact {
    border: none;
  }

}