/* 
========================================================================
MAIN LAYOUT
========================================================================
*/
html                                    { height:100%; overflow-y:scroll; overflow-x: hidden; overflow:-moz-scrollbars-vertical; }
body									{ background-color: #fff; }
body.main                               { padding: 0; background-color: #ffffff; }
div#pagebody							{ padding: 16px;}
#container                              { position: relative; width: 100%; margin: 0 auto; }
#centre_container                       { min-height: calc(100% - 100px); display: block; padding: 20px 20px 90px 20px; width: 1200px; max-width: 100%; margin: 0 auto; }
#centre_container.page-default          { width: 100% !important; padding: 0px 0 0px 0 !important; } /* this page-default style is applied dynamically in Template.master, we can use it to make home page full width*/
#centre_container.page-default #pagecontent_pad     { padding: 0; } /* this page-default style is applied dynamically in Template.master, we can use it to make home page full width*/
#centre_container.page-default #custompagetext      { margin: 0 0 10px 0; }
#header ~ div#centre_container:not(.page-category, .page-default)  { /*margin-top: 100px;*/}
#centre_container:not(.page-category, .page-default) div#pagecontent_pad { display: block; width: 1200px; max-width: 80%; margin: auto; float: none;}

/* 
========================================================================
HEADER
========================================================================
*/
#header                                 { top: 0; background-color: transparent; position: absolute; width: 100%; max-width: 100%; z-index: 99; height: 90px; }
#header .row                            { width: 1200px; max-width: 100%; margin: 0 auto; padding: 30px 30px 30px 30px; }
#header #hcol-left                      { text-align: left; }
#header #hcol-centre                    { text-align: center; }
#header #hcol-right                     { }
#header .logo                           { margin: 7px 0 0 0; width: 160px; float: left; }
#header i.fas                           { font-size: 21px; color: #ffffff; }
#header #menus                          { white-space: nowrap; display: inline-block; padding: 6px 0 0 0; margin: 0 auto; text-align: center; }
#header #icons                          { width: 112px; float: right; }
#header #icons #menuSearchLink          { display: inline-block; position: absolute; top: 10px; }
#header .big-menu-link                  { transition: all 0.5s ease; display: inline-block; color: #ffffff; padding: 7px 15px; font-size: 16px; font-weight: 400; margin: 0 0px; letter-spacing: 0.75px; /* border-radius: 20px; */ text-shadow: 0px 0px 26px rgb(0 0 0 / 49%);}
#header a.big-menu-link:hover           { background: #ffffff40; border-radius: 20px;}

.header--fixed                          { transition: filter 0.3s, height 0.1s; /*position: fixed !important;*/ z-index: 999; height: 55px !important; padding: 10px 10px !important; }

#header .menuSpecial                    { top: 89px; left: 0; width: 100%; background-color: #fff; display: none; z-index: 90; height: auto; position: absolute; padding: 10px 8px 8px 8px; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; box-shadow: rgba(0,0,0,0.1) 0 2px 2px; } 
#header.header--fixed .menuSpecial      { top: 54px; position: absolute; } 
#header.header--fixed .row              { padding: 0 30px; }

/* menus */
#header .custommegamenu                 { text-align: center; }
#header #categorymenu                   { width: 1200px; max-width: 100%; margin: 0 auto; }
#header #categorymenu h3                { font-weight: bold; margin-bottom: 25px; }
#header #categorymenu .custom-submenu   { /*width: 170px;*/ display: block; padding: 0px; text-align: left; vertical-align: top; } /* submenu formatting (columns) */
#header #categorymenu ul                { margin: 0 auto 20px auto; padding: 0; }
#header #categorymenu ul li             { list-style: none; text-align: left; margin: 0; padding: 0; line-height: 1.2; }
#header #categorymenu ul li a           { font-size: 100%; margin: 2px 0; display: inline-block;  }

/* this is an invisible overlay we show when menu shows, use it to close mega menu if user clicks away from menu */
#menuBackOverlay                        { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,0.0); z-index: 15; } /* z-index must be less than menu link */
#header a.right-off-canvas-toggle		{ float: right; display: inline-block; margin: 10px 20px 0 18px;}
#header img.logo						{ margin-left: 18px;}

/* 
========================================================================
FOOTER
========================================================================
*/
div#footer {
    padding: 16px;
}

div#footer > div.holder {
    background-image: url(/Skins/Kartris/Images/Footer.jpg);
    background-size: cover;
    border-radius: 16px;
	overflow: hidden;
}

