:root {
    --bg: #f7f3ee;
    --lt: #d14120;
    --lt2: #718f44;
    font-size: 18px;
    line-height: 1.4em;
}


@font-face{
    font-family: 'Merriweather Bold';
    src: url('/fonts/merriweather-bold-webfont.woff2') format('woff2'),
         url('/fonts/merriweather-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather Regular';
    src: url('/fonts/merriweather-regular-webfont.woff2') format('woff2'), 
         url('/fonts/merriweather-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'Poppins Regular';
    src: url('/fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('/fonts/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Fonts */
body { font-family: 'Poppins Regular'; background: var(--bg); }
h1, h2, h3, h4, h5, h6, div.contact { font-family: 'Merriweather Bold'; font-weight: normal; }
footer { font-family: 'Poppins Regular'; font-weight: normal; }

a { color: var(--lt); text-decoration: none; }
a:hover { text-decoration: underline; }

a[name=top] { position: absolute; display: block; width: 0; height: 0; }
a[rel=up] { display: inline-block; margin: 0 0 0.5em 25px; padding-top: calc(25px + 1rem); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }


h1, h2, h3, h4, h5, h6 { color: #444; }
hr { border-style: solid; width: 80%; color: #444; margin: 2em auto; }

body { margin: 0; }
form { position: relative; }


header, a[rel=up], a[rel=up] svg, header.nav { transition: ease-in-out 0.3s; }
header { text-align: center; background: #444; }
header, header a { color: white; }
header a[rel=up] img { padding: 1rem; }

header nav, header nav a, div.contact, div.contact a { color: white; text-decoration: none; }
header nav a:hover, div.contact a:hover { text-decoration: underline; }

div.contact { font-size: 2.5rem; position: absolute; top: 25px; left: 25px; }
div.contact a { padding: 0; color: white; }
div.contact img { height: 2.5rem; margin-right: 0.75rem; }

header div.social { font-size: 2.5rem; position: absolute; top: 25px; right: 25px; }
header div.social img { height: 1.75rem; margin-left: 0.25rem; }


#ml, #tnav, label[for=tnav] { display: none; }

nav ul, nav ul li { list-style: none; margin: 0; padding: 0; }
nav ul li { display: inline-block; }

header nav { font-size: 1rem; text-align: center; background: white; height: 30px; padding: 0.2rem 0; 
    border-bottom: 2px solid #444; }
header nav a { color: #444; }
/*header nav ul { padding: 15px 30px; }*/


header nav ul.topnav { display: inline-block; padding: 0 10px; width: initial; }
header nav ul.topnav, header nav ul.topnav a { font-weight: normal; line-height: 1.4em; }
header nav ul.topnav li:last-of-type a:after { display: none; }
header nav ul.topnav li { padding: 0.2rem 0.5em; float: left; }


header nav ul.topnav ul { position: absolute; z-index: 0; opacity: 0; margin-top: -8px;
    width: 300px; font-size: 90%; transition: ease-in 0.1s; left: -1000px; line-height: 1.4em; padding: 15px 0 0 0; }
header nav ul.topnav ul li { background: #444; padding: 0.6em; text-align: left; display: block; float: left; 
    width: calc(100% - 1.2em); }
header nav ul.topnav ul li:first-of-type { padding-top: 1.2em; }
header nav ul.topnav ul li:last-of-type { padding-bottom: 1.2em; }
header nav ul.topnav ul li a:after { display: none; }
header nav ul.topnav ul a { color: white; }

header nav > ul.topnav > li:hover ul,
header nav > ul.topnav > li:focus-within ul{ opacity: 1; z-index: 1000; left: auto; }

li.tn + ul.sn { border: 1px solid #f00; }



.cbtn, #btnAb { background: #444; padding: 0.5em 0.75rem; font-size: 1rem; border-radius: 6px 6px; 
    text-decoration: none; color: white; display: inline-block; font-weight: bold; margin: 0.75rem 0; }
/*.cbtn { float: right; }*/
.flr { float: right; }
.bx { padding: 1rem; border: 1px solid #444; display: inline-block; margin-bottom: 2rem; width: calc(100% - 2rem); }
.bx input[type=number] { font-size: 20px; }

.totals th, .totals td { text-align: right; }
.totals td { padding-right: 0.75rem; }

.ct { width: 80%; margin: 1rem auto; }
.ct:after { content: ''; display: block; clear: both; }

div.bc { text-align: center; margin-bottom: 0.7rem; }
div.bc img { width: 80%; margin: 1.4rem 0; max-width: 1100px; }


ul.shp { padding: 2.25em 0 1.25em 0; list-style: none; text-align: center;
    background: url(/images/finial.svg) no-repeat top left, url(/images/finial-r.svg) no-repeat top right;
    background-size: 51%, 51%; }
ul.shp li { font-size: 16px; }
ul.shp a { padding: 0.4em 0.1em; color: #444; font-weight: bold; }



#socfeed { width: 100%; margin: 0.25rem 0 0 0; overflow-x: hidden; word-break: break-word; }
#socfeed p { font-size: 0.8rem; }
#socfeed .picture img { margin-top: 0.25rem; }
#socfeed .postdate { font-size: 0.6rem; text-align: right; margin-top: -0.5em; }
#socfeed h5 { font-size: 1.25rem; font-weight: bold; color: #444; }

#socfeed p:first-of-type { position: relative; padding: 1.5em; }
#socfeed p:first-of-type:before, #socfeed p:first-of-type:after { font-size: 2.5rem; line-height: 1em; position: absolute; 
    display: block; color: #444; }
#socfeed p:first-of-type:before { content: '\201c'; top: 0.3em; left: 0; }
#socfeed p:first-of-type:after { content: '\201d'; right: 0; margin-top: -0.2em; }



header.pin { position: fixed; top: 0; width: 100%; z-index: 1000; }
header.pin a[rel=up] { padding-top: 15px; }
header.pin a[rel=up] img { padding: 0.5rem; height: 25px; width: auto; }
header.pin div.social img { height: 1.25rem; }



section { padding: 0 7.5vw; color: #333; font-size: 20px; line-height: 1.5em; }
section a {  }
section a:hover {  }
section h1 { font-size: 28px; padding: 0; margin: 0.35em 0 0.5em 0; font-weight: normal; line-height: 1.45em; text-align: center; }
section h1 + h2, section h1 + p, .section h2 + p { margin-top: 0.3em; }
section h2 { font-size: 24px; padding: 0; margin: 0 0 0.4em 0; font-weight: normal; line-height: 1.45em; text-align: center; }
section h3 { font-size: 20px; padding: 0; margin: 0; font-weight: normal; line-height: 1.45em; }
section h4 { font-size: 14px; padding: 0; margin: 0; font-weight: normal; line-height: 1.65em; }
section h5 { font-size: 12px; padding: 0; margin: 0; font-weight: normal; }
section h5 a {  }
section h6 { color: #333; font-size: 11px; padding: 0; margin: 0; font-weight: normal; }
section h6 a { color: #333; }
section p { font-size: 14px; line-height: 1.5em; }

section li { font-size: 14px; line-height: 1.5em; margin-bottom: 0.4em; }

section article:after { display: block; clear: both; content: ''; }

section > div.cb { margin: 2rem 25px 0 25px; }


article.c1 { margin: 2rem 50px 0 50px; }

article.c2 { 
    margin: 2rem 25px 0 25px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 60px;
    -moz-column-gap: 60px;
    column-gap: 60px;
}

    article.c2 > div { 
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        padding: 25px;
    }

    article.c2 > div h3:first-child, article.c2 > div p:first-child, article.c2 > div ul:first-child { margin-top: 0; }
    article.c2 > div img { width: calc(100%) !important; height: auto !important; max-width: 100% !important; }
    

article.c2sl { 
    margin: 2rem 25px 0 25px;
}
    article.c2sl:after { content: ''; display: block; clear: both; }

    article.c2sl > div { 
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }
    
    article.c2sl > div:nth-child(1) { width: 275px; float: left; padding: calc(25px + 1.5rem) 0 0 25px }

    article.c2sl > div:nth-child(2) { 
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        padding: 25px 25px 0 350px;
    }

    article.c2sl > div h3:first-child, article.c2sl > div p:first-child, article.c2sl > div ul:first-child { margin-top: 0; }
    article.c2sl > div img { width: calc(100%) !important; height: auto !important; max-width: 100% !important; }
    

    
article.c3 { 
    margin: 2rem 12.5px 0 12.5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
}

    article.c3 > div { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; margin: 0 12.5px; }

    article.c3 > div h3:first-child, article.c3 > div p:first-child, article.c3 > div ul:first-child { margin-top: 0; }
    article.c3 > div img { width: calc(100%) !important; height: auto !important; max-width: 100% !important; }
    article.c3 h2 a, article.c3 h3 a { text-decoration: none; color: #000; }


article.c4 { 
    margin: 2rem 12.5px 0 12.5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
}

    article.c4 > div { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; margin: 0 12.5px; }

    article.c4 > div h4:first-child, article.c4 > div p:first-child, article.c4 > div ul:first-child { margin-top: 0; }
    article.c4 > div img { width: calc(100%) !important; height: auto !important; max-width: 100% !important; }
    article.c4 h2 a, article.c4 h3 a { text-decoration: none; color: #000; }


aside.it { background-size: cover; height: 43vw; background-position: top center; background-repeat: no-repeat; }
aside.is { background-size: cover; height: calc(100vw * 0.2033); }

/*width: 100%; height: 43vw; object-fit: cover; object-position: top center;*/


article.ib { margin: 0; }

    article.ib:after { display: block; clear: both; content: ''; }
    article.ib img { margin: 0; float: left; height: calc((100vw / 4) * 0.75) !important; 
        object-fit: cover; object-position: center center; }
    article.ib h3 { color: #fff; background: #777; text-align: center; 
        padding: 0.5rem; margin-bottom: 0; }
    article.ib p { display: inline; font-size: 0; line-height: 0; }

    /* one item */
    article.ib img:first-child:nth-last-child(1),
    article.ib a:first-child:nth-last-child(1) {
    /* -or- li:only-child { */
        width: 100% !important;
    }

    /* two items */
    article.ib img:first-child:nth-last-child(2),
    article.ib img:first-child:nth-last-child(2) ~ img,
    article.ib a:first-child:nth-last-child(2),
    article.ib a:first-child:nth-last-child(2) ~ a {
        width: 50% !important;
    }

    /* three items */
    article.ib img:first-child:nth-last-child(3),
    article.ib img:first-child:nth-last-child(3) ~ img,
    article.ib a:first-child:nth-last-child(3),
    article.ib a:first-child:nth-last-child(3) ~ a {
        width: 33.3333% !important;
    }

    /* four items */
    article.ib img:first-child:nth-last-child(4),
    article.ib img:first-child:nth-last-child(4) ~ img,
    article.ib a:first-child:nth-last-child(4),
    article.ib a:first-child:nth-last-child(4) ~ a {
        width: 25% !important;
    }

    /* five items */
    article.ib img:first-child:nth-last-child(5),
    article.ib img:first-child:nth-last-child(5) ~ img,
    article.ib a:first-child:nth-last-child(5),
    article.ib a:first-child:nth-last-child(5) ~ a {
        width: 20% !important;
    }
    
    /* one item */
    article.ib a:first-child:nth-last-child(1) img
    /* two items */
    article.ib a:first-child:nth-last-child(2) img,
    article.ib a:first-child:nth-last-child(2) ~ a img
    /* three items */
    article.ib a:first-child:nth-last-child(3) img,
    article.ib a:first-child:nth-last-child(3) ~ a img
    /* four items */
    article.ib a:first-child:nth-last-child(4) img,
    article.ib a:first-child:nth-last-child(4) ~ a img
    /* five items */
    article.ib a:first-child:nth-last-child(5) img,
    article.ib a:first-child:nth-last-child(5) ~ a img {
        width: 100% !important;
    }

    article.ib p > a { margin: 0; line-height: 0; float: left; display: inline-block; 
        color: #fff; text-decoration: none; position: relative; }

    article.ib p > a[title]:after { content: attr(title); width: calc(100% - 20px); background: rgba(20, 20, 20, 0.90); 
        padding: 10px; text-align: center; position: absolute; left: 0; bottom: 10%; line-height: 1.5em; opacity: 0; 
        transition: ease-in-out 0.3s; font-size: 12px; }

    article.ib p > a[title]:hover:after { opacity: 1; }

    article.ibt img { margin: 0; float: left; height: calc(100vw / 3) !important; }



article.ig { margin: 1rem 0 0 0; padding-bottom: 5px; }
    article.ig:after, article.ig p:after { display: block; clear: both; content: ''; }

    article.ig h3 { color: #fff; background: #777; text-align: center; 
        padding: 0.5rem; margin-bottom: 0; }

    article.ig p { display: flex; flex-direction: row; flex-flow: row wrap; margin: 0; }

    article.ig img { width: 100% !important; height: 100% !important; 
        object-fit: cover; object-position: center center; }

    article.ig a { margin: 0; line-height: 0; float: left; display: inline-block; 
        color: #fff; text-decoration: none; position: relative; width: 25%; height: calc((100vw/4)*0.75);
        border: 10px solid white; box-sizing: border-box; }
   
    article.ig a[title]:after { content: attr(title); width: calc(100% - 20px); background: rgba(20, 20, 20, 0.90); 
        padding: 10px; text-align: center; position: absolute; left: 0; bottom: 10%; line-height: 1.5em; opacity: 0; 
        transition: ease-in-out 0.3s; font-size: 12px; }

    article.ig a[title]:hover:after { opacity: 1; }

section article.ig:last-child { margin-bottom: -2rem; }



article.map { }
article.map iframe { width: 100%; height: 40vh; }



.pp { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 2rem 0 0 0; }
.pp > div:nth-of-type(1) { width: 25%; }
.pp > div:nth-of-type(2) { width: 45%; }
.pp > div:nth-of-type(3) { width: 25%; }

.pp img { max-height: 600px; width: 100%; object-fit: contain; object-position: center; }

.basket input[type=number] { font-size: 20px; width: 2.5rem; text-align: center; }
.bx input[type=text], .bx input[type=password], .bx select { font-size: 20px; }


h2.aq, h3.aq, h4.aq { padding: 0.75em 0 0 0; cursor: pointer; display: inline-block; clear: right; }
h2.aa, h3.aa, h4.aa { color: var(--lt); }
h2 + div.ans, h3 + div.ans { padding-bottom: 0.5em; }


.inf { height: 190px; overflow-x: scroll; overflow-y: hidden; }
.inf .imgs { height: 170px; width: 2000px; }
.inf .imgs img { height: 170px; }

.glp { background: #444; color: white; padding-top: 3px; margin-top: 1.5em; }
.glp h4 { padding: 1em; margin: 0; text-align: center; color: #fff; }


.nlf { width: 100%; height: 375px; display: block; margin: 1em 1.5em 1.5em 0; }


footer { color: white; background-color: #444; padding: 0.75rem 2.5rem; 
     margin-top: 1.75rem; text-align: center; }
footer nav { padding-bottom: 1rem; font-size: 0.9rem; }
footer nav.sitemap li a { display: inline-block; color: #fff; padding: 0.2rem 0.3rem; }
footer nav.sitemap ul ul li:first-of-type:before { text-align: left; }
footer nav.sitemap ul:not(.sn) > li:nth-of-type(2):after { text-align: center; }
footer nav.sitemap ul > li:last-of-type:after { display: none; }
footer nav.sitemap ul ul { display: none; }
footer nav, footer nav a { color: #fff; }
footer p { font-size: 11px; line-height: 1.3em; }
footer a { color: #fff; }
footer nav ul.social { padding-top: 1rem; }
footer nav ul.social img { height: 24px; margin: 0 0.2rem; }

#ci { text-align: center; position: fixed; bottom: 0; z-index: 600; padding: 0.5em 0; background: rgba(255,255,255,0.8); }
#ci .x { font-size: 110%; font-weight: bold; padding: 3px 8px;  }


@media 
    only screen and (min-width : 320px) and (max-width : 749px) and (-webkit-device-pixel-ratio : 1)
{
}

@media 
    only screen and (min-width : 750px) and (max-width : 1479px) and (-webkit-device-pixel-ratio : 1)
{
}

@media 
    only screen and (min-width : 1480px) and (-webkit-min-device-pixel-ratio : 1)
{
}

/*All responsive*/
@media 
    only screen and (min-device-width : 300px) and (max-device-width : 1480px)
{
    .resp #sb { display: none !important; }

    .resp body { overflow-x: hidden; border-top-width: 135px; }
    .resp header { padding: 3rem 0 1px 0; }
    .resp header nav, .resp nav.subnav, .resp h2.tt { display: none; }

    .resp header.pin { height: 55px !important; padding: 0; }
    .resp header.pin a[rel=up] { margin-top: 0; top: 10px; margin-bottom: 15px; }
    .resp header.pin a[rel=up] svg { height: 70px !important; }

    .resp a[rel=up] { display: block; text-align: center; padding: 0; top: 15px; position: relative; margin: 0 0 30px 0; }
    .resp a[rel=up] img { max-width: 628px; width: 80%; height: auto; padding: 0; }

    .resp div.contact { font-size: 0; padding: 0; position: absolute; top: 25px; right: 25px; left: unset; }
    .resp div.contact a { padding: 0; margin-left: 10px; }
    .resp div.contact img { height: 1rem; }
    .resp div.social { right: 15px; }

    .resp a[rel=contact] { position: absolute; top: 10px; right: 10px; padding: 4px; width: 28px; text-align: center; background: #fff; }
    .resp a[rel=contact] img { height: 28px !important; width: 20px !important; }
    .resp a[rel=phone] { font-size: 0; }

    .resp div.contact, .resp div.social { top: 15px; }
    .resp a[rel=phone]:before, .resp div.social img { height: 26px; }
    .resp a[rel=phone]:before { margin-right: 0; }

    .resp nav.sitemap { line-height: 1.6em; }

    .resp label[for=tnav] { display: block; position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; }
    .resp label[for=tnav]:after { content: ''; display: block; width: 26px; height: 26px; 
          background: #444 url(/images/mt.svg) center center no-repeat; background-size: contain; 
          cursor: pointer; position: absolute; border: 5px solid #444; z-index: 200; }

    .resp #tnav { display: inline-block; visibility: hidden; position: absolute; top: -100px; left: 0; }
    .resp #tnav:checked ~ label {  }
    .resp #tnav:checked ~ label:after {  }

    .resp #tnav:checked ~ #ml { display: block !important; z-index: 100; }

    .resp #ml { list-style: none; padding: 0.25em 0; margin: 0; position: absolute; top: 50px; left: 10px; 
          background: #444; display: none; font-size: 20px; box-shadow: -10px 10px 20px 0px rgba(0,0,0,0.5);
          max-width: calc(100% - 20px); }
    .resp #ml a { color: #fff; display: block; padding: 0.5em 0.9em; font-size: 17px; }

    
    .resp section { margin: 0; padding: 0; }

    

    .resp .pp .bx { width: 80%; }


    .resp .inf .ttl { text-align: center; }
    .resp .inf .imc { -webkit-overflow-scrolling: touch; }

    .resp iframe { width: calc(100% + 40px); margin: 1em 0 0 0; }

    .resp article.ig a[title]:after {
      font-size: 11px;
    }

    .resp footer { margin: 3rem 0 0 0; }
}

@media 
    only screen and (min-width : 400px) and (max-width : 1480px)
{
    .resp .lc { width: calc(100% - 60px) !important; }
    .resp .rc { width: calc(100% - 120px) !important; 
        column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;
        column-gap: 60px; -webkit-column-gap: 60px; -moz-column-gap: 60px; 
        padding: 1em 60px 0 60px !important; border-top: 1px solid #444;
        margin-left: 0; margin-right: 0;
    }
    .resp .rc article { width: 100%; margin: 0; break-inside: avoid-column; }
    .resp .rc article:last-of-type { border: none !important; }
    .resp .rc article:last-of-type img { max-width: 250px; }

}

@media 
    only screen and (min-width : 300px) and (max-width : 699px) 
{
    .resp #av { width: 75%; margin-left: calc(-37.5% - 0.75em); top: 1em; }

    .resp header nav { max-width: initial; }
    .resp header nav ul.topnav { text-align: center; }
    .resp header nav ul.topnav li { float: none; padding-left: 0.3em; padding-right: 0.3em; }
    .resp header nav ul.topnav li:after { display: none; }

    .resp header.pin a[rel=up] { padding-top: 5px; }
    .resp header.pin a[rel=up] img { padding: 0; height: 25px; width: auto; }
    .resp header.pin div.social { display: none; }

    .resp div.pnls { padding: 0; -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
    .resp aside.p3 { width: 100%; }
    .resp aside.p3 p, aside.p3 h4 { display: none; }
    .resp aside.p3:nth-of-type(2) { margin: 0; }

    article.c3, article.c4 { display: block; padding: 0 0 1em 0; }

    .resp article { column-count: 1 !important; }
    .resp article > div { width: 100% !important; clear: both !important; padding: 0 !important; margin: 0 !important; }
    
    .resp .productlist, .resp article.productlist div.product, 
    .resp article.productlist div.product div, .resp pp, .resp .pp > div 
        { display: block; text-align: center; height: auto; width: auto; }
    .resp .productlist h4 { height: auto !important; }
    .resp article.productlist div.product div:after { content: none; }

    .resp .ft .item, .resp .cs .item, .resp .product img { width: 100% !important; height: calc(100vw) !important; }
    .resp .product img { margin-top: 1rem; }

    .resp .nlf { position: relative; left: -50px; width: calc(100% + 100px); }

    .resp .bx th, .resp .pay th, .resp .bx td, .resp .pay td { display: block; width: auto; }
    .resp .bx, .resp .pay { width: 90% !important; }
}

@media 
    only screen and (min-device-width : 700px) and (max-device-width : 1480px)
{
    .resp a[rel=up] { padding: 0; }
    .resp a[rel=up] svg { height: 90px !important; }
    /*.resp a[rel=up] { display: inline-block; padding: 35px 45px 13px 30px; background: rgba(255,255,255,0.85); 
        margin-top: 100px; top: initial; position: initial; }*/

    .resp header { margin-bottom: 5px; }
    .resp div.pnls { padding: 0; -moz-column-gap: 5px; -webkit-column-gap: 5px; column-gap: 5px; }
    .resp aside.p3 { width: 100%; }

    .resp .resp .lc section { padding: 1em 60px 0 60px; }
    .resp .resp .lc section h1, .resp .lc section h2 { text-align: left; }
    .resp .stack {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
    .resp iframe { width: 100%; margin: 1em 0 0 0; }
}

@media 
    only screen and (min-width : 819px) and (max-width : 1048px)
{
    html:not(.resp) header:not(.pin) a[rel=up] svg { height: 87px; width: 181px; }
}

@media 
    only screen and (min-width : 819px) and (max-width : 950px)
{
    html:not(.resp) header.pin a[rel=up] svg { height: 45px; width: 93px; }
}