/***************************************************/
/*             Catalog container                   */
/***************************************************/

.catalog-container {
    /*margin-left: 15px;*/
    margin: 0 auto;
}
/***************************************************/
/*                     data                      */
/***************************************************/
.item-data {
    visibility:hidden;
}

/***************************************************/
/*                   CatalogItem                   */
/***************************************************/
.item-container {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 300px;
    max-width: 300px;
}
.item-border {
    padding: 0px;
    /* padding-top:10px; */
    margin: 5px;
    /*padding:5px;*/
    /*border:1px solid #ddd;*/
    /*background-color:rgba(255, 255, 255,1);*/ /*ใช้คุณสมบัตินี้แทนการใช้ opacity*/
    background-color: rgba(255, 255, 255,1); /*ใช้คุณสมบัตินี้แทนการใช้ opacity*/
    /*border-radius:5px;*/
    /*-webkit-box-shadow: 1px 1px 26px -2px rgba(0,0,0,0.26);
    -moz-box-shadow: 1px 1px 26px -2px rgba(0,0,0,0.26);
    box-shadow: 1px 1px 26px -2px rgba(0,0,0,0.26);*/

    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,2,0.26);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,2,0.26);
    box-shadow: 0px 1px 3px 0px rgba(0,0,2,0.26);
    
    border-radius: 7px;

    position: relative; /*parent(.item-border) ->position:relative  | child(.item-description)->position:absolute  */
}
    .item-border:hover {
        /*border-top: 5px solid rgba(0,128,128,0.1);*/
        /*border-top: 5px solid Orange;*/
        /*border:3px solid #ddd;*/
        transform: scaleY(1.08) scaleX(1.08);
        transition: transform ease-in .5s;
        cursor: pointer;
    }

.item-image-panel{
   
}

.item-image {
    /*padding: 10px 10px 0px 10px;*/
    padding: 7px 7px 0px 7px;
    background: none;
    width: 100%;
}
.item-image:hover{
    cursor:pointer;
}

.item-description {
    /*position:absolute;*/ /*parent(.item-border) ->position:relative  | child(.item-description)->position:absolute  */
    /*top:150px;left:5px;*/
    border: 0px;
    padding: 10px 12px 20px 12px;
    width: 100%;
    position: relative;
    /*background-color:rgba(255, 255, 255,0.8);*/
    /*background-color:rgba(0, 0, 0,0.5);*/
    /*background: linear-gradient(to bottom,rgb(255, 255, 255) 0,rgb(230, 227, 230) 75%,rgba(16, 16, 16, 0.2) 100%);*/
    /*background: linear-gradient(to bottom,rgba(255, 255, 255,0.6) 0,rgba(230, 227, 230,0.6) 75%,rgba(16, 16, 16, 0.2) 100%);*/
  
    
/*    
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(227,234,237,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3eaed', GradientType=0 );
*/    
    
    background: rgba(248,249,250, 1);
    border-radius:0px 0px 8px 8px;
}


/* cover */
.item-cover {

    position: absolute; /*parent(.item-border) ->position:relative  | child(.item-description)->position:absolute  */
    top: 0px;
    width: 100%;
    height: 100%;
    /*text-align: center;
    vertical-align: middle;*/
    border-radius: 7px;


}
.item-cover-toolbars {
   /*  background: rgb(95 77 27 / 50%); */
   background: rgb(186 208 158 / 70%);
    
    width: 100%;
    height: 50%;
    top: 0px;
    left: 0px;
    /*text-align: center;
    vertical-align: middle;*/
    border-radius: 8px 8px 0px 0px;
}
.item-cover-details {
    width: 100%;
    height: 50%;
    bottom: 0px;
    left: 0px;
    background: rgba(248,249,250, 1); /* rgba(0,128,128,0.8);*/
    border-radius: 0px 0px 8px 8px;
    padding: 20px;
    position: relative;
}



/*product*/
.product-code {
    padding: 10px 0px 0px 0px;
    font-size: 10pt;
    text-shadow: 0px 0.3px 0.3px #AAA9A9;
}
.product-code2 {
    /* padding: 10px 0px 0px 0px; */
    font-size: 10pt;
    text-shadow: 0px 0.3px 0.3px #AAA9A9;
}