#footer .footer-content {
	background-color: #333333;
	padding: 20px;
}

#footer .logo {
	opacity: 0.8;
	max-width: 150px;
}

#footer .inner a {
    margin: 0px;
    align-self: center;
    padding: 10px 36px;
    background-color: hsl(0deg 0% 0% / 18%);
}

#footer .inner {
    padding: 125px 20px;
}

#footer .inner a:before {
    content: "";
    /* background: #000000; */
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 20px;
    z-index: -1;
    opacity: .15;
    mix-blend-mode: multiply;
}


/* 
========================================================================
BREADCRUMB NAVIGATION TRAIL
========================================================================
*/
.breadcrumbtrail                        { margin: 130px auto 0 auto; width: 1200px; max-width: 100%; font-size: 80%; padding: 0 30px; display: block; text-decoration: none; font-size: 80%; }
.breadcrumbtrail span span              { color: #000; display: inline-block; padding: 0 0 0 0; letter-spacing: 1px; font-weight: bold; }
.breadcrumbtrail span span a            { color: #888; padding: 0 10px 0 0; display: inline-block; font-weight: normal; margin: 0; }
.breadcrumbtrail span span a:after		{ content: "/"; margin: 0 0 0 10px; } /* breadcrumb separator */

/* 
========================================================================
PAGE LOADING SPINNER
========================================================================
*/
.page-loading-container                 { position: fixed; left: 0px; top: 90px; height: calc(100% - 90px); /* 90px = header height plus little for dropshadow */ width: 100%; z-index: 9999; background-color: #fff; text-align: center; opacity: 1; }
.page-loading-container .spinner        { position: absolute; top: 40%; left: calc(50% - 25px); transform: translate(-50%, -50%); }
@keyframes spinner {
    to { transform: rotate(360deg); }
}
.page-loading-container .spinner:before { content: ''; box-sizing: border-box; position: absolute; width: 40px; height: 40px; margin-top: -15px; margin-left: -15px; border-radius: 50%; border: 3px solid #ccc; border-top-color: #333; animation: spinner .6s linear infinite; }

/* 
========================================================================
FADE IN FADE OUT
========================================================================
*/
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* 
========================================================================
OFF CANVAS MENU
========================================================================
*/
a.off-canvas-open                       { color: transparent; }
a.off-canvas-open::before               { }
a.off-canvas-close                      { color: #ffffff; font-size: 35px; font-weight: bold; display: block; padding: 1px 3px; position: absolute; top: 2px; right: 20px; }
a.left-off-canvas-toggle                { float: left; display: inline-block; margin: 18px 18px 0 18px; }
.off-canvas-wrap                        { min-height: 100%; }
.left-off-canvas-menu                   { padding: 0; background: none repeat scroll 0% 0% transparent; }
.left-off-canvas-menu .content          { min-width: 290px; position: fixed; border-right: solid 1px #777; margin-right: 10px; padding: 50px 10px 10px 10px; background: #eee; height: 100%; box-shadow: 1px 1px 10px #333; }
.left-off-canvas-menu ul li             { list-style-type:none; }
.left-off-canvas-menu ul li a           { text-align: left; color: #000; font-size: 90%; width: 100%; text-transform: uppercase; font-weight: normal; letter-spacing: 1px; line-height: 1.1em; padding: 3px 5px 3px 5px; margin: 0 0 1px 0; display: block; }
.left-off-canvas-menu ul li a:hover     { background-color: #000; color: #fff; }
a.toggleswitch                          { display: inline-block; margin-top: 15px; }
.move-left .exit-off-canvas             { box-shadow: none; }

a.right-off-canvas-toggle                { float: left; display: inline-block; margin: 18px 18px 0 18px; }
.off-canvas-wrap                        { min-height: 100%; }
.right-off-canvas-menu                   { width: 100%;padding: 0; background: none repeat scroll 0% 0% transparent; }
.right-off-canvas-menu .content          { min-width: 290px; width: 100%; position: fixed; border-right: solid 1px #777; margin-right: 10px; padding: 50px 10px 10px 10px;     background: rgb(28 28 28 / 89%); height: 100%; box-shadow: 1px 1px 10px #333; }
.right-off-canvas-menu ul li             { list-style-type:none; }
.right-off-canvas-menu ul li a           { transition: all ease 300ms; text-align: left; color: #ffffff; font-size: 17px; width: 100%; text-transform: uppercase; font-weight: normal; letter-spacing: 1px; line-height: 3; padding: 3px 5px 3px 5px; margin: 0 0 1px 0; display: block; }
.right-off-canvas-menu ul li a:hover     { color: #0081c9; }
a.toggleswitch                          { display: inline-block; margin-top: 15px; }
.move-right .exit-off-canvas             { box-shadow: none; }

aside ul.KartrisMenu {
    margin: 0px;
    padding: 20px 40px;
}

/* 
========================================================================
LOGIN STATUS
========================================================================
*/
#loginstatus                            { float: right; display: inline-block; color: #000; padding: 5px 0 9px 15px; margin: 5px 0 0 0; }
#loginstatus i.fas                      { display: inline-block; width: 28px; }
#loginstatus strong                     { font-weight: normal; font-size: 0.9em; text-transform: none; }
#loginstatus .loginbutton               { float: right; }
#loginstatus .loginbutton span.icontext { display: none; }
#loginstatus .loginbutton.loggedin      { }
#loginstatus #username,
#loginstatus #statuslabel               { display: none; }
#loginstatus:hover #account_menu        { width: 230px; margin: 27px 0 0 -170px; }
/* 
========================================================================
SEARCH BOX
========================================================================
*/
#section_searchbox                      { border-bottom: solid 1px #333; position: relative; margin: 3px 0 0 0; display: block; margin: 0 auto; width: 400px; max-width: 100%; height: 45px; }
#section_searchbox .row                 { padding: 0; }
#section_searchbox i.fas                { font-size: 160% !important; margin: 13px 0 0 6px; color: #000; cursor: pointer; }
#section_searchbox input[type="text"],
#section_searchbox input[type="search"]   { margin: 4px 0 15px 0; box-shadow: none; border: none; color: #000; font-size: 160%; background-color: transparent; }
/* 
========================================================================
OTHER CONTROLS language, currency, etc.
========================================================================
*/
#currencymenu                           { margin: 7px 20px 0 20px; width: 60px; overflow: hidden; float: left; }
#currencymenu select					{ color: #000; border: none; background-color: #fff; font-size: 0.9em; box-shadow: none; min-width: 70px; }
#languagemenu                           { font-size: 0.8em; margin: 8px 0 0 20px; float: left; text-align: left; display: block; max-width: 110px; border: none; border: solid 1px #000; }
#languagemenu .language-link            { display: inline-block; border: none; padding: 1px 3px; color: #000; text-transform: uppercase; }
#languagemenu .lang-selected            { background-color: #000; color: #fff; }
#recentlyviewed                         { padding: 50px 0 40px 0; text-align: center; }
/* 
========================================================================
TEMPLATE HOVERMENU
========================================================================
*/
.hovermenu                      { display: none; font-size: 100%; }
.hovermenu ul                   { margin: 0; padding: 0; }
.hovermenu ul li                { list-style: none; float: none; clear: both; margin: 0 0 0 0; padding: 2px 0 0 0; }
.hovermenu_holder:hover .hovermenu
                                { animation-name: fadein; animation-duration: 0.54s; min-height: 50px; box-shadow: rgba(0,0,0,0.1) 0 5px 5px; width: 270px; background-color: #fff; border: solid 1px #777; display: block; z-index: 999; text-align: left; height: auto; position: absolute; padding: 10px 8px 8px 8px; margin: 40px 0 0 -2px; }     
.hovermenu ul li a              { line-height: 1.0em; color: #000; padding: 3px 5px 3px 5px; margin: 2px 0; display: block; }
.hovermenu ul li a:hover        { background-color: #000; color: #fff; }
.hovermenu .button              { text-align: left; border-color: transparent; background-color: transparent; color: #000; width: 100%; font-weight: normal; letter-spacing: 1px; }
.hovermenu .button:hover        { background-color: #000; color: #fff; }
/* 
========================================================================
BASKET SUMMARY
========================================================================
*/
#minibasketholder                       { position: relative; }
.compactminibasket                      { float: right; width: auto; padding: 0; margin: 8px 0 0 11px; }
#minibasket                             { float: right; width: auto; padding: 0; margin: 5px 2px 0 0; }
#minibasket #minibasket_header          { background-color: transparent; padding: 5px 0 9px 9px;  }
#compactbasket_title                    { display: none; }
#compactbasket_totalprice               { display: none; font-size: 1.3em; color: #000; font-weight: bold; padding-left: 10px; z-index: 20; }
#compactbasket_noofitems span.bracket   { display: none; }
#minibasket h4                          { margin: 0; padding: 0; line-height: 0.8; vertical-align: top; letter-spacing: 0; }
#minibasket h4 strong                   { color: #999; font-weight: bold; }

.compactminibasket a,
#minibasket h4 a                        { font-size: 12px; }
#minibasket h4 a:hover                  { font-size: 12px; }
#compactbasket_noofitems                { font-size: 15px; display: inline-block; position: absolute; background-color: #f00; color: #fff; font-size: 1.0em; font-weight: bold; padding: 0 4px 1px 3px; margin: -6px 0 0 -6px; border-radius: 9px; line-height: 1.2; }
#compactbasket_noofitems.basket-items-0 { visibility: hidden; }
#minibasket:hover #minibasket_main      { margin: -3px 0 0 -235px; width: 280px; }
#minibasket:hover                       { }
#minibasket:hover h4 strong             { color: #000; }
#minibasket:hover h4 a                  { color: #000; }
#minibasket #contents                   { width: 100%; }
#minibasket #contents #orderinprogress,
#minibasket #contents #basketisempty    { padding: 1px 5px 12px 5px; font-weight: normal; color: #000; }
#minibasket #contents ul #totals        { margin-top: 10px; border-top: solid 1px #000; padding: 4px 5px 6px 10px; font-weight: normal; text-transform: uppercase; color: #000; font-size: 80%; text-align: right; }
#minibasket #contents ul #totals span.price
                                        { color: #000; font-weight: normal; font-size: 170%; }
#minibasket #contents ul #totals span.total
                                        { color: #000; font-weight: bold; font-size: 220%; }
#minibasket #contents ul #totals #minibasket_whereapplicable
                                        { margin: 10px 0 0 0; font-size: 85%; letter-spacing: 1px; }
#minibasket #contents ul #totals strong { font-weight: bold }

#minibasket ul#basketlinks #checkout_button
                                        { font-weight: bold; font-size: 110%; }

/* 
========================================================================
FOOTER
========================================================================
*/
#footer                                 { background-color: #fff; padding: 0; min-height: 332px; /*change this size depending on the height of the footer image you're using*/ width: 100%; }
#footer_inside                          { min-height: 332px; width: 1200px; max-width: 100%; margin: 0 auto; color: #999; padding: 0px; }
#footer .alignright                     { text-align: right; }
#footer a                               { color: #999; font-weight: normal; }
#footer a .fab                          { font-size: 2em; margin: 5px 0 0 10px; }
#footer a:hover                         { color: #000; }
#footer #copyright                      { font-size: 90%; margin: 45px 0 20px 0; }
#footer h2                              { margin: 0px; font-size: 62px; line-height: 1; }
#footer ul                              { margin: 0; font-size: 90%; padding: 0; list-style-type: none; }
#footer ul li                           { padding: 0; }
#footer ul li a                         {  }
#footer ul li a:hover                   { color: #000; }