/* *
*
RECIPES UP TO XL
*
* */
main{
background-color: #e8e8e8;
}
.productsList.recipes{
padding:0px .5rem;
background-color:transparent;
}
.grid.recipe.productSnip {
width: 100%;
border:none;
margin-bottom:48px;
background-color:transparent;
}
.recipe.productSnip .media{
display:block;
height:auto;
}
.recipes .recipe.productSnip .media img{
width:100%;
height:auto;
margin-bottom:0px;
border: 8px solid #fff;
}
.recipe.productSnip .media .media-body{
text-align: left;
padding: 1rem;
width: 90%;
margin: 0px auto;
display: inline-block;
position: relative;
top: -45px;
left: -5px;
background-color: #fff;
border-left: 4px solid #1c383f;
transition:all .25s;
}
.recipe.productSnip .media .media-body h3{
font-family: 'gothamMedium';
font-size: 1.1rem;
color: #1c383f;
}
.recipe.productSnip .media .media-body p{
margin:.5rem 0rem;
}
.recipe.productSnip .media .media-body p span{
font-size: 14px;
font-family: 'gothamMedium';
color: #fff;
padding: 3px 6px;
margin-right: 6px;
background-color: #8cc026;
}
.recipe.productSnip .media .media-body p a{
font-family: 'gothamLight';
}
.recipes .block-30px-h.blueBgrnd a{
font-family:'gothamLight';
font-size:16px;
color:#fff;
text-align:center;
vertical-align:middle;
display:table-cell;
transition:all .2s;
}


.recipeHolder{
padding:15px;
}
.recipeBasics{
height:135px;
padding:.5rem;
margin-bottom:1rem;
}
.recipeBasics .basic{
text-align:center;
width:32%;
display:inline-block;
position:absolute;
top:5px;
}
.recipeBasics .basic:first-of-type{
left:0px;
}
.recipeBasics .basic:nth-child(even){
left:33%;
}
.recipeBasics .basic:nth-child(3n+0){
left:66%;
}

.recipeBasics .basic img{
height:60px;
margin-bottom:.5rem;
}

.recipeBasics .basic p{
font-family:'calendusPregular';
font-size:11px;
font-weight:bold;
text-align:center;
color:#fff;
margin-bottom:.25rem;
}
.recipeBasics .basic p:last-of-type{
margin-bottom:0px;
}
.recipeBasics .basic p.recipeDetails {
font-family: 'gothamMedium';
font-size:10px;
}
.recipeHolder .recipeTitle{
padding:0px;
}
.recipeHolder .recipeTitle h2{
font-size:1.5rem;
color:#1c383f;
}
.recipeHolder{
border-bottom:2px dotted #1c383f;
margin-bottom:1rem;
}
.recipeHolder .ingredients ul.ingredientsList{
list-style-type:square;
padding-left:15px;
}
ul.ingredientsList li{
font-size:.85rem;
margin-bottom:.5rem;
}

.recipeHolder .ingredients h3, .recipeHolder .directions h3{
font-family:'calendusPregular';
font-size:1.2rem;
color:#1c383f;
margin-top:.5rem;
}

.recipeHolder .directions p{
font-size:1.1rem;
}






/* *
*
RECIPES LG UP
*
* */
@media (min-width: 992px){
.grid.recipe.productSnip {
width: 49%;
display: inline-block;
}
.recipe.productSnip .media{
height:425px;
}
}






/* *
*
RECIPES XL UP
*
* */
@media (min-width: 1200px){
.recipeHolder{
padding:0px 0px 1rem;;
}
.productsList.recipes {
max-width: 100%;
flex: 0 0 100%;
text-align: center;
}
.grid.recipe.productSnip {
width: 60%;
}
.recipe.productSnip .media .media-body {
left:-25px;
}
.productsList.recipes .productSnip .media h3{
font-size:1.3rem;
line-height:1;
transition:all .25s;
}
.productsList.recipes .productSnip .media p a {
font-size: 1.1rem;
transition:all .25s;
}
.productsList.recipes .productSnip .media-body:hover h3{
color: #0056b3;
}

.recipeBasics{
height:unset;
text-align:center;
padding:1rem;
}
.recipeBasics .basic {
text-align: center;
width: 70%;
height:33.333%;
display:block;
margin-left:auto;
margin-right:auto;
}
.recipeBasics .basic:first-of-type, .recipeBasics .basic:nth-child(2n), .recipeBasics .basic:nth-child(3n){
left: auto;
position:relative;
}
.productsList.recipes .productSnip .media img{

}
.recipes .block-30px-h.blueBgrnd a{
text-align:right;
}
.recipeBasics, .recipePhoto{
margin-bottom:1.5rem
}
.recipeBasics .basic p {
font-size:14px;
}
.recipeBasics .basic p.recipeDetails {
font-size:16px;
}
.recipeHolder .ingredients{
padding:0px;
}
.recipeHolder .directions{
padding-left:3rem;
}
.recipeHolder .ingredients h3, .recipeHolder .directions h3 {
margin-bottom:1rem;
}
}

@media (min-width: 1400px){
.grid.recipe.productSnip {
width: 70%;
height:600px;
}
}