﻿/******************************************************************************/
/* Backgrounds */
.bg-blanco {
    background-color: #fff;
}

.bg-gris {
    background-color: #ececec;
}

.bg-negro {
    background-color: #000;
}

.bg-gradient-blanco-gris {
    background: linear-gradient(to top, #fff 0%, #fff 52%, #ececec 52%, #ececec 100%);
}

.bg-gradient-blanco-gris-blanco {
    background: linear-gradient(to top, #fff 0%, #fff 20%, #ececec 20%, #ececec 60%, #fff 60%, #fff 100%);
}

/******************************************************************************/
/* Text */
p.justify {
    text-align: justify;
}

/******************************************************************************/
/* Titulos */
.titulo {
    font-size: 22px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.14px;
    color: #030303;
    margin: 50px auto 20px auto;
}

    .titulo b {
        font-size: 27px;
        font-weight: 600;
        letter-spacing: 0.18px;
        color: #b40202;
    }

    .titulo.centrado {
        width: 100%;
        text-align: center;
    }

/******************************************************************************/
/* Display */
.hide {
    display: none;
}

/******************************************************************************/
/* Botones */
.btn {
    width: 100%;
    max-width: 250px;
    height: 100%;
    max-height: 44px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    align-items: center;
    text-align: center;
    padding: 6px 0 10px 0;
    border: 0;
    border-radius: 6px;
    background-image: linear-gradient(to top, #ff0101 0%, #cb0000 100%);
    box-shadow: #42232366 3px 5px 4px, #4223234d 6px 9px 13px -3px, #6f3a3a80 -4px -4px 0 inset;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    line-height: 1;
}

    .btn:hover {
        box-shadow: #000 5px 8px 15px -4px, #42232366 3px 5px 4px, #4223234d 6px 9px 13px -3px, #6f3a3a80 -4px -4px 0 inset;
        transform: scale(1.01);
        color: #fff;
        text-shadow: #000000c4 0px 0px 6px;
    }

    .btn:active {
        box-shadow: #000 0px 4px 8px, #42232366 3px 5px 4px, #4223234d 6px 9px 13px -3px, #6f3a3a80 -4px -4px 0 inset;
        transform: scale(.99);
        color: #fff;
        text-shadow: #000000c4 0px 0px 6px;
    }

button.btn {
    font-size: 18px;
    max-height: 42px;
    min-height: 42px;
}
/*Añadido para los botones que no funcionan (de momento) de contratar online en coto de caza y monterías*/
.btn-disabled {
    width: 100%;
    max-width: 250px;
    height: 100%;
    max-height: 44px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    align-items: center;
    text-align: center;
    text-decoration: none;
    padding: 6px 0 10px 0;
    border: 0;
    border-radius: 6px;
    background: #E5E5E5;
    box-shadow: 0 4px 0 #a19d9d;
    box-sizing: border-box;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    cursor: auto;
}

/******************************************************************************/
/* Slider */
/* Animaciones */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-200px * 46)); /* => el numero (calc(-200px * X)) tiene que ser igual al numero de logos del slider */
    }
}

@keyframes slide-in-left {
    0% {
        visibility: hidden;
        opacity: 0;
        max-width: 0px !important;
        transform: translateX(-100vw);
    }

    10% {
        visibility: visible;
        opacity: 1;
        max-width: 1000px !important;
    }

    100% {
        visibility: visible;
        opacity: 1;
        max-width: 1000px !important;
        transform: translateX(0px);
    }
}

@keyframes slide-out-left {
    0% {
        visibility: visible;
        opacity: 1;
        max-width: 1000px !important;
        transform: translateX(0px);
    }

    90% {
        visibility: visible;
        opacity: 1;
        max-width: 1000px;
    }

    99% {
        visibility: hidden;
        opacity: 0;
        max-width: 0px !important;
    }

    100% {
        visibility: hidden;
        opacity: 0;
        max-width: 0px !important;
        transform: translateX(-100vw);
    }
}

@keyframes slide-in-ritgh {
    0% {
        visibility: hidden;
        opacity: 0;
        max-width: 0px !important;
        transform: translateX(100vw);
    }

    10% {
        visibility: visible;
        opacity: 1;
        max-width: 1000px !important;
    }

    100% {
        visibility: visible;
        opacity: 1;
        max-width: 1000px !important;
        transform: translateX(0px);
    }
}

