/*fixes for pre-insertion*/
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}


/*code for interted content*/

/* Fonts */
    @font-face {
        font-family: 'hansleyregular';
        src: url('../fonts/hansley-webfont.woff2') format('woff2'),
            url('../fonts/hansley-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'metropolisregular';
        src: url('../fonts/metropolis-regular-webfont.woff2') format('woff2'),
            url('../fonts/metropolis-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'metropolisbold';
        src: url('../fonts/metropolis-semibold-webfont.woff2') format('woff2'),
            url('../fonts/metropolis-semibold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

/* Basics */
    .en, .de, .nl {
        display:none;
    }
    .homeguide  {
        font-family: 'metropolisregular', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #000;
        height: 100%;
    }
    @media only screen and (min-width: 1200px) {
        .homeguide  {
            font-size: 18px;
        }
    }
    @media only screen and (min-width: 1400px) {
        .homeguide  {
            font-size: 20px;
        }
    }
    @media only screen and (min-width: 1600px) {
        .homeguide  {
            font-size: 22px;
        }
    }
    .homeguide a {
        color: #000;
    }
    .homeguide b {
        font-family: 'metropolisbold', Arial, Helvetica, sans-serif;
        font-weight: normal;
    }
    .homeguide img {
        width: 100%;
        height: auto !important;
    }

    .homeguide h1, .homeguide h2, .homeguide h3, .homeguide h4, .homeguide p, .homeguide div, .homeguide ul, .homeguide ol {
        margin: 0;
        padding: 0;
        font-weight: normal;
    }
    .homeguide h1, .homeguide h3 {
        font-family: 'hansleyregular', cursive, Georgia, 'Times New Roman', Times, serif;
        padding: 0 0 1em 0;
        font-size: 5em;
        padding: 0 10% 0 10%;
        line-height: 1.1em;
        letter-spacing:0.01em;
    }
    .homeguide h2 {
        text-transform: uppercase;
        padding: 2em 0 1em 0;
        letter-spacing: 0.08em;
        font-size: 1.5em;
    }
    .homeguide h2 .medium-weight {
        font-weight: bold;
        color: #ED1C25;
        white-space: nowrap;
    }
    .homeguide h3 {
        color: #fff;
        padding: 0 1em 0.5em 1em;
    }
    .homeguide h4 {
        font-size: 1.25em;
        color: #000;
        text-transform: uppercase;
        font-family: 'metropolisbold', Arial, Helvetica, sans-serif;
}
    p.intro {
        font-family: 'metropolisbold', Arial, Helvetica, sans-serif;
        padding: 2em 10% 2em 10%;
        font-size: 1.6875em;
    }
    @media only screen and (max-width: 700px) {
        .homeguide h1, .homeguide h3 {
            font-size: 4em;
        }
        .homeguide h2 {
            font-size: 1.2em;
        }
        p.intro {
            font-size: 1.4em;
        }
    }

/* Category Links */
    ul.categories {
        padding: 0 10% 4em 10%;
    }
    ul.categories li {
        font-size: 1.1875em;
        display: inline-block;
        background-color: #fff;
        padding: 0;
        margin: 0.5em 0.625em;
        font-family: 'metropolisbold', Arial, Helvetica, sans-serif;
        border-radius: 0.6875em;
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);
        transition: box-shadow 0.3s ease-in-out;
        line-height: 2.7em;
        white-space: nowrap;
    }
    ul.categories li div {
        padding: 0 1em;
    }
    ul.categories li a {
        text-decoration: none;
    }
    ul.categories li a:hover {
    }
    ul.categories li:hover {
        /* background-color: #ccc; */
        /* box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3) inset; */
        box-shadow: 5px 5px 4px 0px rgba(0,0,0,0.3);
}
    ul.categories li:active {
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3) inset;
}
    ul.categories li img {
        width: auto;
        height: 1em !important;
        vertical-align: middle;
        padding-right: 0.5em;
        padding-bottom: 0.1em;
    }


/* Category Links v2 (as buttons)*/

    div.category-buttons {
        padding: 0 10% 4em 10%;
    }
    .category-buttons button {
        font-size: 1.1875em;
        background-color: #fff;
        border: none;
        color: #000;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 0.5em 0.4em;
        cursor: pointer;
        padding: 0.65em 1em;
        font-family: 'metropolisbold', Arial, Helvetica, sans-serif;
        border-radius: 0.6875em;
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);
        transition: box-shadow 0.3s ease-in-out;
    }
    .category-buttons button img {
        width: auto;
        height: 1em !important;
        vertical-align: middle;
        padding-right: 0.5em;
        padding-bottom: 0.1em;
    }
    .category-buttons button:hover {
        box-shadow: 5px 5px 4px 0px rgba(0,0,0,0.3);
}
    .category-buttons button:active {
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3) inset;
}




