/*Agregamos el atributo de html para tener el mismo efecto de smooth scroll*/
/*html {
  scroll-behavior: smooth;
}*/
/*estilos header*/
.header{
  background-color: white;

}
/*Estilos de el menu de navegación*/

p{
  font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4{
  font-family: 'Jura', sans-serif;
}

.carousel-caption-1 {
    position: absolute;
    left: 10%;
    z-index: 10;
    color: #fff;
    align-items: center;
    margin: 0;
    top: 7.5%;
    transform: translate(-50%, -50%);
}
.carousel-caption-2 {
    position: absolute;
    right: 5%;
    z-index: 10;
    color: #fff;
    align-items: center;
    margin: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.llamanos{
  margin-left: 125px;
  margin-top: 15px;
}
/* Tamaños de las letras */
.fz-15{
  font-size: 1.5rem;
}
.fz-9{
  font-size: .9rem;
}


.frm-contacto{
  border: 0px;
  background:#EDEDF5;
  color: #8A93C3 !important;
}
.frm-contacto::-webkit-input-placeholder { color:#8A93C3 }
/*Clases para el parallax*/

.photo {
  background-attachment: fixed;
  background-position: 50% 0;
  background-repeat: no-repeat;
  height: 450px;
  position: relative;
}
.photo p {
  color: white;

  font-size: 38px;
  padding: 10px;
  position: absolute;
  text-shadow: 0 2px 0 black, 0 0 10px black;
  text-align: center;
}

.parallax{
  max-width: 100%;
  height: 50vw;
  background-position:top center;
  background-attachment: fixed;
  background-size:cover ;

}

a{
  color: #2955F2
}

.footer-list{

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  color: #BDCDEC;list-style: none;
  margin: 0px;
  padding: 0px;

}
.carousel-control-prev-icon, .carousel-control-next-icon{
  width: 30px;
  height: 30px;
}

.btn-contacto{
  background-color: #2955F2;
  color: white;
}

.btn-contacto:hover, .btn-contacto.active{
  background-color: #52D1AF;
  color: white;
}
.carousel-control-prev{
  left: 25px;
}
.carousel-control-next{
  right: 25px;
}

.index-ed{
  background-color: #2955F2;height: auto;
}
.titulo-ed{
  position:relative;top:-50px;
}

.texto-ed{
  padding-bottom: none;
}

@media(min-width: 768px){

  .titulo-ed{
    position:relative;top:-65px;
  }

}

@media(min-width: 1300px){
  .texto-ed{
    padding-bottom: 80px;
  } 
}

.navbar-nav{
   font-family: 'Jura', sans-serif;
}

.breadcrumb, .breadcrumb a{
  background: transparent;
  color: white;
  font-family: 'Jura', sans-serif;
  font-size: 20px;
}

.navbar-nav li a{
  padding: 0 8px;
  color: black;
  font-weight: bolder;
}

.navbar-nav li.active, .navbar-nav li:hover{
  border-bottom: 2px solid #52D1AF;

}

.navbar-nav li:hover a{
  color: #52D1AF;
}

.navbar-nav li.active a{
  padding: 0 8px;
  color: #2955F2;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2955f2d9;
  min-width: 245px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #52D1AF;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}


.tipos-materiales{
  list-style: none;
}

.tipos-materiales li{
    line-height: 2 !important;
}

.animacion{
  border-radius: .25em;
  margin: 2em auto;
  opacity: 0;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  will-change: transform, opacity;
}

.mostrar{
  opacity: 1;
}

/*Estilos para los botones de flotantes y responsivos*/
#btncelulares{
        display: none;
    }
    @media (max-width: 720px){
        #btncelulares{
          display: block;
          position: fixed;
            bottom: 0;
            z-index: 100;
            width: 100%;
            padding: 5px;
        }

        .social{
            display:none;
        }
    }


    .social {
        position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
        right:4px; /* Establecemos la barra en la direccion */
        top:40%; /* Bajamos la barra 300px de arriba a abajo */
        z-index: 1000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */ 
    }
 
    .social ul {
        list-style: none;
    }
 
    
    .social ul li a i{
     font-size:25px;

    }

    .social ul li a
     {
        padding-top:12px !important;
        border-radius:50% !important;
        width:50px;
        height: 50px;
        margin-bottom:5px;
        text-align: center;
        color:white;
    }