/* All devices */

#page{
    background-image: url("/-/media/Images/wasteandrecycling/freeyourfood/title-bg-image-large.png"), url("/-/media/Images/wasteandrecycling/freeyourfood/recipebg.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left top;
    background-color: #fff;
}

div.columns.four{
    margin-top: 2em;
}

ul.breadcrumb a, ul.breadcrumb a:hover, ul.breadcrumb a:visited {
    color: #fff;
    border-color: #fff;
}

div.eight.columns.alpha{
    color:white;
    text-shadow:none;
    width:100%;
    padding: 1em;
}

p.lead{
    color:#fff;
    font-size: 1.25em;
}

ul.row.wall.remove-sides.scale-images {
    background-color: #201b4a;
}

a[role="button"].download-button{
    background-color: #211b4b;
    color: #fff;
    text-shadow:none;
    border-radius: 0;
    border: 0;
}

a[href$=".pdf"]:after{
    content: "";
}

li.brick:nth-of-type(1), li.brick:nth-of-type(11),li.brick:nth-of-type(13), li.brick:nth-of-type(10){
    background: #fe2938; /* red */
    color: #fff;
}

li.brick:nth-of-type(2), li.brick:nth-of-type(8),li.brick:nth-of-type(14),li.brick:nth-of-type(20){
    background: #f8a020; /* orange */
}

li.brick:nth-of-type(3), li.brick:nth-of-type(9),li.brick:nth-of-type(15),li.brick:nth-of-type(19){
    background: #2b5ee6; /* darkblue */
    color: #fff;
}

li.brick:nth-of-type(4), li.brick:nth-of-type(16){
    background: #f9ce2a; /* yellow */
}

li.brick:nth-of-type(5), li.brick:nth-of-type(7),li.brick:nth-of-type(17){
    background: #1eb2df; /* turquoise */
}

li.brick:nth-of-type(6), li.brick:nth-of-type(12),li.brick:nth-of-type(18){
    background: #7e4ed6; /* purple */
    color: #fff;
}

li.brick:nth-of-type(6) a, li.brick:nth-of-type(12) a,li.brick:nth-of-type(18) a, li.brick:nth-of-type(1) a, li.brick:nth-of-type(11) a,li.brick:nth-of-type(13) a,li.brick:nth-of-type(19) a, li.brick:nth-of-type(3) a, li.brick:nth-of-type(9) a,li.brick:nth-of-type(15) a, li.brick:nth-of-type(10) a{
    color: #fff;
    border-bottom: 1px solid #fff;
}

li.brick:nth-of-type(2) a, li.brick:nth-of-type(8) a,li.brick:nth-of-type(14) a, li.brick:nth-of-type(4) a,li.brick:nth-of-type(16) a,li.brick:nth-of-type(5) a, li.brick:nth-of-type(7) a, li.brick:nth-of-type(17) a, li.brick:nth-of-type(20) a{
    color: #000;
    border-bottom: 1px solid #000;
}

li.brick, li.stamp.add-bottom{
    padding:0;
    margin:0 !important;
}

li.brick div.well, li.stamp div.well{
    width: 100%;
    padding: 0 0 100% 0;
    position: relative;
    height:1em;
}

li.brick div.well h2.remove-top{
    margin:0;
    padding: 0;
}

li.brick div.well img{
    z-index:0;
}

li.brick div.well h2.recipetitle{
    z-index:5;
    position: absolute;
    bottom: 1.5rem;
    left:0;
    width: 70% !important;
    margin: 0;
    text-align: left;
    font-size: 1.6em;
    text-shadow:none;
	border-left:.25em solid rgba(0,0,0,.625);
}

li.brick div.well h2.recipetitle.right{
    top: 1.5rem;
    right: 0;
	bottom:auto;
	left:auto;
	text-align:right;
	border-left:none;
	border-right:.25em solid rgba(0,0,0,.625);
}
li.brick div.well ul.recipeicons{
    z-index:5;
    position: absolute ;
    top: 1.5rem;
    right: 0;
    width: 20%;
    margin: 0;
}

li.brick div.well ul.recipeicons.right{
    bottom: 1.5rem;
    left: 0;
	top:auto;
	right:auto;
}

li.brick div.well ul.recipeicons li, li.brick div.well ul.recipeicons-right li{
    padding-top: 1em;
    color: #fff;
    background: rgba(0,0,0,.625);
    text-align: center;
    font-size: 0.8em;
    text-shadow:none;
    min-height: 4em;

}


h2.recipetitle span, h2.recipetitle.right span{
    background: rgba(0,0,0,.625);
	color:#fff;
    border:none;
}

li.brick div.well h2.recipetitle a, li.brick div.well h2.recipetitle.right a{
   color:#fff;
    border-bottom: none;
}

