/***********************************
Core styles
************************************/
*, *:before, *:after {
    box-sizing: border-box;
}
html, body {
    font-family: 'Rubik', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
a {
    color: #333;
    text-decoration: none;
}
hr {
    border-top: 1px solid #ddd;
    border-left: 0;
    border-bottom: 0;
    border-right: 0;
    height: 0;
}
.container {
    overflow: auto;
}
@media all and (max-width: 999px) {
    .container {
        margin: 0 10px;
    }
}
@media all and (min-width: 1000px) {
    .container {
        width: 1000px;
        margin: 0 auto;
    }
}
.clear {
    clear: both;
}
.top-aligned *:first-child {
    margin-top: 0;
}
.error {
    color: #933;
}
.success {
    color: #050;
}

/***********************************
Header section
************************************/
header {
    background-image: url(/media/images/layout/clouds.jpg);
    background-position: center top -250px;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: auto;
}
@media all and (max-width: 799px) {
    header {
        background-position: center center;
    }
}

/***********************************
Accept cookie bar
************************************/
#CookiePolicy {
    display: none;
    padding: 10px 0;
    color: #eee;
    background: #333;
}
#CookieInfo {
    font-size: 0.9em;
    line-height: 1.5em;
}
#CookieInfo a {
    color: #fff;
    text-decoration: underline;
}
#CookieOptions {
    float: right;
    margin: 0 0 0 20px;
    font-size: 1.2em;
}
#CookieOptions a {
    color: orange;
}

/***********************************
Notices bar
************************************/
#Notices {
    padding: 10px 0;
    text-align: center;
}

/***********************************
Top bar
************************************/
#TopBar {
    /*background: #ccc linear-gradient(to bottom, #ccc, #bbb);*/
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 0;
}
#TopBar ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#TopBar li {
    display: inline-block;
    margin-right: 4px;
}
#TopBar ul:first-child li {
    margin-left: 10px;
}
#TopBar ul:first-child li:first-child {
    margin-left: 0;
}
ul#QuickCart {
    margin-left: 10px;
}
#QuickCartPrice {
    font-weight: bold;
}
#Contact {
    float: left;
}
#Contact div:first-child {
    color: #555;
    font-style: italic;
    font-size: 0.95em;
}
#Contact div:last-child {
    font-weight: bold;
}
@media all and (max-width: 425px) {
    #Contact div {
        display: inline-block;
    }
}
/*
@media all and (min-width: 800px) {
    #Contact {
        font-size: 1.5em;
    }
    #Contact div {
        display: inline-block;
    }
    #Contact div:last-child {
        margin-left: 10px;
        font-weight: normal;
        color: #444;
    }
}*/
#TopBarRight {
    float: right;
    margin: 7px 0 0 0;
}

/***********************************
Search bar
************************************/
#SubBar {
    padding-top: 20px;
    padding-bottom: 20px;
    background: rgba(255, 255, 255, 0.7);
}
#Search input,  #Search button {
    height: 30px;
    vertical-align: middle;
}
#Search input[type=text] {
    border: 1px solid #bbb;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    padding: 0 5px;
    width: 300px;
    outline: 0;
}
#Search input[type=text]::placeholder {
    color: #aaa;
}
#Search button {
    background: linear-gradient(to bottom, #eee, #ccc);
    border: 1px solid #bbb;
    border-radius: 0 5px 5px 0;
}
@media all and (max-width: 649px) {
    #Search {
        margin-top: 5px;
    }
    #Search form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }
    #Search form input {
        flex: 1;
    }
}
@media all and (min-width: 650px) {
    #Logo {
        float: left;
        margin-top: 3px;
    }
    #Search {
        float: right;
    }
}

/***********************************
Navigation
************************************/
#Navigation {
    background: #d30303;
}
#MobileNavigationClose {
    display: none;
}
#MobileMenu {
    display: none;
    float: right;
    color: #fff;
    cursor: pointer;
    padding: 10px 0;
}
#MobileMenu img {
    vertical-align: middle;
    margin: -3px 0 0 0;
}
#Navigation a {
    display: inline-block;
    padding: 15px;
    color: #fff;
    text-transform: uppercase;
    transition: background 0.5s;
}
#Navigation a:hover {
    background: #f00;
}

