/* TIPOGRAFIES */

/*CALLIE HAND*/
@font-face {
    font-family: "Callie_Hand";
    src: url('/fonts/Callie_Hand-Trial_Version.otf') format('opentype');
}

/*END CALLIE HAND*/

/*ASTORIA*/
@font-face {
    font-family: "Astoria Ckassic Sans Medium";
    src: url('/fonts/Astoria_Classic_Sans_Medium.otf') format('opentype');
}

/*END ASTORIA*/


/*AUDREY I VARIANTS */
@font-face {
    font-family: "Audrey-Bold";
    src: url('/fonts/Audrey-Bold.otf') format('opentype');
}

@font-face {
    font-family: "Audrey-Bold-Oblique";
    src: url('/fonts/Audrey-BoldOblique.otf') format('opentype');
}

@font-face {
    font-family: "Audrey-Medium";
    src: url('/fonts/Audrey-Medium.otf') format('opentype');
}

@font-face {
    font-family: "Audrey-MediumOblique";
    src: url('/fonts/Audrey-MediumOblique.otf') format('opentype');
}

@font-face {
    font-family: "Audrey-Normal";
    src: url('/fonts/Audrey-Normal.otf') format('opentype');
}

@font-face {
    font-family: "Audrey-NormalOblique";
    src: url('/fonts/Audrey-NormalOblique.otf') format('opentype');
}


/* EUROFENCE I VARIANTS */
@font-face {
    font-family: "Eurofurence Light";
    src: url('/fonts/eurof35.ttf') format('truetype'), url('/fonts/Eurofurencelight.woff') format('woff');
}

@font-face {
    font-family: "Eurofurence Light Italic";
    src: url('/fonts/eurof36.ttf') format('truetype'), url('/fonts/Eurofurencelightitalic.woff') format('woff');
}

@font-face {
    font-family: "Eurofurence Regular";
    src: url('/fonts/eurof55.ttf') format('truetype'), url('/fonts/Eurofurenceregular.woff') format('woff'), url(/fonts/eurof55.otf) format('opentype');
}

@font-face {
    font-family: "Eurofurence Italic";
    src: url('/fonts/eurof56.ttf') format('truetype'), url('/fonts/Eurofurenceitalic.woff') format('woff');
}

@font-face {
    font-family: "Eurofurence Bold";
    src: url('/fonts/eurof75.ttf') format('truetype'), url('/fonts/Eurofurencebold.woff') format('woff');
}

@font-face {
    font-family: "Eurofurence Bold Italic";
    src: url('/fonts/eurof76.ttf') format('truetype'), url('/fonts/Eurofurencebolditalic.woff') format('woff');
}


/* MODNY */


@font-face {
    src: url('/fonts/font.eot');
    font-family: 'ModnySemiBold';
    src: url('/fonts/font.woff2') format('woff2'), url('/fonts/font.woff') format('woff'), url('/fonts/font.eot?#iefix') format('embedded-opentype'), url('/fonts/font.ttf') format('truetype');
}

.callie {
    font-family: Callie_Hand;
}

.astoria {
    font-family: Astoria Ckassic Sans Medium;
}

.audrey-b {
    font-family: Audrey-Bold;
}

.audrey-bo {
    font-family: Audrey-Bold-Oblique;
}

.audrey-m {
    font-family: Audrey-Medium;
}

.audrey-mo {
    font-family: Audrey-MediumOblique;
}

.audrey {
    font-family: Audrey-Normal;
}

.audrey-o {
    font-family: Audrey-NormalOblique;
}

.euro {
    font-family: Eurofurence Regular;
}

.euro-i {
    font-family: Eurofurence Italic;
}

.euro-b {
    font-family: Eurofurence Bold;
}

.euro-l {
    font-family: Eurofurence Light;
}

.euro-li {
    font-family: Eurofurence Light Italic;
}

.euro-bi {
    font-family: Eurofurence Bold Italic;
}

.modny {
    font-family: ModnySemiBold;
}

/* END TIPOGRAFIES */


html {
    min-height: 100%;
    position: relative;
}

body {
    font-family: Eurofurence Regular !important;
}

.legal > div > div > p {
    font-size: 18px !important;
}

.legal > div > div > p > a {
    font-weight: bold;
    color: #727272 !important;
}

.fs-20 {
    font-size: 20px !important;
}

.pt-6 {
    padding-top: 6rem !important;
}

.py-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.fs-16 {
    font-size: 16px !important;
}

/*
gris clar : #727272

gris fosc: #3A3B36
*/
.grey-light {
    color: #727272 !important;
}

.grey-dark {
    color: #3A3B36 !important;
}

.bg-light {
    background-color: #727272 !important;
}

.bg-dark {
    background-color: #3A3B36 !important;
}

.bglight {
    background-color: #EFEFEF !important;
}

.white {
    color: #FFFFFF;
}

.italic {
    font-style: italic;
}

.grey-txt {
    color: #838080 !important;
}

.bg-g-dark {
    background-color: #3A3B36 !important;
}

/*.m-content{
    margin-top: 100px;
    margin-bottom: 100px;
}*/

.bg-grey {
    background-color: #EDEDED;
}

