.fa-house{
    margin-left: 40px;
    margin: 20px;
    color: white;
    transform: scale(2,2);
    

}
.fa-bag-shopping{
    margin: 20px;
    color: white;
    transform: scale(2,2);
    
    
}
.fa-address-card{
    
    margin: 20px;
    color: white;
    transform: scale(2,2);
    
    
}
.fa-cart-shopping{
    float: right;
    margin: 20px;
    margin-right: 20px;
    color: white;
    transform: scale(2,2);
}
#header1{
    border-radius: 25px;
    background-color: #ff0000;
    position: sticky;
    top: 0px;
    margin-bottom: 0px;
    z-index: 1;
}
#howitworks{
    font-size: 130%;
    float: center;
    color: white;
}
#banner1{
    margin-top:0px;
    background-image: url("Prezision\ Banner.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right;
    border-radius: 25px;
    color: white;
    font-size: large;
    font-family: "Nunito";


}
#banner2{
    margin-top: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width:75%;
    max-height:50%;
}
h1{
    font-size: 600%;
}
h2{
    font-size: 200%;
}
#howitworks{
    
    text-align: center;
    font-family: "Nunito";
}
.box2{
    display: inline-block;
    border: 0px;
    vertical-align: middle;
    height: 400px;
    width: 300px;
    background-color: #ff0000;
    border-radius: 25px;
    color: white;
    margin: 50px;
}

.group-box{
    text-align: center;
    

}
.fa-truck{
    margin-top: 10%;
    transform: scale(4,4);
    animation: 2s ease-in-out 0s infinite running truckDrive;
}
.fa-coins{
    margin-top: 10%;
    transform: scale(4,4);
    animation: 1s ease-in-out 0s infinite running growCoins; 
}
.fa-map-pin{
    margin-top: -10%;
    transform: scale(4,4);
    position: absolute;  
    animation: 2s ease-in-out 0s infinite running mapPin;
}
#mapPinFix{
    margin-top: 30%;
}
p{
    clear:left;
    margin-top: 40px;
}
body{
    background-color: #000000;
}
.fa-house:hover{
    animation: 0.75s ease-in-out 0s infinite running grow;   
}
.fa-bag-shopping:hover{
    animation: 0.75s ease-in-out 0s infinite running grow;
}
.fa-address-card:hover{
    animation: 0.75s ease-in-out 0s infinite running grow; 
}
.fa-cart-shopping:hover{
    animation: 0.75s ease-in-out 0s infinite running grow; 
}


@keyframes growButton{
    45%{transform: scale(1.1,1.1);}
}
@keyframes grow{
    55%{transform: scale(2.75,2.75);}
}
@keyframes truckDrive{
    0%{margin-left:-50%; opacity: 0%}
    10%{opacity: 100%;}
    90%{opacity: 100%;}
    100%{margin-left: 50%; opacity: 0%;}
    
}
@keyframes growCoins{
    55%{transform: scale(4.25,4.25);}
}
@keyframes mapPin{
    0%{margin-top:1% ;}
    70%{margin-top: 3%;}
    100%{margin-top:1% ;}
}
/*store page*/
.store{
    font-family: "Nunito";
    text-align: center;
    font-size: 500%;

}


    

.buttons{
    background-color: #ff0000;
    border: 0px;
    color: white;
    margin-left: 10%;
    transform: scale(1.5,1.5);
    font-family: "Nunito";
    

}
.buttons:hover{
    animation: 0.75s ease-in-out 0s infinite running growText; 
}
@keyframes growText{
    55%{transform: scale(1.75,1.75);}
}
.storePage2{
    display: inline-block;
    border: 0px;
    vertical-align: middle;
    height: 200px;
    width: 350px;
    background-color: #ff0000;
    border-radius: 25px;
    color: white;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-bottom: 5%;
    font-family: "Nunito";
    text-align: center;
}
.storePageBox{
    text-align: center; 
}
.storePage{
    
    
    margin-left: 5%;
    margin-bottom:5%;
    background-color: #ff0000;
    height: 200px;
    width: 350px;
    border-radius: 25px;
    float:left;
    font-family: "Nunito";
    text-align: center;
    color: white;
    
}
#button1:hover{
    animation: 0.75s ease-in-out 0s infinite running growButton;
}
#button2:hover{
    animation: 0.75s ease-in-out 0s infinite running growButton;
}
#button3:hover{
    animation: 0.75s ease-in-out 0s infinite running growButton;
}
#clearFloat{
    clear: left;
}
#clearFloat1{
    clear: right;
}