/* More */
    .key-visual img{
        display: none;
    }
    @media only screen and (max-width: 900px) {
        .key-visual img.key-visual-mobile {
            display: block;
        }
    }
    @media only screen and (min-width: 901px) {
        .key-visual img.key-visual-desktop {
            display: block;
        }
    }
    .background {
        background: #fff url("../images/key-visual-background.jpg") no-repeat scroll center; 
        background-size:cover;
        text-align: center;
        position: relative;
    }
    .background > div {
        border-style: solid;
        border-color: #fff;
        border-width: 4px;
        border-top-style: none;
        border-bottom-style: none;
        margin: 0 10px;
    }    
    .homeguide .category-section {
        text-align: center;
        padding: 4em 0;
    }
    #category-1 {
        background: #fff url("../images/paint-background-1500-00C37C.jpg") no-repeat scroll center; 
        background-size: cover;
    }
    #category-2 {
        background: #fff url("../images/paint-background-1500-C30045.jpg") no-repeat scroll center; 
        background-size: cover;
    }
    #category-3 {
        background: #fff url("../images/paint-background-1500-1ea2a0.jpg") no-repeat scroll center; 
        background-size: cover;
    }
    #category-4 {
        background: #fff url("../images/paint-background-1500-ff8400.jpg") no-repeat scroll center; 
        background-size: cover;
    }
    #category-5 {
        background: #fff url("../images/paint-background-1500-a60489.jpg") no-repeat scroll center; 
        background-size: cover;
    }
    #category-6 {
        background: #fff url("../images/paint-background-1500-8c5617.jpg") no-repeat scroll center; 
        background-size: cover;
    }
    #category-7 {
        background: #fff url("../images/paint-background-1500-0283f1.jpg") no-repeat scroll center; 
        background-size: cover;
    }
    .category-section p {
        padding: 0 10% 0.8em 10%;
    }
    .category-intro {
        color: #fff;
        font-size: 1.375em;
    }
    .homeguide .category-tips {
        padding-top: 1em;
    }
    .category-tips p {
        color: #fff;
        font-size: 1.375em;
        font-family: 'metropolisbold', Arial, Helvetica, sans-serif;
    }
    .category-tips img {
        width: auto;
        height: 1em !important;
        vertical-align: middle;
        padding-right: 0.5em;
    }
    .category-tips .smaller p{
        font-size: 1.2em;
        font-family: 'metropolisregular', Arial, Helvetica, sans-serif;
    }
    img.category-icon {
        width: auto;
        height: 3em !important;
    }
    
