/*
------------------------------------------------
------------------ CSS Reset -------------------
------------------------------------------------
*/
html, body, div, input, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    /*--bs-body-line-height: 1;*/
    --bs-modal-border-color: #000;
    --bs-modal-header-border-color: #000;
    --bs-modal-footer-border-color: #000;
    --bs-modal-border-radius: 0;
    --bs-modal-border-width: 3px;
}

*, ::after, ::before {
    box-sizing:content-box;
}
/*
------------------------------------------------
-------------------- Fonts ---------------------
------------------------------------------------
*/
/*
Aria fonts are considered a proprietary software. To gain information about the laws regarding 
the use of these fonts, please visit www.fontiran.com
---------------------------------------------------------------------
This set of fonts are used in this project under the license: (5Q4ZXY)
---------------------------------------------------------------------
*/
@font-face {
    font-family: AriaWeb;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/AriaWebFaNum-Bold.woff');
}

@font-face {
    font-family: AriaWeb;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/AriaWebFaNum-Regular.woff');
}

@font-face {
    font-family: AriaWeb;
    font-style: normal;
    font-weight: 500;
    /*src: url('../fonts/Aria-Medium.ttf');*/
    src: url('../fonts/AriaWebFaNum-Regular.ttf');
}

body, h1, h2, h3, h4, h5, h6, p, input, button, textarea, li, a, select {
    font-family: AriaWeb !important;
    color: var(--Dark);
    /*font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: "tnum" on;
    font-feature-settings: "tnum" on;
    font-feature-settings: "ss01" on;*/
}
/*
------------------------------------------------
------------------- Colors ---------------------
------------------------------------------------
*/
:root {
    --blue: #078eea;
    --white: #ffffff;
    --Dark: #000000;
    --Gray: #cccccc;
    --footerGray: #e6e6e6;
    --LightGray: #f2f2f2;
    --DarkBlue: #00639c;
    --Gold: #ff9800;
    --LightCream: #f0ead6;
    --red: #e33739;
    --header-height: 95px;
    --Preview-Height: 10px;
    --Thumbnail-Height: 10px;
    --MenuIconHeiht: 32px;
    --bs-blue: #078eea;
}
/*
------------------------------------------------
---------------- General Style -----------------
------------------------------------------------
*/
html {
    direction: rtl;
}

    html .ModalOpen,
    html .SearchModalOpen {
        height: 100vh;
        overflow: hidden;
    }

#top #wrap_all .wrapper {
    padding: 60px;
    position: relative;
    box-sizing: border-box;
}

::placeholder {
    color: var(--white);
}
/* ----------------------- img Tag ----------------------- */
html body img {
    width: 100%;
}
/* ----------------------- input Tags ----------------------- */
input {
    box-sizing: border-box;
    font-size: 14pt;
}

    input::placeholder {
        color: var(--Dark);
        font-size: 14pt;
    }

textarea::placeholder {
    color: var(--Dark);
    font-size: 14pt;
}
/* ----------------------- a Tag ----------------------- */
html body a {
    text-decoration: none;
}

    html body a:hover {
        color: var(--blue);
    }
/* --------------- List Style ---------------- */
.ContactIcon ul li, #main_menu ul li {
    list-style: none;
}
/* --------------- SVG Style ---------------- */
#top #wrap_all button:hover svg,
#top #wrap_all a:hover svg {
    fill: var(--blue);
}

#top #wrap_all a object {
    pointer-events: none;
}
/* ----------------------- #main Styles ----------------------- */
#top #wrap_all #main {
    padding-top: var(--header-height);
    min-height: 60vh;
}
/* ----------------------- .BorderBottom Styles ----------------------- */
#top #wrap_all .BorderBottom {
    border-bottom: solid 6px #000;
    padding-bottom: 20px;
    position: relative;
    margin-bottom: 20px;
}

    #top #wrap_all .BorderBottom::after {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        background-color: var(--Dark);
        position: absolute;
        bottom: 0px;
        right: 50%;
        margin-right: -3px;
    }
/* ----------------------- .ProductContainer Styles ----------------------- */
#top #wrap_all .ProductContainer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
/* ----------------------- .ColumnFour Styles ----------------------- */
#top #wrap_all .columnfour {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* ----------------------- .Product Styles ----------------------- */
#top #wrap_all .ProductContainer .Product.large {
    width: calc(50% - 10px);
}

#top #wrap_all .columnfour .Product {
    min-height: 100%;
    width: calc(25% - 15px);
    margin-bottom: 20px;
}

    #top #wrap_all .columnfour .Product:nth-last-of-type(1),
    #top #wrap_all .columnfour .Product:nth-last-of-type(2),
    #top #wrap_all .columnfour .Product:nth-last-of-type(3),
    #top #wrap_all .columnfour .Product:nth-last-of-type(4),
    #top #wrap_all .columnfour .Product:nth-last-of-type(5),
    #top #wrap_all .columnfour .Product:nth-last-of-type(6) {
        /*margin-bottom: 0px;*/
    }

#top #wrap_all .ProductContainer .Product .ProductInCont {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#top #wrap_all .ProductContainer .Product .ProductDetail {
    flex: 1;
}

#top #wrap_all .ProductContainer .Product .ProductInformations {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#top #wrap_all .ProductContainer .Product .product-name {
    flex: 1;
}

#top #wrap_all .ProductContainer .Product .ProductCover a {
    display: flex;
}

#top #wrap_all .ProductContainer .Product .ProductDetail {
    background-color: var(--LightGray);
    padding: 20px;
    border-top: solid var(--Dark) 4px;
    position: relative;
    direction: rtl;
}

    #top #wrap_all .ProductContainer .Product .ProductDetail h3 {
        font-size: 12pt;
        margin-bottom: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-wrap-mode: nowrap;
        text-overflow: ellipsis;
    }

    #top #wrap_all .ProductContainer .Product .ProductDetail p {
        font-size: 14pt;
        min-height: 28px;
        display: flex;
        align-items: center;
    }

p.product-price {
    position: relative
}

    p.product-price span.bef {
        zoom: .9;
        text-decoration: line-through;
        opacity: .8;
        position: absolute;
        top: 25px;
    }

    p.product-price.old-price {
        color: red;
        text-decoration: line-through;
    }

#top #wrap_all .ProductContainer .Product .ProductActions {
    display: flex;
    align-items: center;
    position: absolute;
    left: 20px;
    bottom: 20px;
}

    #top #wrap_all .ProductContainer .Product .ProductActions a {
        display: flex;
        height: 28px;
        margin-left: 10px;
    }

        #top #wrap_all .ProductContainer .Product .ProductActions a:last-child {
            margin-left: 0;
        }

        #top #wrap_all .ProductContainer .Product .ProductActions a:hover svg {
            fill: var(--blue);
        }

#top #wrap_all .columnthree .Product {
    width: calc(33.3% - 13.33px);
    margin-bottom: 20px;
}

    #top #wrap_all .columnthree .Product:nth-last-child(1),
    #top #wrap_all .columnthree .Product:nth-last-child(2),
    #top #wrap_all .columnthree .Product:nth-last-child(3) {
        margin-bottom: 0;
    }
/* ----------------------- .moreProducts Styles ----------------------- */
#top #wrap_all .moreProducts {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

    #top #wrap_all .moreProducts a {
        width: 40%;
        text-align: center;
        margin-bottom: 0;
        font-size: 14pt;
    }
/* ----------------------- .Author Styles ----------------------- */
#top #wrap_all .columnfour .Author {
    width: calc(25% - 15px);
    margin-bottom: 20px;
}

    #top #wrap_all .columnfour .Author:nth-last-of-type(1),
    #top #wrap_all .columnfour .Author:nth-last-of-type(2),
    #top #wrap_all .columnfour .Author:nth-last-of-type(3),
    #top #wrap_all .columnfour .Author:nth-last-of-type(4) {
        margin-bottom: 0;
    }

    #top #wrap_all .columnfour .Author .AuthorInCont {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #top #wrap_all .columnfour .Author .AuthorIntroduction {
        flex: 1;
    }
/* ----------------------- .Section_Title Styles ----------------------- */
#top #wrap_all #main .Section_Title {
    display: flex;
    justify-content: center;
}

    #top #wrap_all #main .Section_Title h2, #top #wrap_all #main .Section_Title h1 {
        font-size: 24pt;
        font-weight: bold;
        text-align: center;
        width: calc(50% - 10px);
    }
