@media print {
  
}
/** Global ======================================================================== **/
:root {
 --scroll-padding-top: 100px;
	--scroll-padding-top-menu: 110px;
 --background-color: #ffffff;
	--color: #000000;
	--block-subtitle-color: #fc6c3f;
	--block-subtitle_border-color: #508d0e;
	--block-separator_border-color: #aeaeae;
	--block-subtitle-fontsize: 1.6rem;
	--block-subtitle2-fontsize: 1.3rem;
	--block-button-fontsize: 1rem;
	--icon-color: #508d0e;
	--button-hover-color: #508d0e;
	--hover-color: #fc6c3f;
	--h1-back-color:  #fc6c3f;
	--link-hover-color:  #fc6c3f;
	--h1-back-color-2: #508d0e;
	--grey: #e0e0df;
	--overlay: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
	--overlay-color: #ffffff;
	scroll-padding-top: var(--scroll-padding-top);
}

html {
  scroll-behavior: smooth;
}
*, *::before, *::after {
 box-sizing: border-box;
}
body {
 background-color: var(--background-color);
	background-image: url('/pics/main/body.jpg');
	margin: 0;
	padding: 0;
	color: var(--color);
	direction:ltr;
	font-family: Arial, sans-serif;	
	font-weight: 400;
	font-size: 1rem;
}
::-webkit-input-placeholder,
:-ms-input-placeholder, 
::placeholder {
  color: #666666;
}

.BackToTop {
  display: flex;
	 position: fixed;
		z-index: 100;
		right: 1rem;
		bottom: 1rem;
}

.BackToTop
  button {
		 display: flex;
			width: 2.5rem;
			height: 2.5rem;
			border-radius: 1.25rem;
			background-color: var(--h1-back-color);
			color: #ffffff;
			justify-content: center;
			align-content: center;
			align-items: center;
			transform: rotate(-90deg);
			font-size: 1.6rem;
			font-weight: 600;
			
		}

figure {
 border-radius: 1.1rem;
	overflow: hidden;
}

input, 
textarea {

}

figure,
header,
footer,
main,
aside,
section, 
article, 
div, 
span, 
figcaption, 
input, 
textarea, 
iframe, 
label,
h1,
h2,
h3,
h4,
h5,
p,
img {
 padding:0; 
	margin:0;
}
ul, 
ol, 
li {
 text-align:left;
	margin-left: 0;
	padding-left: 0;
}

iframe {
 
}

h4 {
    
   font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
			color: var(--h1-back-color);
}
h5 {
  
   font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
			color: var(--h1-back-color-2);
}

abbr, 
address {
 text-decoration: none; 
	font-style: normal;
}
img {
 display: block;
	max-width: 100%;
}

strong {
 font-weight: 700;
}
button {
 cursor: pointer;
	border: 0;
	background-color: transparent;
	font-size: inherit;
}

input:focus-within, 
select:focus-within, 
textarea:focus-within, 
button:focus-within, 
a:focus-within {
 /*outline: solid 1px #00b8e9;*/
}

input:focus, 
select:focus, 
textarea:focus, 
button:focus, 
a:focus {
 /*outline: solid 1px #00b8e9;*/
}

p {
 line-height: 1.5rem;
	text-align: left;
}
h1, h2 {
 font-size: 1.8rem;
 line-height: 2rem;
	font-weight: 500;
	padding: 0;
	margin: 0;
	
}
h3, h4, h5 {
 font-size: 1.2rem;
 line-height: 1.6rem;
	font-weight: 500;
	padding: 0;
	margin: 0;
	
}
.crop  p {
				text-overflow: ellipsis;
				display: -webkit-box !important;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				height: auto;
				overflow: hidden;
				
}
.red {font-weight: 600; color: red !important;}

.flexEnd {
 display:flex; flex-shrink: 1; justify-content: flex-end;
}

.MarginTop {
 margin-top: 40px;
}
.MobileSubMenu {
 display: flex;
	flex-direction: column;
	gap:0.8rem;
}

#messages_list {
  display: flex;
		flex-direction: column;
		gap: 10px;
}
#messages_list 
  .list {
    display: flex;
		  flex-direction: row;
				align-items: center;
				gap: 10px;
				width: 100%;
				border-bottom: 2px var(--grey) dotted;
				padding-bottom: 10px;
}
#messages_list 
  .list 
		  .date {
    display: flex;
		  width: 100px;
				font-size: 14px !important;
}
#messages_list 
  .list 
		  .name {
    display: flex;
		  flex: 1;
				
}
#messages_list 
  .list 
		  .stat {
    display: flex;
		  width: 100px;
				font-size: 14px !important;
}
#messages_list 
  .list 
		  .stat
				  .new {
     color: #ffffff;
					background-color: var(--button-hover-color);
					padding: 0.4rem;
					border-radius: 5px;
}

.img_holder { display: inline-block; width: 1px;}
.img_holder_show {
  display: inline-block;
		width: 220px !important;
		height: 180px !important;
		overflow: hidden;
		border: 2px var(--grey) dotted;
}
.img_holder_show img { width: inherit !important; display: block;}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: flex;
		flex-direction: column;
		flex:1;
		
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 2.6rem;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

a.link1 {
  color: var(--link-hover-color) !important;
		font-weight: 600;
		transition: 120ms;
		&:hover {
		 color: var(--h1-back-color-2) !important;
		}
		&:focus {
		 color: var(--h1-back-color-2) !important;
		}
}

.label_btn {
 cursor: pointer;
	display: inline-block;
			padding: 0.5rem;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left:20px;
			padding-right: 20px;
			color: #ffffff !important;
			transition: 120ms;
			width: auto !important;
			
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff !important;
			}
			&:focus-within {
			 background-color: var(--button-hover-color);
				color: #ffffff !important;
			}
			/*&:after {
			  content: '\00a0\00a0\00a0+';
					letter-spacing: -2px;
					margin-top: -0.15rem;
					color: #ffffff;
					font-weight: 800;
			}*/
} 

.border_bottom {
  border-bottom: 2px var(--grey) dotted;
		padding-bottom: 10px;
		margin-bottom: 10px;
}
.comments_list {
  display: flex;
		flex-direction: column;
		gap: 2rem;
}

.comments_list .comments_title {
  display: flex;
		flex-direction: row;
		gap: 2rem;
		align-items: center;
}
.comments_list .comments_title section {
  display: flex;
		flex-direction: column;
		
		align-items: flex-start;
}
.comments_list p {
 display: flex;
	width: auto !important;
	margin-bottom: 1rem;
}
.comments_list article {
 display: flex;
	flex-direction: column;
	
	
}
#add_comment_panel {
 margin-top: 1rem;
}

.bubble {
 position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 1rem;
	border-radius: 1rem;
 box-shadow:	0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
	margin-top: -15px;
}

.bubble::before {
   content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
	left: 3.5em;
	border: .75rem solid transparent;
	border-top: none;
	border-bottom-color: #fff;
	filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}

.add_subcomment_panel {
 display: flex;
	flex-direction: column;
	gap:1rem;
}
.add_subcomment_panel div {
 display: flex;
	flex-direction: row;
	align-content: flex-end;
	justify-content: flex-end;
}
.add_subcomment_panel div button {
 display: inline-block;
	width: auto !important;
}
.comments_hr {
 display: flex;
	width: 100%;
	border-bottom: 2px var(--grey) dotted;
}

.author_image {width: 100px !important; height: 100px !important; border-radius: 100%; overflow: hidden; border: 1px var(--grey) dashed; min-width: 100px;}
.author_image img {width: 100%;}
.author_image_small {width: 75px !important; height: 75px !important; border-radius: 100%; overflow: hidden; border: 1px var(--grey) dashed; min-width: 75px;}
.author_image_small img {width: 100%;}
.image_form input {width: 120px !important;}

.like_comment {
 margin-top: 5px;
	color: #aeaeae;
}

.btns {
  display: flex; 
		justify-content: flex-start; 
		align-items: flex-start;
		flex-direction: row;
		gap: 15px;
		margin-top: 15px;
}

.more_outer {
  display: flex; 
		justify-content: flex-start; 
		align-items: flex-start;
		flex-direction: row;
}

a.more1, .more1 {
		 display: flex;
			align-items: center;
			padding: 0.5rem;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left:20px;
			padding-right: 20px;
			color: #ffffff !important;
			transition: 120ms;
			
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff !important;
			}
			&:focus-within {
			 background-color: var(--button-hover-color);
				color: #ffffff !important;
			}
			&:after {
			  content: '\00a0\00a0\00a0››';
					letter-spacing: -2px;
					margin-top: -1px;
					color: #ffffff;
					font-weight: 800;
					
			}
		}
		
a.more2, .more2 {
		 display: inline;
			padding: 0.5rem;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left:20px;
			padding-right: 20px;
			color: #ffffff !important;
			transition: 120ms;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff !important;
			}
			&:focus-within {
			 background-color: var(--button-hover-color);
				color: #ffffff !important;
			}
		}
		
.button_label {
   display: inline;
			padding: 0.5rem;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left:20px;
			padding-right: 20px;
			width: auto;
			color: #ffffff !important;
			transition: 120ms;
			cursor: pointer;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff !important;
			}
			&:focus-within {
			 background-color: var(--button-hover-color);
				color: #ffffff !important;
			}
			&:after {
			  content: '\00a0\00a0\00a0››';
					letter-spacing: -2px;
					margin-top: -0.3rem;
					color: #ffffff;
					font-weight: 800;
			}
}

.Avatars {
 display: flex;
	flex-direction: row;
	width: 100%;
	flex:1;
	flex-wrap: wrap;
}
.Avatars a, .Avatars a img {display: inline; width: 75px;}

.faded {opacity: 0.6;}


.image_form_div {
  display: flex;
	 flex-direction: column;
	 gap: 10px;
}
		
a.white {
 color:#ffffff;
	&:hover {
	  text-decoration: none;
	  color:#ffffff;
	}
	&:focus-within {
	  text-decoration: none;
	  color:#ffffff;
	}
}
a {
 text-decoration: none;
	font-weight: 400;
	color:#006ab2;
	&:hover {
	  text-decoration: none;
	  color:#000000;
	}
	&:focus-within {
	  text-decoration: none;
	  color:#000000;
	}
	&:focus {
	  text-decoration: none;
	  color:#000000;
	}
	&:active {
	  text-decoration: none;
	  color:#006ab2;
	}
	&:visited {
	  text-decoration: none;
	  color:#006ab2;
	}
}

.Hide {display: none !important;}

/* hacks */
::-moz-focus-inner {
 border: 0;
}
.PrintPage_Outer {
  display: flex;
	 width: 100%;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 2rem;
}

.PrintPage {
 display: flex;
	width: 100%;
	max-width: 800px !important;
	padding: 2rem;
	justify-content: center;
	flex-direction: column;
}
.PrintPage_article {
  display: flex;
		flex-direction: column;
}
.PrintPage_image {
  display: block;
 	width: 100%;
	 max-width: 100%;
}

