#secondaryLogo { margin-bottom:20px; }

#workTop { background-image:url('/images/servicesTop.png'); background-repeat:no-repeat; background-size:100% 56px; height:56px; }
#workHeading { background-color:#333333; color:#cccccc; font-size:40px; font-weight:bold; text-align:center; padding-top:30px; padding-bottom:20px; }
#workBottom { background-image:url('/images/servicesBottom.png'); background-repeat:no-repeat; background-size:100% 54px; height:54px; margin-bottom:50px; }

#workDescription { margin:50px 0 50px 0; font-size:18px; border-radius:6px; background-color:#cccccc; color:#333333; padding:25px; }

.workContainer { display:-webkit-flex; display:-ms-flexbox; display:flex; clear:both; float:left; flex-wrap:wrap; width:100%; }

.workItem { margin:0.3%; width:24.4%; height:250px; border:3px solid #333333; border-radius:6px; display:-webkit-flex; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:space-between; background-repeat:no-repeat; background-size:cover; background-position:center center; }
.workItem:hover { cursor:pointer; }







/* Image popup */

#viewImage { display:none; height:100%; width:100%; background-color:#ffffff; position:fixed; bottom:0; left:0; z-index:5; animation-name:viewImagePopup; animation-duration: 0.5s; overflow:auto }
@keyframes viewImagePopup { from {height: 0} to {height: 100%} }



#image { margin-top:30px; margin-bottom:100px; }
#image img { width:100%; border-radius:6px; border:3px solid #333333; }
.image { width:16.6%;float:left; }


#close { position:fixed; width:100%; background-color:#ff5733; text-align:center; color:#ffffff; bottom:0; padding:20px; cursor:pointer; }







@media only screen and (max-width: 1440px) {
/* For laptop: */



}



@media only screen and (max-width: 1100px) {
/* For inbetween: */

.workItem { width:48%; }

}



@media only screen and (max-width: 800px) {
/* For tablets: */



}



@media only screen and (max-width: 414px) {
/* For mobile phones: */

.workItem { width:100%; }

}