/*	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
*/
#serviceWrap{display: flex; justify-content: center; margin: 20px auto 0;}
#service{width: 25%; text-align: center; margin: 10px;}
#serviceImg{display: block; padding: 0;}
#serviceImg img{border-radius: 5px 5px 0 0 ;}
#serviceText{display: block; padding: 10px; font-size: 0.9em;}
#serviceTitle{display: block; color: #ffffff; font-size: 1.5em; font-family: 'Poppins', sans-serif;  }
#service a:hover  #serviceTitle, #service a:active  #serviceTitle{text-decoration:none; color: #222f47;}

#serviceTextInfo{display: block;}
#readMore{display: block;background: #ffffff; padding: 5px; border-radius: 5px; font-size: 1.3em; color: #222f47; margin: 10px;}
#service a:hover  #readMore, #service a:active  #readMore{text-decoration:none; background:#222f47; color: #ffffff; border-radius: 10px;}

#service a:link, #service a:visited{display: block; text-decoration:none; color:#ffffff; transition: ease 0.2s; border: 1px solid #fff; border-radius: 5px;}
#service a:hover, #service a:active{text-decoration:none; background:#ffffff; color: #222f47; border-radius: 20px;}

#service a:hover #serviceImg img, #service a:active #serviceImg img{border-radius: 20px 20px 0 0;}

#ftrWrap{background: #ffffff url("/styles/stylesets/202007earth2earth/images/ftr1.jpg") no-repeat center center;}
#footer{margin: 50px auto 0 !important;}

@media screen and (max-width:1200px){
    #service{width: 33%;}
    
}

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

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

@media screen and (max-width:900px){
    #serviceWrap{flex-wrap: wrap;}
    #service{width: 35%;}
    
}

@media screen and (max-width:800px){
    #ftrWrap{background:#ffffff url("/classes/timthumb.php?w=800&h=200&zc=1&q=75&src=/styles/stylesets/202007earth2earth/images/ftr1.jpg") no-repeat center bottom;} 
    
    
}

@media screen and (max-width:700px){
    #service{width: 45%;}
    
}

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

@media screen and (max-width:500px){
    #service{width: 65%;}
    
}

@media screen and (max-width:400px){
    #service{width: 80%;}
}

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