.PrintPage_article {
  display: flex;
 	flex-direction: column;
		gap: 1rem;
}
#no_photos
 article {
 display: flex;
	flex-direction: column;
}
#no_photos
 figure {
 display: none !important;
}
#btns {
 display: flex;
	flex-direction: row;
	gap: 1rem;
}
#btns
  button {
		 display: flex;
			height: 2rem;
			justify-content: center;
			align-content: center;
			align-items: center;
			font-size: 1rem;
			padding-bottom: 0;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left: 1rem;
			padding-right: 1rem;
			
			color: #ffffff;
			transition: 120ms;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:disabled {
			 background: #aeaeae;
				color: #ffffff;
				cursor: not-allowed;
			}
	}
	
.outer_div {
 display: flex;
	width: 100%;
	justify-content: center;
}

.loading_spinner {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.loading_spinner 
   div {
  position: absolute;
  border: 4px solid var(--link-hover-color);
  opacity: 1;
  border-radius: 50%;
  animation: loading_spinner_anime 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loading_spinner 
   div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes loading_spinner_anime {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

/** Dialog popup ================================================================== **/
#dialog {
 overflow: hidden;
	background-color: #ffffff;
	border: 3px #ffffff solid;
	border-radius: 1rem;
	width: auto;
	height: auto;
	display: table;
	padding: 0;
}

#dialog_text {
 overflow: auto;
	background-color: #ffffff;
	border: 3px #ffffff solid;
	border-radius: 1rem;
	width: 90%;
	max-width: 700px;
	height: auto;
	max-height: 90vh;
	display: table;
	padding: 0;
}

#dialog::backdrop
,#dialog_text::backdrop {
  background-color: rgba(0,0,0,0.6);
}

#dialog.dialog_show
,#dialog_text.dialog_show{
  -webkit-animation: anim_dialog 0.5s forwards; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: anim_dialog 0.5s forwards; /* Firefox < 16 */
      -ms-animation: anim_dialog 0.5s forwards; /* Internet Explorer */
       -o-animation: anim_dialog 0.5s forwards; /* Opera < 12.1 */
          animation: anim_dialog 0.5s forwards;
}

@-moz-keyframes anim_dialog {
    from { scale: 0;}
    to   { scale: 1;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes anim_dialog {
    from { scale: 0;}
    to   { scale: 1;}
}

/* Opera < 12.1 */
@-o-keyframes anim_dialog {
    from { scale: 0;}
    to   { scale: 1;}
}
@keyframes anim_dialog {
    from { scale: 0;}
    to   { scale: 1;}
}

#dialog 
 .main_image,
	#dialog_text 
 .main_image {
  display: block;
		padding: 0;
		justify-content: center;
		width: auto;
}

#dialog 
 .main_image 
	  figure {
    display: block;
				
		  width: 100%;
				position: relative;
				
}
#dialog_text 
 .main_image 
	  section {
    display: block;
				
		  width: 100%;
				position: relative;
				
}
#dialog 
 .main_image 
	  figure 
			 img {
    display: block;
		  max-width: 100%;
				max-height: 80vh;
				border-radius:1rem; 
		  box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		  overflow: hidden;
}
#dialog_text 
 .main_image 
	  section 
			 article {
    display: block;
				height: auto;
		  max-width: 100%;
				max-height: 84vh;
				margin-top: 3vh;
				margin-bottom: 3vh;
				border-radius:1rem; 
				padding: 1rem;
		  box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		  overflow: auto;
}
#dialog 
 .main_image 
	  figure 
			 button {
    display: inline-block;
				font-size: 3rem;
				font-weight: 800;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 3;
				color: #ffffff;
				text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
}

#dialog_text 
 .main_image 
	  section 
			 button {
    display: inline-block;
				font-size: 3rem;
				font-weight: 800;
				position: absolute;
				top: -25px;
				right: 12px;
				z-index: 3;
				color: #000000;
				text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
}

#dialog 
 .main_image 
	  figure 
			 figcaption {
    display: flex;
				justify-content: center;
		  width: 100%;
				height: 50%;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 2;
				background: var(--overlay);
				color: var(--overlay-color);
				justify-content: center;
				align-items: flex-end;
				font-size: 1.4rem;
					font-weight: 500;
					font-family: "Lobster", sans-serif;
			  letter-spacing: 2px;
}
#dialog 
 .main_image 
	  figure 
			 figcaption
				 span {
      padding: 1rem;
				  color: #ffffff;
				  text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
						
}

#text_content 
	  ol {
	   
    
   }
	#text_content 
	  li {
	
    list-style-type: none;
				line-height: 1.7rem;
				border-bottom: 2px var(--grey) dotted;
   }

/** Header ======================================================================== **/
.sep {display: flex; width: 100%; height: var(--scroll-padding-top); height: calc(var(--scroll-padding-top) + 10px);}

#header {
  width:100%; 
		position: fixed; 
		height: 80px; 
		display: flex; 
		justify-content: center; 
		background-color: #ffffff;
		-webkit-box-shadow: 1px 2px 9px 1px rgba(0,0,0,0.39); 
		box-shadow: 1px 2px 9px 1px rgba(0,0,0,0.39); 
		z-index: 100;
	}
.HeaderIn {
   display: flex; 
			width: 90%;
			justify-content: space-between; 
			align-items: center;
	}
.HeaderIn
  figure.logo {
		  display: flex; 
				height: 50px;
	}
.HeaderIn 
   figure.logo 
			   img {
				height: 50px; 
				width: auto;
}

#header
 #main_navigation {
	  display: flex;
			flex-direction: row;
			gap: 0.5rem;
	}
#header
 .main_navigation
	  button {
	   display: flex;
	}
	
	#header
 .main_navigation
	  div.button {
	   display: flex;
				
	}
	
	
	
		
	
	
	
.main_navigation_opened {
  display: flex;
		flex-direction: column;
		
		position: absolute;
		z-index: 99;
		min-height: 50vh;
		max-height: 90vh;
		top:0;
		margin-top: calc(var(--scroll-padding-top) - 10px));
		left: 0;
		width: 100%;
		padding:2rem;
		background-color: rgba(255,255,255,0.95);
		border-bottom: 4px var(--grey) solid;
		overflow-y: auto;
		
		-webkit-animation: anim_main_navigation_opened 0.5s forwards; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: anim_main_navigation_opened 0.5s forwards; /* Firefox < 16 */
      -ms-animation: anim_main_navigation_opened 0.5s forwards; /* Internet Explorer */
       -o-animation: anim_main_navigation_opened 0.5s forwards; /* Opera < 12.1 */
          animation: anim_main_navigation_opened 0.5s forwards; 
}
  
.search_opened {
  display: flex;
		flex-direction: column;
		top:0;
		position: fixed;
		z-index: 99;
		top: calc(var(--scroll-padding-top) + 2rem));
		left: 0;
		width: 100%;
		padding:2rem;
		background-color: rgba(255,255,255,0.95);
		border-bottom: 4px var(--grey) solid;
		
		-webkit-animation: anim_main_navigation_opened 0.5s forwards; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: anim_main_navigation_opened 0.5s forwards; /* Firefox < 16 */
      -ms-animation: anim_main_navigation_opened 0.5s forwards; /* Internet Explorer */
       -o-animation: anim_main_navigation_opened 0.5s forwards; /* Opera < 12.1 */
          animation: anim_main_navigation_opened 0.5s forwards; 
}

@-moz-keyframes anim_main_navigation_opened {
    from { opacity: 0; margin-top: -60vh;}
    to   { opacity: 1; margin-top: calc(var(--scroll-padding-top) - 10px));}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes anim_main_navigation_opened {
    from { opacity: 0; margin-top: -60vh;}
    to   { opacity: 1; margin-top: calc(var(--scroll-padding-top) - 10px));}
}

/* Opera < 12.1 */
@-o-keyframes anim_main_navigation_opened {
    from { opacity: 0; margin-top: -60vh;}
    to   { opacity: 1; margin-top: calc(var(--scroll-padding-top) - 10px));}
}
@keyframes anim_main_navigation_opened {
    from { opacity: 0; margin-top: -60vh;}
    to   { opacity: 1; margin-top: calc(var(--scroll-padding-top) - 10px));}
}

.title_section {
			display: flex;
			width: 100%;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			 
			margin-bottom: 12px; 
			font-size: var(--block-subtitle-fontsize); 
			border-bottom: 2px var(--grey) dotted;
}

.title_section
  .title {
		 color: var(--block-subtitle_border-color); 
   font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		}

.navigation_links {
  display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		align-content: space-between;
		gap: 3rem;
		width: 100%;
}
.navigation_links 
  nav {
		  display: flex;
				flex-direction: column;
				gap: 0.5rem;
		}
	
.navigation_links 
  nav 
		 a {
			  line-height: 1.2rem;
					display: flex;
					color: #000000;
					transition: 120ms;
					font-weight: 500;
					padding: 6px;
					padding-left: 8px;
					padding-right: 8px;
					border-radius: 4px;
					&:hover {
					 color: #ffffff;
						background-color: #008000;
					}
					&:focus-within {
					 color: #ffffff;
						background-color: #008000;
					}
			}
			
.navigation_links 
  nav 
		 a.sub_title {
					font-weight: 900;
					padding-top: 0;
			&:hover {
						background-color: transparent;
						color: #000000;
				}
			&:focus-within {
						background-color: transparent;
						color: #000000;
				}		
			}
			
	.navigation_links 
  nav 
		 span.sub_title {
					font-weight: 900;
					padding-top: 0;
			}
			
	.navigation_links 
  nav 
		 span.sub_title_spacer {
			  line-height: 1.2rem;
					display: flex;
					padding: 6px;
					padding-left: 8px;
					padding-right: 8px;
					border-radius: 4px;
			}
	
	.MobileMenuTitle {
	  display: flex;
			flex-direction: row;
			justify-content: space-between;
	}
	.MobileMenuTitle 
	  button {
	  display: none;
	}
/** Footer ======================================================================== **/
#footer {
   display: flex; 
			width: 100%; 
			flex-direction: column;
			justify-content: center;
			align-content: center;
			align-items: center;
			margin-top: 2rem;
			margin-bottom: 2rem;
			padding-top: 10px;
			border-top: 2px var(--grey) dotted;
			gap:1.8rem;
}
#footer
 .FooterIn {
	  width: 90%;
			max-width: 1350px;
			min-width: 300px; 
			display: flex;
			justify-content: space-between;
			align-content: flex-start;
			align-items: flex-start;
			gap: 40px;
	}
#footer 
  figure {
		  
		}
#footer 
  figure 
		  img {
				
		}
#footer
 #footer_links {
	 display: flex;
		flex-direction: row;
		gap:2rem;
	}
	#footer
 #footer_links 
	section {
	 display: flex;
		flex-direction: column;
		gap:0.6rem;
	}
	#footer
 #footer_social {
	 display: flex;
		flex-direction: row;
		gap:6px;
	}
	#footer
 #footer_social
	 img {
	  width: 30px;
	}
	
	#footer
	 a {
		 color: #000000;
			
			&:hover {
			 color: var(--icon-color);
			}
			&:focus {
			 color: var(--icon-color);
			}
		}
		
		#footer
	  a
		  b {
		  font-weight: 300;
		}
		
		#Nav1Links,
		#Nav2Links,
		#Nav3Links,
		#Nav4Links,
		#Nav5Links {
		 display: flex;
			flex-direction: column;
		}
