.inline{
    position: relative;
    display: inline-block;
    max-width: 1024px;
    width: 100%;
    margin: auto;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}
#home{
    position: relative;
    margin-bottom: 24px;
}
#home .inline{
    height: 150px;
     display: block;
}
#home .logo{
    position: absolute;
    top: 41px;
    left: 24px;
    width: 166px;
    height: 83px;    
    z-index: 100;
}
#home .logo a{
    width: 100%;
    height: 100%;
    background-image: url("images/logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}
#home .top_menu{
    position: relative;
    float: right;
    display: inline-block;
    margin-top: 109px;    
}
#home .top_menu .menu_item{
    float: left;    
    font-size: 0.938em;
    font-weight: 700;    
    letter-spacing: -0.5px;
}
#home .top_menu .menu_item:after{
    content: "|";
    margin: 0px 8px 0px 8px;
}
#home .top_menu .menu_item:last-child:after{
    content: "";
    margin: 0px 8px 0px 8px;
}
#home .fb{
    position: absolute;
    right: 44px;
    top: 42px;    
}
#home .ig{
    position: absolute;
    right: 12px;
    top: 42px;    
}
#home .mini_menu{
    display: none;         
}
#home .menu_ctrl{
    position: relative;
    top: 0px;
}
#home .fix_menu{
    position: fixed;
    z-index: 9;
    width: 100%;
    background-color: rgba(255,255,255,0.8);    
    top: -25px;
}
#home .top_banner{
    width: 100%;
    height: auto;
    display: inline-block;
    background-color: #f6f6f6;  
    margin-top: 0px;  
    /*max-width: 1024px;
    min-height: 400px;    
    background-image: url("images/banner1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    position: relative;   */ 
}
#home .top_banner.menu_fixed{
    margin-top: 150px; 
}
#home .top_banner img{    
    width: 100%;
    max-width: 1024px;   
    height: auto;   
    display: inline-block;
    position: relative;    
}
#home .top_banner .textbox{
    position: absolute;
    left: 148.604px;
    top: 317.51px;    
    width: 278px;
    height: 126px;
    background-image: url('images/6060.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#story{
    margin-bottom: 24px;
}
#story .title{
    font-weight: bold;
    text-align: left;
}
#story .textbox{
    text-align: justify;
    font-size: 12px;
}
#story .textbox.left{
    float: left;
    width: 49%;
}
#story .textbox.right{
    float: right;
    width: 48%;
}

.section.left{
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
}
.section.right{
    position: relative;
    float: right;
    width: 50%;
    height: 100%;
}
#why{
   height: auto;
   min-height: 683px; 
   position: relative;
   margin-bottom: 24px;
}
#why > .section.left{
    height: 683px;
    background-image: url('images/why1_1.jpg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}
#why .section.right{
    height: 683px;
}

#why .section.right .section.right{
    background-image: url('images/why2.jpg');
    background-size: cover; 
    background-repeat: no-repeat;
}
#why .textbox{
    width: 90%;    
    max-width: 280px;
    min-height: 393px;    
    position: relative;
    margin: auto;    
    top: 150px;
}
#why .title{
    font-weight: bold; 
    text-align: left;   
}
#why .sep_line{
    height: 4px;
    width: 90px;
    margin-left: 4px;
    background-color: #191418;
    margin-bottom: 30px;
}
#why .text{
    text-align: justify;
    font-size: 12px;
}

#flavours{
    margin-bottom: 24px;
}
#flavours .title{
    font-weight: bold;
    text-align: left;
}
#flavours .box{
    text-align: justify;
    font-size: 12px;
    border: 10px solid #50afe2;
    height: 150px;
    padding: 25px;
}
#flavours .textbox{
    width: 49%;    
}
#flavours .product{
   background-image: url('images/yogurt.png');
   background-size: contain; 
   background-repeat: no-repeat;
   background-position: center;
   width: 50%;
   height: 90%;    
   top: 0px;
   right: 0px;   
   position: absolute;   
}