.product-name {
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    text-shadow: 0px 0.3px 0.3px #AAA9A9;
    text-align: left;
    font-size: 1rem;
}

.product-description {
    color: #9e9e9e;
    font-size: 10.5pt;

    display: block;
    margin-top: 0.25rem;
    text-align: left;

    height: 30px;
}
.product-description-on-cover {
    color: #9e9e9e;
    font-size: 10pt;
    display: block;
    margin-top: 0.25rem;
    text-align: left;
}
.product-price-on-cover {
    color: #17A2B8; /* rgba(146,169,151, 0.8);*/

    /*#9e9e9e;*/
    /*padding: 10px 10px 10px 10px;*/
    /*position: absolute;*/
    /*top: 15px;
    right: 10px;*/
    /*background-color: rgba(0,128,0,0.1); 
    border-radius: 5px;*/
    font-size: 14pt;
    text-align: left;
}
.product-price {

    color: #000000; /* #17A2B8;*/
    /*padding: 10px 10px 10px 10px;*/
    position: absolute;
    top: 10px;
    right: 10px;
    /*background-color: rgba(0,128,0,0.1); 
    border-radius: 5px;*/
    font-size: 14pt;
    margin-left: 10px;
    padding: 0px 5px 0px 15px;
    border: 0px;
    /* border-left: 1px; */
    border-style: solid;
    border-color: darkgrey;

}
.exclude-shipping {
    float: right;
}
.div-qrcode-on-catalog {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}
.qrcode-on-catalog {
    width: 60px;
}
.order-by-line-text{
    font-weight: bold;
}
.order-by-line {
    width: 100px;
}
.product-remark {
    color: #9e9e9e;
    font-style: italic;
    font-size: 12px;
}


/*begin price label*/

.popupitem-image {
    padding: 7px 7px 0px 7px;
}

.divPriceInfo {
    position: absolute;
    bottom: 95px;
    margin: 0px;
    left: 0px;
    padding: 5px;
    width: 100%
}

.divPriceInfoBorder {
    position: absolute;
    float: right;
    right: 0px;
    bottom: 20px;
    padding: 10px;
    width: 100%;
    background: rgba(18, 18, 18, 0.4);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,2,0.26);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,2,0.26);
    box-shadow: 0px 1px 5px 0px rgba(0,0,2,0.26);
}

.divPriceInfo .product-price,
.divPriceInfo .product-remark {
    color: #ffffff;
    text-align: right;
}

.divPriceInfo .product-price {
    font-weight: bold;
}

/*-end  "price label"  -*/




/* order , add to cart */
.divOrderInfo{
     

}
.divOrderInfoBorder {
   /*  position:absolute;
    bottom:30px;
    padding:10px;
    display: flex; */
    margin-top:20px;
}
.product-remark-footer{
/*     position: absolute;
    bottom: 15px; */
    font-style: italic;
    font-size: 10pt;
    text-align: center;
    width: 100%;
}

.order-label {
    font-size:10pt;
    display:inline-block;
    padding:5px 5px 5px 5px;
}
.order-qty {
    display: inline-block;
    padding:0px 5px 0px 5px;
}
.order-input-qty{
    width:60px;
}
.add-to-cart-panel {
    margin-left:10px;
    padding: 0px 5px 0px 5px;
    border:0px;
    border-left:1px;
    border-style:solid;
    border-color:darkgrey;
}
.add-to-cart-panel2 {
   /*  margin-left:10px; */
 /*    padding: 0px 5px 0px 5px;
    border:0px;
    margin:auto; */
/*     border-left:1px;
    border-style:solid;
    border-color:darkgrey; */
}


.div-order-btn {
    position: absolute;
}

.add-to-cart {
   
    /* background: linear-gradient(270deg, rgba(125, 94, 7, 1) -10.74%, #ddb444 20.74%, #c4b281 50.25%, rgb(165 131 37) 80.49%, #a88b39 99%);
     */
    background: linear-gradient(180deg, rgb(193 189 178) -10.74%, #faf3e5 20.74%, #fffaed 50.25%, rgb(213 208 195) 80.49%, #c4bca8 99%);

}


/**********************************************/
/*       shopping cart  (Modal)               */
/**********************************************/


/* shake cart */
.shake {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: 2;
}

.a-shopping-cart:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: 1;
}
/* shake animation*/
@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}



