/* 

SPECIFICATIONS:
- Phone (max-width: 575px, what means less than 576px)
- Larger Phone (min-width: 576px, what means between 576px and 767px)
- Tablet (min-width: 768px, what means between 768px and 991px)
- Smaller Desktop/Laptop (min-width: 992px, what means between 992px and 1200px )
- Desktop (min-width: 1200px, what means 1200px and up)

GUIDELINES:
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

*/

/* dancing-script-regular - latin */
/* do not used anymore
@font-face {
  font-display: swap; 
  font-family: 'Dancing Script';
  font-weight: 400;
  src: url('/fonts/dancing-script-v25-latin- 
 regular.woff2') format('woff2');
}
*/

/* https://modernfontstacks.com */
body {
 color: var(--main-font-color);
 font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; 
 font-weight: normal;
 font-size: 1.2rem !important;
}

h1, h2 {
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif; 
  font-weight: 100 !important;
  text-align:center;
}

/* Adsense modules */

/* mobile */
@media (max-width: 480px) {
	.adense-top1 {
		min-height:200px;
		max-height:200px;
		height:200px;
	}
	.adsense-gblog {
		min-height:315px;
		max-height:315px;
		height:315px;
	}
	ins.adsense-gblog {
		background-image:url("/images/banners/ad-background-1.svg");
	}
	adsense-in-article {
		min-height:315px;
		max-height:315px;
		height:315px;
	}
	ins.adsense-in-article {
		background-image:url("/images/banners/ad-background-1.svg");
	}
	.adsense-instruction,
	.adsense-comment {
		min-height:100px;
		max-height:100px;
		height:100px;
	}
	ins.adsense-instruction,
	ins.adsense-comment {
		background-image:url("/images/banners/ad-background-3.svg");
	}
}

/* tablets */
@media (min-width: 481px) and (max-width: 1024px) {
	.adense-top1 {
		min-height:280px;
		max-height:280px;
		height:280px;
	}
	.adsense-gblog {
		background-image:url("/images/banners/ad-background-3.svg");
		min-height:175px;
		max-height:175px;
		height:175px;
	}
	ins.adsense-gblog {
		background-image:url("/images/banners/ad-background-3.svg");
	}
	.adsense-in-article {
		min-height:175px;
		max-height:175px;
		height:175px;
	}
	ins.adsense-in-article {
		background-image:url("/images/banners/ad-background-3.svg");
	}
	.adsense-instruction,
	.adsense-comment {
		min-height:100px;
		max-height:100px;
		height:100px;
	}
	ins.adsense-instruction,
	ins.adsense-comment {
		background-image:url("/images/banners/ad-background-3.svg");
	}
}

/* desktop */
@media (min-width: 1025px) {
	.adense-top1 {
		min-height:280px;
		max-height:280px;
		height:280px;
	}
	.adsense-gblog {
		min-height:200px;
		max-height:200px;
		height:200px;
	}
	ins.adsense-gblog {
		background-image:url("/images/banners/ad-background-3.svg");
	}
	.adsense-in-article {
		min-height:200px;
		max-height:200px;
		height:200px;
	}
	ins.adsense-in-article {
		background-image:url("/images/banners/ad-background-3.svg");
	}
	.adsense-instruction,
	.adsense-comment {
		min-height:100px;
		max-height:100px;
		height:100px;
	}
	ins.adsense-instruction,
	ins.adsense-comment {
		background-image:url("/images/banners/ad-background-3.svg");
	}
}

.adense-top1, .adsense-gblog, .adsense-comment, .adsense-in-article, .adsense-instruction {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
  overflow: hidden;
}

div.adsense-in-article, div.adsense-instruction, div.adsense-comment, li.adsense-comment {
	border: 1px solid silver;
	border-radius: 10px;
	border-top-right-radius: 0px;
	margin: 10px 0;
	overflow: hidden; 
}

/* CUSTOM GENERIC STYLES */

.border {
  box-shadow: 0px 2px 2px #999, 0px -2px 2px #999;
  border-radius: 2px;
}

.inline-flex {
  display: inline-flex;
}

.no-spacing {
  margin: 0px !important;
  margin-left: 0px !important;
  padding: 0 !important;
}

.center {
  text-align: center;
}

.bck-color2 {
  background-color: var(--main-background-color2) !important;
}

.margin-top-10 {
  margin-top: 10px;
}

