
.images-about img{ width: 100%;}

.topic-smile{ background: #e3fffc; padding: 30px 0; text-align: center;}
.topic-smile .title-smile{ font-size: 50px; font-weight: 600; color: #026aba; }
.topic-smile .title-smile img{ max-width: 100%; display: block; margin: 8px auto; }
.topic-smile .text-smile{ color: #3f250f; font-size: 24px; padding: 22px 18px; font-weight: 600; }

.shop-slide{ margin: 80px auto;}
.title-slide-about{ color: #3f250f; font-size: 35px; display: block; text-align: center; font-weight: 600; margin-bottom: 12px; }
.images-slide img{ width: 100%; }

.commitment{ background: url(../images/bg-tile.jpg); padding-bottom: 30px; }
.banner-coffee img{ width: 100%; }
.text-commitment{ text-align: center; color: #262626; font-size: 22px; padding: 22px 18px; position: relative; }
.text-commitment .img-coffee{ width: 350px; position: absolute; left: -160px; top: -100px;}
.title-commitment{ color: #3f250f; font-size: 35px; display: block; text-align: center; font-weight: 600; margin: 35px auto; padding: 8px;  }
.title-commitment span{ background: #3f250f; width: 100px; height: 4px; display: block; margin: auto;  margin-top: 12px;}

.richness{ background: #eaf3e2; border: 8px solid #c3dcac; position: relative; padding: 30px 12px; width: 100%; box-sizing: border-box; margin: 22px auto; }
.richness .title-green{ color: #165c32; font-size: 25px; font-weight: 600; display: block; padding-left: 112px; position: relative;}
.richness .title-green img{ width: 100px; position: absolute; left: 0; bottom: 0; }
.richness .bag-coffee { position: absolute; right: -220px; bottom: -60px; width: 461px; }
.richness p{ width: 77%; font-size: 18px; padding: 12px;}

.drink-menu{ background: url(../images/bg-strip-yellow.jpg);}
.drink-menu .banner-drink img{ width: 100%; }
.title-drink{ color: #3f250f; font-size: 35px; display: block; text-align: center; font-weight: 600; margin: 35px auto; padding: 8px;  }
.title-drink span{ background: #e5bd00; width: 100px; height: 4px; display: block; margin: auto;  margin-top: 12px;}

.menu-list ul { display: flex; flex-wrap: wrap; width: 100%; }
.menu-list ul li{ display: table; width: 48%; margin: 4px 1%; }
.menu-list ul li span{ display: table-cell; padding:12px 4px; border-bottom: 1px dashed #3f250f; color: #262626; font-weight: 600; }
.menu-list ul li span:nth-child(1){ width: 60%; }
.menu-list ul li span:nth-child(2){ width: 20%; text-align: right; }
.menu-list ul li span:nth-child(3){ width: 20%; text-align: right; }
.menu-list ul li span small{ background: #3f250f; border-radius: 50%; width:20px; height: 20px; display: inline-block; color: #fff; font-size: 12px; text-align: center; margin-right: 4px; font-weight: 400; }

.sweet{ background: url(../images/bg-pink.jpg); margin-bottom: -24px; padding: 70px 0;}
.title-sweet{ color: #3f250f; font-size: 35px; display: block; text-align: center; font-weight: 600; padding: 22px 12px;  }
.title-sweet span{ background: #ffa3b0; width: 100px; height: 4px; display: block; margin: auto;  margin-top: 12px;}
.text-sweet{ text-align: center; color: #262626; font-size: 22px; padding: 22px 18px;}

.menu-cake ul { display: flex; flex-wrap: wrap; width: 100%; margin: 22px auto 0; }
.menu-cake ul li { display: table; width: 48%; margin: 4px 1%; }
.menu-cake ul li span{ display: table-cell; padding:12px 4px; border-bottom: 1px dashed #3f250f; color: #262626; font-weight: 600; font-size: 14px; }
.menu-cake ul li span:nth-child(1) { width: 70%; text-align: left; }
.menu-cake ul li span:nth-child(2) { width: 30%; text-align: right; }


@media( max-width:720px){
    .richness{ padding:30px 12px 135px;}
    .richness p{ width: 100%; }
    .richness .bag-coffee{ bottom: none; }
    .text-commitment .img-coffee{ width: 200px; position: absolute; left: -60px; top: -90px;}
    .richness .bag-coffee { position: absolute; right: 5px; bottom: -30px; width: 320px; }
}

@media( max-width:768px ){
    .topic-smile .title-smile{ font-size: 30px; }
    .topic-smile .text-smile{ font-size: 20px; text-align: center;; }
    .title-slide-about{ font-size: 22px; }

    .title-commitment, .title-drink, .title-sweet{ font-size: 24px; }
    .text-commitment, .text-sweet{ font-size: 18px; text-align: left; }

    .menu-list ul li{ width: 100%; margin: auto; }
    .menu-cake ul li{ width: 100%; margin: auto; }
}