@keyframes slide-out-ritgh {
    0% {
        visibility: visible;
        opacity: 1;
        max-width: 1000px;
        transform: translateX(0px);
    }

    90% {
        visibility: visible;
        opacity: 1;
        max-width: 1000px;
    }

    99% {
        visibility: hidden;
        opacity: 0;
        max-width: 0px !important;
    }

    100% {
        visibility: hidden;
        opacity: 0;
        max-width: 0px !important;
        transform: translateX(100vw);
    }
}

/* Flechas de dirección */
.prev-arrow {
    background: url(../images/icons/png/left-black-arrow.png) no-repeat left center;
    height: 50px;
    width: 24px;
    position: absolute;
    left: 2%;
    top: 50%;
}

.next-arrow {
    background: url(../images/icons/png/rigth-black-arrow.png) no-repeat left center;
    height: 50px;
    width: 24px;
    position: absolute;
    right: 2%;
    top: 50%;
}

.slide-index {
    position: absolute;
    width: 50px;
    left: Calc(50% - 25px);
    bottom: -34px;
    text-align: center;
    font-size: 24.4px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.16px;
}

.next-arrow:active,
.prev-arrow:active {
    transform: scale(1.2);
}

/* Sliders con flechas de dirección según tamaño */
.slider-mobile ~ .next-arrow,
.slider-mobile ~ .prev-arrow,
.slider-mobile ~ .slide-index,
.slider-tablet ~ .next-arrow,
.slider-tablet ~ .prev-arrow,
.slider-tablet ~ .slide-index {
    display: none;
}

.slider-desktop {
    position: relative;
}

    .slider-desktop .slide-item {
        position: absolute;
        visibility: hidden;
        opacity: 0;
    }

    .slider-desktop ~ .next-arrow,
    .slider-desktop ~ .prev-arrow,
    .slider-desktop ~ .slide-index {
        display: block;
    }

/* Slider fijo para los logos de cias */
#slider-cias .cias-sli-container {
    width: 100vw;
    height: 90px;
    padding: 20px 0 19px 0;
    border-bottom: 3px solid #dddddd;
    border-top: 1px solid #979797;
    box-shadow: 0 3px 0 0 rgb(204 204 204 / 60%);
    margin-bottom: 35px;
    overflow: hidden;
    position: relative;
}

    #slider-cias .cias-sli-container:before {
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
        left: 0;
        top: 0;
    }

    #slider-cias .cias-sli-container:after {
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    #slider-cias .cias-sli-container .cias-sli-track {
        animation: scroll 80s linear infinite;
        display: flex;
        width: calc(200px * 86); /* => el numero (calc(-200px * X)) tiene que ser igual al doble de logos del slider */
        scroll-behavior: smooth;
    }

        #slider-cias .cias-sli-container .cias-sli-track .sli {
            height: 100%;
            width: 200px;
        }

/******************************************************************************/
/* Breadcrumbs */
.breadcrumbs {
    font: 400 13px/120% "Kanit", Arial, sans-serif;
    height: 42px;
    padding: 12px 0 0 0;
}

    .breadcrumbs span,
    .breadcrumbs a {
        color: #FFF;
        display: inline-block;
        padding: 0 0 0 0.5em;
    }

.breadcrumbs.dark span,
.breadcrumbs.dark a {
    color: #000;
}

    .breadcrumbs.dark a:hover,
    .breadcrumbs a:hover {
        color: #ca3e2f;
    }

.breadcrumbs a:after {
    content: url("../images/icons/png/breadcrumbs-arrow-white.png");
    display: inline-block;
    margin-left: 0.8em;
}

.breadcrumbs a.ico-home-black:after {
    content: url("../images/icons/png/breadcrumbs-arrow-black.png");
    display: inline-block;
    margin-left: 0.8em;
}

.breadcrumbs.dark a:after,
.breadcrumbs a.black:after {
    content: url("../images/icons/png/breadcrumbs-arrow-black.png");
    display: inline-block;
    margin-left: 0.8em;
}

.breadcrumbs a:last-child {
    text-decoration: underline;
}

    .breadcrumbs a:last-child:after {
        content: '' !important;
    }

