@font-face {
    font-family: 'MyriadPro';
    src: url("MYRIADPRO-REGULAR.woff") format("opentype");
}

@font-face {
    font-family: 'MyriadPro-Light';
    src: url("MyriadPro-Light.woff") format("opentype");
}

@font-face {
    font-family: 'SanstuyBrush';
    src: url("SanstuyBrush.otf") format("opentype");
}



h1, h2, h3, h4, h5, h6
{
    font-family: 'MyriadPro'
}

p, a
{
    font-family: 'MyriadPro-Light'
}


.that-x
{
    font-family: 'SanstuyBrush';
    font-size:60px;
}
/*.top-section
{
    height:90vh;
}
*/

.text-white
{
    color: #ffffff;
}

.card
{
    background-color: #000000;
}

.card-body
{
    background-color: #000000;
}

#header1
{
    background-image:url('Pendlehill.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bannerheader
{
    font-size: 60px;
}

.big-padding
{
    padding-top:90px;
    padding-bottom: 90px;
}

.cta-button-hollow
{
    border: 5px solid white;
    color:#ffffff;
    font-size: 24px;
    padding: 10px 20px;
    background-color: transparent;
    transition: ease-in 0.4s;

}


.cta-button-hollow-narrow{
    border: 5px solid white;
    color:#ffffff;
    font-size: 24px;
    padding: 5px 20px;
    background-color: transparent;
    transition: ease-in 0.4s;

}

.cta-button-hollow:hover
{
    border: 5px solid white;
    color:#000000;
    font-size: 24px;
    padding: 10px 20px;
    background-color: #ffffff;
    transition: ease-out 0.4s;

}

.cta-button-hollow-narrow:hover
{
    border: 5px solid white;
    color:#000000;
    font-size: 24px;
    padding: 5px 20px;
    background-color: #ffffff;
    transition: ease-out 0.4s;

}
.cta-button-blue
{
    border: 5px solid #0091ba;
    color:#0091ba;
    font-size: 24px;
    padding: 10px 20px;
    background-color: transparent;
    transition: ease-in 0.4s;

}


.cta-button-blue:hover
{
    border: 5px solid #0091ba;
    color:#fff;
    font-size: 24px;
    padding: 10px 20px;
    background-color: #0091ba;
    transition: ease-out 0.4s;

}

#bannersection
{
    background-image:url('Moorhouses-Brewery-Old-Site-Image.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height:35vh;
    background-attachment: fixed;
}

#order
{
    background-image:url('Break_images6.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#order2
{
    background-image:url('Break_images6.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}



#fallingsection
{
    background-image:url('Brewery_entrance.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:45vh;
    background-attachment: fixed;
}

.form-input-control
{
    border: 5px solid white;
    color: #fff;
    padding: 10px 20px;
    font-size: 24px;
    background-color: transparent;
    width:100%
}


.form-input-control::placeholder
{
    color: #ffffff;
}


.cta-button-hollow-reverse
{
    border: 5px solid #fff;
    color:#000000;
    font-size: 24px;
    padding: 10px 20px;
    background-color: #fff;
    transition: ease-in 0.4s;

}


.cta-button-hollow-reverse:hover
{
    border: 5px solid white;
    color:#ffffff;
    font-size: 24px;
    padding: 10px 20px;
    background-color: transparent;
    transition: ease-out 0.4s;

}

.footer-link, a
{
    color: #ffffff;
    text-decoration: none;
    font-family: 'MyriadPro';
    font-size: 16px;
}



.select-list
{
    background-color: transparent;
    color:#ffffff;
    font-size: 16px;
    border: 5px solid #fff;
    width: 100%;
}


@media only screen and (max-width: 600px) {
    #order2
        {
            background-image:url('Break_images6.jpg');
            background-position: center;
            background-repeat: no-repeat;
        }


    #order
    {
        background-image:url('Break_images6.jpg');
        background-position: center;
        background-repeat: no-repeat;
     
    }

    .bannerheader
    {
        font-size: 40px;
    }


    .form-input-control
    {
        font-size: 16px;
    }

    /*
    #header1
    {
        background-image:url('MobileBanner.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
*/
    .bigwhitelogo
    {
        max-width: 60%;
    }





}