@font-face {
    font-family: 'Lexend Deca';
    src: url('fonts/LexendDeca-Black.eot');
    src: url('fonts/LexendDeca-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/LexendDeca-Black.woff2') format('woff2'),
        url('fonts/LexendDeca-Black.woff') format('woff'),
        url('fonts/LexendDeca-Black.ttf') format('truetype'),
        url('fonts/LexendDeca-Black.svg#LexendDeca-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.eot');
    src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Regular.woff2') format('woff2'),
        url('fonts/Montserrat-Regular.woff') format('woff'),
        url('fonts/Montserrat-Regular.ttf') format('truetype'),
        url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --brown: #49322C;
    --orange: #EE5B16;
    --black: #000000;
    --gray: #979797;
}

body {font-family:'Montserrat';font-weight:normal;-moz-osx-font-smoothing:grayscale;color:white}
body, small, .fw-normal {font-weight:normal}
h1, h2, h3, h4, h5, h6, strong, b, .fw-black, h1 small, .dropdown-menu {font-family:'Lexend Deca';font-weight:900;line-height:inherit;}
h1, h2, h3, h4, h5, h6 {line-height:1.2}
.fs-0 {font-size:0!important}
.fs-1 {font-size:.75rem!important}
.fs-2 {font-size:1rem!important}
.fs-3 {font-size:1.25rem!important}
.fs-4 {font-size:1.5rem!important}
.fs-5 {font-size:1.75rem!important}
.fs-6 {font-size:2.5rem!important}
.fs-7 {font-size:3.25rem!important}
.fs-8 {font-size:6rem!important}
.fs-9 {font-size:8rem!important}
.font-montserrat {font-family:'Montserrat'!important;font-weight:normal!important}
.font-lexend {font-family:'Lexend Deca'!important;font-weight:900!important}

/* colors */
a, a:link, a:visited {color:var(--orange)}
a:hover {opacity:.7}
.text-brown {color:var(--brown)!important}
.text-orange {color:var(--orange)!important}
.text-black {color:var(--black)!important}
.text-gray {color:var(--gray)!important}
.text-danger, .form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label {color:rgba(255,255,255,.6)!important}
.alert-warning .text-danger {color:var(--danger)!important}
.a-defcolor {color:white!important}

.bg-brown {background-color:var(--brown)}
.bg-orange {background-color:var(--orange)}
.bg-black {background-color:var(--black)}
.bg-grad {
    min-height: 100vh;
    background: rgb(70,5,3);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,35,7,1)), color-stop(100%,rgba(70,5,3,1)));
    background: -webkit-linear-gradient(top,  rgba(96,35,7,1) 0%, rgba(70,5,3,1) 100%);
    background:    -moz-linear-gradient(top,  rgba(96,35,7,1) 0%, rgba(70,5,3,1) 100%);
    background:     -ms-linear-gradient(top,  rgba(96,35,7,1) 0%, rgba(70,5,3,1) 100%);
    background:      -o-linear-gradient(top,  rgba(96,35,7,1) 0%, rgba(70,5,3,1) 100%);
    background:         linear-gradient(to bottom, rgba(96,35,7,1) 0%, rgba(70,5,3,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(96,35,7,1)', endColorstr='rgba(70,5,3,1)',GradientType=0 );
    background-attachment: fixed;
}

.qc-cmp2-persistent-link {background:var(--orange)!important;border-color:var(--orange);color:white!important}

/* button */
.btn-orange, .btn-t-orange {
    color:white!important;
    background-color:var(--orange);
    border-color:var(--orange);
    font-family:'Lexend Deca';
    font-weight:900;
    font-size:1rem;
    padding:.5em 1.75em;
    border-radius:1.7em;
    line-height:1.7em;
    transition:all 300ms ease 0ms;
}
.btn-orange:hover, .btn-orange.active, .btn-t-orange {color:var(--orange)!important;background-color:white;border-color:white}
.btn-t-orange:hover, .btn-t-orange.active {color:white!important;background-color:var(--orange);border-color:var(--orange)}
.btn-white {
    color:var(--brown)!important;
    background-color:white;
    border-color:white;
    font-family:'Lexend Deca';
    font-weight:900;
    font-size:1rem;
    padding:.5em 1.75em;
    border-radius:1.7em;
    line-height:1.7em;
}
.btn-brown {
    color:white!important;
    background-color:var(--brown);
    border-color:var(--brown);
    font-family:'Lexend Deca';
    font-weight:900;
    font-size:1rem;
    padding:.5em 1.75em;
    border-radius:1.7em;
    line-height:1.7em;
}
.btn-pager {
    color:var(--orange)!important;
    background-color:white;
    border-color:white;
    font-family:'Lexend Deca';
    font-weight:900;
    font-size:1rem;
    transition:all 300ms ease 0ms;
}
.btn-pager:hover, .btn-pager.active {color:white!important;background-color:var(--orange);border-color:var(--orange)}
.alert-white {
    color:var(--brown)!important;
    background-color:white;
    padding:1rem;
    border-radius:1.7rem;
    height:100%;
    margin:0;
}

/* pager */
.page-link {height:2rem;display:grid;align-items:center;}

/* input */
input[type=text], input[type=password], input[type=email], input[type=file], .custom-select, textarea {
    border: 0 none;
    border-radius: 1.7rem!important;
    padding: 1.5rem 2rem;
}
.form-control:disabled {background:#ddd!important;border:0 none}
article input[type=text],
article input[type=password],
article input[type=email],
article input[type=file],
article .custom-select,
article textarea {
    border: 1px solid var(--orange);
}
.custom-select, textarea {padding:.75rem 1.5rem!important;height:auto!important}
.custom-check, .custom-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.custom-check input, .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color:white;
}
.custom-radio .checkmark {border-radius:50%}
.custom-check:hover input ~ .checkmark, .custom-radio:hover input ~ .checkmark {background-color:#ccc}
.custom-check input:checked ~ .checkmark {background-color:var(--orange)}
.custom-radio input:checked ~ .checkmark {background-color:white}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.custom-check input:checked ~ .checkmark:after, .custom-radio input:checked ~ .checkmark:after {display:block}
.custom-radio .checkmark:after {
    top: 4px;
    left: 4px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background:var(--orange);
}
.custom-check .checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.parents-div {display:none}

/* cart */
#cart {
    position:fixed;
    top:20vh;
    right:calc(6rem - 50vw);
    width:50vw;
    z-index:9999;
    display: inline-flex;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
#cart.open {right:0}
#cart .open-cart {display:inline-block;color:var(--orange)!important}
#cart .open-cart .fa-stack {font-size:3rem}
#cart .float-cart {
    display:inline-block;
    max-height:80vh;
    overflow-y:scroll;
    width:100%;
}
#cart .btn-cart > small {
    top:0;
    left:0;
    width:2rem;
    height:2rem;
    font-size:1rem;
    border-radius:1rem;
}
#cart .btn-cart:hover .fa-square {opacity:.6}
#cart-editor hr {margin:.25rem 0;}
.btn-cart {position:relative}
.btn-cart > small {
    position:absolute;
    top:-.5rem;
    right:0;
    width:1.5rem;
    height:1.5rem;
    border-radius:.75rem;
    background-color:var(--orange);
    border: 1px solid white;
    color:white;
    font-size:.75rem;
    font-weight: 600;
    line-height:2;
    text-align:center;
}
#fade {width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:9998;background-color:rgba(0,0,0,.6);display:none}

