/* #region Font setup */
@font-face {
    font-family: 'Heinz';
    src: url('./fonts/HeinzLabel.ttf');
}

@font-face {
    font-family: 'Lato';
    src: url('./fonts/Lato-Regular.ttf');
}
/*#endregion*/


/* #region Variables/Globals */
:root {
    --heinz-red: #c62c2f;
    --heinz-signature-red: #ac1527;
}

*{
    font-family: 'Heinz';
    margin:0;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

html,body{
    height:100%;
    margin: 0;
}

body{
    background-color: var(--heinz-signature-red) !important;
}

a{
    color: inherit !important; 
    text-decoration: none !important;
}

.pointer {
    cursor: pointer;
}

.main-product-ad .col-12{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.container.main{
    max-width: 900px;
}

/*BBQ chicken has a slightly more portrait image*/
.container.main.portrait{
    max-width: 800px;
}
/*#endregion*/


/* #region Logo */
#heinzLogo{
    background-color: var(--heinz-signature-red);
    display: block;
    margin: auto;
    max-height: 180px;
    width: 150px;
    height: 74px;
    margin-bottom: 50px;
    margin-top: 20px;
}
/* #endregion */


/* #region Recipe Header */
.headerContent{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/beans.jpg);
    background-repeat: no-repeat !important;
    background-position: center !important;
    padding-bottom: 40px;
    min-height: 400px;
    text-align: center;
    padding-top: 20%;
}

.brusselsproutpotatobaconhash{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/brussel-sprout-potato-bacon-hash.jpeg);
}

.stickyhppigsinblanketsbreakfastbap{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/stickyhppigsinblanketsbreakfastbap.png);
}

.coconutfriedchickenburger{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/coconut-fried-chicken-burger.png);
}

.leaperrinscreamytortellinibolognese
{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/lea-perrins-creamy-tortellini-bolognese.png);
}

.tunaMelt{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/open-tuna-melt.png);
}

.ndujaStovetop{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/nduja-stovetop-beans.jpeg);
}

.creamyPotatoSald{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/creamy-potato-salad.jpeg);
}

.smokedHamEggSaladSandwich{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/smoked-ham-egg-salad-sandwich-landscape.png);
}

.stickyBbqChicken{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/stick-bbq-chicken-landscape.png);
}

.cheesyHashBrownMuffins{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/cheesy-hash-brown-muffins.jpeg);
}

.sausageBeanPie{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/sausage-bean-pie.PNG);
}

.cheesyBeanSausagePastry{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/cheesy-bean-sausage-pastry.PNG);
}

.freakyFryUp{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/freaky-fry-up.png);
}

.spookyPotatoHeads{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/spooky-potato-heads.png);
}

.cheesySausageBeansOnToast{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/cheesy-sausage-beans-on-toast.jpg);
}

.chorizobeanscheesestuffedjacketpotato{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/chorizo-beans-cheese-stuffed-jacket-potato.jpeg);
}

.baconspicybeanjacketpotato{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/bacon-spicy-bean-jacket-potato.png);
}

.campfireStew{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/campfire-stew-desktop.jpeg);
}

.hasselbackPotatoes{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/hasselback-potatoes-desktop.jpeg);
}

.sweetBangersAndMash{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/sweet-bangers-and-mash-desktop.jpeg);
}

.bbqSteakNachos{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/bbq-steak-nachos.jpeg);
}

.pigsInBlankets{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/pigs-in-blankets.png);
}

.turkishStyleEggs{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/turkish-style-eggs.png);
}

.cheeseCrustToastie{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/cheese-crust-toastie.jpg);
}

.festiveVeggieHoops{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/festive-veggie-hoops.JPG);
}
.hamCheeseVegHoopsToastie{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/ham-cheese-veg-hoops-toastie.jpeg);
}

.babyBackRibs{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/baby-back-ribs-hp.png);
}

.flamingNachoWrap{
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/flaming-nacho-wrap.jpeg);
}

h1#recipeTitle{
    color:white;
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.25rem;
}

h1.campfireStewTitle{
    font-size: 2rem !important;
}

.recipeInfo{
    font-family: 'Lato';
    color: white;
}

.leftRecipe{
    padding-left: 0;
}

.rightRecipe{
    padding-right: 0;
}

.lastRecipeInfo{
    padding-top: 10px;
}
/* #endregion */


/* #region Recipe Content */
.recipeMain{
    background-color: white;
}

.recipeSummary{
    margin-top: 10px;
    text-align: center;
    font-family: 'Lato';
}

