/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/*
KERNEL
DATE 2021. 07. 12. 10:40:58
PC Katon
*/
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Root ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

#app .container {
    padding: 30px;
}

#app {
    z-index: 10000;
}

:root {

    --transition-default: 0.3s;

    --color-white: #FFFFFF;
    --color-black: #1B1B1B;
    --color-invisible: #00000000;

    --color-red: #EF6957;
    --color-red-light: #f89078;
    --color-red-dark: #da5947;

    --color-green: #8CC387;


    --color-brown-0: #f8f7f4;
    --color-brown-1: #EAE6E2;
    --color-brown-2: #D4CCC6;
    --color-brown-3: #9B8686;
    --color-brown-4: #474040;


    --color-gray0: #F3F3F3;
    --color-gray1: #E5E5E5;
    --color-gray2: #d6d6d6;
    --color-gray3: #c7c7c7;
    --color-gray4: #b8b8b8;
    --color-gray5: #a1a1a1;
    --color-gray6: #888888;

    --frontend-color-white-0:       #FFFEFC;
    --frontend-color-white-1:       #FAF8F5;
    --frontend-color-white-2:       #F2EFEB;

    --frontend-color-gray-0:        #DEDAD6;
    --frontend-color-gray-1:        #CECBC7;

    --frontend-color-black:         #0F0E0D;

    --frontend-color-blacky:        #171614;
    --frontend-color-blacky-light:  #2d2d2a;
    --frontend-color-blacky-white: #494743;

}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Base ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

body {
    padding-top: 60px;
    background-color: var(--color-brown-1) !important;
}
.block-header {
    background-color: #e3ded9 !important;
}

/*

xx 1599 - 1500
xl 1199 - 1140
lg 991  - 960
md 767  - 720
sm 575  - 540
xs 575  > 0

@media screen and (max-width: 1599px) {}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 575px) {}

*/

.render-crisp {
    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering: -o-crisp-edges;            /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;   /* IE (non-standard property) */
}
.render-pixelated {
    image-rendering: pixelated;
}
.render-transform {
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);               /* IE 9 */
    -webkit-transform: translateZ(0);           /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

.text-uppercase     { text-transform: uppercase }
.text-lowercase     { text-transform: lowercase }
.text-capitalize    { text-transform: capitalize}

.margin-center { margin: 0px auto }
.blank { cursor: pointer; }

.text-justify { text-align: justify; }
.text-bold { font-weight: 600; }