#where{
   height: auto;
   min-height: 684px; 
   position: relative;   
}
#where > .section.left{
    height: 684px;
}
#where > .section.right{    
    height: 684px;
    background-image: url('images/where2.jpg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

#where .section.left .section.left{
   background-image: url('images/where1.jpg');
   background-size: cover; 
   background-repeat: no-repeat;
}
#where .section.right .section.left .img{
   width: 90%;
   height: auto;
   max-width: 468px;
   height: 604px;
   background-image: url('images/where1_1.jpg');
   background-size: cover; 
   background-position: right;
   background-repeat: no-repeat;
   position: relative;
   top: 40px;
   left: 40px;
}
#where .section.right .section.left .img.bounceIn {  
  opacity: 1 !important;
}
#where .textbox{
    width: 90%;    
    max-width: 208px;
    min-height: 266px;    
    position: relative;
    margin: auto;   
    text-align: left;   
}
#where .title{
    font-weight: bold;     
}
#where .sep_line{
    height: 4px;
    width: 58px;
    margin-left: -1px;
    background-color: #191418;
    margin-bottom: 30px;
}
#where .subtitle{
    font-weight: bold;
    font-size: 12px;
}
#where .text{
    font-size: 12px;
}
#where .mg_top_30{
    margin-top: 30px;
}
#where img{
    width: 119px;
    height: 96px;
    margin-top: 18px;    
}
#recipes{   
   height: auto;
   min-height: 684px; 
   position: relative;     
   background-image: url('images/recipes1.jpg');
   background-size: cover;
   background-position: center; 
   background-repeat: no-repeat;
   position: relative;
}
#recipes .textbox{
    width: 423px;
    height: 226px;
    border: solid 14px #010005;
    position: absolute;
    left: 30px;
    top: 296px;
    bottom: 0px;
    padding: 40px;
    box-sizing: border-box;
    background-color: white;
}
#recipes .title{
    font-weight: bold; 
    text-align: left;   
}
#recipes .textbox .sep_line{
    height: 4px;
    width: 67px;    
    background-color: #191418;
    margin-bottom: 15px;
}
#recipes .subtitle{
    font-weight: bold; 
    text-align: left; 
    font-size: 30px;  
}
@media(max-width: 1024px){
    #recipes .textbox{
        right: 0px;
        left: auto;
    }
}
.sub_bkg{
    position: absolute;
    width: 50%;    
    max-width: 1024px;
    height: auto;
    left: 390px;
    right: 0px;
    margin: auto;
    top: -390px;
    z-index: -1;
}
.scrollmagic-pin-spacer .sub_bkg{    
    width: 100%;
    display: block;
}
@media(max-width: 775px){
    .sub_bkg{
       display: none;
    }
    .scrollmagic-pin-spacer .sub_bkg{
        display: none;
    }
}
#stockus{
   height: auto;
   min-height: 684px; 
   position: relative;   
}
#stockus > .section.left{
    height: 684px;
    background-image: url('images/stockus.jpg');
    background-size: cover;
    background-position: left;
}
#stockus .section.right{
    height: 684px;
}

#stockus .section.right .section.right{
   
}
#stockus .right_textbox{
    width: 90%;    
    max-width: 420px;
    min-height: 320px;    
    position: relative;
    margin: auto;    
    border: solid 8px #010005;
    top: 281px;
    background-color: white;
    padding: 40px;
    box-sizing: border-box;
}
#stockus .right_textbox.bounceInUp{
    opacity: 1 !important;
    z-index: 1;
}
#stockus .title{
    font-weight: bold; 
    text-align: left;   
}
#stockus .sep_line{
    height: 4px;
    width: 109px;
    margin-left: 0px;
    background-color: #191418;
    margin-bottom: 30px;
}
#stockus .text{
    text-align: justify;
    font-size: 12px;
}
#sayhi{
    width: 100%;
}
#sayhi .sep_line{
    height: 4px;
    width: 60px;
    margin-left: -1px;
    background-color: #191418;
    margin-bottom: 20px;
}

#sayhi .textbox{
    border: solid 8px #010005;
    position: absolute;
    left: 50px;
    bottom: 84px;
    top: 50px;
    right: 50px;
    padding: 40px;
    box-sizing: border-box;
    width: auto;
}
#sayhi input,
#sayhi textarea{
    width: 100%;
    border: solid 1px #010005;
    height: 46px;
    margin-bottom: 10px;
}
#sayhi textarea{
    resize: none;
    padding: 10px;
    box-sizing: border-box;
    height: 100px;
}
#sayhi .button{
    width: 154px;
    height: 49px;
    background-color: #2a292e;
    position: absolute;
    right: 40px;
    bottom: 8px;
    color: white;
    text-align: center;
    line-height: 49px;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #010005;
  font-weight: bold;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #010005;
  font-weight: bold;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #010005;
  font-weight: bold;
}
:-moz-placeholder { /* Firefox 18- */
  color: #010005;
  font-weight: bold;
}
.valid::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;  
}
#stockus .text{
    text-align: justify;
    font-size: 12px;
}
#sayhi .textbox a{
    font-weight: bold;
}
#sayhi .send_result{
    display: none;
}
#footer{
    font-size: 12px;
    z-index: 100;
}
#footer .title{
    color: #6d5e5e;
    font-weight: bold;
    font-size: 16px;
}
#footer .brick{
    width: 140px;
    height: 140px;
    overflow: hidden;
    display: inline-block;
    margin: 8px;
}
#footer .img{    
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    -ms-transition: background 0.3s;
    transition: background 0.3s;
}
#footer .img:hover{
    background-size: 110% 110%;
    cursor: pointer;
}
#footer .grid{
    display: inline-block;
    margin-top: 8px;
}
#footer .inline{
    margin-bottom: 24px;
}

