/* Estilos generales para los botones */
.button {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    border: none;
}

/* Estilos específicos para el botón de Facebook */
.facebook-button {
    background-color: #3b5998;
    color: #fff;
}

/* Estilos específicos para el botón de Twitter */
.twitter-button {
    background-color: #1da1f2;
    color: #fff;
}

/* Estilos específicos para el botón de WhatsApp */
.whatsapp-button {
    background-color: #25d366;
    color: #fff;
}

.phone-button {
    background-color: #007bff;
    color: #fff;
}

/* Estilo adicional para espaciado entre botones */
.button+.button {
    margin-left: 10px;
}

/* Make the image fully responsive */
.carousel-inner img {
    width: 100%;
    height: 100%;
}

body {
    background-color: #f2f2f2;
}

.fakeimg {
    height: 200px;
    background: #aaa;
}

@font-face {
    font-family: "FuenteNormal";
    src: url(../fonts/bahnschrift.ttf) format("truetype");
    font-size: 14px;
}

@font-face {
    font-family: "FuenteMenu";
    src: url(../fonts/anton-regular.ttf) format("truetype");
    font-size: 18px;
}

@font-face {
    font-family: "FuentePrecio";
    src: url(../fonts/scoreboard.ttf) format("truetype");
    font-size: 18px;
}

@font-face {
    font-family: "FuenteTStel";
    src: url(../fonts/impact_0.ttf) format("truetype");
    font-size: 18px;
}

@font-face {
    font-family: "FuenteTSdir";
    src: url(../fonts/arialbd_0.ttf) format("truetype");
    font-size: 18px;
}

.menuop {
    font-family: "FuenteMenu";
    src: url(../fonts/anton-regular.ttf) format("truetype");
    /*font-size:18px;*/
    color: #fff;
}

.precio {
    font-family: "FuentePrecio";
    src: url(../fonts/scoreboard.ttf) format("truetype");
    font-size: 90px;
    color: #000;
}

.titulo {
    font-family: "FuenteMenu";
    src: url(../fonts/anton-regular.ttf) format("truetype");
    color: #000;
}

