/*RECIPE CARD ----------------------------------------------------------------*/
 
/* 0px - 310px */
@media only screen and (max-width: 310px) {
	.recipe_card_div {
	    margin-top: 5px;
	    margin-bottom: -40px;
	    width: 100%;
	}
	.recipe_card {
	    gap: 0px 0px;
	    font-size: xx-small;
	    display: flex;
	    flex-flow: wrap;
	    justify-content: space-around;
	}
	h1.s-title{
		font-size: large;
	}
	.gri{
		grid-template-rows: 16px 15px;
		width: 90px;
	}
	.ico{
		font-size: 12px;
		line-height: 16px;
		width: 17px;
    	height: 16px;
	}

	.fux {
		line-height: 16px;
		font-size: 10px;
		font-style: normal;
	}
	.valx{
		justify-self: start;
		font-weight: 500;
		font-size: 11px;
	}

	h2.s-tagline{
		font-size: 13px !important;
	}
}

/* 311px - 360px */
@media only screen and (min-width: 311px) and (max-width: 360px) {
	.recipe_card_div {
	    margin-top: 5px;
	    margin-bottom: -40px;
	    width: 100%;
	}
	.recipe_card {
	    gap: 0px 0px;
	    font-size: xx-small;
	    display: flex;
	    flex-flow: wrap;
	    justify-content: space-around;
	}
	h1.s-title{
		font-size: large;
	}

	.gri{
		grid-template-rows: 16px 15px;
		height: 32px;
		margin-bottom: 5px;
		width: 95px;
	}
	.ico{
		font-size: 12px;
		line-height: 16px;
		width: 17px;
    	height: 16px;
	}

	.fux {
		line-height: 16px;
		font-size: 11px;
		font-style: normal;
	}
	.valx{
		justify-self: start;
		font-weight: 500;
	}

	h2.s-tagline{
		font-size: 13px !important;
	}
	
}

/* MOBILE 361px - 600px */
@media only screen and (min-width: 361px) and (max-width: 600px) {
	.recipe_card_div { 
		height: 100px;
		margin-top: 5px;
/*		padding-left:3%;*/
	}
	.recipe_card { 
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 0.5fr 0.5fr;
		gap: 0px 0px;
		grid-auto-flow: column;
		grid-template-areas:
		"preparazione difficolta dosi"
		"costo cucina calorie";
		padding-top: 10px;
	}
	.gri{
		grid-template-rows: 16px 15px;
		height: 32px;
		width:100%;
		padding: 5px;
		margin-bottom: 10px;
	}
	.ico{
		font-size: 16px;
		line-height: 16px;
		width: 17px;
    	height: 16px;
	}
	.fux {
		line-height: 16px;
		font-size: 13px;
		font-style: normal;
	}
	.valx{
		justify-self: start;
		font-size: 14px;
		line-height: 15px;
		font-weight: 600;
	}
}

/* TABLET 601px - 991px */
@media only screen and (min-width: 601px) and (max-width: 991px) {
	.single-header-columns {
		align-items: start !important;
	}
	.single-header-left {
		margin-top: 10px;
	}
	.recipe_card_div { 
		margin-top: 10px;
		padding-bottom:10px;
	}
	.recipe_card {
    	display: flex;
    	flex-flow: wrap;
    	justify-content: space-around;
	}
	.gri{
		grid-template-rows: 25px 17px;
		height: 42px;
		padding: 3px;
	}
	.ico {
		font-size: 19px;
		line-height: 25px;
		width: 24px;
    	height: 26px;
	}
	.fux {
		font-size: 14px;
	}
	.valx{
		justify-self: start;
		font-weight: 600;
		font-size: 14px;
	}
}

/* LANDSCAPE 992px - 1245px */
@media only screen and (min-width: 992px) and (max-width: 1245px) {
	.single-header-columns {
		align-items: start !important;
	}
	.single-header-left {
		margin-top: 10px;
	}
	.recipe_card_div { 
		padding-bottom: 10px;
	}
	.recipe_card {  
		display: flex;
   	flex-flow: wrap;
	}
	.gri{
		grid-template-rows: 25px 17px;
		width: 105px;
	}
  .ico{
		font-size: 18px;
		line-height: 25px;
	}

	.fux {
		line-height: 25px;
		font-size: 13px;
		font-style: normal;
		
	}
	
	.valx{
		justify-self: start;
		font-size: 14px;
		font-weight: 600;
	}
	
}

