/*================================================



* Template Name: Foodkuy - Mobile HTML Template

* Version: 1.0

* Author: HidraTheme 

* Developed By: HidraTheme  

* Author URL: https://themeforest.net/user/hidratheme



-- NOTE: This is main stylesheet of the template --



================================================*/

/*================================================



COLOR STYLE 

primary-color: #95b700;

secondary-color: #708a00;

font-color-sidebar: #ffffff;

icon-sidenav-color: #95b700;

general-font-color: #212529;

font_header: #ffffff;

sidebar:  #333333;



================================================*/

/*================================================

            Table of contents  

==================================================



1. GENERAL    

2. PRELOADER

3. HEADER 

4. SIDEBAR  

    4.1 PROFILE

    4.2 SIDEBAR LEFT

    4.3 SIDEBAR RIGHT

5. HOMEPAGE

    5.1 HOMEPAGE SLIDER

    5.2 HOMEPAGE YOU MIGHT LIKE

    5.3 HOMEPAGE AUTHOR

    5.4 HOMEPAGE BANNER

    5.5 HOMEPAGE NEWS

6. SUBSCRIBE

7. RECIPE LIST

8. FOOD RECIPE PAGE

9. AUTHOR

10. SETTING

11. FEEDBACK

12. NEW RECIPE 

13. LOGIN

14. REGISTER

15. PAGINATION

16. GALLERY

17. NEWS LIST

18. FAVORITES

19. NEWS

20. PROFILE

21. 404 PAGE

22. FOOTER



====================================================

            End table content 

===================================================*/

/* ---------------------------------------------------

1. GENERAL  

----------------------------------------------------- */

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

body {

  font-family: 'Poppins', sans-serif;

  background: #ffffff;

  font-size: 13px;

  color: #212529; }



body a,

body a:hover {

  color: #212529;

  text-decoration: none; }



body.noscroll {

  overflow: hidden; }



.btn {

  background-color: #95b700;

  color: #ffffff; }



.btn:hover {

  color: #ffffff; }



img {

  max-width: 100%;

  max-height: 100%; }



.none {

  display: none; }



.clear {

  clear: both; }



.theme-button {

  background-color: #95b700;

  padding: 5px 15px;

  color: #fff;

  cursor: pointer;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  display: inline-block; }



.theme-button.medium {

  padding: 10px 15px; }



.line {

  width: 100%;

  height: 1px;

  background-color: #ddd; }



.theme-button-line {

  border: 1px solid #95b700;

  background-color: transparent;

  padding: 3px 5px;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  text-align: center;

  color: #95b700; }



.theme-button:hover {

  background-color: #708a00; }



ul.slick-dots li button {

  width: 15px;

  height: 5px;

  background-color: #95b700;

  padding: 0px;

  -webkit-border-radius: 90px;

  -moz-border-radius: 90px;

  border-radius: 90px;

  opacity: 0.3; }



ul.slick-dots li.slick-active button {

  opacity: 1; }



.slick-dots li {

  margin: 0px 0px !important;

  height: 15px !important; }

.slick-dots li button:before {

  font-size: 0px !important; }



.content-wrap {

  max-width: 100%;

  margin: 0 auto;

  min-height: calc(100vh - 156px);

  background-color: #ffffff;

  overflow: hidden; }



.no-margin-top {

  margin-top: 0px; }



.heading-page {

  font-size: 14px;

  font-weight: 600;

  padding: 14px 15px 14px 14px;

  position: relative;

  border-bottom: 1px solid #ddd;

  height: 50px; }

  .heading-page .icon-back {

    text-align: center;

    display: table;

    display: table-cell;

    vertical-align: middle;

    cursor: pointer; }

  .heading-page .back-btn {

    position: absolute;

    left: 0px;

    top: 0px;

    border-left: 0px solid #ddd;

    height: 50px;

    width: 40px;

    text-align: center;

    display: table; }



.share-button {

  margin-top: 20px; }

  .share-button ul {

    list-style: none;

    padding: 0px 0px; }

  .share-button li {

    display: inline-block;

    text-align: center; }

    .share-button li a {

      padding: 2px 5px;

      background-color: #95b700;

      color: #ffffff;

      width: 25px;

      height: 25px;

      display: block; }

      .share-button li a .svg-inline--fa {

        color: #ffffff; }

  .share-button li.text {

    font-weight: 600;

    padding-right: 5px; }



body .form-control:focus {

  border-color: #95b700;

  outline: 0;

  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0);

  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0); }



.section-single-page {

  padding: 15px 15px; }



.img-news {

  margin: 0px 0px 10px; }



#content {

  width: 100%;

  min-height: calc(100vh - 56px);

  transition: all 0.3s;

  position: absolute;

  top: 120px;

  right: 0; }



/*==================================================

2. PRELOADER

==================================================*/

.preloading {

  width: 100%;

  text-align: center;

  height: 100%;

  position: fixed;

  background: #ffffff;

  z-index: 999999;

  top: 0px;

  display: table;

  left: 0; }



.preloading .wrap-preload {

  background-color: #95b700;

  display: table-cell;

  text-align: center;

  vertical-align: middle; }



.preloading .cssload-loader {

  width: 49px;

  height: 49px;

  border-radius: 50%;

  margin: 3em;

  display: inline-block;

  position: relative;

  vertical-align: middle;

  background: #ffffff; }



.preloading .cssload-loader,

.preloading .cssload-loader:before,

.preloading .cssload-loader:after {

  animation: 1.15s infinite ease-in-out;

  -o-animation: 1.15s infinite ease-in-out;

  -ms-animation: 1.15s infinite ease-in-out;

  -webkit-animation: 1.15s infinite ease-in-out;

  -moz-animation: 1.15s infinite ease-in-out; }



.preloading .cssload-loader:before,

.preloading .cssload-loader:after {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  position: absolute;

  top: 0;

  left: 0; }



.preloading .cssload-loader {

  animation-name: cssload-loader;

  -o-animation-name: cssload-loader;

  -ms-animation-name: cssload-loader;

  -webkit-animation-name: cssload-loader;

  -moz-animation-name: cssload-loader; }



@keyframes cssload-loader {

  from {

    transform: scale(0);

    opacity: 1; }

  to {

    transform: scale(1);

    opacity: 0; } }

@-o-keyframes cssload-loader {

  from {

    -o-transform: scale(0);

    opacity: 1; }

  to {

    -o-transform: scale(1);

    opacity: 0; } }

@-ms-keyframes cssload-loader {

  from {

    -ms-transform: scale(0);

    opacity: 1; }

  to {

    -ms-transform: scale(1);

    opacity: 0; } }

@-webkit-keyframes cssload-loader {

  from {

    -webkit-transform: scale(0);

    opacity: 1; }

  to {

    -webkit-transform: scale(1);

    opacity: 0; } }

@-moz-keyframes cssload-loader {

  from {

    -moz-transform: scale(0);

    opacity: 1; }

  to {

    -moz-transform: scale(1);

    opacity: 0; } }

/* ---------------------------------------------------

3. HEADER

----------------------------------------------------- */

.bg-header {

  z-index: 10;

  position: fixed !important;

  top: 0px;

  left: 0px;

  height: 110px;

  width: 100%;

  background-color: #95b700;

  border-bottom: 0px solid #ddd; }



.navbar {

  position: relative; }

  .navbar #sidebarleftbutton.btn,

  .navbar #sidebarrightbutton.btn {

    background-color: transparent;

    padding: 5px 5px;

    font-size: 28px;

    line-height: 0px;

    position: absolute;

    font-size: 20px; }

  .navbar .btn:hover {

    color: #ffffff; }

  .navbar #sidebarleft.btn {

    left: 1rem; }

  .navbar #sidebarrightbutton.btn {

    right: 1rem; }

  .navbar .logo {

    height: 90px;

    width: auto;

    margin: 5px 0px;

    font-size: 20px;

    font-weight: 800;

    width: 100%;

    text-align: center; }

  .navbar .logo,

  .navbar #sidebarleftbutton.btn,

  .navbar #sidebarrightbutton.btn {

    color: #ffffff; }

  .navbar .logo img {

    height: 100%;

    width: auto; }

  .navbar .logo .fa-pizza-slice {

    color: #ec7b00; }



.navbar-btn {

  box-shadow: none;

  outline: none !important;

  border: none; }



/* ---------------------------------------------------

4. SIDEBAR  

----------------------------------------------------- */

/*---------- Profile ----------*/

.sdprofile {

  background-color: rgba(255, 255, 255, 0.08);

  min-height: 100px;

  position: relative;

  padding-left: 100px; }

  .sdprofile .sdp-left {

    position: absolute;

    margin: 15px 10px 15px 20px;

    left: 0px;

    top: 0px; }

    .sdprofile .sdp-left img {

      width: 70px;

      height: 70px;

      overflow: hidden;

      -webkit-border-radius: 100%;

      -moz-border-radius: 100%;

      border-radius: 100%; }

  .sdprofile .sdp-right {

    padding: 20px 20px 0px 0px; }

    .sdprofile .sdp-right .sd-name {

      font-weight: 600;

      color: #95b700; }



/*---------- Sidebar left ----------*/

.sidenav .fa-caret-down {

  color: #ffffff !important;

  margin: 5px 0px 0px !important;

  float: right; }



.sidenav .collapsible-body {

  padding: 0px 0px !important;

  background-color: rgba(255, 255, 255, 0.08); }

  .sidenav .collapsible-body a {

    padding: 5px 20px 5px 43px !important; }



.sidenav a,

.sidenav a:hover,

.sidenav a:focus {

  color: inherit;

  text-decoration: none;

  transition: all 0.3s; }



.sidenav ul ul a {

  padding-left: 30px !important; }



.sidebar-header h3 {

  font-size: 20px;

  font-weight: 800; }



#sidebarleft {

  width: 250px;

  position: fixed;

  top: 0;

  left: -250px;

  height: 100vh;

  z-index: 999;

  background-color: #333333;

  color: #fff;

  transition: all 0.3s;

  overflow: auto; }

  #sidebarleft a,

  #sidebarleft a:hover {

    color: #ffffff; }

  #sidebarleft ul .svg-inline--fa {

    color: #95b700; }

  #sidebarleft .svg-inline--fa {

    color: #ffffff; }



#sidebarleft .list-unstyled .fas,

#sidebarleft .list-unstyled .svg-inline--fa {

  font-size: 14px;

  margin-right: 5px; }



#sidebarleft.active {

  left: 0; }



#dismiss {

  width: 35px;

  height: 35px;

  line-height: 35px;

  text-align: center;

  position: absolute;

  cursor: pointer;

  -webkit-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;

  font-size: 26px; }



#sidebarleft #dismiss {

  top: 15px;

  right: 15px; }



#dismiss:hover {

  color: #ffffff; }



.overlay {

  display: none;

  position: fixed;

  width: 100vw;

  height: 100vh;

  background: rgba(0, 0, 0, 0.7);

  z-index: 998;

  opacity: 0;

  transition: all 0.5s ease-in-out; }



.overlay.active {

  display: block;

  opacity: 1; }



#sidebarleft .sidebar-header {

  padding: 20px;

  border-bottom: 1px solid rgba(0, 0, 0, 0.18);

  background-color: #95b700; }



#sidebarleft ul {

  padding: 10px 0px; }