/*clar*/
.grey1 {
    color: #777776 !important;
}

/*fosc*/
.grey2 {
    color: #1D1D1B !important;
}

/*molt clar*/
.grey3 {
    color: #3A3B36 !important;
}

.title-grey {
    color: #8E8E8D !important;
}

.container-fluid {
    /* margin-top: 80px;*/
    padding-right:: 0px !important;
    padding-left:: 0px !important;
}


/*.container-fluid {
    padding-right: 100px !important;
    padding-left: 100px !important;
}*/
.w-99 {
    width: 99% !important;
}

.w100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.w-80 {
    width: 80%;
}

.w-60 {
    width: 60%;
}

/* HEADER */
#header {
    background: #3A3B36;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    font-size: 18px !important;
}

#header.fixed {
    background: #3A3B36;
    /*height: 75px;*/
    position: fixed;
    z-index: 9997;
}

.mt-68 {
    margin-top: 68px !important;
}

.main-nav {

    text-transform: uppercase;
}

.main-nav a {
    text-align: center;
    color: #fff !important;
}

.main-nav:hover .main-nav > div.active, .main-nav > div.active.open {
    border-bottom: 2px solid #fff;
    font-weight: 500 !important;
}

.main-nav > div > a:hover {
    text-decoration: unset !important;
}

#langs_nav a {
    color: #727272;
}

/*
.main-nav > div > a:hover{
    border-bottom: 2px solid #fff !important;
}
*/

.h-btn-shop {
    background-color: #fff !important;
    color: #3A3B36 !important;
    border-radius: 0px !important;
    margin-left: -35px !important;
    margin-right: -35px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.white-btn {
    background-color: #fff !important;
    color: #3A3B36 !important;
    border-radius: 0px !important;

}

.img-m {
    margin-left: 5px;
}

#nav-families {
    position: absolute;
    top: 103%;
    left: 0%;
    justify-content: normal;
    margin-right: -50%;
    z-index: -10
}

.item-fam {
    /* padding: 15px 30px; */
    padding: 18px 55px 18px 15px !important;
    background: #9e9c9b;
    border-bottom: 1px solid white;
    text-align: left;
}

.item-fam:hover {
    /* background: #3A3B36; */
}

#nav-families a:hover {
    text-decoration: none !important;
    font-weight: bold;
}

.nav-sub {
    position: absolute;
    left: 100%;
    top: 0;
    justify-content: normal;
    margin-right: -50%;
    z-index: -10;
    width: 100%;
}

.item-sub {
    padding: 15px 30px;
    background: #D8D8D7;
    border-bottom: 1px solid white;
    text-align: left;
    color: black;
    text-transform: capitalize;
}

.nav-sub a:hover {
    text-decoration: none !important;
    font-weight: bold;
}

.nav-fam-xs {
    list-style-type: none !important;
    color: #727272 !important;
    padding: 0px !important;
    font-size: 16px;
}

.txt-sub {
    text-decoration: none !important;
    color: #727272 !important;
}

.txt-sub:hover, .txt-sub:active, .txt-sub:focus {
    text-decoration: none !important;
    color: #ffffffcc !important;
}


.nav-sub_xs {
    list-style-type: none !important;
    color: #727272 !important;
    padding: 0px !important;
    font-size: 14px;
}

/* END HEADER */


/* NAV */
#navbar {
    height: 70px !
}

.navbar-nav li > a {
    color: #fff;
    /*opacity: 0.5;*/
    font-weight: 100;
    opacity: 1 !important;
    transition: background-color .2s, color .2s;

&
:hover,

&
:focus {
    background-color: #333;
    color: #fff;
}

}

.navbar-nav {
    text-align: center;
    text-transform: uppercase;
}

.navbar-nav:hover .navbar-nav > li.active, .navbar-nav > li.active.open {
    border-bottom: 2px solid #fff;
    font-weight: 500 !important;
}

.navbar-nav:hover .navbar-nav > li.active a, .navbar-nav > li.active.open a {
    font-weight: 500 !important;
}

.logo {
    /*top: 10px;*/
    left: 20px;
}

.logo-menu {
    position: absolute !important;
    left: 25%;
}

/* END NAV */


/* LANGS NAV */

#langs-nav .lang_actiu {
    color: #fff !important;
}

#langs-nav {
    font-weight: 300;
    /*position: absolute;
    right: 35px;
    top: 25px;
    z-index: 10;
    font-size: 18px;*/
    position: relative;
    text-align: center;
    /*per posar-los un sota l'altre
    display: inline;*/
    list-style-type: none;
    text-transform: uppercase;
    display: -webkit-inline-box;
}

#langs-nav li {
    color: #727272 !important;
    line-height: 20px;
    padding-left: 2px;
}

#langs-nav li a {
    color: #727272 !important;
    text-decoration: none;
    opacity: 1;
    font-weight: 200;
    /*margin: -4px;*/
}


#langs-nav li a:hover {
    text-decoration: none;
    color: #fff;
}

/*#header.fixed #langs-nav {
    top: 8px;
}*/
/* END LANGS NAV */


/*POP UP HOME*/
/*#col_left_popup:hover {
    
}
*/