/* ----------------------- .pagetitle Styles ----------------------- */
#top #wrap_all #main .pagetitle .Section_Title h2 {
    width: 100%;
}
/* ----------------------- .MoreResult Styles ----------------------- */
#top #wrap_all .MoreResult {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    margin-top: -10px;
    margin-bottom: 20px;
}

    #top #wrap_all .MoreResult a {
        text-decoration: none;
        color: var(--Dark);
        font-size: 35pt;
        font-weight: bold;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #top #wrap_all .MoreResult a:hover {
            color: var(--white);
        }
/*
------------------------------------------------
------------------- Header ---------------------
------------------------------------------------
*/
#top #wrap_all #header {
    position: fixed;
    width: 100%;
    z-index: 9;
    background-color: var(--white);
}

    #top #wrap_all #header > .wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--header-height);
        padding: 0 60px;
    }
    /* --------------- Logo ---------------- */
    #top #wrap_all #header .logo a {
        display: flex;
    }

    #top #wrap_all #header.Scrolled .logo a {
        position: relative;
        width: 47px;
        height: 47px;
        overflow: hidden;
    }

        #top #wrap_all #header.Scrolled .logo a svg {
            min-width: 270px;
            position: absolute;
            left: 0;
        }

    #top #wrap_all #header.Scrolled .logo .logoresponsive {
        display: none;
    }
    /* --------------- main menu ---------------- */
    #top #wrap_all #header #main_menu .HeaderMainMenu {
        display: flex;
    }

        #top #wrap_all #header #main_menu .HeaderMainMenu > li {
            margin-left: 15px;
        }

            #top #wrap_all #header #main_menu .HeaderMainMenu > li:last-child {
                margin-left: 0;
            }

    #top #wrap_all #header #main_menu button {
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
    }

    #top #wrap_all #header #main_menu #BurgerMenu svg,
    #top #wrap_all #header #main_menu #SearchIcon svg,
    #top #wrap_all #header #main_menu .Cart svg,
    #top #wrap_all #header #main_menu .Wishlist svg,
    #top #wrap_all #header #main_menu .Profile svg {
        height: var(--MenuIconHeiht);
    }

#top.ShowOverlay #header #main_menu .active svg {
    fill: var(--blue);
}
/* --------------- Burger icon to cross ---------------- */
#top #wrap_all #header #main_menu #BurgerMenu .Close {
    opacity: 0;
}

#top #wrap_all #header #main_menu .ICON #BurgerMenu .Menu {
    opacity: 0;
}

#top #wrap_all #header #main_menu .ICON #BurgerMenu .Close {
    opacity: 1;
}

    #top #wrap_all #header #main_menu .ICON #BurgerMenu .Close.Menu,
    #top #wrap_all #header #main_menu #BurgerMenu .Close.Menu {
        opacity: 1;
    }
/* --------------- BurgerOverlay ---------------- */
#top #wrap_all #header #main_menu .BurgerOverlay {
    position: absolute;
    height: calc(100vh - var(--header-height));
    top: var(--header-height);
    right: 100%;
    background-color: var(--Dark);
    width: 100%;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: 21;
}

#top.ShowOverlay #wrap_all #header #main_menu .BurgerOverlay {
    opacity: 1;
}

#top #wrap_all #header #main_menu .active .BurgerOverlay {
    right: 0;
}

#top #wrap_all #header #main_menu .BurgerOverlay .wrapper {
    height: 100%;
    display: flex;
    align-items: center;
}

#top #wrap_all #header #main_menu .NavigationContainer {
    padding-right: 60px;
    border-right: solid 6px var(--white);
    position: relative;
    width: 100%;
}

    #top #wrap_all #header #main_menu .NavigationContainer::before {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        background-color: var(--white);
        position: absolute;
        right: -12px;
        top: 50%;
        margin-top: -3px;
    }

    #top #wrap_all #header #main_menu .NavigationContainer ul li {
        border-bottom: solid 6px var(--white);
        padding: 20px 0;
    }

    #top #wrap_all #header #main_menu .NavigationContainer ul .LastDesktopItem {
        border-bottom: none;
    }

.NavigationContainer ul .MobileOnly {
    display: none;
}

#top #wrap_all #header #main_menu .NavigationContainer ul li a {
    font-size: 28pt;
    color: var(--white);
    font-weight: bold;
}

    #top #wrap_all #header #main_menu .NavigationContainer ul li a:hover {
        color: var(--blue);
    }
/* --------------- Search Box ---------------- */
#top #wrap_all #header #main_menu .SearchOverlay {
    position: absolute;
    height: calc(100vh - var(--header-height));
    top: var(--header-height);
    right: 100%;
    background-color: var(--blue);
    width: 100%;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: 22;
}

#top #wrap_all #header #main_menu .active .SearchOverlay {
    right: 0;
}

#top.ShowOverlay #wrap_all #header #main_menu .SearchOverlay {
    opacity: 1;
    overflow: scroll;
}

#top #wrap_all #header #main_menu .SearchOverlay #search-input {
    padding: 20px;
    border: none;
    color: var(--white);
    font-size: 14pt;
    background-color: var(--Dark);
    /*width: 90%;*/
}

    #top #wrap_all #header #main_menu .SearchOverlay #search-input::placeholder {
        color: var(--white);
    }

#top #wrap_all #header #main_menu .SearchOverlay #search-Button {
    /*width: 10%;*/
    padding: 20px;
}

#top #wrap_all #header #main_menu .SearchOverlay .ProductContainer .Product .ProductInformations {
    height: 100%;
}

#top #wrap_all #header #main_menu .HeaderMainMenu .SearchOverlay .authorContainer .Author .Author-name {
    font-size: 14pt;
}

#top #wrap_all #header #main_menu .SearchOverlay .autocomplete-results {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 2rem 0;
}
/* --------------- Links ---------------- */
#top #wrap_all #header #main_menu .HeaderMainMenu li a {
    display: flex;
}
/*
------------------------------------------------
------------------- Footer ---------------------
------------------------------------------------
*/
/* --------------- Widgets ---------------- */
#top #wrap_all #footer .Widgets {
    background-color: var(--footerGray);
}

    #top #wrap_all #footer .Widgets .wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        #top #wrap_all #footer .Widgets .wrapper .FooterColumn {
            width: calc(50% - 10px);
            display: flex;
            justify-content: space-between
        }

    #top #wrap_all #footer .Widgets a,
    #top #wrap_all #footer .Widgets p {
        font-size: 14pt;
    }

    #top #wrap_all #footer .Widgets .footer-border {
        border-left: solid 5px black;
        padding-left: 20px;
    }

    #top #wrap_all #footer .Widgets .AddressRow {
        border-bottom: solid 5px var(--Dark);
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    #top #wrap_all #footer .Widgets .footer-logo {
        width: 165px;
        box-sizing: border-box;
        display: flex;
    }

    #top #wrap_all #footer .Widgets .footer-about {
        width: calc(100% - 185px);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

        #top #wrap_all #footer .Widgets .footer-about > div:first-child {
            flex: 1;
        }

    #top #wrap_all #footer .Widgets .footer-menu {
        width: calc(100% - 160px);
        box-sizing: border-box
    }

    #top #wrap_all #footer .Widgets .footer-certs {
        width: 140px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    #top #wrap_all #footer .Widgets .footer-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        #top #wrap_all #footer .Widgets .footer-menu .Phone {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

            #top #wrap_all #footer .Widgets .footer-menu .Phone p {
                margin-bottom: 10px;
            }

                #top #wrap_all #footer .Widgets .footer-menu .Phone p:last-child {
                    width: 100%;
                    text-align: right;
                    margin-bottom: 0;
                }

    #top #wrap_all #footer .Widgets .footer-about .ContactIcon ul {
        display: flex;
        justify-content: flex-start;
        flex-direction: row-reverse;
    }

        #top #wrap_all #footer .Widgets .footer-about .ContactIcon ul li {
            margin-right: 20px;
        }

            #top #wrap_all #footer .Widgets .footer-about .ContactIcon ul li:last-child {
                margin-right: 0;
            }

            #top #wrap_all #footer .Widgets .footer-about .ContactIcon ul li a {
                display: flex;
            }
