html, body{
    overflow-x:hidden;
    background-color:#000000;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;  
    position: relative; 
    /*background-image: linear-gradient(rgba(178, 162, 202, 0.8), rgba(178, 162, 202, 0.8)), url('/img/elements/background_purple.png'); */
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('/img/elements/background.webp'); 
    background-repeat: repeat;
    background-size: 200px 200px;
    background-attachment: fixed;
    z-index:-2;
    scroll-behavior: smooth;
    cursor: url('../img/elements/cursor.png'), pointer;
}

@font-face {
    font-family: 'Franklin Gothic';
    src: url('/fonts/Franklin\ Gothic\ Demi\ Regular.ttf');
}
@font-face {
    font-family: 'Foo';
    src: url('/fonts/foo.ttf');
}

.no-margin{
    margin: 0px !important;
}

.no-padding{
    padding: 0px !important; 
}

.btn-theme1{
    background-color: #422a4d;
    color:#ffffff;
}

.btn-theme1:hover{
    background-color: #a970c4;
    cursor: url('../img/elements/pointer.png'), pointer;
}

.highlight-text{
    font-style: bold;
    color:#c7535d;
}
/*Navegacion*/

.navbar-slogan{
    vertical-align: middle;
    background-color: #422a4d;
    color:#FFFFFF;
    text-align:center;
    font-family: 'Foo';
    font-size:20px;
    /*-webkit-text-stroke: 2px #000000;*/
}

#div_header_logo{
    padding-left: 5vw;
    background-color: #422a4d;
    width: 100%;
    z-index:1;
}

#div_header_logo>a>img{
    -webkit-animation:shake 3s linear infinite;
    -moz-animation:shake 3s linear infinite;
    animation:shake 3s linear infinite;
    position:absolute;
    vertical-align: middle;
    height:10vw;
}

#div_header_logo>a>img:hover{
    cursor: url('../img/elements/pointer.png'), pointer;
}

#div_menu{
    width:100vw;
    padding:0px;
    margin:0px;
}

@keyframes shake {
    10%, 80% {
      transform: translate3d(-1px, 0, 0);
      transform: rotate(-5deg);
    }
    
    20%, 70% {
      transform: translate3d(2px, 0, 0);
      transform: rotate(0deg);
    }
  
    30%, 50%  {
      transform: translate3d(-4px, 0, 0);
      transform: rotate(5deg);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
      transform: rotate(0deg);
    }
    90%{
        transform: translate3d(0, 0, 0);
        transform: rotate(0deg);
    }
  }

.navbar-custom {
    background-color: #422a4d;
    margin:0;
    padding:0;
    top:0;
    bottom:0;
    min-height:10vh;
    font-family: 'Franklin Gothic';
}

@media(max-width:720px){
    .navbar-custom{
        min-height:10vh;
    }

    #div_header_logo{
        /*position:absolute;*/
        padding-left: 10vw;
    }

    .img-prod>img{
        height:250px;
    }

    .hero-footer-text{
        font-size:large;
        width: 100%;
    }  
}

@media(max-width:960px){
    .encabezado-res{
        text-align:left;
        font-size:25px;
    }

    .encabezado{
        font-size:25px;
    }
}

@media(min-width:960px) {
    .navbar-slogan{
        font-size:15px;
    }

    .hero-footer-text{
        font-size:medium;
        width: 100%;
    }

    .img-prod>img{
        height:300px;
    }
    .encabezado-res{
        text-align:center;
        font-size:35px;
    }

    .encabezado{
        font-size:35px;
    }
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #ffffff;
}

.navbar-custom .navbar-nav .nav-link {
    color: #ffffff;
    border:0px;
    height:100%;
    padding-left:2vw;
    padding-right:2vw;
    border:0px;
    border-left:1px solid #a970c4;
}

.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    transition: ease-in-out all .6s; 
    color: #ffffff;
    background: #221329;
    margin-top:0;
    margin-bottom:0;
    cursor: url('../img/elements/pointer.png'), pointer;
    
    /*background: -moz-linear-gradient(0deg, #ffcece 0%, #c7535d 88%);
    background: -webkit-linear-gradient(0deg, #ffcece 0%, #c7535d 88%);
    background: linear-gradient(0deg, #ffcece 0%, #c7535d 88%);*/
}

.dropdown-menu{
    color: #ffffff;
    background: #422a4d;
    border:0;
}

.dropdown-item{
    color: #ffffff;
    border:0;
}

.dropdown-item:hover{
    transition: ease-in-out all .6s; 
    color: #ffffff;
    background: #221329;
    cursor: url('../img/elements/pointer.png'), pointer;
}

.dropdown-divider{
    border-color:#a970c4;
}

.dropdown .dropdown-menu {
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;

    max-height: 0;
    overflow: hidden;
    display: block;
    padding: 0px;
    margin: 0px;
    opacity: 0;
}

.dropdown.show .dropdown-menu {
    max-height: 400px;
    opacity: 1;
}

.dropdown:hover .dropdown-menu{
    display: block;
    margin-top: 0;
}

.navbar-toggler{
    background-color:#c7535d;
    border-color:#ffcece;
    color:#ffcece;
    border:6px;
}

/*Hero principal*/
.hero-container{
    height: 500px;
    position:relative;
}

.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/gallery/yogurt_salsafresa.webp");
    height:100%;
    filter: blur(4px);
    -webkit-filter: blur(4px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /*position: relative;*/
  }
  