.b-2 {
    border: 2px solid #fff !important;
}

.btn-visit-red {
    border-radius: 0px !important;
    width: 15%;
    background-color: #eb2029 !important;
    color: #fff !important;
}

.btn-visit-grey {
    border-radius: 0px !important;
    width: 15%;
    background-color: #3A3B36 !important;
    color: #fff !important;
}

.popup-l, .popup-r {
    color: black;
    z-index: 1;
    visibility: hidden;
    text-align: center;
    /*background-color:  black !important;*/
    display: inline-block;
    position: absolute;
    overflow: hidden;
    vertical-align: center;
    max-width: 100%;
    /*width: 100%;
    left: 0;
    top: 0;
    height: 100%;*/
    align-self: center;
    width: 100%;
}

#col_left_popup:hover .popup-l {
    visibility: visible;
    color: #fff !important;
}

#col_right_popup:hover .popup-r {
    visibility: visible;
    color: #fff !important;
}

.px-15 {
    padding-right: 15rem;
    padding-left: 15rem;
}

/*END POP UP HOME*/


/* SLIDER */
/*.carousel-item {
    height: 600px !important;
}*/
.carousel-indicators li {
    width: 10px !important;
    height: 10px !important;
    border-radius: 100% !important;
}

#main-info {
    position: absolute;
    top: calc(50% - 150px);
    /* bottom: 0; */
    left: calc(50% - 150px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    flex-direction: column;
    justify-content: center;
    resize: vertical;
    font-size: 40px;
    line-height: 42px;
    width: 300px;
    height: 300px;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

/* END SLIDER */


/* FOOTER */
.footer > div > div > p {
    font-size: 16px !important;
}

.footer > div > div > div > p {
    font-size: 16px !important;
}

#footer {
    bottom: 0;
    width: 100%;
    position: absolute;
    height: 10px;
    /*background-color: #f5f5f5;*/
    font-size: 16px !important;
}

.footer-block {
    margin: 20px 0px 0px 0px;
}

.logos-footer {
    background-color: #FFFFFF;
    /*height: 50px;*/
}

.footer {
    background-color: #3A3B36;
    color: #FFFFFF;
    padding-top: 30px;
    padding-bottom: 30px;
}

.work:hover {
    color: #727272 !important;
    text-decoration: none !important;
}


.list {
    list-style-type: none;
    padding-left: 0px;
}

.list li {
    display: inline-block;
    list-style: outside none none;
    float: left;
}

.list li a {
    text-decoration: none;
}

.social_media {
    text-align: center;
    list-style-type: none;
}

.social_media li {
    color: #fff;
    line-height: 20px;
    padding-left: 2px;
    display: inline-block;
    list-style: outside none none;
    margin: 0 3px 3px 3px;
    padding: 2px;
    width: 30px;
    float: left;
}

.social_media li a {
    text-decoration: none;
}

.social_media li a:hover {;
}

.f-links {
    color: #838080 !important;
}

.f-info {
    margin-bottom: 30px;
}

.nav-legal {
    list-style-type: none;
    padding: 0px;
}

.nav-legal li {
    display: inline;
}

.nav-legal li {
    color: #838080 !important;
}

.m-top20 {
    margin-top: 20px;
}

.input-mail {
    width: 50%;
    padding-left: 5px;
    display: block;
    /*width: 100%;*/
    height: calc(1.5em + 0.75rem + 2px);
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
}

.btn-go {
    color: black !important;
    background-color: #8F8C8C !important;
    border-radius: 0px !important;
    font-size: 14px !important;
}

.img-download {
    margin-bottom: 10px
}

/* END FOOTER */

/*HOME*/
.title-home {
    margin-top: 50px;
    margin-bottom: 30px;
}

.prod {
    height: 220px !important;
}

.prod-grey {
    text-align: center;
    /*background-color: #3C3C3B;*/
    /* background: linear-gradient(to right, #3c3c3b 50%, #272727); */


    /* BANDA DRETA
    background: linear-gradient(to right, #3c3c3b 90%, #212121);*/

    /*DUES BANDES*/
    background: linear-gradient(to right, #212121, #3c3c3b, #3c3c3b, #3c3c3b, #212121);

    color: #FFFFFF;
    text-align: center;
    padding: 10px;
}

.prod-white {
    text-align: center;
    background-color: #F6F6F5;
    color: #3C3C3B;
    text-align: center;
    padding: 10px;
}

.title-prod {
    text-transform: uppercase;
    color: #fff !important;
    /*overflow-wrap: break-word;
    overflow-wrap: anywhere;*/
    word-break: break-word;
    /*-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;*/
}

.title-prod2 {
    text-transform: uppercase;
    color: #fff !important;
}

.btn-grey {
    background-color: #3A3B36 !important;
    color: #FFFFFF !important;
    padding: 5px 15px !important;
    border-radius: 0px !important;
}

.btn-white {
    background-color: #3A3B36 !important;
    color: #3C3C3B !important;
    padding: 5px 15px !important;
    border-radius: 0px !important;
    padding: 5px 15px !important;
}


.arrow-left {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #3C3C3B;
    position: absolute;
    left: -15px;
    top: 40%;
}

.arrow-white {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #F6F6F5;
    position: absolute;
    left: -15px;
    top: 40%;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #3C3C3B;
    position: absolute;
    top: 40%;
    left: 100%;
}

.arrow-right-white {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #F6F6F5;
    position: absolute;
    top: 40%;
    left: 100%;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #FFFFFF;
    position: absolute;
    left: 49%;
    /*top: 116%;*/
}

.a-d {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #3C3C3B transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 45%;
    z-index: 100;

}


.zoom:hover {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05);
    z-index: 1000;
    overflow: hidden;
}