/* --------------- Copyright ---------------- */
#top #wrap_all #footer .Copyright {
    background-color: var(--Dark);
}

    #top #wrap_all #footer .Copyright .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #top #wrap_all #footer .Copyright .wrapper p {
            color: #fff;
            font-size: 17pt;
        }
/*
------------------------------------------------
------------------ Home Page -------------------
------------------------------------------------
*/
/* --------------- Slider ---------------- */
#top #wrap_all #main .slider-container {
    display: flex;
}

    #top #wrap_all #main .slider-container img {
        width: 100%;
    }
/* --------------- Latest Products ---------------- */
#top #wrap_all #main .LatestPartProducts {
    background-color: var(--Gray);
}
/* --------------- Promotion ---------------- */
#top #wrap_all #main .Promotion .wrapper {
    background-color: var(--LightCream);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#top #wrap_all #main .Promotion .PromotionColumn {
    width: calc(50% - 10px);
}

#top #wrap_all #main .Promotion .PromotionTitle {
    display: flex;
    flex-direction: column;
    padding: 0 30px;
    box-sizing: border-box;
    align-items: center;
}

    #top #wrap_all #main .Promotion .PromotionTitle > div {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
    }

        #top #wrap_all #main .Promotion .PromotionTitle > div h2 {
            background-color: var(--red);
            color: var(--LightCream);
            font-size: 32pt;
            font-weight: bold;
            text-align: center;
            padding: 20px 15px 15px;
            margin: 20px 0;
            width: 100%;
        }

    #top #wrap_all #main .Promotion .PromotionTitle svg {
        width: 80%;
    }

#top #wrap_all #main .Promotion .PromotionProduct {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    #top #wrap_all #main .Promotion .PromotionProduct .PromotionCover {
        width: calc(60% - 10px);
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 50px 30px;
        box-sizing: border-box;
        border-top: solid 6px var(--Dark);
        border-bottom: solid 6px var(--Dark);
        position: relative;
    }

        #top #wrap_all #main .Promotion .PromotionProduct .PromotionCover::before {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            background-color: var(--Dark);
            position: absolute;
            top: -12px;
            right: 50%;
            margin-right: -3px;
        }

        #top #wrap_all #main .Promotion .PromotionProduct .PromotionCover::after {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            background-color: var(--Dark);
            position: absolute;
            bottom: -12px;
            right: 50%;
            margin-right: -3px;
        }

        #top #wrap_all #main .Promotion .PromotionProduct .PromotionCover img {
            box-shadow: 5px 5px 10px -3px #aaa;
        }

    #top #wrap_all #main .Promotion .PromotionProduct .PromotionAction {
        width: calc(40% - 10px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

        #top #wrap_all #main .Promotion .PromotionProduct .PromotionAction .ProductActions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }

            #top #wrap_all #main .Promotion .PromotionProduct .PromotionAction .ProductActions p {
                background-color: var(--Dark);
                color: var(--LightCream);
                font-size: 14pt;
                text-align: center;
                padding: 20px 15px 15px;
                margin: 20px 0;
                width: 100%;
            }

#top #wrap_all #main .Promotion .ProductActions a {
    display: flex;
    margin-left: 10px;
}

    #top #wrap_all #main .Promotion .ProductActions a:last-child {
        margin-left: 0;
    }

    #top #wrap_all #main .Promotion .ProductActions a:hover svg {
        fill: var(--blue);
    }
/* --------------- Part Publication ---------------- */
#top #wrap_all #main .PartPublicationBooks {
    background-color: var(--Gray);
}
/*
------------------------------------------------
------------------ Shop Page -------------------
------------------------------------------------
*/
#top #wrap_all #main .pagetitle {
    background-color: var(--Gray);
}

#top #wrap_all #main .filters .ShopCategories {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#top #wrap_all #main .filters .Sort {
    display: flex;
    height: 45px;
    width: calc(25% - 15px);
    position: relative;
}

    #top #wrap_all #main .filters .Sort::after {
        content: "+";
        position: absolute;
        left: 15px;
        top: 50%;
        margin-top: -5px;
        font-size: 20pt;
        font-weight: bold;
        width: 10px;
        height: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #top #wrap_all #main .filters .Sort select {
        border: none;
        width: 100%;
        outline: none;
        /*padding: 13px 15px;*/
        font-weight: bold;
        font-size: 10pt;
        appearance: none;
        display: flex;
        height: 100%;
        padding-right: 15px;
    }

#top #wrap_all #main .filters .filter {
    display: flex;
    height: 45px;
    width: calc(25% - 15px);
    position: relative;
}

    #top #wrap_all #main .filters .filter.active::after {
        content: "+";
        position: absolute;
        left: 15px;
        top: 50%;
        margin-top: -5px;
        font-size: 20pt;
        font-weight: bold;
        width: 10px;
        height: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
        transition: opacity 0.25s ease-out;
        pointer-events: none;
    }

    #top #wrap_all #main .filters .filter select {
        border: none;
        width: 100%;
        outline: none;
        padding: 15px;
        font-weight: bold;
        font-size: 10pt;
        appearance: none;
        display: flex;
        /*opacity: 0;*/
        transition: opacity 0.25s ease-out;
    }

    #top #wrap_all #main .filters .filter:nth-child(2) select,
    #top #wrap_all #main .filters .filter:nth-child(2)::after {
        opacity: 1;
    }

    #top #wrap_all #main .filters #ShopFilterStageTwo,
    #top #wrap_all #main .filters #ShopFilterStageThree,
    #top #wrap_all #main .filters #ShopFilterStageFour/*,
    #top #wrap_all #main .filters .filter:nth-child(3)::after,
    #top #wrap_all #main .filters .filter:nth-child(4)::after*/ {
        display: none;
    }

#top #wrap_all #main .filters .StageTwoDisplay #ShopFilterStageTwo,
#top #wrap_all #main .filters .StageTwoDisplay .filter:nth-child(3)::after {
    display: flex;
}

#top #wrap_all #main .filters .StageTwo #ShopFilterStageTwo,
#top #wrap_all #main .filters .StageTwo .filter:nth-child(3)::after {
    opacity: 1;
}

#top #wrap_all #main .filters .StageThreeDisplay #ShopFilterStageThree,
#top #wrap_all #main .filters .StageThreeDisplay .filter:nth-child(4)::after {
    display: flex;
}

#top #wrap_all #main .filters .StageThree #ShopFilterStageThree,
#top #wrap_all #main .filters .StageThree .filter:nth-child(4)::after {
    opacity: 1;
}
/*
------------------------------------------------
----------------- Single Page ------------------
------------------------------------------------
*/
#top #wrap_all #main .ProductIntroduction p {
    font-size: 14pt;
}

#top #wrap_all #main .ProductIntroduction .wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 60px;
}

#top #wrap_all #main .ProductIntroduction .ProductGallery {
    display: flex;
    justify-content: space-between;
    width: calc(60% - 10px);
}

#top #wrap_all #main .ProductIntroduction .ProductInformation {
    width: calc(40% - 10px);
    display: flex;
    flex-direction: column;
}

#top #wrap_all #main .ProductIntroduction .ProductGallery .GalleryPreview {
    width: calc(80% - 10px);
}

#top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs {
    width: calc(20% - 10px);
    position: relative;
    height: var(--Preview-Height);
    overflow-y: hidden;
}

    #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #thumbs-container {
        height: var(--Preview-Height);
        overflow: hidden;
    }

#top #wrap_all #main .ProductIntroduction .ProductGallery img {
    display: flex;
}

#top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blue);
    cursor: pointer;
    color: var(--white);
    font-weight: bold;
    font-size: 14pt;
}

#top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-down {
    width: 100%;
    height: 26px;
    position: absolute;
    bottom: 0;
}

    #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-down.HideScrollDown {
        display: none;
    }

#top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-up {
    width: 100%;
    height: 26px;
    position: absolute;
    top: 0;
    display: none;
}

    #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-up.ShowScrollTop {
        display: flex;
    }

#top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-left {
    height: 100%;
    width: 26px;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

#top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-right {
    height: 100%;
    width: 26px;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}

#top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs .arrow::before {
    content: '+';
}