.padding-10 {
  padding: 10px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

/* CUSTOMIZE DEFAULT HELIX TEMPLATE */

/* replacements for missing font awesome */

.sp-sign-in .fa-user {
  display:inline-block;
  width:30px;
  height:30px;
  background-image:url("/images/icons/user-login.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

#jlexcomment .jcm-btn-upload {
  background-image:url("/images/icons/icon_camera.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
}

#jlexcomment .jcm-btn-emoticon {
  background-image:url("/images/icons/icon_smiley.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
}

#jlexcomment .auth-facebook button.jcm-u-oauth {
  background-image:url("/images/icons/facebook-round-color-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
}

#jlexcomment .auth-site button.jcm-u-login {
  background-image:url("/images/logos/logo80round.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
}

#jlexcomment .auth-google button.jcm-u-oauth {
  background-image:url("/images/icons/icon_google_circle_gray.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
}

#jlexcomment .auth-twitter button.jcm-u-oauth {
  background-image:url("/images/icons/icon_platform_x.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
  padding:3px;
  background-origin: content-box;
}

.pagination .fa-angle-double-left::after {
  content: "«« "  var(--word-start);
  white-space: nowrap;
}

.pagination .fa-angle-left::after {
  content: "« " var(--word-prev);
  white-space: nowrap;
}

.pagination .fa-angle-right::after {
  content: var(--word-next) " »";
  white-space: nowrap;
}

.pagination .fa-angle-double-right::after {
  content: var(--word-end) " »»" ;
  white-space: nowrap;
}

/* do not display the list of children categories in the blog layout */
.com-content-category-blog.blog .cat-children {
  display:none
}

/** speed up canvas menu animation */
.offcanvas-overlay {
	-webkit-transition: 0.1s !important;
	transition: 0.1s !important;
}

.offcanvas-menu {
	-webkit-transition: all 0.1s !important;
	transition: all 0.1s !important;
}

.offcanvas-menu .menu-toggler::after {
  content: ' ▷ ▷ ' !important;
  font-weight: 800;
  font-size:1.2em;
  color: black;
}

.rating-symbol span.rating-star.active::before ,
.rating-symbol span.rating-star::before {
  content: "★" !important;
  font-size: 24px;
  font-weight: 900;
}

.rating-symbol span.rating-star.active::before  {
  content: "★" !important;
  color: #f6bc00 !important;
}

.article-ratings .rating-symbol span.rating-star:hover:before,
.article-ratings .rating-symbol span.rating-star:hover~span.rating-star:before {
  font-size: 28px;
  color:#ff0000 !important;
}

dbody.ltr .sp-megamenu-parent li.sp-has-child a::after {
  content: "▼";
  float: right;
  margin-left: 7px;
  font-weight: 900;
}

/* display "MENU" under the offcanvas menu burger icon */

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
    margin-left: 0px !important;
}

#offcanvas-toggler {
  flex-direction: column;
  justify-content: center;
}

#offcanvas-toggler::after {
  content: "MENU"; 
  color: var(--main-font-color2);
  line-height: 12px !important;
  font-weight: 400px;
  font-size: 12px  !important;
  height: 12px  !important;
}

/* reduce spaces at the top of the canvas menu */

.offcanvas-menu .offcanvas-inner .sp-module:not(:last-child){margin-bottom:2px}

.offcanvas-menu .offcanvas-inner .header-modules {
  margin-bottom: 0.2rem !important;
}

/* beautify the search result list */

.search-results li {
  clear: both;
}

.search-result-image {
  float: left;
  height: 100px;
  width: 100px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 8px;
}

/* to avoid CLS */
#sp-top-bar div.container {
  height: 38px !important;
  min-height: 38px !important;
  padding: 3px 0 !important;
}

#sp-top-bar {
	padding: 4px 0px !important;
}

.social-icons li {
  width:30px;
  height:30px;
  border: solid silver 1px;
  border-radius: 50%;
  text-align: center;
}

/* icon for scroll-up button */
.sp-scroll-up span.fa-angle-up::after {
    content: "▲";
    font-size: 26px;
}

ul.social-icons>li:not(:last-child) {
    margin-right: 10px !important;
}

.social-icon-custom {
  background-color: white;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
  background-image:url("/images/icons/icon-email.svg");
}

.social-icon-facebook {
  background-color: white;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
  background-image:url("/images/icons/facebook-round-color-icon.svg");
}

.social-icon-pinterest {
  background-color: white;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
  background-image:url("/images/icons/pinterest-round-color-icon.svg");
}

.social-icon-instagram {
  background-color: white;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
  background-image:url("/images/icons/instagram-round-color-icon.svg");
}

.social-icon-youtube {
  background-color: white;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
  background-image:url("/images/icons/youtube-round-color-icon.svg");
}

.social-icon-twitter a::before,
.social-icon-twitter a::after {
  content: "\00a0";
}

.social-icon-twitter {
  overflow: hidden;
  background-color: white;
}

