@charset "UTF-8";
/* CSS Document */

html {height: 100%;}
body {margin: 0; padding: 0; font-size: 16px; font-family: 'Open Sans', sans-serif; height: 100%; padding: 2em 0; box-sizing: border-box;}
header, section, footer {width: 100%; display: inline-block;}
#top {border-bottom: 1px solid #000;}
#bottom {border-top: 1px solid #000;}

h1 {font-size: .8em; font-weight: 700; margin: 0 0 1em; padding: 0; width: 100%;}
p {font-size: .8em; margin: 0 0 1em; padding: 0; opacity: 1!important;}
#logo {font-weight: 700;}
.container {max-width: 996px; margin: auto; padding: 1em 0; box-sizing: border-box;}
.left {float: left; width: 50%; text-align: left; font-size: .8em;}
.right {text-align: right; font-size: .8em;}

nav {font-size: .8em;}
ul {list-style-type: none; margin: 0; padding: 0;}
ul li {display: inline; margin: 0 0 0 1em;}

nav a:link {text-decoration: none; color: #000;}
nav a:visited {text-decoration: none; color: #000;}
nav a:hover {text-decoration: none; color: #666;}
nav a:active {text-decoration: none; color: #000;}

#work {width: 100%; display: table;}
#work .item {width: 16.66%; padding: 1em; box-sizing: border-box; float: left; text-align: center; font-size: .8em; color: #FFF; position: relative; display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center; -webkit-transition: width 0.5s; /* Safari */ transition: width 0.5s;}
#work .item p {transform: translate( -50%, -50%); left: 50%; top: 50%; width: 100%; position: absolute; display: inline-block; padding: 0; margin: 0; cursor: pointer;}
#work .item p:hover {opacity: 0.5;}
.overlay {background-color: rgba(0, 0, 0, 0.6); left: 0; top: 0; width: 100%; height: 100%; position: absolute; opacity: 0; -webkit-transition: opacity 0.5s; /* Safari */ transition: opacity 0.5s; cursor: cursor!important;}
.overlay:hover {opacity: 1;}

#work a:link {text-decoration: none; color: #FFF;}
#work a:visited {text-decoration: none; color: #FFF;}
#work a:hover {text-decoration: none; color: #CCC;}
#work a:active {text-decoration: none; color: #FFF;}

.page {width: 100%; display: inline-block;}
.me {display: block; max-width: 90%;}
.col {width: 50%; float: left;}
.col p:last-child {margin-bottom: 0;}

#heinzwindowcleaner {background-image: url(../images/heinz-windowcleaner.jpg);}
#heinzbricklayer {background-image: url(../images/heinz-bricklayer.jpg);}
#heinzasphalter {background-image: url(../images/heinz-asphalter.jpg);}
#heinzelvis {background-image: url(../images/heinz-elvis.jpg);}
#heinzbasketball {background-image: url(../images/heinz-basketballteam.jpg);}
#heinzparkattendant {background-image: url(../images/heinz-parkattendant.jpg);}

#heinzspaghetti {background-image: url(../images/heinz-spaghetti.jpg);}
#chuxsuperscrub {background-image: url(../images/chux-superscrub.jpg);}
#indexoncensorship {background-image: url(../images/index-censorship.jpg);}
#rspca {background-image: url(../images/rspca.jpg);}
#actforkids {background-image: url(../images/actforkids.jpg);}
#epa {background-image: url(../images/epa.jpg);}

#oakflies {background-image: url(../images/oak-flies.jpg);}
#oakfleas {background-image: url(../images/oak-fleas.jpg);}
#oakbeetles {background-image: url(../images/oak-beetles.jpg);}
#oakworm {background-image: url(../images/oak-worm.jpg);}
#adultlounge {background-image: url(../images/adult-lounge.jpg);}
#adultbedroom {background-image: url(../images/adult-bedroom.jpg);}

#airasiafriendsy {background-image: url(../images/airasia-friendsy.jpg);}
#monstercrayons {background-image: url(../images/actforkids-monstercrayons.jpg);}
#rid {background-image: url(../images/rid-amazon.jpg);}
#airasiacomeback {background-image: url(../images/airasia-comeback.jpg);}
#airasialeave {background-image: url(../images/airasia-leave.jpg);}
#airasiaholiday {background-image: url(../images/airasia-holiday.jpg);}

a:link {text-decoration: none; color: #000;}
a:visited {text-decoration: none; color: #000;}
a:hover {text-decoration: underline; color: #000;}
a:active {text-decoration: none; color: #000;}

@media screen and (max-width: 996px) {
	body {padding: 1em;}
}

/*--- MOBILE ---*/
@media screen and (max-width: 480px) {
    #work .item {
        width: 33.33%!important;
		min-height: 115px!important;
    }
	
	.col {
		width: 100%;	 font-size: 1em;
	}
	
	.me {
		margin-bottom: 1em;
		max-width: 100%;
	}
}