div.productDisplay div.headerDiv{
    background-color: #f2c177;
    color:black;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
}
div.productDisplay div.productCollectionDiv{
    display: flex;
    flex-flow: row wrap;
    

}
div.productDisplay  div.productObjDiv{
    border: 1px dashed grey; 
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 0.5vw;
    margin-top: 0.5vw;
    padding: 0.5vw;
    box-sizing: border-box;
}

div.productDisplay div.imageCircleDiv{
    text-align: center;
}
div.productDisplay img.collectionImage{
    width: 15vw;
    height: 35vh;
}



div.productDisplay div.collectionButtonDiv{
    text-align: center;
}

div.productDisplay div.sortDiv{
    text-align: left;
    background-color:  #dbdad7;
    height: 5vh;
    
}

div.productDisplay span.sortPhrase{
    font-weight: bold;
}
div.productDisplay select.dropdown{
    width: 20vw; 
    height:2vw;
}

div.productDisplay button.collectionButton{

    margin-top: 1vh;
    background-color: orange;
    width: 50%;
    height: 4vh;
    border-radius: 4px;
    border: white;
    font-weight: bold;
    font-size: 1rem;
}


div.productDisplay span.circle {
    height: 0.7vw;
    width: 0.7vw;
    border-radius: 50%;
    display: inline-block;
    border: solid;
    margin: 2px;
}

div.productDisplay div.colorCirclesDiv{
    text-align: center;
}

div.productDisplay div.prices{
    font-weight: bold;
    font-size: 1.3rem;
    color: #319996;
}

div.productDisplay div.numerics{
    font-size: 1rem;
}

div.productDisplay div.productName{
    font-size: 1.4rem;
    
}
div.productDisplay div.stock{
    font-size: 1rem;
    color: #8c9190;
    
}

div.productDisplay div.rating{
    font-weight: bold; 
    text-align: center;
    margin-top: 1rem;
    font-size: 1.13rem;
}

div.productDisplay span.checked{
    color: orange;

}

div.productDisplay span.unchecked{

    color: #dee0df;  
   

}

@media only screen and (max-width: 900px) {
  div.numerics{
    font-size: 1rem;
}
div.productDisplay img.collectionImage{
    width: 15vw;
    height: 25vh;
}

div.productDisplay div.headerDiv{
    background-color: #f2c177;
    color:black;
    text-align: center;
    font-weight: bold;
    font-size: 0.8rem;
}

div.productDisplay select.dropdown{
    width: 20vw; 
    height:3.5vw;
}

div.productDisplay div.prices{
    font-weight: bold;
    font-size: 1.15rem;
    color: #319996;
}

div.productDisplay div.productName{
    font-size: 1.17rem;
    
}
div.productDisplay div.stock{
    font-size: 0.9rem;
    color: #8c9190;
    
}

div.productDisplay button.collectionButton{

    margin-top: 1vh;
    background-color: orange;
    width: 50%;
    height: 4vh;
    border-radius: 4px;
    border: white;
    font-weight: bold;
    font-size: 0.8rem;
}

div.productDisplay div.rating{
    font-weight: bold; 
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}
}

@media only screen and (max-width: 700px) {
  div.numerics{
    font-size: 1rem;
}

div.productDisplay img.collectionImage{
    width: 15vw;
    height: 16.5vh;
}

div.productDisplay div.headerDiv{
    background-color: #f2c177;
    color:black;
    text-align: center;
    font-weight: bold;
    font-size: 0.6rem;
}

div.productDisplay select.dropdown{
    width: 20vw; 
    height:4.5vw;
}
div.productDisplay div.prices{
    font-weight: bold;
    font-size: 0.9rem;
    color: #319996;
}

div.productDisplay div.productName{
    font-size: 0.9rem;
    
}
div.productDisplay div.stock{
    font-size: 0.8rem;
    color: #8c9190;
    
}

div.productDisplay button.collectionButton{

    margin-top: 1vh;
    background-color: orange;
    width: 50%;
    height: 4vh;
    border-radius: 4px;
    border: white;
    font-weight: bold;
    font-size: 0.6rem;
}

div.productDisplay div.rating{
    font-weight: bold; 
    text-align: center;
    margin-top: 1rem;
    font-size: 0.7rem;
}
}