/* ******************************************************************************

	GOOGLE FONT IMPORTS (BELOW)
	
****************************************************************************** */
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Cabin');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Changa+One');

/* ******************************************************************************

	BASE STYLING (BELOW)
	
****************************************************************************** */
body {
    margin: 0px;
    padding: 0px;
    font-size: 3vmin;
    font-family: 'TouchDinerFont';
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding-bottom: 20vh;

    /* background-color: #fff; */
}

@font-face
	{
    font-family: 'TouchDinerFont';

    /* src: url('../Fonts/Poppins-Medium.ttf'); */
    /* src: url('/lataverne/assets/fonts/Lora-VariableFont_wght.ttf'); */
    src: url('/lataverne/assets/fonts/Montserrat-VariableFont_wght.ttf');
}

ul {
    margin: 0;
    padding: 0;
}

li {
    margin-bottom: 10px;
    margin: 30px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style: none;
    justify-content: space-between;
}

div {
    border-style: solid;
    border-color: rgb(255, 0, 0);
    border-width: 0px;
}

h2 {
    text-transform: uppercase;
    font-weight: none;
    border-bottom: 5px solid #e09157;
    margin: 0;
    padding: 0;
}

pre {
    tab-size: 3;
}

li {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

li[class^='product'] {
    border-color: #b9b9b9;
    border-bottom-width: thin;
    border-bottom-style: solid;
    padding-bottom: 10px;
}

h3 {
    margin: 0;
    flex-grow: 2;
}

/* ******************************************************************************

	SLIDE STYLING (BELOW)
	
****************************************************************************** */
.slide1 {
    width: 100%;
    height: auto;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    position: relative;
}

/* ******************************************************************************

	SECTION STYLING (BELOW)
	
****************************************************************************** */
section {
    padding: 40px 0px 0px 0px;
}

.section1 {
}

/* ******************************************************************************

	SECTION HEADING STYLING (BELOW)
	
****************************************************************************** */
div[class^='heading'] {
    font-size: 250%;
    text-align: left;
    color: #FFF;
    background-color: #E55315;
    padding: 12vmin 0px 12vmin 0px;
}

.heading1 {
}

/* ******************************************************************************

	SECTION CAPTION STYLING (BELOW)
	
****************************************************************************** */
div[class^='caption'] {
    text-align: left;
}

.caption1 {
}

/* ******************************************************************************

	SECTION PRODUCT PRICES/DESCRIPTION/CAPTION STYLING (BELOW)
	
****************************************************************************** */
.productcontainer {
    margin: 0;
    flex-grow: 0;
    position: relative;
    display: flex;
    width: auto;
}

.productdescription {
    font-size: 110%;
    margin: 0;
    flex-grow: 0;
    display: inline-block;
    color: #000;
}

.productcaption {
    font-size: 65%;
    flex-basis: 95%;
    word-wrap: break-word;
    color: #707070;
    text-transform: uppercase;
}

.price-container {
    font-size: 90%;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    float: right;
}

.pricespacer {
    margin-left: auto;
    margin-right: 0px;
    text-align: right;
}

.price {
    width: auto;
    display: flex;
    text-align: right;
}

.priceone {
    margin-left: 3vmax;
}

.pricetwo,
.pricethree,
.pricefour {
    margin-left: 3vmax;
}

.priceheader {
    font-size: 90%;
    width: auto;
    display: flex;
    float: left;
    text-align: right;
}

.priceoneheader {
    margin-left: 3vmax;
}

.pricetwoheader,
.pricethreeheader,
.pricefourheader {
    margin-left: 3vmax;
}

.allergencontainerright {
    display: inline-block;
    position: relative;
    top: 5px;
}

.allergencontainerbelow {
    margin: 10px 0px 10px 0px;
}

.allergens {
    float: left;
    width: 28px;
    height: auto;
}

/* ******************************************************************************

	NUTRITION INFO
	
****************************************************************************** */
.calorie-info {
    display: inline-block;
    position: relative;
    font-family: lucida console;
    padding-top: 5px;
    padding-left: 5px;
    width: auto;
    height: 20px;
    min-width: 65px;
    text-align: right;
}

.daily-calorie-message {
    position: absolute;
    left: 10px;
    bottom: 110px;
    width: auto;
    height: auto;
    max-height: 500px;
    background-color: rgba(211, 211, 211, 0.1);
    color: #ffffff;
    overflow: hidden;
    padding-right: 5px;
    border: 2px solid #000000;
    padding: 10px;
    z-index: 0;
}

/* ******************************************************************************

	STOCK STYLING (BELOW)
	
****************************************************************************** */
.outofstock {
    width: 320px;
    text-align: center;
    float: left;
}

/* ******************************************************************************

	EXTRA CONTENT STYLING (BELOW)
	
****************************************************************************** */
.contentblock1 {
    width: 100%;
    height: 108px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #1C212E;
    padding-left: 10px;
    padding-top: 10px;
    z-index: 2;
    background-image: url('../Images/TMBanner.png');
}

/* ******************************************************************************

	CAROUSEL STYLING (BELOW)
	
****************************************************************************** */
.container {
    width: 100%;
    height: auto;
    padding: 0px 0px 10vmax 0px;
    margin: 0px 0px 0px 0px;
    top: 0px;
    left: 0px;
    position: relative;
}

.carousel-inner > .item > img,
	.carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
}

/* ******************************************************************************

	LANDING PAGE STYLING (BELOW)
	
****************************************************************************** */
.landingpagewrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #1C212E;
    color: #FFF;
}

.landingpagemain {
    width: 100%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 0px;
    background-color: #1C212E;
    z-index: 1;
}

.landingpagetopbanner {
    width: 100%;
    height: 108px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #1C212E;
    padding-left: 10px;
    padding-top: 10px;
    z-index: 2;
    background-image: url('../Images/TMBanner.png');
}

.landingpagebottombanner {
    width: 100%;
    height: 108px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    background-color: #1C212E;
}

form {
    position: absolute;
    width: 50%;
    left: 25%;
    top: 40%;
}

legend {
    color: #FFF;
    text-align: left;
}

input {
    color: #000;
}

fieldset {
    width: 100%;
    text-align: center;
}