@font-face {
    font-family: "sans-serif";
    src: url("./fonts/sans-serif.eot"); /* IE9 Compat Modes */
    src: url("./fonts/sans-serif.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/sans-serif.otf") format("opentype"), /* Open Type Font */
    url("../fonts/sans-serif.svg") format("svg"), /* Legacy iOS */
    url("../fonts/sans-serif.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/sans-serif.woff") format("woff"), /* Modern Browsers */
    url("../fonts/sans-serif.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'supermarket-webfont';
    src: url('../fonts/supermarket-webfont.woff') format('woff');
}
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: #EBEBEB;
    margin: 0px;
    padding: 0px;

}
/*.clear {
    clear: both;
    padding-top: 20px;
}
.clearch {
    clear: both; 
}*/
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    min-height: 350px;
    background-color: white;
    font-size: 1em;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}
.headpara {
    color: #0e4747;
    font-family: 'LotussSmartHLregular',sans-serif, Verdana, Arial, sans-serif;
    font-weight: 500;
    line-height: 1.1;
    font-size: 1.02em;
    font-weight: bold;
}
.para {
    color: #505151;
    font-family: 'LotussSmartHLregular',sans-serif, Verdana, Arial, sans-serif;
    font-size: 1em;
}
/*****************buttonslide*****/
#hide {
    padding: 3px;
    text-align: center;
    background-color: #379884;+
    color: #fff !important;
    border-radius: 4px;
}


#more {
    padding: 3px;
    text-align: center;
    background-color: #00BCB4;
    color: #fff !important;
    border-radius: 4px;
    cursor: pointer;
}


@media only screen and (min-width: 767px) {
    #more:hover {
        background-color: #F9BE00;
    }
}
    

#hide {
    padding: 50px;
    display: none;
    background-color: white;
}

#hideimg {
    text-align: center;
    color: blue !important;

}


#moreimg {
    padding: 3px;
    text-align: center;
    background-color: white;
    color: #4a90cc !important;
    border-radius: 4px;
    cursor: pointer;
    color: #4a90cc;
    text-align:left;
}

#hideimg {
    padding: 50px;
    display: none;
    background-color: white;
}


/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.Popup {
    position: fixed;
    display: none;
    top: 20%;
    left: 30%;
}

.header-bar {
    clear: both;
    background-color: #00BCB4;
    width: 100%;
    height: 6px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-top: 0px;
    border-radius: 10px;
    background: -khtml-gradient(linear, left top, left bottom, from(#00B498), to(#007658));
    background: -moz-linear-gradient(top, #00B498, #007658);
    background: -ms-linear-gradient(top, #00B498, #007658);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00B498), color-stop(100%, #007658));
    background: -webkit-linear-gradient(top, #00B498, #00BCB4);
    background: -o-linear-gradient(top, #00B498, #007658);
    background: linear-gradient(top, #00B498, #007658);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00B498', endColorstr='#007658', GradientType=0);
    margin-top: 3px;
}



/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
}

/* The Close Button */
.close {
    color: white;
    position: absolute;
    /*top: 10px;
        right: -2%;*/
    font-size: 3em;
    font-weight: bold;
    position: absolute;
    right: -25px;
    top: 0px;
 
}

.numbertext {
    padding: 6%;
}
/**************************************language icon********************************/
li.language {
    /*float: right;*/
}

.language .link {

  
    font-size: 20px;
    color: #fff;
}




.language .link {
    /*background-color: #329984;*/
    /*background-color: #e14c46;*/
    text-align: center;
}

.language .link:hover {
        /*background-color: #008167;*/
        /*background-color: #DC3F39;*/
    }
/*********************************************/
ul.dropdown-menu.UlLanguageMenu {
    min-width: auto;
}

.mySlides img {
    max-width: 400px;
    max-height: 700px;
}
.buttonc {
    background-color: #008F71;
    color: white;
    border: 1px solid #008F71;
    padding: 1% 5%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 6px;
    font-family: 'LotussSmartHLregular','thaisanslite_r1';
}
#ProductInfo {
    background-color:white;
    font-size:18px;

}

/**********************btn language****************************/
.buttonlg {
    background-color: #008F71; /* Green */
    border: none;
    color: white;
    padding: 6px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.buttonlg1 {
    background-color: white;
    color: #008F71;
    border: 2px solid #008F71;
}
/******************************textbox*************************************/
input[type=text], select {
    width: 100%;
    padding: 10px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
/********************************button Recipe***************************************/

div .buttonR {
    !important;
    clear: both;
    display: inline-block;
    padding: 8px 15px;
    background: #00BCB4;
    width: 100%;
    color: #FFF;
    text-align: center;
    font-size: 1.3em;
}

@media only screen and (min-width: 767px) {
    div .buttonR:hover {
        !important;
        clear: both;
        display: inline-block;
        padding: 8px 15px;
        background: #F9BE00;
        color: #FFF;
        text-align: center;
        font-size: 1.3em;
    }
}