*
{
    margin  : 0;
    padding : 0;
}

html
{
    height : 100%;
    width  : 100%;
}

body
{
    background            : url(images/bittel_meats_bg.jpg) no-repeat center center;
    background-attachment : fixed;
    background-size       : cover;
}

.navigation-bar
{
    left     : 1.5%;
    position : absolute;
    top      : 3.5%;
    z-index  : 5;
}

.navigation-bar .link
{
    border          : 1px solid transparent;
    border-radius   : 2px;
    color           : rgba(255, 255, 255, 0.85);
    cursor          : pointer;
    display         : inline-block;
    font-family     : "Roboto Condensed", sans-serif;
    font-size       : 18px;
    height          : 100%;
    margin          : 0 5px;
    padding         : 5px 12px;
    text-decoration : none;
    text-shadow     : 1px 1px 1px rgba(0, 0, 0, 0.7);
    text-transform  : uppercase;
    transition      : 0.2s all ease-in-out;
}

.navigation-bar .link:hover
{
    background : rgba(255, 255, 255, 0.15);
    border     : 1px solid rgba(255, 255, 255, 0.3);
    color      : rgba(255, 255, 255, 1);
}

.navigation-bar .link.active
{
    background  : rgba(255, 255, 255, 0.2);
    border      : 1px solid rgba(255, 255, 255, 0.5);
    box-shadow  : 0 1px 3px 0 rgba(0, 0, 0, 0.35);
    color       : rgba(255, 255, 255, 1);
    text-shadow : 1px 1px 1px rgba(0, 0, 0, 1);
}

.container
{
    transition : 0.2s all ease-in-out;
}

.page-container
{
    z-index : 4;
}

.home-container
{

}

.logo-container
{
    background    : rgba(255, 255, 255, 0.45);
    border        : 1px solid rgba(255, 255, 255, 0.65);
    border-radius : 2px;
    box-shadow    : 0 1px 10px 0 rgba(0, 0, 0, 0.35);
    margin        : calc(50vh - 150px) auto 0;
    padding       : 15px;
    position      : relative;
    width         : fit-content;
}

.logo
{
    background      : url(images/bittel_meats_logo.png) no-repeat center center;
    background-size : 620px 197px;
    height          : 197px;
    position        : relative;
    width           : 620px;
}

.logo-container .phone-number,
.logo-container .address
{
    bottom      : -32px;
    color       : #fff;
    font-family : "Roboto Condensed", sans-serif;
    font-size   : 16px;
    position    : absolute;
    text-shadow : 1px 1px 1px rgba(0, 0, 0, 0.75);
}

.logo-container .phone-number
{
    left       : 12px;
    text-align : left;
}

.logo-container .address
{
    right      : 12px;
    text-align : right;
}

.menu-container
{
    margin     : 120px auto 15px;
    position   : relative;
    text-align : center;
    width      : 100%;
}

.menu-container .menu
{
    background    : rgba(255, 255, 255, 0.65);
    border        : 1px solid rgba(255, 255, 255, 0.85);
    border-radius : 2px;
    box-shadow    : 0 1px 10px 0 rgba(0, 0, 0, 0.35);
    margin        : 0 auto;
    max-width     : 700px;
    padding       : 12px;
    width         : 50vw;
}

.our-story-container,
.our-menu-container
{
    margin     : 90px auto 20px;
    position   : relative;
    text-align : center;
    width      : 100%;
}

.our-story-container .our-story,
.our-menu-container .our-menu
{
    background    : rgba(255, 255, 255, 0.8);
    border        : 1px solid rgba(255, 255, 255, 0.95);
    border-radius : 2px;
    box-shadow    : 0 1px 10px 0 rgba(0, 0, 0, 0.35);
    color         : rgba(20, 20, 20, 1);
    font-family   : "Playfair Display SC", serif;
    font-size     : 16px;
    line-height   : 25px;
    margin        : 120px auto 0;
    max-width     : 45vw;
	min-width     : 600px;
    /*min-width     : 20vw;*/
    padding       : 15px;
    text-align    : justify;
    width         : 45vw;
}

.our-story-container .our-story h1,
.our-menu-container .our-menu h1
{
    color        : rgba(220, 0, 0, 0.95);
    display      : block;
    font-family  : "Great Vibes", serif;
    font-size    : 42px;
    font-variant : normal;
    font-weight  : normal;
    margin       : 18px auto 22px;
    text-align   : center;
    width        : 100%;
}