.hero-text {
    background-color: rgba(0,0,0, 0.4);
    font-family: 'Franklin Gothic';
    color: white;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
}


.hero-product-container{
    height: 300px;
    position:relative;
}   

.hero-product-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/gallery/bunuelos4.webp");
    height:100%;
    filter: blur(4px);
    -webkit-filter: blur(4px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /*position: relative;*/
}

.hero-us-container{
    height: 300px;
    position:relative;
}   

.hero-us-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/elements/logo_square.png");
    height:100%;
    filter: blur(4px);
    -webkit-filter: blur(4px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /*position: relative;*/
}

.hero-cont-container{
    height: 300px;
    position:relative;
}   

.hero-cont-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/gallery/chocolate_corazon_blanco.webp");
    height:100%;
    filter: blur(4px);
    -webkit-filter: blur(4px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /*position: relative;*/
}

/*Contenido*/

.encabezado{
    color: #ffffff;
    background: #221329;
    font-family:'Foo';
    /*font-size:larger;*/
    text-align: center;
    vertical-align: middle;
    /*height:6vh;*/
    width:100%;
}

.encabezado-res{
    color: #ffffff;
    background: #221329;
    font-family:'Foo';
    /*font-size:larger;*/
    vertical-align: middle;
    width:100%;
}

.subencabezado{
    color: #ffffff;
    background: #41254e;
    font-family:'Franklin Gothic';
    font-size: large;
    text-align: left;
    padding:5px;
    /*height:45px;*/
    width:100%;
}

.seccion{
    background-color: #b2a2ca;
    padding:5px;
    font-family:'Franklin Gothic';
    font-size: large;
    vertical-align: middle;
}

#nosotros-parallax{
    background-image: url("/img/gallery/tresleches_kahlua.webp");
    height: 200px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.producto-item{
    text-align:center;
    padding:5px;
}


.contenedor {
    position: relative;
    width: 100%;
    padding:20px;
}
  
.imagen {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.medio {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.contenedor:hover .imagen {
    opacity: 0.3;
}

.contenedor:hover .medio {
    opacity: 1;
}

.texto{
   color: #ffffff; 
}

.banner{
    position:relative;
    color:#ffcece;
    background-repeat: repeat;
    font-family: 'Franklin Gothic';
    text-align:center;
    font-size:xx-large;
    background-image: url('/img/elements/background_dark.webp');
    vertical-align: middle;
}

.intermision{
    position:relative;
    /*background:#ffcece;*/
    background-image: url('/img/elements/background_dark.webp');
    /*padding:5vh;*/
    /*color:#adadad;*/
    color:#ffcece;
    background-repeat: repeat;
    font-family: 'Franklin Gothic';
    text-align:center;
    font-size:xx-large;
    /*height:200px;*/
    vertical-align: middle;
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.image-round img{
    border-radius:15%;
    transition: transform .2s;
    margin: 0 auto;
}

.image-round img:hover{
    transform: scale(.9);
    border: solid 5px;
    border-color: #41254e;
    z-index: 2;
    cursor: url('../img/elements/pointer.png'), pointer;
}

.pie-foto{
    text-align:center;
    bottom:0;
    /*position:absolute;*/
}

.modal-responsive{
    width:100%;
}

.modal-content{
    background-color:#41254e;
}

/*footer*/

.hero-footer-container{
    height: 300px;
    position:relative;
}

.hero-footer-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/gallery/gelatina_limon2.webp");
    height:100%;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /*position: relative;*/
}
  
.hero-footer-text {
    font-family: 'Franklin Gothic';
    color: white;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: x-large;
    z-index: 2;
    width: 80%;
    padding: 10px;
    text-align: center;
}

@media(max-width:992px){
    .hero-footer-text{
        font-size: small;
        width: 80%;
        padding: 5px;
    }
}

#contacto{
    background-color: #000000;
    color: #adadad;
    padding:5vh;
    margin:0;
    min-height:20vh;
    text-align:center;
}

.contacto-social >a{
    text-decoration:none;
    font-size:50px;
    color:#adadad;
}

.contacto-social >a:hover{
    transition: ease-in-out all .6s;
    text-decoration:none;
    font-size:50px;
    color:#ffcece;
    cursor: url('../img/elements/pointer.png'), pointer;
}

#developer{
    font-size:12px;
    background:#000000;
    color:#777777;
    text-align:right;
    vertical-align: bottom;
    padding-right:6px;
    text-decoration: none;
}

#freepik{
    font-size:12px;
    background:#000000;
    color:#777777;
    text-align:left;
    vertical-align: bottom;
    padding-right:6px;
    text-decoration: none;
}

#developer>a, #freepik>a{
    color:#777777;
}

.recuadro-wrap{
    padding:30px;
    text-align: center;
    /*background-color: #ffffff;*/
}

.ir-arriba{
    display:none;
    background-repeat:no-repeat;
    font-size:50px;
    color:#ffcece;
    cursor: url('../img/elements/pointer.png'), pointer;;
    position:fixed;
    bottom:100px;
    right:20px;
    z-index:2;
}

hr {
    border: 5px dotted c7535d;
    border-radius: 5px;
}

.btn-descustom1{
    background-color: #41254e;
    border-color:#a970c4;
    color: #ffcece;
}

.btn-descustom1:hover{
    cursor: url('../img/elements/pointer.png'), pointer;
    background-color: #ffcece;
    color: #41254e;
}