/*	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/hdr1-1.jpg") no-repeat center top fixed; transition: 0.5s;}
#contentbox{background: none;}
.secBox3{padding: 0; background:url('/users/admin/home/productsImage2.jpg') center top no-repeat fixed; border-radius: 200px 200px 0 0; height: 500px; color: #ffffff; display: flex; align-items: center; justify-content: center;}
.secBox3 h2{color: #ffffff; text-align: left;}
.secBox3 .textBox{ max-width: 1200px; text-align: justify;}
#homeSec1{display: inline-block; vertical-align: middle; width: 48%;margin: 0 20px 0 0;}
#homeSec2{display: inline-block; vertical-align: middle; width: 48%; }
#homeSec3{display: inline-block; vertical-align: middle; width: 55%; margin: 0 20px 0 0;}
#homeSec4{display: inline-block; vertical-align: bottom; width: 40%;}
#homeLogo1{display: inline-block; vertical-align: middle; margin: 0 20px 0 20px;}
#homeLogo2{display: inline-block; vertical-align: middle;}

.productsWrap{display: flex; justify-content: space-around; align-items: center;}
.products{text-align: center; margin: auto; width: 30%;}
.products a:link, .products a:visited{text-decoration:none; color:#ffffff; display: block; padding: 10px; border-radius: 20px; transition: ease-in-out 0.3s; font-size: 1.3em; font-family: 'Titillium Web', sans-serif;}
.products a:hover, .products a:active{text-decoration:none; color:#ffffff; background: #00a3dc; }
.productsImg{display: block;}
.products a:hover .productsImg, .products a:active .productsImg{animation: bounce 1s;}
#contentbox{ padding: 20px 0 0 0;}

/*

@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:1300px){
    .secBox3{border-radius: 100px 100px 0 0;}
}

@media screen and (max-width:1200px){
    #homeLogo1{vertical-align: middle; margin: 0 10px 0 10px; width: 25%;}
    #homeLogo2{display: inline-block; vertical-align: middle; width: 60%;} 
    .secBox3{padding: 0 10px 0 10px;}
}

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

@media screen and (max-width:1000px){
   #hdrimg{background:#ffffff url("/classes/timthumb.php?w=1000&h=800&zc=1&q=85&src=/styles/stylesets/201811lpsafety/images/hdr1-1.jpg") no-repeat center top;} 
   #homeLogo1{width: 30%;}
   #homeLogo2{width: 50%;}
}

@media screen and (max-width:900px){
    .productsWrap{flex-wrap: wrap;justify-content: center;}
    #homeSec1{display: block; width: auto;margin: auto;}
    #homeSec2{display: block; width: auto; margin: auto; text-align: center;}
    #homeSec3{display: block; width: auto; margin: auto;}
    #homeSec4{display: block; width: auto;}
    .products{width: 25%;}
    .productsImg img{max-width: 60%;}
    #footer{margin:auto;background: #00a3dc; padding: 10px 0 10px 0;}
    #homeSec4{margin: 10px auto 0; text-align: center;}
    .secBox3{padding: 0 20px 0 20px;}
    
}

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

@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/hdr1-1.jpg") no-repeat center top;}*/
    .products{width: 25%;}
}

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

@media screen and (max-width:500px){
    .secBox1{padding: 20px 10px 0 10px;  margin: 10px auto 10px; }
    .secBox2{padding: 0 10px 20px 10px; margin: 30px auto 30px; background: #00a3dc; max-width: 1200px; color: #ffffff; border-radius: 20px; }
    .products a:link, .products a:visited{font-size: 1em;}
    
}

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

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