.social-icon-custom a::after,
.social-icon-instagram a::after,
.social-icon-pinterest a::after,
.social-icon-facebook a::after,
.social-icon-youtube a::after {
  content: "\00a0\00a0\00a0\00a0\00a0\00a0";
}

.social-icon-twitter a svg {
  margin-top: 5px !important;
  color: black !important;
}

/* do not wrap rating widget (stars) */
/* do not wrap article social share */
.article-ratings,
.social-share-icon {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* wrap pagination if too long */
.com-content-category-blog__counter {
  float: none !important;
  text-align: center;
}

ul.pagination {
  flex-wrap: wrap !important;
  justify-content: center;
}

/* fix the indent of the  2nd level menu */
ul.menu ul.menu-child { 
  margin-left: 15px !important;
}

/* decrease size of H1,H2 as article title */
.article-details .article-header h1,
.article-details .article-header h2 {
    font-size: 1.7rem
}

/* beautiful module title */
.sp-module h1 {
  border-bottom: 1px solid silver;
  margin-left:10%;
  margin-right:10%;
}

/* beautiful article title */
.article-header h1 {
  border-bottom: 1px solid silver;
  margin-left:10%;
  margin-right:10%;
}

/* adjust color of the last crum and the shadow around breadcrumb */
.breadcrumb {
    --bs-breadcrumb-item-active-color:var(--main-font-color) !important;
    box-shadow: 0 0 3px #999;
}

/* adjust elements in top2 position vertically middle */
#sp-top2 .sp-column {
    display: flex;
    align-items: center;
    justify-content: right;
}

#sp-top2 .jes {
  font-size: 1rem !important;
}

/* display category intro image in very small size */
.category-desc img {
  height: 100px;
  width: auto;
  text-align: left !important;
  float: left; 
  margin: 0px 5px 5px 0px;
  border-radius: 20px;
}

/* reduce space between share social icons in article */
.article-social-share .social-share-icon ul li:not(:last-child) {
    margin-right: 5px !important;
}

/* unnecessary big space on top of the page before content */ 
#sp-main-body {
    padding: 10px 0 !important;
} 

/* reduce padding main content on mobile screen */
.sp-component {
  padding 0 0;
}

/* do not display custom fields in category description */
.com-content-category-blog .category-desc .fields-container {
 display:none;
}

/* do not display custom fields in article full view */
.article-details .fields-container,
.item-page .fields-container {
 display:none;
}

/* remove pin-icon from breadcrumb */
.breadcrumb .float-start {
 display:none;
}

/* customize breadcrumb layout */
.breadcrumb {
  padding: 0.4em 0.4em 0.4em 0.7em;
  background-color: var(--main-background-color2) !important;
}

/* decrease font-size in case of narrow screen */
@media (max-width:480px) {
  .breadcrumb {
    font-size:14px;
  }
  .breadcrumb-item::before {
     padding-right: 0.2em !important;
  }
  .breadcrumb-item {
     padding-left: 0.2em !important;
  }
  ol.breadcrumb {
     padding-left: 0.3em !important;
  }
  .article-details .article-ratings-social-share {
    margin-bottom: 0.5rem !important;
    margin-top: 0.3rem !important;
    padding-bottom: 0.2rem !important;
    padding-top: 0.2rem !important;
  }
}

/* margin between module in main column */
#sp-component .sp-module {
  margin-bottom: 25px;
}

/* align logo + title position to flex layout */
#sp-header .sp-column {
 display: flex;
 align-items: center;
}

/* shift the logo a bit down */
.logo-image {
  _margin-top: 5px;
  _margin-bottom: -30px;
  width: 75px;
  height: 75px;
}

/* decrease a bit the logo padding on the mobile to reduce spacing and shift a bit down to make a overlapping visual effect */
@media(max-width: 767px) {
  #sp-logo {
    padding-left: 5px !important;
  }
}

/* shift a bit logo down to make a overlapping visual effect */
@media(min-width: 767px) {
 .logo-image {
   margin-bottom: -10px;
 }}

@media(min-width: 992px) {
 .logo-image {
   margin-bottom: -20px;
 }}

@media(max-width: 576px) {
 .logo-image {
   margin-bottom: -20px;
   width: 60px !important;
   height: 60px !important;
 }}

/* CUSTOM GBLOG LAYOUT */

/* crop images and scale automatically */
.gblog img {
  object-fit: cover;
  width: 300px; 
  height: 300px;
  max-height: 50vw;
  border-radius:4px;
}

/* decorate layout of the GBlog item */
.gblog.item {
  background-color: white;
  padding: calc(2px + 0.8vw);
  border: 1px solid #d4d4d4;
  box-shadow: 3px 3px 3px rgba(0,0,0,.3);
}
/* on wider screens add a bit more space between GBlog items */
@media (min-width:480px) {
  .gblog.item {
    margin:4px;
  }
}