.advertise-button {
    background-color: yellow;
    color: black;
    font-weight: bold;
    border: 2px solid yellow;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.advertise-button:hover {
    background-color: #ffcc00;
    /* Un poco más oscuro al pasar el cursor */
}

.titulo2 {
    font-family: "FuenteMenu";
    src: url(../fonts/anton-regular.ttf) format("truetype");
    color: #000;
    font-size: 18px;
    font-weight: lighter;
}

.tstel {
    font-family: "FuenteTStel";
    src: url(../fonts/impact_0.ttf) format("truetype");
    color: #000;
    /*font-size:55px;*/
}

.tsdir {
    font-family: "FuenteTSdir";
    src: url(../fonts/arialbd_0.ttf) format("truetype");
    color: #000;
}

.contenido {
    font-family: "FuenteNormal";
    src: url(../fonts/bahnschrift.ttf) format("truetype");
    color: #000;
    font-size: 12px;
}


.carousel-inner img {
    width: 100%;
    height: 100%;
}

/** Intercambio de Imagen */

.contenedor {
    position: relative;
    max-width: 120px;
}

.imagen1 {
    display: block;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    /*background-color: #008CBA;*/
}

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

.imagen2 {
    color: white;
    font-size: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

/** Fin Intercambio de Imagen */

/** Inicio Texto Diapositivas */

div.transbox {
    margin: 30px;
    background-color: #000000;
    animation-fill-mode: forwards;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60);
    /* For IE8 and earlier */
}

div.transbox p {
    /*margin: 5%;*/
    font-weight: bold;
    color: #ffffff;
}

.hidden-xs-up {
    display: none !important;
}

@media (max-width: 575px) {
    .hidden-xs-down {
        display: none !important;
    }
}

@media (min-width: 576px) {
    .hidden-sm-up {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hidden-sm-down {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hidden-md-up {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .hidden-md-down {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .hidden-lg-up {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .hidden-lg-down {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-xl-up {
        display: none !important;
    }
}

.hidden-xl-down {
    display: none !important;
}

header {
    /*position: fixed;*/
    width: 100%;
    max-width: 1620px;
    text-align: center;
    font-size: 20px;
    line-height: 10px;
    /*height: 10px;*/
    /*background: #ffffff;*/
    color: #fff;
    font-family: 'PT Sans', sans-serif;
    /*/ set animation*/
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: +99;
}

header.sticky {
    font-size: 24px;
    /*line-height: 48px;*/
    /*height: 48px;*/
    /*background: #ffffff;*/
    text-align: left;
    padding-left: 0px;
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

#imag1 {
    width: 80%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#imag1.sti {
    width: 40%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#imag2 {
    width: 80%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#imag2.sti {
    width: 40%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#imag3 {
    width: 80%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#imag3.sti {
    width: 40%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#imag4 {
    width: 60%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#imag4.sti {
    width: 30%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.contima {
    position: relative;
    width: 100%;
}

.imagen {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

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

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

.contima:hover .mitad {
    opacity: 1;
}

.texto {
    background-color: #7F7F7F;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

/* fondo seccion */
#rcorners {
    border-radius: 15px;
    background: #bbbbbb;
    padding: 10px;
    width: 100%;
    color: #000000;
    padding-left: 20px;
    padding-right: 20px;
}

/* fondo seccion */
#rcorners2 {
    border-radius: 15px;
    background: #ff0000;
    padding: 10px;
    width: 100%;
    color: #ffffff;
    padding-left: 20px;
    padding-right: 20px;
}


img.bgx {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;
    z-index: -99;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) {

    /* Specific to this particular image */
    img.bgx {
        left: 50%;
        margin-left: -512px;
        /* 50% */
    }
}

img.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 40px;
}

.rrss {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;

    /*border: 2px dashed rgba(114, 186, 94, 0.35);*/
    height: 100%;
    /*background: rgba(114, 186, 94, 0.05);*/


}


.redes {
    position: -webkit-sticky;
    position: sticky;
    top: 9rem;
}


.resizable {
    font-size: 15px;
}

.font-controls {
    position: absolute;
    top: .5em;
    right: .5em;
    display: flex;
    font-size: 1.5em;
}

.font-control {
    margin-left: .5em;
    padding: .25em;
    border: 1px solid #000;
    cursor: pointer;
}

.icon-bar {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

.icon-bar a {
    display: block;
    text-align: center;
    padding: 5px;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;

}

.icon-bar a:hover {
    background-color: #000;

}

.facebook {
    background: #3B5998;
    color: white;
}

.twitter {
    background: #000000;
    color: white;
}

.fa.fa-twitter {
    font-family: sans-serif;
}

.fa.fa-twitter::before {
    content: "𝕏";
    font-size: 1.2em;
}

.google {
    background: #dd4b39;
    color: white;
}

.linkedin {
    background: #007bb5;
    color: white;
}

.whatsapp {
    background: #25D366;
    color: white;
}

.youtube {
    background: #bb0000;
    color: white;
}

.pyro>.before,
.pyro>.after {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: -120px -218.66667px blue, 248px -16.66667px #ff0000, 190px 16.33333px #ff0000, -113px -308.66667px #ff0000, -109px -287.66667px #ff0000, -50px -313.66667px #ff0000, 226px -31.66667px #ff0000, 180px -351.66667px #ff0000, -12px -338.66667px #ff0000, 220px -388.66667px #ff0000, -69px -27.66667px #ff0000, -111px -339.66667px #ff0000, 155px -237.66667px #ff0000, -152px -380.66667px #000fff, -50px -37.66667px #000fff, -95px -175.66667px #000fff, -88px 10.33333px #000fff, 112px -309.66667px #000fff, 69px -415.66667px #000fff, 168px -100.66667px #000fff, -244px 24.33333px #000fff, 97px -325.66667px #000fff, -211px -182.66667px #000fff, 236px -126.66667px #000fff, 140px -196.66667px #000fff, 125px -175.66667px #000fff, 118px -381.66667px #000fff, 144px -111.66667px #000fff, 36px -78.66667px #ff0000, -63px -196.66667px #ff0000, -218px -227.66667px #ff0000, -134px -377.66667px #ff0000, -36px -412.66667px #ff0000, 209px -106.66667px #ff0000, 91px -278.66667px #ff0000, -22px -191.66667px #ff0000, 139px -392.66667px #000fff, 56px -2.66667px #000fff, -156px -276.66667px #000fff, -163px -233.66667px #000fff, -238px -346.66667px #ff0000, 62px -363.66667px #ff0000, 244px -170.66667px #ff0000, 224px -142.66667px #000fff, 141px -208.66667px #000fff, 211px -285.66667px #000fff, 181px -128.66667px #000fff, 90px -123.66667px #000fff, 189px 70.33333px #000fff, -18px -383.66667px #000fff, 100px -6.66667px #000fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro>.after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-moz-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-o-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-ms-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-webkit-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-moz-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-o-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-ms-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}


/*ini filt*/
.gallery-title {
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}

.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}

.filter-button {
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

}

.filter-button:hover {
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}

.btn-default:active .filter-button:active {
    background-color: #42B32F;
    color: white;
}

.port-image {
    width: 100%;
}

.gallery_product {
    margin-bottom: 30px;
}

/*fin filt*/
.snowflake {
    position: absolute;
    display: block;
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-image: -webkit-radial-gradient(center,
            circle farthest-corner,
            rgba(255, 255, 255, 1) 40%,
            rgba(255, 255, 255, 0) 100%);
    background-image: -moz-radial-gradient(center,
            circle farthest-corner,
            rgba(255, 255, 255, 1) 40%,
            rgba(255, 255, 255, 0) 100%);
    background-image: -ms-radial-gradient(center,
            circle farthest-corner,
            rgba(255, 255, 255, 1) 40%,
            rgba(255, 255, 255, 0) 100%);
    background-image: radial-gradient(center,
            circle farthest-corner,
            rgba(255, 255, 255, 1) 40%,
            rgba(255, 255, 255, 0) 100%);
}

#snow {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 0;
}