/* navbar */
#logo {width:20vw}
#logo path {fill:white}
.navbar-brand {margin:0 3%}
.usr-menu {margin-right:3%}
ul.menu {
    background-color:white;
    border-radius:1.7rem;
    line-height:1.7;
}
ul.menu a {color:var(--brown)!important;font-family:'Lexend Deca';font-weight:900;}
ul.menu a:hover {opacity:.75}
#menu .nav-item {padding:0 .5rem}
#menu .nav-item.border-bottom {border-color:var(--orange)!important}
#menu .nav-item.active {background-color:var(--orange);border-radius:1.7rem}
#menu .nav-item.active > a {color:white!important}
.navbar-toggler {color:white!important;border:0 none;margin-right:4%}
.navbar-toggler:hover {opacity:.6}

/* section */
section {padding-bottom:6rem}
.default section {padding-bottom:0}

/* default */
#user-log {
    background-color:white;
    border-radius:1rem;
    margin-bottom:2rem;
    padding:1rem;
}
#user-log fieldset.alert {margin:0}
#user-log h2 {color:var(--black);font-size:1.5rem}
#user-log form {padding:0}

/* article */
article {
    background-color:white;
    color:var(--brown);
    border-radius:1.7rem;
    padding:3rem 4rem!important;
}
article h1 {color:black}
.img-div {overflow:hidden;border-radius:1.7rem}

/* user */
.avatar-div {width:60%;padding-top:60%;position:relative;margin:0 auto;border-radius:50%;overflow:hidden;}
.avatar-div img {position:absolute;top:0;}
.user-qr svg {width:10rem;height:auto}

/* cookie */
.cookie {
    position:fixed;
    bottom:0;
    z-index:9999;
    color:var(--brown);
}
.cookie-div {
    background-color:white;
    border-top-left-radius:1.7rem;
    border-top-right-radius:1.7rem;
    padding:1.5rem 2rem;
}

/* footer */
footer {opacity:.8;text-align:center}
.default {position:relative;}
.default footer {text-align:left;position:absolute;bottom:0;}

@media screen and (max-width:1199px){
    .navbar-brand {margin:0 4%}
    .usr-menu {margin-right:4%}
    article {padding:3rem!important}
    #cart {right:calc(6rem - 70vw);width:70vw}
}
@media screen and (max-width:991px){
    #logo {width:30vw}
    article {padding:2rem!important}
    #cart {right:calc(6rem - 85vw);width:85vw}
}
@media screen and (max-width:768px){
    #logo {width:35vw}
    #cart {right:calc(4rem - 90vw);width:90vw}
    #cart .open-cart {font-size:2rem}
}
@media screen and (max-width:480px){
    #logo {width:40vw}
    article {padding:1.5rem!important}
    h1 {font-size:2.25rem}
    #cart {right:calc(4rem - 100vw);width:100vw}
}