/*	This is used when you are making a website with individual css for each page
	NOTE: Use the master css for any items that you want to be constant throughout the website
*/
#hdrimg{ background:#00a3dc url("/styles/stylesets/201811lpsafety/images/hdr2-2.jpg") no-repeat center top fixed; transition: 0.5s;}
.productsWrap{display: flex; max-width: 1200px; margin: auto; flex-wrap: wrap; padding: 20px 10px 20px 10px; border-radius: 20px; background: #00a3dc;max-width: 1200px;}
.products{text-align: center; margin: auto; width: 23%; margin: 10px; border-radius: 20px; box-shadow: 0 1px 2px #747778;}
.products a:link, .products a:visited{text-decoration:none; background: #ffffff;  border: 2px solid #00a3dc;color:#00a3dc; display: block; padding: 10px; border-radius: 20px; transition: ease-in-out 0.3s; font-family: 'Titillium Web', sans-serif;}
.products a:hover, .products a:active{text-decoration:none; color:#ffffff; background: #00769f; box-shadow: none; border: 2px solid #00769f;}
.productsImg{display: block; opacity: 1;}
.productsImghvr{opacity: 0; margin: -157px auto 0; display: block;}
.products a:hover .productsImg, .products a:active .productsImg{opacity: 0;}
.products a:hover .productsImghvr, .products a:active .productsImghvr{opacity: 1; animation: bounce 1s;}

.productsTextWrap{display: block;}
.productsTitle{display: block; font-size: 1.3em;}
.productsText{display: block; font-size: 1em; color: #000000}
.products a:hover .productsText, .products a:active .productsText{color: #ffffff;}
.productsMore{display: block; font-size: 1.2em; background: #00a3dc; color:#ffffff; border-radius: 10px; padding: 5px; margin: 10px auto 0;}
.products a:hover .productsMore, .products a:active .productsMore{background: #ffffff; color: #000000;}


@keyframes bounce {
	0%, 20%, 60%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
	40% {-webkit-transform: translateY(-20px);transform: translateY(-20px);}
	80% {-webkit-transform: translateY(-10px);transform: translateY(-10px);}
}

@media screen and (max-width:1200px){
    .products{width: 30%;}
}

@media screen and (max-width:1100px){
    
}

@media screen and (max-width:1000px){
   #hdrimg{background:#392d1f url("/classes/timthumb.php?w=1000&h=500&zc=1&q=85&src=/styles/stylesets/201811lpsafety/images/hdr2-2.jpg") no-repeat center top;}  
}

@media screen and (max-width:900px){
   .productsText{font-size: 0.9em;} 
}

@media screen and (max-width:800px){
    #hdrimg{background:#392d1f url("/classes/timthumb.php?w=800&h=500&zc=1&q=75&src=/styles/stylesets/201811lpsafety/images/hdr2-2.jpg") no-repeat center top;}
    .products{width: 40%;}
    .productsWrap{justify-content: center;}
    
}

@media screen and (max-width:700px){
    #hdrimg{background:#ffffff url("/classes/timthumb.php?w=800&h=450&zc=1&q=75&src=/styles/stylesets/201811lpsafety/images/hdr2-2.jpg") no-repeat center top;}
}

@media screen and (max-width:600px){
   .products{width: 90%;}
}

@media screen and (max-width:500px){
    
}

@media screen and (max-width:400px){
    
}

@media screen and (max-width:360px){
    
}