/** FONTS * --------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');




    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
      }	






.sticky-container{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-125px;
    top:68%;
    width:210px;
    z-index: 1100;
}
.sticky li{
    list-style-type:none;
    background-color:#;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.sticky li:hover{
    margin-left:-115px;
}
.sticky li img{
    float:left; 
    margin:0px 4px;
    margin-right:15px;
}
.sticky li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.sticky li p a:hover{
    text-decoration:underline;
}











/*Flecha para hacer la pagina hacia arriba*/
.ir-arriba{
  display:none;
  background-repeat:no-repeat;
  font-size:20px;
  color:black;
  cursor:pointer;
  position:fixed;
  bottom:10px;
  right:10px;
  z-index:2;
}









/** Video * --------------------------------------------------*/
          .video-fluid {
            width: 100%;
            height: auto;
          }











/********* PRELOADER *******/
.loader-page {
    position: fixed;
    z-index: 25000;
    background: rgb(0, 0, 0);
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:all .3s ease;
  }
  .loader-page::before {
    content: "";
    position: absolute;
    border: 2px solid rgb(224, 87, 36);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid rgba(224, 87, 36,0);
    border-top: 2px solid rgba(224, 87, 36,0);
    animation: rotarload 1s linear infinite;
    transform: rotate(0deg);
  }
  @keyframes rotarload {
      0%   {transform: rotate(0deg)}
      100% {transform: rotate(360deg)}
  }
  .loader-page::after {
    content: "";
    position: absolute;
    border: 2px solid rgba(224, 87, 36,.5);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid rgba(224, 87, 36, 0); 
    border-top: 2px solid rgba(224, 87, 36, 0);
    animation: rotarload 1s ease-out infinite;
    transform: rotate(0deg);
  } 

.preloader {
    margin: auto;
  	background: url(https://diselec.com.mx/img/logo/diselec-favicon-a.png) no-repeat center;
    background-size: 80px;
    width: 80px;
    height: 80px;
    }
 











/** COOKIES * --------------------------------------------------*/
#div-cookies {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    font-size: small; 
    background-color: #0f1f33;
    color: rgba(255, 255, 255, 0.79);
    box-shadow: 0px -5px 15px rgba(37, 51, 64, 0.7);
    padding: 20px;
    z-index: 99;
} 








/********* HEADER *******/
header {
  position: relative;
  background-color: rgb(2, 21, 88);
  height: 75vh;
  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;
  opacity: 0.15;
  -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 Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
  header {
    background: url("/img/back-emergente.jpg") black no-repeat center center scroll;
  }

  header video {
    display: none;
  }
}







/********* PARALLAX 1 *******/

.parallax1 { 
    background-image: url('http://www.diselec.com.mx/img/inicio-parallax-1.jpg'); height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }









/********* PRODUCT CARD *******/

.productcard {
    border-radius: 25px;
    height: 323px;
    box-shadow: 0 6px 10px rgba(0,0,0,.11), 0 0 6px rgba(0,0,0,.7);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    cursor: pointer;
}

.productcard:hover{
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.9);
}










/********* MODALS PRODUCTOS *******/


.modal-title.title {
    font-family: 'Bebas Neue', cursive;
    font-size: 45px;
    text-transform: uppercase;
    color: rgb(224, 87, 36);
    }

p.modal-body-desc {
    font-family: 'Bebas Neue', cursive;
    color: #626262;
    }


p.modal-body-prod {
    height: auto;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', cursive;
    color: rgb(224, 87, 36);
    }

img.modal-body-prod-img {


    }    



.product-cont {
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
}

.product-cont:hover{
    transform: scale(1.05);  
}







/********* GALERIA *******/

.galimg {
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    
}

.galimg:hover{
    transform: scale(1.05);

}