.gblog.item .gblog.title {
  margin-top:5px;
  line-height: 1.2em;
  height: 2.4em;
  _font-size: 1.1em;
  text-align:center;
  overflow: hidden;
  margin-bottom:0px;
}

/* on thin device decrease a bit font size */
@media (max-width:320px) {
  .gblog.item .gblog.title {
    font-size: 0.8em;
   }
}

.gblog.container {
  margin-top: 5px !important;
 margin-left: 0px !important;
 margin-right: 0px !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
}

.gblog.container {
  margin-top: 5px !important;
}

/* - - - - - - - - ARTICLE - - - - - - - -  */

/* beautify images in article */
img.article-img, .item-page img.caption {
	border-radius: 7px !important;
	border: 1px solid silver;
	margin-top: 10px;
	margin-bottom: 15px;
	margin-left: auto; 
	margin-right: auto;	
        box-shadow: 4px 5px 3px 0px rgba(0, 0, 0, 0.3);
	display: block; 
}

/* customize ordered lists */
*[id^='recipe-instructions'] ol {
  list-style-type: none;
  margin-bottom: 20px !important;
  padding-left: 10px;
}

*[id^='recipe-instructions'] ol li {
  counter-increment: recipe-instructions-counter;
  margin-left: 0px;
  display: table-row;
}

*[id^='recipe-instructions'] ol li::before {
  content: counter(recipe-instructions-counter) ".\00a0";
  margin-right: 5px;
  font-size: 25px;
  line-height: 50px !important;
  color: var(--main-color);
  font-weight: bold;
  display: table-cell;
  text-align: right;
}

/* customizing unordering lists */
*[id^='recipe-ingredients'] ul {	 
  list-style-type: none !important;
  margin-left: 0px;
  padding-left: 10px;
}

*[id^='recipe-ingredients'] ul li {
  display: table-row;
}

*[id^='recipe-ingredients'] ul li::before {
  content: "\25CF\00a0";
  color: var(--main-color);
  padding-right: 8px !important;
  padding-left: 8px !important;
  display: table-cell;
}

/* recipe info table */

table#recipe-info {
	width: 95%;
	margin-left: auto; 
	margin-right: auto;
	border:0;
}

table#recipe-info td {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;	
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
}

/* COMPONENT JFILTER */

ul.jfilters-filter-list li {
  float:left;
}

ul.jfilters-filter-list:after {
  content: "";
  display: table;
  clear: both;
}

.jfilters-item-link:before {
  margin-left: 5px;
}

/* JLex Comment */

/* give all popups on mobile a small margin to better visualize it is a popup window */
.jcm-dialog.touch { margin:5%; width:90%;}

/* on mobile all popups (like captcha, login, upload, or emois popup-dialog make not full screen, to avoid the buttons are not visible */

.jcm-dialog.touch { height:70%; }

.jcm-dialog.touch.terms { height:80%; }

.jcm-dialog.touch.uploadFile{ height:70%; }

.jcm-dialog.touch.login { height:70%; }

/* display text "Write Comment" in one line with icon on the left */
.jcm-count-cm { 
    display: flex;
    align-items:center;
    vertical-align: middle;
}

/* remove grey color from links */
#jlexcomment #jcm-header a {
    color: unset !important;
}

/* subscribe check-box display standard one instead of awesome */
.jcm-suggest-follow .__fm {
  display: inline-block !important;
}

.jcm-count-cm img {
  margin-right: 4px;
}

/* Instant Facebook Login */

/* decrease a bit the height of the login button */
#sp-top2 .jes button {
  padding-bottom: 2px;
  padding-top: 2px !important;
  margin-top: 0px !important;
}

/* fix for the popup window to not oversize outside the visible area */
div.jes div.modal-dialog {
    top: 25%;
}

/* center the social login buttons */
a.ifbl_fbloginbutton, 
a.ifbl_fbloginbutton:hover, a.ifbl_fbloginbutton:visited, a.ifbl_gplusloginbutton, a.ifbl_gplusloginbutton:hover, a.ifbl_gplusloginbutton:visited, a.ifbl_twitterloginbutton, a.ifbl_twitterloginbutton:hover, a.ifbl_twitterloginbutton:visited, a.ifbl_linkedinloginbutton, a.ifbl_linkedinloginbutton:hover, a.ifbl_linkedinloginbutton:visited {
    margin: 10px auto;
    width: fit-content;
}

.jfbl-modlgn {
  padding-left: 0px !important;
  padding-top: 0px !important;
}