#sidebarleft ul li a {

  padding: 5px 20px;

  font-size: 1.1em;

  display: block; }



#sidebarleft ul li a:hover,

#sidebarright ul li a:hover {

  background-color: rgba(255, 255, 255, 0.07); }



#sidebarleft ul li.active > a,

a[aria-expanded="true"] {

  color: #fff; }



a[data-toggle="collapse"] {

  position: relative; }



.dropdown-toggle::after {

  display: block;

  position: absolute;

  top: 50%;

  right: 20px;

  transform: translateY(-50%); }



/*---------- Sidebar right ----------*/

#sidebarright {

  width: 250px;

  position: fixed;

  top: 0;

  right: 0px;

  height: 100vh;

  z-index: 999;

  background-color: #333333;

  color: #fff;

  transition: all 0.3s;

  overflow: auto;

  right: -250px; }

  #sidebarright a,

  #sidebarright a:hover {

    color: #ffffff; }

  #sidebarright ul .svg-inline--fa {

    color: #95b700; }

  #sidebarright .right-menu {

    padding: 10px 0px;

    border-top: 0px solid rgba(0, 0, 0, 0.3);

    margin-top: 0px; }

    #sidebarright .right-menu .right-menu-item {

      padding: 0px 0px; }

  #sidebarright ul li a {

    padding: 5px 20px;

    font-size: 1.1em;

    display: block; }

  #sidebarright ul li .fas,

  #sidebarright ul li .svg-inline--fa {

    font-size: 14px;

    margin-right: 5px;

    color: #95b700; }

  #sidebarright .count {

    background-color: rgba(0, 0, 0, 0.07);

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 0px 3px;

    font-size: 12px;

    display: inline-block;

    text-align: center;

    margin-left: 3px; }



#sidebarright #dismiss {

  top: 15px;

  left: 15px; }



#sidebarright .sidebar-header {

  padding: 20px;

  text-align: right;

  border-bottom: 1px solid rgba(0, 0, 0, 0.18); }



#sidebarright.active {

  right: 0; }



.sidebar-header h3 {

  margin-bottom: 0px; }



.search-wrapper {

  margin: 0;

  padding: 10px 10px;

  color: #303030;

  position: relative; }



.search-wrapper input#search {

  display: block;

  font-weight: 300;

  width: 100%;

  height: 35px;

  margin: 0;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0 45px 0 15px;

  border: 0;

  border: 0px solid #ffffff;

  -webkit-border-radius: 90px;

  -moz-border-radius: 90px;

  border-radius: 90px;

  background: #ffffff; }

