/* Base */

@font-face {
    font-family: 'Noto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/NotoSans-Regular.woff2) format('woff2');
}
  
@font-face {
    font-family: 'Noto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/NotoSans-Bold.woff2) format('woff2');
}

@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/Saira-ExtraBold.woff2) format('woff2');
}

@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/Saira-ExtraBoldItalic.woff2) format('woff2');
}

html,
body {
    font-family: 'Noto', sans-serif, arial, verdana;
    font-weight:400;
    font-size: 100%;
    line-height: 1.625rem;
    color: #000;
    margin: 0;
    padding: 0 !important;
    overflow-x: hidden;
    transition: all .2s;
    background-color: #CD001A;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset
}

::selection {
    background-color: rgba(255, 238, 0, 0.25);
    text-shadow: none
}

a {
    color: #CD001A;
    text-decoration: none;
    transition: all .2s;
}

a:hover,
a:focus {
    color: #CD001A;
    transition: all .2s;
    text-decoration: underline;
}

a:focus {
    outline: none;
}

input,
button {
    outline: none
}

select {
    /*-webkit-appearance: none;
  -moz-appearance: none;*/
    text-indent: 1px;
    text-overflow: '';
}

select::-ms-expand {
    display: none;
}

/* Slick slider */

.slick-arrow {
    position: absolute;
    border: 0;
    width: 24px;
    height: auto;
    top:50%;
    transform: translateY(-50%);
    font-size: 0;
    z-index: 1;
}

.slick-next {
    right: 1rem;
    background: transparent url(../images/icon-next.svg) center no-repeat;
}

.slick-prev {
    left: 1rem;
    background: transparent url(../images/icon-prev.svg) center no-repeat;
}

.slick-dots {
    list-style: none;
    padding: 0;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    font-size: 0;
    line-height: 14px;
    margin: 0;
}

.slick-dots li {
    display: inline-block;
    background-color: transparent;
}

.slick-dots li button {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 .25rem;
    border: 1px solid #fff;
    border-radius: 2px;
    font-size: 0;
    background-color: transparent;
    padding: 0;
    box-sizing: border-box;
}

li.slick-active button {
    background-color: #fff;
}

/* Bootstrap modifications */

.navbar {
    padding: 0;
}

.navbar-collapse {
    position: fixed;
    width: 276px;
    z-index: 10;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    height: auto !important;
    max-height: 1000px;
}

.collapse:not(.show) {
    display: block;
}

.navbar-collapse {
    top: 200vh;
    transition: all .3s ease;
}

.navbar-collapse.collapsing,
.navbar-collapse.show {
    display: block;
    overflow: visible;
    top: 54%;
    transition: all .3s ease;
}

.navbar-nav {
    border-top: 1.4px solid #fff;
    border-top: 0;
    margin-top: -1rem;
}

.navbar-nav::before {
    position: absolute;
    content: "MENÜ";
    font-family: 'Saira', sans-serif, arial, verdana;
    text-transform: uppercase;
    color: #FBCE17;
    right: 0;
    top: -26px;
    font-size: 18px;
}

.navbar-nav .svg {
    width: 16px;
    height: auto;
    margin-right: .5rem;
    position: relative;
    top: -1px;
}

.navbar-nav .nav-link .svg:nth-child(2) {
    position: absolute;
    right: 0;
    top:50%;
    transform: translateY(-50%);
    margin: 0;
}

.nav-link {
    color: #fff;
    font-family: 'Saira', sans-serif, arial, verdana;
    text-transform: uppercase;
}

.nav-link:focus, .nav-link:hover {
    color: #fff;
    text-decoration: none;
    background-color: #AB2328;
}

.nav-link:focus {
    background-color: transparent;
}

.navbar-nav>li {
    border-bottom: 1.4px solid #fff;
    position: relative;
}

.navbar-nav>li:last-of-type {
    border: 0;
}

.drop-menu {
    display: none;
    list-style: none;
    padding: 0 0 0 1.5rem;
    margin: -.3rem 0 .5rem;
}

@media (max-height:659.98px) {
    
    .drop-menu {
        display: block;
        max-height: 160px;
        overflow-y: scroll;
    }
    
}

.drop-menu a {
    color: #fff;
    font-family: 'Saira', sans-serif, arial, verdana;
    display: block;
    padding: .1rem 0;
}

.drop-menu a:hover {
    color: #FBCE17;
    text-decoration: none;
}

.btn {
    font-family: 'Saira', sans-serif, arial, verdana;
    font-size: 18px;
    text-transform: uppercase;
    border-radius: .5rem;
    padding: 0 2.5rem;
    transition: all .2s ease;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    border: 0;
}

.btn:hover {
    text-decoration: none;
    transition: all .2s ease;
}