/** Body ======================================================================== **/
.Full {
   display: flex; 
			width: 100%; 
			min-width: 300px;
			justify-content: center;
	}
.Content {
   width: 90%;
			max-width: 1350px;
			min-width: 300px; 
			display: flex;
			justify-content: center;
			align-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			gap: 40px;
	}

/** Banners ============================================================================== **/
#banners {
 display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	max-width: 1350px;
	margin-bottom: 1.5rem;
}

#banners
 a {
	 display: flex;
		width: 30%;
	}

#banners
 figure {
	 display: inline-block;
		position: relative;
		width: 100%;
		border-radius:1rem; 
		box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		overflow: hidden;
	}
	#banners
 figure 
	 img {
		 width: 100%;
			display: block;
	}
	#banners
 figure 
	 figcaption {
		 width: 100%;
			height: 50%;
			position: absolute;
			z-index: 2;
			padding: 1rem;
			background: var(--overlay);
			color: var(--overlay-color) !important;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			/*top: calc(50% - 1rem);*/
			bottom:0;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
	}

/** Main Content blocks ================================================================== **/
#main {
  display: flex;
	 flex:1;
	 min-width: 300px;
	 flex-direction: column; 
	 gap: 25px;
}

#left_panel {
 display: flex;
	width: 100%;
	max-width: 320px;
	flex-direction: column; 
	gap: 15px;
}

/** Inner Content blocks -> left panel ================================================================== **/
#left_panel 
.block {
  display: flex; 
		flex-direction: column; 
		border:none; 
		padding:1rem; 
		border-radius:1rem; 
		box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
		
	}

#left_panel 
.block 
  span.title {
		 font-size: var(--block-subtitle-fontsize); 
			display: flex; 
			color: var(--block-subtitle_border-color); 
			padding: 6px; 
			margin-bottom: 12px; 
			font-weight: 600;
			position: relative; 
			border-bottom: 2px var(--grey) dotted;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
}


#main 
.block {
  display: flex; 
		flex-direction: column; 
		border:none; 
		padding:1rem; 
		border-radius:1rem; 
		box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
		transition: 220ms;
		&:hover, &:focus-within {
		 box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.15), 0 0 1rem 0 rgba(204,204,204,0.15); 
		}
}
#main 
.block2 {
  display: flex; 
		flex-direction: column; 
		border:none; 
		padding:1rem; 
		border-radius:1rem; 
		box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
}


#main 
.block 
  span.title {
		 font-size: var(--block-subtitle-fontsize); 
			display: flex; 
			color: var(--hover-color); 
			padding: 6px; 
			margin-bottom: 12px; 
			font-weight: 600;
			position: relative; 
			border-bottom: 2px var(--grey) dotted;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
}

#main 
.block2 
  span.title {
		 font-size: var(--block-subtitle-fontsize); 
			display: flex; 
			color: var(--hover-color); 
			padding: 6px; 
			margin-bottom: 12px; 
			font-weight: 600;
			position: relative; 
			border-bottom: 2px var(--grey) dotted;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
}

#main 
.block2 
  h1,
#main 
.block2 
  h2 {
		 font-size: var(--block-subtitle-fontsize); 
			display: flex; 
			color: var(--block-subtitle-color); 
			padding: 6px; 
			margin-bottom: 12px; 
			font-weight: 600;
			position: relative; 
			border-bottom: 2px var(--grey) dotted;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
}

#main 
.block 
  h1 {/*
		 font-size: var(--block-h2-fontsize); 
			display: flex; 
			color: var(--block-subtitle-color);   
			position: relative; */
}

#place_show 
a {
  color: #666666;
		text-decoration: underline;
		transition: 120ms;
		font-weight: 500;
		padding-right: 5px;
		&:hover {
		 color: var(--hover-color);
		}
		&:focus-within {
		 color: var(--hover-color);
		}
}

#action_panel {
 display: flex;
	flex-direction: column;
	gap: 10px;
}
#content_actions_data {
 display: flex;
	flex-direction: column;
	gap: 40px;
}

#like_panel
  button {
		 display: flex;
			height: 2rem;
			justify-content: center;
			align-content: center;
			align-items: center;
			font-size: 1rem;
			padding-bottom: 0;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left: calc(1rem + 20px);
			padding-right: 1rem;
			
			color: #ffffff;
			transition: 120ms;
			position: relative;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:disabled {
			 background: #aeaeae;
				color: #ffffff;
				cursor: not-allowed;
			}
			&:before {
			 content: '';
				width: 15px;
				height: 15px;
				left:10px;
				
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url('/pics/main/likes_white.png');
				position: absolute;
			}
	}
#main
 .main_image {
	 display: flex;
		margin-bottom: 2rem;
		flex-direction: row;
		justify-content: flex-start;
		gap: 30px;
	}
	
#main
 .main_image 
	  figure {
	   display: block;
				height: 400px;
				width: 60%;
				min-width: 450px;
				border-radius:1rem; 
				overflow: hidden;
		  box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
				position: relative;
	}
	
	#main
 .main_image 
	  figure 
			 img {
	    display: inline-block;
				 width: 100%;
					height: 400px;
					z-index: 1;
					object-fit: cover;
					object-position: center center;
	}
	#main
 .main_image 
	  figure 
			 figcaption {
	    display: flex;
					align-items: flex-end;
				 width: 100%;
					height: 50%;
					height: 6rem;
					position: absolute;
					bottom: 0;
					z-index: 3;
					background: var(--overlay);
					font-size: 1.4rem;
					font-weight: 500;
					font-family: "Lobster", sans-serif;
			  letter-spacing: 2px;
	}
	
	#main
 .main_image 
	  #share_panel {
	    
				
	}
	
	#share_panel
				 span,
	#share_panel_footer
				 span {
	     border-bottom: 2px var(--grey) dotted;
				  margin-bottom: 10px;
	}
	
	.share_panel1 {
	  display: none;
	}
 .share_panel2,
	.share_panel1x
	{
	  display: flex;
					flex-direction: column;
					align-items: center;
					align-content: center;
				 
					gap: 10px;
	}
	
	.share_panel3 {
	  display: flex;
					flex-direction: column;
					align-items: center;
					align-content: center;
				 
					gap: 10px;
	}
	
	#share_buttons 
				 img {
	    display: block;
					width: 35px;
					height: 35px;
					
	}
	#share_buttons {
	    display: flex;
					flex-direction: row;
					align-items: center;
					align-content: center;
					gap: 3px;
	}
	#share_buttons2 {
	    display: flex;
					flex-direction: row;
					align-items: center;
					align-content: center;
					gap: 3px;
	}
	#share_buttons2 
				 img {
	    display: block;
					width: 35px;
					height: 35px;
					
	}
	
	#custom_window {
	   display: flex;
				width: 100%;
					flex-direction: column;
					align-items: center;
					align-content: center;
				 
					gap: 10px;
	}
	#custom_window 
	  span {
			   border-bottom: 2px var(--grey) dotted;
				  margin-bottom: 10px;
			}
	
	#main
 .main_image 
	  figure 
			 #action_panel {
	    display: flex;
					flex-direction: column;
					align-items: flex-start;
					align-content: flex-start;
				 width: 50px;
					gap: 10px;
					position: absolute;
					left: 20px;
					top: 20px;
					z-index: 4;
					color: #ffffff !important;
					font-size: 1.2rem;
					font-weight: 500;
					text-shadow: 0px 1px 2px rgba(160, 155, 209, 1);
	}
	#main
 .main_image 
	  figure 
			 figcaption 
				  h1 {
	      color: #ffffff;
							padding-left: 1.5rem;
							padding-bottom: 1.5rem;
	}
	 
	
	#content_steps {
	  display: inline-flex;
			flex-direction: row;
			align-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			gap:20px;
			flex-grow: 0;
	}
#content_steps 
	h5 {
	   
				display: inline-block;
			
		width: 100% !important;
	}
	
	#content_steps 
	p {
	   
				display: inline;
				flex: 1 0 0;
	}
	#content_steps 
	p.full {
	   
				display: inline-block;
				flex:1;
				min-width: 100%;
	}

 #content_steps 
	 figure {
	   display: inline;
				float: left;
				position: relative;
				max-width: 100%;
				border-radius:1rem; 
				overflow: hidden;
		  box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
	}
	
	#content_steps
	figure.small {
	   display: inline;
				float: left;
				position: relative;
				width: 50%;
				border-radius:1rem; 
				overflow: hidden;
		  box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
	}
	
	#content_steps 
	 figure 
		 img {
	   display: flex;
				width: 100%;
	}
	
	#content_steps 
	 figure.small 
		 img {
	   display: flex;
				width: 100%;
	}
	
	#content_steps  
	  figure 
			 figcaption {
	    display: none;
					align-items: flex-end;
				 width: 100%;
					height: 50%;
					
					position: absolute;
					bottom: 0;
					z-index: 3;
					
					padding-left: 1.1rem;
					padding-bottom: 1.1rem;
					transition: 160ms;
	}
	
	#content_steps  
	  figure:hover 
			 figcaption,
	#content_steps  
	  figure:focus 
			 figcaption  {
	    display: flex;
					align-items: flex-end;
				 width: 100%;
					height: 50%;
					position: absolute;
					bottom: 0;
					z-index: 3;
					background: var(--overlay);
					color: var(--overlay-color);
					padding-left: 1.1rem;
					padding-bottom: 1.1rem;
	}


