/*===============================================*/
/* 01. GENERAL	 						    	 */
/*===============================================*/

.md {
  --f7-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#fix-f7 {
  height: 50px;
}

img {
  max-width: 100%;
}

.title-navbar-transparent {
  opacity: 1!important;
}

.md .tabbar-label {
  font-size: 10px;
  padding-top: 3px;
}

.newsman-object-fit {
  position: relative;
}

.newsman-object-fit img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.text-semibold {
  font-weight: 600;
}

.newsman-notification {
  position: relative;
}

.newsman-notification .badge {
  position: absolute;
  right: 11px;
  top: 10px;
}

.newsman-page-gradient,
.not-found-page-gradient,
.profile-page-gradient {
  background: linear-gradient(to bottom, rgba(18, 8, 16, 0), #120810);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 500px;
  z-index: 2;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  opacity: .6;
}

.homepage-header .navbar,
.newsman-block * {
  z-index: 3;
}

.homepage-header {
  position: relative;
}

.newsman-opacity {
  opacity: .6;
}

.newsman-block {
  padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: 20px;
  margin-top: 20px;
}

.newsman-block.no-border {
  border-bottom: 0px;
}

.newsman-badge a {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  margin-bottom: 5px;
}

.newsman-block-subtitle {
  font-weight: 600;
  margin-top: 3px!important;
}

.newsman-block-content {
  padding-top: 30px;
}

.post-author-extra {
  opacity: .8;
}

/*===============================================*/
/* 02. FULL POST BACKGROUND	    	             */
/*===============================================*/

.post-full-bg {
  position: relative;
}

.post-full-bg .fab > a {
  width: 45px;
  height: 45px;
  background: #e3bf54
}

.post-full-bg .fab > a svg {
  stroke : #202020
}

.post-full-bg .post-content {
  height: 300px;
  background: #1c1c1d;
  border-radius: 10px;
}

.post-author-img {
  width: 45px;
  height: 45px;
  border-radius: 5px;
  flex-shrink: 0;
}

.post-author-img img {
  border-radius: 5px;
}

.post-full-bg .post-content img,
.post-full-bg .post-content {
  border-radius: 10px;
}


.post-content .post-title {
  z-index: 14;
  padding: 20% 20px 20px 20px;
  background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.8) 100%, rgba(0,0,0,0.9) 100%);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*===============================================*/
/* 03. AUTHORS      				    	     */
/*===============================================*/

.author-card-img {
  height: 150px;
  border-radius: 10px;
  background-repeat: no-repeat!important;
  background-size: contain!important;
  background-position: right bottom!important;
}

.author-card-img .badge {
  opacity: .7;
}

/*===============================================*/
/* 04. BLOG LIST 						    	 */
/*===============================================*/

.blog-list {
  padding-bottom: 15px;
  margin-top: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.blog-list:first-child {
  margin-top: 0px;
}

.blog-list:last-child {
  border-bottom: 0px;
  /* padding-bottom: 0px; */
}

.blog-list-img {
  width: 100px;
  height: 75px;
  border-radius: 10px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
}

.blog-list-img img {
  border-radius: 10px;
}

.blog-list-infos {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
}

.blog-list-infos h2 {
  font-size: 19px;
  line-height: 21px;
  font-weight: 600;
}

.blog-list-infos span {
  font-weight: 500;
  /* opacity: .86; */
  font-size: 20px;
}

@media only screen and (min-width: 576px) {
  .blog-list-img {
    width: 150px;
    height: 150px;
  }

  .blog-list-wrapper .blog-list-infos h2 {
    font-size: 18px;
    line-height: 30px;
  }

}

@media only screen and (min-width: 768px) {
  .blog-list-img {
    width: 160px;
    height: 160px;
  }

  .blog-list-wrapper .blog-list-infos h2 {
    font-size: 20px;
    line-height: 32px;
  }
}

/*===============================================*/
/* 05. MASONRY BLOG					    	     */
/*===============================================*/

.masonry-item {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  height: 210px;
  margin-bottom: 10px;
}



.masonry-item img {
  border-radius: 10px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.masonry-item .post-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px 15px 20px 15px;
  font-size: 13px;
  line-height: 20px;
  background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.8) 100%, rgba(0,0,0,0.9) 100%);
}