.btn-sm {
    height: 36px;
    font-size: 16px;
    padding: 0 .8rem;
}

.btn-primary {
    background: linear-gradient(180deg, #DA181B 20%, #62170F 100%);
    color: #fff;
}

.btn-primary:first-child:hover,
:not(.btn-check)+.btn-primary:hover,
.btn-primary:hover {
    background: linear-gradient(180deg, #DA181B 0%, #62170F 100%);
    color: #fff;
}

.btn-primary.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    background: linear-gradient(180deg, #DA181B 0%, #62170F 100%);
    color: #fff;
    box-shadow: none;
    text-decoration: none;
}

.btn-secondary {
    background: linear-gradient(180deg, #fcd992 20%, #f8a906 100%);
    color: #62170f;
}

.btn-secondary:first-child:hover,
:not(.btn-check)+.btn-secondary:hover,
.btn-secondary:hover {
    background: linear-gradient(180deg, #fcd992 0%, #f8a906 100%);
    color: #62170f;
}

.btn-secondary.focus,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
    background: linear-gradient(180deg, #fcd992 0%, #f8a906 100%);
    color: #62170f;
    box-shadow: none;
    text-decoration: none;
}

.form-control:focus {
    box-shadow: none;
}

/* Animated hamburger menu */

.navbar-toggler {
    border: 0;
    position: fixed;
    margin: 0;
    padding: 0;
    width: auto;
    opacity: 1;
    transition: all .2s;
    z-index: 103;
    left: calc(50% + 1320px / 2 - 84px);
    top: 30px;
    transform: scale(1.5) skew(0, -12deg);
}

.navbar-toggler .inline-svg,
.navbar-toggler .inline-svg rect {
    width: 40px;
    height: auto;
    position: relative;
}

.navbar-toggler .inline-svg path {
    fill: #CD001A;
    transition: all .2s;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

.svg-menu-toggle {
    fill: #CD001A;
    pointer-events: all;
    cursor: pointer;
    opacity: 1;
}

.svg-menu-toggle .bar {
    transform: rotate(0) translateY(0) translateX(0);
    opacity: 1;
    transform-origin: 20px 10px;
    transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
}

.svg-menu-toggle .bar:nth-of-type(1) {
    transform-origin: 20px 10px;
}

.svg-menu-toggle .bar:nth-of-type(3) {
    transform-origin: 20px 20px;
}

.svg-menu-toggle.active path {
    fill: #CD001A;
    opacity: 1;
    transition: all .2s;
}

.svg-menu-toggle.active .bar:nth-of-type(1) {
    transform: rotate(-45deg) translateY(0) translateX(0);
}

.svg-menu-toggle.active .bar:nth-of-type(2) {
    opacity: 0;
}

.svg-menu-toggle.active .bar:nth-of-type(3) {
    transform: rotate(45deg) translateY(0em) translateX(0em);
}

/* Site */

.svg path {
    transition: all .2s;
}

p {
    margin-bottom: 1.8rem;
}

b {
    font-weight: 900;
}

small {
    font-weight: 500;
    font-size: 100%;
}

.site {
    max-width: calc(1320px - 12px* 2);
    margin: 0 auto;
    box-shadow: 0 0 100px #CD001A;
    min-height: 100vh;
    background-color: #fff;
    overflow: hidden; /* Footer miatt kell */
}

.content {
    padding-top: 8rem;
    padding-bottom: 8rem;
    min-height: 90vh;
}

.content-padding {
    padding: 0 44px;
    margin: 0 -12px;
}

.box-shape {
    position: relative;
    width: 100%;
    min-height: 240px;
    background: black;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgb(0 0 0 / 35%);
    border-bottom: 3px solid rgb(0 0 0 / 25%);
    margin-top: -5%;
}

.box-shape>* {
    position: relative;
}

.box-shape::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    transform: skewY(-12deg);
    transform-origin: top left;
    border-radius: 10px;
}

h1 {
    color: #000;
    text-transform: uppercase;
    font-family: 'Saira', sans-serif, arial, verdana;
    font-size: 48px;
    margin: 0 0 2rem;
    transition: all .2s;
}

h2 {
    color: #000;
    text-transform: uppercase;
    font-family: 'Saira', sans-serif, arial, verdana;
    font-size: 32px;
    margin: 0 0 1rem;
    transition: all .2s;
}

h3 {
    color: #000;
    text-transform: uppercase;
    font-family: 'Saira', sans-serif, arial, verdana;
    font-size: 20px;
    margin: .5rem 0;
    transition: all .2s;
}

/* Header */

.logo-container {
    position: relative;
    margin-top: -60px;
}

.logo-bg {
    transform: skew(0, -12deg);
    background-color: #CD001A;
    width: 600px;
    height: 200px;
    position: absolute;
    top: -142px;
    left: -1px;
}

.logo-bg>img {
    position: absolute;
    left: 0;
    bottom: -15px;
}

header .logo {
    position: absolute;
    left: 44px;
    top: 40px;
    z-index: 1;
}

header .logo .svg {
    width: 210px;
    height: auto;
}

header .logo .svg:last-of-type {
    position: absolute;
    filter: brightness(0.5) grayscale(1) blur(9px);
    left: -8px;
    z-index: -1;
    top: -7px;
    opacity: .3;
}

#header-menu .box-shape {
    background-color: #CD001A;
    border: 1px solid rgb(0 0 0 / 50%);
    padding: 1rem 1rem 0.1rem;
    color: #fff;
}

#header-menu .box-shape::before {
    background-color: #CD001A;
    border: 1px solid rgb(0 0 0 / 50%);
    border-width: 1px 0 0;
}

/* Footer */

footer .container {
    position: relative;
    height: 3rem;
}

footer .container::before {
    width: 100%;
    height: 400px;
    background-color: #CD001A;
    position: absolute;
    top: -138px;
    left: 0;
    content: '';
    display: block;
    z-index: 0;
    transform: skewY(-12deg);
}

footer .container>img {
    position: absolute;
}

footer .container>img:nth-of-type(1) {
    left: 0;
    top: -20px;
}

footer .container>img:nth-of-type(2) {
    right: 0;
    top: -291px;
}
.footer-container {
    position: relative;
    color: #fff;
}

footer .logo {
    position: absolute;
    left: 24px;
    top: -60px;
    z-index: 1;
}

footer .logo .svg {
    width: 140px;
    height: auto;
}

.social {
    position: absolute;
    list-style: none;
    right: 32px;
    bottom: 40px;
    margin: 0;
    padding: 0;
}

.social li {
    display: inline-block;
}

.social li a {
    display: block;
    margin: 0 0 0 1rem;
}

.social li a:hover {
    text-decoration: none;
}

.social li .svg {
    width: auto;
    height: 32px;
}

.footer-menu {
    position: absolute;
    list-style: none;
    right: 32px;
    bottom: 0;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    display: inline-block;
}

.footer-menu li a {
    display: block;
    margin: 0 0 0 1rem;
    color: #fff;
}

.footer-menu li a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Main */

.content.page-main {
    padding: 0;
}

.main-hero h1,
.main-hero h2 {
    position: absolute;
    left:-9999px;
}

.hero-item {
    position: relative;
}

.hero-item .btn {
    position: absolute;
    right:3rem;
    bottom:3rem;
}

@media (max-width:767.98px) {
    
    .hero-item .btn {
        right: auto;
        left: 50%;
        margin: 0 auto;
        transform: translateX(-50%);
    }

}

/* Product */

.product-blackhole h1 {
    color: #fff;
}

body.page-product .site {
    /*background-color: var(--p_primary-bg);*/
    background: radial-gradient(circle at 33% 20vw, var(--p_secondary-bg) 8vw, var(--p_primary-bg) 46vw);
}

@media (max-width:767.98px) {

    body.page-product .site {
        background: radial-gradient(circle at center 55vw, var(--p_secondary-bg) 20vw, var(--p_primary-bg) 140vw);
    }

}

@media (min-width:768px) and (max-width:991.98px) {

    body.page-product .site {
        background: radial-gradient(circle at center 38vw, var(--p_secondary-bg) 12vw, var(--p_primary-bg) 90vw);
    }

}

@media (min-width:992px) and (max-width:1199.98px) {

    body.page-product .site {
        background: radial-gradient(circle at 25% 30vw, var(--p_secondary-bg) 8vw, var(--p_primary-bg) 45vw);
    }

}

@media (min-width:1200px) and (max-width:1399.98px) {

    body.page-product .site {
        background: radial-gradient(circle at 25% 20vw, var(--p_secondary-bg) 8vw, var(--p_primary-bg) 55vw);
    }

}

body.page-product .navbar-toggler .inline-svg path,
body.page-product .svg-menu-toggle.active path {
    fill: var(--p_menu);  
}

.p_intro {
    /*background: radial-gradient(circle at 33% 20vw, var(--p_secondary-bg) 8vw, var(--p_primary-bg) 46vw);*/
    margin: -9rem -3rem -3rem;
    padding: 6rem 3rem 16rem;
    background-size: cover;
}

.p_intro figure {
    position: relative;
}

.p_intro figure img {
    transition: transform 0.1s ease-out;
}

.p_intro figure img:not(:first-of-type) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
}

.p_intro h1 {
    color: var(--p_title);
    text-transform: uppercase;
    font-family: 'Saira', sans-serif, arial, verdana;
    font-size: 48px;
    margin: 0 0 .5rem;
}

.p_intro h1 + p {
    color: var(--p_highlight);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    max-width: 400px;
    margin: 0 auto 2rem;
}

.p_intro .p_cat,
.p_intro span {
    color: var(--p_highlight);
    font-family: 'Saira', sans-serif, arial, verdana;
    margin: 0;
    font-size: 20px;
}

.p_intro .p_cat {
    margin-top: -15%;
}

.p_intro .row ul {
    list-style: none;
    padding: 0;
    margin: .5rem auto 0;
    text-align: center;
    max-width: 300px;
}

.p_intro .row ul li {
    display: inline-block;
    color: var(--p_content);
    font-size: 9px;
    width: 20%;
}

.p_intro li .svg {
    display: block;
    width: 36px;
    height: auto;
    margin: 0 auto;
}

.p_intro li .svg path {
    fill: var(--p_content_icon1);
}

.p_intro li .svg g g:last-of-type {
    stroke: var(--p_content_icon2);
}

.p_intro .p_prev,
.p_intro .p_next,
.p_intro figure ul {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}

.p_intro .p_prev .svg,
.p_intro .p_next .svg {
    width: 24px;
    height: auto;
}

.p_intro figure .svg g g {
    stroke: var(--p_title);
}

.p_intro figure .svg g path {
    fill: var(--p_title);
}

.p_intro .p_prev {
    left:0;
}

.p_intro .p_next {
    right:0;
}

.p_intro .row figure ul {
    list-style: none;
    padding: 0;
    text-align: center;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    height: 14px;
    margin: 0 auto;
    font-size: 0;
}

.p_intro .row figure ul li {
    display: inline-block;
    text-indent: -9999px;
    width: auto;
}

.p_intro .row figure ul li a {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 .25rem;
    border: 1px solid var(--p_title);
    border-radius: 2px;
}

.p_intro .row figure ul li.actual a {
    background-color: var(--p_title);
}

.p_intro .row figure ul li.actual a:hover {
    background-color: var(--p_title);
    border-color: var(--p_title);
    text-decoration: none;
    cursor: default;
}

.p_details {
    color: var(--p_details);
    z-index: 1;
    padding: 2rem 4rem 4rem;
    text-align: left;
}

.p_details.box-shape,
.p_details.box-shape::before {
    background-color: var(--p_details_bg1);
}

.p_details h2 {
    color: var(--p_details);
    font-size: 32px;
}

.p_details>.row>div:first-of-type h2 {
    padding-top: 7rem;
}

.p_details>.row {
    margin-top: -10%;
}

.p_ingredients ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p_ingredients ul li {
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 3rem;
    position: relative;
}

.p_ingredients ul li:not(:last-child) {
    margin-bottom: 1rem;
}

.p_ingredients ul li .svg {
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}

.p_ingredients ul li .svg path,
.p_ingredients ul li .svg g g {
    stroke: var(--p_details);
}

.p_values {
    background-color: var(--p_details_bg2);
    border-radius: 10px;
    overflow: hidden;
}

.p_values table {
    font-size: 0;
    margin: 0;
    width: 100%;
}

.p_values table td {
    padding: .5rem 1rem;
    font-size: 1rem;
    margin: 0;
    vertical-align: top;
}

.p_values table tbody tr td:last-of-type {
    text-align: right;
    white-space: nowrap;
}

.p_values table thead tr td {
    position: relative;
}

.p_values table thead p {
    position: absolute;
    right:1rem;
    top:50%;
    transform: translateY(-50%);
    display: block;
    margin: 0;
}

.p_values table tbody tr:nth-of-type(even) td {
    background-color: var(--p_details_bg2);
}

.p_values table tbody tr:nth-of-type(odd) td {
    background-color: var(--p_details_bg3);
}

.p_values table i {
    font-style: normal;
}

.values-toggler {
    color: var(--p_details);
    display: block;
    width: 65%;
    padding: 0 0 1rem 0;
}

.values-toggler:hover {
    color: var(--p_highlight);
    text-decoration: none;
}

.values-toggler:active,
.values-toggler:focus {
    color: var(--p_details);
    text-decoration: none;
}

.values-toggler .svg {
    margin-left: .5rem;
    width: 12px;
    height: auto;
}

.values-toggler .svg path {
    stroke: var(--p_details);
}

.values-toggler span:last-of-type,
.values-toggler.active span,
.p_values table:last-of-type,
.p_values.active table:first-of-type,
/*.p_contains>.row:last-of-type,*/
.p_contains.active,
.p_contains.active .row:first-of-type {
    display: none;
}

.values-toggler.active span:last-of-type {
    display: inline-block;
}

.p_values.active table:last-of-type {
    display: table;
}

.p_contains.active .row:last-of-type {
    display: flex;
}

.p_contains {
    padding: 1rem;
}

.p_contains .col-12 b {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    display: block;
    margin: 0 0 1rem -12px;
}

.p_contains .col-12 p {
    font-size: 14px;
    line-height: 1.4;
    margin: 1rem 0 0 -12px;
}

.p_contains .row {
    max-width: 460px;
    margin: 0 auto;
}

.p_contains .col {
    width: 20%;
    padding: 0 .5rem;
    position: relative;
    text-align: center;
}

.p_contains .col .svg {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.p_contains .col .svg g {
    fill: var(--p_details_bg1);
}

.p_contains .col .svg g path:last-of-type {
    fill: var(--p_details);
}

.p_contains .row .row div:not(.col-12)>*:not(.svg) {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
}

.p_contains_scroll .row {
    /*margin: 0 -20px;*/
}

.p_contains .row span {
    top: 12px;
    font-size: 10px;
    height: 32px;
    line-height: 1.4;
    overflow: hidden;
    width: 75%;
}

.p_contains .row .col p {
    top: 42px;
    font-size: 14px;
    margin: 0;
}

.p_contains .row b {
    bottom:-7px;
    font-size: 14px;
}

.p_contains .row i {
    display: none;
}

.only100g .values-toggler,
.only100g .p_values table,
.only100g .p_contains>.row {
    display: none;
}

.only100g .p_values table:last-of-type {
    display: table;
}

.only100g .p_contains>.row:last-of-type {
    display: flex;
}

@media (max-width:767.98px) {

    .p_intro {
        /*background: radial-gradient(circle at center 55vw, var(--p_secondary-bg) 20vw, var(--p_primary-bg) 140vw);*/
        margin: -5rem -3rem 10%;
        padding: 3.5rem 3rem 4rem;
    }

    .p_intro h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    .p_intro h1 + p {
        font-size: 12px;
    }

    .p_intro .p_cat,
    .p_intro span {
        font-size: 16px;
    }

    .p_intro .p_cat {
        margin-top: 1rem;
    }

    .p_intro .row figure ul li a {
        width: 10px;
        height: 10px;
    }

    .p_intro .p_prev .svg, .p_intro .p_next .svg {
        width: 20px;
    }
    
    .p_intro figure {
        padding-bottom: 1rem;
    }

    .p_intro figure .img-fluid {
        max-width: 90%;
    }

    .p_details {
        padding: .5rem 12px 12px;
    }

    .p_details>.row {
        margin-top: 0;
    }

    .p_details>.row>div:first-of-type h2 {
        padding-top: .5rem;
    }

    .p_ingredients {
        font-size: 14px;
        line-height: 1.4;
    }

    .p_values dl dt,
    .p_values dl dd {
        width: 75%;
        padding: .2rem .5rem;
        font-size: 12px;
        line-height: 1.8;
        vertical-align: middle;
    }

    .p_values dl dd {
        width: 25%;
    }

    .p_contains .col-12 b {
        font-size: 12px;
    }

    .p_contains .col-12 p {
        font-size: 10px;
    }

    .p_contains_scroll {
        overflow-x: scroll;
        overflow-y: hidden;
        margin: 0 -1rem;
        width: calc(100% + 2rem);
        max-width: none;
        padding: 0 28px;
    }

    .p_contains_scroll .row {
        width: 400px;
        margin: 0 -20px;
    }

    .p_contains .row span {
        top: 11px;
        font-size: 9px;
        height: 24px;
    }

    .p_contains .col {
        margin-top: 8px;
    }

    .p_contains .row .col p {
        top: 39px;
        font-size: 12px;
    }

    .p_details h2 {
        font-size: 20px;
    }

}

@media (min-width:768px) and (max-width:991.98px) {

    .p_intro {
        /*background: radial-gradient(circle at center 38vw, var(--p_secondary-bg) 12vw, var(--p_primary-bg) 90vw);*/
    }

    .p_intro .p_cat {
        margin-top: 1rem;
    }

    .p_details {
        padding: 5rem 2rem 2rem;
    }

    .p_details>.row>div:first-of-type h2 {
        padding-top: 0;
    }

    .p_contains .row span {
        font-size: 10px;
        height: 30px;
    }

    .p_contains .row .col p {
        font-size: 14px;
    }

    .p_contains .row .col b {
        font-size: 14px;
    }
    
}

@media (max-width:991.98px) {
    
    .p_ingredients {
        border-bottom: 1px solid var(--p_details);
        padding-bottom: 2rem;
    }

}

@media (min-width:992px) and (max-width:1199.98px) {

    .p_intro {
        padding: 9rem 3rem 12rem;
        /*background: radial-gradient(circle at 25% 30vw, var(--p_secondary-bg) 8vw, var(--p_primary-bg) 45vw);*/
    }

    .p_details {
        padding: 2rem;
    }

    .p_details>.row>div:first-of-type h2 {
        padding-top: 4rem;
    }

    .p_contains .row .col p {
        font-size: 12px;
        top: 37px;
    }

    .p_contains .row span {
        font-size: 10px;
        height: 28px;
        top: 10px;
    }
    
    .p_contains .row b {
        font-size: 12px;
    }

}

@media (min-width:1200px) and (max-width:1399.98px) {

    .p_intro {
        padding-top: 8rem;
        /*background: radial-gradient(circle at 25% 20vw, var(--p_secondary-bg) 8vw, var(--p_primary-bg) 55vw);*/
    }

    .p_details>.row>div:first-of-type h2 {
        padding-top: 6rem;
    }

    .p_contains .row .col p {
        top: 36px;
        font-size: 12px;
    }

    .p_contains .row span {
        height: 30px;
        top: 10px;
    }

    .p_contains .row b {
        font-size: 12px;
    }
    
}

.product_1 {
    /* Product 01 */
    --p_primary-bg: #61160e;
    --p_secondary-bg: #cb1317;
    --p_menu: #F8A906;
    --p_highlight: #F8A906;
    --p_title: #fff;
    --p_content_icon1: #fff;
    --p_content_icon2: #F8A906;
    --p_content: #fff;
    --p_details: #fff;
    --p_details_bg1: #af2028;
    --p_details_bg2: #901a21;
    --p_details_bg3: #7d161c;
}

.product_2 {
    /* Product 02 */
    --p_primary-bg: #000000;
    --p_secondary-bg: #0088c9;
    --p_menu: #F8A906;
    --p_highlight: #F8A906;
    --p_title: #fff;
    --p_content_icon1: #fff;
    --p_content_icon2: #F8A906;
    --p_content: #fff;
    --p_details: #fff;
    --p_details_bg1: #0092d6;
    --p_details_bg2: #0074c4;
    --p_details_bg3: #006bb6;
}

.product_mc {
    /* Product Master Crok */
    --p_primary-bg: #055e29;
    --p_secondary-bg: #3fae5f;
    --p_menu: #fcde0a;
    --p_highlight: #fcde0a;
    --p_title: #fff;
    --p_content_icon1: #fff;
    --p_content_icon2: #fcde0a;
    --p_content: #fff;
    --p_details: #fff;
    --p_details_bg1: #3fae5f;
    --p_details_bg2: #119d4a;
    --p_details_bg3: #2ca54f;
}

.product_mc .p_intro {
    background: linear-gradient(180deg, var(--p_primary-bg) 0%, var(--p_secondary-bg) 40%, var(--p_primary-bg) 80%);
    margin: -8rem -3rem -3rem;
    padding: 6rem 3rem 16rem;
}

.product_mc .content-padding .row:not(:first-of-type) .p_intro {
    margin-top: 0;
}

@media (max-width:767.98px) {

    .product_mc .p_intro {
        padding-bottom: 9rem;
        margin-top: -6rem;
    }

}

@media (max-width:991.98px) {

    .product_mc .content-padding .row:not(:first-of-type) .p_intro {
        margin-top: -3rem;
    }
    
}

.product-item {
    background: radial-gradient(circle at center center, var(--p_secondary-bg) 7vw, var(--p_primary-bg) 17vw);
    padding: 1rem .5rem;
    text-align: center;
}

.product-item h2 {
    margin: 1rem auto 0rem;
    text-align: center;
    color: var(--p_title);
    font-size: 28px;
    height: 52px;
    /*overflow: hidden;*/
}

.product-item h2 span {
    display: block;
    font-size: 16px;
}

.product-item .btn {
    margin: .5rem 0;
}

.product-item figure {
    aspect-ratio: 1 / 1;
    width: 100%;
}

.product-item figure img {
    width: 100%;
    opacity: 0;
}

.products-list .product-item {
    background-size: cover;
    background-position: center;
}

.product-list-single .product-item {
    z-index: 1;
    position: relative;
}

.product-list-single .product-item figure img {
    opacity: 1;
}

.products-list .product-item figure {
    /*padding: 1.2rem;*/
}

@media (min-width:768px) {

    .product-list-single .row>div:last-of-type {
        border-bottom-right-radius: 2rem;
        overflow: hidden;
    }
        
}

@media (max-width:767.98px) {

    .product-item {
        background: radial-gradient(circle at center center, var(--p_secondary-bg) 26vw, var(--p_primary-bg) 84vw);
    }

}

@media (min-width:768px) and (max-width:991.98px) {
    
    .product-item {
        background: radial-gradient(circle at center center, var(--p_secondary-bg) 7vw, var(--p_primary-bg) 38vw);
    }

}

@media (min-width:992px) and (max-width:1199.98px) {

    .product-item h2 {
        font-size: 20px;
        height: 48px;
    }

    .product-item h2 span {
        font-size: 12px;
    }
    
}

@media (min-width:992px) and (max-width:1399.98px) {

    .product-item {
        background: radial-gradient(circle at center center, var(--p_secondary-bg) 7vw, var(--p_primary-bg) 21vw);
    }

}

@media (min-width:1200px) and (max-width:1399.98px) {

    .product-item h2 {
        font-size: 24px;
        height: 48px;
    }

    .product-item h2 span {
        font-size: 14px;
    }
    
}

/* Categories / product lists */

.products-list .slick-dots {
    bottom: 5.5rem;
    transform: scale(.75);
}

.category_1 {
    /* Category 1 */
    --p_primary-bg: #61160e;
    --p_secondary-bg: #cb1317;
    --p_menu: #F8A906;
    --p_highlight: #F8A906;
    --p_title: #fff;
}

.p_intro.category-hero {
    padding-bottom: 1rem;
    padding-top: 3rem;
}

.p_intro.category-hero .p_cat {
    margin: 0;
}

@media (max-width:767.98px) {
    
    .p_intro.category-hero {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .p_intro.category-hero figure {
        margin-bottom: -1rem;
    }

}

@media (min-width:768px) and (max-width:991.98px) {
    
    .p_intro.category-hero {
        padding-bottom: 4rem;
    }

    .p_intro.category-hero figure {
        margin-bottom: -2rem;
    }
        
}

@media (min-width:992px) and (max-width:1199.98px) {
    
    .p_intro.category-hero {
        padding-bottom: 0rem;
    }
    
}

@media (min-width:992px) and (max-width:1399.98px) {
    
    .p_intro.category-hero {
        padding-top: 6rem;
    }
    
}

/* Gallery */

.page-gallery .container {
    padding-bottom: 3rem;
}

.page-gallery span {
    display: block;
    font-weight: bold;
    max-width: 200px;
    margin: 0 auto;
}

.page-gallery .form-control {
    line-height: 48px;
    padding: 0 1rem;
    height: 48px;
    border-color: #cd0019;
    border-width: 2px;
    width: 400px;
    margin: 0 auto 2rem;
    max-width: 100%;
}

/* Articles */

.content.page-article {
    padding-bottom: 12rem;
}

article {
    max-width: 768px;
    margin: 0 auto 4rem;
}

article h1 {
    text-align: center;
    margin: 0 0 2rem 0;
    font-size: 32px;
}

article .published {
    font-size: 1rem;
    text-align: right;
    opacity: .5;
    display: block;
}

article .lead {
    font-weight: bold;
    color: #cd0019;
}

.content.page-articles {
    padding-bottom: 12rem;
}

.page-articles h1 {
    text-align: center;
}

article img {
    display: block;
    margin: 0 auto 2rem;
    max-width: 100%;
}

.list-filter {
    list-style: none;
    padding: 0;
    text-align: center;
    margin-bottom: 3rem;
}

.list-filter li {
    display: inline-block;
}

.list-filter li a {
    margin: 0 .25rem;
}

.list-filter li .btn {
    filter: grayscale(1) brightness(1.1) opacity(.35);
    transition: all .2s;
}

.list-filter li.active .btn,
.list-filter li.active .btn:hover {
    opacity: 1;
    filter:none;
    transition: all .2s;
}

.news-item {
    position: relative;
}

.news-item figure {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    border-radius: .5rem;
}

.news-item figure img {
    position: absolute;
    max-width: 100%;
    left:0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.news-item span {
    font-size: .85rem;
    opacity: .5;
}

.news-item p {
    display: inline;
}

.news-item i {
    font-style: normal;
    color: #CD001A;
    font-weight: bold;
    transition: all .2s;
}

.news-item a {
    text-indent: -9999px;
    position: absolute;
    left:0;
    right: 0;
    top:0;
    bottom: 0;
    width:100%;
    height: 100%;
}

.news-item a:hover {
    text-decoration: none;
}

.news-item:hover h3 {
    color: #CD001A;
    transition: all .2s;
}

.news-item:hover i {
    text-decoration: underline;
    transition: all .2s;
}

.main-articles {
    background: #FCA603;
    background: linear-gradient(0deg,rgba(252, 166, 3, 1) 0%, rgba(252, 203, 25, 1) 100%);
    margin-bottom: -6rem;
    z-index: 10;
    position: relative;
    border-bottom-right-radius: 17px;
}

.main-articles .news-item:hover i,
.main-articles .news-item:hover h3 {
    color: #fff;
}

.main-mastercrok {
    background-color: #61160e;
}

.main-mastercrok img {
    opacity: 0;
}

/* Responsive CSS */

@media (max-width:575.98px) {

    header .logo {
        top: 13vw;
    }

    header .logo .svg {
        width: 110px;
    }

}

@media (min-width:576px) and (max-width:767.98px) {

    header .logo {
        top: 10vw;
    }

    header .logo .svg {
        width: 140px;
    }

}

@media (max-width:767.98px) {

    header .logo {
        left: 0;
    }

    .navbar-toggler {
        left: auto;
        right: 4px;
        top: 10px;
        transform: scale(1) skew(0, -12deg);
    }

    .navbar-collapse {
        transform: translate(-50%, -50%);
        max-width: 300px;
    }

    footer .container::before {
        background: linear-gradient(3deg, rgba(98, 23, 15, 1) 0%, rgba(205, 0, 26, 1) 100%);
        height: 195px;
        top: -150px;
        width: 768px;
    }

    .content {
        padding-top: 5rem;
        padding-bottom: 10rem;
    }

    .content-padding {
        padding: 0;
        margin: 0;
    }

    .container {
        max-width: none;
    }

    .logo-bg {
        top: -36vw;
        left: -12px;
        height: 45vw;
    }

    footer .container {
        height: 0;
    }

    footer .logo {
        left: 0;
        top: -110px;
    }

    footer .logo .svg {
        width: 100px;
    }

    .logo-bg>img,
    footer .container>img:nth-of-type(1),
    footer .container>img:nth-of-type(2) {
        display: none;
    }

    footer {
        margin-bottom: -1rem;
    }

    .btn {
        min-width: 256px;
    }

    h1 {
        font-size: 32px;
        line-height: 1.4;
        margin: 1rem 0 2rem;
    }

    .social {
        right: 0;
        bottom: 60px;
    }

    .social li .svg {
        height: 16px;
    }

    .footer-menu {
        right: 0;
        bottom: 26px;
        font-size: 12px;
    }

    .footer-menu li a {
        margin: 0 0 0 .9rem;
    }

    article h1 {
        font-size: 32px;
        line-height: 1.4;
        margin-top: 1rem;
    }

    .list-filter li a.btn {
        min-width: 0;
    }

    .main-mastercrok img {
        height: 240px;
    }

}

@media (min-width:768px) and (max-width:991.98px) {

    .site {
        max-width: calc(720px - 12px * 2);
    }

    .content {
        padding-top: 8rem;
        padding-bottom: 10rem;
    }

    .content-padding {
        padding: 0 24px;
    }

    header .logo {
        top: 52px;
    }

    header .logo .svg {
        width: 140px;
    }

    .navbar-toggler {
        left: calc(50% + 720px / 2 - 84px);
    }

    footer .container {
        height: 0;
    }

    footer .logo {
        left: 12px;
        top: -112px;
    }

    footer .logo .svg {
        width: 100px;
    }

    footer .container>img:nth-of-type(1) {
        top: -84px;
    }
    
    footer .container>img:nth-of-type(2) {
        top: -227px;
    }

    .social {
        bottom: 90px;
        right: 12px;
    }

    .social li .svg {
        height: 24px;
    }

    .footer-menu {
        bottom: 58px;
        right: 12px;
        font-size: 14px;
    }

    .main-mastercrok {
        margin-bottom: 4.2rem;
    }

}

@media (min-width:768px) and (max-width:1199.98px) {

    .social li .svg {
        height: 24px;
    }

}

@media (max-width:991.98px) {

    .page-article article + .text-center .btn {
        min-width: 256px;
    }

}

@media (min-width:992px) and (max-width:1199.98px) {

    .site {
        max-width: calc(960px - 12px * 2);
    }

    .content {
        padding-top: 7rem;
        padding-bottom: 10rem;
    }

    .navbar-toggler {
        left: calc(50% + 960px / 2 - 84px);
    }

    footer .container {
        height: 2rem;
    }

    footer .logo {
        top: -106px;
    }

    footer .container>img:nth-of-type(1) {
        top: -58px;
    }
    
    footer .container>img:nth-of-type(2) {
        top: -253px;
    }

    .social {
        bottom: 74px;
    }

    .footer-menu {
        bottom: 38px;
    }

    .main-mastercrok {
        margin-bottom: 2.6rem;
    }

}

@media (min-width:1200px) and (max-width:1399.98px) {

    .site {
        max-width: calc(1140px - 12px * 2);
    }

    .content {
        padding-top: 7rem;
        padding-bottom: 14rem;
    }

    .navbar-toggler {
        left: calc(50% + 1140px / 2 - 84px);
    }
    
    footer .container {
        height: 2rem;
    }

    .social {
        bottom: 48px;
    }

    .footer-menu {
        bottom: 8px;
    }

    .content {
        padding-top: 7rem;
        padding-bottom: 9rem;
    }

    footer .logo {
        top: -80px;
    }

    footer .container>img:nth-of-type(1) {
        top: -40px;
    }
    
    footer .container>img:nth-of-type(2) {
        top: -272px;
    }

}