.sfam-home {
    color: white;
    padding: 10px;
    z-index: 1;
    visibility: hidden;
    text-align: center;
    /* background-color:  #727272ad !important; */
    background-color: #3c3c3cc4 !important;
    display: inline-block;
    position: absolute;
    overflow: hidden;
    vertical-align: top;
    max-width: 100%;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
}

.sfam-list {
    list-style-type: none !important;
    padding: 0px !important;
}

.sfam-list a {
    color: white !important;
    text-decoration: none !important;
}

.sfam-list a:hover {
    font-weight: bold;
}

.zoom:hover .sfam-home {
    visibility: visible;
}

.cickable:hover {
    cursor: pointer;
}

.cickable > a:hover {
    text-decoration: none !important;
}

.wrap_familia {
    padding: 3px;
}

.first_familia {
    padding-left: 0px !important;
}

.last_familia {
    padding-right: 0px !important;
}

.wrap_familia > div > h6 {
    font-size: 13px !important;
}

.wrap_familia > div > p {
    font-size: 18px !important;
}

/*END HOME*/

/*NOSALTRES*/
.img-emporda {
    /*position: absolute;
    right: 0%;
    top: 3%;*/
    height: 146px;
    top: -45px;
    position: absolute;
}

#reconeixements {
    height: 120px !important;
    padding: 0px 70px;
}

.txt-year {
    color: #BBBBBA;
}

.shadow-inside {
    box-shadow: inset 0 0.5rem 5rem rgba(0, 0, 0, 0.15) !important
}

.top-box {
    box-shadow: inset 0 31px 32px -20px rgba(0, 0, 0, 0.15);
}

.bg-grey-clar {
    background-color: #F2F4F5;
}

