/* <!-- GLOBAL STYLES-->
Catherine 11/23/19:
Global font set to 16 px- please use "rem" to reference (NOT "em").
Text & Headers (h1-h6) set in accordance with Style Tile.
Fonts used Roboto and Source Sans Pro.
Colors from Style Tile set under ROOT (3 reds, 3 teals and 2 grays). */


html {
    font-size: 16px;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 3rem;
    font-weight: bold;
    color: black;
}

h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: black;
}

h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.75rem;
    color: black;
}

h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.375rem;
    color: black;
}

h5 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.125rem;
    color: black;
}

h6 {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: black;
}

p {
    font-family:  'Source Sans Pro', sans-serif;
    font-size: 1rem;
    color: black;
}

:root {
    --red: #DC2A27;
    --deepRed: #B31F1D;
    --brightRed: #FA0603;
    --teal: #03ADC4;
    --deepTeal:#048596;
    --brightTeal:#06D1EB;
    --darkGrey: #424046;
    --lightGrey: #D0D0D0;
}


/* <!-- BUTTONS --> */


/* <!-- PRIMARY BUTTON (DESKTOP & MOBILE) --> */
.btn-primary {
    background-color: #DC2A27;
    border-color: #DC2A27;
    width: 300px;
    height: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.375rem;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #B31F1D;
    border-color: #B31F1D;
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}
.btn-primary:hover {
    color: #fff;
    background-color:#FA0603;
    border-color:#FA0603;
}
.btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
}

.btn-primary.disabled {
    background-color: #D0D0D0;
    border-color: #D0D0D0;
}


/* Home Page Items Lists - AUGIE */

.homeCategory {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 20px;
}

.CategoryTitle {
    font-size: 26px;
    padding-bottom: 10px;
}

.foodItemRow {
    margin-left: 50px;
    margin-top: -20px;    
}

.foodCard {
    margin-right: 15px;
    margin-bottom: 20px;
    max-width: 230px;
}

/* <!-- END PRIMARY BUTTON (DESKTOP) --> */


/* <!-- HEADERS --> */
/* <!-- Onboarding Header --> */
.page-onboarding1 .bg-light {
    background-color: #03ADC4 !important;
}

/* <!-- Standard Header --> */

.page-header {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: #03ADC4;
}

.page-headerLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 125px;
}

.page-headerAccountLink {
    display: inline-block;
    vertical-align: top;
    float: left;
    width: 50px;
    padding-top: 10px;
}

.page-headerCartLink {
    display: inline-block;
    vertical-align: top;
    float: right;
    padding-top: 10px;
    width: 50px;
    text-decoration: none;
}

.page-headerCartLink:hover {
    color: white;
}

.page-headerAccountLink:hover {
    color: white;
}

.page-headerIconText {
    color: white;
    font: "Roboto";
    padding-top: 5px;
    text-align: justify;
    font-size: 1em;
}

/* Search and Location Forms */
.form-inline {
    padding-bottom: 20px;
}

.headerButton {
    background-color: #DC2A27;
    border-color:#FA0603;
    width: 74px;
    height: 38px;
    font-size: 16px;

}

.headerButton:hover {
    background-color: #FA0603;
    border-color:#FA0603;
}

.searchForm {
    margin-right: auto;
    margin-top: 30px;
}

.locationForm {
    margin-left: auto;
    margin-top: 30px;
}  

.pickupText {
    color: white;
    font: "Roboto";
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 5px;
}


.locationForm {
    /* display: inline;
    position: absolute;
    right: 0px; */
}

.pickupText {
    color: white;
    font: "Roboto";
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 5px;
}

/* Navigation */

.a {
    color: #000000;
}

.nav-link:focus, .nav-link:hover {
    text-decoration: underline #DC2A27;
}

.navbar {
    font-family: roboto;
}

.a:hover {
    color: #FA0603!important;
    text-decoration: none;
}