.masonry-item-single-element .post-title {
  font-size: 14px;
  line-height: 32px;
}
.masonry-item > a {
  z-index: 4;
  height: 100%;
  display: block;
  position: relative;
  min-height: 100%;
}
/*===============================================*/
/* 06. CARD POST 						    	 */
/*===============================================*/

.post-card {
  border-radius: 10px;
}

.post-card-img {
  height: 350px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}


.post-card-img img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.post-card-footer {
  color: #8e8e93;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.post-card-img h3 {
  z-index: 14px;
  padding: 0px 15px 15px;
  background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.8) 100%, rgba(0,0,0,0.9) 100%);
  z-index: 14;
  margin: 0px;
}

/*===============================================*/
/* 07. BIG LIST POST				    	     */
/*===============================================*/

.big-list-post p {
  color: #8e8e93;
}

.big-list-post img {
  border-radius: 10px;
}

.big-list-post h3 {
  font-size: 18px;
}


/*===============================================*/
/* 08. SOCIAL MEDIA					    	     */
/*===============================================*/

.social-media-trends .post-author-img {
  width:65px;
  height: 65px;
  position: relative;
  margin-left: 20px;
  margin-top: 10px;
}

.social-media-trends > div {
  background-color: var(--f7-block-strong-bg-color);
  border-radius: 10px;
  position: relative;
}

.social-media-trends p {
  color: #8e8e93;
}

.post-author-social {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100%;
  line-height: 20px;
}

.social-icon {
  text-align: center;
  line-height: 20px;
  padding: 11px 0;
  width: 18px;
  height: 18px;
}

.bg-color-twitter {
  background: #55acee!important;
}

.bg-color-fb {
  background: #3b5999!important;
}

.bg-color-linkedin {
  background: #0077B5!important;
}

.bg-color-dark {
  background-color: #333 !important;
}

.bg-color-theme {
  background-color: #d02d35 !important;
}

/*===============================================*/
/* 09. SEARCH INPUT					    	     */
/*===============================================*/

.newsman-search {
  position: relative;
}

.newsman-search svg {
  position: absolute;
  left: 10px;
  top: 16px;
  z-index: 4;
}

.input {
  padding: 16px 50px 16px!important;
  width: 100%;
  border-radius: 30px!important;
  background-color: var(--f7-block-strong-bg-color)!important;
}

.tags {
  flex-wrap: wrap;
  margin-top: 22px;
}

.tags .newsman-badge {
  margin-top: 10px;
  margin-right: 10px;
}

.tags .newsman-badge a {
  font-size: 12px;
  padding: 15px 30px;
}

/*===============================================*/
/* 10. POST GRID 						    	 */
/*===============================================*/

.list-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 10px;
}

.post-grid-img {
  height: 200px;
  border-radius: 10px;
}

.post-grid-img img {
  border-radius: 10px;
}

@media only screen and (min-width: 320px) {
  .list-posts-grid {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 0px;
  }
}

@media only screen and (min-width: 360px) {
  .list-posts-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
  }
}

@media only screen and (min-width: 384px) {
  .list-posts-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
  }
}

@media only screen and (min-width: 414px) {
  .list-posts-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
  }
}

@media only screen and (min-width: 576px) {
  .list-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 768px) {
  .list-posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 834px) {
  .list-posts-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*===============================================*/
/* 11. PROFILE PAGE					    	     */
/*===============================================*/

.profile-img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  margin: 0 auto;
}

.profile-img img {
  border-radius: 10px;
}

.profile h2 {
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px
}

.profile .button {
  width: auto;
  margin: 0 auto;
  border-width: 1px
}

.profile-info {
  text-align: center;
}

.profile-info .number {
  font-size: 20px;
  display: block;
  font-weight: 600;
}