#content_steps2 {
	  display: inline-flex;
			flex-direction: column;
			align-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			gap:20px;
			flex-grow: 0;
	}
	
	#content_steps2
	p {
	   
				display: inline;
				flex: 1 0 0;
	}
	#content_steps2 
	p.full {
	   
				display: inline-block;
				flex:1;
				min-width: 100%;
	}

 #content_steps2 
	 figure {
	   display: inline;
				float: left;
				position: relative;
				max-width: 100%;
				border-radius:1rem; 
				overflow: hidden;
		  box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
	}
	
	#content_steps2
	figure.small {
	   display: inline;
				float: left;
				position: relative;
				width: 50%;
				border-radius:1rem; 
				overflow: hidden;
		  box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
	}
	
	#content_steps2 
	 figure 
		 img {
	   display: flex;
				width: 100%;
	}
	
	#content_steps2 
	 figure.small 
		 img {
	  display: flex;
				width: 100%;
	}
	
	#content_steps2  
	  figure 
			 figcaption {
	    display: none;
					align-items: flex-end;
				 width: 100%;
					height: 50%;
					
					position: absolute;
					bottom: 0;
					z-index: 3;
					
					padding-left: 1.1rem;
					padding-bottom: 1.1rem;
					transition: 160ms;
	}
	
	#content_steps2  
	  figure:hover 
			 figcaption,
	#content_steps2  
	  figure:focus 
			 figcaption  {
	    display: flex;
					align-items: flex-end;
				 width: 100%;
					height: 50%;
					position: absolute;
					bottom: 0;
					z-index: 3;
					background: var(--overlay);
					color: var(--overlay-color);
					padding-left: 1.1rem;
					padding-bottom: 1.1rem;
	}
	
	.pre_main_data {
	  display: flex;
			justify-content: center;
			font-weight: 600;
	}
 .main_data
			 img {
				 width: 40px;
					margin-top: 4px;
					height: auto;
				}
				
	.main_data 
	  ul {
			 display: flex;
				flex-direction: row;
				justify-content: space-between;
				list-style-type: none;
				align-items: stretch;
			}
			
		.main_data 
	  li {
			 display: flex;
				flex-direction: column;
				align-items: center;
				gap: 0.6rem;
				flex-grow: 1;
				border-right: 1px var(--grey) solid;
				
				&:last-child {
				 border-right: 0;
				}
			}
			
			.main_data 
	  li 
			 div { 
			  display: flex;
				 flex-direction: column;
					gap: 0.5rem;
					align-items: center;
			}
			.main_data 
	  li
			 div
				 strong {
				 display: flex;
				}
			
			.main_data 
	  li 
			 strong { 
			  text-transform: uppercase;
			}
	#article_block1 
	  h1 {
	    color: var(--hover-color);
     border-bottom: 2px var(--grey) dotted;
					line-height: 2.2rem;
					margin-bottom: 1rem;
					font-size: 2rem;
					font-family: "Lobster", sans-serif;
					letter-spacing: 2px;
   }
	
	#article_block2 {
	 display: flex;
		flex-direction: column;
	}
	#article_block2 >
	 section {
	 display: flex;
		flex-direction: row;
		gap: 50px;
	}
	#article_block2
	 #list_of_ingredients {
			  min-width: 500px;
			}
	#article_block2 
	  ul {
	   width: 50%;
    
   }
	#article_block2 
	  li {
	
    list-style-type: none;
				line-height: 1.7rem;
				border-bottom: 2px var(--grey) dotted;
   }
	#article_block2 
	 h2 {
	  margin-bottom: 1rem;
			color: #000000;
			/*background-color: var(--h1-back-color);
			line-height: 2rem;
			font-size: 1.5rem;
			padding: 0.5rem;
			border-radius:1rem; 
			overflow: hidden;
			box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08);*/
			margin-top: 15px;
			font-size: 1.5rem;
			padding: 0.5rem;
			/*letter-spacing: 3px;
			text-transform:uppercase;*/
			display: grid;
   grid-template-columns: 1fr auto 1fr;
   grid-template-rows: 16px 0;
   grid-gap: 22px;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
			&:after {
			 content: " ";
    display: block;
    border-bottom: 2px solid var(--hover-color);
    
			}
			&:before {
			 content: " ";
    display: block;
    border-bottom: 2px solid var(--hover-color);
    
			}
	 }
		
		.main_data 
	 h2 {
	  margin-bottom: 1rem;
			color: #000000;
			/*background-color: var(--h1-back-color);
			line-height: 2rem;
			font-size: 1.5rem;
			padding: 0.5rem;
			border-radius:1rem; 
			overflow: hidden;
			box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08);*/
			margin-top: 15px;
			font-size: 1.5rem;
			padding: 0.5rem;
			/*letter-spacing: 3px;
			text-transform:uppercase;*/
			display: grid;
   grid-template-columns: 1fr auto 1fr;
   grid-template-rows: 16px 0;
   grid-gap: 22px;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
			&:after {
			 content: " ";
    display: block;
    border-bottom: 2px solid var(--hover-color);
    
			}
			&:before {
			 content: " ";
    display: block;
    border-bottom: 2px solid var(--hover-color);
    
			}
	 }
		
		#article_block3 
	  li {
    list-style-type: none;
				line-height: 1.7rem;
				border-bottom: 2px var(--grey) dotted;
   }
	#article_block3 
	
	  h2 {
	  margin-bottom: 1rem;
			color: #000000;
			/*background-color: var(--h1-back-color);
			line-height: 2rem;
			font-size: 1.5rem;
			padding: 0.5rem;
			border-radius:1rem; 
			overflow: hidden;
			box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08);*/
			margin-top: 15px;
			font-size: 1.5rem;
			padding: 0.5rem;
			/*letter-spacing: 3px;
			text-transform:uppercase;*/
			display: grid;
   grid-template-columns: 1fr auto 1fr;
   grid-template-rows: 16px 0;
   grid-gap: 22px;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
			&:after {
			 content: " ";
    display: block;
    border-bottom: 2px solid var(--hover-color);
    
			}
			&:before {
			 content: " ";
    display: block;
    border-bottom: 2px solid var(--hover-color);
    
			}
	 }

/** custom blocks ================================================================== **/
/** Top content ==================================================================== **/
#top_content,
#top_content2 {
 display: flex;
	flex: 1;
}

#top_content_block,
#top_content_block2,
#text_content_block1,
#text_content_block2,
#text_content_block3 {
 display: flex;
	flex-direction: row;
	align-items:flex-start;
 gap: 50px;
}

#top_content
 a,
#top_content2
 a {
	 display: flex;
	 flex-direction: column;
		transition: 120ms;
		color: var(--color);
		&:hover img {
		  transform: scale(1.1);
		}
		&:hover {
				color: var(--color);
		}
		&:focus img {
		  transform: scale(1.1);
		}
		&:focus-within {
		  color: var(--color);
		}
		
	}

#top_content_block 
 figure,
#top_content_block2 
 figure {
  display: flex;
	 position: relative;
	 width: 70%;
		overflow: hidden;
}
#top_content_block 
 article,
#top_content_block2 
 article {
  display: flex;
		width: 30%;
		min-height: 45vh;
		flex-direction: column;
		justify-content: space-between;
		
}

#text_content_block1 
 figure,
#text_content_block2 
 figure,
#text_content_block3 
 figure{
  display: flex;
	 position: relative;
	 width: 50%;
		overflow: hidden;
}


#top_content_block 
 article,
#top_content_block2 
 article {
  display: flex;
		width: 30%;
		min-height: 45vh;
		flex-direction: column;
		justify-content: space-between;
		
}

#top_content_block 
 .Data div,
#top_content_block2 
 .Data div {
  display: flex;
		
		flex-direction: row;
		
		
}

#text_content_block1 
 article,
#text_content_block2 
 article,
#text_content_block3 
 article {
  display: flex;
		width: 50%;
		min-height: 45vh;
		flex-direction: column;
		justify-content: space-between;
		
}

#top_content_block 
 figure
	 img,
#top_content_block2 
 figure
	 img {
	 width: 100%;
		height: 60vh;
		object-fit: cover;
		object-position: center center;
		display: flex;
		transition: 220ms;
		transform: scale(1);
}


#text_content_block1 
 figure
	 img,
#text_content_block2 
 figure
	 img,
#text_content_block3 
 figure
	 img {
	 width: 100%;
		height: 45vh;
		object-fit: cover;
		object-position: center center;
		display: flex;
		transition: 220ms;
		transform: scale(1);
}


#top_content_block
 .Data,
#top_content_block2
 .Data {
	 display: flex;
		flex-direction: column;
		gap:0.6rem;
		position: relative;
}
	
#top_content_block
 .Main,
#top_content_block2
 .Main {
	 display: flex;
		flex-direction: column;
		gap: 1rem;
		position: relative;
}

.Paragraphs {
 display: flex;
	flex-direction: column;
	gap: 1rem;
}


#text_content {
 display: flex;
	flex-direction: column;
	gap: 2rem;
}


	#text_content
  h1 {
	 display: flex;
		color: var(--block-subtitle-color);
		font-size: 3rem;
		justify-content: flex-start;
		
	}
	
	/** Surveys =========================================================================================== **/
	#survey_list 
  ul {
    display: flex;
				width: 100%;
				justify-content: flex-start;
		  flex-direction: column;
				list-style: none;
				gap: 1rem;
}

#survey_list 
 li
  a {
    display: flex;
				width: 100%;
				justify-content: flex-start;
				align-items: flex-start;
				color: #000000;
				font-weight: 500;
				transition: 120ms;
				
				&:hover {
				 color: var(--link-hover-color);
				}
			 &:before {
				 content: '››\00a0\00a0\00a0';
					letter-spacing: -2px;
					margin-top: -0.3rem;
					color: var(--link-hover-color);
					font-weight: 800;
					
				}
}

#survey_list 
 li {
    display: flex;
		  width: 100%;
				flex:1;
				justify-content: flex-start;
				align-items: flex-start;
			 flex-direction: row;
				border-bottom: 2px var(--grey) dotted;
				padding-bottom: 0.5rem;
}

#old_survey {
 display: flex;
	position: relative;
	padding: 1rem;
	padding-top: 3rem;
	gap: 0.3rem;
	width: 300px;
	max-width: 300px;
	gap: 0.3rem;
}
#old_survey 
 button {
  display: inline-block;
				font-size: 3rem;
				font-weight: 800;
				position: absolute;
				top: -1rem;
				right: 0;
				z-index: 3;
				color: #000000;
				/**text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);**/
}
#old_survey
 span.title {
	 font-weight: 500;
		font-size: 1.3rem;
	}

#old_survey
	#survey_data {
	 display: flex;
		flex-direction: column;
		gap:0.3rem;
		width: 100%;
		flex:1;
	}
#old_survey
	#survey {
	 display: flex;
		flex-direction: column;
		gap:0.3rem;
	}

/** Popular content / new / articles ==================================================================== **/
#popular_content {
 display: flex;
	align-items:stretch;
	align-content: stretch;
	flex: 1;
}

#comments_content {
 display: flex;
	align-items:stretch;
	align-content: stretch;
	flex: 1;
}

#new_content {
 display: flex;
	align-items:stretch;
	align-content: stretch;
	flex: 1;
}

#articles_content {
 display: flex;
	align-items:stretch;
	align-content: stretch;
	flex: 1;
}

/** block1 **/
.content_block {
 display: flex;
	flex-direction: row;
	align-items: flex-start;
	align-content: flex-start;
	gap: 50px;
}

.content_block1 {
 display: flex;
	flex-direction: column;
	align-items:stretch;
	align-content: stretch;
	width: 50%;
	max-width: 50%;
}
.content_block1
 a {
	 display: flex;
	 flex-direction: column;
		transition: 420ms;
		box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08);
		color: var(--color);
		&:hover img {
		  transform: scale(1.1);
		}
		&:hover {
				color: var(--hover-color);
				background-color: #F7F4F4;
		}
		&:focus img {
		  transform: scale(1.1);
		}
		&:focus-within {
		  color: var(--hover-color);
				background-color: #F7F4F4;
		}
		
	}
.content_block1 
 article {
  display: flex;
		flex-direction: column;
		justify-content: space-between;
		transition: 120ms;
		padding: 1rem;
		gap: 1.5rem;
}	
	
.content_block1 
 figure {
  display: flex;
	 position: relative;
	 width: 100%;
		overflow: hidden;
}
.content_block1 
 figure
	 img {
	 width: 100%;
		object-fit: cover;
		object-position: center center;
		display: flex;
		transform: scale(1);
		transition: 420ms;
}

.content_block1 
  .Main {
		 display: flex;
		 gap: 1rem;
		}
.content_block1 
  .Data {
		 display: flex;
			flex-direction: column;
		 gap: 1rem;
		}
		
		
	/* block2 */	