.tabs{
    display: flex;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}

.tabs > .tab {
    font-family: 'Lato';
    padding: 0.5em;
    background-color: white;
    color: var(--heinz-signature-red);
    border: 2px;
    border-color: var(--heinz-signature-red);
    border-style: solid;
    flex-basis: 50%;
    box-shadow: 5px 10px 18px #888888;
}

.tabs > .tab:hover{
    cursor: pointer;
}

.tabs > .tab.active {
    color: white;
    background-color: var(--heinz-signature-red);
}

.left {
    border-right-width: 1px !important;
}

.right {
    border-left-width: 1px !important;
}

.hidden {
    display: none !important;
}

.section-heading{
    color: var(--heinz-signature-red);
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.06em !important;
}

.section-contents{
    font-family: 'Lato' !important;
    color: black;
    font-weight: bold;
}

.time-taken{
    font-family: 'Lato' !important;
    color: var(--heinz-signature-red);
    padding-bottom: 20px;
}

.adimo-lightbox-iframe {
    background-color: transparent;
    margin: auto;
    border: none;
    width: 100%;
    flex-grow: 1; 
    border: none; 
    padding: 0;
    margin-top: 1em;
    min-height: 55em;
}

.buyIngredients{
    text-align: center;
    margin-bottom: 30px;
}

.buyIngredients > span{
    color: white;
    background-color: var(--heinz-signature-red);
    padding: 5px 20px;
    border-radius: 5px;
    font-size: larger;
}

.buyIngredients > span:hover{
    cursor: pointer;
}
/* #endregion */


/* #region Footer */

.footer{
    padding-bottom: 30px;
    margin-top: 5%;
}

#heinzLogoFooter{
    display: block;
    margin: auto;
    width: 86px;
    height: 42px;
}

/* #endregion */


/* #region Media queries */
@media screen and (max-width: 541px) {
    .main{
        padding: 0 !important;
    }
}
@media screen and (min-width: 991px) {
    .headerContent{
        padding-top: 10%;
    }
}

@media screen and (max-width: 430px) {
    h1#letsMake{
        font-size: xx-large;
    }

    h2#recipeTitle{
        font-size: x-large;
    }
}

@media screen and (max-width: 1199px) {
    .footer{
        margin-top: 50px;
    }
}

@media screen and (max-width: 900px) {
    .campfireStew{
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/campfire-stew.jpeg);
    }

    .hasselbackPotatoes{
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/hasselback-potatoes.jpeg);
    }
}

@media only screen and (max-width: 500px) {

    #heinzLogo {
        margin-bottom: 10px;
    }

    .recipeMain {
        margin-top: -50px;
    }

    h1#recipeTitle{
        line-height: normal;
    }

    .headerContent {
        background-size: 100% 75% !important;
    }

    .flamingNachoWrap{
        background-size: 120% 75% !important;
    }

    /*Preventing cook time from being covered up*/
    .spookyPotatoHeads #recipeTitle{
        font-size: 2.1rem;
    }

    .spookyPotatoHeads #recipeTitle{
        font-size: 2.1rem;
    }

    .campfireStew{
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/campfire-stew.jpeg);
    }

    .hasselbackPotatoes{
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/hasselback-potatoes.jpeg);
    }

    .sweetBangersAndMash{
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./images/sweet-bangers-and-mash.jpeg);
    }
}

@media only screen and (min-width: 501px) {

    .main > .recipeMain {
        width: 80%;
    }

    .headerContent {
        background-size: 80% 100%;
    }

    h1#recipeTitle{
        padding-right: 10%;
        padding-left: 10%;
    }

    .leftRecipe{
        padding-left: 10% !important;

    }

    .rightRecipe{
        padding-right: 10% !important;
    }
}

@media only screen and (min-width: 501px) and (max-width: 800px){
    .turkishStyleEggs , .hamCheeseVegHoopsToastie, .pigsInBlankets{
        background-size: cover !important;
        min-height: 20%;
    }

    .turkishStyleEggsMain, .pigsInBlanketsMain{
        width: 100% !important;
    }

    .container.main{
        padding-left: 62px !important;
        padding-right: 62px !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 446px){
    .turkishStyleEggs , .hamCheeseVegHoopsToastie, .pigsInBlankets{
        background-size: cover !important;
    }
}

/*Pigs in blankets has an enourmous recipe title - reduce font size in the header*/
@media only screen and (max-width: 367px) {
    .pigsInBlankets h1{
        font-size: 30px !important;
    }
}

/* #endregion */