@media all and (max-width: 815px) {
    #MobileNavigationClose {
        color: #ccc;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 101;
        font-size: 1.1em;
    }
    #MobileMenu {
        display: block;
    }
    #Navigation ul {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 50px 0 0 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 100;
    }
    #Navigation ul.mobile-nav-on {
        display: block;
    }
    #Navigation ul.mobile-nav-on ~ #MobileNavigationClose {
        display: block;
    }
    #Navigation li {
        display: block;
    }
    #Navigation a {
        display: block;
    }
}
@media all and (min-width: 816px) {
    #Navigation ul {
        float: left;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: auto;
    }
    #Navigation li {
        float: left;
        padding: 0;
        margin: 0;
        border-right: 1px solid #fff;
    }
}
@media all and (min-width: 1000px) {
    #Navigation li:first-child {
        border-left: 1px solid #fff;
    }
}


/***********************************
Footer section
************************************/
footer {
    background: #999999;
    margin: 30px 0 0 0;
    padding: 20px 0;
    overflow: auto;
}
footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
footer a {
    display: inline-block;
    color: #000;
    margin: 3px 0;
}
footer a:hover {
    text-decoration: underline;
}
footer h4 {
    color: #fff;
    margin: 0 0 0.5em 0;
}
footer ul ~ h4 {
    margin-top: 30px;
}
footer img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
}
@media all and (max-width: 999px) {
    footer h4 {
        margin-top: 2em;
    }
    .footer-column:first-child h4:first-child {
        margin-top: 0;
    }
}
@media all and (min-width: 1000px) {
    .footer-column {
        float: left;
        width: 33%;
    }
}

/***********************************
Main section
************************************/
main {
    overflow: auto;
}
main a {
    color: #06a;
}

.main-container {
    margin-top: 10px;
}
.main-container > *:first-child {
    margin-top: 0;
}
main a:hover, main a:hover .link {
    text-decoration: underline;
}
.main-container p {
    line-height: 1.5em;
}


/***********************************
Breadcrumb
************************************/
#Breadcrumb {
    padding: 12px 0;
    margin: 0;
    font-size: 0.9em;
    border-bottom: 1px solid #eee;
}
#Breadcrumb a {
    color: #333;
}
#Breadcrumb a:before {
    content: '>';
    display: inline-block;
    color: #ccc;
    margin: 0 4px;
}
#Breadcrumb a:first-child:before {
    content: '';
    display: inline-block;
    margin: 0;
}

/***********************************
Dialogs
************************************/
#DialogsBackground {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 101;
    background: rgba(0, 0, 0, 0.6);
}
#BasketConfirmationDialog {
    display: none;
    position: fixed;
    border: 2px solid #ccc;
    border-radius: 5px;
    background: #fff;
    padding: 20px;
    z-index: 102;
}
@media all and (max-width: 799px) {
    #BasketConfirmationDialog {
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
    }
}
@media all and (min-width: 800px) {
    #BasketConfirmationDialog {
        top: 50%;
        left: 50%;
        width: 600px;
        height: 300px;
        margin-top: -150px;
        margin-left: -300px;
    }
}

#BasketConfirmationDialogInfo {
    overflow: auto;
}
#BasketConfirmationDialogImage {
    height: 200px;
    border: 1px solid #999;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 3px;
    margin-right: 20px;
}
@media all and (min-width: 800px) {
    #BasketConfirmationDialogImage {
        float: left;
        width: 200px;
    }
}
#BasketConfirmationDialogText {
    overflow: auto;
}
#BasketConfirmationDialogTitle {
    font-size: 1.5em;
    font-weight: bold;
}
@media all and (max-width: 799px) {
    #BasketConfirmationDialogTitle {
        margin-top: 10px;
    }
}
#BasketConfirmationDialogConfirmation {
    margin: 20px 0 0 0;
    font-size: 1.1em;
}
#BasketConfirmationDialogConfirmation span {
    display: inline-block;
    vertical-align: middle;
}
#BasketConfirmationDialogConfirmation span:first-child {
    font-weight: bold;
    margin-right: 6px;
    font-size: 2em;
}
#BasketConfirmationDialogButtons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    border-top: 1px solid #ddd;
}
#BasketConfirmationDialogButtons a {
    display: inline-block;
}
#BasketConfirmationDialogButtons a:last-child {
    margin-left: 8%;
    font-weight: bold;
}
@media all and (min-width: 800px) {
    #BasketConfirmationDialogButtons a {
        width: 45%;
    }
}