.content_block2 {
 display: flex;
	flex-direction: column;
	width: 50%;
}
.content_block2
 a {
	 display: flex;
	 flex-direction: row;
		align-content: flex-start;
		gap: 1rem;
		transition: 420ms;
		padding: 0.5rem;
		color: var(--color);
		border-bottom: 2px var(--grey) dotted;
		&:hover {
		  background-color: #F7F4F4;
				color: var(--hover-color);
		}
		&:focus-within {
		  background-color: #F7F4F4;
				color: var(--hover-color);
		}
		&:hover img {
		  transform: scale(1.5);
		}
		&:focus img {
		  transform: scale(1.5);
		}
	}
	
.content_block2 
 figure {
  display: flex;
	 position: relative;
	 width: 40%;
		height: 120px;
		overflow: hidden;
}
.content_block2 
a
.Data {
 display:flex;
	flex-direction: column;
	gap: 5px;
}
.content_block2 
a
h3 {
 font-size: 1rem;
}
.content_block2 
 figure
	 img {
	 width: 100%;
		height: 120px;
		object-fit: cover;
		object-position: center center;
		display: flex;
		transition: 420ms;
}
.content_block2 
 article {
  display: flex;
		flex-direction: column;
		gap: 0.6rem;
	 position: relative;
	 width: 60%;	
}

.content_block2 
  .Data {
		 display: flex;
		 gap: 1rem;
		}
	
	.content_block2 
  .Data
		  div {
		 display: flex;
			flex-direction: row;
		}
		
		
		
/** New content ==================================================================== **/


/** comments ======================================================================= **/
#comments_list {
  display: flex;
		flex-direction: column;
		width: inherit;
		
}
#comments_list 
  .list {
    display: flex;
		  flex-direction: row;
				align-items: flex-start;
				
				width: 100%;
				gap: 1rem;
				border-bottom: 2px var(--grey) dotted;
				padding-bottom: 0.7rem;
				margin-bottom: 1rem;
}

#comments_list 
  .list 
		  figure {
    display: flex;
				width: 50px;
				height: 50px;
				align-items: flex-start;
				position: relative;
}
#comments_list 
  .list 
		  article {
    display: flex;
				flex-direction: column;
				width: 100%;
				gap:1rem;
				align-items: flex-start;
				position: relative;
}

#comments_list 
  .list 
		  figure 
				  img {
    display: flex;
				object-fit: cover;
				object-position: center center;
				width: 50px;
				height: 50px;
}




#comments_list 
  .list 
		  .Data {
    display: flex;
				flex-direction: row;
				width: 100%;
				align-content: center;
				font-size: 1rem;
				justify-content: space-between;
}
#comments_list 
  .list 
		  .Data 
				  span {
       display: flex;
}






.links_block {
  display: flex;
		flex-direction: row !important;
		flex-wrap: wrap;	
		width: 100%;
		flex: 1;
}
.links_block 
  .list1 {
    display: flex;
		  flex-direction: column;
				width: 30%;
				gap: 10px;
				margin-bottom: 1rem;
}

.links_block 
  .list1 
		  figure {
    display: flex;
				width: 100%;		
}

.links_block 
  .list1 
		  section {
    display: flex;
				width: 100%;		
}

.links_block
  .list1 
		  figure
				  img {
				width: 100%;
				object-fit: cover;
				object-position: center center;
				height: 180px !important;
				display: block;
}
.links_block 
  .list1 
		  h3 {
    font-size: 1.2rem;
				font-weight: 600;
				color: var(--h1-back-color);
				margin: 0 !important;
				padding: 0 !important;
}
.links_block 
  .list1 
		  .more2 {
     display: flex;
					justify-content: center;
					align-items: center;
					align-content: center;
}


/** authors =================================================== **/
#authors_list {
  display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		align-items: stretch;
		justify-content: space-between;
}
#authors_list 
  .list {
    display: flex;
		  flex-direction: column;
				align-items: center;
				
				width: 23%;
				gap: 1rem;
				margin-bottom: 1rem;
}

#authors_list 
  .list 
		  figure {
    display: flex;
				width: 100%;
				align-items: center;
			  align-content: center;
			  justify-content: center;
				position: relative;
}

#authors_list 
  .list 
		  figure 
				  img {
    display: flex;
				width: 100%;
					  max-width: 150px;
					  
				object-fit: cover;
				object-position: center center;
				height: auto;
				border-radius: 100%; overflow: hidden; border: 1px var(--grey) dashed;
}
#authors_list .Main {display: flex; flex-direction: column; align-content: stretch; justify-content: stretch; align-items: stretch;}
#authors_list h3 {text-align: center;}
#authors_list .more2 {font-size: 0.8rem;}


/** cats =========================================================================== **/
#recipe_list {
  display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		align-items: stretch;
		justify-content: space-between;
}
#recipe_list 
  .list {
    display: flex;
		  flex-direction: column;
				align-items: center;
				
				width: 49%;
				gap: 1rem;
				margin-bottom: 1rem;
}

#recipe_list 
  .list 
		  figure {
    display: flex;
				width: 100%;
				align-items: flex-start;
				position: relative;
}

#recipe_list 
  .list 
		  figure 
				  img {
    display: flex;
				width: 100%;
				object-fit: cover;
				object-position: center center;
				height: 250px;
}
 
.cat_name {
    display: flex;
				width: auto;
				position: absolute;
				z-index: 3;
				padding: 6px;
				padding-right: 12px;
				padding-left: 12px;
				margin-top: 1rem;
				font-size: 1rem;
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
				background-color: var(--block-subtitle_border-color);
				color:#ffffff;
}

#recipe_list 
  .list 
		  .Main {
    display: flex;
				width: 100%;
				align-items: center;
				justify-content: center;
}

#recipe_list 
  .list 
		  .Data {
    display: flex;
				flex-direction: row;
				width: 100%;
				align-content: center;
				font-size: 1rem;
				justify-content: space-between;
}
#recipe_list 
  .list 
		  .Data 
				  span {
       display: flex;
}
#recipe_list 
 a {
	  color: #000000;
			font-weight: 500;
			font-size: 1.2rem;
			
			&:hover {
			 color: var(--hover-color);
			}
			&:focus-within {
			 color: var(--hover-color);
			}
	}


#settings_section {
    display: flex;
				flex-direction: column;
				width: 100%;
				align-items: center;
				justify-content: center;
}


#settings_section
	 #loader {
		 display: flex;
			width: 100%;
				align-items: center;
				justify-content: center;
				margin-bottom:0;
		}
	#settings_section
	 #loader.show {
				margin-bottom:1rem;
		}
		

#settings_section
	 #pager {
		  display: flex;
			 flex-direction: row;
			 width: 100%;
				align-items: center;
				justify-content: space-between;
				margin-bottom:1rem;
		}
		
#settings_section
	 #pager 
		 #list_buttons {
		  display: flex;
			 flex-direction: row;
			 
				align-items: center;
				gap: 5px;
				
		}
#settings_section
	 #pager 
		 select {
		  display: none;
			 
		}
		
#settings_section
	 #pager 
		 select {
		 padding: 0.5rem;
			border-radius: 0.5rem;
			border: 0;
		}
		
#settings_section
	 #pager 
		 button {
		 display: flex;
			width: 2rem;
			height: 2rem;
			justify-content: center;
			align-content: center;
			align-items: center;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			font-size: 1.6rem;
			padding-bottom: 0.3rem;
			color: #ffffff;
			transition: 120ms;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:disabled {
			 background: #aeaeae;
				color: #ffffff;
				cursor: not-allowed;
			}
		}
		
	#settings_section
	 #pager 
		 button.pager_btn {
		 display: flex;
			width: 2rem;
			height: 2rem;
			justify-content: center;
			align-content: center;
			align-items: center;
			font-size: 1rem;
			padding-bottom: 0;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			
			color: #ffffff;
			transition: 120ms;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:disabled {
			 background: #aeaeae;
				color: #ffffff;
				cursor: not-allowed;
			}
		}

#cats {
  display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		align-items: stretch;
		justify-content: space-between;
}

#cats 
  .cat {
    display: flex;
		  flex-direction: column;
				align-items: flex-start;
				
				width: 33%;
				gap: 1rem;
				margin-bottom: 1rem;
}

#cats 
  nav {
    display: flex;
				width: 100%;
				height: 100%;
				justify-content: space-between;
				align-items: flex-start;
				align-content: space-between;
				flex-direction: column;
				gap: 1rem;
}

#cats 
  ul {
    display: flex;
				width: 100%;
				justify-content: flex-start;
		  flex-direction: column;
				list-style: none;
				gap: 0.5rem;
}

#cats 
 li
  a {
    display: flex;
				width: 100%;
				justify-content: flex-start;
				align-items: flex-start;
				color: #000000;
				font-weight: 500;
				transition: 120ms;
				
				&:hover {
				 color: var(--link-hover-color);
				}
			 &:before {
				 content: '››\00a0\00a0\00a0';
					letter-spacing: -2px;
					margin-top: -0.3rem;
					color: var(--link-hover-color);
					font-weight: 800;
					
				}
}

#cats 
 li {
    display: flex;
		  width: 100%;
				flex:1;
				justify-content: flex-start;
				align-items: flex-start;
			 
}

#cats 
  a {
    display: flex;
				color: var(--h1-back-color);
				font-weight: 500;
				transition: 120ms;
		  width: 100%;
			 &:hover {
				 color: #000000;
				}
				&:focus-within {
				 color: #000000;
				}
}

#cats 
 .cat
	 figure  {
	 width: 100%;
		display: flex; 
		border-radius: 1.1rem;
		overflow: hidden;
}
#cats 
 .cat
	 h2  {
	 width: 100%;
		font-size: 1.1rem;
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		justify-content: flex-start;
		color: var(--h1-back-color-2);
		border-bottom: 2px var(--grey) dotted;
		position: relative;
		padding-left: 2.2rem;
		font-weight: 600;
		
		
		&:hover {
		 color: var(--h1-back-color);
		}
		&:focus-within {
		 color: var(--h1-back-color);
		}
		&::before {
		 content: '';
			position: absolute;
			background-image: url('/pics/main/icon.png');
			background-size: contain;
			background-position: center center;
			width: 1.5rem;
			height: 1.5rem;
			
			
			left:0;
			
		}
}

#cats 
 .cat
	 figure
	 img {
	 width: 100%;
		height: 180px;
		object-fit: cover;
		object-position: center center;
		
}

#cats
 .cat
	 span {
		 width: 100%;
		 display: flex;
			justify-content: flex-end;
		}
		
#cats
 .cat
	 b {
		 width: 100%;
		 display: flex;
			justify-content: flex-start;
			color: var(--block-subtitle_border-color); 
   font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
			font-size: 1.2.rem;
		}
		
#cats
 .cat
	 b.ct {
		 border-top: 2px var(--grey) dotted;
			padding-top: 5px;
		}

