/*
Layout Properties (display, position, z-index)
Box Model Properties (width, height, margin, padding)
Typography Properties (color,font-size, font-family, text-align, text-transform)
Visual Properties (background, border, box-shadow)
Misc Properties (cursor, overflow, )
*/

@import url("https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Eczar:300,400,500,600,700,800,900");

/* ++ GOOGLE MATERIAL ICONS ++ */

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url(https://example.com/MaterialIcons-Regular.eot);
    /* For IE6-8 */
    src: local("Material Icons"), local("MaterialIcons-Regular"), url(https://example.com/MaterialIcons-Regular.woff2) format("woff2"), url(https://example.com/MaterialIcons-Regular.woff) format("woff"), url(https://example.com/MaterialIcons-Regular.ttf) format("truetype");
}

.ggl {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
}


/* -- GOOGLE MATERIAL ICONS -- */


/* ++ COLORS ++ */


/* -- COLORS -- */

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: "Roboto", "Helvetica", sans-serif;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .4px;
    line-height: 24px;
}

::-moz-selection {
    background: #4d4d4d;
    /* WebKit/Blink Browsers */
    color: white;
}

::selection {
    background: #4d4d4d;
    /* WebKit/Blink Browsers */
    color: white;
}

::-moz-selection {
    background: #4d4d4d;
    /* Gecko Browsers */
    color: white;
}

section {
    overflow: auto;
}

p {
    margin: 0;
    margin-bottom: .9rem;
}

a {
    text-decoration: none;
    color: #4d4d4d;
    -webkit-transition: color .2s linear;
    transition: color .2s linear;
}

a:hover {
    color: #e5611f;
}

ul {
    list-style: none;
}

img.resp {
    max-width: 100%;
    height: auto;
    display: block;
}

.t-thin {
    font-weight: 100;
}

.t-200 {
    font-weight: 200;
}

.t-300 {
    font-weight: 300;
}

.t-nrml {
    font-weight: 400;
}

.t-thck {
    font-weight: 900;
}

.t-hge {
    font-size: 2.4rem;
}

.t-big {
    font-size: 1.8rem;
}

.t-lrg {
    font-size: 1.4rem;
}

.t-mdl {
    font-size: 1.2rem;
}

.t-nrm {
    font-size: 1rem;
}

.t-ltl {
    font-size: .9rem;
}

.t-sml {
    font-size: .8rem;
}

.t-cntr {
    text-align: center !important;
}

.t-rght {
    text-align: right;
}

.t-left {
    text-align: left;
}

.t-jstf {
    text-align: justify;
}

.t-sccs {
    color: #5cb75c;
}

.t-info {
    color: #347ab7;
}

.t-warn {
    color: #efac4d;
}

.t-dngr {
    color: #8a0000;
}

.t-prim {
    color: #ff7300;
}

.t-dprm {
    color: #803900;
}

.t-lprm {
    color: #ffb980;
}

.t-scnd {
    color: #57616b;
}

.t-whte {
    color: white;
}

.t-lght {
    color: #e6e6e6;
}

.t-smke {
    color: #cccccc;
}

.t-mute {
    color: #b3b3b3;
}

.t-slvr {
    color: #999999;
}

.t-gray {
    color: #57616b;
}

.t-dgry {
    color: #666666;
}

.t-dark {
    color: #4d4d4d;
}

.t-ddrk {
    color: #1e2124;
}

.t-blck {
    color: #1a1a1a;
}

.t-pink {
    color: #e93f8e;
}

.t-rred {
    color: #cc2839;
}

.t-orng {
    color: #e5611f;
}

.t-dorg {
    color: #974117;
}

.t-yllw {
    color: #ffc105;
}

.t-mgrn {
    color: #29a847;
}

.t-ygrn {
    color: #4eb52c;
}

.t-pcfc {
    color: #17a4ba;
}

.t-azre {
    color: #4a86ed;
}