#top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs img {
    margin-bottom: 20px;
    cursor: pointer;
}

    #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs img:last-child {
        margin-bottom: 0;
    }

#top #wrap_all #main .ProductIntroduction .ProductInformation > div {
    padding-bottom: 20px;
    border-bottom: solid 5px var(--Dark);
    margin-bottom: 20px;
}

    #top #wrap_all #main .ProductIntroduction .ProductInformation > div:last-child {
        flex: 1;
        margin-bottom: 0;
    }

#top #wrap_all #main .ProductIntroduction .ProductInformation .IntroAction {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    #top #wrap_all #main .ProductIntroduction .ProductInformation .IntroAction .ProductActions {
        display: flex;
    }

        #top #wrap_all #main .ProductIntroduction .ProductInformation .IntroAction .ProductActions a {
            display: flex;
            margin-left: 10px;
        }

            #top #wrap_all #main .ProductIntroduction .ProductInformation .IntroAction .ProductActions a:last-child {
                margin-left: 0;
            }

#top #wrap_all #main .InformationTab .wrapper {
    background-color: var(--Gray);
}

#top #wrap_all #main .InformationTab .tab {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

    #top #wrap_all #main .InformationTab .tab button {
        min-width: 130px;
        font-size: 14pt;
        font-weight: bold;
        padding: 25px 15px;
        background-color: var(--white);
        border: none;
        margin-left: 20px;
        cursor: pointer;
    }

        #top #wrap_all #main .InformationTab .tab button.active {
            background-color: var(--blue);
            color: var(--white);
        }

        #top #wrap_all #main .InformationTab .tab button:last-child {
            margin-left: 0;
        }

#top #wrap_all #main .InformationTab .tabcontent {
    display: none;
    padding: 20px;
    background-color: var(--white);
    min-height: 300px;
}

    #top #wrap_all #main .InformationTab .tabcontent.active {
        display: block;
    }

#top #wrap_all #main .InformationTab #Comments form {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 5px var(--Dark);
    padding-bottom: 20px;
}

    #top #wrap_all #main .InformationTab #Comments form > div {
        width: calc(50% - 10px)
    }

#top #wrap_all #main .InformationTab #Comments input,
#top #wrap_all #main .InformationTab #Comments textarea {
    background-color: var(--Gray);
    border: none;
    resize: none;
    width: 100%;
    box-sizing: border-box;
    font-size: 14pt;
    padding: 15px;
    display: flex;
    outline: none;
}

#top #wrap_all #main .InformationTab #Comments .form-right-section input {
    margin-bottom: 20px;
}

#top #wrap_all #main .InformationTab #Comments .form-right-section div:last-child input {
    margin-bottom: 0;
}

#top #wrap_all #main .InformationTab #Comments .form-left-section {
    display: flex;
    position: relative;
}

    #top #wrap_all #main .InformationTab #Comments .form-left-section div {
        width: 100%;
        display: flex;
    }

#top #wrap_all #main .InformationTab #Comments input[type=submit] {
    position: absolute;
    width: 100px;
    background-color: var(--Dark);
    color: var(--white);
    justify-content: center;
    left: 15px;
    bottom: 15px;
    cursor: pointer;
}

    #top #wrap_all #main .InformationTab #Comments input[type=submit]:hover {
        background-color: var(--blue);
    }

#top #wrap_all #main .InformationTab #MoreInfo .InfoPeace {
    display: flex;
    margin-bottom: 10px;
}

#top #wrap_all #main .InformationTab #MoreInfo .infoTitle {
    min-width: 150px;
}

#top #wrap_all #main .InformationTab #About .BookIndex,
#top #wrap_all #main .InformationTab #ExpertReview .Review {
    margin-top: 20px;
}
/*
------------------------------------------------
------------------ Auth Page -------------------
------------------------------------------------
*/
#top #wrap_all #main .AuthForms .wrapper {
    display: flex;
    justify-content: space-between;
}

#top #wrap_all #main .AuthForms .Signin {
    width: 50%;
    padding-left: 20px;
    border-left: solid 5px var(--Dark);
    position: relative;
}

    #top #wrap_all #main .AuthForms .Signin .inputs {
        margin: .2rem;
    }

#top #wrap_all #main .AuthForms .SignUp {
    width: 50%;
    padding-right: 20px;
}

#top #wrap_all #main .Signin form {
    display: flex;
    flex-wrap: wrap;
}

    /*   #top #wrap_all #main .Signin form label[for=UserName],
    #top #wrap_all #main .Signin form label[for=Password]*/
    #top #wrap_all #main .Signin form label[for=UserName],
    #top #wrap_all #main .Signin form label {
        width: 140px;
        display: flex;
        align-items: center;
        /*margin-bottom: 20px;*/
        font-size: 14pt;
    }

    /*#top #wrap_all #main .Signin form input[type=text],
    #top #wrap_all #main .Signin form input[type=number] {
        width: calc(100% - 140px);
        background-color: var(--LightGray);
        padding: 15px;
        box-sizing: border-box;
        margin-bottom: 20px;
        font-size: 14pt;
    }*/

    #top #wrap_all #main .Signin form input[name=RememberMe] {
        width: 20px;
        margin-left: 10px;
        height: 32px;
    }

    #top #wrap_all #main .Signin form label[for=RememberMe] {
        /*font-size: 14pt;
        width: calc(60% - 30px);
        display: flex;
        align-items: center;
        padding-top: 4px;
        height: 30px;*/
    }

    #top #wrap_all #main .Signin form input[type=submit] {
        width: 40%;
        background-color: var(--blue);
        color: var(--white);
        cursor: pointer;
        padding: 15px;
        font-size: 14pt;
        font-weight: bold;
    }

#top #wrap_all #main .Signin a {
    /*font-size: 14pt;
    font-weight: bold;
    position: absolute;
    bottom: -5px;*/
}

#top #wrap_all #main .SignUp form {
    display: flex;
    flex-wrap: wrap;
}

    #top #wrap_all #main .SignUp form label[for=UserName],
    #top #wrap_all #main .SignUp form label[for=Password] {
        width: 140px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 14pt;
    }

    #top #wrap_all #main .SignUp form input[name=UserName],
    #top #wrap_all #main .SignUp form input[name=Password] {
        width: calc(100% - 140px);
        background-color: var(--LightGray);
        padding: 15px;
        box-sizing: border-box;
        margin-bottom: 20px;
        font-size: 14pt;
    }

    #top #wrap_all #main .SignUp form input[name=signup] {
        width: 40%;
        background-color: var(--blue);
        color: var(--white);
        cursor: pointer;
        padding: 15px;
        font-size: 14pt;
        font-weight: bold;
        margin-right: 60%;
    }
/*
------------------------------------------------
------------------ Cart Page -------------------
------------------------------------------------
*/
#top #wrap_all #main .Cart .wrapper {
    padding-top: 0;
    background-color: var(--Gray);
    display: flex;
    flex-wrap: wrap;
}

#top #wrap_all #main .Cart .OrdeProducts {
    width: 50%;
    padding-left: 20px;
    border-left: solid 5px var(--Dark);
    box-sizing: border-box;
}

    #top #wrap_all #main .Cart .OrdeProducts .Product {
        display: flex;
        position: relative;
        margin-bottom: 20px;
    }

        #top #wrap_all #main .Cart .OrdeProducts .Product:last-child {
            margin-bottom: 0;
        }

        #top #wrap_all #main .Cart .OrdeProducts .Product .ProductCover {
            width: 25%;
        }

            #top #wrap_all #main .Cart .OrdeProducts .Product .ProductCover a {
                display: flex;
            }

        #top #wrap_all #main .Cart .OrdeProducts .Product .ProductDetail {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #top #wrap_all #main .Cart .OrdeProducts .Product .ProductAction {
            display: flex;
        }

            #top #wrap_all #main .Cart .OrdeProducts .Product .ProductAction .OrderQty {
                border: solid 2px var(--Dark);
                margin-left: 10px;
                display: flex;
                align-items: center;
                padding: 0 4px;
            }

                #top #wrap_all #main .Cart .OrdeProducts .Product .ProductAction .OrderQty .Add {
                    font-size: 14pt;
                    font-weight: bold;
                    border: none;
                    background-color: transparent;
                    cursor: pointer;
                }

            #top #wrap_all #main .Cart .OrdeProducts .Product .ProductAction input {
                width: 30px;
                background-color: transparent;
                text-align: center;
            }

                #top #wrap_all #main .Cart .OrdeProducts .Product .ProductAction input::-webkit-outer-spin-button,
                #top #wrap_all #main .Cart .OrdeProducts .Product .ProductAction input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }

            #top #wrap_all #main .Cart .OrdeProducts .Product .ProductAction .removeProduct a {
                background: transparent;
                height: 32px;
                width: 32px;
                border: solid 2px var(--Dark);
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0;
                cursor: pointer;
            }