.img-background {
    /*background-image: url('/img/masia.png') !important;*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.h-150 {
    height: 150px !important;
}

.h-80 {
    height: 80px !important;
}

.bg-linia {
    background-image: url('/img/linia.png') !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 2px !important;
}

.close-popup {
    position: absolute;
    left: 95%;
    top: 3%;
    z-index: 1;
}

.fletxa {
    animation-name: pulse_fletxes;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes pulse_fletxes {
    0% {
        opacity: 100%;
    }
    50% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

/*END NOSALTRES*/


/*PRODUCTES*/
.btn-filtre {
    border-radius: 0px !important;
    background-color: #F6F6F5 !important;
    border: 1px solid #3C3C3B !important;
    color: #3C3C3B !important;
    width: 210px;
    margin: -1px;
    padding: 3px 16px 3px 16px !important;
}

.filtre-txt {
    color: #3C3C3B !important;
}

.btn-filtre-active {
    color: #fff !important;
    background-color: #3C3C3B !important;
    color: white !important;
}

.txt-active {
    color: #fff !important;
}

.btn-veure {
    background-color: none !important;
    color: #fff !important;
    border-radius: 0px !important;
    padding: 3px 25px !important;
    border: 1px solid #fff !important;
}

.descripcio {
    max-height: 50px !important;
    min-height: 40px !important;
    line-height: normal;
    color: #fff;
}

.fruites {
    background-color: #A37D92;
    text-align: center;
    padding: 10px;
}

.c-fruites {
    /*color: #411730 !important;*/
    /*text eurofurence bold*/
}

.melmelades {
    background-color: #E5B677;
    text-align: center;
    padding: 10px;
}

.c-melmelades {
    color: #6F2D1B !important;
}

.chutneys {
    background-color: #92A468 !important;
    text-align: center;
    padding: 10px;
}

.c-chutneys {
    color: #3E4A21 !important;
}

.gelees {
    background-color: #A37576 !important;
    text-align: center;
    padding: 10px;
}

.c-gelees {
    color: #4A2426 !important;
}

.fruitesc {
    background-color: #8D786E !important;
    text-align: center;
    padding: 10px;
}

.c-fruitesc {
    color: #463727 !important;
}

.salses {
    background-color: #B0966F !important;
    text-align: center;
    padding: 10px;
}

.c-salses {
    color: #62513C !important;
}

.img-subfamilies {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.img-fruites {
    background-image: url('/img/fruites_almivar.jpg') !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-mermeladas {
    background-image: url('/img/melmelades.jpg') !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-chutneys {
    background-image: url('/img/chutneys.jpg') !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-gelees {
    background-image: url('/img/gelees.jpg') !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-fruitesc {
    background-image: url('/img/fruites_cacau.jpg') !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-salses {
    background-image: url('/img/salses_mediterranies.jpg') !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.prod-center {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    text-align: center;
    height: 250px !important;
}

.prod-center-center {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
    height: 250px !important;
}

/*END PRODUCTES*/


/*SUBFAMILIES*/
.filtre-size {
    font-size: 20px !important;
}

.descripcio-subfamilia {
    font-size: 20px !important;
}

.m-text {
    font-size: 16px;
    margin: 0px !important;
}

#header_mermelades {
    position: relative;
    text-align: center;
}

.mermelades {
    position: absolute;
    top: 50%;
}

.container-header {
    position: relative;
    text-align: center;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.formats-disponibles {
    color: white;
    padding: 10px;
    z-index: 1;
    visibility: hidden;
    text-align: center;
    /*background-color: #E2B074 !important;*/
    /*  background-color:  #e2b074d6; */
    display: inline-block;
    position: absolute;
    overflow: hidden;
    vertical-align: top;
    max-width: 100%;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
}

.producte:hover .formats-disponibles {
    visibility: visible;
}

.btn-producte {
    background-color: #ffffff00 !important;
    color: #fff !important;
    padding: 5px 20px !important;
    border-radius: 0px !important;
    border: 2px solid #fff !important;
}

.img-pot {
    width: 20%;
}

.producte > div > div > div > div > p {
    font-size: 16px !important;
}

/*END SUBFAMILIES*/

/*FITXA PRODUCTE*/
.tipus {
    margin: 0px !important;
    letter-spacing: 2px;
}

.btn-grey-light {
    background-color: #D8D8D7 !important;
    color: #3A3B36 !important;
    border-radius: 0px !important;
    padding: 5px 20px !important;
}

/*END FITXA PRODUCTE*/

/*LLISTAT NOTICIES*/

.sh-inside-top {
    /*box-shadow: inset 0 20px 40px -26px rgba(0, 0, 0, 0.5);*/
    box-shadow: inset 0 20px 40px -10px rgba(0, 0, 0, 0.11);
}

.posbottom {
    top: 42px;
}

.ml-filtre {
    margin-left: -5px;
}

.mb-btn {
    margin-bottom: -20px;
}

.mt-center {
    margin-top: -41px;
}

.zindex1 {
    z-index: 1;
}

.zindex-1 {
    z-index: -1;
}

.num {
    color: #D1D1D0 !important;
}

.custom-select-cat {
    background-color: #3A3B36 !important;
    color: white !important;
    border-radius: 0px !important;
}

/*END LLISTAT NOTICIES*/


/*RESTAURACIÓ*/
#header_r {
    /*margin-top: -30px;*/
    position: relative;
    text-align: center;
    top: 50px;
}

.header_r {
    position: absolute;
    bottom: 10%;
}

.px-100 {
    padding-left: 100px;
    padding-right: 100px;
}

.w210 {
    width: 210px;
}

/*END RESTAURACIÓ*/

/*CONTACTAR*/
.input-contact {
    border: 0px solid #ffffff00 !important;
    border-radius: 0rem !important;
    border-bottom: 1px solid #1d1d1b !important;
    color: #1d1d1b !important;
    padding-left: 0px !important;
    padding-bottom: 0px !important;
    font-size: 20px !important;
}

.form-control::-webkit-input-placeholder {
    color: #1d1d1b !important;
    /*font-size: 1.2em; 
    font-style: italic; */
}

.msg {
    max-height: 150px !important;
    min-height: 100px !important;
}

.w120 {
    width: 120px;
}

.txt-formulari {
    font-size: 16px !important;
}

#formulari {
    font-size: 20px !important;
}

.btn-border-white {
    background-color: #fff !important;
    color: #3A3B36 !important;
    padding: 5px 15px !important;
    border-radius: 0px !important;
    border: 2px solid #3A3B36 !important;
    height: 70px !important;
}

.btn-border-grey {
    background-color: #3A3B36 !important;
    border: 2px solid #3A3B36 !important;
    color: #FFFFFF !important;
    padding: 5px 15px !important;
    border-radius: 0px !important;
    height: 70px !important;
}

/*END CONTACTAR*/

/* CATALEG */
.cataleg {
    color: #fff;
}

.cataleg:hover {
    color: #838080 !important;
    text-decoration: none;
}

.input-cataleg {
    background-color: #fff00000 !important;
    border: 0px solid #ffffff00 !important;
    border-radius: 0rem !important;
    border-bottom: 1px solid #ffffff !important;
    color: #ffffff !important;
    padding-left: 0px !important;
    padding-bottom: 0px !important;
    font-size: 20px !important;
}

.btn-fff {
    background-color: #fff !important;
    color: #3A3B36 !important;
    padding: 5px 15px !important;
    border-radius: 0px !important;
}

.input-cataleg::placeholder {
    color: #fff !important;
}

.close-form {
    position: relative;
    top: 10px;
    right: 10px;
    color: white;
    text-align: right;
}

#close:hover {
    cursor: pointer;
}

/* END CATALEG */

#myCarousel .list-inline, {
    white-space: nowrap !important;
    overflow-x: auto !important;
}

#myCarousel .carousel-indicators {
    position: static !important;
    left: initial !important;
    width: initial !important;
    margin-left: initial !important;
}


#myCarousel2 .carousel-indicators2 {
    /*position: static !important;
    left: initial !important;
    width: initial !important;
    margin-left: initial !important;*/
    text-indent: inherit !important;
}

#myCarousel .carousel-indicators > li {
    width: initial !important;
    height: initial !important;
    text-indent: initial !important;
}

#myCarousel .carousel-indicators > li img {
    opacity: 0.5 !important;
}