.fa-gifts{
    transform: scale(4,4);
    margin-top: 10%;
} 
.fa-pencil{
    transform: scale(4,4);
    margin-top: 10%;
}
.fa-gamepad{
    transform: scale(4,4);
    margin-top: 10%;
} 
.storeContent{
    font-size: 300%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-filter {
    display: flex;
}
.product-filter h1 {
    flex-grow: 1;
}
.sort {
    display: flex;
}
.collection-sort {
    display: flex;
    flex-direction: column;
  }
  .offers {
    display: flex;
    flex-wrap: wrap;
    
  } 
  .product-card {
    flex: 1 15%;
    padding: 2%;
  } 
  .product-image img {
    max-width: 100%;
    border-radius: 10%;
  } 
  .product-info {
    margin-top: 10px;
    text-align: center;
  }
.product-info h5{
    font-size: 24px;
    
}
.product-info h6{
    font-size: 16px;
    
}
@media (max-width: 6000px) {
    .product-card {
      flex: 1 5%;
    }
  }
@media (max-width: 4000px) {
    .product-card {
      flex: 1 5%;
    }
  }
@media (max-width: 2000px) {
    .product-card {
      flex: 1 10%;
    }
  }
  @media (max-width: 1920px) {
    .product-card {
      flex: 1 15%;
    }
  }
@media (max-width: 920px) {
    .product-card {
      flex: 1 21%;
    }
  }
@media (max-width: 600px) {
    .product-card {
      flex: 1 46%;
    }
  }  
  @media (max-width: 480px) {
    .product-filter {
      flex-direction: column;
    }
    .sort {
      align-self: flex-start;
    }
  }
  footer{
    background-color: #ff0000;
    padding: 2%;
    color: white;
    font-family: "Nunito";
    font-size: 20px;
    border-radius: 25px;
    margin-top: 50px;
    
  }
  .stationery_list{
    display: flex;
    flex-wrap: wrap;
    margin-right: 100px;


  }
  .itemButton{
    border: 0px;
    margin: 2px;
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    border-radius: 10px;
    background-color: #242321;
    color: white;
  }
  #itemName{
    font-family: Nunito;
    font-size: 600%;
    color: white;
  }
  .itemType{
    font-family: Nunito;
    text-align: center;
    color: white;
  }
  #itemImage{
    margin: 75px;
        transform: scale(1.5,1.5);
        float: left;
        border-radius: 25px;
        
        
  }
  #itemPrice{
    
    font-family: Nunito;
    color: white;
  }
  #itemCat{
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    color: white;
  }
  #itemDesc{
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    color: white;
  }
  
  @media (max-width: 700px) {
    #itemName{
        font-size: 500%
    } 
    #itemPrice{
        clear: left;
        
     }
}
@media (max-width: 600px) {
    #itemName{
        font-size: 400%
    } 
    #itemPrice{
        clear: left;
        
     }
}
@media (max-width: 600px) {
    #displayedItem{
        margin-left: -50px;
        transform: scale(
            0.75,0.75
        );
    }
}

#itemFormat{
    margin: 20px;
}
.counterContainer{
    color: white;
    margin-top: 0px;
    margin: 20px;
    
}
.counter{
    float: left;
    margin: 15px;
    font-family: "Nunito";
    border-radius: 2px;
    border: none;
    transform: scale(1.5,1.5);
    color: white;
    background-color: #000000;
   border-color: white;
    
    
}
.stopFloat{
    clear: both;
}
#trash1{
    color: #ff0000;
    float: right;
    transform: scale(3,3);
    margin-top: 30px;
    margin-right:  40px;
}
#trash2{
    color: white;
    float: right;
    transform: scale(2,2);

}
.imageCart{
    width: 106.5px; ;
    height:160 ;
    border-radius: 10px;
}
.cartOutput{
    border: 10px;
    border-color: white;
}
.nameCart{
    color: white;
    font-family: Nunito;
    font-weight: 500;
}
.priceCart{
    color: white;
    font-family: Nunito;
    font-weight: 500;
}
.netpriceCart{
    color: white;
    font-family: Nunito;
    font-weight: 500;
}
.qtyCart{
    color: white;
    font-family: Nunito;
    font-weight: 500;
}