#top #wrap_all #main .Cart .OrderSummary {
    width: 50%;
    padding-right: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

    #top #wrap_all #main .Cart .OrderSummary div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

        #top #wrap_all #main .Cart .OrderSummary div:last-child {
            margin-bottom: 0;
        }

        #top #wrap_all #main .Cart .OrderSummary div p,
        #top #wrap_all #main .Cart .OrderSummary div input[type=text],
        #top #wrap_all #main .Cart .OrderSummary div button {
            font-size: 14pt;
            font-weight: bold;
            padding: 15px;
            box-sizing: border-box;
        }

    #top #wrap_all #main .Cart .OrderSummary .Total {
        /*flex: 1;*/
        align-items: flex-start;
    }

    #top #wrap_all #main .Cart .OrderSummary div p:nth-child(2),
    #top #wrap_all #main .Cart .OrderSummary div input[type=text],
    #top #wrap_all #main .Cart .OrderSummary div button {
        width: 250px;
        text-align: center;
        background-color: var(--white);
    }

    #top #wrap_all #main .Cart .OrderSummary div .remove-discount-button {
        background: transparent;
        height: 32px;
        width: 32px !important;
        border: solid 2px var(--Dark);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        cursor: pointer;
    }

#top #wrap_all #main .Cart .OrderSummary .VoucherButton,
#top #wrap_all #main .Cart .OrderSummary .UpdateCart,
#top #wrap_all #main .Cart .OrderSummary .Checkout {
    justify-content: flex-end;
}

    #top #wrap_all #main .Cart .OrderSummary .VoucherButton button,
    #top #wrap_all #main .Cart .OrderSummary .UpdateCart button,
    #top #wrap_all #main .Cart .OrderSummary .Checkout button,
    #top #wrap_all #main .Cart .OrderSummary .Checkout button {
        border: none;
        color: var(--white);
        background-color: var(--Dark);
        cursor: pointer;
    }

    #top #wrap_all #main .Cart .OrderSummary .Checkout button, #top #wrap_all #main .Cart .OrderSummary .Checkout button {
        background-color: var(--blue);
    }
/*
------------------------------------------------
---------------- Authors Page ------------------
------------------------------------------------
*/
#top #wrap_all #main .authors .wrapper {
    background-color: #078eea;
    padding-bottom: 60px;
}

#top #wrap_all .columnfour .Author .AuthorPhoto a {
    display: flex;
}

#top #wrap_all .columnfour .Author .AuthorIntroduction {
    background-color: var(--LightGray);
    padding: 20px;
    border-top: solid var(--Dark) 4px;
}
/*
------------------------------------------------
----------------- Author Page ------------------
------------------------------------------------
*/
#top #wrap_all #main > .Athour .wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: var(--blue);
}

    #top #wrap_all #main > .Athour .wrapper > div:first-child {
        width: calc(40% - 10px);
        height: calc(40vw - 70px);
    }

    #top #wrap_all #main > .Athour .wrapper > div:nth-child(2n) {
        width: calc(60% - 10px);
    }

    #top #wrap_all #main > .Athour .wrapper .AuthorGallery {
        display: flex;
        align-items: flex-start;
    }

    #top #wrap_all #main > .Athour .wrapper .AuthorBio h1 {
        padding-bottom: 20px;
        border-bottom: solid 5px var(--Dark);
        margin-bottom: 20px;
        font-size: 18pt;
    }

    #top #wrap_all #main > .Athour .wrapper .AuthorBio p {
        font-size: 14pt;
    }
/*
------------------------------------------------
---------------- Checkout Page -----------------
------------------------------------------------
*/
#top #wrap_all #main .CheckoutForm .FormRow {
    padding-bottom: 20px;
    margin-bottom: 26px;
    border-bottom: solid var(--Dark) 6px;
    position: relative;
}

    #top #wrap_all #main .CheckoutForm .FormRow::after {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        background-color: var(--Dark);
        position: absolute;
        bottom: -12px;
        right: 50%;
        margin-right: -3px;
    }

    #top #wrap_all #main .CheckoutForm .FormRow .RowTitle {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

        #top #wrap_all #main .CheckoutForm .FormRow .RowTitle h3,
        #top #wrap_all #main .CheckoutForm .FormRow .RowTitle p {
            font-size: 14pt;
        }

        #top #wrap_all #main .CheckoutForm .FormRow .RowTitle p {
            margin-right: 30px;
        }

    #top #wrap_all #main .CheckoutForm .FormRow .RowInput {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #top #wrap_all #main .CheckoutForm .FormRow input {
        background-color: var(--footerGray);
        padding: 15px 10px;
    }

        #top #wrap_all #main .CheckoutForm .FormRow input[name=customer_name],
        #top #wrap_all #main .CheckoutForm .FormRow input[name=customer_family],
        #top #wrap_all #main .CheckoutForm .FormRow input[name=customer_family],
        #top #wrap_all #main .CheckoutForm .FormRow input[name=mobile] {
            width: calc(50% - 10px);
            margin-bottom: 20px;
        }

        #top #wrap_all #main .CheckoutForm .FormRow input[name=email] {
            width: 100%;
        }

    #top #wrap_all #main .CheckoutForm .FormRow select {
        background-color: var(--footerGray);
        padding: 15px 10px;
        border: none;
        appearance: none;
        font-size: 14pt;
        font-weight: bold;
        outline: none;
        width: 100%;
    }

    #top #wrap_all #main .CheckoutForm .FormRow .select {
        position: relative;
    }

        #top #wrap_all #main .CheckoutForm .FormRow .select::after {
            content: "+";
            position: absolute;
            left: 15px;
            top: 50%;
            margin-top: -5px;
            font-size: 20pt;
            font-weight: bold;
            width: 10px;
            height: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;
        }

    #top #wrap_all #main .CheckoutForm .FormRow .halfwidth {
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }

    #top #wrap_all #main .CheckoutForm .FormRow .fullwidth {
        width: 100%;
        margin-bottom: 20px;
        display: flex;
    }

        #top #wrap_all #main .CheckoutForm .FormRow .fullwidth label, #top #wrap_all #main .CheckoutForm .FormRow .fullwidth input {
            cursor: pointer;
        }

        #top #wrap_all #main .CheckoutForm .FormRow .fullwidth:last-child {
            margin-bottom: 0px;
        }

    #top #wrap_all #main .CheckoutForm .FormRow input[name=addressTitle],
    #top #wrap_all #main .CheckoutForm .FormRow input[name=addressTel] {
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }

    #top #wrap_all #main .CheckoutForm .FormRow .PostalCode {
        display: flex;
    }

        #top #wrap_all #main .CheckoutForm .FormRow .PostalCode a,
        #top #wrap_all #main .CheckoutForm .FormRow .PostalCode input {
            width: 50%;
        }

        #top #wrap_all #main .CheckoutForm .FormRow .PostalCode a {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--Dark);
            color: var(--white);
            font-size: 14pt;
            font-weight: bold;
        }

    #top #wrap_all #main .CheckoutForm .FormRow textarea {
        width: 100%;
        resize: none;
        background-color: var(--footerGray);
        border: none;
        font-size: 14pt;
        outline: none;
        padding: 15px 10px;
        margin-bottom: 20px;
    }

        #top #wrap_all #main .CheckoutForm .FormRow textarea:last-child {
            margin-bottom: 0;
        }

    #top #wrap_all #main .CheckoutForm .FormRow iframe {
        width: 100%;
        margin-bottom: 20px;
    }

    #top #wrap_all #main .CheckoutForm .FormRow .IsGiftSection input {
        margin-bottom: 10px;
    }

    #top #wrap_all #main .CheckoutForm .FormRow .IsGiftSection label {
        flex: 1;
        margin-bottom: 7px;
        margin-right: 10px;
        font-size: 14pt;
    }

    #top #wrap_all #main .CheckoutForm .FormRow .fullwidth label {
        margin-right: 10px;
        font-size: 14pt;
        user-select: none
    }

    #top #wrap_all #main .CheckoutForm .FormRow .fullwidth input {
        margin-bottom: 3px;
    }

