.pointer{
    cursor: pointer;
}

.pink {
    background-color: pink;
}

.paleblue {
    background-color: paleturquoise;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.header_background {
	background-color: red;
}


.callout {
	border: none;
    /* background-color: none; */
}
.hideAll {
    display: none;
}

.splash {
    display: block;
}

.gray1{
    background-color: #e5e5e5;
}

.gray2{
    background-color: #c6c6c6;
}

.gray3{
    background-color: #a6a6a6;
}

.gray4{
    background-color: #8a8a8a;
}

.gray5{
    background-color: #666666;
}

.height100{
    height:100px
}

.height150{
    height: 150px;
}

.height200{
    height: 200px;
}

.height250{
    height: 250px;
}

.height300{
    height: 300px;
}

.height400{
    height: 400px;
}

.height800{
    height: 800px;
}

main{
    margin-bottom: 200px;
}

.homeSection{
    margin-top: 104px;
}

.grid-container-small{
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
}

.justify-center{
    justify-content: center;
}

.show-login{
    background-color:rgba(0, 0, 0, 0.295);
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    /* bottom: 25%; */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-bar{
    justify-content: space-between;
}

.title-bar-right > ul{
    justify-content: flex-end;
}

/** Department Card **/

.department-card-title-container{
    margin-top: 4%;
    display: flex;
    justify-content: center;
}

.department-card-title{
    font-size: 1.5rem;
}


/** Product Card **/
.productCardGroupContainer > .callout{
    padding-bottom: 3%;
}

.product-card{
    /* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.366); */

}

.product-card-info{
    margin-top: 8%;
    margin-bottom: 12%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-card-info > *{
    margin: 0;
}

.product-card-info2{
    margin-bottom: 12%;
}

.product-card-info2 > p{
    margin-bottom: 0;
}

.product-card-controls{
    display: flex;
    justify-content: space-between;
}

.product-card-controls > input{
    height: 50px;
    margin-bottom: 0;
}


/*******  BREADCRUMB   ****/


/*** SMALL **/
@media screen and (max-width: 39.9375em) {
    .breadcrumb-navigation{
        margin-top: 48px;
    }
}

/** MEDIUM **/
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .breadcrumb-navigation{
        margin-top: 48px;
    }
}

/** LARGE **/
@media screen and (min-width: 64em) {
    .breadcrumb-navigation{
        margin-top: 80px;
    }
}


/** Department Page  **/
/*** SMALL **/


@media screen and (max-width: 39.9375em) {
    .department-title{
        margin-top: 48px;
    }
}

/*** MEDIUm **/

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .department-title{
        margin-top: 48px;
    }
}

/*** LARGE **/
@media screen and (min-width: 64em) {
    .department-title{
        margin-top: 72px;
    }
}


.departments-organization-section{
    display: flex;
}

.departments-sort-group{
    display: flex;
    width: 20%;
}

#department-sort{
    width: 40%;
}





.department-section-product-group-container{
    margin-top: 3%;
    box-sizing: border-box;
}


/******  PRODUCT PAGE *****/


.product-banner{
    display: flex;
    box-sizing: border-box;
}

/*** SMALL **/


@media screen and (max-width: 39.9375em) {
    .product-banner{
        max-width: 400px;
        margin: 48px auto 0 auto;
    }

    .product-additional-info-title{
        font-weight: 800;
        font-size: 1.5rem;
    }
}

/*** MEDIUm **/

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .product-banner{
        margin: 48px 8% 0 8%;
    }

    .product-description-section{
        margin: 0 5%
    }

    .product-weight-section{
        margin: 0 5%
    }
}

/*** LARGE **/
@media screen and (min-width: 64em) {
    .product-banner{
        margin: 72px 15% 0 15%;
    }
}


.product-img-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-img-container > img{
    width: 100%;
    /* height: 100%; */
    object-fit: contain;
}

.product-info-container{
    padding: 5% 5%;
}

.product-btn-container{
    display: flex;
    justify-content: space-between;
}

.product-description-section{
    margin-top: 80px;
}

.product-weight-section{

}