.grid img{
        height: 50px; width: 50px;
    }
    .orderdes p a{
        color: #000;
    }
      .orderdes p {
       font-size: 1em ; margin: 5px 5px 5px 5px;
    }
    .config {
    margin-left: 10px; float: left; width:450px; 
  height: 400px;background-color: rgba(222, 191, 191, 0.21) ;
    }
    .config p{
        font-size: 1em ;  margin: 5px 5px 5px 5px;
    }
    .config p a{
        color: #000;
    }
    #basket .totlaItems{
       font-size: 1.8em; color: rgba(213, 25, 25, 0.81);
    }
        #basket .totlaItems a{
      color:#c9ac0a;
    }
   .chebien{
        float: left; width: 620px;

    }
    .materialImage img{
        height: 400px; width:600px;
    }
    
    .des-materials p{
        margin: 0px 5px 5px 5px;
    }
    .des-materials {
       float: left ;margin-left: 5px ; text-align: left; background-color:rgba(213, 25, 25, 0.81) ;
    }
    .des-materials h2{
    background-color: #c9ac0a;
   
    }
    .material-details{
       float: left;width: 100%;text-align: center;background-color: rgba(182, 255, 0, 0.69);
    }
     .material-details h2{
      background-color: #fff; text-align: center;
    }
    .material-image{
        margin: 10px 10px 10px 10px;
    }
    .fbcomments{
        float: left;  width: 550px;height: fit-content;  background-color:White  ;margin-left: 10px;
    } .fbcomments .fb-comments{
        data-width="535"; data-numposts="10"; data-colorscheme="light";
    }
    .menungang{
       float: left ;margin: 20px 10px 5px 0px;
    }

.productFormImage img{
    height: 300px;
    width: 360px;
}
.imagedefault{
    float: left; height: 470px; width: 410px ;
        margin-bottom: 20px;
}
.imagedefault img{

 height: 500px;
    width: 400px;
}
.orderdes{
    float: left; width: 320px;
     height: 400px ; 
    background-color: rgba(222, 191, 191, 0.21) ;
    
    
}
.order {
    float: left;
     
    background-color: rgba(222, 191, 191, 0.21);
    width: 700px;
    margin: 10px 10px 10px 10px;
    
    
}
#basket{
    margin: 10px 10px 10px 10px;
}

/* Featured Product
----------------------------------------------------------*/
div#featuredProduct {
    background-color: rgba(253, 252, 247, 0.13);
    border: 4px solid #e6e3d8;
    height: 300px;
    margin: 20px ;
    width: 670px;
    
    /*CSS3 properties*/
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0px 2px 5px #888;
    -webkit-box-shadow: 0px 2px 5px #888;
    -moz-box-shadow: 0px 2px 5px #888;
}

    div#featuredProduct img {
        float: left;
        height: 300px;
        width: 400px;
        /*CSS3 properties*/
        border-radius: 3px 0px 0px 3px;
        -moz-border-radius: 3px 0px 0px 3px;
        -webkit-border-radius: 3px 0px 0px 3px;
    }

    #featuredProductInfo {
        float: right;
        height: 100%;
        padding: 0 5px;
        width: 230px;
    }

        #productInfo {
            height: 250px;
            overflow: auto;
        }

            #productInfo h2 {
                font-size: 2em;
                font-weight: normal;
                margin: 5px 0;
            }

            #productInfo .description {
                font-size: 1.3em;
               
            }
   
            #productInfo .price {
                font-size: 1.5em;
                margin: 5px 0;
            }

        #callToAction a.order-button {
            font-size: 1.8em;
            padding: 5px 0;
            text-align:center;
            width: 100%;
        }

/* Products
----------------------------------------------------------*/
#products {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    margin-top: 20px;
}

.product {
    float: left;
    margin: 5px 5px;
    width: 222px;
 background-color: rgba(253, 252, 247, 0.53);

}
.product a:hover{
    color: #000;
}

    .product .productInfo {
   
        height: 320px;
        overflow: hidden;
    }

        .product h3 {
            font-size: 1.2em;
            font-weight: normal;
            margin: 5px 5px 5px 5px;
            padding: 0;
        }

        .productInfo img {
           
          
            height: 290px;
            padding: 0px;
            width: 222px;
        }

        .hide-from-desktop
        {
            /* Only for mobile devices */
            display: none;
        }

        a.product .description {
            margin: 5px 5px 5px 5px;
            font-size: 1.0em;
        }

    .product .price {
        float: left;
        font-size: 1.2em;
      color: #712107;
         margin-left: 5px;
         margin-top: 5px;
          text-decoration: line-through;
    }
    .product .discount {
        float: left;
        font-size: 1.1em;
     
         margin-left: 5px;
    }
    .product input[type=submit] {
        float: right;
        padding: 2px 7px;
    }
    
    a.order-button {
    margin-top:20px;
    margin-right: 5px;
        background-color: #1da509;
        border: 1px solid #712107;
        color: #fdfcf7;
        float: right;
        padding: 2px 7px;
    
        /*CSS3 properties*/
        border-radius: 4px; 
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        box-shadow: 1px 2px 5px #b4b4b4;
        -webkit-box-shadow: 1px 2px 4px rgba(136,136,136, 0.6);
        -moz-box-shadow: 1px 2px 5px #b4b4b4;
    }
    
        a.order-button:hover {
            color: #000;
        }