li.brick div.well h2.recipetitle a:link, li.brick div.well h2.recipetitle a:visited{
    text-decoration: none;
}

li.brick div.well div.blocklink a, li.brick div.well div.blocklink a:hover, li.brick div.well div.blocklink a:visited{
    color: transparent;
    display: block;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    height: 100%;
    width: 100%;
    z-index: 7;
    text-shadow: none;
    border: none;
}

li.brick div.well h2.logotitle{
    position: absolute;
    left: -9999px;
}

li.brick div.well h2.logotitle span{
    display:inline;
    position: relative;
    background: #201b4a;
    box-shadow:0.5rem 0px 0px #201b4a, -0.5rem 0px 0px #201b4a;
    color: #fff;
    text-shadow: none;
}

li.brick div.well p.logotext{
    z-index:6;
    position: absolute !important;
    bottom: calc(-1em + 13%) !important;
    right: calc(3% - 0.5rem) !important;
    width: 75% !important;
    margin: 0;
    text-align: left;
    text-shadow:none;
    color: #fff;
    background: #201b4a;
    font-size:0.9em;
}

li.brick div.well p.logotext.higher-text{
        bottom: calc(-1em + 28%) !important;
    }
#page .well h2{
	margin:0 !important;
}
li.brick div.well h2.infoblock{
 	padding: 1rem !important;
    text-align: left;
    font-size: 1.6em;
    text-shadow:none;
}



li.brick div.well .infoblock-text{
    text-shadow:none;
	padding: 0 1rem 1rem 1rem !important;
}

li.stamp div.well{
    background-color: #54b9ae;
    text-shadow: none;
}

li.stamp div.well label{
    padding: 1em 1em 0.5em 1em;
}

li.stamp div.well input{
    margin: 1em 0em 1em 1em;
    width:90%;

}

/* For tablets */
@media only screen and (min-width: 48em) {
    #page{
        background-image: url("/-/media/Images/wasteandrecycling/freeyourfood/title-bg-image-large.png"), url("/-/media/Images/wasteandrecycling/freeyourfood/recipebg.png");
        background-repeat: no-repeat, no-repeat;
        background-position: left top, left top;
        background-color: #fff;
    }

    div.columns.four{
        margin-top: 2em;
    }

    div.columns.four p.well {
        margin-top: 2em;	
    }

    div.eight.columns.alpha{
        padding: 2em;
    }

   
    li.brick div.well p.logotext{
        z-index:6;
        position: absolute !important;
        bottom: calc(-1em + 13%) !important;
        right: calc(3% - 0.5rem) !important;
        width: 75% !important;
        margin: 0;
        text-align: left;
        text-shadow:none;
        color: #fff;
        background: #201b4a;
        font-size:0.9em;
    }

    li.brick div.well p.logotext.higher-text{
        bottom: calc(-1em + 28%) !important;
    }

}

/* For PCs etc */
@media only screen and (min-width: 64em) {
    #page{
        background-image: url("/-/media/Images/wasteandrecycling/freeyourfood/title-bg-image-large.png"), url("/-/media/Images/wasteandrecycling/freeyourfood/recipe-bg.png");
        background-repeat: no-repeat, no-repeat;
        background-position: left top, left top;
        background-color: #fff;
    }

    div.eight.columns.alpha{
        background-image:url("/-/media/Images/wasteandrecycling/freeyourfood/freeyourfood-heading-pot.png"),url("/-/media/Images/wasteandrecycling/freeyourfood/freeyourfood-heading-spoon.png"),url("/-/media/Images/wasteandrecycling/freeyourfood/freeyourfood-heading-plate.png");
        background-repeat: no-repeat, no-repeat, no-repeat;
        padding: 4em 4em 2em 3em;
        background-position: 31% top, right 50%, 64% -17%;
    }

    div.columns.four{
        margin-top: 3em;
    }

    li.brick{
        -webkit-transition: transform 1s ease;
        -moz-transition: transform 1s ease;
        -o-transition: transform 1s ease;
        transition: transform 1s ease;
    }

    li.brick:hover{
        transform: translate(-20px, -20px);
        z-index: 6;
    }


    li.brick div.well p.logotext{
        z-index:-1;
    }

    li.brick:hover div.well p.logotext{
        z-index:6;
        position: absolute !important;
        bottom: calc(-1em + 13%) !important;
        right: calc(3% - 0.5rem) !important;
        width: 75% !important;
        margin: 0;
        text-align: left;
        text-shadow:none;
        color: #fff;
        background: #201b4a;
    }

    li.brick:hover div.well p.logotext.higher-text{
        bottom: calc(-1em + 28%) !important;
    }
}