.contact-us-container,
.find-us-container,
{
    margin     : 90px auto 20px;
    position   : relative;
    text-align : center;
    width      : 100%;
}

.contact-us-container .contact-us,
.find-us-container .find-us
{
    background    : rgba(255, 255, 255, 0.8);
    border        : 1px solid rgba(255, 255, 255, 0.95);
    border-radius : 2px;
    box-shadow    : 0 1px 10px 0 rgba(0, 0, 0, 0.35);
    color         : rgba(20, 20, 20, 1);
    font-family   : "Playfair Display SC", serif;
    font-size     : 18px;
    line-height   : 28px;
    margin        : 120px auto 0;
    max-width     : 45vw;
    /*min-width     : 20vw;*/
    min-width     : 500px;
    padding       : 15px;
    text-align    : center;
    width         : 35vw;
}

.find-us-container .find-us
{
	min-width: 600px;
}

.contact-us-container .contact-us h1,
.find-us-container .find-us h1
{
    color        : rgba(220, 0, 0, 0.95);
    display      : block;
    font-family  : "Great Vibes", serif;
    font-size    : 42px;
    font-variant : normal;
    font-weight  : normal;
    margin       : 18px auto 22px;
    text-align   : center;
    width        : 100%;
}

.contact-us-container .contact-us .column,
.find-us-container .find-us .column
{
    display    : inline-block;
    text-align : center;
    width      : 49%;
	vertical-align: top;
}

.find-us-container .find-us .column-spacer
{
	height: 40px;
	display: block;
	width: 100%;
	position: relative;
}

.contact-us-container .contact-us a,
.find-us container .find-us a
{
    color           : rgba(20, 20, 20, 1);
    text-decoration : none;
}

.contact-us-container .contact-us .email
{
    font-size : 15px;
}

.contact-us-container .contact-us .fb-page
{
    margin : 25px auto 0;
}

.footer
{
    bottom      : 0;
    box-sizing  : border-box;
    color       : #fff;
    display     : none;
    font-family : "Roboto Condensed", sans-serif;
    font-size   : 15px;
    height      : 52px;
    line-height : 52px;
    margin      : 0 auto;
    padding     : 0 15px;
    position    : absolute;
    text-align  : center;
    text-shadow : 1px 1px 1px rgba(0, 0, 0, 1);
    width       : 100%;
}

@media only screen and (max-width : 768px)
{
    html,
    body
    {
        min-height : 100%;
        min-width  : 320px;
    }

    body
    {
        overflow-x : auto;
        overflow-y : auto;
    }

    .navigation-bar
    {
        display  : block;
        left     : 0;
        margin   : 4px auto 15px;
        position : relative;
        top      : 0;
        width    : 100%;
    }

    .navigation-bar .link
    {
        display    : block;
        margin     : 3px;
        text-align : center;
    }

    .logo
    {
        background-size : 300px 95px;
        height          : 95px;
        width           : 300px;
    }

    .logo-container .phone-number,
    .logo-container .address
    {
        text-align : center;
        width      : 100%;
    }

    .logo-container .phone-number
    {
        bottom : -52px;
        left   : 0;
    }

    .logo-container .address
    {
        bottom : -28px;
        right  : 0;
    }

    .home-container,
    .menu-container,
    .our-story-container,
	.our-menu-container,
	.find-us-container,
    .contact-us-container
    {
        margin : 10px auto;
    }

    .home-container .logo-container
    {
        margin : 40px auto;
    }

    .our-story-container,
	.our-menu-container
    {
        width : 90vw;
    }

    .menu-container .menu
    {
        margin : 10px auto;
        width  : calc(95vw - 24px);
    }

    .our-story-container .our-story,
	.our-menu-container .our-menu,
	.find-us-container .find-us
    {
        margin    : 10px auto;
        max-width : fit-content;
        min-width : auto;
        width     : calc(95vw - 30px);
    }

    .contact-us-container .contact-us
    {
        margin    : 15px auto;
        min-width : 85vw;
        width     : 85vw;
    }

    .contact-us-container .contact-us .column,
	.find-us-container .find-us .column
    {
        display    : block;
        margin     : 20px auto 15px;
        text-align : center;
        width      : 100%;
    }
	
	.find-us-container .find-us .column-spacer
	{
		height: 0;
	}
}