*{
    box-sizing: border-box;
}

/*
body{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    position: absolute;
    background: #f5f5f5 url("https://d3j5p08ndztws5.cloudfront.net/twin-springs-overlook.jpg") no-repeat fixed center;
    background-size: cover;
}
*/

.BackgroundBox{
    justify-content: center;
    border: .2em solid #081A35;
    width: 95%;
    background: #f5f5f5;
    border-radius: 1em;
    padding: 10px;
    margin: 0 0 1em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}
.LeftColumn nav{
    margin: 1em auto;
}
.LeftColumn nav ul{
    margin: auto;
    list-style-type: none;
    text-decoration: none;
    width: 100%;
    padding: 0;
}
.LeftColumn nav li{
    display: inline-block;
    margin: 1em auto .1em auto;
    width: 100%;
    background: #081A35;
    border-radius: .5em;
    padding: .2em .5em;
    text-align: center;
}
.LeftColumn a{
    list-style-type: none;
    text-decoration: none;
    color: #f5f5f5;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: .5em;
    text-align: center;
    display: block;
}
.Logo {
    grid-area: logo;
    width: 50vw ;
    max-width: 10em;
    align-self: center;
    justify-self: center;
    position: relative;
}
.ShoppingCartIcon{
    grid-area: Cart;
    width: 15vw ;
    max-width: 3em;
    align-self: center;
    justify-self: center;
    position: relative;
    padding: .2em;
}
.ShoppingCartIcon:hover{
    max-width: 4em;
}
/*
.formDropdown{
    border-radius: 0.5em;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
.SearchByForm .formButton{
    margin-left: -1em;
    grid-area: button;
    background-image: url("../images/search-icon.svg");
    background-repeat: no-repeat;
    background-size: 1.2em;
    background-color: #f5f5f5;
    background-position: right;
    background-origin: content-box, padding-box;
    cursor: pointer;
    border-radius: 0 0.5em  0.5em 0;
}
*/
.main{
    margin: 0;
    width: 100vw;
    position: relative;
}
.MainBody{
    grid-area: MainBody;
    width: 100%;
    padding-top: 1em;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #081A35;
    float: none;
}
.bottom{
    position: relative;
    background: #081A35;
    margin: 0;
    padding: 0;
    width: 100vw;
    display: grid;
}
.LogoFooter{
    grid-area: LogoFooter;
    width: 50vw ;
    max-width: 8em;
    justify-self: center;
    position: relative;
}
.social{
    grid-template-columns: 33% 33% 33%;
}
.FLogo {
    grid-area: FLogo;
    width: 50vw ;
    max-width: 2em;
    align-self: center;
    justify-self: center;
    position: relative;
}
.InstaLogo {
    grid-area: InstaLogo;
    width: 50vw ;
    max-width: 2em;
    align-self: center;
    justify-self: center;
    position: relative;
}
.YTLogo {
    grid-area: YTLogo;
    width: 50vw ;
    max-width: 2em;
    align-self: center;
    justify-self: center;
    position: relative;
}
.FooterLinks{
    grid-area: FooterLinks;
    width: 90%;
    justify-self: center;
    position: relative;
    text-align: center;
    color: #f5f5f5;
    text-decoration: none;
}
.FooterLinks a {
    color: #f5f5f5;
    text-decoration: none;
}
.FooterLinks a:hover{
    text-decoration: underline;
}
.FooterEmail{
    grid-area: FooterEmail;
    width: 90%;
    justify-self: center;
    position: relative;
    text-align: center;
    color: #f5f5f5;
    text-decoration: none;
}
.FooterCopyright{
    grid-area: FooterCopyright;
    width: 90%;
    justify-self: center;
    position: relative;
    text-align: center;
    color: #f5f5f5;
    text-decoration: none;
}
.nav-activate{
    transform: translateX(0%);
}
.nav-add{
    transition: transform 0.5s ease-in;
}
.toggle .bar1{
    transform: rotate(-45deg) translate(-8px,8px);
}
.toggle .bar2{
    opacity: 0;
}
.toggle .bar3{
    transform: rotate(45deg) translate(-8px,-8px);
}
.MainBody form{
    width: 90%;
    margin: auto;
}
.MainBody .formButton{
    background: #081A35;
    color: #f5f5f5;
    border-radius: .5em;
    margin: 1em;
    width: 15em;
    font-size: 20px;
    padding: 5px;
}
.MainBody .formButton:disabled{
    background: #35404c;
    color: #f5f5f5;
    border-radius: .5em;
    margin: 1em;
    width: 15em;
    font-size: 20px;
    padding: 5px;
}
.MainBody .formError{
    height: 1em;
    color: red;
    font-style: italic;
    margin: 5px;
    text-align: center;
}
.MainBody .bar{
    background:  #081A35;
    height: .2em;
    width: 95%;
    margin: 1em auto 1em auto;
    clear: both;
}

