/* Required height of parents of the Half Page Carousel for proper displaying carousel itself */

html {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
}
body::-webkit-scrollbar {
  width: 0px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

html,
body,
.view {
  /*height: 100%; */
}
.soloMovil{
  display: none;
}

.texto-banner{
  font-size: 50px;
}

.parallaxCurriculum{
  background-image: url("../img/slides/slide-02.jpg");
  /*height: 1000px;*/
    
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 559px){
  .texto-banner{
    font-size: 20px;
    
    margin-top:40px;
  }
  .top-nav-collapse {
    background-color: rgba(0, 0, 0, 1);
  }
}

@media (max-width: 740px) {
  .full-page-intro {
    /*height: 1000px; */
    }
    .soloMovil{
      display: block;
    }

  }

/* Half Page Carousel itself*/
.carousel {
  /*height: 50%; */
}
  .carousel .carousel-inner {
    /*height: 100%; */
  }
    .carousel .carousel-inner .carousel-item,
    .carousel .carousel-inner .active{
      /*height: 100%; */
    }

/* Adjustment for mobile devices*/
@media (max-width: 776px) {
  .carousel {
    /*height: 100%; */
    }

  }

  /* Navbar animation */

  .logo{
    width: 100px;
    margin-left: 100px;
  }

  .navbar {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0px 0 rgba(0,0,0,0), 0 2px 10px 0 rgba(0,0,0,0); 
    transition: color 0.55s ease-in-out, background-color 0.55s ease-in-out, border-color 0.55s ease-in-out, box-shadow 0.55s ease-in-out;
  
  }

  .top-nav-collapse {
    background-color: rgba(0, 0, 0, 1);
    transition: color 0.55s ease-in-out, background-color 0.55s ease-in-out, border-color 0.55s ease-in-out, box-shadow 0.55s ease-in-out;
  
  }

/* Adding color to the Navbar on mobile */
@media only screen and (max-width: 768px) {
  

}



/* Footer color for sake of consistency with Navbar */
.page-footer {
  background-color: #1C2331; }

.botonFacebook{
  background-color: #007BFF;
  color: #fff;
  text-transform: uppercase;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 2rem;
  height: 2rem;
  font-size: 0.81rem;
}
.botonFacebook:hover{
  background-color: #9F2826; 
}

.botonTwitter{
  background-color: #1DA1F2;
  color: #fff;
  text-transform: uppercase;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 2rem;
  height: 2rem;
  font-size: 0.81rem;
}
.botonTwitter:hover{
  background-color: #9F2826; 
}


.botonInstagram{
  background-color: #FF3547;
  color: #fff;
  text-transform: uppercase;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 2rem;
  height: 2rem;
  font-size: 0.81rem;
}
.botonInstagram:hover{
  background-color: #9F2826; 
}


.botonWhatsApp{
  background-color: #28A745;
  color: #fff;
  text-transform: uppercase;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 2rem;
  height: 2rem;
  font-size: 0.81rem;
}
.botonWhatsApp:hover{
  background-color: #9F2826; 
}

.botonCorreo{
  background-color: #007BFF;
  color: #fff;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
  height: 2rem;
  font-size: 0.81rem;
}
.botonCorreo:hover{
  background-color: #9F2826; 
}


.botonContactoWhats{
  background-color: #28A745;
  color: #fff;
  font-weight: bold;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
  height: 2rem;
  width: 15rem;
  font-size: 0.81rem;
}
.botonContactoWhats:hover{
  background-color: #9F2826; 
}


.botonWhats{
  background-color: #28A745;
  color: #fff;
  font-weight: bold;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
  height: 2rem;
  font-size: 0.81rem;
}
.botonWhats:hover{
  background-color: #9F2826; 
}

.botonTiktok{
  background-color: #333;
  color: #fff;
  font-weight: bold;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
  height: 2rem;
  font-size: 0.81rem;
}
.botonTiktok:hover{
  background-color: #9F2826; 
}


.botonWhatsCarrusel{

  background-color: #28A745;
  color: #fff;
  font-weight: bold;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
  /*height: 2rem;*/
  width:100%;
  font-size: 0.81rem;
}
.botonWhatsCarrusel:hover{
  background-color: #9F2826; 
}


.botonContacto{
  background-color: #FF3547;
  color: #fff;
  font-weight: bold;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
  height: 2rem;
  width: 15rem;
  font-size: 0.81rem;
}
.botonContacto:hover{
  background-color: #9F2826; 
}


.imgProyectos{
  /*background-color: red;*/
  width: 100%;
  height: 200px;

    overflow: hidden;
    position: relative;
}

.imgProyectos img{
  
  position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}