/***********************************
Facets
************************************/
.facet-container {
    margin: 10px 0 20px 0;
    background: #333;
    padding: 15px 0;
}
.facet-container h3 {
    margin: 0;
    cursor: pointer;
}
.facet-container h3 span {
    padding: 0 30px 0 0;
    display: inline-block;
    color: #fff;
    background: url(/media/images/layout/arrow-down.svg) no-repeat right center;
}
.facets {
    text-align: center;
}
.facet-default > div {
    padding: 20px;
    margin: 0 10px 0 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff url(/media/images/layout/arrow-down.svg) no-repeat right 15px center;
    cursor: pointer;
}
.facet-default h4 {
    margin: 0 0 0 -20px;
    padding: 0;
    font-weight: normal;
}
.facet-default ul {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.facet-default li {
    float: left;
}

.facet-images h4 {
    text-align: left;
    color: orange;
    margin: 0 0 10px 0;
}
.facet-images {
    clear: both;
    margin: 20px 0;
}
.facet-images ul {
    list-style-type: none;
    margin: 0 0 0 10px;
    padding: 0;
    float: left;
}
.facet-images li {
    float: left;
    text-align: center;
    margin: 0 20px 0 0;
}
.facet-images a {
    color: #ccc;
    padding: 15px;
}
.facet-images img {
    width: 60px;
    height: 60px;
}
.facet-images div {
    font-size: 0.9em;
    font-style: italic;
}
.facet-images-item-selected {
    background: radial-gradient(ellipse closest-side, #555, #333);
}
.facet-images-item-selected a {
    color: #9cf;
}

@media all and (max-width: 499px) {
    .facet {
        margin: 10px 0 0 0;
    }
}
@media all and (min-width: 500px) {
    .facets {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0;
    }
    .facet {
        display: inline-block;
        position: relative;
        width: 25%;
        margin: 10px 0 0 0;
    }
}

/***********************************
Product listings
************************************/
.product-content > a:hover {
    text-decoration: none;
}
.products-meta {
    background: #eee;
    padding: 15px 0;
    overflow: auto;
}
.products-meta-showing {
    float: left;
}
.products-meta-paging {
    float: right;
}
.products-meta-paging a {
    display: inline-block;
    color: #fff;
    background: #999;
    min-width: 25px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.5em;
    text-decoration: none;
}
a.paging-selected {
    background: #d30303;
}
@media all and (max-width: 499px) {
    .products {
        margin: 20px 0;
    }
    .product {
        margin: 20px 0 10px 0;
        padding: 30px 0 10px 0;
        border-top: 1px solid #eee;
        overflow: auto;
    }
    .product:first-child {
        border-top: 0;
    }
    .product *:last-child {
        margin-bottom: 0;
    }
    .product-title {
        font-weight: bold;
        padding: 5px 0;
    }
    .product-image {
        float: left;
        position: relative;
        overflow: hidden;
        width: 100px;
        height: 100px;
        margin: 0 10px 5px 0;
    }
    .product-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .product-price {
        font-weight: bold;
        color: #b12704;
        margin: 7px 0;
    }
    .product-price-from-label {
        font-weight: normal;
        color: #000;
        font-size: 0.9em;
    }
    .product-price strike {
        color: #333;
        font-weight: normal;
    }
    .product-abstract {
        color: #555;
        font-size: 0.9em;
        overflow: auto;
    }
    .product-abstract *:first-child {
        margin: 0;
    }
}

@media all and (min-width: 500px) {
    .products {
        display                 : grid;
        grid-gap                : 0;
        align-items             : start;
        /*
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: center;
        */
        padding: 20px 0;
    }
    .product {
        margin: 0 0 20px 0;
    }
    .product-content {
        padding: 10px;
        margin: 0 10px 0 0;
        border: 1px solid #eee;
        border-radius: 5px;
        text-align: left;
        overflow: hidden;
    }
    .product a {
        display: block;
    }
    .product-title {
        height: 40px;
        font-weight: bold;
    }
    .product-image {
        position: relative;
        overflow: hidden;
        text-align: center;
        height: 220px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
    }
    .product-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .product-price {
        font-weight: bold;
        color: #b12704;
        margin: 7px 0;
    }
    .product-price-from-label {
        font-weight: normal;
        color: #000;
        font-size: 0.9em;
    }
    .product-price strike {
        color: #333;
        font-weight: normal;
    }
    .product-abstract {
        color: #555;
        font-size: 0.9em;
        height: 115px;
        overflow: auto;
    }
    .product-abstract *:first-child {
        margin: 0;
    }
    @media all and (max-width: 999px) {
        .products {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media all and (min-width: 1000px) {
        .products {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}

/***********************************
Misc styles
************************************/
.banner {
    position: relative;
    height: 400px;
    background: #eee;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.notice {
    background: #ffffe0;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 10px;
}

/***********************************
Forms
************************************/
main button, .button {
    padding: 8px 10px;
    text-align: center;
    color: #000;
    border: 1px solid #999;
    border-radius: 5px;
    /*
    background: #cb9b38;
    background: linear-gradient(to bottom, #fddf90, #cb9b38);
    */
    background: #cbab38;
    background: linear-gradient(to bottom, #fdef90, #cbab38);

}

/***********************************
Product page
************************************/
#ProductHeader {
    overflow: hidden;
}
#MainProductImage {
    position: relative;
    border: 1px solid #ddd;
}
@media all and (max-width: 549px) {
    #ProductImages {
        margin: 0 0 15px 0;
        text-align: center;
    }
    #MainProductImage {
        width: 100%;
        height: 300px;
    }
}
@media all and (min-width: 550px) {
    #ProductImages {
        float: left;
        margin: 10px 20px 0 0;
    }
    #MainProductImage {
        width: 300px;
        height: 300px;
    }
    #MainProductImage img {
        width: 298px;
        height: 298px;
    }
    #ProductInformation {
        padding-top: 5px;
        overflow: auto;
    }
}
#ProductInformation *:first-child {
    margin-top: 0;
}