#myCarousel2 .carousel-indicators2 > li img {
    opacity: 1 !important;
}

#myCarousel .carousel-indicators > li.active img, #myCarousel2 .carousel-indicators2 > li.active img {
    opacity: 1 !important;
}

.list-inline-item:not(:last-child) {
    margin-right: 30px !important;
}

.gallery {
    height: 140px !important;
    list-style-type: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    position: relative;
}

.gallery li {
    /*background:red;*/
    width: 50px !important;
    height: 50px !important;
    /* 
    flex:40% !important;
    margin: 15px !important;*/
    margin-bottom: 15px;
}


/*COOKIES*/

.msgcookie {
    /*display: none;*/
    width: 100%;
    /* height: 70px; */
    background-color: #727272;
    position: absolute;
    z-index: 10002;
    font-size: 16px;
    top: 4px;
    position: fixed;
}

.close_alerta_cookie {
    margin-left: 20px;
    margin: 10px;
    float: right;
    display: block;
    padding: 8px;
    color: white;
}

#missatge_cookie {
    padding: 5px;
    color: white;
    margin: 10px;
    font-size: 16px;
}

#missatge_cookie > a {
    color: #3A3B36 !important;
    font-weight: bold;
}

/*END COOKIES*/


/*MARIDATGES*/
.prod-height {
    height: 335px !important;
}

.desc {
    /*min-height: 365px !important;*/
    min-height: 555px !important;
}

.m-disponible {
    background-color: #F7F7F7;
}

.mango {
    background-color: #1074BC !important;
}

.mango-op {
    background-color: #E8F1F9;
}

.tomaquet-op {
    background-color: #EEF4F8 !important;
}

.ceba-op {
    background-color: #F4EFF2;
}

.pebrot-op {
    background-color: #FAEEED;
}

.poma-op {
    background-color: #F3F6EF;
}

.pedro-op {
    background-color: #F6F4F1;
}

.gamba-op {
    background-color: #F7F0F0;
}

.boletus-op {
    background-color: #F6F2F2;
}

.height-85 {
    height: 85px !important;
}

.desc-maridatge {
    min-height: 225px;
}

.desc-foie {
    /*min-height: 170px;*/
    min-height: 280px;
}

.desc-carn {
    min-height: 250px;
}

.desc-aperitius {
    min-height: 310px;
}

/*END MARIDATGES*/

/*JFC*/

.jfc_animate {
    background-color: #3a3b36;
    animation-name: pulse_jfc_animate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.btn-jfc {
    /*  color: #FFFFFF !important; */
    /* padding: 5px 15px !important; */
    /*padding: 10px 20px !important;*/
    padding: 15px 25px !important;
    border-radius: 0px !important;
}

.fletxa-jfc {
    position: relative;
    animation-name: movey;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes movey {
    from {
        top: -50px;
    }
    to {
        top: 0px;
    }
}

@keyframes pulse_jfc_animate {
    0% {
        background-color: #3a3b36;
        color: #FFFFFF;
    }
    50% {
        background-color: #ffffffb8;
        color: #3a3b36;
    }
    100% {
        background-color: #3a3b36;
        color: #FFFFFF;
    }
}

/*END JFC*/


/*BOTIGUES*/
.c-white {
    color: white !important;
}

/*END BOTIGUES*/


/* OVERRIDE MAX SIZE */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .footer-subfamilia {
        font-size: 18px !important;
    }

    .prod-grey {
        min-height: auto !important;
    }

    .img-emporda {
        top: -30px !important;
        height: auto !important;
    }

    .px-15 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .fletxa {
        top: 178.5px !important;
    }

    #langs-nav {
        left: 0px;
    }

    #myTabContent, .myTabContent {
        min-height: 150px;
    }


}

/*Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
    .footer-subfamilia {
        font-size: 13px;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .prod-grey {
        min-height: 290px;
    }

    .pt-first-row {
        padding-top: 45px;
    }

    .txt-article {
        font-size: 20px !important;
    }

    .txt-article > button {
        font-size: 20px !important;
    }

    .carousel-control-prev {
        left: -20px !important;
    }

    .carousel-control-next {
        right: -20px !important;
    }

    .img-emporda {
        height: auto !important;
        max-width: 100%;
    }

    .footer-img {
        height: 50px !important;
    }

    .btn-jfc {
        padding: 10px 20px !important;
    }

    #fletxa_dreta {
        right: 0px !important;
        /*right:-8px !important;*/
    }

    #fletxa_esquerra {
        left: -13px !important;
    }

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {
    .footer-subfamilia {
        font-size: 12px;
    }

    /* .prod-grey{
         min-height: 215px !important;
     }*/
    .btn-visit-grey, .btn-visit-red {
        width: 80%;
    }

    .carousel-indicators > .list-inline-item > a > img {
        /*height: 18px !important;*/
        height: 40px !important;
    }


    .list-inline-item:not(:last-child) {
        margin-right: 10px !important;
    }

    .close-popup {
        top: 1% !important;
        left: 94% !important;
    }

    .img-emporda {
        height: 135px !important;
        top: -23% !important;
    }

    .list_container {
        padding-left: 15px !important;
        margin-left: 0px !important;
    }

    .px-footer {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }


}


