/*	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
*/
#homeMainWrap{display: flex; justify-content: center; margin: 20px auto 20px;}
#homeWrap{width: 35%;margin: 10px;}
#homeWrap a:link, #homeWrap a:visited{text-decoration:none; background: #009833; color: #ffffff;padding: 10px; transition: ease-in-out 0.3s; display: block;height: 610px;}
#homeWrap a:hover, #homeWrap a:active{text-decoration:none; background: #454545; color: #d1aa67; }

#homeWrap a:link #moreInfo, #homeWrap a:visited #moreInfo{display: block;background: #d1aa67; color: #000000; display: block; padding: 10px;margin: 10px auto 0;width: 55%;text-align: center;font-size: 1.2em;}
#homeWrap a:hover #moreInfo, #homeWrap a:active #moreInfo{display: block;background: #ffffff; color: #454545; display: block;}

#homeTitle{display: block;font-family: 'Dosis', sans-serif; font-size: 2em;text-align: center;}
#homeInfo{display: block; height: 280px;}
#homeImg{display: block;margin: 10px auto 10px;}

.boxtitledefault{width: 1200px; margin: auto;}
.boxbodydefault{width: 1200px; margin: auto;}

#results{align-items: center; justify-content: flex-start; flex-wrap: wrap; text-align: center;}
#results p{margin:5px;}

#results p a:link, #results p a:visited{text-decoration:none; color:#ffffff; background: #009833; transition: ease-in-out 0.3s;padding: 10px;display: block;}
#results p a:hover, #results p a:active{text-decoration:none; color:#d1aa67; background: #454545;}

@media screen and (max-width:1800px){
    #homeWrap a:link, #homeWrap a:visited{height: 590px;}
    #homeWrap a:link #moreInfo, #homeWrap a:visited #moreInfo{font-size: 1em;}
    #homeInfo{font-size: 0.95em;}
}

@media screen and (max-width:1600px){
    #homeWrap a:link, #homeWrap a:visited{height: 610px;}
    #homeInfo{font-size: 0.9em;}
}

@media screen and (max-width:1500px){
    #homeWrap a:link, #homeWrap a:visited{height: 640px;}
    #homeInfo{height: 300px;}
    #homeWrap a:link #moreInfo, #homeWrap a:visited #moreInfo{width: 65%;}
}

@media screen and (max-width:1400px){
    #homeWrap a:link #moreInfo, #homeWrap a:visited #moreInfo{width: 70%;}
}

@media screen and (max-width:1300px){
    #homeInfo{height: 320px;}
}

@media screen and (max-width:1200px){
   #homeWrap a:link, #homeWrap a:visited{height: 670px;}
   #homeWrap a:link #moreInfo, #homeWrap a:visited #moreInfo{width: 90%;}
   #homeInfo{height: 360px;}
}

@media screen and (max-width:1100px){
    #homeWrap a:link, #homeWrap a:visited{height: 680px;}
    #homeInfo{font-size: 0.9em;}
    #homeTitle{font-size: 1.5em;}
    #homeWrap{margin: 5px;}
    #homeInfo{height: 380px;}
}

@media screen and (max-width:1000px){
    #homeMainWrap{display: block;}
    #homeWrap{width: auto;}
    #homeWrap a:link, #homeWrap a:visited{height: auto;}
    #homeWrap a:link #moreInfo, #homeWrap a:visited #moreInfo{width: 50%;}
    #homeInfo{height: auto;}
}

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

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

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

@media screen and (max-width:600px){
  #homeWrap a:link #moreInfo, #homeWrap a:visited #moreInfo{width: auto;}  
}

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

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

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