#searchbarMarketCity{
    grid-area:input;
    width: 60%;
}

/* Hides spin wheels */

/* chrome and company*/
#searchbarMarketZip::-webkit-outer-spin-button,
#searchbarMarketZip::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* firefox */
#searchbarMarketZip[type=number] {
    -moz-appearance:textfield;
}


/* Mobile styles */
@media (max-width: 930px){
    .top{
        background: #081A35;
        margin: 0;
        padding: .1em 0 0;
        width: 100vw;
        height: 4em;
        display: grid;
        grid-template-columns: 20% 60% 20%;
        grid-template-rows: 4em;
        grid-template-areas: "NavigationIcon logo Cart";
    }
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #f5f5f5;
        margin: 6px 0;
        transition: .4s;
        border-radius: 1em;
    }
    /*
    .SearchByForm {
        background: #f5f5f5;
        border: .3em solid  #081A35;
        padding: 0 .3em .3em .3em;
    }
    .SearchType {
        display: flex;
        justify-content: center;
        position: relative;
        margin: -.4em;
    }
    .SearchBy{
        color:  #081A35;
        font-size: .8em;
        width: 6em;
        padding: .2em;
    }
    .formDropdown{
        align-self: center;
        height: 2em;
        border: solid  #081A35;
    }
    .SearchField{
        display: grid;
        border-color: #081A35;
        justify-content: center;
        grid-template-areas: "input button";
    }
    .formInput{
        grid-area: input;
        padding-left: .5em;
        width: 60vw;
        border: solid  #081A35;
        background-color: #f5f5f5;
        border-radius: 0.5em 0 0 0.5em;
    }
    .SearchByForm .formButton{
        width: 10vw;
        min-width: 3em;
        max-width: 6em;
        padding: .3em .5em .3em .3em;
        border: solid;
        border-left: none;
    }
    main{
        padding: 0;
        min-height: 35em;
    }
    .LeftColumn{
        height: 100%;
        width: 100%;
        background: yellow;
        position: absolute;
        transform: translateX(-100%);
        z-index: 2;
        display: none;
    }
    .RightColumn{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: green;
        transform: translateX(100%);
        z-index: 3;
        display: none;
    }
    .bottom{
        padding-top: .2em;
        height: 15em;
        grid-template-columns: 100%;
        grid-template-rows: 3em 3em 3em 3em 3em;
        grid-template-areas:
        "LogoFooter"
        "social"
        "FooterLinks"
        "FooterEmail"
        "FooterCopyright";
    }
    .LogoFooter {
        align-self: top;
    }
    .social{
        grid-template-columns: 33% 33% 33%;
    }
    .FooterLinks{
        align-self: center;
    }
    .FooterEmail{
        align-self: center;
    }
    .FooterCopyright{
        align-self: center;
        font-size: 12px;
    }
    */
}
/* Desktop styles */
@media (min-width: 930.1px){
	/*
    header{
        background: #081A35;
        margin: 0;
        padding: 0;
        width: 100vw;
        max-width: none;
        height: 4em;
        display: grid;
        grid-template-columns: 11em auto 26% 8%;
        grid-template-rows: 4em;
        grid-template-areas: "logo form SiteNavigation Cart";
    }
    .top{
        display: contents;
    }
    
    .SearchByForm {
        grid-area: form;
        align-self: center;
        align-items: center;
        height: 3em;
        width: 100%;
        margin: 0;
        padding: 0 0 0 0em;
        border: none;
        background:none;
        display: grid;
        grid-template-columns: 9em auto;
        grid-template-areas: "SearchType SearchField";
    }
     .SearchType {
        grid-area: SearchType;
        justify-self: right;
        display: grid;
        margin: 0;
        padding: 0;
        height: 2.55em;
        border: .1em solid #f5f5f5;
        border-radius: .5em 0 0 .5em;
        grid-row: 1.5em 1.5em;
        grid-template-areas: "SearchBy" "formDropdown";
    } 
    .SearchBy{
        grid-area: SearchBy;
        color: #f5f5f5;
        justify-self: center;
        align-self: end;
        font-size: .8em;
        font-weight: normal;
        letter-spacing: .05em;
        height: 1em;
        padding: 0em;
        margin: 0em 0em .2em;
    }
    .formDropdown{
        grid-area: formDropdown;
        align-self: flex-start;
        height: 1.7em;
        width: 10.5em;
        margin-top: 0;
        border: .2em solid  #081A35;
    }
    .SearchField{
        grid-area: SearchField;
        display: grid;
        justify-self: left;
        justify-content: left;
        margin: 0;
        padding: 0;
        width: 100%;
        grid-template-columns: 90% 10%;
        grid-template-areas: "input button";
    }
    .formInput{
        grid-area: input;
        width: auto;
        height: 3em;
        border: none;
        background: #f5f5f5;
        border-radius: 0 0 0 0;
        margin: 0;
        padding: 0 0 0 .5em;
    }
    .SearchByForm .formButton{
        max-width: none;
        width: auto;
        height: 3em;
        padding: .5em;
        margin: 0;
        border: none;
    }
    main{
        padding: 1em;
        min-height: calc(100vh - 11em);
        display: grid;
        grid-template-columns: 12em auto 12em;
        grid-template-rows: 100%;
        grid-template-areas: "LeftColumn MainBody RightColumn";
    }
    .LeftColumn{
        grid-area: LeftColumn;
        width: 100% ;
    }
    .RightColumn{
        grid-area: RightColumn;
        width: 100% ;
    }
    .bottom{
        padding: .5em 0 0;
        height: 7em;
        grid-template-columns: 13em auto 15em;
        grid-template-rows: 3em 2.5em;
        grid-template-areas:
            "LogoFooter FooterLinks social"
            "FooterCopyright  FooterEmail social";
    }
    .LogoFooter {
        align-self: end;
        margin-left: .5em;
    }
    .social{
        grid-template-columns: 4em 4em 4em;
    }
    .FooterLinks{
        align-self: end;
        font-size: 20px;
    }
    .FooterEmail{
        align-self: end;
        font-size: 15px;
    }
    .FooterCopyright{
        align-self: end;
        font-size: 10px;
        margin-left: 1em;
    }
    */
}

.pageError, .pageMessage{
    background-color: #e08775;
    border: 2px solid #081A35;
    padding: 10px;
    text-align: center;
    font-weight: bolder;
    font-size: large;
}
.pageError{
    color: #ad270c;
}

#CookiePopupArea{
    width: 100%;
    float: none;
    position: fixed;
    z-index: 3;
    margin: 0 auto;
    padding: 0;
    bottom: 0;
}
.CookiePopup{
    width: 100%;
    background: white;
    padding: 20px;
    text-align: center;
    font-weight: bold;
    font-size: larger;
}
#btnCookiesAccept{
    background: #007F7F;
    color: #f5f5f5;
    border-radius: .5em;
    margin: 0 1em;
    width: 5em;
    font-size: 20px;
    padding: 5px;
}