.nav-link:focus {
    color: #FA0603;
    text-decoration: none;
}

/* Hero Image  */

.bgimage {
    width:100%;
    height: 500px;
    background: url("../images/heroImage.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

.heroText {
    color: black;
    font: "Roboto";
    font-weight: bold;
    font-size: 50px;
    text-align: center;
}

.heroTextTop {
    padding-top: 50px;
}

.heroTextBottom {
    padding-top: -20px;
}

/* Footer */

.page-footer {
    background-color: #3E4551;
}

.footerHead {
    color: white;
}

.footerLinks {
    font-size: 1em;
    color: white;
}

.footerLinks:hover {
    color: #FA0603!important;
    text-decoration: none;
}

.socialIcon {
    color: white;
}

.footer-copyright {
    color: white;
}

/* <!-- ONBOARDING CODING --> */
.page-onboarding1 .bg-light {
    background-color: #03ADC4 !important;
}

.page-onboarding1 .btn-primary {
    background-color: #DC2A27;
    border-color: #DC2A27;
}

.page-onboarding1 .headers {
    display: flex;
    justify-content: center;
}

.page-onboarding1 .card {
    border: 2px solid #03ADC4;
}

.page-onboarding1 .passwordlist {
    font-size: 12px !important;
}

.page-onboarding1 .registerdiv {
    margin-bottom: 50px;
}
/* <!-- END ONBOARDING CODING --> */

/* <!-- SHOPPING CART CODE --> */
.page-CheckoutReviewOrder .review{
    align-items: center;
    flex-direction: row;
    padding: 15px 0 15px 15px;
}

.page-CheckoutReviewOrder .editOrder{
    max-width: 30px;
}

.page-CheckoutReviewOrder .wine {
    max-height: 150px; max-width: 50px;
}

.page-CheckoutReviewOrder h1.text-center{
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
}

.page-CheckoutReviewOrder h5.card-title.col.d-flex.align-left{
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
}

.page-CheckoutReviewOrder p.card-text.col.d-flex.align-left{
    font-family:'Source Sans Pro', sans-serif;
    font-size: 22px;
}
.page-CheckoutReviewOrder h5.align-left{
    font-family:'Roboto', sans-serif;
    font-size: 22px;
}

.page-CheckoutReviewOrder .carditem1{
    margin-top: auto;
    margin-bottom: auto;
}

.page-CheckoutReviewOrder .qty {
    margin-left: auto;
}

.page-CheckoutReviewOrder .button11 {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
}



/* <!-- CHECKOUT CODING --> */
.page-CheckoutOrderDetailsCardAdded .stepOne h2 {
    color:#DC2A27;
}

.page-CheckoutOrderDetailsCardAdded p.card-text-sm{
    font-size: 11px;
}

.page-CheckoutOrderDetailsCardAdded .btn-link {
    color:#007bff;
}

.page-CheckoutOrderDetailsCardAdded .card-img {
    max-width: 40px;



/* <!-- CHECKOUT CONFIRMATION CODE --> */

.page-CheckoutOrderConfirmation h2 {
    text-align: center;
}
.page-CheckoutOrderConfirmation .card2 {
    border: none;
}

.page-CheckoutOrderConfirmation h3 {
    color:#DC2A27;
    font-size: 2rem;
    text-align: center;
}

.page-CheckoutOrderConfirmation h4 {
    text-align: center;
}

.page-CheckoutOrderConfirmation p {
    text-align: center;
}

.page-CheckoutOrderConfirmation .row {
    vertical-align: baseline;
}

.page-CheckoutOrderConfirmation .homepage-button {
    width: 300px;
    height: 50px;
    font-size: 1.375rem;
}



/* <!-- MEDIA QUERIES --> */

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up)
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
/* @media (min-width: @screen-md-min) { ... } */

/* Large devices (large desktops, 1200px and up) */
/* @media (min-width: @screen-lg-min) { ... } */

/* We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices */
/* @media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... } */