/* Order   
----------------------------------------------------------*/
.quantity label {
    display: inline;
}

.quantity input[type=text] {
    width: 30px;
}

#orderTotal {
    font-weight: bold;
}

.order-image {
    float: left;
    margin: 10px 30px 10px 0px;
}

.order-success {
    background: #edece8;
    color: #696969;
}

    .order-success h2 {
        margin: 0;
    }
    

#orderProcess {
   background-color: #b4b4b4;

    list-style: none;
    padding: 0;
    clear: both;
   
}

    #orderProcess li {
        color: #1da509;
        display: inline;
        font-size: 1.4em;
        margin-right: 15px;
        padding: 3px 0px 0px 5px;
    }
    
        .step-number {
            background-color: #edece8;
            border: 1px solid #e6e4d9;
            font-size: 1.6em;
            margin-right: 5px;
            padding: 3px 10px;
        }
    
        .current .step-number {
            background-color: #09a596;
            border-color: #712107;
            color: #fefefe;
        }


/* Information and errors  
----------------------------------------------------------*/  
.message {
    border: 1px solid;
    clear: both;
    margin: 10px 0px;
    padding: 15px 15px;
    
    /*CSS3 properties*/
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 2px 2px 5px #888;
    -webkit-box-shadow: 2px 2px 5px #888;
    -moz-box-shadow: 2px 2px 5px #888;
}

.info {
    background: #bde5f8;
    color: #00529b;
}

.error {
    background: #ffccba;
    color: #d63301;
}
        
.field-validation-error {
    color: #be3e16;
    font-weight: bold;
}

    .field-validation-error:before {
        content: "«";
        margin:0 3px;
    }
    
.validation-summary-errors {
    color: #be3e16;
    font-size: 1.2em;
    font-weight: bold;
}

.validation-summary-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.validation-summary-valid {
    display: none;
}

.field-validation-valid {
    display: none;
}




/* Only affects 1200px width */
      @media only screen and (max-width: 1200px){ 

.productFormImage img{
    height: 300px;
    width: 360px;
}
.imagedefault{
    float: left; height: 630px; width: 310px ;
}
.imagedefault img{
    max-height: 550px;
    width: 300px;
}
.orderdes{
    float: left; width: 600px;
     max-height: 1000px ; 
    background-color: rgba(222, 191, 191, 0.21) ;
    
    
}
.order {
    float: left;
     
    background-color: rgba(222, 191, 191, 0.21);
    width: 580px;
    margin: 10px 10px 10px 10px;
    
    
}
   

      }
 /* Only affects 1200px width */
      @media only screen and (max-width: 900px){ 
      .productFormImage img{
    height: 300px;
    width: 360px;
}
.imagedefault{
    float: left; height: 450px; width: 210px ;
}
.imagedefault img{
    max-height: 340px;
    width: 200px;
}
.orderdes{
    float: left; width: 400px;
     max-height: 450px ; 
    background-color: rgba(222, 191, 191, 0.21) ;
    
    
}
.order {
    float: left;
     
    background-color: rgba(222, 191, 191, 0.21);
    width:450px;
    margin: 10px 10px 10px 10px;
    
    
}
   
      }     
      
      
      
       /* Only affects 1200px width */
      @media only screen and (max-width: 600px){ 
      .productFormImage img{
    height: 300px;
    width: 360px;
}
.imagedefault{
    float: left; height: 540px; width: 350px ;
}
.imagedefault img{
    max-height: 500px;
    width: 350px;
}
.orderdes{
    float: left; width: 400px;
     max-height: 80px ; 
    background-color: rgba(222, 191, 191, 0.21) ;   
}
.order {
    float: left;
     
    background-color: rgba(222, 191, 191, 0.21);
    width:400px;
    margin: 10px 10px 10px 10px;
    
    
}
   
      }