/* DESKTOP 1246px - 1300px*/
@media only screen and (min-width: 1246px) and (max-width: 1300px) {
	.single-header-columns {
		align-items: start !important;
	}
	.single-header-left {
		margin-top: 38px;
	}
	.recipe_card_div { 
		position: absolute;
		top: 70%;
		width: 100%;
		max-width: 720px;
		padding-bottom:10px;
	}
	.recipe_card {  
		display: flex;
    flex-flow: wrap;
    justify-content: space-around;
	}
	.gri{
		grid-template-rows: 30px 22px;
		height: 52px;
		padding: 5px;
	}
	.ico{
		font-size: 20px;
		line-height: 30px;
	}
	.fux {
		line-height: 30px;
		font-size: 16px;
		font-style: normal;
	}
	.valx{
		justify-self: start;
		font-size: 18px;
		font-weight: 600;
	}
}

/* DESKTOP 1301px - */
@media only screen and (min-width: 1301px) {
	.single-header-columns {
		align-items: start !important;
	}
	.single-header-left {
		margin-top: 38px;
	}
	.recipe_card_div { 
		position: absolute;
		top: 73%;
		width: 60%;
		max-width: 900px;
		background:white;
		padding-bottom: 5px;
	}
	.recipe_card {  
		display: flex;
	    flex-flow: wrap;
	    justify-content: space-around;
	}
	.gri{
		grid-template-rows: 30px 22px;
		height: 52px;
		padding: 5px;
	}
	.ico{
		font-size: 20px;
		line-height: 30px;
	}
	.fux {
		line-height: 30px;
		font-size: 16px;
		font-style: normal;
	}
	.valx{
		justify-self: start;
		font-size: 18px;
		font-weight: 600;
	}
}


.preparazione {  
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0px 5px;
	grid-auto-flow: row;
	grid-template-areas:
	"icona_preparazione titolo_preparazione"
	". valore_preparazione";
	grid-area: preparazione;
}
.icona_preparazione {
	justify-self: center;
	align-self: self-end;
	grid-area: icona_preparazione;
	color: rgb(237, 9, 111);
}
.titolo_preparazione {
	justify-self: start;
	align-self: self-end;
	grid-area: titolo_preparazione;
}
.valore_preparazione {
	
	align-self: self-end;
	grid-area: valore_preparazione;
}


.difficolta {  
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0px 5px;
	grid-auto-flow: row;
	grid-template-areas:
	"icona_difficolta titolo_difficolta"
	". valore_difficolta";
	grid-area: difficolta;
}
.icona_difficolta {
	justify-self: center;
	align-self: self-end;
	grid-area: icona_difficolta;
	color: rgb(237, 9, 111);
	
}
.titolo_difficolta {
	justify-self: start;
	align-self: self-end;
	grid-area: titolo_difficolta;
}
.valore_difficolta {
	
	align-self: self-end;
	grid-area: valore_difficolta;
}


.dosi {  
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0px 5px;
	grid-auto-flow: row;
	grid-template-areas:
	"icona_dosi titolo_dosi"
	". valore_dosi";
	grid-area: dosi;
}
.icona_dosi {
	justify-self: center;
	align-self: self-end;
	grid-area: icona_dosi;
	color: rgb(237, 9, 111);
	
}
.titolo_dosi {
	justify-self: start;
	align-self: self-end;
	grid-area: titolo_dosi;
}
.valore_dosi {
	
	align-self: self-end;
	grid-area: valore_dosi;
}


.costo {  
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0px 5px;
	grid-auto-flow: row;
	grid-template-areas:
	"icona_costo titolo_costo"
	". valore_costo";
	grid-area: costo;
}
.icona_costo {
	justify-self: center;
	align-self: self-end;
	grid-area: icona_costo;
	color: rgb(237, 9, 111);
}
.titolo_costo {
	justify-self: start;
	align-self: self-end;
	grid-area: titolo_costo;
}
.valore_costo {
	
	align-self: self-end;
	grid-area: valore_costo;
}


.stagione {  
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0px 5px;
	grid-auto-flow: row;
	grid-template-areas:
	"icona_stagione titolo_stagione"
	". valore_stagione";
	grid-area: stagione;
}

.icona_stagione {
	justify-self: center;
	align-self: self-end;
	grid-area: icona_stagione;
	color: rgb(237, 9, 111);
}
.titolo_stagione {
	justify-self: start;
	align-self: self-end;
	grid-area: titolo_stagione;
}
.valore_stagione {
	
	align-self: self-end;
	grid-area: valore_stagione;
}


.cucina {  
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0px 5px;
	grid-auto-flow: row;
	grid-template-areas:
	"icona_cucina titolo_cucina"
	". valore_cucina";
	grid-area: cucina;
}
.icona_cucina {
	justify-self: center;
	align-self: self-end;
	grid-area: icona_cucina;
	color: rgb(237, 9, 111);
}
.titolo_cucina {
	justify-self: start;
	align-self: self-end;
	grid-area: titolo_cucina;
}
.valore_cucina {
	
	align-self: self-end;
	grid-area: valore_cucina;
}


