/*---fonts---*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&family=Press+Start+2P&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&family=GFS+Didot&family=Press+Start+2P&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/*---icons---*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');



/*---snackbar---*/
#snackbar
{
    opacity: 0;
    display: none;
    width: 50%;
    height: auto; 
    background-color: #000000; 
    font-family: 'Segoe UI';
    font-size: 20px;
    color: #fff; 
    text-align: center; 
    border-radius: 4px;
    position: fixed; 
    z-index: 1; 
    bottom: 40px;
    padding-bottom: 15px;
    padding-top: 15px; 
    left: 25%;
}



/*---ajax---*/
#ajax-response
{
    display: none;
}


/*---global---*/
html, body
{
    background: #ffffff;
    color: #000000;
    margin: 0;

    height: 100%;
    font-size: 17px;

    font-family: 'Segoe UI';

    scroll-behavior: smooth;
}

.button
{
    transition: 0.5s;
    border: 2px solid #000000;
    background: #000000;
    color: #ffffff;
    height: 50px;
    font-size: 18px;
    font-family: 'Segoe UI';
    cursor: pointer;
    text-decoration: none;
    width: 250px;
    font-weight: 200;
}

.button:disabled
{
    transition: 1s;
    opacity: 0.4;
    cursor: not-allowed;
}

.button:hover:not([disabled])
{
    transition: 0.3s;
    color: #000000;
    background-color: transparent;
    border: 2px solid  #000000;
}

.image-overlay
{
    transition: 0.3s ease;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    background-color: #000000;
    border-radius: 5px;
}