.fade{
    -webkit-transition: background 1000ms ease-in 500ms; /* property duration timing-function delay */
    -moz-transition: background 1000ms ease-in 500ms;
    -o-transition: background 1000ms ease-in 500ms;
    transition: background 1000ms ease-in 500ms;
}

.menu_animate{
    -webkit-transition: top 500ms ease-out; 
    -moz-transition: top 500ms ease-out; 
    -o-transition: top 500ms ease-out; 
    transition: top 500ms ease-out; 
}

@media (max-width: 775px){
    #why .section.right .section.left{
        width: 100%;
    }
    #why .section.right .section.right{
        display: none;
    }
    #where .section.left .section.left{
        display: none;
    }
    #where .section.left .section.right{
        width: 100%;
    }
}
@media (max-width: 917px){
    #sayhi .textbox{        
        padding: 20px;        
        left: 10px;
        right: 10px; 
    }
    #sayhi .text{
        text-align: left;
        word-break: break-all;
    }   
    #sayhi .button{
        right: 20px;
    } 
}
@media (max-width: 1024px){
    #stockus .section.left .section.right{
        width: 90%;
    }
}
@media (max-width: 1280px){
    #where .section.right .section.left{
        width: 90%;
    }
}
@media (max-width: 919px){
    #home .top_menu,#home .side_menu{
        display: none;
    }
    #home .mini_menu{
        display: block;           
    }
    #home .mini_menu .mini_menu_btn{
        position: absolute;
        top: 70px;
        right: 30px;
        width: 42px;
        height: 30px;
        z-index: 100;        
        background-image: url("images/mini_menu.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer; cursor: hand;
        -webkit-tap-highlight-color:transparent;   
    }
    #home .mini_menu_content{
        position: fixed;
        display: none;
        /*width: 200px;*/
        width: 0px;
        height: 1024px;
        right: 0px;        
        top: 0px;
        background: white;
        z-index: 100;   
        border: 1px solid #e0e0e0;
        border-top: 0px;
        border-right: 0px;
        padding: 9px;
        box-sizing: border-box;  
        overflow: hidden;            
    }
    #home .mini_menu_content .menu_item{
        width: 100%;
        text-align: right;
        white-space: nowrap;
    }
    #home .mini_menu_content .menu_item.smart_kids,
    #home .mini_menu_content .menu_item.strong_kids{
        font-size: 1.561em;
        font-weight: 700;
    }
    #home .mini_menu_content .menu_item.smart_kids{
        color: #A11D4B;
        margin-top: 14px;
    }
    #home .mini_menu_content .menu_item.strong_kids{
        color: #3C65A3;
    }
    #home .mini_menu_content .sep_line{
        width: 100%;
        margin-top: 12px;
        margin-bottom: 12px;
        height: 1px;
        background: #646567;
    }    
    #home .logo{
        width: 106px;
        height: 67px;        
    }
    #home .inline {
        height: 120px;        
    }
    #home .top_banner {
        height: 120px;
       /* margin-top: 71px;  */  
        /*height: 268px;*/
    }    
    #home .fb {
        right: 55px;
        top: 45px;
    }   
    #home .ig {
        right: 28px;
        top: 45px;
    }
    
}
@media (max-width: 577px){
    #story .title {    
        margin: auto;        
        width: 90%;
    }
    #story .textbox.left {
        float: none;
        width: 90%;
        margin: auto;
    }
    #story .textbox.right {
        float: none;
        width: 90%;
        margin: auto;
    }
    .section.left{
        width: 100%;
        float: none;
    }
    .section.right{
        width: 100%;
        float: none;
    }
    #why > .section.left {                
        background-size: contain;
        background-position: center;        
    }
    #why .textbox{
        margin-top: 20px;
        top: 0px;
    }
    .section.left,
    .section.right{
        height: 341px !important;
        min-height: 341px !important;
    }
    #recipes .textbox{
        top: -40px;
        right: auto;
        width: 90%;
    }
    #recipes .subtitle{
        font-size: 20px;
    }
    #where{
        min-height: 0px;
    }
    #where .section.right .section.left .img{
        height: 100%;
        top: 0px;
        left: 0px;
        width: 100%;
        max-width: none;
    }
    #where .section.right .section.left {
        width: 100%;
    }
    #stockus .section.left .section.right{
        width: 100%;
    }
    #stockus .right_textbox{
        top: 10px;
    }
    #sayhi,
    #stockus .section.right {
        height: 600px !important;
    }
    #sayhi .textbox{
        bottom: 15px;
    }
    #flavours .title{
        width: 90%;
        margin: auto;
    }

}

textarea {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    -webkit-appearance: none;
}