.hidden-input {
    margin: 0px;
    padding: 0px;
    width: 10px;
    height: 10px;
    pointer-events: none;
    visibility: hidden;
    position: fixed;
    top: -10px;
    left: -10px;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # [  SPACEING   ] # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.space-bot-0 { margin-bottom: 0px; }
.space-bot-1 { margin-bottom: 20px; }
.space-bot-2 { margin-bottom: 40px; }
.space-bot-3 { margin-bottom: 60px; }
.space-bot-4 { margin-bottom: 80px; }
.space-bot-5 { margin-bottom: 100px;}
.space-bot-6 { margin-bottom: 140px;}
.space-bot-7 { margin-bottom: 180px;}
.space-bot-8 { margin-bottom: 200px;}

.space-inner-bot-0 { padding-bottom: 0px; }
.space-inner-bot-1 { padding-bottom: 20px; }
.space-inner-bot-2 { padding-bottom: 40px; }
.space-inner-bot-3 { padding-bottom: 60px; }
.space-inner-bot-4 { padding-bottom: 80px; }
.space-inner-bot-5 { padding-bottom: 100px;}
.space-inner-bot-6 { padding-bottom: 140px;}
.space-inner-bot-7 { padding-bottom: 180px;}
.space-inner-bot-8 { padding-bottom: 200px;}

.space-top-0 { margin-top: 0px; }
.space-top-1 { margin-top: 20px; }
.space-top-2 { margin-top: 40px; }
.space-top-3 { margin-top: 60px; }
.space-top-4 { margin-top: 80px; }
.space-top-5 { margin-top: 100px;}
.space-top-6 { margin-top: 140px;}
.space-top-7 { margin-top: 180px;}
.space-top-8 { margin-top: 200px;}

.space-inner-top-0 { padding-top: 0px; }
.space-inner-top-1 { padding-top: 20px; }
.space-inner-top-2 { padding-top: 40px; }
.space-inner-top-3 { padding-top: 60px; }
.space-inner-top-4 { padding-top: 80px; }
.space-inner-top-5 { padding-top: 100px;}
.space-inner-top-6 { padding-top: 140px;}
.space-inner-top-7 { padding-top: 180px;}
.space-inner-top-8 { padding-top: 200px;}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # [  BOOTSTRAP-CONTAINER  ] # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

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

.container-full { margin: 0px; width: 100%; }
.container-max { margin: 0px auto; max-width: 1980px; }
.container-max-fill { min-width: calc((100% - 1980px) / 2) }

@media screen and (max-width: 1920px) {
    .container-max-fill { width: 0px; }
}

@media screen and (min-width: 1600px) { .container {max-width: 1500px!important;} }

/*
.container-margin-left, .container-margin-right {
    margin-left: calc((100% - 1500px) / 2);
}
*/

.container-fill {
    min-width: calc((100% - 1500px) / 2);
}

@media screen and (max-width: 1599px) {
    .container-fill {min-width: calc((100% - 1140px) / 2)}
}
@media screen and (max-width: 1199px) {
    .container-fill {min-width: calc((100% - 960px) / 2)}
}
@media screen and (max-width: 991px) {
    .container-fill {min-width: calc((100% - 720px) / 2)}
}
@media screen and (max-width: 767px) {
    .container-fill {min-width: calc((100% - 540px) / 2)}
}
@media screen and (max-width: 575px) {
    .container-fill {min-width: 0px}
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # [  FLEX - FRAME   ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.flex-frame-row-start   { display: flex; flex-direction: row; justify-content: flex-start; align-items: unset; }
.flex-frame-row-center  { display: flex; flex-direction: row; justify-content: center;     align-items: unset; }
.flex-frame-row-end     { display: flex; flex-direction: row; justify-content: flex-end;   align-items: unset; }

.flex-frame-column-start    { display: flex; flex-direction: column; justify-content: unset; align-items: flex-start; }
.flex-frame-column-center   { display: flex; flex-direction: column; justify-content: unset; align-items: center;     }
.flex-frame-column-end      { display: flex; flex-direction: column; justify-content: unset; align-items: flex-end;   }

.flex-frame-row-start>*     { margin: 0px; margin-right: 10px; }
.flex-frame-row-center>*    { margin: 0px; margin-left: 5px; margin-right: 5px; }
.flex-frame-row-end>*       { margin: 0px; margin-left: 10px; }

.flex-frame-column-start>*,
.flex-frame-column-center>*,
.flex-frame-column-end>*
{ margin: 0px; margin-bottom: 10px; }

.flex-clear-margin>* { margin: 0px; }
.flex-grow { flex-grow: 1; }

@media screen and (max-width: 1199px) {
    .flex-frame-row-start-xl   { display: flex; flex-direction: row; justify-content: flex-start; align-items: unset; }
    .flex-frame-row-center-xl  { display: flex; flex-direction: row; justify-content: center;     align-items: unset; }
    .flex-frame-row-end-xl     { display: flex; flex-direction: row; justify-content: flex-end;   align-items: unset; }
    
    .flex-frame-column-start-xl    { display: flex; flex-direction: column; justify-content: unset; align-items: flex-start; }
    .flex-frame-column-center-xl   { display: flex; flex-direction: column; justify-content: unset; align-items: center;     }
    .flex-frame-column-end-xl      { display: flex; flex-direction: column; justify-content: unset; align-items: flex-end;   }
    
    .flex-frame-row-start-xl>*     { margin: 0px; margin-right: 10px; }
    .flex-frame-row-center-xl>*    { margin: 0px; margin-left: 5px; margin-right: 5px; }
    .flex-frame-row-end-xl>*       { margin: 0px; margin-left: 10px; }
    
    .flex-frame-column-start-xl>*,
    .flex-frame-column-center-xl>*,
    .flex-frame-column-end-xl>*
    { margin: 0px; margin-bottom: 10px; }
}
@media screen and (max-width: 991px) {
    .flex-frame-row-start-lg   { display: flex; flex-direction: row; justify-content: flex-start; align-items: unset; }
    .flex-frame-row-center-lg  { display: flex; flex-direction: row; justify-content: center;     align-items: unset; }
    .flex-frame-row-end-lg     { display: flex; flex-direction: row; justify-content: flex-end;   align-items: unset; }
    
    .flex-frame-column-start-lg    { display: flex; flex-direction: column; justify-content: unset; align-items: flex-start; }
    .flex-frame-column-center-lg   { display: flex; flex-direction: column; justify-content: unset; align-items: center;     }
    .flex-frame-column-end-lg      { display: flex; flex-direction: column; justify-content: unset; align-items: flex-end;   }
    
    .flex-frame-row-start-lg>*     { margin: 0px; margin-right: 10px; }
    .flex-frame-row-center-lg>*    { margin: 0px; margin-left: 5px; margin-right: 5px; }
    .flex-frame-row-end-lg>*       { margin: 0px; margin-left: 10px; }
    
    .flex-frame-column-start-lg>*,
    .flex-frame-column-center-lg>*,
    .flex-frame-column-end-lg>*
    { margin: 0px; margin-bottom: 10px; }
}
@media screen and (max-width: 767px) {
    .flex-frame-row-start-md   { display: flex; flex-direction: row; justify-content: flex-start; align-items: unset; }
    .flex-frame-row-center-md  { display: flex; flex-direction: row; justify-content: center;     align-items: unset; }
    .flex-frame-row-end-md     { display: flex; flex-direction: row; justify-content: flex-end;   align-items: unset; }
    
    .flex-frame-column-start-md    { display: flex; flex-direction: column; justify-content: unset; align-items: flex-start; }
    .flex-frame-column-center-md   { display: flex; flex-direction: column; justify-content: unset; align-items: center;     }
    .flex-frame-column-end-md      { display: flex; flex-direction: column; justify-content: unset; align-items: flex-end;   }
    
    .flex-frame-row-start-md>*     { margin: 0px; margin-right: 10px; }
    .flex-frame-row-center-md>*    { margin: 0px; margin-left: 5px; margin-right: 5px; }
    .flex-frame-row-end-md>*       { margin: 0px; margin-left: 10px; }
    
    .flex-frame-column-start-md>*,
    .flex-frame-column-center-md>*,
    .flex-frame-column-end-md>*
    { margin: 0px; margin-bottom: 10px; }
}
@media screen and (max-width: 575px) {
    .flex-frame-row-start-sm   { display: flex; flex-direction: row; justify-content: flex-start; align-items: unset; }
    .flex-frame-row-center-sm  { display: flex; flex-direction: row; justify-content: center;     align-items: unset; }
    .flex-frame-row-end-sm     { display: flex; flex-direction: row; justify-content: flex-end;   align-items: unset; }
    
    .flex-frame-column-start-sm    { display: flex; flex-direction: column; justify-content: unset; align-items: flex-start; }
    .flex-frame-column-center-sm   { display: flex; flex-direction: column; justify-content: unset; align-items: center;     }
    .flex-frame-column-end-sm      { display: flex; flex-direction: column; justify-content: unset; align-items: flex-end;   }
    
    .flex-frame-row-start-sm>*     { margin: 0px; margin-right: 10px; }
    .flex-frame-row-center-sm>*    { margin: 0px; margin-left: 5px; margin-right: 5px; }
    .flex-frame-row-end-sm>*       { margin: 0px; margin-left: 10px; }
    
    .flex-frame-column-start-sm>*,
    .flex-frame-column-center-sm>*,
    .flex-frame-column-end-sm>*
    { margin: 0px; margin-bottom: 10px; }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # [  IMAGE-FRAME  ] # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.image-frame {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 100%;
}
.image-frame img {
    pointer-events: none;
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}

.image-frame .img-b {
    opacity: 0;
    transition: 0.1s opacity;
}
.image-frame.image-hover:hover .img-b {
    opacity: 100;
}


.image-frame.image-frame-contain img {
    object-fit: contain;
}

.image-frame.image-frame-4x1    { padding-bottom: 25%;    }
.image-frame.image-frame-2x1    { padding-bottom: 50%;    }
.image-frame.image-frame-16x9   { padding-bottom: 56.25%; }
.image-frame.image-frame-4x3    { padding-bottom: 75%;    }
.image-frame.image-frame-3x2    { padding-bottom: 66.66%; }
.image-frame.image-frame-8x5    { padding-bottom: 62.5%;  }

.image-frame.image-frame-hover img {
    transition: 0.75s transform;
}
.image-frame.image-frame-hover:hover img {
    transform: scale(1.1);
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Global ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

* {
    font-family: 'Poppins', sans-serif;
}


/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Inputs ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

/* ~ ~ ~ Button ~ ~ ~ */

.bttn {
    background-color: var(--color-red);
    color: var(--color-white);
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 600;

    height: 45px;

    transition:
        var(--transition-default) color,
        var(--transition-default) background-color;
}
.bttn:hover {
    background-color: var(--color-red-light);
    color: var(--color-white);
}
.bttn.bttn-icon-space i {
    margin-right: 10px;
    font-size: 1.2em;
}
.bttn.bttn-icon-space img {
    margin-right: 10px;
}
.bttn.bttn-circle {
    padding: 0px;
    height: 45px;
    width: 45px;
}

.bttn img {

    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);               /* IE 9 */
    -webkit-transform: translateZ(0);           /* Chrome, Safari, Opera */
    transform: translateZ(0);
    image-rendering: pixelated;

    display: inline-block;
    width: 24px; height: 24px;

}

.bttn.bttn-style-outline {
    background-color: unset;
    color: var(--color-red);

    outline-color: var(--color-red);
    outline-style: solid;
    outline-offset: -1px;
    outline-width: 1px;
}
.bttn:hover.bttn-style-outline {
    color: var(--color-red-light);
}
.bttn:focus.bttn-style-outline {
    outline: 1px solid var(--color-red);
}

.bttn.bttn-style-brown {
    background-color: var(--color-brown-4);
}
.bttn.bttn-style-brown:hover {
    background-color: var(--color-brown-3);
}

.bttn.bttn-style-brown-outline {
    background-color: unset;
    color: var(--color-brown-4);

    outline-color: var(--color-brown-4);
    outline-style: solid;
    outline-offset: -1px;
    outline-width: 1px;
}
.bttn:hover.bttn-style-brown-outline {
    color: var(--color-brown-3);
}
.bttn:focus.bttn-style-brown-outline {
    outline: 1px solid var(--color-brown-3) !important;
}

.bttn.bttn-size-large {
    height: 60px;
    border-radius: 24px;
}
.bttn.bttn-circle.bttn-size-large {
    width: 60px;
    border-radius: 50%;
}
.bttn.bttn-size-large img {

    width: 30px; height: 30px;
}

/* ~ ~ ~ Fields ~ ~ ~ */

.field {
    width: 100%;
    height: 45px;
    position: relative;
}
.field > input {
    width: 100%;
    height: 100%;

    padding: 10px 30px;
    border-radius: 30px;

    line-height: 45px;

    outline-width: 1px;
    outline-offset: -1px;
    outline-color: var(--color-brown-4);
    outline-style: solid;
}
.field.field-icon > input {
    padding-left: 60px;
}
.field.field-icon > i {
    position: absolute;
    font-size: 1.2em;
    left: 0px;
    top: 0px;
    line-height: 45px;
    padding-left: 30px;
}

/* ~ ~ ~ Check ~ ~ ~ */

.cheeck {
    width: 100%;
    min-height: 45px;

    display: flex;
}
.cheeck .area-text {
    flex-grow: 1;
}
.cheeck .area-box {
    width: 40px;
    min-width: 40px;
}
.cheeck .area-box .box-frame {

    cursor: pointer;

    width: 26px;
    height: 26px;

    outline-width: 1px;
    outline-offset: -1px;
    outline-color: var(--color-brown-4);
    outline-style: solid;

    border-radius: 4px;
    text-align: center;
}
.cheeck .area-box .box-frame > i {
    opacity: 0;
    transform: translateY(-3px);

    pointer-events: none;
    font-size: 1.2em;
    line-height: 26px;

    transition:
        0.2s opacity,
        0.2s transform;
}
.cheeck.checked .area-box .box-frame > i {
    opacity: 1;
    transform: translateY(0px);
}

/* ~ ~ ~ Select ~ ~ ~ */

.seelect {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 45px;
}
.seelect > select {
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: var(--color-brown-4);
    padding: 0px 20px;
    margin: 0px;
}
.seelect.seelect-icon > select {
    padding-left: 50px;
}
.seelect > i {
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 45px;
    padding-left: 20px;
    font-size: 1.2em;
}

/* ~ ~ ~ Status ~ ~ ~ */

.status {
    display: flex;
    width: 100%;
    height: 26px;
    align-items: center;
}
.status > p {
    flex-grow: 1;
    padding: 0px; margin: 0px;
    padding-left: 10px;

}
.status .frame {
    background-color: var(--color-brown-4);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    min-width: 20px;
}
.status .frame i {
    color: var(--color-white);
    line-height: 12px;
    font-size: 0.8em;

    display: inline-block;
    transform:
        translateX(5px)
        translateY(-2px);
}
.status .frame i.fa-check {
    display: none;

    transform:
            translateX(3px)
            translateY(-2px);
}

.status.status-ok .frame > i.fa-times {
    display: none;
}
.status.status-ok .frame > i.fa-check {
    display: inline-block;
}
.status.status-ok .frame {
    background-color: var(--color-green);
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Components ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

/* ~ BreadCrumb ~ */

.bread-crumb {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.bread-crumb > a > img {
    opacity: 1;
    display: inline-block;
    width: 20px; height: 20px;
    margin-right: 10px;
    object-fit: contain;
    transform: translateY(-2px);
    cursor: pointer;
    transition:
        var(--transition-default) opacity;
}
.bread-crumb > a {
    cursor: pointer;
    color: var(--color-brown-4);
    transition:
            var(--transition-default) color;
}
.bread-crumb > a:hover {
    color: var(--color-brown-3);
    text-decoration: unset;
}
.bread-crumb > a:hover > img {
    opacity: 0.65;
}
.bread-crumb > i {
    color: var(--color-red);
    padding: 0px 10px;
}

/* ~ BreadCrumb 2 ~ */

.bread-crumb-2 {
    width: 100%;
}
.bread-crumb-2 > a {
    line-height: 23px;
}
.bread-crumb-2 > a > img {
    opacity: 1;
    display: inline-block;
    width: 20px; height: 20px;
    margin-right: 10px;
    object-fit: contain;
    transform: translateY(4px);
    cursor: pointer;
    transition:
            var(--transition-default) opacity;
}

.bread-crumb-2 > a:hover {
    color: var(--color-brown-3);
    text-decoration: unset;
}
.bread-crumb-2 > a:hover > img {
    opacity: 0.65;
}

.bread-crumb-2 > i {
    color: var(--color-red);
    padding: 0px 10px;
}

.bread-crumb-2 .icon {
    display: inline-flex;
    white-space: nowrap;
    align-items: baseline;
}

@media screen and (max-width: 991px) {
    .bread-crumb-2 {
        font-size: 0.8em;
    }
    .bread-crumb-2 > a > img {
        width: 16px; height: 16px;
        margin-right: 6px;
        transform: translateY(2px);
    }
    .bread-crumb-2 > i {
        padding: 0px 6px;
    }
}
@media screen and (max-width: 575px) {
    .bread-crumb-2 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ~ Infobox ~ */

.component-infobox {
    width: 100%;
    display: flex;

    background-color: var(--color-brown-1);
}

.component-infobox > img {
    width: 120px;
    height: 120px;
    min-width: 120px;
    padding: 20px;
    padding-right: 0px;
}

.component-infobox .body {
    flex-grow: 1;
    padding: 20px;
    color: var(--color-brown-4);
}
.component-infobox .body .title {
    width: 100%;
    font-weight: 600;
    font-size: 1.4em;
    margin: 0px;
    margin-bottom: 6px;
}

/* ~ Infobox Outter ~ */

.component-infobox-outter {

    background-color: var(--color-brown-1);
    position: relative;
}

.component-infobox-outter > img {
    pointer-events: none;
    width: 120px;
    height: 120px;
    min-width: 120px;
    padding: 20px 10px;
}
.component-infobox-outter .fake {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50px;
    height: 100%;
    margin-left: auto;
    background-color: var(--color-brown-0);
}

.component-infobox-outter .body {
    position: absolute;
    top: 20px;
    left: 120px;
    padding: 30px;
    background-color: var(--color-brown-2);
    color: var(--color-brown-4);
}
.component-infobox-outter .body .title {
    width: 100%;
    font-weight: 600;
    font-size: 1.4em;
    margin: 0px;
    margin-bottom: 6px;
}

/* ~ Quantity Editor ~ */

.quantity-editor {
    width: 140px;
    height: 60px;
    display: flex;
}

.quantity-editor input,
.quantity-editor .minus,
.quantity-editor .plus {
    height: 100%;
}
.quantity-editor .minus,
.quantity-editor .plus {
    background-color: var(--color-brown-4);
    width: 40px;
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    transition:
        var(--transition-default) background-color;
}
.quantity-editor .minus {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.quantity-editor .plus {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.quantity-editor .minus:hover {
    background-color: var(--color-brown-3);
}
.quantity-editor .plus:hover {
    background-color: var(--color-brown-3);
}
.quantity-editor input {
    width: calc(100% - 80px);
    outline: unset;
    border: unset;
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;

    pointer-events: none;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Blocks ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

/* ~ Subscribe ~ */

.block-subscribe {
    background-color: var(--color-brown-0);
}
.block-subscribe .container {
    display: flex;
}
.block-subscribe .container > img {
    pointer-events: none;
    width: 400px;
    min-width: 400px;
    padding-right: 50px;
}
.block-subscribe .container .body {
    flex-grow: 1;
}
.block-subscribe .container .body > h3 {
    margin-top: 40px;
    max-width: 800px;
    font-weight: 600;
    font-size: 3em;
    color: var(--color-brown-4);
}
.block-subscribe .container .body .subscribe-inputs {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;

    max-width: 840px;
}

.block-subscribe .container .body .subscribe-inputs > div[data-component="field"] {
    width: calc(100% - 174px);
    margin-right: 10px;
}
.block-subscribe .container .body .subscribe-inputs > div[data-component="check"] {
    margin: 20px;
}

@media screen and (max-width: 1199px) {
    .block-subscribe .container .body > h3 {
        margin-top: 20px;
    }
    .block-subscribe .container > img {
        pointer-events: none;
        width: 300px;
        min-width: 300px;
        padding-right: 50px;
    }
}

@media screen and (max-width: 991px) {
    .block-subscribe .container > img {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .block-subscribe .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ~ Category Tiles ~ */

.block-category-tiles {
    background-color: var(--color-brown-0);
}
.block-category-tiles .container {
    display: flex;
    flex-wrap: wrap;
}
.block-category-tiles .container .sub-tile {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}


.block-category-tiles .container .tile-left {
    width: 50%;
    max-height: 800px;
}
.block-category-tiles .container .tile-right-top,
.block-category-tiles .container .tile-right-bottom {
    width: 100%;
    max-height: 400px;
}

.block-category-tiles .container .tile-cap {
    cursor: pointer;
    position: relative;
    padding: 5px;
    overflow: hidden;
}

.block-category-tiles .container .tile-cap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition:
        var(--transition-default) opacity;
}

.block-category-tiles .container .tile-cap:hover > img {
    opacity: 0.8;
}

.block-category-tiles .container .tile-cap .tile-cap-body {
    position: absolute;
    display: inline-block;

    left: 30px;
    bottom: 30px;

    background-color: var(--color-brown-4);
    padding: 20px;
}
.block-category-tiles .container .tile-cap .tile-cap-body h3,
.block-category-tiles .container .tile-cap .tile-cap-body p {
    color: var(--color-white);
    margin: 0px;
}
.block-category-tiles .container .tile-cap .tile-cap-body h3 {
    font-size: 2em;
    font-weight: 700;
}

@media screen and (max-width: 1199px) {
    .block-category-tiles .container .sub-tile {
        width: 100%;
    }
    .block-category-tiles .container .tile-left {
        width: 100%;
    }
    .block-category-tiles .container .tile-cap {
        max-height: 400px;
        height: 400px;
    }

}
@media screen and (max-width: 991px) {
    .block-category-tiles .container .tile-cap {
        max-height: 300px;
        height: 300px;
    }
}

/* ~ Process ~ */

.process-list {
    display: flex;
    flex-wrap: wrap;
}

.process-list .process-element {
    display: flex;
    flex-wrap: wrap;
}
.process-list .process-element img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}
.process-list .process-element .body {
    width: calc(100% - 200px);
    padding-left: 30px;
}
.process-list .process-element .body p {
    margin-bottom: 0px;
}
.process-list .process-element .body .head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.process-list .process-element .body .head .order {
    display: inline-block;
    width: 30px; height: 30px;
    background-color: var(--color-red);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: 600;
}

.process-list .process-element .body .head .title {
    margin-left: 20px;
    font-weight: 600;
    font-family: 'Cabin', sans-serif;
}

.process-list .process-element .body .text {
    text-align: justify;
}

.process-list .process-element {
    margin-bottom: 30px;
    width: 100%;
}

@media screen and (max-width: 1599px) {}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {

    .process-list .process-element .body .head {
        justify-content: center;
    }

    .process-list .process-element a {
        text-align: center;
        width: 100%;
    }
    .process-list .process-element img {
        width: 100%;
        height: 240px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .process-list .process-element .body {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
    }
}
@media screen and (max-width: 575px) {}

/* ~ Info ~ */

.block-info {
    background-color: var(--color-brown-0);
    background-color: #fff;
}
.block-info .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.block-info .container > div {
    width: 31%;
}

.block-info .container .component-infobox-outter .body {
    max-width: 600px;
}

@media screen and (max-width: 1599px) {
    .block-info .container {
        padding-bottom: 230px;
    }
}

@media screen and (max-width: 1199px) {
    .block-info .container {
        padding-bottom: 130px;
    }
    .block-info .container > div {
        width: 100%;
        margin-bottom: 70px;
    }
    .block-info .container > div:last-child {
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 991px) {
    .block-info .container > div { margin-bottom: 80px; }
    .block-info .container > div:last-child { margin-bottom: 0px; }
}
@media screen and (max-width: 767px) {
    .block-info .container > div { margin-bottom: 100px; }
    .block-info .container > div:last-child { margin-bottom: 0px; }
}
@media screen and (max-width: 575px) {
    .block-info .container > div { margin-bottom: 140px; }
    .block-info .container > div:last-child { margin-bottom: 0px; }
}

/* ~ Products ~ */

.block-products {
    background-color: var(--color-brown-1);
}
.block-products .head {
    display: flex;
    justify-content: space-between;

    width: 100%;
    margin-bottom: 20px;
}

.block-products .head .title {
    display: inline-flex;
    align-items: center;
}
.block-products .head .title > img {
    width: 45px; height: 45px;
    margin-right: 10px;
}
.block-products .head .title > h4 {
    font-size: 1.8em;
    color: var(--color-brown-4);
    margin: 0px;
}

.block-products .head .nav > button {
    margin-left: 10px;
}

.block-products .list {
    display: flex;
    flex-wrap: wrap;
}
.block-products .list .block-product {
    max-width: 25%;
    padding: 0px 5px;
}

@media screen and (max-width: 991px) {
    .block-products .head {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .block-products .head .title {
        margin-bottom: 20px;
    }
}

/* ~ Page Gallery ~ */

.block-page-gallery {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.block-page-gallery a {
    width: 300px;
    height: 300px;
    margin: 5px;
}
.block-page-gallery a img {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

/* ~ Product ~ */

.block-product {
    cursor: pointer;
}
.block-product .photo {
    position: relative;
    opacity: 1;

    width: 100%;
    height: 380px;

    transition:
        var(--transition-default) opacity;
}
.block-product .photo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.block-product .photo > .sale {
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-red);
    text-align: center;
    line-height: 60px;
    color: var(--color-white);
    font-weight: 600;
    top: 20px;
    left: 20px;

}
.block-product .name {
    color: var(--color-brown-4);
    text-align: center;
    overflow: hidden;
    margin: 20px;
    min-height: 50px;
    max-height: 50px;
}

.block-product .price .new,
.block-product .price .old {
    color: var(--color-brown-4);
    text-align: center;
    margin: 0px;
}
.block-product .price .new {
    font-weight: 600;
    font-size: 1.5em;
}
.block-product .price .old {
    text-decoration: line-through;
}

.block-product:hover .photo {
    opacity: 0.8;
}

/* ~ Product - Page ~ */

.block-product-page {
    width: 100%;
    display: flex;
}
.block-product-page .photos {
    cursor: pointer;
    width: 420px;
    min-width: 420px;
    height: 600px;
    position: relative;
}

.block-product-page .photos > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-product-page .photos .sale {
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-red);
    text-align: center;
    line-height: 60px;
    color: var(--color-white);
    font-weight: 600;
    top: 20px;
    left: 20px;
}
.block-product-page .photos .more-photo {
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-brown-4);
    text-align: center;
    padding-top: 6px;
    line-height: 22px;
    color: var(--color-white);
    font-weight: 600;
    bottom: 20px;
    right: 20px;

}

.block-product-page .details {
    padding-left: 40px;
    flex-grow: 1;

    display: flex;
    flex-direction: column;
}

.block-product-page .details > h1 {
    font-weight: 600;
    font-size: 3em;
    color: var(--color-brown-4);
}


.block-product-page .details .spec {
    flex-grow: 1;
}



.block-product-page .details .interact {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.block-product-page .details .interact .selector {
    width: 50%;
    display: flex;
}
.block-product-page .details .interact .selector {
    justify-content: flex-end;
}

.block-product-page .details .interact .selector {
    padding-right: 20px;
}
.block-product-page .details .interact .price {
    padding-left: 40px;
}
.block-product-page .details .interact .price > .new {

}

.block-product-page .details .interact .cart {
    width: 100%;
    display: flex;
    justify-content: center;

    margin-top: 30px;
}


.block-product-page .details .price .new,
.block-product-page .details .price .old {
    color: var(--color-brown-4);
    text-align: center;
    margin: 0px;
}
.block-product-page .details .price .new {
    font-weight: 600;
    font-size: 1.5em;
}
.block-product-page .details .price .old {
    text-decoration: line-through;
}



.block-product-page .details .component-infobox {
    margin-top: 40px;
}

.block-product-page .mobile-title {
    display: none;
}


.block-product-page .cart .already-in-cart {
    color: var(--color-red);
    font-weight: 500;
}

@media screen and (max-width: 1599px) {}
@media screen and (max-width: 1199px) {
    .block-product-page .photos {
        width: 50%;
        min-width: 50%;
    }
    .block-product-page .details {
        width: 50%;
        flex-grow: unset;
    }
}
@media screen and (max-width: 991px) {

    .block-product-page .photos {
        width: 100%;
        min-width: 100%;
        height: 500px;
    }
    .block-product-page .details {
        width: 100%;
    }

    .block-product-page {
        flex-wrap: wrap;
    }
    .block-product-page .details {
        padding-top: 20px;
        padding-left: 0px;
        width: 100%;
    }

    .block-product-page .mobile-title {
        display: block;
        text-align: center;
        width: 100%;

        margin-bottom: 20px;
        color: var(--color-brown-4);
    }

    .block-product-page .desktop-title {
        display: none;
    }

    .block-product-page .details .spec {
        margin-bottom: 20px;
    }

}
@media screen and (max-width: 767px) {
    .block-product-page .photos {
        height: 400px;
    }
}
@media screen and (max-width: 575px) {
    .block-product-page {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ~ Recommender ~ */

.block-recommender {
    background-color: var(--color-brown-0);
}

.block-recommender .container-max {
    position: relative;
    max-height: 600px;
    height: 600px;
}

.block-recommender .container-max .photo {
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: 500px;
}
.block-recommender .container-max .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.block-recommender .dots {
    position: absolute;

    right: 0px; top: 0px;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 80px;
}
.block-recommender .dots > i {
    color: var(--color-white);
    margin: 4px 0px;
    cursor: pointer;
}

.block-recommender .container-max .head-overlay {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.block-recommender .container-max .head-overlay {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.block-recommender .container-max .head-overlay > .container {
    display: flex;
    align-items: center;
}

.block-recommender .container-max .head-overlay .tile {
    background-color: rgba(248, 247, 244, 0.85);
    padding: 20px;
    max-width: 750px;
    width: 100%;
}
.block-recommender .container-max .head-overlay .tile h2 {
    color: var(--color-brown-4);
    font-size: 3em;
}
.block-recommender .container-max .head-overlay .tile p {
    color: var(--color-brown-4);
}
.block-recommender .container-max .head-overlay .tile h2,
.block-recommender .container-max .head-overlay .tile p {
    margin-bottom: 20px;
}
.block-recommender .container-max .head-overlay .tile .input-row-bot {
    display: flex;
    justify-content: flex-end;
}
.block-recommender .container-max .head-overlay .tile .input-row-bot > button {
    margin-left: 10px;
}

@media screen and (max-width: 991px) {
    .block-recommender .container-max .photo {
        padding-left: 0px;
    }
    .block-recommender .container-max .head-overlay .tile {
        max-width: unset;
    }
    .block-recommender .dots {
        display: none;
    }
}
/*
@media screen and (max-width: 575px) {
    .block-recommender .container-max .head-overlay > .container {
        align-items: flex-end;
    }
    .block-recommender .container-max .photo {
        height: 400px;
    }
}
*/
.block-recommender .container-max .head-overlay .container .photo-mobile {
    display: none;
}
@media screen and (max-width: 575px) {
    .block-recommender .container-max {
        max-height: unset;
        height: unset;
        width: 100%;
    }
    .block-recommender .container-max .photo {
        display: none;
    }
    .block-recommender .container-max .head-overlay {
        position: relative;
        top: unset; left: unset;
        width: 100%;
    }
    .block-recommender .container-max .head-overlay .container-fill {
        display: none;
    }
    .block-recommender .container-max .head-overlay .container {
        width: 100%;
        flex-wrap: wrap;
    }
    .block-recommender .container-max .head-overlay .container .photo-mobile {
        display: block;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Static Page ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.custom-introduction h1 {
    font-size: 2.2em;
    color: var(--color-brown-4);
    font-family: 'Cabin', sans-serif;
}

.custom-introduction .top {
    display: flex;
    flex-wrap: wrap;
}
.custom-introduction .top > img {
    width: 400px;
    height: 600px;
    object-fit: cover;
}

.custom-introduction .top .section {
    width: calc( 100% - 400px );
    padding-left: 40px;
}
.custom-introduction .top .section > h3 {
    color: var(--color-brown-4);
    margin-bottom: 20px;
    margin-top: 30px;
}
.custom-introduction .top .section > h3:first-child {
    margin-top: 0px;
}



.custom-introduction .bottom {
    display: flex;
    flex-wrap: wrap;
}
.custom-introduction .bottom > img {
    width: 450px;
    height: 500px;
    object-fit: cover;
}
.custom-introduction .bottom .section {
    width: calc( 100% - 450px );
    padding-right: 40px;
}

.custom-introduction .bottom .section > h3 {
    color: var(--color-brown-4);
    margin-bottom: 20px;
}

.custom-introduction .section {
    text-align: justify;
}

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

    .custom-introduction .top > img {
        width: 350px; height: 660px;
    }
    .custom-introduction .top .section {
        width: calc( 100% - 350px );
    }


    .custom-introduction .bottom > img {
        width: 400px;
        height: 500px;
    }
    .custom-introduction .bottom .section {
        width: calc( 100% - 400px );
    }

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

    .custom-introduction .top > img,
    .custom-introduction .bottom > img {
        width: 100%;
        height: 400px;
    }

    .custom-introduction .top .section,
    .custom-introduction .bottom .section {
        width: 100%;
        padding: 0px;
    }

    .custom-introduction .top .section h3:first-child {
        margin-top: 30px;
    }
}
@media screen and (max-width: 575px) {
    .custom-introduction {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Static Page ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.static-page > h1 {
    font-weight: 600;
    font-size: 2.2em;
    color: var(--color-brown-4);

    font-family: 'Cabin', sans-serif;
}

.static-page {
    text-align: justify;
}

@media screen and (max-width: 575px) {
    .static-page > h1 {
        font-size: 2.2em;
    }
    .static-page {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Products ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.products-layout-header {
    display: flex;
    justify-content: space-between;
}
.products-layout-header .filter-block {
    display: flex;
    align-items: center;
}
.products-layout-header .filter-block > p {
    margin: 0px;
    margin-right: 0px;
}

.products-layout-body {
    display: flex;
    flex-wrap: wrap;
}
.products-layout-body > .block-product:nth-child(4n) {margin-right: 0px;}
.products-layout-body > .block-product {
    margin-right: 20px;
    width: 360px;

    margin-bottom: 60px;
}

@media screen and (max-width: 1599px) {
    .products-layout-body > .block-product:nth-child(4n) {margin-right: 30px;}
    .products-layout-body > .block-product:nth-child(3n) {margin-right: 0px;}
    .products-layout-body > .block-product {
        margin-right: 30px;
        width: 360px;
    }
}
@media screen and (max-width: 1199px) {
    .products-layout-body > .block-product:nth-child(4n) {margin-right: 30px;}
    .products-layout-body > .block-product:nth-child(3n) {margin-right: 0px;}
    .products-layout-body > .block-product {
        margin-right: 30px;
        width: 300px;
    }
}
@media screen and (max-width: 991px) {
    .products-layout-body > .block-product:nth-child(4n) {margin-right: 20px;}
    .products-layout-body > .block-product:nth-child(3n) {margin-right: 20px;}
    .products-layout-body > .block-product:nth-child(2n) {margin-right: 0px;}
    .products-layout-body > .block-product {
        margin-right: 20px;
        width: 350px;
    }
}
@media screen and (max-width: 767px) {
    .products-layout-body > .block-product:nth-child(4n) {margin-right: unset;}
    .products-layout-body > .block-product:nth-child(3n) {margin-right: unset;}
    .products-layout-body > .block-product:nth-child(2n) {margin-right: unset;}
    .products-layout-body > .block-product {
        margin-right: unset;
        width: 100%;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Header ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.block-header {
    background-color: var(--color-brown-0);
    position: fixed;
    top: 0px; left: 0px;
    width: 100%;
    z-index: 3000;
}
.block-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px 0px;
}

.block-header .container > img {
    cursor: pointer;
    height: 58px;
    object-fit: contain;
}
.block-header .container .logo-title {
    width: 210px;
    padding-left: 10px;
}

.block-header .container .options {
    flex-grow: 1;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.block-header .container .options > button {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-brown-4);
    padding: 0px 10px;
    position: relative;
    margin: 0px;
}
.block-header .container .options > button > span {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(50% - 5px);
}
.block-header .container .options > button.selected > span {
    display: block;
}
.block-header .container .options > button .drop {
    pointer-events: none;
    opacity: 0;
    transform:
            translateY(40px)
            scaleY(0.95);
    transform-origin: top;


    transition:
        var(--transition-default) opacity,
        var(--transition-default) transform;

    position: absolute;
    top: calc(100% + 10px);
    left: -10px;

    width: max-content;
    background-color: var(--color-brown-1);
    padding: 20px;
}
.block-header .container .options > button .drop p {
    display: block;
    text-align: start;
    margin: 0px;
    padding: 5px 0px;
    cursor: pointer;

    transition:
        var(--transition-default) color;
}
.block-header .container .options > button .drop p:hover {
    color: var(--color-brown-3);
}
.block-header .container .options > button .drop.show {
    pointer-events: unset;
    opacity: 1;
    transform:
        translateY(0px)
        scaleY(1);
}

.block-header .container .menu,
.block-header .container .cart,
.block-header .container .search {
    width: 30px; height: 30px;
    cursor: pointer;
    margin-left: 20px;
}
.block-header .container .menu > img,
.block-header .container .cart > img,
.block-header .container .search > img {
    width: 100%; height: 100%;
    object-fit: contain;
}

.block-header .container .cart {
    position: relative;
}

.block-header .container .menu {
    display: none;
}

.block-header .container .cart > p {
    border-radius: 50%;
    text-align: center;
    background-color: var(--color-red);
    width: 23px; height: 23px; line-height: 23px;
    color: var(--color-white); font-weight: 600;
    margin: 0px;
    position: absolute;
    top: -10px; right: -10px;
    font-size: 0.8em;
}

@media screen and (max-width: 991px) {
    .block-header .container .search {
        margin-left: auto;
    }
    .block-header .container .options {
        display: none;
    }
    .block-header .container .menu {
        display: block;
    }
    .block-header .container {
        padding: 10px 0px;
    }
    .block-header .container > img { height: 40px; }
    .block-header .container .logo-title { width: 200px }
}

@media screen and (max-width: 575px) {
    .block-header .container {
        padding: 10px 10px;
    }
}
/* UNIQ */
@media screen and (max-width: 450px) {
    .block-header .container .menu,
    .block-header .container .cart {
        margin-left: 12px;
    }

    .block-header .container .logo-icon { display: none }
    .block-header .container .logo-title { padding: 0px; }
}

.mobile-menu {
    display: none;
    width: 100%;
    height: calc( 100vh - 60px );
    overflow: scroll;
    position: fixed;
    top: 60px;
    left: 100%;
    background-color: var(--color-brown-2);

    z-index: 2990;

    transition:
        var(--transition-default) left;
}
.mobile-menu.show {
    left: 0%;
}
.mobile-menu {
}
.mobile-menu .block {
    width: 100%;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
}
.mobile-menu .block a {
    cursor: pointer;
    font-size: 1em;
    padding: 5px 0px;
    color: var(--color-brown-4);
}
.mobile-menu .block a:last-child {border: unset;}

.mobile-menu .block.block-b {
    background-color: var(--color-brown-1);
}
.mobile-menu .block.block-b a {
    font-size: 1.2em;
    padding: 10px 0px;
    border-bottom: 1px solid var(--color-brown-2);
}
.mobile-menu .block.block-b a:last-child {border: unset;}

@media screen and (max-width: 991px) {
    .mobile-menu {
        display: block;
    }
}

.mobile-menu .logo {
    pointer-events: none;
    width: 100%;
    height: 80px;
    object-fit: contain;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Header :: vue-header-spacing-effect ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.vue-header-spacing-effect {
    height: 38px;
}

@media screen and (max-width: 991px) {
    .vue-header-spacing-effect {
        height: 0px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # [ Footer ] # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.footer {
    color: var(--color-white);
}

.footer .footer-top {
    background-color: var(--color-brown-1);
    padding-top: 60px;
    padding-bottom: 40px;
}

.footer .footer-bottom {
    background-color: var(--color-brown-4);
}


.footer .footer-top .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.footer .footer-logo .logo-block {
    width: 100%;
}
.footer .footer-logo .logo-block > img {
    width: 100%;
}
.footer .footer-logo .logo-block > img:first-child {
    height: 100px;
    object-fit: contain;
    padding-bottom: 10px;
}

.footer .footer-top .container .footer-logo .footer-payment {
    margin-top: 20px;
    width: 100%;
    height: 30px;
    object-fit: contain;
}

.footer .footer-top .container .footer-single-info {
    padding-left: 15px;
}

.footer .footer-top .container .footer-logo {
    width: 20%;
}
.footer .footer-top .container .footer-single-info {
    width: 20%;
}

.footer .footer-top .container .footer-logo {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.footer .footer-top .container h4 {
    font-size: 1.2em;
    width: 100%;
    padding-bottom: 8px;
    color: var(--color-brown-4);
    border-bottom: 2px solid var(--color-brown-2);
}

.footer .footer-top .container a {
    cursor: pointer;

    display: block;

    margin: 0px;
    padding: 0px;
    padding-top: 12px;
    font-weight: 300;

    color: var(--color-brown-4);
    text-decoration: unset;

    transition: var(--transition-default) color;
}

.footer .footer-top .container a:hover {
    color: var(--color-brown-3);
}




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

    .footer .footer-top .container .footer-logo {
        width: 100%;
    }
    .footer .footer-top .container .footer-single-info {
        width: 25%;
    }

    .footer .footer-top .container .footer-logo {
        margin-top: 40px;
        padding: 0px 100px;
        flex-direction: row;
        align-items: center;
        order: 10;
    }


}

/* max-width: 991px */
@media screen and (max-width: 1199px) {

    .footer .footer-top .container .footer-single-info {
        width: 50%;
    }

    .footer .footer-top .container .footer-logo {
        width: 50%;
        padding: 0px 40px;
        flex-direction: column;
        align-items: center;
    }

    .footer .footer-top .container .footer-logo .footer-payment {
        margin-top: 20px;
    }
    .footer .footer-top .container .footer-single-info {
        width: 50%;
        margin-top: 40px;
    }

}

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

    .footer .footer-top {
        padding-top: 20px;
    }

    .footer .footer-top .container .footer-logo {
        width: 100%;
        padding: 0px 30px;
        flex-direction: column;
        align-items: center;
    }
    .footer .footer-logo .logo-block > img:first-child {
        height: 120px;
    }

    .footer .footer-top .container .footer-single-info {
        width: 100%;
        margin-top: 40px;
    }
}

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


}

/* -- -- -- [ Bottom ] -- -- -- */

.footer .footer-bottom .container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;

    padding: 4px 0px;
}

.footer .footer-bottom .container .footer-bottom-left {
    cursor: default;

    margin: 0px;
    padding: 0px;
    margin-right: 6px;
    font-size: 0.8em;

    text-align: center;
}

.footer .footer-bottom .container .footer-bottom-right {
    cursor: pointer;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.footer .footer-bottom .container .footer-bottom-right p {
    margin: 0px;
    padding: 0px;
    margin-right: 6px;
    font-size: 0.8em;
}

@media screen and (max-width: 767px) {
    .footer .footer-bottom .container {
        flex-direction: column;
    }
    .footer .footer-bottom .container .footer-bottom-left {
        font-size: 0.8em;
    }
    .footer .footer-bottom .container .footer-bottom-right {
        margin-top: 10px;
    }
}

@media screen and (max-width: 575px) {
    .footer .footer-bottom .container {
        padding-top: 12px;
        padding-bottom: 68px;
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # [  PAGINATOR   ] # # # # # # # # # # # # # # # # # */
/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

.component-paginator {
    display: flex;
    justify-content: center;

    margin-bottom: 60px;
    margin-top: 20px;
}
.component-paginator div {
    font-weight: 500;
    font-size: 1.4em;
    margin: 0px 8px;
    padding: 4px 8px;

    min-width: 25px;

    color: var(--color-brown-3);
    cursor: pointer;
    transition: 0.3s color;
}
.component-paginator div.selected {
    color: var(--color-red);
}
.component-paginator div:hover {
    color: var(--color-red-light);
}

@media screen and (max-width: 767px) {
    .component-paginator div {
        font-size: 1.2em;
        margin: 0px 6px;
        padding: 4px 6px;
    }
}

@media screen and (max-width: 575px) {
    .component-paginator div {
        font-size: 1.3em;
        margin: 0px 4px;
        padding: 4px 6px;
    }
}

/* ÁRAK modul */
.agyagos-prices-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
}
.agyagos-prices-section br {
   display: none;
}
.agyagos-prices {
        background-color: var(--color-red);
        color: #fff;
        border-radius: 17px;
        padding: 23px;
        width: 510px;
        max-width: 100%;
}

.agyagos-prices > .price-title {
	text-align: center;
	text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 10px;
}

.agyagos-prices .price-rows {

}

.agyagos-prices .price-row {
    display: flex;
    align-items: center;
   width: 100%;
    border-bottom: 1px solid #ffffff66;
    padding: 12px 0;
}
.agyagos-prices .price-row:last-child {
	margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.agyagos-prices .price-row .price-title {
width: calc(100% - 110px);
}
.agyagos-prices .price-row .price-itself {
width: 110px;
    text-align: right;
}