/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {
    .txt-article {
        font-size: 13px;
    }

    .txt-article > button {
        font-size: 13px;
    }

    .img-subfamilies {
        height: 250px !important;
        min-width: 100% !important;
    }

    .m-content {
        margin-top: 50px !important;
    }

    .formats-disponibles, .btn-producte {
        font-size: 13px !important;
    }

    .prod-center {
        display: block;
    !important;
        flex-wrap: none !important;
        align-content: none !important;
        text-align: center;
        height: auto !important;
    }

    .navbar-nav:hover .navbar-nav > li.active, .navbar-nav > li.active.open {
        border-bottom: 0px solid #fff !important;
    }

    .navbar-nav:hover .navbar-nav > li, .navbar-nav > li > a {
        color: #727272;
    }

    .navbar-nav:hover .navbar-nav > li.active, .navbar-nav > li.active.open > a {
        color: #fff;
    }

    .px-15 p {
        font-size: 17px;
    }

    div > p {
        font-size: 18px;
    }

    .row-salses {
        min-height: 410px;
    }

    .title-prod {
        font-size: 28px !important;
    }

    .fletxa {
        top: 179px;
    }

    .desc-foie {
        min-height: 230px;
    }

    .desc-peix {
        min-height: 170px;
    }

    .desc-aperitius {
        min-height: 200px;
    }

    .desc-carn {
        min-height: 222px;
    }

    .px-jfc {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }


}

/* END OVERRIDE MAX SIZE */


/* OVERRIDE MIN SIZE */
/* Extra small devices (portrait phones, less than 576px)
    No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .px-15 {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #myTabContent, .myTabContent {
        min-height: 170px;
    }

    .mesinfo_maridatges {
        min-height: 260px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /*.prod-grey{
        min-height: 311px;
    }*/
    .pt-first-row {
        padding-top: 95px;
    }

    .img-producte {
        height: 40% !important;
        padding: 20px 0 20px 0 !important;
    }

    .carousel-control-prev {
        left: 10% !important;
    }

    .carousel-control-next {
        right: 10% !important;
    }

    .px-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .footer-img {
        height: 100px !important;
    }

    /*.prod-grey{
        min-height: 260px;
    }*/
    .px-15 {
        padding-right: 5rem;
        padding-left: 5rem;
    }

    .px-footer {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    #myTabContent, .myTabContent {
        min-height: 130px;
    }

    .mesinfo_maridatges {
        min-height: 225px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .m-content {
        margin-top: 67px !important;
    }

    .footer-subfamilia {
        font-size: 20px;
    }

    .txt-article {
        font-size: 20px;
    }

    .txt-article > button {
        font-size: 20px;
    }

    div > p {
        font-size: 20px;
    }

    .px-footer {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .row-salses {
        min-height: 480px;
    }

    .fletxa {
        top: 178px;
    }

    #fletxa_dreta {
        right: 0px !important;
    }

    #fletxa_esquerra {
        left: -14px !important;
    }

    .px-jfc {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

}

/* END OVERRIDE MIN SIZE */

@media (min-width: 1659px) {
    .fruites {
        padding-left: 30px;
        padding-right: 30px;
    }

    .desc-peix {
        min-height: 305px;
    }
}

@media (min-width: 2000px) {
    .sfam-list {
        font-size: 18px !important;
    }

    .desc-peix {
        min-height: 305px;
    }

    .desc-carn {
        min-height: 305px;
    }

}

@media (max-width: 1800px) {
    .title-prod {
        font-size: 21px;
    }

    .desc-foie {
        min-height: 310px;
    }

    .desc-carn {
        /*min-height: 235px;*/
        min-height: 280px;
    }

    .desc-peix {
        /*min-height: 200px;*/
        min-height: 340px;
    }

    .desc-aperitius {
        min-height: 310px;
    }

}


@media (max-width: 1660px) {
    .row-salses {
        min-height: 445px !important;
    }

    .fruites {
        padding-left: 10px;
        padding-right: 10px;
    }

    .height-85 {
        height: 60px !important;
        padding-left: 0px !important;
    }

    .pl-4 {
        padding-left: 0px !important;
    }

    .desc-peix {
        /*min-height: 370px;*/
        min-height: 410px;
    }

    .desc-foie {
        /*min-height: 340px;*/
        min-height: 370px;
    }

    .desc-carn {
        min-height: 312px;
    }

    .desc-aperitius {
        min-height: 370px;
    }
}

@media (max-width: 1500px) {
    .row-salses {
        min-height: 430px !important;
    }

    .btn-border-white {
        font-size: 18px !important;
    }

    .desc-carn {
        min-height: 340px;
    }

    .desc-aperitius {
        min-height: 400px;
    }

    .desc-peix {
        min-height: 400px;
    }

    #mes_info_tab {
        margin: 0px -25px;
    }
}