.calorie {  
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0px 5px;
	grid-auto-flow: row;
	grid-template-areas:
	"icona_calorie titolo_calorie"
	". valore_calorie";
	grid-area: calorie;
}
.icona_calorie {
	justify-self: center;
	align-self: self-end;
	grid-area: icona_calorie;
	color: rgb(237, 9, 111);
}
.titolo_calorie {
	justify-self: start;
	align-self: self-end;
	grid-area: titolo_calorie;

}
.valore_calorie {
	
	align-self: self-end;
	grid-area: valore_calorie;
}





/*RECIPE TABLE ----------------------------------------------------------------*/
.interbar {
	height: 30px;
	width: 100%;
	font: 400 21px/21px 'Times New Roman';
	line-height: 26px;
	color:rgb(237, 9, 111); /*da modificare*/
	font-size: 21px;
	font-style: normal;
	/*font-weight: bold;*/
	display: block;
	padding-top: 2px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-bottom: 15px;
	margin-top: 25px;
	text-transform: uppercase;
	text-align: center;
}
.entry-content table {
	border: 0px !important;
	margin-bottom: 30px;
}

.table {
	width: 100%;
	margin-bottom: 20px;
	text-align: center !important;
	border: 0px !important;
}

tr th:only-of-type {
	text-align: left;
}

tr td ul li {
	text-align: left;
}

.table>tbody>tr>th, .table>tbody>tr>td {
	padding: 8px;
	vertical-align: top;
	border-top: 0px !important;
	border-right: 1px dotted #999 !important;
	border-bottom: 0px !important;
	width: 33%;
}

.table>tbody>tr>th, .table>tbody>tr>td {
	border-right: 0px !important;
}

.table>tbody>tr>th:last-child, .table>tbody>tr>td:last-child {
	border-right: 0px !important;
}

.entry-content table>tbody>tr>td:first-child, .entry-content table>tbody>tr>th:first-child{
	border-left:0px;
}

th {
	text-align: center;
}
h2.h2-instructions, .intermedio {
/*	font-size: 18px;*/
	text-align: center;
/*	font-weight: 500;*/
}

.ico{
	color:rgb(237, 9, 111);
}

/**/

p.li-subtitle{
	text-align:left;
	font-weight: bold;
}


/* .entry-content img.aligncenter {
	margin: 15px auto 25px;
} */

/* .entry-content img.aligncenter {
	margin-bottom: 0px !important;
}

.entry-content p {
    margin-bottom: 17px;
} */

.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5,
 .entry-content h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.entry-content.rbct ul {
	list-style: disc;
	line-height: normal;
	margin-bottom: 17px;
	padding-inline-start: 40px;
}		

.entry-content.rbct li {
   	margin-bottom: 0.1rem;
}







/*--- CSS Pulsante Vota -----------------------------*/

.single-meta {
    flex-flow: row !important; 
    }

.single-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.single-meta > * {
    width: auto !important;
    }

.smeta-in {
    flex: 1;
}

.vota-style {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}


.vota-style {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.vota-style a {
    display: inline-flex;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    font-family: inherit;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #ed096f;
    width: fit-content;
}

.vota-style .vota-bg-white {
    background-color: white;
    color: #ed096f;
    padding: 3px 6px;
    display: inline-block;
}

.vota-style .vota-bg-fucsia {
    background-color: #ed096f;
    color: white;
    padding: 3px 7px;
    display: inline-block;
    transition: background 0.3s ease;
}

.vota-style a:hover .vota-bg-fucsia {
    background-color: #b51151;
}

/*---CSS dimensione 100 gr in ricetta vicino calorie ---*/
.calorie100gr{
	font-size:10px;
}

/* TEST CONTENT VISIBILITY */
@media (max-width: 1024px) {
  body.content-visibility-on .entry-content {
    content-visibility: auto;
    contain-intrinsic-size: 1500px;
  }
}

/*TEST 1200-900*/

img[data-skip-lazy][width="900"][height="1200"] {
  aspect-ratio: 3 / 4;
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
img[data-skip-lazy][width="630"][height="945"] {
  aspect-ratio: 2 / 3;
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}


p.description {
  margin: 0 !important;
}

.consigli-varianti-conservazione a {
    font-weight: var(--hyperlink-weight, 700);
    font-style: var(--hyperlink-style, normal);
    -webkit-transition: var(--effect);
    transition: var(--effect);
    color: var(--hyperlink-color, inherit);
    text-decoration-color: var(--hyperlink-line-color, transparent);
    text-decoration-line: underline;
    text-underline-offset: 1px;
}