/* shopping cart modal*/
.shopping-cart-container {
    /*width: 100%;
    height: 100%;*/
    position: relative;
 
    left:10px;

    /*z-index: 1990;*/
}
.shopping-cart-backdrop {
    /*background: rgba(155,160,146, 0.8);*/ /* rgba(0,0,77, 0.8);*/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1990;
}
.shopping-cart-backdrop-hidden {
  visibility:hidden;
}
.shopping-cart-modal {
    cursor: move;
    position: absolute;
    /*right:20px;*/
    /*background: rgba(204,226,171, 0.5);*/ /*rgba(128,128,128,0.5);*/
    background: rgba(204,226,171, 0.5); /* rgba(204,226,171, 0.4);*/ /*rgba(23,162,184, 0.4);*/ /*#F5F5F5; */ /*rgba(204,226,171, 0.5) ; rgba(0,0,77, 0.8);*/
    /*#BBBD93;*/
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,2,0.26);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,2,0.26);
    box-shadow: 0px 0px 5px 1px rgba(0,0,2,0.26);
    /*max-width: 500px;*/ /*150+70+80+100+50 (+50)*/
    /*text-align: center;
    vertical-align: middle;*/
    /*border-radius: 8px 8px 0px 0px;*/
    max-width: 350px;
}
.shopping-cart-modal-container {
    position: relative;
    /*background: rgba(204,226,171, 0.6);*/
    display:block;
    width:100%;
    height:100%;

}
.shopping-cart-modal-header {
    height: 45px;
    width: 100%;
    /*-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,2,0.26);
    -moz-box-shadow: 0px 0px 0px 1px rgba(0,0,2,0.26);
    box-shadow: 0px 3px 0px 1px rgba(0,0,2,0.26);*/
}
.shopping-cart-modal-close {
    color: rgb(0,0,0);
    float: right;
    font-size: 18px;
    font-weight: bold;
    padding-right: 10px;
    cursor:pointer;
}
.shopping-cart-modal-close:hover{

}
.shopping-cart-text-header {
    position: absolute;
    top: 10px;
    left: 10px;
    font-weight: bold;

}
.shopping-cart-modal-header-info {
    background: whitesmoke;
    width: 100%;
    height: 45px;
    padding: 10px;
    border: 1px solid rgba(227,234,237,1);
    color: darkgray;
    font-style: italic;
}
.scm-child-loading>img{
    height:200px;
}
.shopping-cart-modal-body {
    width: 100%;
    max-height: 250px;
    /*overflow-y: scroll;*/
    overflow-y: auto;
    background: white;
}