@media (max-width: 1400px) {
    .px-footer {
        font-size: 18px;
    }

    .row-salses {
        min-height: 400px !important;
    }

    .descripcio {
        font-size: 16px;
    }

    .btn-border-grey {
        padding: 5px 0px !important;
    }

    #langs-nav {
        left: -25px;
    }

    .desc-foie {
        /*min-height: 370px;*/
        min-height: 400px;
    }

    .desc-carn {
        min-height: 340px;
    }

    .desc-peix {
        min-height: 400px;
    }

    .desc-aperitius {
        min-height: 400px;
    }

    #mes_info_tab {
        margin: 0px -25px;
    }


    input, .input-botiga input::-webkit-input-placeholder {
        font-size: 17px !important;
        padding-right: 0px !important;
    }

    .input-botiga > option, #radiusSelect {
        font-size: 17px !important;
    }
}

@media (max-width: 1330px) {
    .footer-subfamilia {
        font-size: 16px;
    }

    .txt-article {
        font-size: 16px;
    }

    .btn-filtre {
        padding: 3px 12px 3px 12px !important;
    }

    .btn-border-white {
        font-size: 15px !important;
    }

    .tab-info {
        margin-left: -12px;
        margin-right: -12px;
    }

    .desc-foie {
        min-height: 400px;
    }

    .desc-carn {
        min-height: 370px;
    }

    .desc-aperitius {
        min-height: 430px;
    }

    .desc-peix {
        min-height: 450px;
    }

    #mes_info_tab {
        margin: 0px -55px;
    }
}

@media (max-width: 1200px) {
    .btn-border-white {
        font-size: 20px !important;
    }

    .desc-foie {
        min-height: auto;
    }

    .desc-carn {
        min-height: auto;
    }

    .desc-peix {
        min-height: auto;
    }

    .desc-aperitius {
        min-height: auto;
    }
}

@media screen and (max-width: 1200px) {
    /*.btn-border-white{
        font-size: 16px !important;
    }
    .desc-peix{
        min-height: 430px;
    }*/
}

@media (min-width: 1200px) and (max-width: 1200px) {
    .desc-peix {
        min-height: 450px;
    }

    .btn-border-white {
        font-size: 15px !important;
    }
}

@media (max-width: 1100px) {
    .footer-subfamilia {
        font-size: 15px !important;
    }

    .txt-article {
        font-size: 15px !important;
    }

    .row-salses {
        min-height: 370px !important;
    }
}

@media (max-width: 1024px) {
    .row-salses {
        min-height: 340px !important;
    }
}

@media (max-width: 980px) {
    .row-salses {
        min-height: 490px !important;
    }

    input, .input-botiga input::-webkit-input-placeholder {
        font-size: 20px !important;
    }

    .input-botiga > option, #radiusSelect {
        font-size: 20px !important;
    }
}


.a-btn {
    display: block;
    position: relative;
    transition: all .35s;
}

.a-btn:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #3A3B36;
    transition: all .35s;
}

.a-btn:hover {
    color: white !important;
}

.a-btn:hover:after {
    width: 100%;
}


/* Bounce To Right */
.hvr-bounce-to-right_grey, .hvr-bounce-to-right_white {
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.hvr-bounce-to-right_grey:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3A3B36;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-bounce-to-right_white:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-bounce-to-right_grey:hover, .hvr-bounce-to-right_grey:focus, .hvr-bounce-to-right_grey:active {
    color: white !important;
}

.hvr-bounce-to-right_white:hover, .hvr-bounce-to-right_white:focus, .hvr-bounce-to-right_white:active {
    color: #3A3B36 !important;
}

.hvr-bounce-to-right_grey:hover:before, .hvr-bounce-to-right_grey:focus:before, .hvr-bounce-to-right_grey:active:before, .hvr-bounce-to-right_white:hover:before, .hvr-bounce-to-right_white:focus:before, .hvr-bounce-to-right_white:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.nav-tabs .nav-link {
    color: #727272 !important;
    text-transform: uppercase !important;
    border-radius: 0px !important;
    border: none !important;
    padding: 0px 16px !important;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: black !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border: none !important;
    background-color: #fff0 !important;
}


.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border: none !important;
    color: black !important;

}

.bl-g-1 {
    border-left: 1px solid #727272 !important;
}

.br-g-1 {
    border-right: 1px solid #727272 !important;
}

.carousel-icons-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}

.carousel-icons-mobile ul li {
    margin: 10px;
}

.carousel-icons-mobile img {
    max-height: 60px;
    max-width: 60px;
}

/* Link shop component */
@keyframes fadeInAnimation {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.link-shop {
    position: relative;
    display: block;
    margin: 1rem auto 0 auto;
    animation: fadeInAnimation 5s infinite;
    max-width: 150px;
}

.link-shop img {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .link-shop {
        margin: 0;
        position: absolute;
        z-index: 100;
        top: 2rem;
        right: 2rem;
        max-width: 300px;
    }
}