#top #wrap_all #main .CheckoutForm .SubmitForm {
    display: flex;
    justify-content: flex-end;
}

    #top #wrap_all #main .CheckoutForm .SubmitForm input {
        background-color: var(--blue);
        border: none;
        color: var(--white);
        cursor: pointer;
        width: 250px;
        text-align: center;
        font-size: 14pt;
        padding: 15px;
        box-sizing: border-box;
    }

#top #wrap_all #main .CheckoutQuickAccess {
    padding-top: 0;
    display: flex;
    justify-content: space-between;
}

    #top #wrap_all #main .CheckoutQuickAccess a {
        display: flex;
        align-items: center;
        background-color: var(--LightGray);
        padding: 30px;
        width: calc(50% - 10px);
        box-sizing: border-box;
    }

        #top #wrap_all #main .CheckoutQuickAccess a img {
            width: 100px;
            margin-left: 15px;
        }
/*
------------------------------------------------
----------------- Profile Page -----------------
------------------------------------------------
*/
#top #wrap_all #main .pagetitle .tab {
    display: flex;
    justify-content: space-between;
}

    #top #wrap_all #main .pagetitle .tab li {
        width: calc(25% - 15px);
        font-size: 14pt;
        font-weight: bold;
        background-color: var(--white);
        border: none;
        cursor: pointer;
        list-style: none;
        margin: 0 0.5rem;
        text-align: center;
    }

        #top #wrap_all #main .pagetitle .tab li a {
            padding: 25px 15px;
            display: block;
        }

        #top #wrap_all #main .pagetitle .tab li.active {
            background-color: var(--blue);
            color: var(--white);
        }

#top #wrap_all #main .InformationTab.Profile .wrapper {
    background-color: var(--white);
}
/* --------------- Wishlist ---------------- */
#top #wrap_all #main .Wishlist .Product .AddtoWish svg {
    fill: var(--blue);
}
/* --------------- Personal Info ---------------- */
#top #wrap_all #main .Profile .tabcontent {
    min-height: unset;
    padding: 0;
}

#top #wrap_all #main .profileforms .FormRow input[name=email] {
    margin-bottom: 20px;
}

#top #wrap_all #main .profileforms .FormRow label[for=Newsletter] {
    flex: 1;
    margin-right: 10px;
}

#top #wrap_all #main .profileforms .FormRow .submitform {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

    #top #wrap_all #main .profileforms .FormRow .submitform input {
        background-color: var(--blue);
        border: none;
        color: var(--white);
        cursor: pointer;
        width: 250px;
        text-align: center;
        font-size: 14pt;
        padding: 15px;
        box-sizing: border-box;
    }

#top #wrap_all #main .profileforms .FormRow input[name=OldPass] {
    width: calc(50% - 10px);
    margin-left: 50%;
    margin-bottom: 20px;
}

#top #wrap_all #main .profileforms .FormRow input[name=NewPass],
#top #wrap_all #main .profileforms .FormRow input[name=NewPassRep] {
    width: calc(50% - 10px);
    margin-bottom: 20px;
}

#top #wrap_all #main #Downloads .download {
    display: flex;
    justify-content: space-between;
}

    #top #wrap_all #main #Downloads .download h2 {
        padding: 15px 10px;
        width: calc(75% - 10px);
        background-color: var(--Gray);
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    #top #wrap_all #main #Downloads .download a {
        width: calc(25% - 10px);
        font-size: 14pt;
        font-weight: bold;
        padding: 15px 10px;
        background-color: var(--blue);
        border: none;
        cursor: pointer;
        color: var(--white);
        margin-bottom: 20px;
        box-sizing: border-box;
        text-align: center;
    }

#top #wrap_all #main #Orders .order {
    display: flex;
}

    #top #wrap_all #main #Orders .order h2 {
        padding: 15px 10px;
        width: calc(50% - 10px);
        background-color: var(--Gray);
        margin-bottom: 20px;
        margin-left: 20px;
        box-sizing: border-box;
    }

    #top #wrap_all #main #Orders .order a {
        width: calc(25% - 15px);
        font-size: 14pt;
        font-weight: bold;
        padding: 15px 10px;
        background-color: var(--blue);
        border: none;
        cursor: pointer;
        color: var(--white);
        margin-bottom: 20px;
        box-sizing: border-box;
        text-align: center;
    }

    #top #wrap_all #main #Downloads .download:last-child h2,
    #top #wrap_all #main #Downloads .download:last-child a,
    #top #wrap_all #main #Orders .order:last-child h2,
    #top #wrap_all #main #Orders .order:last-child a {
        margin-bottom: 0;
    }