.search-wrapper i.material-icons {

  position: absolute;

  top: 0px;

  right: 20px;

  cursor: pointer;

  color: #303030;

  line-height: auto;

  height: auto; }

.search-wrapper button.ssubmit {

  border: 0px solid #ffffff;

  background-color: transparent;

  position: absolute;

  top: 18px;

  right: 18px;

  font-size: 18px; }



/* ---------------------------------------------------

5. HOMEPAGE

----------------------------------------------------- */

#content {

  background-color: #f4f4f4;

  /*---------- Homepage Slider ----------*/ }

  #content .img-hero {

    margin-bottom: -15px;

    overflow: hidden; }

    #content .img-hero .slick-slide img {

      width: 100%;

      height: auto; }

  #content .img-hero ul.slick-dots {

    bottom: 20px; }

  #content .img-hero ul.slick-dots li {

    margin: 0px; }

  #content .img-hero ul.slick-dots li button {

    background-color: #ffffff; }

  #content .img-hero ul.slick-dots li button:before {

    color: #fff;

    font-size: 0px; }



.section-home {

  overflow: hidden;

  background-color: #ffffff;

  width: 95%;

  margin: 0 auto 15px;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

  padding: 20px 15px;

  -webkit-box-shadow: 0px 1px 9px 0px rgba(50, 50, 50, 0.13);

  -moz-box-shadow: 0px 1px 9px 0px rgba(50, 50, 50, 0.13);

  box-shadow: 0px 1px 9px 0px rgba(50, 50, 50, 0.13); }



.section-home .sa-title {

  color: #212529;

  font-size: 18px;

  margin-bottom: 5px;

  font-weight: 600; }



.section-home .heading-section {

  position: relative;

  margin-bottom: 25px;

  margin-top: 0px; }

  .section-home .heading-section .sa-title.popcat {

    width: 100%;

    line-height: 1;

    text-align: center; }



.section-home .more-category {

  width: 100%;

  text-align: center;

  padding: 10px 0px 0px; }

  .section-home .more-category .mcbutton {

    position: relative;

    right: 0px;

    bottom: 0px;

    display: inline-block;

    font-size: 14px;

    font-weight: 600; }



.section-a {

  background: #fff;

  position: relative;

  z-index: 2;

  padding: 15px 15px; }



.section-home.s-category {

  position: relative; }



