body { background:url(img/gray-bg.jpg); }

#services { position:absolute; width:100%; height:100%; }
#services .header { position:relative; overflow:hidden; }
#services .header .pic-ctnr                   { position:relative; display:block;  }
#services .header .pic-ctnr  .picture         { position:relative; width:100vw; height:33.2vw; }
#services .header .pic-ctnr  .picture .lo-res { width:100%; }
#services .header .pic-ctnr  .picture .hi-res { position:absolute; top:0; left:0; background-size:cover; width:100%; height:100%;  }
#services .header .pic-ctnr  .picture .teeth  { position:absolute; left:0; bottom:0; width:100%; }
#services .header .logo { position:absolute; display:block; top:1em; left:5%; width:23vw; z-index:1; }

#services .list-ctnr { position:relative; margin-left:5%; margin-right:4%; margin-top:2em; color:#5f3713; } 
#services .list-ctnr ul { position:relative; display:inline-block; list-style:none; margin:0; padding:0; vertical-align:top; }
#services .list-ctnr ul.list { width:100%; }
#services .list-ctnr ul.list li { position:relative; display:inline-block; width:18%; margin-right:1%; margin-left:1%; float:left; line-height:1.5em; }
#services .list-ctnr ul.list li p { margin-top:0; margin-bottom:0.3em; }
#services .list-ctnr ul.list li div.title  { position:absolute; background-color:black; top:-5em; color:white; font-weight:bold; padding:0.8em 0.5em 0.8em 0.5em; font-size:0.75em; width:95%; font-size:1em; text-align:center; }
#services .list-ctnr ul.list li div.no-title { background-color:transparent; }

@media screen and (min-width:1300.001px) { #services .header .pic-ctnr .picture .hi-res { background-image:url(img/gravelgorilla.jpg); } }
@media screen and (max-width:1300px)     { #services .header .pic-ctnr .picture .hi-res { background-image:url(img/gravelgorilla.jpg); } }

@media screen and (max-width:900px)  { 
#services .list-ctnr { font-size:0.9em; }
}
@media screen and (max-width:850px)  { 
#services .list-ctnr { font-size:0.8em; }
}
@media screen and (max-width:768px) {
.gray-top { opacity:1; }
#services .header .logo { display:none; }
#services .header  { top:108px; }
#services .header .pic-ctnr .picture { width:768px; height:auto; }
#services .header .pic-ctnr .picture .hi-res { background-image:url(img/services-pic_768.jpg); }
#services .services-logo { display:none; }
#services .list-ctnr { top:120px; }
}
@media screen and (max-width:700px) {
#services .list-ctnr { margin-left:95px; margin-top:-3em; margin-right:2em; font-size:1em; } 
#services .list-ctnr ul.list li { width:100%; min-height:75px; margin-bottom:0.5em; float:none; }
#services .list-ctnr ul.list li p { min-height:80px; }
#services .list-ctnr ul.list li .icon { position:absolute; display:block; left:-85px; }	
#services .list-ctnr ul.list li div.title { position:relative; display:inline-block; left:-100px; margin-top:0; top:auto; padding:0.8em 1em 0.8em 1em; margin-bottom:1em; white-space:nowrap; min-width:25%; max-width:50%; }
#services .list-ctnr ul.list li div.no-title { display:none; }
}
@media screen and (max-width:480px) { 
#services .header { top:60px; }
#services .header .pic-ctnr .picture { width:640px; }
#services .header .pic-ctnr .picture .lo-res { margin-left:0px; }
#services .header .pic-ctnr .picture .hi-res { background-image:none; }
#services .list-ctnr { margin-top:-7em; font-size:0.8em; }
#services .list-ctnr ul.list li div.title { bottom:0px; padding:0.8em 1em 0.8em 1em; width:90%; min-width:85%; }
}