/*
------------------------------------------------
------------------------------------------------
------------------------------------------------
------------------------------------------------
------------------------------------------------
------------------ Responsice ------------------
------------------------------------------------
------------------------------------------------
------------------------------------------------
------------------------------------------------
------------------------------------------------
*/
@media (max-width: 1199px) {
    /*
    ------------------------------------------------
    ------------------- Footer ---------------------
    ------------------------------------------------
    */
    /* --------------- Widgets ---------------- */
    #top #wrap_all #footer .Widgets .wrapper .FooterColumn {
        width: 100%;
    }

        #top #wrap_all #footer .Widgets .wrapper .FooterColumn:first-child {
            padding-bottom: 20px;
            border-bottom: solid 5px var(--Dark);
            margin-bottom: 20px;
        }

        #top #wrap_all #footer .Widgets .wrapper .FooterColumn > div:last-child {
            padding-left: 0;
            border-left: none;
        }
    /*
    ------------------------------------------------
    ----------------- Cart Page --------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .Cart .OrdeProducts .Product .ProductCover {
        width: 35%;
    }
}

@media (max-width: 899px) {
    /* ----------------------- .Section_Title Styles ----------------------- */
    #top #wrap_all #main .Section_Title h2 {
        width: calc(50% - 10px);
    }
    /*
    ------------------------------------------------
    ------------------ Home Page -------------------
    ------------------------------------------------
    */
    /* --------------- Promotion ---------------- */
    #top #wrap_all #main .Promotion .PromotionColumn {
        width: 100%;
        padding: 0 10%;
        margin-bottom: 56px;
    }

        #top #wrap_all #main .Promotion .PromotionColumn:last-child {
            margin-bottom: 0;
        }
    /*
    ------------------------------------------------
    ---------------- Sign in Page ------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .AuthForms .wrapper {
        flex-wrap: wrap;
    }

    #top #wrap_all #main .AuthForms .Signin {
        width: 100%;
        padding-left: 0;
        border-left: none;
        padding-bottom: 20px;
        border-bottom: solid 5px var(--Dark);
        margin-bottom: 20px;
    }

    #top #wrap_all #main .Signin a {
        bottom: 15px;
    }

    #top #wrap_all #main .AuthForms .SignUp {
        width: 100%;
        padding-right: 0;
    }
    /*
    ------------------------------------------------
    ------------------ Cart Page -------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .Cart .OrdeProducts {
        width: 100%;
        padding-left: 0;
        border-left: none;
        padding-bottom: 20px;
        border-bottom: solid 5px var(--Dark);
        margin-bottom: 20px;
    }

    #top #wrap_all #main .Cart .OrderSummary {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

        #top #wrap_all #main .Cart .OrderSummary div {
            justify-content: flex-end;
        }

            #top #wrap_all #main .Cart .OrderSummary div p:first-child {
                padding: 15px 0;
                margin-left: 20px;
            }
}

@media (max-width: 991px) and (min-width: 768px) {
    #top #wrap_all .columnfour .Product {
        width: calc(50% - 10px) !important;
    }

    .resultitem {
        margin-bottom: 20px !important
    }

    #top #wrap_all .columnfour .Author .AuthorPhoto {
        height: calc((100vw - 100px - 20px) / 2) !important;
    }

    #top #wrap_all .columnfour .Author .AuthorInCont .AuthorPhoto a img {
        height: 60% !important;
        width: auto !important;
    }
}

@media (max-width: 767px) {
    /*
    ------------------------------------------------
    ---------------- General Style -----------------
    ------------------------------------------------
    */
    /* ----------------------- .Section_Title Styles ----------------------- */
    #top #wrap_all #main .Section_Title h2 {
        width: 100%;
    }

    .resultitem {
        margin-bottom: 0 !important
    }
    /* ----------------------- .Product Styles ----------------------- */
    #top #wrap_all .columnfour .Product,
    #top #wrap_all .columnthree.RelatedProducts .Product:nth-last-of-type(2),
    #top #wrap_all .columnthree .Product:nth-last-of-type(3),
    #top #wrap_all .columnfour .Product:nth-last-of-type(3),
    #top #wrap_all .columnfour .Product:nth-last-of-type(4) {
        margin-bottom: 20px;
    }
    /* ----------------------- .Author Styles ----------------------- */
    #top #wrap_all .columnfour .Author {
        width: calc(50% - 10px);
    }

        #top #wrap_all .columnfour .Author:nth-last-of-type(3),
        #top #wrap_all .columnfour .Author:nth-last-of-type(4) {
            margin-bottom: 20px;
        }
    /*
    ------------------------------------------------
    ------------------ Shop Page -------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .filters .filter {
        width: calc(50% - 10px);
    }

        #top #wrap_all #main .filters .filter:nth-child(1),
        #top #wrap_all #main .filters .filter:nth-child(2) {
            margin-bottom: 20px;
        }
    /*
    ------------------------------------------------
    ---------------- Single Product ----------------
    ------------------------------------------------
    */
    #top #wrap_all #main .ProductIntroduction .ProductGallery {
        margin-bottom: 20px;
    }

    #top #wrap_all #main .ProductIntroduction .ProductGallery,
    #top #wrap_all #main .ProductIntroduction .ProductInformation {
        width: 100%;
    }
    /*
    ------------------------------------------------
    ---------------- Single Author -----------------
    ------------------------------------------------
    */
    #top #wrap_all #main > .Athour .wrapper > div {
        width: 100% !important;
    }

        #top #wrap_all #main > .Athour .wrapper > div:first-child {
            height: calc(100vw - 30px);
            margin-bottom: 20px;
        }

    #top #wrap_all .columnfour .Author .AuthorPhoto {
        height: calc(100vw - 30px) !important;
    }
    /*
    ------------------------------------------------
    ---------------- Checkout Page -----------------
    ------------------------------------------------
    */
    #top #wrap_all #main .CheckoutForm .FormRow input[type=text], #top #wrap_all #main .CheckoutForm .FormRow input[type=number], #top #wrap_all #main .CheckoutForm .FormRow input[type=email],
    #top #wrap_all #main .CheckoutQuickAccess a {
        width: 100% !important;
    }

    #top #wrap_all #main .CheckoutQuickAccess {
        flex-wrap: wrap;
    }

        #top #wrap_all #main .CheckoutQuickAccess a:first-child {
            margin-bottom: 20px;
        }

    #top #wrap_all #main .CheckoutForm .FormRow .halfwidth {
        width: 100%;
    }
}

@media (max-width: 699px) {
    /*
    ------------------------------------------------
    ---------------- General Style -----------------
    ------------------------------------------------
    */
    /* ----------------------- .Container Styles ----------------------- */
    #top #wrap_all .wrapper {
        padding: 30px
    }
    /*
    ------------------------------------------------
    ---------------- Header Style ------------------
    ------------------------------------------------
    */
    #top #wrap_all #header > .wrapper {
        padding: 0 20px;
    }
    /* --------------- BurgerOverlay ---------------- */
    #top #wrap_all #header #main_menu .NavigationContainer {
        padding-right: 30px;
    }

        #top #wrap_all #header #main_menu .NavigationContainer ul li a {
            font-size: calc( 10pt + 3.4vw);
        }

    /*
    ------------------------------------------------
    ---------------- Authors Page ------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .authors .wrapper::after {
        left: 30px;
    }
    /*
    ------------------------------------------------
    ---------------- Single Page -------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .InformationTab #Comments form {
        flex-wrap: wrap;
    }

        #top #wrap_all #main .InformationTab #Comments form > div {
            width: 100%;
        }

        #top #wrap_all #main .InformationTab #Comments form .form-right-section {
            margin-bottom: 20px;
        }

    #top #wrap_all #main .InformationTab #Comments input[type=submit] {
        left: 12px;
        bottom: 12px;
    }
    /*
    ------------------------------------------------
    ---------------- Profile Page ------------------
    ------------------------------------------------
    */
    #top #wrap_all #main #Orders .order a {
        width: calc(50% - 10px);
    }
}

@media (max-width: 639px) {
    /*
    ------------------------------------------------
    ------------------- Header ---------------------
    ------------------------------------------------
    */
    /* --------------- Logo ---------------- */
    #top #wrap_all #header .logo a {
        position: relative;
        width: 47px;
        height: 47px;
        overflow: hidden;
    }

        #top #wrap_all #header .logo a svg {
            min-width: 270px;
            position: absolute;
            left: 0;
        }

        #top #wrap_all #header .logo .logoresponsive,
        #top #wrap_all #header .logo a:hover .logoresponsive {
            transform: translateX(-270px);
            display: none;
        }
    /*
    ------------------------------------------------
    ---------------- Profile Page ------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .pagetitle .tab {
        flex-wrap: wrap;
    }

        #top #wrap_all #main .pagetitle .tab li {
            width: calc(50% - 10px);
        }

            #top #wrap_all #main .pagetitle .tab li:first-child,
            #top #wrap_all #main .pagetitle .tab li:nth-child(2) {
                margin-bottom: 20px;
            }
}

@media (max-width: 740px) {
    /*
    ------------------------------------------------
    ----------------- Single page ------------------
    ------------------------------------------------
    */
    /* --------------- Tab Section ---------------- */
    #top #wrap_all #main .InformationTab .tab button {
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }

        #top #wrap_all #main .InformationTab .tab button:last-child {
            margin-bottom: 0;
        }
}

@media (max-width: 599px) {
    /*
    ------------------------------------------------
    ------------------- Footer ---------------------
    ------------------------------------------------
    */
    /* --------------- Widgets ---------------- */
    #top #wrap_all #footer .Widgets .wrapper .FooterColumn {
        flex-direction: column;
    }

        #top #wrap_all #footer .Widgets .wrapper .FooterColumn > div {
            padding-bottom: 20px;
            border-bottom: solid 5px var(--Dark);
            margin-bottom: 20px;
            width: 100%;
        }

            #top #wrap_all #footer .Widgets .wrapper .FooterColumn > div:last-child {
                padding-bottom: 0;
                border-bottom: none;
                margin-bottom: 0;
            }

    #top #wrap_all #footer .Widgets .footer-border {
        border-left: none;
        padding-left: 0;
    }

    #top #wrap_all #footer .Widgets .footer-certs {
        justify-content: center;
    }

        #top #wrap_all #footer .Widgets .footer-certs img {
            max-width: 140px;
        }
    /*
    ------------------------------------------------
    ------------------ Home Page -------------------
    ------------------------------------------------
    */
    /* --------------- Promotion ---------------- */
    #top #wrap_all #main .Promotion .PromotionColumn {
        padding: 0;
    }
}