ul.shopping-cart-modal-ul {
    white-space:normal;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
li.shopping-cart-modal-item {
    /*margin: 10px 0px 10px 0px;*/
    /*border: 1px solid #e4dfdf;*/
    /*border-left: 0px;
    border-right: 0px;*/
 
}
.scm-child-container {
    width: 100%;
    height: 100px;
    position: relative;
    /*background: rgba(149,147,189, 0.5);*/
    /*background: rgba(204,226,171, 0.5);*/
    /*background: #FFFFFF;*/ /*rgba(248,249,250, 0.2);*/
    padding: 5px;
    /*-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,2,0.26);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,2,0.26);
    box-shadow: 0px 0px 5px 1px rgba(0,0,2,0.26);*/
    /*border: 1px solid #e4dfdf;*/
    background: rgba(204,226,171, 0.5); /*#FFFFFF;*/
    border: 1px solid #e4dfdf;
    border-left: 0px;
    border-right: 0px;

    /*-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,2,0.26);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,2,0.26);
    box-shadow: 0px 0px 5px 1px rgba(0,0,2,0.26);*/
}
.scm-child-loading {
    width: 100%;
    text-align: center;
    padding: 10px;
}
.scm-child-image-div {
    width: 100px;
    display: inline-block;
    /*padding: 5px;*/
    border: 1px solid rgba(227,234,237,1);
}
.scm-child-image {
    width: 100%;
    display: inline-block;
    /*padding: 5px;*/
}
.scm-child-info {
    display: inline-block;
    padding: 5px 5px 0px 5px;
    width:100%;
    position: relative;
    text-align:left;
    /*left: 20px;
    top: 5px;*/ 
    /*background: #FFFFFF;*/
    /*border: 1px solid #e4dfdf;
    border-left: 0px;
    border-right: 0px;*/
}

/*div.scm-child-info:after {
    content: '\a'; 
    white-space: pre;
}*/
/* {\a =return} */

.scm-child-info2 {
    display: inline-block;
    padding: 0px 5px 0px 5px;
    position: relative;
    /*left: 20px;
    top: 30px;*/
    /*background: #FFFFFF;*/
}


.scm-productcode {
    /*width: 100%;*/
    /*color: rgba(0,0,2,0.26);*/
    display:inline;
}
.scm-productname {
    font-weight: bold;
    /*width: 100%;*/
    display: inline;

 
}

.scm-child-unitprice {
    width: 100px;
    display: inline-block;
    padding: 0px 5px 5px 5px;
}
.scm-label {
    /*color:white;*/
    font-weight:bold;
}
.scm-unitprice {
    /*color: white;*/
    /*font-weight: bold;*/
}

.scm-child-qty {
    display: inline-block;
    width: 80px;
    padding: 0px 5px 5px 5px;
}
.scm-child-input-qty {
    width: 60px;
}

.scm-child-amount {
    display: inline-block;
    width: 120px;
    padding: 0px 5px 5px 5px;
}
.scm-item-amount {
    /*color: white;*/
    /*font-weight: bold;*/
}


.shopping-cart-subtotal-info {
    position: relative;
    /*text-align: right;*/
    padding: 15px;
    padding-right: 35px;
    background: whitesmoke;
    text-align:left;
}
.shopping-cart-remark {
    color: darkgray;
    font-style: italic;
    display: inline;
}
.div-subtotal {
    display: inline;
    position: absolute;
    right:35px;
}
.scm-subtotal-label {
    display: inline;
}
.shopping-cart-subtotal {
    display: inline;
    font-weight: bold;
}



.scm-child-control {
    width: 22px;
    display: inline-block;
    position:absolute;
    right:20px;
    top:10px;

}

.remove-from-cart {
}
.remove-cart-img {
    display: inline;
    width: 20px;
    cursor: pointer;

}
.remove-cart-img:hover {
    /*background:*/
    width: 25px;
}


.shopping-cart-controls {
    background: whitesmoke;
    text-align: right;
    padding: 10px;
    /*margin-top:5px;*/
    border: 1px solid rgba(227,234,237,1);
    padding-right: 30px;
}
.shopping-cart-modal-footer {
    height: 10px;
    width: 100%;
}
/*.show {
    visibility: visible;
}
.hide {
    visibility:hidden;
}*/
/***************************************************/
/*               Image Catalog Popup               */
/***************************************************/
.ImagePopup {
    display: none;
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}



.ImagePopup-Content{
    width:70%; /* mobile => width:70%  , tablets and desktop  => width:500px*/
    
    padding-top:-0px;

    margin:auto;
    position:relative;

    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;

}

.imgpopup-item-border{
    /*margin: 0px 0px 0px 0px;*/
    margin: 0px 22px 0px 22px;   
    padding: 0px;
    
    /*padding:5px;*/
    /*border:1px solid #ddd;*/
    background-color:rgba(255, 255, 255,1);/*ใช้คุณสมบัตินี้แทนการใช้ opacity*/
    /*border-radius:5px;*/

    -webkit-box-shadow: 1px 1px 26px -2px rgba(0,0,0,0.26);
    -moz-box-shadow: 1px 1px 26px -2px rgba(0,0,0,0.26);
    box-shadow: 1px 1px 26px -2px rgba(0,0,0,0.26);

    position:relative; /*parent(.item-border) ->position:relative  | child(.item-description)->position:absolute  */

}






/* The Close Button */
.imgpopup-close {
    color: rgb(0,0,0);
    float: right;
    font-size: 28px;
    font-weight: bold;
    padding-right:10px;
}

.imgpopup-close:hover,
.imgpopup-close:focus {
    color: #ff0000;
    text-decoration: none;
    cursor: pointer;
}

.imgpopup-item-image-panel{
 
}
.popupitem-image {
    /*padding:0px 10px 0px 10px;*/
    padding: 7px 7px 0px 7px;
    width: 100%;
}
.imgpopup-item-description {
    border: 0px;
    padding: 10px 12px 20px 12px;
    width: 100%;

    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(227,234,237,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(227,234,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3eaed', GradientType=0 );
}
.image-remark{
    padding:0px 0px 5px 0px;

    color:#9e9e9e;
    font-style: italic;
    font-size:12px;

}



.imgpopup-btn-left{
    position:absolute;
    /*top:30px;*/ /*250px*/
    left:-18px;

    
    z-index:1;
    font-size:30px;
    /*border:none;*/
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    
    
    /*gradient*/
    background:  rgb(128,128,128); /* Old browsers */
    background: -moz-linear-gradient(right, rgba(128,128,128,1) 0%, rgba(221,221,221,1) 50% , rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(right, rgba(128,128,128,1) 0%,rgba(221,221,221,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
    background: linear-gradient(to right, rgba(128,128,128,1) 0%,rgba(221,221,221,1) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    /*border*/
    border : solid 2px rgba(221,221,221,1);

   
    


}
.imgpopup-btn-left:hover {
    cursor:pointer;
    color:#08067e;

    /* box-shadow : Horizontal Length,Vertical Length,Blur Radius,Spread Radius,Shadow Color */
    -webkit-box-shadow: 2px 1px 46px -1px rgba(184,178,184,1);
    -moz-box-shadow: 2px 1px 46px -1px rgba(184,178,184,1);
    box-shadow: 2px 1px 46px -1px rgba(184,178,184,1);
}
.imgpopup-btn-left:focus{
    outline: none;/*clear outline border*/
    cursor:pointer;
}

.imgpopup-btn-right{
    position:absolute;
    /*top:30px;*/ /*250px*/
    right:-20px;;
    z-index:1;
    font-size:30px;
    border:none;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;

    /*background: linear-gradient(to left, rgba(128,128,128,1) 0%,rgba(221,221,221,1) 50%,rgba(255,255,255,1) 100%);*/ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border : solid 2px rgba(221,221,221,1);


    /*gradient*/
    background:  rgb(128,128,128); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(128,128,128,1) 0%, rgba(221,221,221,1) 50% , rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(128,128,128,1) 0%,rgba(221,221,221,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff' , endColorstr='#808080',GradientType=1 ); /* IE6-9 */
    background: linear-gradient(to left, rgba(128,128,128,1) 0%,rgba(221,221,221,1) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    /*border*/
    border : solid 2px rgba(221,221,221,1);
}
.imgpopup-btn-right:hover {
    
    cursor:pointer;
    color:#08067e;

    /* box-shadow : Horizontal Length,Vertical Length,Blur Radius,Spread Radius,Shadow Color */
    -webkit-box-shadow: 2px 1px 46px -1px rgba(184,178,184,1);
    -moz-box-shadow: 2px 1px 46px -1px rgba(184,178,184,1);
    box-shadow: 2px 1px 46px -1px rgba(184,178,184,1);
}
.imgpopup-btn-right:focus{
    outline: none;/*clear outline border*/
    cursor:pointer;
}


/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}



@media only screen and (min-width: 600px) {
    /* For tablets: */
     .ImagePopup-Content{
        width:350px;
    }

    .imgpopup-item-border{
        margin: 0px 22px 0px 22px;  
    }

    /*.imgpopup-btn-left{
        top:250px;
    }
    .imgpopup-btn-right{
        top:250px;
    }*/




}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .ImagePopup-Content{
        width:350px;
    }

    .imgpopup-item-border{
        margin: 0px 22px 0px 22px;  
    }

    /*.imgpopup-btn-left{
        top:250px;
    }
    .imgpopup-btn-right{
        top:250px;
    }*/
}

/* ใช้ในเบอร์มงคล*/
.occupation {
    margin-top: 0px;
    display: block;
    position: absolute;
    font-size: 8pt;
    top: 190px;
    padding: 0px;
    padding-left: 15px;
    padding-right: 10px;
    width: 100%;
    margin: auto;
    text-align: center;
    color: rgb(148 124 55);
}