.t-dblu {
    color: #1d3658;
}

.t-indi {
    color: #6812f3;
}

.t-viol {
    color: #361259;
}

.t-brwn {
    color: #5b270b;
}

.t-umbr {
    color: #705d57;
}

.t-lbge {
    color: #f6f3ef;
}

.bg-prim {
    background-color: #ff7300;
}

.bg-scnd {
    background-image: url("../imgs/bg-scnd.jpg");
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-sccs,
.bg-success {
    background-color: #5cb75c;
}

.bg-warn {
    background-color: #efac4d;
}

.bg-dngr {
    background-color: #8a0000;
}

.bg-info,
.bg-primary {
    background-color: #347ab7;
}

.bg-whte {
    background-color: white;
}

.bg-brgt {
    background-color: whitesmoke;
}

.bg-lght {
    background-color: #e6e6e6;
}

.bg-smke {
    background-color: #cccccc;
}

.bg-mute {
    background-color: #b3b3b3;
}

.bg-slvr {
    background-color: #999999;
}

.bg-gray {
    background-color: #57616b;
}

.bg-dgry {
    background-color: #666666;
}

.bg-dark {
    background-color: #4d4d4d;
}

.bg-ddrk {
    background-color: #1e2124;
}

.bg-blck {
    background-color: #1a1a1a;
}

.bg-dblk {
    background-color: black;
}

.bg-pink {
    background-color: #e93f8e;
}

.bg-rred {
    background-color: #cc2839;
}

.bg-orng {
    background-color: #e5611f;
}

.bg-dorg {
    background-color: #974117;
}

.bg-yllw {
    background-color: #ffc105;
}

.bg-mgrn {
    background-color: #29a847;
}

.bg-ygrn {
    background-color: #4eb52c;
}

.bg-pcfc {
    background-color: #17a4ba;
}

.bg-azre {
    background-color: #4a86ed;
}

.bg-dblu {
    background-color: #1d3658;
}

.bg-indi {
    background-color: #6812f3;
}

.bg-viol,
.bg-secondary {
    background-color: #361259;
}

.bg-brwn {
    background-color: #5b270b;
}

.bg-umbr {
    background-color: #705d57;
}

.bg-lbge {
    background-color: #f6f3ef;
}

.p-0 {
    padding: 0 !important;
}

.p-5 {
    padding: .5em !important;
}

.p-10 {
    padding: 1.0em !important;
}

.p-15 {
    padding: 1.5em !important;
}

.p-20 {
    padding: 2.0em !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-5 {
    padding-top: .5em !important;
}

.pt-10 {
    padding-top: 1.0em !important;
}

.pt-15 {
    padding-top: 1.5em !important;
}

.pt-20 {
    padding-top: 2.0em !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-5 {
    padding-right: .5em !important;
}

.pr-10 {
    padding-right: 1.0em !important;
}

.pr-15 {
    padding-right: 1.5em !important;
}

.pr-20 {
    padding-right: 2.0em !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-5 {
    padding-bottom: .5em !important;
}

.pb-10 {
    padding-bottom: 1.0em !important;
}

.pb-15 {
    padding-bottom: 1.5em !important;
}

.pb-20 {
    padding-bottom: 2.0em !important;
}

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

.pl-5 {
    padding-left: .5em !important;
}

.pl-10 {
    padding-left: 1.0em !important;
}

.pl-15 {
    padding-left: 1.5em !important;
}

.pl-20 {
    padding-left: 2.0em !important;
}

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

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

.px-10 {
    padding-left: 1.0em !important;
    padding-right: 1.0em !important;
}

.px-15 {
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
}

.px-20 {
    padding-left: 2.0em !important;
    padding-right: 2.0em !important;
}

.py-0 {
    padding-top: .5em !important;
    padding-bottom: .5em !important;
}

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

.py-10 {
    padding-top: 1.0em !important;
    padding-bottom: 1.0em !important;
}

.py-15 {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
}

.py-20 {
    padding-top: 2.0em !important;
    padding-bottom: 2.0em !important;
}

.m-0 {
    margin: 0 !important;
}

.m-5 {
    margin: .5em !important;
}

.m-10 {
    margin: 1.0em !important;
}

.m-15 {
    margin: 1.5em !important;
}

.m-20 {
    margin: 2.0em !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-5 {
    margin-top: .5em !important;
}

.mt-10 {
    margin-top: 1.0em !important;
}

.mt-15 {
    margin-top: 1.5em !important;
}

.mt-20 {
    margin-top: 2.0em !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-5 {
    margin-right: .5em !important;
}

.mr-10 {
    margin-right: 1.0em !important;
}

.mr-15 {
    margin-right: 1.5em !important;
}

.mr-20 {
    margin-right: 2.0em !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-5 {
    margin-bottom: .5em !important;
}

.mb-10 {
    margin-bottom: 1.0em !important;
}

.mb-15 {
    margin-bottom: 1.5em !important;
}

.mb-20 {
    margin-bottom: 2.0em !important;
}

.ml-0 {
    margin-bottom: 0 !important;
}

.ml-5 {
    margin-left: .5em !important;
}

.ml-10 {
    margin-left: 1.0em !important;
}

.ml-15 {
    margin-left: 1.5em !important;
}

.ml-20 {
    margin-left: 2.0em !important;
}

.mx-a {
    margin-left: auto;
    margin-right: auto;
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mx-5 {
    margin-left: .5em !important;
    margin-right: .5em !important;
}

.mx-10 {
    margin-left: 1.0em !important;
    margin-right: 1.0em !important;
}

.mx-15 {
    margin-left: 1.5em !important;
    margin-right: 1.5em !important;
}

.mx-20 {
    margin-left: 2.0em !important;
    margin-right: 2.0em !important;
}

.my-0 {
    margin-top: .5em !important;
    margin-bottom: .5em !important;
}

.my-5 {
    margin-top: .5em !important;
    margin-bottom: .5em !important;
}

.my-10 {
    margin-top: 1.0em !important;
    margin-bottom: 1.0em !important;
}

.my-15 {
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
}

.my-20 {
    margin-top: 2.0em !important;
    margin-bottom: 2.0em !important;
}

.br-6 {
    border-radius: 6px;
}

.brt-6 {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

.brt-8 {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.b-slvr {
    border: 1px solid #999999;
}

.wrppr {
    margin: 0 auto;
    max-width: 100%;
    width: 1220px;
}

.pos-rltv {
    position: relative;
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(38, 38, 38, 0.6);
    position: absolute;
    top: 0;
    left: 0;
}

.flex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.f-cntr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-item-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.flex-item-2 {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

.flex-item-3 {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
}

.flex-item-4 {
    -webkit-box-flex: 4;
    -ms-flex: 4;
    flex: 4;
}

.flex-item-5 {
    -webkit-box-flex: 5;
    -ms-flex: 5;
    flex: 5;
}

.flex-item-6 {
    -webkit-box-flex: 6;
    -ms-flex: 6;
    flex: 6;
}

.flex-item-7 {
    -webkit-box-flex: 7;
    -ms-flex: 7;
    flex: 7;
}

.gap-0 {
    gap: 1em;
}

.gap-5 {
    gap: 0.5rem;
}

.gap-10 {
    gap: 1rem;
}

.gap-15 {
    gap: 1.5rem;
}

.gap-20 {
    gap: 2rem;
}

.mdl {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.mdl .mdl-box {
    background-color: white;
    padding: 0.5rem 1rem;
    margin: 3rem;
    width: auto;
    height: 80%;
    border-radius: 12px;
}

.mdl .mdl-main {
    padding-top: 0.5rem;
    text-align: center;
}

.mdl .mdl-main img {
    display: inline;
    -o-object-fit: cover;
    object-fit: cover;
}

.mdl .mdl-head {
    border-bottom: 1px solid #cccccc;
}

.mdl .mdl-head h2 {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    color: #ff7300;
}

.mdl .mdl-head a {
    float: right;
}

.mdl .mdl-head:hover {
    color: #1e2124;
}

.mdl.visible {
    opacity: 1;
    pointer-events: all;
}

.btn {
    display: inline-block;
    background-color: #ffc105;
    color: #57616b;
    padding: .6rem 1rem;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    text-align: center;
}

.btn.btn-block {
    display: block;
}

.btn.btn-outline {
    border: 3px solid #ff7300;
    background-color: white;
    color: #57616b;
}

.btn:hover {
    background-color: #803900;
    color: white;
}

.btn-sm {
    padding: .3rem .5rem;
}

.btn-rred {
    background-color: #cc2839;
    color: white;
}

.btn-mgrn {
    background-color: #29a847;
    color: white;
}

@media screen and (max-width: 860px) {
    .flex-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .mbl-ord-2 {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }
    .mbl-t-cntr {
        text-align: center;
    }
    section.nav {
        background-color: #1e2124 !important;
        z-index: 0;
    }
    section.nav .flex-row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    section.nav img {
        width: 60vw;
        -ms-flex-item-align: baseline;
        align-self: baseline;
    }
    section.nav ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    section.nav ul li {
        text-align: center;
    }
    section.nav ul li.hidden {
        display: block;
    }
    section.nav ul li:not(.hidden) {
        display: none;
    }
    section.nav ul.expnd li:not(.hidden) {
        display: block;
    }
    .jumbo .jumbo-slide .slide-title {
        font-size: 1.2rem !important;
    }
    .jumbo .jumbo-slide .slide-link {
        font-size: .8rem !important;
    }
}

.header {
    padding: 1rem;
}

h1 {
    font-family: "Eczar", 'helvetica', 'sans-serif';
    font-size: 2.5rem;
    letter-spacing: 5px;
    padding-top: 1.2rem;
}

h1 span {
    letter-spacing: 0px;
}

.header-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.header-item .header-item-icon {
    color: #57616b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 2.4rem;
}

.header-item .header-item-links {
    padding-left: .8rem;
    line-height: 1.2rem;
}

.nav {
    background-color: #ffc105;
}

.nav .nav-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.nav li a {
    color: white;
}

.nav ul {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    margin: 0;
}

.nav li a {
    display: block;
    font-size: 1rem;
    letter-spacing: 1px;
    padding: .9rem 1rem;
    font-weight: 400;
    color: #57616b;
}

.nav li a:hover {
    background-color: #e5611f;
    color: white;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

.nav .nav-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.nav .nav-form {
    background-color: white;
    border-radius: 4px;
    padding: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.nav .nav-form input {
    border: 0;
    outline: 0;
    padding: 10px 18px;
}

.nav .nav-form input::-webkit-input-placeholder {
    color: #999999;
}

.nav .nav-form input:-ms-input-placeholder {
    color: #999999;
}

.nav .nav-form input::-ms-input-placeholder {
    color: #999999;
}

.nav .nav-form input::placeholder {
    color: #999999;
}

.nav .nav-form a {
    background-color: #ffc105;
    color: #4d4d4d;
    font-size: 1.2em;
    border-radius: 4px;
    padding: 6px 12px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.nav .nav-form a:hover {
    background-color: #4d4d4d;
    color: #ffc105;
}

.featured-grid {
    display: -ms-grid;
    display: grid;
    height: 490px;
    gap: 18px;
    -ms-grid-columns: 3fr 1fr;
    grid-template-columns: 3fr 1fr;
    -ms-grid-rows: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.featured-big {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / span 2;
    background: url("/assets/imgs/book-featured.jpg") no-repeat center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.featured-big .featured-cover {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.featured-big .featured-cover img {
    max-height: 80%;
    border: 8px solid white;
}

.featured-big .featured-info {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    padding-top: 9rem;
}

.featured-big .featured-dscr {
    font-weight: 300;
    font-size: 1.6rem;
    line-height: normal;
}

.featured-big .featured-title {
    font-size: 2rem;
    line-height: normal;
    padding-top: 6px;
    font-weight: bold;
}

.featured-big .featured-sub {
    font-weight: 300;
    padding-bottom: 4rem;
}

.featured-side {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.featured-botd {
    background: url("/assets/imgs/book-of-the-day-2.jpg") no-repeat center;
}

.featured-allb {
    background: url("/assets/imgs/all-books.jpg") no-repeat center;
}

.featured-side a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    font-size: 1.5rem;
    color: #1e2124;
    padding: 1.8rem .4rem;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
    background-color: rgba(255, 255, 255, 0.6);
}

.featured-side a .featured-icon {
    padding-top: .6em;
    font-size: 2em;
    opacity: 0;
    -webkit-transition: all .8s ease;
    transition: all .8s ease;
}

.featured-side a:hover {
    color: #efac4d;
    font-size: 1.7rem;
    padding-top: 4rem;
    background-color: rgba(255, 255, 255, 0.9);
    background-color: #ffc105;
    color: #1e2124;
}

.featured-side a:hover .featured-icon {
    opacity: 1;
}

.categories-nav {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    min-width: 265px !important;
}

.categories-title {
    background-color: #ffc105;
    color: #57616b;
    padding: .9em 1.5em .9em 1.5em;
    font-weight: 500;
    font-size: 1.2em;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.categories-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.categories-links a {
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    padding: .8em 1.5em .8em 1em;
    font-weight: 400;
}

.categories-links a:nth-child(odd) {
    background-color: whitesmoke;
}

.categories-links a:last-child {
    border-bottom: 1px solid #e6e6e6;
}

.categories-links a:hover,
.categories-links a.active {
    background-color: #ffd761;
    color: #57616b;
    font-weight: bold;
}

.product-row {
    gap: 1.5rem;
    padding-bottom: 1.5rem;
}

.product-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.product-img {
    height: 300px;
    background-color: #f6f3ef;
    padding: 25px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.product-img img {
    max-width: 100%;
    -o-object-fit: fill;
    object-fit: fill;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}

.product-img a:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.product-data {
    background-color: white;
    padding: .5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.product-data .product-author {
    padding-top: .5rem;
    color: #999999;
    font-weight: 300;
}

.product-data .product-title {
    font-weight: bold;
}

.product-prc {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.newsletter-form .newsletter-title {
    font-size: 1.3em;
    padding-left: 1rem;
}

.newsletter-form .newsletter-info {
    padding-left: 1rem;
}

.newsletter-form form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.newsletter-form form input {
    outline: none;
    border: none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    font-size: 1.1rem;
    padding: .7em 1.3em;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.newsletter-form form a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: white;
    padding-top: 4px;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #e5611f;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.footer-content .flex-item-1 {
    border-right: 1px solid #e6e6e6;
}

.footer-content .flex-item-1:last-child {
    border-right: none;
}

.footer-fbook {
    padding-top: 2em;
    border-top: 1px solid #e6e6e6;
}

.footer-links a {
    padding: .6em 0;
    color: #57616b;
    font-weight: 400;
}

.footer-links a:hover {
    color: #e5611f;
}

.footer-addr {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-addr li {
    padding: .6em 0;
    color: #57616b;
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.footer-addr li i {
    padding-right: .7rem;
}

.main-header {
    color: white;
    margin-bottom: 1.2em;
    padding: .9em 1.5em .65em 1.5em;
    font-size: 1rem;
    font-weight: bold;
    width: 22%;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    background-color: #ffc105;
    color: #4d4d4d;
    text-align: center;
}

.categories-nav .main-header {
    width: auto;
    text-align: left;
}

form.form-std {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 2vw 2vw 2vw;
}

form.form-std input,
form.form-std textarea,
form.form-std select {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    border: 1px solid #cccccc;
    outline: none;
    padding: 12px 18px;
    margin: .7em 0;
    font-size: 1em;
    width: 100%;
}

form.form-std input[type="submit"] {
    background-color: white;
    color: #ffc105;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.2em;
    border: 2px solid #ffc105;
    outline: none;
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

form.form-std input[type="submit"]:hover {
    background-color: #ffc105;
    color: white;
    border-color: white;
}

nav.pages {
    margin-bottom: 1.5em;
}

ul.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    gap: 3px;
}

ul.pagination li a {
    display: block;
    background-color: #4d4d4d;
    color: whitesmoke;
    border-radius: 3px;
    width: 2.4rem;
    height: 2.4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 300;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

ul.pagination li a:hover,
ul.pagination li a.active {
    background-color: #ffc105;
    color: #57616b;
}

table.tbl {
    width: 100%;
}

table.tbl td,
table.tbl th {
    vertical-align: middle;
    padding: .8rem;
    border-bottom: 1px solid silver;
}

.alrt {
    color: white;
    margin: 1rem 1rem 0 1rem;
    padding: 1rem;
}

.alrt-danger {
    background-color: #d94a4a;
}

.alrt-success {
    background-color: #329a77;
}


/*
.gllry {
    img {
        transition: all 0.4s ease;
        cursor: pointer;
        border-radius: 12px;
        &:hover {
            filter: grayscale(100%);
            transform: scale(1.08);
        }
    }
    .flex-item-1 {
        overflow: hidden;
    }
}

.gllry-img {
    object-fit: cover;
}

.bg-offer-1 {
    background-image: url("../imgs/offer-11.jpg");
    background-position: center center;
    background-size: 120%;
    transition: all 0.4s ease;
    min-height: 200px;
    &:hover {
        background-size: 130%;
    }
}

.bg-offer-2 {
    background-image: url("../imgs/offer-15.jpg");
    background-position: center center;
    background-size: 120%;
    transition: all 0.4s ease;
    min-height: 200px;
    &:hover {
        background-size: 130%;
    }
    order: 1;
}

.bg-offer-3 {
    background-image: url("../imgs/offer-14.jpg");
    background-position: center center;
    background-size: 120%;
    transition: all 0.4s ease;
    min-height: 200px;
    &:hover {
        background-size: 130%;
    }
}

.bg-offer-4 {
    background-image: url("../imgs/offer-13.jpg");
    background-position: center center;
    background-size: 120%;
    transition: all 0.4s ease;
    min-height: 200px;
    &:hover {
        background-size: 130%;
    }
    order: 1;
}

.pos-cntr-btm {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 15%;
}

.footer a {
    color: $clr-slvr;
    transition: all 0.4s ease;
    &:hover {
        color: $clr-dprm;
    }
}

section.nav {
    // background-image: url('../imgs/header.jpg');
    border-bottom: 1px solid $clr-lght;
    width: 100%;
    img {
        padding: 8px;
    }
    &>.flex-row {
        justify-content: space-between;
        align-items: center;
    }
    ul {
        display: flex;
        gap: 0.3rem;
        a {
            display: block;
            color: $clr-gray;
            // text-shadow: 2px 2px 4px black;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 1.1rem;
            padding: 0.6rem 1rem;
            transition: all 0.4s ease;
        }
        a:hover {
            background-color: $clr-prim;
            color: $clr-whte;
        }
        .extra a {
            background-color: $clr-prim;
            &:hover {
                background-color: $clr-whte;
                color: $clr-prim;
            }
        }
        .hidden {
            display: none;
        }
    }
}

.jumbo {
    height: 780px;
    max-height: 40vw;
    text-align: center;
    overflow: hidden;
    position: relative;
    background-color: $clr-dark;
    .jumbo-slide {
        position: absolute;
        margin: 0px auto;
        text-align: center;
        width: 100%;
        transition: all 1.5s ease;
        opacity: 0;
        &.visible {
            opacity: 1;
        }
        img {
            position: relative;
            margin: 0px auto;
        }
        .slide-overlay::before {
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: hsla(0, 0%, 28%, 0.8);
            z-index: 5;
            position: absolute;
        }
        .slide-contents {
            position: absolute;
            width: 100%;
            top: 0;
            z-index: 10;
            padding-top: 15%;
            text-align: center;
            color: $clr-smke;
        }
        .slide-title {
            font-size: 3.5vw;
            font-weight: 900;
        }
        .slide-link {
            margin-top: 1.5vw;
            font-size: 1.5vw;
            position: relative;
            a {
                color: $clr-whte;
                transition: all .4s ease;
                display: block;
                padding: 8px;
            }
            a:hover {
                background-color: $clr-prim;
            }
        }
    }
}

.ov-hide {
    overflow: hidden;
}

.zoom-10 {
    transition: all .4s ease;
}

.zoom-10:hover {
    transform: scale(110%);
}

.zoom-15 {
    transition: all .4s ease;
}

.zoom-15:hover {
    transform: scale(115%);
}

.zoom-20 {
    transition: all .4s ease;
}

.zoom-20:hover {
    transform: scale(120%);
}

.zoom-25 {
    transition: all .4s ease;
}

.zoom-25:hover {
    transform: scale(125%);
}

.zoom-30 {
    transition: all .4s ease;
}

.zoom-30:hover {
    transform: scale(130%);
}

.zoom-40 {
    transition: all .4s ease;
}

.zoom-40:hover {
    transform: scale(140%);
}

.zoom-50 {
    transition: all .4s ease;
}

.zoom-50:hover {
    transform: scale(150%);
}




.info-bar {
    background-color: $clr-whte;
    border-bottom: 1px solid $clr-prim;
    padding: .4rem 0;
    text-transform: uppercase;
    color: $clr-slvr;
    font-size: 1rem;
    a {
        color: $clr-slvr;
        font-size: 1rem;
        padding-left: 2rem;
        transition: color 1s ease;
    }
    a:hover {
        color: $clr-prim;
    }
}

.catalog-nav {
    background-color: $clr-prim;
    display: flex;
    margin: 0;
    padding: 0;
    li {
        a {
            display: block;
            text-align: center;
            padding: 1rem 1.6rem;
            color: $clr-whte;
            text-transform: uppercase;
            transition: all .3s linear;
        }
        a:hover,
        a.active {
            color: $clr-prim;
            background-color: $clr-whte;
        }
    }
    /*li {
        display: inline-block;
    }
    a {
        display: block;
        color: $clr-whte;
        transition: all 1s ease;
        padding: .4rem 1rem 0 .4rem;
    }
    * /
}
*/


/*
// Header:
@import "./scss/layout/header";
@import "./scss/layout/jumbo";

// Sidebar:
@import "./scss/layout/sidebar";

// Content:
@import "./scss/layout/content";

/* -- LAYOUT COMPONENTS -- */


/* ++ SITE CONTENT ++ * /

// Typography:
@import "./scss/content/typo";

// Tables:
@import "./scss/content/tables";

/* -- SITE CONTENT -- */


/* ++ COMPONENTS ++ * /

// Buttons:
@import "./scss/components/buttons";

// Forms:
@import "./scss/components/forms";

// Modal:
@import "./scss/components/modal";

/* -- COMPONENTS -- */


/* ++ UTILITIES ++ * /

// Transition classes:
@import "./scss/utilities/transitions";

/* -- UTILITIES -- */


/*# sourceMappingURL=styles.css.map */