.home-category-list {

  margin-left: -5px;

  margin-right: -5px;

  margin-top: -5px; }

  .home-category-list .home-box-category {

	position: relative;

	width: 50%;

	height: 140px;

	overflow: hidden;

	float: left;

	border: 5px solid #ffffff;

	border-radius: 10px;

}

  .home-category-list .home-text-category {

    display: table;

    position: relative;

    width: 100%;

    height: 100%;

    z-index: 2;

    text-shadow: 1px 1px 1px #000;

    text-align: center; }

    .home-category-list .home-text-category .bc-text {

      word-break: break-word;

      display: table-cell;

      z-index: 2;

      vertical-align: middle;

      color: #fff;

      font-size: 18px;

      font-weight: 600;

      padding: 0px 20px;

      line-height: 1; }

  .home-category-list .home-image-category {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background-color: #000000; }

    .home-category-list .home-image-category img {

      opacity: 0.9;

      max-height: 9999999%;

      width: 100%;

      height: auto;

      /* max-width: 420px; */

      margin-left: 0; }



/*---------- Homepage You Might Like  ----------*/

.you-might-like {

  position: relative; }

  .you-might-like .slick-track {

    margin-left: -2.5px; }

  .you-might-like .heading-section .sa-title {

    width: 100% !important; }

  .you-might-like .slick-track {

    margin: 0px 0px; }

  .you-might-like .yml-box {

    width: 120px; }

  .you-might-like .yml-box .yml-img {

    overflow: hidden;

    margin: 0px 5px 0px 5px;

    border-radius: 10px;

    height: auto; }

    .you-might-like .yml-box .yml-img img {

      height: auto;

      width: 100%;

      max-width: 99999px;

      border-radius: 10px;

      margin: 0 auto; }

  .you-might-like .yml-box .yml-food-text {

    padding: 10px 10px 0px;

    text-align: center;

    line-height: 1.2; }



/*---------- Homepage Author  ----------*/

.recipe-author .slick-track {

  margin-bottom: 10px; }

.recipe-author .slick-dotted.slick-slider {

  margin-bottom: 20px; }

.recipe-author .author-box {

  padding: 0px 0px;

  text-align: center; }

  .recipe-author .author-box .author-img {

    margin: 0 auto;

    width: 50px;

    height: 50px;

    -webkit-border-radius: 90px;

    -moz-border-radius: 90px;

    border-radius: 90px;

    overflow: hidden;

    padding: 2px;

    border: 2px solid #95b700; }

    .recipe-author .author-box .author-img img {

      width: 100%;

      height: 100%;

      -webkit-border-radius: 90px;

      -moz-border-radius: 90px;

      border-radius: 90px; }

  .recipe-author .author-box .author-name {

    margin: 5px auto 0px;

    line-height: 1.2;

    font-size: 12px;

    padding: 0px 5px; }



/*---------- Homepage Banner  ----------*/

.section-home.home-banner {

  padding: 0px 0px; }

  .section-home.home-banner img {

    width: 100%;

    height: auto; }



/*---------- Homepage News ----------*/

.section-home.home-news .home-news-wrap .more-category {

  padding: 0px 0px; }

.section-home.home-news .home-news-wrap .news-item {

  border-bottom: 1px solid #ddd;

  padding-bottom: 15px;

  margin-bottom: 15px; }

  .section-home.home-news .home-news-wrap .news-item .hnw-title {

    font-weight: 600; }

  .section-home.home-news .home-news-wrap .news-item .news-content {

    position: relative;

    width: 100%;

    padding-left: 120px;

    min-height: 70px; }

    .section-home.home-news .home-news-wrap .news-item .news-content .hnw-img {

      width: 100px;

      position: absolute;

      top: 0px;

      left: 0px;

      overflow: hidden;

      height: 100%; }

      .section-home.home-news .home-news-wrap .news-item .news-content .hnw-img img {

        height: auto;

        max-height: 99999px;

        width: 100%;

        border-radius: 10px; }

    .section-home.home-news .home-news-wrap .news-item .news-content .hnw-desc .more {

      color: #95b700; }



/*==================================================

6. SUBSCRIBE

==================================================*/

.section-subscribe {

  position: relative;

  padding: 20px 20px;

  overflow: hidden; }

  .section-subscribe .subcontainer {

    z-index: 1;

    position: relative; }

    .section-subscribe .subcontainer .textsub {

      text-align: center; }

    .section-subscribe .subcontainer .section-title {

      font-weight: 600;

      text-align: center;

      font-size: 18px;

      margin-bottom: 5px; }

    .section-subscribe .subcontainer .submitsub {

      background-color: #95b700;

      position: absolute;

      color: #ffffff;

      font-size: 18px;

      border: 1px solid #95b700;

      -webkit-border-radius: 100%;

      -moz-border-radius: 100%;

      border-radius: 100%;

      padding: 4px 8px 0px 10px;

      right: 30px;

      top: 11px;

      cursor: pointer;

      width: 28px;

      height: 28px; }

  .section-subscribe .bg-subscribe {

    position: absolute;

    top: 0px;

    left: 0px;

    height: 100%;

    width: 100%;

    opacity: 0.2; }

  .section-subscribe .bg-subscribe img {

    width: 100%;

    height: auto;

    max-height: 999999px; }

  .section-subscribe .mail-subscribe-box {

    position: relative;

    padding-bottom: 35px;

    margin-top: 10px;

    padding: 0px 20px; }

  .section-subscribe .mail-subscribe-box input {

    color: #303030;

    border: 1px solid #95b700;

    height: 50px;

    background: #ffffff;

    border-radius: 90px;

    margin-bottom: 0px;

    padding: 10px 50px 10px 20px;

    box-sizing: border-box; }

  .section-subscribe .mail-subscribe-box i {

    position: absolute;

    color: #95b700;

    font-size: 18px;

    border: 1px solid #95b700;

    -webkit-border-radius: 100%;

    -moz-border-radius: 100%;

    border-radius: 100%;

    padding: 4px 8px 4px 10px;

    right: 30px;

    top: 11px;

    cursor: pointer;

    width: 28px;

    height: 28px; }



/* ---------------------------------------------------

7. RECIPE LIST

----------------------------------------------------- */

.list-section {

  margin-top: 0px;

  margin-bottom: 0px;

  padding: 0px 0px;

  background-color: #ffffff; }



.lrc-item:nth-child(even) {

  background-color: #f9f9f9; }



.wrap-list-rc .lrc-item {

  border-bottom: 1px solid #ddd;

  padding: 15px 15px; }

  .wrap-list-rc .lrc-item .lrc-content {

    position: relative;

    width: 100%;

    padding-left: 85px;

    min-height: 70px; }

    .wrap-list-rc .lrc-item .lrc-content .lrc-img {

      width: 80px;

      position: absolute;

      top: 5px;

      left: 0px;

      overflow: hidden;

      height: 100%; }

      .wrap-list-rc .lrc-item .lrc-content .lrc-img img {

        height: auto;

        max-height: 99999px;

        width: 100%;

        -webkit-border-radius: 5px;

        -moz-border-radius: 5px;

        border-radius: 5px; }

.wrap-list-rc .lrc-item .lrc-content .lrc-desc  {

  display: table-cell;

  vertical-align: middle;

  height: 70px;

	width: 90%;

}

    .wrap-list-rc .lrc-item .lrc-content .lrc-desc .lrc-title {

      font-weight: 600; }

.wrap-list-rc .lrc-item .lrc-content .lrc-desc .lrc-text {

  width: 95%; }

    .wrap-list-rc .lrc-item .lrc-content .lrc-desc .more {

      color: #95b700; }

  .wrap-list-rc .lrc-item .lrc-button {

    color: #7b7b7b;

    max-width: 100%;

    margin: 10px auto 0px; }

    .wrap-list-rc .lrc-item .lrc-button .lrcb-left {

      float: left;

      width: 100%; }

      .wrap-list-rc .lrc-item .lrc-button .lrcb-left .lhc {

        padding-right: 8px; }

      .wrap-list-rc .lrc-item .lrc-button .lrcb-left .svg-inline--fa {

        font-size: 14px;

        padding-right: 0px;

        color: #7b7b7b; }

    .wrap-list-rc .lrc-item .lrc-button .lrcb-right {

      float: left;

      width: 50%; }



/* ---------------------------------------------------

8. FOOD RECIPE PAGE

----------------------------------------------------- */

.wrap-food-recipe .tab-detail-rcp {

  padding: 0px 0px; }

.wrap-food-recipe .recipe-description {

  padding: 15px 15px; }

  .wrap-food-recipe .recipe-description ul.list {

    padding: 0px 0px 0px 15px;

    margin-bottom: 10px 0px; }

  .wrap-food-recipe .recipe-description ul.list.list-number {

    list-style: binary; }

  .wrap-food-recipe .recipe-description .recp-heading {

    font-weight: 600; }

  .wrap-food-recipe .recipe-description .recp-detail {

    margin-bottom: 15px;

    padding-bottom: 0px;

    border-bottom: 0px solid #dee2e6; }

  .wrap-food-recipe .recipe-description .recp-directions {

    margin-bottom: 15px;

    padding-bottom: 0px;

    border-bottom: 0px solid #dee2e6; }

  .wrap-food-recipe .recipe-description .recp-ingredients {

    margin-bottom: 15px;

    padding-bottom: 0px;

    border-bottom: 0px solid #dee2e6; }

.wrap-food-recipe .heading-page {

  height: auto;

  font-size: 16px; }

.wrap-food-recipe .image-favourite {

  position: relative; }

.wrap-food-recipe #food-recipe-image {

  margin-bottom: 0px;

  background-color: #f9f9f9; }

  .wrap-food-recipe #food-recipe-image .pgp-img img {

    width: 100%;

    height: auto; }

  .wrap-food-recipe #food-recipe-image .slick-dots {

    position: absolute;

    width: 100%;

    bottom: 0px;

    left: 0px;

    z-index: 3; }

    .wrap-food-recipe #food-recipe-image .slick-dots li button {

      background-color: #ffffff; }



.add-favourite {

  position: absolute;

  top: 15px;

  right: 15px;

  width: 50px;

  height: 50px; }

  .add-favourite .awl-btn {

    width: 45px;

    height: 45px;

    -webkit-border-radius: 100%;

    -moz-border-radius: 100%;

    border-radius: 100%;

    display: table;

    background-color: #ffffff;

    border: 1px solid #f8f8f8;

    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);

    -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);

    box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.21);

    cursor: pointer; }

  .add-favourite .awl-btn .awl-btn-icon {

    display: table-cell;

    vertical-align: middle;

    font-size: 20px;

    text-align: center;

    color: #dddddd; }



.add-favourite .awl-btn.highlight .awl-btn-icon {

  color: #df0000; }



.rd-tab .tab-pane {

  padding: 15px 0px; }



.tab-comment {

  padding: 0px 0px; }

  .tab-comment .add-new-comment {

    margin-top: 0px;

    margin-bottom: 15px; }

    .tab-comment .add-new-comment .input.your-name {

      width: 100%;

      margin-bottom: 5px;

      padding: 5px 5px; }

    .tab-comment .add-new-comment .input.your-msg {

      width: 100%;

      margin-bottom: 10px;

      padding: 5px 5px;

      height: 70px;

      border: 1px solid #dee2e6; }

    .tab-comment .add-new-comment .theme-button.send-msg {

      border: 0px solid #333333;

      padding: 8px 10px;

      -webkit-border-radius: 0px;

      -moz-border-radius: 0px;

      border-radius: 0px; }

  .tab-comment .comment-list .section-comment {

    position: relative;

    padding-left: 40px;

    padding-bottom: 10px; }

    .tab-comment .comment-list .section-comment .comment-view-body {

      background-color: #fafafa;

      border: 1px solid #dee2e6;

      padding: 10px 10px; }

      .tab-comment .comment-list .section-comment .comment-view-body .cm-row .cm-img {

        overflow: hidden;

        width: 30px;

        height: 30px;

        -webkit-border-radius: 100%;

        -moz-border-radius: 100%;

        border-radius: 100%;

        position: absolute;

        left: 0px;

        top: 5px; }

      .tab-comment .comment-list .section-comment .comment-view-body .cm-row .cm-comment .cmc-heading {

        margin-bottom: 5px; }

        .tab-comment .comment-list .section-comment .comment-view-body .cm-row .cm-comment .cmc-heading .cm-hour {

          font-size: 12px;

          padding-top: 2px;

          margin-bottom: 0px;

          color: #949494; }



/* ---------------------------------------------------

9. AUTHOR

----------------------------------------------------- */

.author-list-section {

  margin-top: 0px;

  margin-bottom: 0px;

  padding: 0px 0px;

  background-color: #ffffff; }

  .author-list-section .lrc-item:nth-child(even) {

    background-color: #f9f9f9; }

  .author-list-section .wrap-list-rc .lrc-item {

    border-bottom: 1px solid #ddd;

    padding: 15px 15px; }

    .author-list-section .wrap-list-rc .lrc-item .lrc-content {

      position: relative;

      width: 100%;

      padding-left: 60px;

      min-height: 60px; }

      .author-list-section .wrap-list-rc .lrc-item .lrc-content .lrc-img {

        width: 80px;

        position: absolute;

        top: 5px;

        left: 0px;

        -webkit-border-radius: 90%;

        -moz-border-radius: 90%;

        border-radius: 90%;

        overflow: hidden;

        width: 50px;

        height: 50px; }

        .author-list-section .wrap-list-rc .lrc-item .lrc-content .lrc-img img {

          height: auto;

          max-height: 99999px;

          width: 100%; }

      .author-list-section .wrap-list-rc .lrc-item .lrc-content .lrc-desc .lrc-title {

        font-weight: 600;

        color: #95b700; }

      .author-list-section .wrap-list-rc .lrc-item .lrc-content .lrc-desc .more {

        color: #95b700; }

    .author-list-section .wrap-list-rc .lrc-item .lrc-button {

      color: #7b7b7b;

      max-width: 100%;

      margin: 3px auto 0px; }

      .author-list-section .wrap-list-rc .lrc-item .lrc-button .lrcb-left {

        float: left;

        width: 100%; }

        .author-list-section .wrap-list-rc .lrc-item .lrc-button .lrcb-left .lhc {

          padding-right: 8px; }

        .author-list-section .wrap-list-rc .lrc-item .lrc-button .lrcb-left .svg-inline--fa {

          font-size: 14px;

          padding-right: 0px;

          color: #7b7b7b; }

      .author-list-section .wrap-list-rc .lrc-item .lrc-button .lrcb-right {

        float: left;

        width: 50%; }



/* ---------------------------------------------------

10. SETTING

----------------------------------------------------- */

.setting-section {

  padding: 25px 15px; }

  .setting-section .line {

    margin: 20px 0px; }

  .setting-section .submit-btn {

    margin-top: 20px;

    margin-bottom: 20px; }

  .setting-section .form-group {

    margin-bottom: 15px; }

  .setting-section .theme-button {

    padding: 10px 15px;

    border: 0px solid #000000;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px; }

  .setting-section .stname {

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 10px; }

  .setting-section .avatar-photo {

    margin-bottom: 20px; }

    .setting-section .avatar-photo .upload-photo-text {

      display: block; }

    .setting-section .avatar-photo .upload-photo-text {

      margin: 10px 0px 0px; }

    .setting-section .avatar-photo .profile-img {

      width: 100px;

      height: 100px;

      overflow: hidden;

      -webkit-border-radius: 90%;

      -moz-border-radius: 90%;

      border-radius: 90%; }

      .setting-section .avatar-photo .profile-img img {

        width: 100%;

        height: 100%; }



/* ---------------------------------------------------

11. FEEDBACK

----------------------------------------------------- */

.feedback-section {

  padding: 25px 15px; }

  .feedback-section .fb-text {

    margin-bottom: 20px; }

  .feedback-section .submit-btn {

    margin-top: 20px;

    margin-bottom: 20px; }

  .feedback-section .form-group {

    margin-bottom: 15px; }

  .feedback-section .theme-button {

    padding: 10px 15px;

    border: 0px solid #000000;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px; }

  .feedback-section .stname {

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 10px; }

  .feedback-section .form-check-label a {

    color: #004a99;

    text-decoration: none; }

  .feedback-section .form-check-label a:hover {

    color: #004a99;

    text-decoration: underline; }



/* ---------------------------------------------------

12. NEW RECIPE 

----------------------------------------------------- */

.new-recipe-section {

  padding: 25px 15px; }

  .new-recipe-section .fb-text {

    margin-bottom: 25px; }

  .new-recipe-section .submit-btn {

    margin-top: 20px;

    margin-bottom: 20px; }

  .new-recipe-section .form-group {

    margin-bottom: 15px; }

  .new-recipe-section .theme-button {

    padding: 10px 15px;

    border: 0px solid #000000;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    margin-top: 10px; }

  .new-recipe-section .stname {

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 10px; }

  .new-recipe-section .form-check-label a {

    color: #004a99;

    text-decoration: none; }

  .new-recipe-section .form-check-label a:hover {

    color: #004a99;

    text-decoration: underline; }



/* ---------------------------------------------------

13. LOGIN

----------------------------------------------------- */

.login-section {

  padding: 25px 15px; }

  .login-section .wrap-line-or {

    margin: 30px 0px; }

  .login-section .or-line {

    position: relative; }

    .login-section .or-line .ol-or {

      display: block;

      text-align: center;

      background: #ffffff;

      width: 40px;

      margin: 0 auto;

      color: #9e9e9e;

      position: relative;

      z-index: 1;

      font-size: 12px; }

    .login-section .or-line .ol-line {

      height: 1px;

      width: 100%;

      background-color: #9e9e9e;

      position: absolute;

      top: 10px;

      left: 0px;

      z-index: 0; }

  .login-section .stt-form {

    max-width: 300px;

    margin: 0 auto; }

  .login-section .fb-text-heading {

    font-size: 24px;

    font-weight: 600;

    margin-bottom: 30px;

    text-align: center;

    color: #95b700;

    margin-top: 10px; }

  .login-section .submit-btn {

    margin-top: 30px;

    margin-bottom: 20px;

    text-align: center; }

  .login-section .form-group {

    margin-bottom: 15px; }

  .login-section .theme-button {

    padding: 10px 20px;

    border: 0px solid #000000;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px; }

  .login-section .stname {

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 10px; }

  .login-section .form-check-label a {

    color: #004a99;

    text-decoration: none; }

  .login-section .form-check-label a:hover {

    color: #004a99;

    text-decoration: underline; }

  .login-section .row-forgot {

    margin: 20px 0px;

    text-align: center; }

    .login-section .row-forgot a {

      color: #004a99; }

  .login-section .sign-in-sosmed {

    width: 130px;

    margin: 0px auto 0px; }

    .login-section .sign-in-sosmed .sign-in-icon {

      width: 45px;

      height: 45px;

      -webkit-border-radius: 100%;

      -moz-border-radius: 100%;

      border-radius: 100%;

      display: table;

      color: #ffffff;

      text-align: center;

      float: left;

      margin: 0px 10px;

      cursor: pointer; }

    .login-section .sign-in-sosmed .sign-in-icon.sii-facebook {

      background-color: #2f7abc; }

    .login-section .sign-in-sosmed .sign-in-icon.sii-twitter {

      background-color: #00bbed; }

    .login-section .sign-in-sosmed .sign-in-icon .fa,

    .login-section .sign-in-sosmed .sign-in-icon .fab,

    .login-section .sign-in-sosmed .sign-in-icon .fas,

    .login-section .sign-in-sosmed .sign-in-icon .fal,

    .login-section .sign-in-sosmed .sign-in-icon .far,

    .login-section .sign-in-sosmed .icon-centerxy {

      display: table-cell;

      vertical-align: middle;

      font-size: 15px; }



/* ---------------------------------------------------

14. REGISTER

----------------------------------------------------- */

.register-section {

  padding: 25px 15px; }

  .register-section .form-check {

    text-align: center;

    margin-top: 20px; }

  .register-section .fb-text {

    text-align: center;

    margin-bottom: 20px; }

  .register-section .fb-text-heading {

    font-size: 24px;

    font-weight: 600;

    margin-bottom: 10px;

    text-align: center;

    color: #95b700;

    margin-top: 10px; }

  .register-section .submit-btn {

    margin-top: 30px;

    margin-bottom: 20px;

    text-align: center; }

  .register-section .form-group {

    margin-bottom: 15px; }

  .register-section .theme-button {

    padding: 10px 15px;

    border: 0px solid #000000;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    margin: 0px 2px; }

  .register-section .stname {

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 10px; }

  .register-section .form-check-label a {

    color: #004a99;

    text-decoration: none; }

  .register-section .form-check-label a:hover {

    color: #004a99;

    text-decoration: underline; }

  .register-section .row-forgot {

    text-align: center;

    margin: 20px 0px; }

    .register-section .row-forgot a {

      color: #004a99; }



/* ---------------------------------------------------

15. PAGINATION

----------------------------------------------------- */

.wrap-pagination {

  width: 100%;

  text-align: center; }

  .wrap-pagination .page-link {

    color: #212529; }

  .wrap-pagination .page-item.active .page-link {

    background-color: #95b700;

    border-color: #95b700;

    color: #ffffff; }

  .wrap-pagination .pagination {

    margin-bottom: 0px;

    display: table;

    width: 100%;

    padding: 15px 15px; }

    .wrap-pagination .pagination .page-item {

      width: auto;

      display: inline-block; }



/* ---------------------------------------------------

16. GALLERY

----------------------------------------------------- */

.gallery-section {

  padding: 15px 15px;

  margin-bottom: 15px; }

  .gallery-section .row-filter {

    margin-bottom: 5px; }

  .gallery-section .row-gallery {

    margin-left: -5px;

    margin-right: -5px; }

  .gallery-section .gall-row {

    width: 100%; }

  .gallery-section .gall-row-filter {

    width: 100%; }

  .gallery-section .gall-col {

    width: 50%;

    float: left;

    padding: 5px 5px; }

  .gallery-section .wrap-gallery img {

    width: 100%;

    height: 100%;

    border-radius: 10px; }

  .gallery-section .col {

    padding: 3px;

    margin: 0; }

  .gallery-section .filter-gallery {

    text-align: center; }

  .gallery-section .filter-button {

    color: #95b700;

    background: transparent;

    border: 0px solid #ffffff;

    padding: 10px 10px;

    font-weight: 600;

    margin-bottom: 5px;

    border: 1px solid #cecece; }

  .gallery-section .filter-button.active {

    color: #708a00; }

  .gallery-section .gallery-img-box,

  .gallery-section .gallery-img-box * {

    -webkit-transition: all 0.5s ease-in-out;

    -moz-transition: all 0.5s ease-in-out;

    -o-transition: all 0.5s ease-in-out;

    -ms-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out; }

  .gallery-section .gallery-img-box.gallery-hidden {

    display: none; }



/* ---------------------------------------------------

17. NEWS LIST

----------------------------------------------------- */

.section-news-list .home-news-wrap {

  padding: 15px 15px 0px; }

  .section-news-list .home-news-wrap .news-item {

    border-bottom: 1px solid #ddd;

    padding-bottom: 15px;

    margin-bottom: 15px; }

    .section-news-list .home-news-wrap .news-item .hnw-title {

      font-weight: 600; }

    .section-news-list .home-news-wrap .news-item .news-content {

      position: relative;

      width: 100%;

      padding-left: 120px;

      min-height: 70px; }

      .section-news-list .home-news-wrap .news-item .news-content .hnw-img {

        width: 100px;

        position: absolute;

        top: 0px;

        left: 0px;

        overflow: hidden;

        height: 100%; }

        .section-news-list .home-news-wrap .news-item .news-content .hnw-img img {

          height: auto;

          max-height: 99999px;

          width: 100%; }

      .section-news-list .home-news-wrap .news-item .news-content .hnw-desc .more {

        color: #95b700; }



.news-list-page-section .wrap-pagination .pagination {

  padding: 0px 15px 15px; }



/* ---------------------------------------------------

18. FAVORITES

----------------------------------------------------- */

.favorites .lrc-content {

  padding-right: 35px; }

.favorites .add-favourite {

	width: 60px;

	height: 30px;

	right: -15px;

	top: 22px;

}

  .favorites .add-favourite .awl-btn {

    height: 30px;

    width: 60px;

    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

    border: 1px solid #ddd; }

  .favorites .add-favourite .svg-inline--fa {

    font-size: 16px; }



/* ---------------------------------------------------

19. NEWS

----------------------------------------------------- */

.section-news-page {

  padding: 15px 15px; }

  .section-news-page .news-content {

    margin-top: 10px; }

  .section-news-page .tab-comment {

    margin-top: 20px; }



/* ---------------------------------------------------

20. PROFILE

----------------------------------------------------- */

.section-profile {

  position: relative; }

  .section-profile .wrap-pro {

    position: relative;

    overflow: visible; }

  .section-profile .cf-heading {

    font-weight: 600;

    font-size: 18px;

    text-align: center;

    margin: 30px 0px 10px; }

  .section-profile .banner-bg {

    height: 100px; }

    .section-profile .banner-bg img {

      width: 100%;

      height: auto;

      max-height: 99999999px;

      margin-top: -30px; }

  .section-profile .photo-profile {

    padding: 0px 15px;

    margin-top: -70px;

    text-align: center; }

    .section-profile .photo-profile img {

      height: 100px;

      overflow: hidden;

      -webkit-border-radius: 100%;

      -moz-border-radius: 100%;

      border-radius: 100%;

      border: 5px solid #fff; }

  .section-profile .proname {

    font-weight: 600;

    font-size: 18px;

    text-align: center;

    margin: 10px 0px 0px;

    color: #95b700; }

  .section-profile .proname-info {

    text-align: center; }

  .section-profile .pro-des {

    padding: 20px 0px 10px;

    text-align: center; }

  .section-profile .line {

    margin: 15px 0px; }

  .section-profile .content-from .lrc-item:nth-child(even) {

    background-color: #f9f9f9; }

  .section-profile .content-from .wrap-list-rc .lrc-item {

    border-bottom: 1px solid #ddd;

    padding: 15px 15px; }

    .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content {

      position: relative;

      width: 100%;

      padding-left: 90px;

      min-height: 70px; }

      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content .lrc-img {

        width: 80px;

        position: absolute;

        top: 5px;

        left: 0px;

        overflow: hidden;

        height: 100%; }

        .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content .lrc-img img {

          height: auto;

          max-height: 99999px;

          width: 100%;

          -webkit-border-radius: 5px;

          -moz-border-radius: 5px;

          border-radius: 5px; }

      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content .lrc-desc .lrc-title {

        font-weight: 600; }

      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-content .lrc-desc .more {

        color: #95b700; }

    .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button {

      color: #7b7b7b;

      max-width: 100%;

      margin: 10px auto 0px; }

      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button .lrcb-left {

        float: left;

        width: 100%; }

        .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button .lrcb-left .lhc {

          padding-right: 8px; }

        .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button .lrcb-left .svg-inline--fa {

          font-size: 14px;

          padding-right: 0px;

          color: #7b7b7b; }

      .section-profile .content-from .wrap-list-rc .lrc-item .lrc-button .lrcb-right {

        float: left;

        width: 50%; }

  .section-profile .socmed {

    text-align: center;

    width: 100%;

    margin-top: 10px; }

    .section-profile .socmed .socmed-line {

      display: inline-block; }

      .section-profile .socmed .socmed-line .socmed-item {

        width: 25px;

        height: 25px;

        display: table;

        text-align: center;

        color: #ffffff;

        background-color: #95b700;

        -webkit-border-radius: 90%;

        -moz-border-radius: 90%;

        border-radius: 90%;

        font-size: 10px;

        padding: 0px 0px; }

        .section-profile .socmed .socmed-line .socmed-item .si-icon {

          display: table-cell;

          vertical-align: middle; }

  .section-profile .probox {

    background-color: #f9f9f9;

    margin: 20px -15px;

    border-top: 1px solid #dfdfdf;

    border-bottom: 1px solid #dfdfdf; }

    .section-profile .probox .bx-col {

      width: 33.33%;

      float: left;

      text-align: center;

      height: 80px;

      display: table; }

      .section-profile .probox .bx-col .bx-col-in {

        display: table-cell;

        vertical-align: middle; }

  .section-profile .border-center {

    border-left: 1px solid #dfdfdf;

    border-right: 1px solid #dfdfdf; }

  .section-profile .count {

    color: #95b700;

    font-weight: 600;

    font-size: 18px; }



/*==================================================

21. 404 PAGE

==================================================*/

.error-page {

  text-align: center;

  width: 100%;

  padding-bottom: 100%;

  height: 0px;

  position: relative;

  height: calc( 100vh - 156px); }

  .error-page h1 {

    margin: 0px 0px;

    font-size: 58px;

    font-weight: 600; }

  .error-page .in-error-page {

    width: 100%;

    height: 100%;

    position: absolute;

    display: table; }

  .error-page .in-error-page .in-in-error-page {

    display: table-cell;

    vertical-align: middle;

    text-align: center; }



/* ---------------------------------------------------

22. FOOTER

----------------------------------------------------- */

.footer {

  padding: 20px 35px;

  height: 100px;

  background-color: #95b700;

  text-align: center;

  color: #ffffff; }

  .footer .footer-heading {

    font-weight: 600;

    margin-bottom: 10px; }

  .footer .socmed {

    text-align: center;

    width: 100%; }

    .footer .socmed .socmed-line {

      display: inline-block; }

      .footer .socmed .socmed-line .socmed-item {

        width: 30px;

        height: 30px;

        display: table;

        text-align: center;

        color: #95b700;

        background-color: #ffffff;

        -webkit-border-radius: 90%;

        -moz-border-radius: 90%;

        border-radius: 90%;

        font-size: 16px;

        padding: 0px 0px; }

        .footer .socmed .socmed-line .socmed-item .si-icon {

          display: table-cell;

          vertical-align: middle;

          color: #95b700; }



/*==================================================

23. PREVIEW

==================================================*/

body.preview {

  background-color: #ffffff;

  background-size: 120% auto; }

  body.preview .container {

    max-width: 1300px; }

  body.preview .wrap-qr {

    margin-top: 20px; }

  body.preview .description {

    margin: 10px auto 30px;

    text-align: justify;

    padding: 0px 0px 0px 10px; }

  body.preview .your-mobile {

    text-align: center;

    font-size: 16px;

    max-width: 300px;

    margin: 20px auto 0px; }

  body.preview .container {

    position: relative;

    z-index: 2; }

  body.preview .here {

    background-color: #95b700;

    color: #ffffff;

    padding: 5px 15px;

    -webkit-border-radius: 90px;

    -moz-border-radius: 90px;

    border-radius: 90px;

    display: inline-block;

    margin: 10px; }

  body.preview .pr-bg {

    position: absolute;

    top: 0px;

    left: 0px;

    z-index: 0;

    width: 100%; }

    body.preview .pr-bg img {

      width: 100%;

      height: auto; }

  body.preview .wrapper {

    max-width: 953px;

    margin: 50px auto; }

  body.preview .pr-title {

    background: #fff;

    display: inline-block;

    padding: 0px 20px;

    font-size: 40px;

    font-weight: 800;

    color: #95b700; }

  body.preview .pr-tagline {

    background: #fff;

    display: inline-block;

    font-size: 27px; }

  body.preview .content-left {

    max-width: 410px;

    float: left; }

  body.preview .content-left .mobileframe {

    float: left;

    position: relative;

    border-radius: 30px;

    border-top: 5px solid #ffffff;

    border-right: 5px solid #ffffff;

    border-bottom: 5px solid #ffffff;

    border-left: 5px solid #ffffff;

    overflow: hidden;

    -webkit-box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.5);

    -moz-box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.5);

    box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.5); }

  body.preview .buy-now .bn {

    background: #95b700;

    color: #ffffff;

    font-weight: 600;

    padding: 10px 30px;

    display: inline-block;

    margin: 20px 0px 0px;

    border-radius: 90px;

    cursor: pointer; }

  body.preview .buy-now .bn:hover {

    background-color: #708a00; }

  body.preview .content-left .mobileframe .preview-mobile-frame {

    background-color: #ffffff;

    overflow: hidden; }

  body.preview .content-left .mobileframe,

  body.preview .content-left .mobileframe .mobile-frame-bg,

  body.preview .content-left .mobileframe .preview-mobile-frame #previewFrame,

  body.preview .content-left .mobileframe .preview-mobile-frame {

    height: 700px;

    width: 369px;

    box-sizing: unset; }

  body.preview .content-left .mobileframe .preview-mobile-frame #previewFrame {

    position: relative;

    margin: 0px;

    border: none;

    background: none;

    overflow-y: scroll;

    overflow-x: hidden; }

  body.preview .content-right {

    float: right;

    text-align: center;

    width: 488px; }

  body.preview .content-right .in-r {

    width: 100%;

    text-align: center;

    margin-top: 30px; }

  body.preview .content-right h1 {

    font-weight: 600;

    margin-bottom: 0px; }

  body.preview .content-right p {

    margin-bottom: 40px; }

  body.preview .themestyle {

    max-width: 60px;

    float: left; }

    body.preview .themestyle .iframebutton {

      cursor: pointer;

      width: 30px;

      height: 30px;

      display: inline-block;

      -webkit-border-radius: 90px;

      -moz-border-radius: 90px;

      border-radius: 90px;

      border: 2px solid #ffffff; }

    body.preview .themestyle #preview-red {

      background-color: #b70021; }

    body.preview .themestyle #preview-green {

      background-color: #95b700; }

    body.preview .themestyle #preview-orange {

      background-color: #dda900; }

    body.preview .themestyle #preview-blue {

      background-color: #00a2dd; }

    body.preview .themestyle #preview-blue-sea {

      background-color: #4200ff; }

    body.preview .themestyle #preview-green-leaf {

      background-color: #2e8843; }

    body.preview .themestyle #preview-purple {

      background-color: #7d17d3; }

    body.preview .themestyle #preview-black {

      background-color: #000000; }

    body.preview .themestyle #preview-brown {

      background-color: #825200; }

    body.preview .themestyle #preview-pink {

      background-color: #c82872; }

    body.preview .themestyle .ctc {

      margin: 60px 0px 10px;

      font-weight: 600;

      font-size: 12px; }



@media only screen and (max-width: 450px) {

  .content-left .mobileframe,

  .content-left .mobileframe .mobile-frame-bg,

  .content-left .mobileframe .preview-mobile-frame #previewFrame,

  .content-left .mobileframe .preview-mobile-frame {

    height: 700px;

    width: 100%;

    box-sizing: unset; } }

body.preview.foodkuy-red .pr-title {

  color: #b70021; }



body.preview.foodkuy-orange .pr-title {

  color: #dda900; }



body.preview.foodkuy-blue .pr-title {

  color: #00a2dd; }



body.preview.foodkuy-blue-sea .pr-title {

  color: #4200ff; }



body.preview.foodkuy-green-leaf .pr-title {

  color: #2e8843; }



body.preview.foodkuy-purple .pr-title {

  color: #7d17d3; }



body.preview.foodkuy-black .pr-title {

  color: #000000; }



body.preview.foodkuy-brown .pr-title {

  color: #825200; }



body.preview.foodkuy-pink .pr-title {

  color: #c82872; }



@media only screen and (max-width: 767px) {

  body.preview .themestyle {

    width: 100% !important;

    position: relative !important; }

  body.preview .wrapper {

    margin-top: 0px !important;

    padding-left: 0px !important; }

    body.preview .wrapper .ctc {

      margin-top: 0px !important; }

    body.preview .wrapper .description {

      padding: 0px 0px !important; }

  body.preview .content-left,

  body.preview .content-right {

    width: 100%;

    margin: 0 auto;

    float: unset; }

  body.preview .content-left {

    padding-right: 15px !important;

    padding-left: 15px !important;

    max-width: 410px;

    margin: 0 auto;

    float: unset;

    display: block; }

    body.preview .content-left .mobileframe {

      width: 100% !important;

      box-sizing: border-box; }

  body.preview .content-right {

    padding-left: 0px !important;

    padding-right: 0px !important;

    float: left;

    width: 100% !important; }

  body.preview .description {

    width: 100%;

    margin: 0px 0px;

    max-width: 100%; }

  body.preview .content-right .in-r {

    text-align: left; }

  body.preview .pr-title {

    padding: 0px 0px 0px 0px;

    width: 100%;

    text-align: center; }

  body.preview .your-mobile {

    text-align: center;

    max-width: 100%; }

  body.preview .pr-tagline {

    line-height: 1.2;

    margin-bottom: 20px;

    width: 100%;

    text-align: center; }

  body.preview .content-right .in-in-r {

    margin-top: 30px; }

  body.preview .themestyle {

    max-width: 100%;

    width: 100%;

    text-align: center;

    margin-bottom: 20px;

    float: left;

    margin-top: 20px;

    padding-left: 0px !important; }

  body.preview .wrap-qr {

    text-align: center; } }

@media only screen and (max-width: 410px) {

  body.preview .content-left .mobileframe {

    width: 100% !important;

    box-sizing: border-box; }

    body.preview .content-left .mobileframe .preview-mobile-frame {

      width: 100% !important; }

      body.preview .content-left .mobileframe .preview-mobile-frame #previewFrame {

        width: 100%; } }

@media only screen and (max-width: 956px) {

  body.preview .wrapper {

    max-width: 99999px;

    margin: 50px auto;

    width: 100%;

    position: relative;

    padding-left: 50px; }

    body.preview .wrapper .content-right {

      padding: 0px 20px 0px 30px;

      width: calc( 100% - 379px ); }

  body.preview .themestyle {

    width: 50px;

    position: absolute;

    padding-left: 5px;

    left: 0px;

    top: 0px; }

  body.preview .content-left .mobileframe {

    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

    border-top: 5px solid #dbdbdb;

    border-right: 5px solid #dbdbdb;

    border-bottom: 5px solid #dbdbdb;

    border-left: 5px solid #dbdbdb; } }



/*# sourceMappingURL=theme.css.map */