.breadcrumbs a.ico-home {
    background-image: url("../images/icons/png/home-white.png");
    background-repeat: no-repeat;
    padding-left: 18px;
}

.breadcrumbs.dark a.ico-home,
.breadcrumbs a.ico-home-black {
    background-image: url("../images/icons/png/home-black.png");
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 18px;
}

/******************************************************************************/
/* Baner Te Ayudamos */
.banner-wide {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 404px;
    width: 100%;
    background: linear-gradient(to top, #d8d8d8 0%, #d8d8d8 80%, #fff 80%, #fff 100%);
    margin-top: 60px;
}

    .banner-wide > img {
        max-width: 380px;
        max-height: 297px;
        padding-right: 20px;
    }

    .banner-wide div {
        align-self: center;
        text-align: center;
        padding-left: 20px;
        margin-bottom: -35px;
    }

        .banner-wide div h5 {
            font-size: 40px;
            font-weight: 600;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: 0.26px;
            color: #cb0000;
            margin: 4px 0;
        }

        .banner-wide div p {
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.3;
            letter-spacing: 0.13px;
            color: #4a4a4a;
        }

/******************************************************************************/
/* Google Rating */
#producto .google-rating {
    padding: 0;
    background-color: transparent;
    width: min-content;
    margin: 0 0 0 auto;
}

    #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] a.ti-header:hover {
        transform: scale(1.01);
        box-shadow: #000 0px 4px 8px;
    }

    #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] a.ti-header:active {
        box-shadow: #000 0px 4px 8px;
        transform: scale(.99);
    }

    #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] {
        width: fit-content !important;
    }

        #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] > .ti-widget-container > .ti-header {
            background-color: #fff !important;
            border-radius: 10px;
            padding: 10px 28px;
        }

        #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-large-logo {
            height: 25px;
            margin-bottom: 1px !important;
        }

            #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-large-logo img {
                max-width: 78px !important;
                max-height: 39px !important;
                margin: auto !important;
            }

        #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-stars {
            margin-top: 0px !important;
        }

            #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-stars .ti-star {
                width: 18px !important;
                height: 18px !important;
            }

        #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-rating {
            background-color: transparent !important;
            font-size: large !important;
            color: #FFB94B !important;
        }

        #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-text {
            font-size: smaller !important;
            text-align: center !important;
        }

#distributiva .google-rating {
    background-color: #ececec
}

.google-rating {
    padding: 20px 0px 0px 0px;
    background-color: #ffffff;
    margin: 0px auto auto auto;
    max-width: 960px;
    width: 100%;
}

    .google-rating.parrilla.google-column {
        display: block;
    }

    .google-rating.parrilla.google-row {
        display: none;
    }

    .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] a.ti-header:hover {
        background-color: transparent !important;
        border: none !important;
    }

    .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'][data-pid='86a3fa310c36734b8946794d4fa'] .ti-widget-container {
        margin-top: 0px !important;
    }

    .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-widget-container {
        margin-bottom: 0px !important;
    }

    .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-large-logo img {
        max-width: 110px !important;
        max-height: 55px !important;
        margin: auto !important;
    }

    .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-stars {
        margin-top: 6px !important;
    }

        .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-stars .ti-star {
            width: 28px !important;
            height: 28px !important;
        }

    .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-rating {
        background-color: transparent !important;
        font-size: xx-large !important;
        color: #FFB94B !important;
    }

    .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-text {
        font-size: small !important;
        text-align: center !important;
    }

    .google-rating.distributiva {
        padding: 0px;
        background-color: #f3f3f3;
        margin: 25px auto auto auto;
    }

    .google-rating.parrilla {
        padding: 0px 0px;
        background-color: #fff;
        margin: auto auto auto auto;
        max-width: 100%;
    }

        .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] > .ti-widget-container > .ti-header, .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] > .ti-widget-container > .ti-footer {
            padding: 10px !important;
        }

        .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-large-logo {
            margin-bottom: 0px !important;
            height: 20px !important;
        }

            .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-large-logo img {
                max-width: 70px !important;
                max-height: 35px !important;
            }

        .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-stars {
            margin-top: 1px !important;
        }

            .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-stars .ti-star {
                width: 16px !important;
                height: 18px !important;
            }

        .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-rating {
            background-color: transparent !important;
            font-size: large !important;
            color: #FFB94B !important;
        }

        .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-text {
            font-size: smaller !important;
            margin-top: -7px !important;
        }