.profile-info .number-sub {
  font-size: 16px;
  color: #8e8e93;
}

.list-friends .post-author-img {
  width:65px;
  height: 65px;
  position: relative;
  margin-top: 10px;
}

.list-friends > div {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-left: 0;
}

.list-friends > div:last-child {
  padding-bottom: 0px;
  border-bottom: 0px;
}

.blog-list-wrapper .blog-list:last-child {
  border-bottom: 0px;
}

/*===============================================*/
/* 12. SINGLE PAGE					    	     */
/*===============================================*/

.single-page > img {
  border-radius: 10px;
}

.single-post-content {
  font-size: 15px;
  color: #8e8e93;
}

.single-post-content ol,
.single-post-content ul {
  padding-left: 16px;
}

.single-post-content img {
  border-radius: 10px;
}

.img-with-legend img {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.img-with-legend div {
  background-color: var(--f7-block-strong-bg-color)!important;
  text-align: center;
  position: relative;
  bottom: 5px;
  font-weight: 600;
  font-size: 12px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*===============================================*/
/* 13. 404 PAGE	 						    	 */
/*===============================================*/

.not-found-page-gradient {
  background-color: rgb(41,35,109);
}

.not-found-page-content {
  z-index: 4;
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}

.not-found-page-content img {
  width: 80%;
  display: block;
  margin: 32px auto;
}

.not-found-page-content h1 {
  font-size: 60px;
  margin-bottom: 10px;
  margin-top: 0px
}

.not-found-page-content h2 {
  margin-bottom: 10px;
  margin-top: 0px
}


.not-found-page-content .button {
  width: auto;
  margin: 0 auto;
  border-width: 1px;
  font-weight: 600;
}

.profile-page-gradient {
  background-color: #673ab7;
}

/*===============================================*/
/* 14. BIG LIST SINGLE			    	         */
/*===============================================*/

.big-list-single-post {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.big-list-post > div:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.big-list-single-post p {
  margin-bottom: 0;
  margin-top: 0;
}

.big-list-single-post {
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.page.page-home {
  background-image: url('../img/intro.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.select-language{
  position: absolute;
  top: 43%;
  left: 50%;
  transform:
          translateX(-50%);
}

.select-language a {
  display: block;
  width: 230px;
  background-color: #cc2228;
  text-align: center;
  border-radius: 10px;
  line-height: 50px;
  font-size: 18px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: 1px;
}

.navbar {
  height: 50px;
}
.navbar .navbar-inner {
  background-image: url('../img/headerv2.png');
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  background-color: #d02d35;
}

.menu-close {
  border-radius: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  width: 50px;
  height: 56px;
  line-height: 56px;
  font-size: 18px;
}

.panel-left .block-title{
  margin-bottom: 9px;
}

.panel-left .list {
  margin:0;
}

.lang-list{
  margin-top: 0 !important;
}
.lang-list .item-media img {
  width: 50px;
}

.newsman-block-content.category-detail{
  padding-top: 0;
  margin-top: 0;
}

.newsman-block-content.category-detail .masonry-item {
  border-radius: 0;
  margin-bottom: 0;
  background-position: center;
  background-attachment: fixed;
}
.newsman-block-content.category-detail .masonry-item img{
  border-radius: 0;
}

.newsman-block-content.category-detail .masonry-item.not-image {
  height: auto !important;
}



.newsman-block-content.category-detail .masonry-item.not-image .post-title h2 {
  margin-top: 0;
}

.color-theme-red {
  --f7-theme-color: #901140;
  --f7-theme-color-rgb: 144,17,64;
  --f7-theme-color-shade: #5f0828;
  --f7-theme-color-tint: #c52f67;
}


.color-theme-green {
  --f7-theme-color: #005b2d;
  --f7-theme-color-rgb: 0,91,45;
  --f7-theme-color-shade: #014c26;
  --f7-theme-color-tint: #25714d;
}


.newsman-block-content.category-detail .masonry-item.not-image .post-title{
  margin-top: 0;
  position: relative;
  background-color: #626262;
  background-image: none;
}

.blog-list {
  position: relative;
  overflow: hidden;
}

.blog-list a.streched-link {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
}

.blog-list-infos h2 {
  margin-bottom: 0px;
  margin-top: 0;
  color:var(--f7-theme-color);
}

.blog-list-infos .product-info {
  justify-content:space-between;
  width: 100%;
  max-width: 100%;
  align-items: center;
}

.blog-list.horizontal {
  display: flex;
}
.blog-list.vertical {
  display: block;
  position: relative;
}
.blog-list .cook-time {
  align-items: center;
  font-size: 15px;
  color: #222222;
  font-weight: 400;
}
.blog-list .cook-time svg {
  margin-right: 2px;
  height: 19px;
}
.blog-list.vertical .blog-list-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.blog-list.vertical .blog-list-img img {
  position: relative;
  height: auto;
}
.detail-popup-modal .price,
.detail-sheet-modal  .price{
  font-weight: 600;
  opacity: .86;
  font-size: 24px;
  min-width: 105px;
  text-align: right;
}

.ios .menu-close{
  height: 64px;
  line-height: 64px;
}

.sheet-modal .toolbar+.sheet-modal-inner .page-content{
  padding-top: 0;
}

.md .navbars~*, .md .navbar~* {
  --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-safe-area-top) + -5px);
}

.button{
  border-radius: 0;
}

.color-red {
  --f7-theme-color: #930a3c;
  --f7-theme-color-rgb: 147,10,60;
  --f7-theme-color-shade: #911141;
  --f7-theme-color-tint: #cd306b;
}

.color-green {
  --f7-theme-color: #005b2d;
  --f7-theme-color-rgb: 0,91,45;
  --f7-theme-color-shade: #014c26;
  --f7-theme-color-tint: #25714d;
}

.search-button {
  border-radius: var(--f7-searchbar-in-page-content-border-radius);
  margin: var(--f7-searchbar-in-page-content-margin);
  box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.35);
  font-size: var(--f7-searchbar-input-font-size);
  text-transform: inherit;
}

.blog-list-wrapper > .list {
  margin:0;
  padding:0;
}

.blog-list-wrapper > .list > li {
  padding-bottom: 10px;
  padding-top: 10px;
  margin-top: 0;
  border-bottom: 1px solid #00000026;
}

.blog-list-wrapper > .list > li .blog-list {
  border-bottom:0;
  margin-top:0;
  padding-bottom: 0;
}

.ios {
  --f7-swipeout-button-padding: 0 20px;
}


:root {
  --f7-swipeout-delete-button-bg-color: #d02d35;
}

.demo-icon {
  background: #d02d35;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 14px !important;
}

.danger-title {
  background-color:#d5b566;
  color:#fff;
  padding:5px;
  border-radius: 5px;
  text-align: center;
}

.info-layer {
  position: relative;
  right: 10px;
}

.blog-list.with-info h2{
  padding-right: 40px;
}


.detail-popup-modal p,
.sheet-modal-inner .page-content p {
  font-size: 15px;
}


/* LAST ADDED */
.social-list {
  margin:30px 0 0 0;
  padding:0;
  display: flex;
  justify-content: center;
}
.social-list li{
  display: flex;
  margin-right: 10px;
  justify-content: center;
}

.social-list li a {
  display: flex;
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
a.instagram {
  background:linear-gradient(29.61deg, #f38334 0%, #da2e7d 50.39%, #6b54c6 100%)
}

a.facebook{
  background:#3b5998
}

a.twitter{
  background:#55acee
}

.social-list li:last-child {
  margin-right: 0;
}
.sheet-modal-inner .cook-time{
  min-width: 68px;
}

.detail-popup-modal .block-title-large {
  font-weight: 700 !important;
}

.product-vertical-title {
  margin: 0 0 15px 0;
  color: #d02d35 !important;
  font-weight: bold !important;
  font-size: 22px !important;
}