.Recipe {margin-bottom:20px}


.Recipe .head {padding:10px; background-color:rgba(255,255,255,0.5); margin-bottom:20px}


.Recipe .head > [itemprop='image'] {flex-grow:1; margin-bottom:20px}


@media screen and (min-width:684px) {
	
	.Recipe .head {display:flex;}
	.Recipe .head > [itemprop='image'] {margin-right:20px; margin-bottom:0px}

}

.Recipe [itemprop='image'] img {display:block; box-shadow:5px 5px 10px rgba(0,0,0,0.1); width:100%}

.Recipe .head > * {flex-basis:0px}
.Recipe .head > .main-info {flex-grow:2}

.Recipe [itemprop='recipeCuisine']::after {content:' cuisine';}

.Recipe h1 {margin-bottom:20px}



.Recipe .main-info > div[class] {margin-left:-10px; margin-right:-10px}
.Recipe .main-info > div[class] > * {margin-left:10px; margin-right:10px; margin-bottom:10px}

.Recipe .authorship {display:flex; margin-bottom:10px; flex-wrap:wrap; justify-content:space-between;}
	.Recipe .authorship > * { flex-basis: auto; flex-shrink: 1; }
.Recipe .authorship * {font-size:13px}


.Recipe [itemprop='author'] > [itemprop='name'] {font-weight:bold;}
.Recipe [itemprop='author'] > [itemprop='name']::before {content:'by '; font-weight:normal;}


.Recipe [itemprop='datePublished']::before {content:'Published '}
.Recipe [itemprop='datePublished'] { color:rgba(0,0,0,0.4);}
.Recipe [itemprop='datePublished'] span {display:none}
.Recipe [itemprop='datePublished'][data-jsmy]::after {content:attr(data-jsmy);}


.Recipe .timings {display:flex; margin-bottom:20px; flex-wrap:wrap; justify-content:space-between; font-size:12px; color:#397100; text-transform:uppercase}
.Recipe .timings > * {flex-basis:auto; flex-shrink:1;}


.Recipe [itemprop='prepTime']::before {content:'\01F52A  PREP: '; font-weight:bold}
.Recipe [itemprop='cookTime']::before {content:'\01F552  COOK: '; font-weight:bold}
.Recipe [itemprop='recipeYield']::before {content:'\01F374  '; font-weight:bold}


.Recipe [itemprop='description'] {margin-top:10px; margin-bottom:20px; color:grey}



.Recipe [itemtype$='NutritionInformation'] {display:flex; flex-wrap:wrap; font-size:12px}

.Recipe [itemtype$='NutritionInformation']::before {display:block; width:100%; margin-bottom:5px; content:'Nutrition in this recipe:'; padding-left:4px; color:rgba(0,0,0,0.8)}

.Recipe [itemtype$='NutritionInformation'] > * {margin:4px; text-align:center; background-color:white; padding-bottom:5px;
												border-top-left-radius:7px; border-top-right-radius:7px; overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,0.1);
												min-width:50px;
}

.Recipe [itemtype$='NutritionInformation'] > *::before { display:block; padding-top:5px; padding-left:10px; padding-right:10px; padding-bottom:5px; background-color:#397100; color:white; margin-bottom:5px }


div[itemtype$='NutritionInformation'] > [itemprop='calories']::before {content:'kcal'}
div[itemtype$='NutritionInformation'] > [itemprop='carbohydrateContent']::before {content:'carbs'}
div[itemtype$='NutritionInformation'] > [itemprop='fatContent']::before {content:'fat'}
div[itemtype$='NutritionInformation'] > [itemprop='fiberContent']::before {content:'fibre'}
div[itemtype$='NutritionInformation'] > [itemprop='proteinContent']::before {content:'protein'}
div[itemtype$='NutritionInformation'] > [itemprop='saturatedFatContent']::before {content:'saturates'}
div[itemtype$='NutritionInformation'] > [itemprop='sodiumContent']::before {content:'sodium'}
div[itemtype$='NutritionInformation'] > [itemprop='sugarContent']::before {content:'sugar'}


.Recipe .ingredients {margin-bottom:20px}

@media screen and (min-width:768px) {
	.Recipe .method { display: flex; }
	.Recipe .method > * {flex-basis:auto; flex-grow:1; flex-shrink:1}

	.Recipe .ingredients {margin-right:20px; margin-bottom:0px; max-width:calc(50% - 10px)}
}


.Recipe .method > * {background-color:white; padding:15px; border:1px solid lightgrey}
.Recipe .method > *::before {display:block; font-size:20px; padding-bottom:5px; border-bottom:1px dotted lightgrey; margin-bottom:15px}

.Recipe .ingredients::before {content:'Ingredients';}
.Recipe .ingredients > * {padding:9px}
.Recipe .ingredients > *:nth-child(2n-1) {background-color:rgba(102,204,0,0.08)}


.Recipe [itemprop='recipeInstructions']::before {content:'Instructions'}