@font-face {
    font-family : poppins;
    src         : url("includes/fonts/poppins/Poppins-Regular.otf");
}
@font-face {
    font-family : Poppins-light;
    src         : url("includes/fonts/poppins/Poppins-Light.otf");
}
@font-face {
    font-family : poppins-semiBold;
    src         : url("includes/fonts/poppins/Poppins-SemiBold.otf");
}
* {
    box-sizing      : border-box;
    border          : none;
    position        : relative;
    text-decoration : none;
}
:root {
    --txt01     : #111;
    --txt02     : #222;
    --txt03     : #333;
    --txt04     : #444;
    --txt05     : #555;
    --txt06     : #666;
    --txt07     : #777;
    --txt08     : #888;
    --txt09     : #999;
    --blue01    : #2696FF;
    --blue02    : rgba(10,60,220,1);
    --blueShadow: rgba(20,50,200,0.5);
    --red01     : rgba(200,30,10,1);
    --red02     : rgba(200,10,10,1);
    --red03     : rgba(200,50,30,1);
    --msgStack  : rgba(255,50,10,1);
    --fontMain  : poppins;
    --fontLight : Poppins-light;
    --fontTitle : poppins-semiBold;
    --fontSafe  : Verdana, sans-serif;
    --leftW     : 270px;
}





html,body {
    background  : #FFF;
    width       : 100%;
    min-width   : 750px;
    height      : 100%;
    padding     : 0;
    margin      : 0;
    font-family : var(--fontSafe);
    font-family : var(--fontTitle);
    font-size   : 0;
}
body {
    height      : auto;
}
.maintenance_warning {
    background  : red;
    width       : 100%;
    height      : auto;
    position    : sticky;
    top         : 0px;
    color       : #FFF;
    z-index     : 9999;
}
.maintenance_warning .txt_block {
    text-align  : center;
    font-size   : 10pt;
}
.noscript { 
    color       : var(--msgStack);
    font-size   : 14pt;
    text-align  : center;  
}

h1,h2,h3,h4,h5,h6 {
    display     : inherit;
    height      : inherit;
    margin      : inherit;
    font-family : inherit;
    font-size   : inherit;
    font-weight : inherit;
}


/* Info top */
#top_nav {
    width           : 100%;
    padding-left    : var(--leftW);
    position        : fixed;
    z-index         : 99;
}
#info_top {
    background          : var(--blue01);
    background-image    : linear-gradient(to left, rgba(0,0,0,0.5), var(--blue01));
    width               : 100%;
    height              : 54px;
    line-height         : 54px;
    color               : #FFFFFF;
}
#info_top .info_top_item {
    display         : inline-block;
    height          : 100%;
    text-align      : center;
    vertical-align  : top;
}
#info_top .info_top_item.cart a {
    padding : 8px;
}
#info_top a {
    display     : block;
    width       : 100%;
    height      : 100%;
    line-height : 54px;
    padding     : 0px 18px;
    font-size   : 12pt;
    color       : #FFFFFF;
    transition  : 0.5s;
}
#info_top a:hover {
    background  : rgba(255,255,255,0.15);
}
#info_top img {
    max-height  : 100%;
}
.cart_counter {
    --size          : 24px;
    background      : #FFF;
    box-shadow      : 0px 0px 0px 4px #2696FF;
    width           : var(--size);
    height          : var(--size);
    line-height     : var(--size);
    border-radius   : 100%;
    position        : absolute;
    right           : -15px;
    top             : 20px;
    color           : #333;
    font-size       : calc( var(--size) - 50% );
    /*mix-blend-mode  : lighten;*/
}
#info_top .group {
    position:absolute;
    right:40px;
}
/*
#info_top .info_top_item:last-child {
    position    : absolute;
    right       : 0px;
}
*/