/* Recipe Links */
    .homeguide .recipe-links {
        padding-top: 2em;
    }   
    .recipe-links div {
        width: 25%;
        display: inline-block;
        vertical-align: top;
    }
    @media only screen and (max-width: 900px) {
        .recipe-links div {
            width: 33%;
            display: inline-block;
            vertical-align: top;
        }
    }
    @media only screen and (max-width: 700px) {
        .recipe-links div {
            width: 50%;
            display: inline-block;
            vertical-align: top;
        }
        p.intro, ul.categories, .homeguide h1, .homeguide h3 {
            padding-left: 5%;
            padding-right: 5%;
        }
    }
    .recipe-links a {
        text-decoration: none;
        font-family: 'metropolisbold', Arial, Helvetica, sans-serif;
        color: #fff;
    }
    .recipe-links a p {
        padding: 0.5em 7% 2em 7%;
        font-size: 1.1em;
    }
    .recipe-links a p::after { 
        content: " ›";
        position: absolute;
        margin-left: 0.3em;
    }
    .recipe-links a:hover {
        color: rgba(255,255,255,0.7);
    }
    .recipe-links a:hover img{
        /* opacity: 0.7; */
    }

    div.share-panel {
        padding: 3em 4em;
        /* text-align: right; */
        display: inline-block;
    }
    .share-panel p {
        font-size: 1.25em;
        display: inline-block;
        vertical-align: middle;
        padding-right: 1em;
        font-family: 'metropolisbold', Arial, Helvetica, sans-serif;
    }
    .share-panel > a > img{
        width: 3.125em;
        vertical-align: middle;
    }

    .credit-panel{
        max-width: 50%;
        display: inline-block;
        vertical-align: middle;
    }
    .credit-panel p{
        padding: 3em 4em;
        font-size: 0.9em;
        line-height: 1.3em;
        text-align: left;
    }
    @media only screen and (max-width: 850px) {
    .credit-panel{
        max-width: 100%;
        display: inline-block;
        vertical-align: middle;
    }
        .credit-panel p{
            padding: 3em 4em 0 4em;
            text-align: center;
        }
    }
    div.footer-bottles-position {
        position: relative;
        line-height: 5em;
        /* top: 1em; */
        top: 3em;
        white-space: nowrap;
        text-align: left;
        padding: 0 4em;
        overflow: scroll;
        white-space: nowrap;
        -ms-overflow-style: none;
        margin: -3em -14px 0 -14px;
    }
    div.footer-bottles-position::-webkit-scrollbar {
            display: none;
    }
    .footer-bottles img {
        max-height: 14em;
        width: auto;
        -webkit-filter: drop-shadow(0 14px 14px rgb(0, 0, 0,0.5));
        filter: drop-shadow(0 14px 14px rgb(0, 0, 0,0.5));
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        padding-left: 0.2em;
    }
    .footer-bottles img.jar {
        max-height: 10em;
    }
    .footer-bottles img.sachet {
        max-height: 10em;
    }
    .footer-bottles img.ddss {
        max-height: 11em;
    }
    .footer-bottles img.bottle-short {
        max-height: 12em;
    }


    div.buy-panel {
        margin-top: 4em;
        text-align: center;
    }
    .buy-panel h3{
        font-size: 4.5em;
        color: #E20714;
        vertical-align: baseline;
    }
    .buy-panel h3 img{
        width: 0.8em;
        position: relative;
        top: 0.1em;
        /* margin-top: 0.2em; */
    }
    div.buy-panel p {
        font-size: 1.5em;
        font-family: 'metropolisbold', Arial, Helvetica, sans-serif;
        padding: 0 4em 3em 4em;
    }
    .half-size {
        font-size: 0.5em;
    }
    div.buy-panel p span.tesco{        color: #0F70B7    }
    div.buy-panel p span.asda{        color: #3AAA35    }
    div.buy-panel p span.sainsburys{        color: #E94E1B    }
    div.buy-panel p span.ocada{        color: #94C11F    }
    div.buy-panel p span.waitrose{        color: #0A8E35    }
    div.buy-panel p span.coop{        color: #2DAAE1    }
    div.buy-panel p span.morrisons{        color: #00563F    }
    div.buy-panel p span.edeka{        color: #17b6e2    }
    div.buy-panel p span.globus{        color: #575656    }
    div.buy-panel p span.rewe{        color: #be1522    }
    div.buy-panel p span.real{        color: #243468    }
    div.buy-panel p span.albert-heijn{        color: #2daae1    }
    div.buy-panel p span.jumbo{        color: #f9b233    }
    div.buy-panel p span.mcd{        color: #034d94    }
    div.buy-panel p span.deen{        color: #e5132c    }
    div.buy-panel p span.coop-nl{        color: #f28d00    }
    div.buy-panel p span.hoogvliet{        color: #00b2eb    }
    div.buy-panel p span.vomar{        color: #eb5a49    }
    div.buy-panel p span.picnic{        color: #e40422    }






/* Read more buttons */

    .category-tips {
        overflow:hidden;
        transition:max-height 0.3s ease-out;
    }
    .height {
        max-height:0em;
    }
    .heightAuto {
        max-height:50em;
    }
    .read-more-button {
        border: none;
        outline:none;
        text-decoration: none;
        color: #fff;
        background-color: rgb(0, 0, 0); /* fallback colour for IE */
        background-color: rgb(0, 0, 0, 0.20);
        font-size: 1em;
        display: inline-block;
        padding: 0 1em;
        margin: 0.5em 0.625em;
        border-radius: 0.6875em;
        line-height: 2.7em;
        white-space: nowrap;
    }

    button:focus {
        border: none;
        outline: none;
    }


    div.bottles-v2 {
        text-align: center;
        padding-bottom: 3em;
        position: relative;
        top: -3em;
    }
    .bottles-v2 img {
        width: 85% !important;
    }