@media only screen and (max-width: 1024px) {
    /******************************************************************************/
    /* Titulos */
    .titulo {
        padding: 0 0 0 30px;
    }

        .titulo.centrado {
            padding: 0 20px;
        }

    /******************************************************************************/
    /* Slider */
    /* Slider con flechas de dirección según tamaño*/
    .slider-tablet {
        position: relative;
    }

        .slider-tablet .slide-item {
            position: absolute;
            visibility: hidden;
            opacity: 0;
        }

        .slider-tablet ~ .next-arrow,
        .slider-tablet ~ .prev-arrow,
        .slider-tablet ~ .slide-index {
            display: block;
        }

    /******************************************************************************/
    /* Breadcrumbs */
    .breadcrumbs {
        padding-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    /******************************************************************************/
    /* Slider */
    /* Slider con flechas de dirección según tamaño*/
    .slider-mobile {
        position: relative;
    }

        .slider-mobile .slide-item {
            position: absolute;
            visibility: hidden;
            opacity: 0;
            /*transform: translateX(-100vw);*/
        }

            .slider-mobile .slide-item.prev {
                /*visibility: hidden;
                opacity: 0;
                max-width: 0px !important;
                transform: translateX(-100vw);*/
                /*transition: transform 1000ms ease-in-out, opacity 1500ms ease-in, visibility 1500ms ease-in, max-width 1500ms ease-in;*/
            }

            .slider-mobile .slide-item.next {
                /*visibility: hidden;
                opacity: 0;
                max-width: 0px !important;
                transform: translateX(100vw);*/
                /*transition: transform 1000ms ease-in-out, opacity 1500ms ease-in, visibility 1500ms ease-in, max-width 1500ms ease-in;*/
            }

            .slider-mobile .slide-item.active {
                /*visibility: visible;
                opacity: 1;
                max-width: 1000px !important;*/
                /*transform: translateX(0px);*/
                /*transition: transform 1000ms ease-in-out, opacity 500ms linear, visibility 500ms linear, max-width 500ms linear;*/
            }

        .slider-mobile ~ .next-arrow,
        .slider-mobile ~ .prev-arrow,
        .slider-mobile ~ .slide-index {
            display: block;
        }

    /******************************************************************************/
    /* Breadcrumbs */
    .breadcrumbs {
        display: none;
    }

    /******************************************************************************/
    /* Baner Te Ayudamos */
    .banner-wide {
        flex-direction: column;
        align-items: center;
        height: 572px;
        background: linear-gradient(to top, #d8d8d8 0%, #d8d8d8 65%, #fff 65%, #fff 100%);
        margin-top: 0;
        padding: 0 10px;
    }

        .banner-wide div {
            padding-left: 0;
            margin-bottom: -20px;
        }

            .banner-wide div p {
                margin-bottom: 30px;
            }

    /******************************************************************************/
    /* Google Rating */
    #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] {
        width: 100% !important;
    }

        #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] > .ti-widget-container > .ti-header {
            background-color: #fff !important;
            border-radius: 0;
            padding: 0;
            margin: 20px auto;
        }

        #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-rating {
            background-color: transparent !important;
            font-size: xx-large !important;
            color: #FFB94B !important;
        }

        #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-stars .ti-star {
            width: 28px !important;
            height: 28px !important;
        }

        #producto .google-rating .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-text {
            font-size: small !important;
            text-align: center !important;
        }

    .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
    }

    .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] > .ti-widget-container > .ti-header, .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] > .ti-widget-container > .ti-footer {
        margin: 5px auto;
        padding: 10px 0px 6px 0px !important;
    }

    .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-large-logo {
        width: 84px;
        margin: -6px -5px 0px 0px !important;
    }

    .google-rating.parrilla .ti-widget[data-layout-id='56'][data-set-id='light-minimal-large'] .ti-text {
        margin: 0px 0px 1px 5px !important;
    }
}

@media only screen and (max-width: 320px) {
    /******************************************************************************/
    /* Titulos */
    .titulo {
        padding: 0 0 0 20px;
    }
}