#cats
 .cat
	 a.more {
		 display: inline;
			width: auto;
			padding: 0.5rem;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left:20px;
			padding-right: 20px;
			color: #ffffff;
			transition: 120ms;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:focus-within {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:after {
			  content: '\00a0\00a0\00a0››';
					letter-spacing: -2px;
					margin-top: -0.3rem;
					color: #ffffff;
					font-weight: 800;
			}
		}
		
	.cat a {display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; align-content: center; gap:1rem;}	
		

/** left blocks ========================================================================= **/
#links1_block,
#links2_block,
#links3_block,
#acc_block
{
 display: flex;
	flex-direction: column;
	gap: 0.5rem;
	
}

#links1_block a,
#links2_block a,
#links3_block a,
#acc_block a
{
			  line-height: 1.2rem;
					display: flex;
					color: #000000;
					transition: 120ms;
					font-weight: 600;
					padding: 4px;
					padding-left: 8px;
					padding-right: 8px;
					border-radius: 4px;
					&:hover {
					 color: #ffffff;
						background-color: #008000;
					}
					&:focus-within {
					 color: #ffffff;
						background-color: #008000;
					}
}

#acc_block a.selected {
   color: #ffffff;
			background-color: #008000;
}

/** Survey ============================================================================== **/
.survey_vote_topic {
  display: flex;
		width: 100%;
		color: #000000;
		flex-direction: row;
		justify-content: flex-start;
		padding: 8px;
		border: 1px var(--grey) solid;
		
}
#left_panel 
  .block 
		  #survey_form {
				 display: flex; 
					flex-direction: column;
				}
#left_panel 
  .block 
		  #survey_form 
				  fieldset {
						  display: flex; 
								flex-direction: column; 
								gap: 5px; 
								border: 0;
						}
						
#left_panel 
  .block 
		  #survey_form 
				  fieldset 
						  legend {
										font-size: var(--block-subtitle2-fontsize); 
										color: var(--color); 
										line-height: calc(var(--block-subtitle2-fontsize) + 0.3rem);
										margin-bottom: 10px;
										margin-top: 10px;
							  }
									
#left_panel 
 .block 
	  #survey_form 
			  fieldset 
					   label {
          cursor: pointer;
	         font-weight: 500;
	         position: relative;
	         overflow: hidden;
	         margin-bottom: 5px;
	         /* Accessible outline */
	         &:focus-within {
								   outline: 1px solid #00b8e9; 
										 border-radius: 99em;
								  }
	        }
#left_panel 
 .block 
	   #survey_form 
				  input {
		       position: absolute;
		       left: -9999px;
		       &:checked + span {
			       background-color: #f1f1f1;
			       color: #000000;
			      &:before {
				       box-shadow: inset 0 0 0 0.4375em var(--hover-color);
			      }
		      }
	      }
#left_panel 
 .block 
	  #survey_form 
		  span {
		    display: flex;
		    align-items: center;
		    padding: 0.375em 0.75em 0.375em 0.375em;
		    border-radius: 99em;
		    transition: 0.25s ease;
		    &:hover {
			     background-color: #f1f1f1;
			     color: #000000;
		    }
		    &:before {
			    display: flex;
			    flex-shrink: 0;
			    content: "";
			    background-color: #fff;
			    width: 1.5em;
			    height: 1.5em;
			    border-radius: 50%;
			    margin-right: 0.375em;
			    transition: 0.25s ease;
			    box-shadow: inset 0 0 0 0.125em #000000;
		    }
	   }
				
	#left_panel 
 .block 
	  #survey_form
			  section {
					 display: flex;
						width: 100%;
						flex-direction: row;
						justify-content: flex-end;
						margin-top: 10px;
						margin-bottom: 10px;
					}
	
		#left_panel 
   .block 
	   section.bottom {
					 display: flex;
						width: 100%;
						flex-direction: row;
						justify-content: center;
						margin-top: 10px;
						
						padding: 10px;
						border-top: 2px var(--grey) dotted;
					}


#left_panel 
  .button {
		  padding: 0.5rem;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left:20px;
			padding-right: 20px;
			color: #ffffff;
			transition: 120ms;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:disabled {
			 background: #aeaeae;
				color: #ffffff;
				cursor: not-allowed;
			}
}

/** text block ==================================================================== **/
#text_content {
 display: flex;
	flex-direction: column;
}

#text_content
  section {
		 display: flex;
			flex-direction: row;
			gap: 60px;
			align-content: flex-start;
			justify-content: flex-start;
			align-items: flex-start;
		}
	.txt2 section  {
	 display: flex;
			flex-direction: row;
	}
	.txt3 section  {
	 display: flex;
			flex-direction: row;
	}

#text_content
  article {
		 display: flex;
			flex-direction: column;
			gap: 1.5rem;
		}
	
#text_content
  figure {
		 display: flex;
		}
		
/** text block2 ==================================================================== **/
#text_content2 {
 display: flex;
	flex-direction: column;
}

#text_content2
  section {
		 display: flex;
			flex-direction: column;
			gap: 20px;
			
		}

#text_content2
  article {
		 display: flex;
			flex-direction: column;
			gap: 1.5rem;
		}
	
#text_content2
  figure {
		 display: flex;
			width: 100%;
		}
#text_content2
  figure
		  img {
		 display: flex;
			width: inherit;
			height: 350px;
			object-fit: cover;
			object-position: center;
		}
/** Misc ========================================================================== **/
.added_date {
  font-weight: 500; 
		color:var(--icon-color);  
		position: relative; 
		padding-left: 1.5rem;
	 &:before {
		 content: ''; 
			background-image: url('/pics/main/date.png'); 
			width: 1rem; 
			height: 1rem; 
			position: absolute; 
			left:0; 
			background-position: center center; 
			background-size: contain;
			}
	}
	
	.print {
  font-weight: 500; 
		color:var(--icon-color);  
		position: relative; 
		padding-left: 1.5rem;
	 &:before {
		 content: ''; 
			background-image: url('/pics/main/print.png'); 
			width: 1rem; 
			height: 1rem; 
			position: absolute; 
			left:0; 
			background-position: center center; 
			background-size: contain;
			}
	}
	.print
	 a {
		  color:var(--icon-color);
				&:hover {
				 color:var(--icon-color);
				}
				&:focus {
				 color:var(--icon-color);
				}
		}

.views {
  font-weight: 500; 
		color:var(--icon-color);  
		position: relative; 
		padding-left: 1.5rem;
	 &:before {
		 content: ''; 
			background-image: url('/pics/main/views.png'); 
			width: 1rem; 
			height: 1rem; 
			position: absolute; 
			left:0; background-position: center center; 
			background-size: contain;
			}
	}
	
	.likes {
  font-weight: 500; 
		color:var(--icon-color);  
		position: relative; 
		padding-left: 1.5rem;
	 &:before {
		 content: ''; 
			background-image: url('/pics/main/likes.png'); 
			width: 1rem; 
			height: 1rem; 
			position: absolute; 
			left:0; background-position: center center; 
			background-size: contain;
			}
	}
	.comments {
  font-weight: 500; 
		color:var(--icon-color);  
		position: relative; 
		padding-left: 1.5rem;
	 &:before {
		 content: ''; 
			background-image: url('/pics/main/comments.png'); 
			width: 1rem; 
			height: 1rem; 
			position: absolute; 
			left:0; background-position: center center; 
			background-size: contain;
			}
	}

.author {
  font-weight: 500; 
		color:var(--icon-color);  
		position: relative; 
		padding-left: 1.5rem;
		&:before {
		  content: ''; 
				background-image: url('/pics/main/author.png'); 
				width: 1rem; 
				height: 1rem; 
				position: absolute; 
				left:0; 
				background-position: center center; 
				background-size: contain;
			}
}

.lnk {
  color: var(--icon-color);
		transition: 150ms;
		&:hover {
		color: var(--hover-color);
		}
  &:after {
		  content: '\00a0\00a0(еще рецепты)'; 
				
			}
}

.added_date.white {
  font-weight: 500; 
		color:#ffffff;  
		position: relative; 
		padding-left: 1.5rem;
	 &:before {
		 content: ''; 
			background-image: url('/pics/main/date_white.png'); 
			width: 1.2rem; 
			height: 1.2rem; 
			position: absolute; 
			left:0; 
			background-position: center center; 
			background-size: contain;
			}
	}

.views.white {
  font-weight: 500; 
		color:#ffffff;  
		position: relative; 
		padding-left: 1.5rem;
	 &:before {
		 content: ''; 
			background-image: url('/pics/main/views_white.png'); 
			width: 1.2rem; 
			height: 1.2rem; 
			position: absolute; 
			left:0; background-position: center center; 
			background-size: contain;
			}
	}
	.likes.white {
  font-weight: 500; 
		color:#ffffff;  
		position: relative; 
		padding-left: 1.5rem;
	 &:before {
		 content: ''; 
			background-image: url('/pics/main/likes_white.png'); 
			width: 1.2rem; 
			height: 1.2rem; 
			position: absolute; 
			left:0; background-position: center center; 
			background-size: contain;
			}
	}

.author.white {
  font-weight: 500; 
		color:#ffffff;  
		position: relative; 
		padding-left: 1.5rem;
		&:before {
		  content: ''; 
				background-image: url('/pics/main/author_white.png'); 
				width: 1.2rem; 
				height: 1.2rem; 
				position: absolute; 
				left:0; 
				background-position: center center; 
				background-size: contain;
			}
}

.CheckedByUs {
		position: relative;
		color: #000000;
		font-weight: 700;
		padding-left: 40px;
		border-bottom: 2px var(--grey) dotted;
		letter-spacing: 3px;
			text-transform:uppercase;
		&:before {
		 content: '';
			width: 40px;
			height: 40px;
			background-image: url('/pics/main/check.png');
			background-position: center center; 
			background-size: contain;
			position: absolute;
			left: 0;
			top:-10px;
		}
	}

.separator {
  display: flex;
		width: 100%;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		border-bottom: 2px var(--grey) dotted;
}

.clip_line {
  white-space:nowrap;
		word-break: break-all;
  overflow:hidden;
		text-overflow: ellipsis;
}

.clip_line2 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
           line-clamp: 3; 
   -webkit-box-orient: vertical;
}

.Hide {
  display: none;
}

#DesktopAcc {
 margin-right: 30px;
}

#main_navigation
	 a.more {
		 display: inline;
			width: auto;
			padding: 0.5rem;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left:20px;
			padding-right: 20px;
			margin-left:20px;
			margin-right: 20px;
			color: #ffffff;
			transition: 120ms;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:focus-within {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:before {
			  content: '+\00a0\00a0\00a0';
					letter-spacing: -2px;
					margin-top: -0.3rem;
					color: #ffffff;
					font-weight: 800;
			}
		}

.NoMobile {
		  display: flex;
		}
 .Mobile {
		 display: none !important;
			}
#acc_x1 {
 display: flex;
	flex-direction: row !important;
	width: 100%;
	justify-content: center;
	gap:1rem;
}
#acc_x2 {
 display: flex;
	flex-direction: row !important;
	width: 100%;
	justify-content: center;
	gap:1rem;
}
#acc_panel_1m {
 display: flex;
	flex-direction: row !important;
	align-items: center;
	gap:1.1rem;
}
#login_panel_1m {
 display: flex;
	flex-direction: row !important;
	align-items: center;
	gap:1.1rem;
}
#header
	 .button_in {
		  display: flex;
				flex-direction: row;
				gap: .2rem;
				align-items: center;
				align-content: center;
				justify-content: center;
		}
		