#ProductPromotion {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
  }
  #ProductPromotion span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#F70505 0%, #E00 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -21px;
  }
  @media all and (min-width: 550px) {
    #ProductPromotion span::before {
        content: "";
        position: absolute; left: 0px; top: 100%;
        z-index: -1;
        border-left: 3px solid #E00;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-top: 3px solid #E00;
    }
    #ProductPromotion span::after {
        content: "";
        position: absolute; right: 0px; top: 100%;
        z-index: -1;
        border-left: 3px solid transparent;
        border-right: 3px solid #E00;
        border-bottom: 3px solid transparent;
        border-top: 3px solid #E00;
    }
}

.product-thumbnail-image {
    display: inline-block;
    margin: 7px 7px 0 0;
    height: 40px;
    width: 40px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid #ddd;
    cursor: pointer;
}
.product-thumbnail-pdf {
    display: inline-block;
    margin: 7px 7px 0 0;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    overflow: hidden;
}
.product-thumbnail-pdf img {
    width: 38px;
    height: 38px;
}
.product-thumbnail-video {
    display: inline-block;
    margin: 7px 7px 0 0;
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 1px solid #ddd;
    overflow: hidden;
}
.product-thumbnail-video img {
    width: 34px;
    height: 34px;
}

#ProductPrice {
    font-weight: bold;
    color: #b12704;
    font-size: 1.5em;
}
#ProductWasPrice {
    text-decoration: line-through;
    font-weight: normal;
    font-size: 0.9em;
    margin: 0 0 0 5px;
    color: #888;
}
#ProductQuantity {
    margin: 0 5px 0 15px;
}
#ProductForm {
    border-bottom: 1px solid #eee;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
}
#ProductForm input[type=number] {
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 7px 3px;
    font-size: 1.1em;
    width: 50px;
}

.product-help-text {
    margin: 40px 0 0 0;
}
.product-help-text > h2:first-child {
    font-size: 1.2em;
    font-weight: normal;
    color: #000;
    padding: 5px 20px;
    background: #ccc;
    margin: 0;
    border-radius: 5px 5px 0 0;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2);
}
.product-help-text > div {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 0 0 5px 5px;
}
@media all and (max-width: 500px) {
    .product-help-text img {
        max-width: 100%;
    }
}

#AttributeProductForm {
    display: none;
    /*
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;*/
    padding: 15px;
    margin: 20px 0;
    color: #fff;
    background: #000;
    border-radius: 5px;
}
#AttributeProductForm #ProductForm {
    border-bottom: 0;
    padding: 0;
}