/* Top Navigation */
#menu_top {
    background      : #FFF;
    box-shadow      : 0px 5px 10px 0px rgba(0,0,0,0.5);
    width           : 100%;
    min-width       : 900px;
    height          : 54px;
    padding-left    : 10px;
    overflow        : hidden;
}
#menu_top > div.menu_item {
    display         : inline-block;
    width           : 10%;
    min-width       : 100px;
    height          : 54px;
    line-height     : 54px;
    font-size       : 12pt;
    text-align      : left;
    vertical-align  : top;
}
#menu_top div.menu_item a {
    display         : block;
    width           : 100%;
    height          : 100%;
    padding-left    : 10px;
    color           : #444;
    transition      : background 0.5s;
}
#menu_top div.menu_item a:hover {
    background      : rgb(0,150,255);
    color           : #FFF;
}

#menu_top .menu_sub {
    display         : none;
    background      : #EEE;
    text-align      : left;
    position        : fixed;
}
#menu_top .menu_sub .menu_item {
    width           : auto;
    height          : 35px;
    line-height     : 35px;
}
#menu_top .menu_sub a {
    display         : block;
    width           : 100%;
    height          : 100%;
    padding-left    : 15%;
    padding-right   : 10px;
    transition      : background 0.4s!important;
}





/* Left Navigation */

#menu_left {
    --logoH         : 180px;
    --searchH       : 40px;
    --menuH         : calc( 100% - var(--logoH) - var(--searchH) - 40px);
    box-shadow      : 5px 0px 5px 0px rgba(0,0,0,0.4);
    background      : #EAEAEA;
    width           : var(--leftW);
    height          : 100%;
    position        : fixed;
    z-index         : 9903;
    overflow        : hidden;
}
#menu_left * {
    position        : relative;
    vertical-align  : top;
}
#menu_left .logo {
    box-sizing      : border-box;
    width           : 100%;
    height          : var(--logoH);
    position        : relative;
    text-align      : center;
    overflow        : hidden;
}
#menu_left .logo img {
    max-width       : 100%;
    max-height      : 100%;
}

#menu_left #menu_search {
    width           : 100%;
    height          : var(--searchH);
    line-height     : var(--searchH);
    position        : relative;
}
#menu_left #menu_search * {
    vertical-align  : top;
}
#menu_left #menu_search form {
    display         : block;
    height          : 40px;
    line-height     : 40px;
}
#menu_left #menu_search .input {
    display         : block;
    box-shadow      : 0px 0px 0px 4px #CCC;
    border-radius   : 20px;
    width           : calc(100% - 50px);
    height          : 100%;
    font-size       : 12pt;
    padding         : 0px 45px 0px 20px;
    position        : relative;
    left            : 20px;
    color           : #555;
    transition      : 0.4s;
}
#menu_left #menu_search .input:focus {
    box-shadow      : 0px 0px 0px 4px #2696FF;
    color           : #2696FF;
}
#menu_left #menu_search .btn {
    background      : none;
    box-shadow      : -5px 0px 5px -2px rgba(0,0,0,0);
    border-radius   : 20px;
    width           : 60px;
    height          : 100%;
    position        : absolute;
    top             : 0px;
    right           : 30px;
    text-align      : center;
    cursor          : pointer;
    transition      : 0.6s;
}
#menu_left #menu_search .btn:hover {
    box-shadow: -5px 0px 5px -2px rgba(0,0,0,0.7);
}
#menu_left #menu_search .btn:hover img {
    opacity: 1.0;
}
#menu_left #menu_search img {
    max-height      : 20px;
    opacity         : 0.5;
    transition      : 0.6s;
}
#menu_left #search_advance {
    display     : block;
    padding     : 4px;
    color       : var(--blue01);
    font-size   : 12pt;
    text-align  : center;
    transition  : 0.4s;
}
#menu_left #search_advance:hover {
    color       : var(--blue02);
    text-shadow : 0px 2px 1px var(--blueShadow);
    transition  : 0.4s;
}