#menu_btn {
   display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			padding-right: 40px;
			background-image: url('/pics/main/menu.png');
		 background-position: center right;
		 background-repeat: no-repeat;
		&:hover {
		 background-image: url('/pics/main/menu_hover.png');
			
		}
		&:focus-within {
		 background-image: url('/pics/main/menu_hover.png');
			
		}
}

#search_btn {
  display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			padding-right: 40px;
			background-image: url('/pics/main/search.png');
		 background-position: center right;
		 background-repeat: no-repeat;
		&:hover {
		 background-image: url('/pics/main/search_hover.png');
			
		}
		&:focus-within {
		 background-image: url('/pics/main/search_hover.png');
			
		}
		
}

.reg_btn {
  display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			padding-right: 40px;
			margin-right: 20px;
			background-image: url('/pics/main/reg.png');
		 background-position: center right;
		 background-repeat: no-repeat;
		&:hover {
		 background-image: url('/pics/main/reg_hover.png');
			
		}
		&:focus-within {
		 background-image: url('/pics/main/reg_hover.png');
			
		}
}
.reg_btn2 {
  display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			
			
		&:hover {
		 
			
		}
		&:focus-within {
		 
			
		}
}
.login_btn {
  display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			padding-right: 40px;
			background-image: url('/pics/main/login.png');
		 background-position: center right;
		 background-repeat: no-repeat;
		&:hover {
		 background-image: url('/pics/main/login_hover.png');
			
		}
		&:focus-within {
		 background-image: url('/pics/main/login_hover.png');
			
		}
}
.login_btn2 {
  display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			
		&:hover {
		 
			
		}
		&:focus-within {
		 
			
		}
}
.logout_btn {
  display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			padding-right: 40px;
			background-image: url('/pics/main/logout.png');
		 background-position: center right;
		 background-repeat: no-repeat;
		&:hover {
		 background-image: url('/pics/main/logout_hover.png');
			
		}
		&:focus-within {
		 background-image: url('/pics/main/logout_hover.png');
			
		}
}

.logout_btn2 {
  display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			
		&:hover {
		 
			
		}
		&:focus-within {
		 
			
		}
}

.acc_btn {
  display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			padding-right: 40px;
			/*background-image: url('/pics/main/acc.png');*/
		 background-position: center right;
		 background-repeat: no-repeat;
			background-size: 35px 35px !important;
		&:hover {
		 /*background-image: url('/pics/main/acc_hover.png');*/
			
		}
		&:focus-within {
		 /*background-image: url('/pics/main/acc_hover.png');*/
			
		}
}

.acc_btn2 {
  display: flex;
			align-items: center;
				align-content: center;
				justify-content: center;
			color: var(--icon-color) !important;
			font-size: 1.4rem;
			font-weight: 500;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
		 transition: 220ms;
			height: 40px;
			
		&:hover {
		 
			
		}
		&:focus-within {
		 
			
		}
}



#search_btn2 {
  width: 40px;
		height: 40px;
		background-image: url('/pics/main/search.png?new_icon');
		background-position: center center;
		background-repeat: no-repeat;
		transition: 220ms;
		&:hover {
		 background-image: url('/pics/main/search_hover.png');
			background-size: 96% 96%;
		}
		&:focus-within {
		 background-image: url('/pics/main/search_hover.png');
			background-size: 96% 96%;
		}
		
}
#search_btn3 {
  width: 40px;
		height: 40px;
		background-image: url('/pics/main/search.png?new_icon');
		background-position: center center;
		background-repeat: no-repeat;
		transition: 220ms;
		&:hover {
		 background-image: url('/pics/main/search_hover.png');
			background-size: 96% 96%;
		}
		&:focus-within {
		 background-image: url('/pics/main/search_hover.png');
			background-size: 96% 96%;
		}
		
}

.search_inpt {
 padding-left: 1rem;
	padding-right: 1rem;
	width: 50%;
	height: 2.5rem;
	font-size: 1.2rem;
	border: 1px var(--grey) solid;
	border-radius: 8px;
	font-weight: 500;
	font-size: 1.2rem;
}
.search_slct  {
 padding-left: 1rem;
	padding-right: 1rem;
	width: 50%;
	height: 2.5rem;
	border: 1px var(--grey) solid;
	border-radius: 8px;
	font-weight: 500;
	font-size: 1.2rem;
}
.search_slct2  {
 padding-left: 1rem;
	padding-right: 1rem;
	width: 50%;
	height: 2.5rem;
	display: flex;
	flex-direction: row;
	gap:10px;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 1.2rem;
}
.search_slct2 checkbox {width: 2.5rem;height: 2.5rem;}

.comments_area {
  padding-left: 1rem;
	 padding-right: 1rem;
	 width: 100%;
		height: 7rem;
		font-size: 1.1rem;
		border-radius: 8px;
}

.close_btn {
  width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: 220ms;
		color: #383838;
		font-size: 3rem;
		&:hover {
		 color: #008000;
		}
		&:focus-within {
		 color: #008000;
			
		}
}

.search_section {
 display: flex;
	flex-direction: row;
	gap: 1rem;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	max-width: 600px;
	margin-bottom: 6px;
}
#contact_form
 button,
#contact_form2
 button,
#contact_form3
 button {
		 padding: 0.5rem;
			border-radius: 0.5rem;
			border: 0;
			background-color: var(--hover-color);
			padding-left:20px;
			padding-right: 20px;
			color: #ffffff;
			transition: 120ms;
			&:hover {
			 background-color: var(--button-hover-color);
				color: #ffffff;
			}
			&:disabled {
			 background: #aeaeae;
				color: #ffffff;
				cursor: not-allowed;
			}
		}

#contact_form, #contact_form2, #contact_form3 {
 display: flex;
	flex-direction: column;
	width: 100%;
	gap:1rem;
}
#contact_form
 section, 
#contact_form2
 section,
#contact_form3
 section {
	 display: flex;
		width: 100%;
		flex-direction: row;
		gap: 1rem;
		align-items: center;
	}
#contact_form
 section 
	 label,
#contact_form2
 section 
	 label,
#contact_form3
 section 
	 label {
	 display: flex;
		width: 180px;
	}
#contact_form
 section 
	 input,
#contact_form2
 section 
	 input,
#contact_form3
 section 
	 input {
	 display: flex;
		width: 100%;
		padding-left: 1rem;
	 padding-right: 1rem;
	 height: 2.5rem;
	 border: 1px var(--grey) solid;
	 border-radius: 8px;
	 font-weight: 500;
	 font-size: 1.6rem;
	}
	#contact_form
 section 
	 select,
	#contact_form2
 section 
	 select,
	#contact_form3
 section 
	 select {
	 display: flex;
		width: 100%;
		padding-left: 1rem;
	 padding-right: 1rem;
	 height: 2.5rem;
	 border: 1px var(--grey) solid;
	 border-radius: 8px;
	 font-weight: 500;
	 font-size: 1.6rem;
	}
#contact_form
 section 
	 textarea,
#contact_form2
 section 
	 textarea,
#contact_form3
 section 
	 textarea {
	 display: flex;
		width: 100%;
		padding-left: 1rem;
	 padding-right: 1rem;
	 height: 5.5rem;
	 border: 1px var(--grey) solid;
	 border-radius: 8px;
	 font-weight: 500;
	 font-size: 1.6rem;
	}
	
#contact_form
 section.x3,
#contact_form2
 section.x3.
#contact_form3
 section.x3 {
	 display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		
	}
	
	#contact_form
 section.x4.
 #contact_form2
 section.x4,
	#contact_form3
 section.x4 {
	 display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		
	}
	
	#contact_form
 section.x4 
	 input ,
	#contact_form
 section.x4 
	 label,
	#contact_form
 section.x4 
	 a,
	#contact_form2
 section.x4 
	 input ,
	#contact_form2
 section.x4 
	 label,
	#contact_form2
 section.x4 
	 a,
	#contact_form3
 section.x4 
	 input ,
	#contact_form3
 section.x4 
	 label,
	#contact_form3
 section.x4 
	 a {
	 display: inline;
		width: auto;
		
	}
	#contact_form
 section.x4 
	 input,
	#contact_form2
 section.x4 
	 input,
	#contact_form3
 section.x4 
	 input {
		 width: 1rem;
			height: 1rem;
		}
	#contact_form
 section.x4,
	#contact_form2
 section.x4,
	#contact_form3
 section.x4 {
	 display: flex;
		width: 100%;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}
	
	#contact_form
 section.x2,
 #contact_form2
 section.x2,
	#contact_form3
 section.x2 {
	 display: flex;
		width: 100%;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		
	}
	
	.x2x
	 label {
		 display: flex;
			width: 100% !important;
			flex-direction: column;
			justify-content: flex-start;
		}





section.full_new {
	   
				display: flex;
				flex:1;
				min-width: 100%;
	width: 100% !important;
	flex-direction: column;
	gap: 10px;
}
section.full_new figure {
	            display: flex;
				position: relative;
				width: 100%;
	            max-width: 800px;
				border-radius:1rem; 
				overflow: hidden;
		        box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
}
section.full_new figure img {
	display: block;
	width: 100%;
	height: auto;
}

section.full_new h2, section.full_new h3, section.full_new h4, section.full_new h5 {
	   
				display: flex;
				flex:1;
				min-width: 100%;
}
section.small_new {
	   
				display: flex;
				flex:1;
				min-width: 100%;
	width: 100% !important;
	           flex-direction: row;
	           gap: 30px;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
}
section.small_new figure {
	            display: flex;
				position: relative;
				width: 50%;
	            max-width: 300px;
				border-radius:1rem; 
				overflow: hidden;
		        box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
}
section.small_new figure img {
	display: block;
	width: 100%;
	height: auto;
}
section.small_new section {
	            display: flex;
	            flex:1;
	            width: 100%;
	flex-direction: column;
	
}
section.small_new h2, section.small_new h3, section.small_new h4, section.small_new h5 {
	   
				display: flex;
				flex:1;
				min-width: 100%;
}
	
/** @Media ======================================================================== **/
@media screen and (min-width: 1px) and (max-width: 1050px) {   /*Mobile devices*/
  /** authors =================================================== **/
	
section.small_new {
	  
	           flex-direction: column;
	           
}
	
	
	
#authors_list {
  display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		align-items: stretch;
		justify-content: space-between;
}
#authors_list 
  .list {
    display: flex;
		  flex-direction: column;
				align-items: center;
				
				width: 48%;
				gap: 1rem;
				margin-bottom: 1rem;
}

#authors_list 
  .list 
		  figure {
    display: flex;
				width: 100%;
				align-items: flex-start;
				position: relative;
}

#authors_list 
  .list 
		  figure 
				  img {
    display: flex;
				width: 100%;
				object-fit: cover;
				object-position: center center;
				height: auto;
				border-radius: 100%; overflow: hidden; border: 1px var(--grey) dashed;
}
#authors_list .Main {display: flex; flex-direction: column; align-content: stretch; justify-content: stretch; align-items: stretch;}
#authors_list h3 {text-align: center; font-size: 1rem;}