@media (max-width: 549px) {
    /*
    ------------------------------------------------
    ---------------- Sign in Page ------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .Signin form label[for=UserName],
    #top #wrap_all #main .Signin form label[for=Password],
    #top #wrap_all #main .Signin form input[name=UserName],
    #top #wrap_all #main .Signin form input[name=Password],
    #top #wrap_all #main .Signin form input[name=Email],
    #top #wrap_all #main .SignUp form label[for=UserName],
    #top #wrap_all #main .SignUp form label[for=Password],
    #top #wrap_all #main .SignUp form input[name=UserName],
    #top #wrap_all #main .SignUp form input[name=Password] {
        width: 100%;
    }

    #top #wrap_all #main .Signin form label[for=RememberMe] {
        width: calc(100% - 30px);
        margin-bottom: 20px;
    }

    #top #wrap_all #main .Signin form input[name=signin] {
        margin: 0 auto 20px;
        min-width: 140px;
    }

    #top #wrap_all #main .Signin a {
        position: relative;
        bottom: 0;
        display: flex;
        justify-content: flex-start;
        margin-top: 20px
    }

    #top #wrap_all #main .SignUp form input[name=signup] {
        margin: 0 auto;
        min-width: 140px;
    }
}

@media (max-width: 499px) {
    /*
    ------------------------------------------------
    ---------------- Checkout Page -----------------
    ------------------------------------------------
    */
    #top #wrap_all #main .CheckoutForm .FormRow .RowTitle {
        flex-wrap: wrap;
    }

        #top #wrap_all #main .CheckoutForm .FormRow .RowTitle p {
            margin-right: 0;
            width: 100%;
            margin-top: 20px;
        }

    #top #wrap_all #main .CheckoutForm .FormRow .PostalCode {
        flex-wrap: wrap;
    }

        #top #wrap_all #main .CheckoutForm .FormRow .PostalCode a,
        #top #wrap_all #main .CheckoutForm .FormRow .PostalCode input {
            width: 100%;
            padding: 15px 0;
        }

        #top #wrap_all #main .CheckoutForm .FormRow .PostalCode input {
            margin-bottom: 20px;
        }
}

@media (max-width: 439px) {
    /*
    ------------------------------------------------
    ------------------ Home Page -------------------
    ------------------------------------------------
    */
    /* --------------- Promotion ---------------- */
    #top #wrap_all #main .Promotion .PromotionProduct .PromotionCover {
        margin-bottom: 26px;
    }

    #top #wrap_all #main .Promotion .PromotionProduct .PromotionCover,
    #top #wrap_all #main .Promotion .PromotionProduct .PromotionAction {
        width: 100%;
    }
    /*
    ------------------------------------------------
    ----------------- Single page ------------------
    ------------------------------------------------
    */
    /* --------------- Tab Section ---------------- */
    #top #wrap_all #main .InformationTab #Comments .form-left-section {
        flex-wrap: wrap;
    }

    #top #wrap_all #main .InformationTab #Comments input[type=submit] {
        position: relative;
        left: 0;
        bottom: 0;
        margin-top: 20px;
        width: 100%;
    }
}

@media (max-width: 549px) {
    /*
    ------------------------------------------------
    ---------------- General Style -----------------
    ------------------------------------------------
    */
    /* ----------------------- .Product Styles ----------------------- */
    #top #wrap_all .ProductContainer .Product, #top #wrap_all .ProductContainer .Product.large {
        width: 100%;
        margin-bottom: 20px;
    }

    #top #wrap_all .columnfour .Product:nth-last-of-type(2) {
        margin-bottom: 20px;
    }

    #top #wrap_all .ProductContainer .Product:last-of-type {
        margin-bottom: 0px;
    }
    /* ----------------------- .Author Styles ----------------------- */
    #top #wrap_all .columnfour .Author {
        width: 100% !important;
    }

        #top #wrap_all .columnfour .Author:nth-last-of-type(2),
        #top #wrap_all .columnthree .Product:nth-last-child(2) {
            margin-bottom: 20px;
        }
    /*
    ------------------------------------------------
    ---------------- Profile Page ------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .pagetitle .tab li {
        width: 100%;
    }

        #top #wrap_all #main .pagetitle .tab li:nth-child(3) {
            margin-bottom: 20px;
        }

    #top #wrap_all #main .profileforms .FormRow input[name=OldPass],
    #top #wrap_all #main .profileforms .FormRow input[name=NewPass],
    #top #wrap_all #main .profileforms .FormRow input[name=NewPassRep] {
        width: 100%;
        margin-left: 0;
    }
    /*
    ------------------------------------------------
    ------------------- Header ---------------------
    ------------------------------------------------
    */
    #top #wrap_all #header #main_menu .HeaderMainMenu .Cart {
        margin-left: 0;
    }

    #top #wrap_all #header #main_menu .HeaderMainMenu .Wishlist,
    #top #wrap_all #header #main_menu .HeaderMainMenu .Profile {
        display: none;
    }
    /* --------------- Burger Overlay ---------------- */
    .NavigationContainer ul .MobileOnly {
        display: list-item;
    }

    #top #wrap_all #header #main_menu .NavigationContainer ul .LastDesktopItem {
        border-bottom: solid 6px var(--white);
    }

    #top #wrap_all #header #main_menu .NavigationContainer ul li:last-child {
        border-bottom: none;
    }
    /*
    ------------------------------------------------
    ------------------ Shop Page -------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .filters .filter {
        width: 100%;
    }

        #top #wrap_all #main .filters .filter:nth-child(3) {
            margin-bottom: 20px;
        }
    /*
    ------------------------------------------------
    ---------------- Single Product ----------------
    ------------------------------------------------
    */
    #top #wrap_all #main .ProductIntroduction .ProductGallery {
        flex-wrap: wrap;
    }

        #top #wrap_all #main .ProductIntroduction .ProductGallery .GalleryPreview {
            margin-bottom: 20px;
        }

        #top #wrap_all #main .ProductIntroduction .ProductGallery .GalleryPreview,
        #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs {
            width: 100%;
        }

            #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #thumbs-container {
                display: flex;
            }

            #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs img {
                margin-bottom: 0;
                margin-left: 20px;
                width: calc(33.33% - 13.33px);
            }

                #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs img:last-child {
                    margin-left: 0px;
                }

            #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-up,
            #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-down {
                display: none;
            }

            #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-left {
                display: flex;
            }

                #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-left.HideScrollLeft {
                    display: none;
                }

            #top #wrap_all #main .ProductIntroduction .ProductGallery .GallertyThumbs #arrow-right.ShowScrollRight {
                display: flex;
            }
    /*
    ------------------------------------------------
    ------------------ Cart Page -------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .Cart .OrdeProducts .Product .ProductCover {
        width: 20vw !important;
        height: 20vw;
    }

    #top #wrap_all #main .Cart .OrderSummary div {
        flex-wrap: wrap;
    }

        #top #wrap_all #main .Cart .OrderSummary div p:first-child {
            margin-left: 0;
            padding: 0;
            margin-bottom: 20px;
        }

        #top #wrap_all #main .Cart .OrderSummary div p,
        #top #wrap_all #main .Cart .OrderSummary div p:nth-child(2),
        #top #wrap_all #main .Cart .OrderSummary div input,
        #top #wrap_all #main .Cart .OrderSummary div button,
        #top #wrap_all #main .Cart .OrderSummary div a {
            width: 100% !important;
        }
}

@media (max-width: 359px) {
    /*
    ------------------------------------------------
    ------------------ Cart Page -------------------
    ------------------------------------------------
    */
    #top #wrap_all #main .Cart .OrdeProducts .Product {
        flex-wrap: wrap;
    }

        #top #wrap_all #main .Cart .OrdeProducts .Product .ProductCover {
            width: 100%;
            margin-bottom: 20px;
        }

        #top #wrap_all #main .Cart .OrdeProducts .Product .ProductDetail {
            width: 100%;
            margin-right: 0;
        }

    #top #wrap_all #main .CheckoutQuickAccess a {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 299px) {
    /*
    ------------------------------------------------
    ------------------- Header ---------------------
    ------------------------------------------------
    */
    #top #wrap_all #header #main_menu .HeaderMainMenu .BurgerICO,
    #top #wrap_all #header #main_menu .HeaderMainMenu .SearchICO {
        margin-left: 10px;
    }
}

.logout {
    position: absolute;
    left: 60px;
    top: 49px;
    padding: 20px;
    background-color: #000000;
    border: 5px solid #000;
    color: #fff;
    cursor: pointer;
    z-index: 8;
    transition: all.3s
}

    .logout span {
        margin-left: 10px;
    }

    .logout:hover {
        background-color: #fff;
        color: #000
    }

@media (max-width: 767px) {
    .Section_Title {
        margin-top: 50px;
    }

    .logout {
        left: 0;
        top: 0;
        padding: 10px;
        font-size: 14px;
    }

    #top #wrap_all #main .Section_Title h2,
    #top #wrap_all #main .Section_Title h1 {
        font-size: 20pt;
    }
}