#menu_left .menu_items {
    width           : calc(100% + 18px);
    height          : calc(100% - 200px - 40px - 40px);
    box-sizing      : content-box!important;
    padding-right   : 18px;
    overflow-y      : scroll;
}
#menu_left .menu_root {
    --mh    : 28px;
    width   : 100%;
}
#menu_left .menu_root a {
    display     : block;
    width       : 100%;
    padding     : 2px 4px 2px 14px;
    color       : var(--txt03);
    font-size   : 12pt;
    transition  : 0.6s box-shadow, color 0.4s;
}

#menu_left .menu_root a .menu_bullet {
    display     : inline-block;
    width       : 12px;
}
#menu_left .menu_root a .menu_title {
    display     : inline-block;
}
#menu_left .menu_hasSub {
    display     : inline-block;
    position    : absolute;
    right       : 10px;
}
#menu_left .menu_root a:hover {
    background  : #FFF;
    box-shadow  : inset 4px 0px 0px 0px #2696FF, inset -6px 0px 0px 0px #2696FF;
    color       : var(--blue01);
    text-shadow : 0px 8px 3px #2696FF55;
}
#menu_left .menu_root.active > a {
    color       : var(--blue01);
    /* box-shadow  : inset 4px 0px 0px 0px #FF7F00, inset -6px 0px 0px 0px #FF7F00; */
    color       : #DD5500;
    /* text-shadow : 0px 8px 3px #FF7F0044; */
}
#menu_left .menu_root.active .menu_sub {
    background  : #FFF;
}
#menu_left .menu_root .menu_sub {
    display     : none;
}
#menu_left .menu_root.active > .menu_sub {
    display     : block;
}
#menu_left .menu_sub > .menu_sub {
    display     : none;
}
#menu_left .menu_sub.active {
    display     : block;
}
#menu_left .menu_sub.active > a.active {
    color       : var(--blue01);
    /* box-shadow  : inset 4px 0px 0px 0px #FF9900, inset -6px 0px 0px 0px #FF9900; */
    color       : #DD5500;
    /* text-shadow : 0px 8px 3px #FF7F0044; */
}
#menu_left .menu_sub.active > a.active.menu_parent {
    background  : #FF990033;
    color       : var(--blue01);
    /* box-shadow  : inset 4px 0px 0px 0px #FF9900, inset -6px 0px 0px 0px #FF9900; */
    color       : #DD5500;
    /* text-shadow : 0px 8px 3px #FF7F0044; */
}
#menu_left #g-rating {
    display         : block;
    background      : #FFF;
    padding-left    : 10px;
}


/* Main Content */

#page_body {
    background      : #FFF;
    padding-left    : var(--leftW);
    padding-top     : 108px;
}
#page_content {

    width       : 95%;
    min-width   : 800px;
    min-height  : calc(100% - 110px);
    padding     : 60px 0px;
    position    : relative;
    left        : 2.5%;

}
#page_content > #page_heading {
    padding     : 4px 0px;
    color       : #333;
    font-size   : 18pt;
    text-align  : center;
    text-shadow : 0px 2px 1px rgba(0,0,0,0.3);
}

/*
#page_content ._banner {
    background:#2f78b9;
    background:var(--blue01);
    width:600px;
    height:54px;
    border-radius: 18px;
    margin:0 auto;
    margin-bottom:10px;
    color:#FFF;
}
*/


/****** Content **********/
.content-block {
    display: block;
    color: #000;
    position: relative;
    font-size: 12px;
    font-family : var(--fontLight);
    margin: 30px;
    line-height: 2;
}
.content-block h3, strong {
    font-family : var(--fontTitle);
}

.content-block h3 {
    font-size: 20px;
    padding: 0;
    margin: 0;
}

/* Footer */

#footer {
    width       : 100%;
    padding-left: 300px;
    margin-top  : 50px;
    text-align  : center;
    font-size   : 12pt;
    z-index     : 9900;
}





/* News */
#news {
    padding     : 12px 10px;
    color       : var(--msgStack);
    font-size   : 16pt;
    text-align  : center;
}


main#page_details {
    margin-top:100px;
    font-size:initial;
    font-family:var(--fontLight);
}
main h2 {
    font-size:14pt;
}
main .txt_pop {
    font-family:var(--fontMain);
}