#authors_list .more2 {font-size: 0.6rem;}


 .links_block {
  display: flex;
		flex-direction: column;
			
		width: 100%;
		flex: 1;
}
.links_block 
  .list1 {
    display: flex;
		  flex-direction: column;
				width: 100%;
				gap: 10px;
				margin-bottom: 1rem;
}
.links_block 
  .list1 
		  figure 
				  img {
     height: 180px !important;
}

 .NoMobile {
		 display: none !important;
			}
 .Mobile {
		 display: flex !important;
			}
 #contact_form
 section.x3,
	#contact_form2
 section.x3,
 #contact_form3
 section.x3 {
	 display: flex;
		width: 100%;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		
	}
	#contact_form
 section.x4 
	 input,
	#contact_form2
 section.x4 
	 input.
	#contact_form3
 section.x4 
	 input {
		 width: 2rem;
			height: 2rem;
		}
	
 #search_inpt {
 height: 1.9rem;
	font-size: 1rem;
}
#search_slct  {
 height: 1.9rem;
	font-size: 1rem;
}

.Full {
			width: 100%; 			
	}
.Content {
   width: 90%;   
			flex-direction: column-reverse;
			justify-content: center;
			gap: 40px;
	}
	#left_panel {
   max-width: 100%;
 }
	.content_block {
   flex-direction: column;
			gap: 20px;
 }
	.content_block1 {
  width: 100%;
	 max-width: 100%;
}
.content_block2 {
  width: 100%;
	 max-width: 100%;
		justify-content: flex-start;
}
.content_block2 
 figure {
  width: 45%;
		display: flex;
		justify-content: flex-start;
}
.clip_line {
  white-space: normal;
		word-break: normal;
}
.Data2 p.clip_line { /* hide small description of articles on homepage in mobile view */
  display: none;
}

.line_break {
  max-width: 100%;
  -webkit-line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
#main {
  display: flex;
		width: 100%;
	 flex:1;
	 min-width: 300px;
	 flex-direction: column; 
	 gap: 25px;
}
#top_content_block,
#top_content_block2,
#text_content_block1,
#text_content_block2,
#text_content_block3 {
	  flex-direction: column;
			gap: 1rem;
}
	
#top_content_block 
  figure,
#top_content_block2 
  figure,
#text_content_block1 
  figure,
#text_content_block2 
  figure,
#text_content_block3 
  figure {
	   width: 100%;
}
#top_content_block 
  article,
#top_content_block2 
  article,
#text_content_block1 
  article,
#text_content_block2 
  article,
#text_content_block3 
  article {
	   width: 100%;
				gap: 2rem;
				min-height: auto;
}

#top_content_block 
 figure
	 img,
#top_content_block2 
 figure
	 img,
	#text_content_block1
	figure
	 img,
	#text_content_block2
	figure
	 img,
	#text_content_block3
	figure
	 img {
	  height: 30vh;
}
#text_content
  section {
		 display: flex;
			flex-direction: column-reverse;
			gap: 10px;
}
.txt2
  section {
		 display: flex;
			flex-direction: column !important;
			
}
.txt3
  section {
		 display: flex;
			flex-direction: row !important;
			gap: 1rem !important;
}
#text_content
  figure {
		 display: flex;
			width: 100%;
}
#text_content
  figure 
		  img {
		 display: flex;
			max-width: 100%;
	}
	
#banners {display: none;}


	
	/** Footer ======================================================================== **/
#footer {
   display: flex; 
			width: 100%; 
			flex-direction: column;
			justify-content: center;
			align-content: center;
			align-items: center;
			margin-top: 2rem;
			margin-bottom: 2rem;
			padding-top: 10px;
			border-top: 2px var(--grey) dotted;
			gap:1.8rem;
}
#footer
 .FooterIn {
	  width: 90%;
			min-width: 300px; 
			display: flex;
			justify-content: space-between;
			align-content: flex-start;
			align-items: flex-start;
			gap: 20px;
			flex-direction: column;
	}
#footer 
  figure {
		  display: none;
		}

#footer
 #footer_links {
	 display: flex;
	 flex-direction: column;
		gap:1rem;
	}
	#footer
 #footer_links 
	section {
	 display: flex;
		flex-direction: column;
		gap:1rem;
	}
	#footer
 #footer_social {
	 display: flex;
		flex-direction: row;
		gap:6px;
	}
	#footer
 #footer_social
	 img {
	  width: 30px;
	}
	
	#footer
	 a {
		 color: #000000;
			font-weight: 100 !important; 
			&:hover {
			 color: var(--icon-color);
			}
			&:focus {
			 color: var(--icon-color);
			}
		}

/*header ===================================================== */
	 #Nav1Links,
		#Nav2Links,
		#Nav3Links,
		#Nav4Links,
		#Nav5Links {
		 display: none;
			flex-direction: column;
		}
		
		.NavShow {
		  display: flex !important;
		}
		
.navigation_links {
  
		flex-direction: column;
		gap: 0;
}

.navigation_links 
  nav 
		 span.sub_title_spacer {
			  line-height: 0;
					display: none;
					padding: 0;
					padding-left:0;
					padding-right:0;
					border-radius:0;
			}

.navigation_links 
  nav 
		 a.sub_title {
					padding-top: 0 !important;
					
			}
.navigation_links 
  nav 
		 span.sub_title {
					display: none;
			}
	.navigation_links 
  nav 
		 a.first {
					padding-top: 0 !important;
			}
			
	.MobileMenuTitle 
	  button {
	  display: flex;
			justify-content: center;
			align-content: center;
			align-items: center;
			font-size: 1.2rem;
			font-weight: 700;
			border-radius: 50%;
			color: #000000;
			/*background-color: var(--hover-color);*/
			width: 1.4rem;
			height: 1.4rem;
	 }
	
	.MobileMenuTitle 
	  a,
	.MobileMenuTitle 
	  span {
	  display: flex;
			width: 100%;
			font-family: "Lobster", sans-serif;
			letter-spacing: 2px;
			color: var(--hover-color);
			font-size: 1.6rem;
	 }
		
	.MobileMenuTitle {
	  margin-top: 2rem;
			
	}
	
	.main_navigation_opened {
  
		min-height: auto;
		max-height: 90vh;
		}
		
		
		/*======================*/
		#text_content2
  figure
		  img {
		 display: flex;
			width: inherit;
			height: 250px;
			object-fit: cover;
			object-position: center;
		}
		
		#cats {
  display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		
		align-items: stretch;
		justify-content: space-between;
}

#cats 
  .cat {
    display: flex;
		  flex-direction: column;
				align-items: flex-start;
				
				width: 100%;
				gap: 1rem;
				margin-bottom: 1rem;
}

#recipe_list {
  display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		
		align-items: stretch;
		justify-content: space-between;
}
#recipe_list 
  .list {
    display: flex;
		  flex-direction: column;
				align-items: center;
				
				width: 100%;
				gap: 1rem;
				margin-bottom: 1rem;
}

#recipe_list 
  .list 
		  figure {
    display: flex;
				width: 100%;
				align-items: flex-start;
}

#recipe_list 
  .list 
		  figure 
				  img {
    display: flex;
				width: 100%;
				object-fit: cover;
				object-position: center center;
				height: 250px;
}
#recipe_list 
  .list 
		  .Data {
    display: flex;
				flex-direction: column;
				width: 100%;
				align-content: center;
				font-size: 1rem;
				justify-content: flex-start;
				gap: 0.7rem;
}


#messages_list 
  .list {
    display: flex;
		  flex-direction: column;
				align-items: flex-start;
				gap: 10px;
				width: 100%;
				border-bottom: 2px var(--grey) dotted;
				padding-bottom: 10px;
}





#comments_list {
  display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		
		align-items: stretch;
		justify-content: space-between;
}
#comments_list 
  .list {
    display: flex;
		  flex-direction: column;
				align-items: center;
				
				width: 100%;
				gap: 1rem;
				margin-bottom: 1rem;
}

#comments_list 
  .list 
		  figure {
    display: flex;
				width: 100%;
				align-items: flex-start;
}

#comments_list 
  .list 
		  figure 
				  img {
    display: flex;
				width: 100%;
				object-fit: cover;
				object-position: center center;
				height: 250px;
}
#comments_list 
  .list 
		  .Data {
    display: flex;
				flex-direction: column;
				width: 100%;
				align-content: center;
				font-size: 1rem;
				justify-content: flex-start;
				gap: 0.7rem;
}

#article_block2
	 #list_of_ingredients {
			  min-width: 100%;
					display: flex;
					flex-direction: column;
			}
	#article_block2 
	  ul {
	   width: 100%;
    
   }
			
	#main
	 .main_image {
		 display: flex;
			flex-direction: column;
		}
			
			
	#main
 .main_image 
	  figure {
	   display: block;
				height: 250px;
				width: 100%;
				min-width: auto;
				border-radius:1rem; 
				overflow: hidden;
		  box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
				position: relative;
	}
	
	#main
 .main_image 
	  figure 
			 img {
	    display: inline-block;
				 width: 100%;
					height: 250px;
					z-index: 1;
					object-fit: cover;
					object-position: center center;
	}
	
	.share_panel1,
	.share_panel1x
	{
	 display: flex;
					flex-direction: column;
					align-items: center;
					align-content: center;
				 
					gap: 10px;
	}
	.share_panel2 {
	 display: none;
	}
	#custom_window {
	 display: none !important;
	}
	.share_panel3 {
	 display: flex;
					flex-direction: column;
					align-items: center;
					align-content: center;
				 
					gap: 10px;
	}
	
	#content_steps
	figure.small {
	   display: inline;
				float: left;
				position: relative;
				width: 100%;
				border-radius:1rem; 
				overflow: hidden;
		  box-shadow:0 0.5rem 0.75rem 0 rgba(0,0,0,0.06), 0 0 1rem 0 rgba(204,204,204,0.08); 
		  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(246,246,246,1) 95%, rgba(246,246,246,1) 100%);
	}
	
	#content_steps 
	 figure 
		 img {
	   display: flex;
				width: 100%;
	}
	
	#content_steps 
	 figure.small 
		 img {
	   display: flex;
				width: 100%;
	}
	
	#article_block2 
	  ul {
	   width: 100%;
    
   }
			
	.main_data 
	  ul {
			 display: flex;
				flex-direction: column;
				justify-content: space-between;
				list-style-type: none;
				align-items: stretch;
				gap: 0.3rem;
			}
			
		.main_data 
	  li {
			 display: flex;
				flex-direction: row;
				align-items: center;
				align-content: center;
				gap: 0.8rem;
				flex-grow: 1;
				border-right: 0;
				
				&:last-child {
				 border-right: 0;
				}
			}
			
		.main_data 
	  li
			 div {
				 display: flex;
					align-items: flex-start;
				 flex-direction: column;
					gap: 0.2rem;
				}
			.main_data 
	  li
			 div
				 strong {
				 display: none;
				}
				
			.main_data
			 img {
				 width: 1.2rem;
					margin-top: 0;
					height: auto;
				}
				

		
	#btns {
 display: flex;
	flex-direction: column;
	gap: 1rem;
}
	}




@media screen and (min-width: 1251px)  {                                    /*Desktops, large screens*/
  
}

.logo {
 border-radius: 0 !important;
}
a {cursor: pointer !important;}