.image-overlay-text
{
    transition: 0.3s;
    opacity: 0;
    color: #ffffff;
    font-size: 30px;
    font-family: 'Segoe UI';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.image-overlay-text2
{
    transition: 0.3s;
    opacity: 1;
    color: #ffffff;
    font-size: 30px;
    font-family: 'Segoe UI';
    position: absolute;
    top: 0px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #000000;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.cover-container
{
    margin: 0;
    /*height: 55%;*/
    height: 70%;
    background: #1b1b1b; 
}

.cover
{
    position: relative;
    opacity: 1;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100%;
}

.cover-text-container
{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000000;
    font-size: 30px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.cover-text-container span
{
    background-color: #111;
    color: #fff;
    padding: 20px;
    opacity: 0.7;
}

.cover-dot-container
{
    text-align: center;
    position: absolute;
    bottom: 0px;
    margin-bottom: 20px;
    width: 100%;
}

.cover-dot-subcontainer
{
    display: flex;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: min-content;
}

.cover-dot
{
    transition: 0.3s;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #1b1b1b;
    border: 2px solid #000000;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
}

.cover-dot:hover
{
    transition: 0.3s;
    background: transparent;
}

.cover-dot-active
{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #888888;
    border: 2px solid #000000;
    margin-left: 5px;
    margin-right: 5px;
}




/*---header---*/
.header
{
    width: 100%;
    height: 140px;
    background: #ffffff;
    border-bottom: 1px solid #d3d3d3;
}

.header-content
{
    width: 80%;
    height: 100%;
    background: transparent;
    margin: auto;
}

.header-content-section
{
    width: 33.33%;
    height: 100%;
    float: left;
}

.header-logo
{
    transition: 1s;
    width: 90px;
    height: auto;
    border: 1px solid #ffffff;
    margin-top: 10px;
    margin-bottom: -5px;
    filter: invert(0%);
}

.header-logo:hover
{
    transition: 1s;
    -webkit-filter: invert(100%); 
    filter: invert(100%);
}

.header-logo-text
{
    font-size: 25px;
    letter-spacing: 5px;
    margin: auto;
}

.header-link
{
    transition: 0.3s;
    text-decoration: none;
    color: #000000;
    font-size: 18px;
    margin-right: 15px;
    margin-top: 60px;
    display: inline-block;
    font-weight: 400;
}

.header-link:hover
{
    transition: 0.3s;
    color: #b3b3b3;
}

.header-link-active
{
    transition: 0.3s;
    text-decoration: none;
    color: #000000;
    font-size: 18px;
    margin-right: 15px;
    margin-top: 60px;
    display: inline-block;
    font-weight: 600;
}

.header-link-active:hover
{
    transition: 0.3s;
    color: #b3b3b3;
}

.header-navigation-links
{
    display: block;
    height: 100%;
}

.header-navigation-links-menu
{
    display: none;
}

.header-subcontainer
{
    width: 174px;
    height: 100%;
    text-align: center;
}

.header-subcontainer-small
{
    width: 80px;
    height: 100%;
    text-align: center;
}

.header-subcontainer-icon
{
    margin-top: 52px;
    text-align: center;
    font-size: 35px;
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
}

.header-subcontainer-icon-small
{
    margin-top: 54px;
    margin-right: 10px;
    text-align: center;
    font-size: 32px;
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
}

.header-subcontainer-icon a, .header-subcontainer-icon-small a
{
    color: #000000;
    text-decoration: none;
}

.header-subcontainer-icon a:hover, .header-subcontainer-icon-small a:hover
{
    color: #33aa33;
}

.icon-counter
{
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-family: 'Segoe UI';
    border-radius: 50%;
    color: #ffffff;
    background: #ff0000;
    text-align: center;
    position: relative;
    z-index: 1;
    bottom: 50px;
    left: 80%;
    display: block;
}

.icon-counter:empty
{
    display: none;
}

.navigation-menu-overlay
{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: #000000;
    opacity: 0.9;
    overflow-x: hidden;
    transition: 0.5s;
}
  
.navigation-menu-overlay-content
{
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
  
.navigation-menu-overlay a
{
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #888888;
    display: block;
    transition: 0.3s;
}

.navigation-menu-overlay a:hover, .navigation-menu-overlay a:focus
{
    color: #f1f1f1;
}
  
.navigation-menu-overlay .navigation-menu-close-button
{
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

.navigation-menu-close-button
{
    color: #ffffff;
}




/*---footer---*/
.footer
{
    border-top: 1px solid #d9d9d9;
    width: 100%;
    background-image: linear-gradient(45deg, #111111 ,#101010, #111111);

    display: inline-block;
    position: relative;
    height: auto;
}

.footer-content-container
{
    padding-top: 40px;
    padding-bottom: 40px;
    width: 80%;
    margin: auto;
    display: flex;
}

.footer-content-block
{
    width: 25%;
    height: auto;
    color: #000000;
    line-height: 20px;
}

.footer-content-block h2
{
    color: #ffffff;
    font-weight: 200;
    font-size: 20px;
}

.footer-content-block a
{
    text-decoration: underline;
    color: #888888;
    display: inline-block;
    margin-bottom: 10px;
    font-weight: 200;
}

.footer-content-block p
{
    color: #d9d9d9;
    font-weight: 200;
}

.footer-content-block p span
{
    color: #ffffff;
    font-weight: 200;
}

.footer-social-media-icon-container .footer-payment-method-icon-container
{
    display: block;
}

.footer-social-media-icon-container i
{
    font-size: 35px;
    margin-right: 5px;
}

.footer-payment-method-icon-container i
{
    font-size: 30px;
    margin-right: 5px;
    color: #fbfbfb;
}

.footer-logo-container
{
    display: flex;
}

.footer-logo
{
    transition: 1s;
    width: 90px;
    height: 90px;
    margin-right: 10px;
    vertical-align: middle;
    -webkit-filter: invert(100%); 
    filter: invert(100%);
    margin-right: 10px;
}

.footer-logo:hover
{
    transition: 1s;
    -webkit-filter: invert(0%); 
    filter: invert(0%);
}

.footer-logo-text
{
    margin-left: 10px;
    max-width: 50%;
    color: #d9d9d9;
    font-weight: 200;
}

.footer-input
{
    width: 25%; 
    height: 45px;
    font-size: 18px;
    padding-left: 10px;
    border-radius: 45px;
    border: 1px solid #000000;
    outline: none;
}

.footer-input:focus .alien-footer-input:active
{
    outline: none;
}

.footer-button
{
    width: 10%;
    height: 50px;
    border-radius: 50px;
    color: #ffffff;
    background: #000000;
    outline: none;
    font-size: 18px;
    border: 2px solid #000000;
    margin-left: -40px;
}

.footer-trivial
{
    width: 100%;
    margin: auto;
    background: #1b1b1b;
    text-align: center;
}

.footer-trivial-content-container
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-trivial-content-block
{
    color: #ffffff;
}

.footer-trivial-content-container p
{
    color: #888888;
}

.footer-trivial-content-container p:last-child
{
    margin-left: 10px;
    opacity: 0.5;
}

.footer-trivial-content-container p:last-child span
{
    color: #33aa33;
}



/*---index.php---*/
.index
{
    width: 80%;
    position: relative;
    margin: auto;
    text-align: center;
    height: 700px;
}

.index-title
{
    text-align: center;
    font-family: 'GFS Didot', serif;
    font-size: 50px;
    color: #1a1a1a;
}

.index-text
{
    text-align: center;
    font-family: 'Segoe UI';
    font-size: 20px;
    color: #1b1b1b;
}

.index-link
{
    font-family: 'SEGOE UI';
    font-size: 20px;
    color: #33aa33;
    text-decoration: none;
}

.index-link:hover
{
    color: #ffffff;
}




/*---store.php---*/
.store-container
{
    margin-bottom: 100px;
}

.store
{
    width: 80%;
    position: relative;
    margin: auto;
}

.store-title
{
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    color: #1a1a1a;
}

.store-text
{
    text-align: center;
    font-family: 'Segoe UI';
    font-size: 20px;
    color: #1b1b1b;
}

.store-menu
{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 100px;
    background: #1b1b1b;
    float: left;
    text-align: left;
}

.store-menu-link
{
    transition: 0.3s;
    color: #33aa33;
    font-size: 20px;
    font-family: "Source Sans Pro", Arial, sans-serif;
    text-decoration: none;
    text-align: left;
    padding-left: 10px;
    padding-right: 30px;
}

.store-menu-link:hover
{
    transition: 0.3s;
    color: #ffffff;
}

.store-product-container
{
    width: 20.83%;
    height: auto;
    display: inline-block;
    margin-bottom: 5%;
}

.store-product-image-container
{
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    color: #000000;
    font-family: 'Segoe UI';
}

.store-product-image-container:hover .image-overlay
{
    transition: 0.4s;
    opacity: 0.4;
}

.store-product-image-container:hover .image-overlay-text
{
    transition: 0.4s;
    opacity: 1;
}

.store-product-image-container:hover .image-overlay-text2
{
    transition: 0.4s;
    opacity: 0;
}

.store-product-image
{
    transition: 0.3s;
    width: 100%;
    height: auto; 
    border-radius: 5px;
}

.store-product-name
{
    color: #000000;
    font-size: 30px;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    text-align: left;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 5px;
}

.store-product-hr
{
    color: #000000;
    width: 100%;
    border-top: 1px dotted #b3b3b3;
}

.store-product-price
{
    font-size: 45px;
    font-family: 'Source Sans Pro', sans-serif;
    color: #000000;
    margin: 0;
    float: left;
    margin-bottom: 5%;
}

.store-product-sale-price
{
    font-size: 35px;
    line-height: 30px;
    font-family: 'Source Sans Pro', sans-serif;
    color: #000000;
    margin: 0;
    float: left;
    margin-bottom: 5%;
}

.store-product-button
{
    transition: 0.3s;
    width: 50%;
    height: 50px;
    font-size: 17px;
    font-family: sans-serif;
    color: #ffffff;
    background: #33aa33;
    border: 2px solid #33aa33;
    float: right;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-weight: 200;
}

.store-product-button:hover
{
    transition: 0.3s;
    color: #000000;
    background-color: transparent;
    border: 2px solid #1b1b1b;
}




/*---cart.php---*/
.cart
{
    width: 60%;
    height: auto;
    position: relative;
    margin: auto;
    text-align: center;
}

.cart-title
{
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    margin-bottom: 0px;
    color: #1a1a1a;
}

.cart-text
{
    text-align: center;
    font-family: 'Segoe UI';
    font-size: 20px;
    color: #1b1b1b;
}

.cart-button
{
    transition: 0.3s;
    border: 3px solid  #000000;
    background-color: #000000;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 20px;
    width: 220px;
    height: 50px;
    text-transform: uppercase;
}

.cart-button:disabled
{
    transition: 1s;
    opacity: 0.4;
    cursor: not-allowed;
}

.cart-button:hover:not([disabled])
{
    transition: 0.3s;
    color: #000000;
    background-color: transparent;
    border: 3px solid  #000000;
}

.cart-product-table
{
    width: 100%;
    margin: auto;
    border: 1px solid #ffffff;
    border-collapse: collapse;
    table-layout: auto;
    margin-bottom: 20px;
}

.cart-product-table tr:nth-child(even)
{
    background: #ffffff;
}

.cart-product-table tr:nth-child(odd)
{
    background: #f2f2f2;
}

.cart-product-table-th
{
    color: #000000;
    background: #ffffff;
    border-collapse: collapse;
    text-align: left;
    font-family: 'Segoe UI';    
    font-size: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
    display: table-cell;
}

.cart-product-table tr td:first-child
{
    text-align: center;
}

.cart-product-table-td
{
    color: #000000;
    border: none;
    border-collapse: collapse;
    text-align: left; 
    font-family: 'Segoe UI';
    font-size: 17px;
    display: table-cell;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cart-product-table-delete
{
    transition: 0.3s;
    color: #666666;
    background-color: transparent;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #d9d9d9;
    width: auto;
    height: 25px;
    float: left;
    letter-spacing: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.cart-product-table-delete:hover
{
    transition: 0.3s;
    color: #ff0000;
}

.cart-product-table-delete:active, .cart-product-table-delete:focus
{
    outline: 0;
}

.cart-product-table-image
{
    transition: 1s;
    width: 115px;
    height: auto;
    border: 1px solid #fbfbfb;
}

.cart-product-table-image:hover
{
    transition: 1s;
    border: 1px solid #000000;
}

.cart-product-table-link
{
    font-family: 'Segoe UI';
    color: #33aa33;
    text-decoration: none;
}

.cart-product-table-link:hover
{
    color: #000000;
}

.cart-product-table-quantity-input
{
    text-align: center;
    width: 30px;
    height: 25px;
    font-family: 'Segoe UI';
    font-size: 17px;
    background: transparent;
    color: #000000;
    margin: auto;
    display: inline-block;
    vertical-align: middle;
}

.cart-product-table-quantity-button-plus
{
    transition: 0.3s;
    border: none;
    background-color: #d9d9d9;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
.cart-product-table-quantity-button-plus:hover
{
    transition: 0.3s;
    color: #000000;
    background-color: #b3b3b3;
}

.cart-product-table-quantity-button-plus:active, .cart-product-table-quantity-button-plus:focus
{
    outline: 0;
}

.cart-product-table-quantity-button-minus
{
    transition: 0.3s;
    border: none;
    background-color: #d9d9d9;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
.cart-product-table-quantity-button-minus:hover
{
    transition: 0.3s;
    color: #000000;
    background-color: #b3b3b3;
}

.cart-product-table-quantity-button-minus:active, .cart-product-table-quantity-button-minus:focus
{
    outline: 0;
}

.cart-total-table-container
{
    width: 50%;
    float: right;
    margin-bottom: 20%;
}

.cart-total-table
{
    width: 100%;
    margin: auto;
    border: none;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.cart-total-table caption
{
    color: #000000;
    float: left;
    font-family: 'Segoe UI';  
    font-size: 30px;
}

.cart-total-table th
{
    color: #000000;
    border: 1px solid #f8f8f8;
    border-collapse: collapse;
    padding: 5px;
    text-align: left;
    font-family: 'Segoe UI';    
    font-size: 20px;
    background: #f8f8f8;
    padding-bottom: 20px;
    padding-top: 20px;
}

.cart-total-table td
{
    color: #000000;
    border: 1px solid  #fbfbfb;
    border-collapse: collapse;
    padding: 5px;
    text-align: left; 
    font-family: 'Segoe UI';
    font-size: 17px;
    background: #fbfbfb;

}

.cart-hidden-element
{
    display: none;
}

.cart-shown-shown
{
    display: block;
}




/*---product.php---*/
.product
{
    width: 80%;
    height: auto;
    position: relative;
    margin: auto;
    text-align: left;
    margin-top: 50px;
}

.product-title
{
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 50px;
    color: #1a1a1a;
}

.product-image-container
{
    background: #ffffff;
    float: left;
    width: 52%;
    position: relative;
}

.product-image
{
    float: left;
    width: 100%;
    height: auto;
}

.product-image-overlay
{
    transition: 0.3s;
    opacity: 0;
    color: #ffffff;
    font-size: 25px;
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    background: #000000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 1;
}

.product-image-overlay:hover
{
    transition: 0.3s;
    background: #33aa33;
}

.product-model-text
{
    position: relative;
    color: #000000;
    font-family: 'Segoe UI';
    font-size: 20px;
}

.product-property-container
{
    margin-left: 40px;
    width: 35%;
    height: auto;
    text-align: left;
    margin-bottom: 20px;
    display: inline-block;
}

.product-property-name
{
    font-family: 'Arial';
    font-size: 40px;
    text-transform: uppercase;
    color: #242222;
    letter-spacing: 2px;
    white-space: normal;
}

.product-hr
{
    width: 100%;
    border: none;
    height: 2px;
    background-color: #000000;
}

.product-property-reviews
{
    font-size: 20px;
    margin-bottom: 10px;
}

.product-property-price
{
    font-family: 'Segoe UI';
    font-size: 40px;
    color: #000000;
    margin-bottom: 1vw;
    font-weight: 200;
}

.product-property-sale-price
{
    font-family: 'Segoe UI';
    font-size: 20px;
    color: #ff0000;
    text-decoration: line-through;
    vertical-align: middle;
}

.product-property-sale-percentage
{
    font-family: 'Segoe UI';
    font-size: 20px;
    color: #000000;
    border: 2px solid #000000;
}

.product-property-sale
{
    font-family: 'Segoe UI';
    font-size: 20px;
    color: #000000;
    border: 2px solid #000000;
}

.product-property-label
{
    color: #000000;
    font-family: 'Segoe UI';
    font-size: 18px;
    letter-spacing: 1px;
}

.product-property-quantity
{
    width: 100%;
    height: 50px;
    margin-bottom: 30px;
    text-align: left;
}

.product-property-details-image
{
    width: 100%;
    height: auto;
}

.product-quantity-input
{
    text-align: center;
    width: 50px;
    height: 50px;
    font-family: 'Segoe UI';
    font-size: 20px;
    color: #000000;
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
}

.product-quantity-button-plus
{
    transition: 0.5s;
    background-color: #d9d9d9;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border: none;
}

.product-quantity-button-plus:hover
{
    transition: 0.5s;
    background-color: #b3b3b3;
}

.product-quantity-button-plus:active, .product-quantity-button-plus:focus
{
    outline: 0;
}

.product-quantity-button-minus
{
    transition: 0.5s;
    background-color: #d9d9d9;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border: none;
}
.product-quantity-button-minus:hover
{
    transition: 0.5s;
    background-color: #b3b3b3;
}

.product-quantity-button-minus:active, .product-quantity-button-minus:focus
{
    outline: 0;
}

.product-model-select-container
{
    margin-bottom: 20px;
    width: 100%;
}

.product-model-select
{
    color: #000000;
    background: #ffffff;
    border: 2px solid #000000;
    font-family: 'Segoe UI';
    font-size: 20px;
    width: 100%;
    height: 50px;
    vertical-align: middle;
    display: inline-block;
    outline: none;
}

.product-model-select-option
{
    color: #000000;
    background: #ffffff;
    border: 2px solid #000000;
    font-family: 'Segoe UI';
    font-size: 20px;
}

.product-button
{
    transition: 0.5s;
    border: 2px solid  #ff862d;
    background-color: #ff862d;
    color: #ffffff;
    font-size: 19px;
    font-family: sans-serif;
    cursor: pointer;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
}

.product-button:hover
{
    transition: 0.5s;
    color: #000000;
    background-color: transparent;
    border: 2px solid  #ff862d;
    letter-spacing: 1px;
}

.product-button-two
{
    transition: 0.5s;
    border: 2px solid  #ffa600;
    background-color: #ffa600;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    width: 100%;
    height: 50px;
    margin-bottom: 50px;
}

.product-button-two:hover
{
    transition: 0.5s;
    color: #000000;
    background-color: transparent;
    border: 2px solid  #ffa600;
    letter-spacing: 1px;
}

.product-button, .product-button:focus
{
    outline: 0;
}

.product-models-container
{
    width: 52%;
    height: auto;
    float: left;
    display: inline;
}

.product-model-image
{
    transition: 0.3s;
    width: 24%;
    height: auto;
    margin-bottom: 1.33%;
    opacity: 1;
}

.product-model-image:hover
{
    transition: 0.3s;
    opacity: 0.9;
}

.product-description
{ 
    position: relative;
    margin: auto;
    text-align: center;
}

.product-extended-description-container
{
    width: 100%;
    height: auto;
    float: left;
    margin-top: 60px;
    margin-bottom: 60px;
    border: none;
}




/*---quickcart.php---*/
.quickcart
{
    position: relative;
    float: right;
}

.quickcart-content
{
    display: none;
    position: absolute;
    right: 0px;
    top: 140px;
    background-color: #f0f0f0;
    min-width: 350px;
    z-index: 1;
}

.quickcart-counter
{
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-family: 'Segoe UI';
    border-radius: 50%;
    color: #ffffff;
    background: #ff0000;
    text-align: center;
    position: relative;
    z-index: 1;
    bottom: 50px;
    left: 80%;
    display: block;
}

.quickcart-counter:empty
{
    display: none;
}

.quickcart-total
{
    margin-top: 55px;
    width: 100px;
    height: 30px;
    text-align: center;
    font-size: 20px;
    color: #000000;
    border: 1px solid #000000;
    display: inline-block;
}

.header-subcontainer:hover .quickcart-content
{ 
    display: block;
}

.quickcart-content-table-container
{
    max-height: 300px;
    overflow: auto;
}

.quickcart-content-table
{
    width: 100%;
    margin: auto;
    border-collapse: collapse;
    table-layout: auto;
    margin-bottom: 20px;
}

.quickcart-content-table td
{
    color: #000000;
    border-bottom: 1px solid #d9d9d9;
    border-collapse: collapse;
    font-family: 'Segoe UI';
    font-size: 15px;
    background: #fbfbfb;
    padding-top: 10px;
    padding-bottom: 10px;
    word-wrap: break-word;
    max-width: 100px;
    text-align: left;
}

.quickcart-content-table tr td:first-child
{
    text-align: center;
}

.quickcart-content-table-link
{
    transition: 0.3s;
    text-decoration: none;
    color: #33aa33;
}

.quickcart-content-table-link:hover
{
    transition: 0.3s;
    color: #000000;
}

.quickcart-content-table-image
{
    width: 64px;
    height: auto;
}

.quickcart-content-table-delete
{
    transition: 0.3s;
    border: none;
    background: transparent;
    font-size: 20px;
}

.quickcart-content-table-delete:hover
{
    transition: 0.3s;
    color: #d3d3d3;
}


/*---checkout.php---*/
.checkout
{
    width: 60%;
    margin: auto;
}

.checkout h3
{
    font-weight: 400;
}

.checkout-container-left
{
    background: transparent;
    width: 55%;
    float: left;
}

.checkout-container-right
{
    background: transparent;
    width: 43%;
    height: 100vh;
    float: left;
    border-left: 1px solid #e1e1e1;
}

.checkout-subcontainer-right
{
    float: right;
    width: 90%;
}

.checkout-floating-label-input-flex-container
{
    display: flex;
    width: 94.5%;
}

.checkout-floating-label-input
{
    position: relative;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100%;
}

.checkout-floating-label-input input
{
    padding-top: 15px;
    font-family: 'Segoe UI';
    font-size: 16px;
    display: block;
    width: 90%;
    height: 50px;
    border: 1px solid #d9d9d9;
    padding-left: 8px;
    box-sizing: border-box;
    border-radius: 5px;
}

.checkout-input-error:invalid
{
    border: 1px solid red;
}

.checkout-floating-label-input label
{
    color: #737373;
    font-family: 'Segoe UI';
    font-size: 17px;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 12px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.checkout-floating-label-input input:checked
{
    outline: 2px solid red;
}

.checkout-floating-label-input input:focus
{
    outline: none;
    border: 2px solid #000000;
}

.checkout-floating-label-input input:focus ~ label,
.checkout-floating-label-input input:valid ~ label
{
    top: 4px;
    font-size: 14px;
    color: #33aa33;
}

.checkout-floating-label-input select
{
    padding-top: 15px;
    font-family: 'Segoe UI';
    font-size: 16px;
    display: block;
    width: 90%;
    height: 50px;
    border: 1px solid #d9d9d9;
    padding-left: 8px;
    box-sizing: border-box;
    border-radius: 5px;
}

.checkout-floating-label-input label
{
    color: #737373;
    font-family: 'Segoe UI';
    font-size: 17px;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 12px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
  
.checkout-floating-label-input select:focus
{
    outline: none;
    border: 2px solid #000000;
}

.checkout-floating-label-input select:focus ~ label,
.checkout-floating-label-input select:valid ~ label
{
    top: 4px;
    font-size: 14px;
    color: #33aa33;
}

.checkout-product-table-container
{
    max-height: 400px;
    overflow-y: auto;
    overflow: hidden;
}

.checkout-product-table-container:hover
{
    overflow-y: scroll;
}

.checkout-product-table
{
    width: 100%;
    float: right;
}

.checkout-product-table td
{
    padding-bottom: 10px;
}

.checkout-product-image-container
{
    width: 100px;
    height: auto;
    position: relative;
    text-align: center;
    color: #000000;
    font-family: 'Segoe UI';
}

.checkout-product-image-overlay
{
    opacity: 0.9;
    color: #ffffff;
    font-size: 15px;
    font-family: 'Segoe UI';
    position: absolute;
    top: 0px;
    right: 0px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;

    background: #000000;
    border-radius: 50%;

    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.checkout-error-notification-container
{
    width: 100%;
    margin-bottom: 0px;
    margin-top: 10px;
    background: #f76363;
    border-radius: 10px;
    padding: 20px;
    display: none;
}

.checkout-error-notification-container p
{
    color: #ffffff;
}

.checkout-error
{
    margin-top: 0px;
    color: #ff0000;
    display: block;
}

.checkout-order-code
{
    border-radius: 10px;
    background: #888888;
    font-size: 20px;
    display: inline-block;
    padding: 6px;
}

.checkout-summary-table-container
{
    width: 90%;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    margin-bottom: 40px;
}

.checkout-summary-table
{
    width: 95%;
    border-collapse: collapse;
    margin: auto;
}

.checkout-summary-table td
{
    border-bottom: 1px solid #d9d9d9;
}

.checkout-summary-table tr td:first-child
{
    padding: 10px;
    color: #888888;
    font-size: 17px;
}

.checkout-summary-table tr:last-child td
{
    border: none;
}

.checkout-summary-table-change-button
{
    font-size: 14px;
    color: #000000;
    float: right;
    background: transparent;
    border: none;
    cursor: pointer;
    width: min-content;
}

.cunter 
{
    width: 500px;
    margin: auto;
}

.checkout-payment-methods-container
{
    width: 90%;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    margin-bottom: 40px;
    height: auto;
}

.checkout-payment-methods-container-hr
{
    background: #d9d9d9;
    height: 1px;
    border: none;
    margin: 0px;
}

.checkout-payment-method
{
    width: 95%; 
    margin: auto;
    padding: 10px;
    display: flex;
    height: auto;
}

.checkout-payment-method-radio-button
{
    width: 20px;
    height: 20px;
}

.checkout-payment-method-radio-button-label
{
    margin-left: 10px;
    width: 100%;
}

.checkout-payment-method-container
{
    display: none;
    width: 100%;
    height: 0px;
    background: #fafafa;
    border-top: 1px solid #d9d9d9;
    text-align: center;
    color: #545454;
}

.checkout-payment-method-name
{
    float: left;
    line-height: 25px;
    font-weight: 600;
}

.checkout-payment-method-icon
{
    font-size: 30px;
    float: right;
    line-height: 0px;
    color: #1b1b1b;
}

.checkout-payment-method-container i
{
    display: block;
    font-size: 100px;
    color: #d9d9d9;
    margin: 20px;
    margin-bottom: 0px;
}

.checkout-payment-success
{
    background-color: #33aa33;
    height: 40px;
    color: #ffffff;
    opacity: 0.9;
    border-radius: 10px;
    padding-left: 10px;
    line-height: 40px;
    display: none;
    width: 100%;
}

.checkout-return-button
{
    border: none;
    background: transparent; 
    margin-left: 20px;
    color: #33aa33; 
    margin-top: 29px; 
    font-size: 17px;
    cursor: pointer;
}

.checkout-return-button:active, .checkout-return-button:focus
{
    outline: none;
}

/*---maintenance.php---*/
.maintenance
{
    margin-top: 10%;
    width: 60%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}

.maintenance-logo-container
{
    width: 40%;
    display: inline-block;
    text-align: center;
}

.maintenance-logo
{
    transition: 1s;
    width: 100%;
    height: auto;
    float: left;
    filter: invert(0%);
}

.maintenance-logo-text
{
    font-size: 50px;
    letter-spacing: 10px;
}

.maintenance-logo:hover
{
    transition: 1s;
    -webkit-filter: invert(100%); 
    filter: invert(100%);
}

.maintenance-content-container
{
    width: 50%;
    float: right;
}

.maintenance-social-icon-container
{
    font-size: 60px;
}

.maintenance-social-icon-container a
{
    transition: 0.3s;
    color: #33aa33;
}

.maintenance-social-icon-container a:hover
{
    transition: 0.3s;
    color: #000000;
}





.full-page-background-image
{
    background-color: #1b1b1b;
    height: 100%; 
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.flutter-container
{
    background: #ffffff;
    position: absolute;
    width: 20.83%;
    text-align: center;
    margin-top: 180px;
    margin-left: 39.58%;
    border-radius: 10px;
    backdrop-filter: blur(50px);
}

.floating-label-input
{
    position: relative;
    margin-bottom: 30px;
    margin-top: 30px;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
  
.floating-label-input input
{
    padding-top: 15px;
    font-family: 'Segoe UI';
    font-size: 18px;
    display: block;
    width: 100%;
    height: 60px;
    border: 1px solid #000000;
    padding-left: 8px;
    box-sizing: border-box;
}

.floating-label-input label
{
    color: #999999;
    font-family: 'Segoe UI';
    font-size: 18px;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 18px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
  
.floating-label-input input:focus
{
    outline: none;
    border: 2px solid #000000;
}

.floating-label-input input:focus ~ label,
.floating-label-input input:valid ~ label
{
    top: 3px;
    font-size: 14px;
    color: #7442C8;
}


/*---flags---*/
.flag-image
{
	background-image: url('../assets/icons/flags.png');
	background-repeat: no-repeat;
	display: inline-block;
	width: 50px;
	height: 38px;
	background-color: transparent;
	vertical-align: middle;
	background-position: 51px 39px;
	margin: 8px;
}

.flag-ad {background-position: -102px 0}
.flag-al {background-position: -51px 0}
.flag-at {background-position: -153px 0}
.flag-ax {background-position: 0 0}
.flag-ba {background-position: -306px 0}
.flag-be {background-position: -255px 0}
.flag-bg {background-position: -357px 0}
.flag-by {background-position: -204px 0}
.flag-ch {background-position: -357px -78px}
.flag-cs {background-position: -51px -78px}
.flag-cz {background-position: -459px 0}
.flag-de {background-position: -765px 0}
.flag-dk {background-position: -510px 0}
.flag-ee {background-position: -561px 0}
.flag-es {background-position: -204px -78px}
.flag-fi {background-position: -663px 0}
.flag-fo {background-position: -612px 0}
.flag-fr {background-position: -714px 0}
.flag-gb {background-position: -459px -78px}
.flag-gg {background-position: -918px 0}
.flag-gi {background-position: -816px 0}
.flag-gr {background-position: -867px 0}
.flag-hr {background-position: -408px 0}
.flag-hu {background-position: -1020px 0}
.flag-ie {background-position: -51px -39px}
.flag-im {background-position: -102px -39px}
.flag-is {background-position: 0 -39px}
.flag-it {background-position: -153px -39px}
.flag-je {background-position: -204px -39px}
.flag-li {background-position: -357px -39px}
.flag-lt {background-position: -408px -39px}
.flag-lu {background-position: -459px -39px}
.flag-lv {background-position: -306px -39px}
.flag-mc {background-position: -663px -39px}
.flag-md {background-position: -612px -39px}
.flag-me {background-position: -714px -39px}
.flag-mk {background-position: -510px -39px}
.flag-mt {background-position: -561px -39px}
.flag-nl {background-position: -765px -39px}
.flag-no {background-position: -816px -39px}
.flag-pl {background-position: -867px -39px}
.flag-pt {background-position: -918px -39px}
.flag-ro {background-position: -969px -39px}
.flag-rs {background-position: 0 -78px}
.flag-se {background-position: -306px -78px}
.flag-si {background-position: -153px -78px}
.flag-sj {background-position: -255px -78px}
.flag-sk {background-position: -102px -78px}
.flag-sm {background-position: -1020px -39px}
.flag-ua {background-position: -408px -78px}
.flag-va {background-position: -969px 0}
.flag-xk {background-position: -255px -39px}



.checkout-floating-label-input-flex-container
{
    display: flex;
    width: 94.5%;
}

/*---media.php---*/
@media only screen and (max-width: 640px)
{
    .header-navigation-links
    {
        display: none;
    }

    .header-navigation-links-menu
    {
        display: block;
    }

    .navigation-menu-overlay a
    {
        font-size: 30px
    }

    .navigation-menu-overlay .navigation-menu-close-button
    {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }

    .cart
    {
        width: 90%;
    }

    .cart-button
    {
        width: 100%;
    }

    .cart-hidden-element
    {
        display: block;
    }

    .cart-shown-element
    {
        display: none;
    }

    .cart-product-table-image
    {
        width: 100%;
    }

    .cart-product-table-delete
    {
        width: 100%;
        height: 30px;
    }

    .cart-product-table-td
    {
        vertical-align: top;
        width: 33.33%;
    }

    .cart-total-table-container
    {
        width: 100%;
    }

    .cart-product-table-quantity-input
    {
        width: 25px;
        height: 25px;
    }
    
    .cart-product-table-quantity-button-plus, .cart-product-table-quantity-button-minus
    {
        width: 25px;
        height: 25px;
    }

    .cart-total-table
    {
        width: 100%;
    }

    .button
    {
        width: 100%;
    }

    .product
    {
        text-align: center;
    }

    .product-image-container
    {
        width: 100%;
        margin: auto;
        float: none;
        margin-bottom: 1vw;
    }

    .product-property-container
    {
        width: 100%;
        margin: auto;
        float: none;
        height: auto;
        text-align: left;
        margin-bottom: 10px;
    }

    .product-models-container
    {
        width: 100%;
        position: relative;
        margin: auto;
        float: none;
        text-align: left;
        display: block;
        margin-bottom: 1vw;
    }

    .store
    {
        width: 60%;
    }

    .store-product-container
    {
        width: 100%;
        height: auto;
      
        margin-bottom: 25%;
    }

    .store-product-button
    {
        width: 100%;
    }

    .maintenance
    {
        width: 90%;
        margin-bottom: 10%;
        display: block;
        text-align: center;
    }

    .maintenance-logo-container
    {
        width: 50%;
        float: none;
        margin: auto;
    }

    .maintenance-content-container
    {
        width: 100%;
        float: left;
    }

    .flutter-container
    {
        margin-left: 5%;
        width: 90%;
        margin-top: 60px;
    }

    .checkout
    {
        width: 90%;
    }

    .checkout-floating-label-input-flex-container
    {
        width: 100%;
    }

    .checkout-floating-label-input-flex-container > div:first-child
    {
        margin-right: 20px;
    }

    .checkout-floating-label-input input, .checkout-floating-label-input select
    {
        width: 100%;
    }

    .checkout-container-left
    {
        width: 100%;
    }

    .checkout-container-right
    {
        width: 100%;
        border: none;
    }

    .checkout-product-table
    {
        float: left;
    }

    .checkout-subcontainer-right
    {
        float: left;
        width: 100%;
    }

    .checkout-summary-table
    {
        width: 100%;
    }

    .checkout-summary-table-container
    {
        width: 100%;
    }

    .checkout-payment-methods-container
    {
        width: 100%;
    }

    .checkout-error-notification-container
    {
        width: 90%;
    }

    .footer-content-container
    {
        display: block;
    }

    .footer-logo
    {
        margin: auto;
    }

    .footer-logo-container
    {
        display: block;
    }

    .footer-logo-text
    {
        margin: auto;
    }

    .footer-content-block
    {
        width: 100%;
        text-align: center;
    }
}



/*---arbitraries---*/
.float-right
{
    float: right;
}

.float-left
{
    float: left;
}

.display-flex
{
    display: flex;
}

.display-block
{
    display: block;
}

.display-none
{
    display: none;
}

.hehe
{
    display: none;
}






















/*---order.php---*/
.order-progress
{
    width: 80%;
    margin: auto;
    text-align: center;
}

.order-progress-table
{
    margin-top: 50px;
    width: 100%;
}

.order-progress-bar
{
    height: 10px;
    width: 0px;
    background-color: #33aa33;
    border-radius: 15px;
}

.order-check-container
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: grey;
    color: #000000;
    margin: 0px;
    opacity: 0.3;
}

.order-td-check
{
    font-size: 30px;
    width: 60px;
    height: 60px;
    text-align: center;
    margin: auto;
    line-height: 60px;
    padding-bottom: 10px;
}

.order-td-line
{
    font-size: 30px;
    width: 200px;
    padding-bottom: 10px;
}

.order-td-line-icon
{
    font-size: 30px;
    width: 230px;
    padding-bottom: 10px;
    overflow: auto;
    display: flex;
}

.td-line-icon i
{
    line-height: 60px;
    width: 30px;
    margin: 0px;
    padding: 0px;
    position: relative;
}

.order-td-line-icon .order-progress-bar
{
    margin-top: 25px;
    margin-right: 10px;
}

.order-progress-table-label
{
    font-size: 15px;
    font-weight: bold;
    margin-top: 0px;
    text-align: left;
}

.order-td-check img
{
    width: 50px;
    height: 50px;
    margin-top: 10px;
}



.order-thank-you
{
    /*font-family: 'Great Vibes', cursive;
    font-family: 'Great Vibes', cursive;
    font-family: 'Parisienne', cursive;*/
    font-family: 'Parisienne', cursive;
    font-size: 100px;
    margin-bottom: 0px;
}












/*---animations---*/
@-webkit-keyframes shake
{
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:active
{
    -webkit-animation-name: shake;
    -webkit-animation-duration: 0.5s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
}

.shake
{
    display:inline-block
}