/* CSS Document */

.agency {position: absolute; width: 100%; height:80%; top: 20%;}
.agency p{font-family:code; font-size: 100px; text-align:center; }

#loading img {margin-top: 10%;}
.hide_me {display:none;}

.hogilicious {
	position:absolute; width: 100%; height: 100%;
	background:url(../hogilicious/hogilicious_bg.jpg) no-repeat center top;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.hogilicious-logo {position: absolute; right: 7%; bottom: 20%;}
.hogilicious-logo img{width: 150px;}

.work-hogilicious {position: absolute; left: 7%; bottom: 10%;}

.vinegar {
	position:absolute; width: 100%; height: 100%;
	background:url(../vinegar/vinegar_bg.jpg) no-repeat center top;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.vinegar-logo {position: absolute; right: 7%; bottom: 18%;}

.work-vinegar  {position: absolute; left: 7%; bottom: 10%;}

.iwearmuga {
	position:absolute; width: 100%; height: 100%;
	background:url(../muga/iwear-muga-bg.png) no-repeat center top;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.muga-logo {position: absolute; right: 9%; bottom: 20%;}

.work-muga {position: absolute; left: 7%; bottom: 10%;}


.atom {
	position:absolute; width: 100%; height: 100%;
	background:url(../atom/atom_bg.jpg) no-repeat center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.atom-logo {position: absolute; right: 5%; bottom: 20%;}

.atom-logo img{width: 150px;}

.work-atom {position: absolute; left: 7%; bottom: 10%;}

.gamechager {
	position:absolute; width: 100%; height: 100%;
	background:url(../game-changer/gamechanger-bg.jpg) no-repeat center;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.gamechanger-logo {position: absolute; right: 4%; bottom: 20%;}

.work-gamechanger {position: absolute; left: 7%; bottom: 10%;}

.artwork {width: 600px; margin: 100px auto 0 auto}
.artwork img{width: 600px;}
.artwork_gamechanger {width: 750px;}
.artwork_gamechanger img{width: 750px;}
@media(max-width:1100px){
.agency {position: absolute; width: 100%; height:70%; top: 30%;}
.agency p{font-family:code; font-size: 80px; text-align:center; }

.artwork {width: 600px; margin: 100px auto 0 auto}
.artwork img{width: 600px;}
}

@media(max-width:900px){
.agency {position: absolute; width: 100%; height:70%; top: 30%;}
.agency p{font-family:code; font-size: 60px; text-align:center; }
.atom-logo img{width: 150px;}

}

@media(max-width:600px){
.agency {position: absolute; width: 100%; height:70%; top: 30%; z-index: 11;}
.agency p{font-family:code; font-size: 40px; text-align:center; }

.artwork {width: 400px; margin: 100px auto 0 auto}
.artwork img{width: 100%;}

.vinegar-logo {position: absolute; width:100%; right: 0; bottom: 18%;}
.vinegar-logo img{margin: auto 0 0 23% ;}

.gamechanger-logo {position: absolute; width:100%; right: 0; bottom: 18%;}
.gamechanger-logo img{margin: auto 0 0 22% ;}

.muga-logo {position: absolute; width:100%; right: 0; bottom: 18%;}
.muga-logo img{margin: auto 0 0 35% ;}

.atom-logo {position: absolute; width:100%; right: 0; bottom: 18%;}
.atom-logo img{width: 110px; margin: auto 0 0 42% ;}
.hogilicious-logo img{width: 130px;}

}

@media(max-width:400px){
.agency {position: absolute; width: 100%; height:70%; top: 30%;}
.agency p{font-family:code; font-size: 30px; text-align:center; }

.artwork {width: 80%; margin: 100px auto 0 auto}
.artwork img{width: 100%;}

.vinegar-logo {position: absolute; width:100%; right: 0; bottom: 18%;}
.vinegar-logo img{margin: auto 0 0 15% ;}

.gamechanger-logo {position: absolute; width:100%; right: 0; left: 0; bottom: 19%;}
.gamechanger-logo img{width: 70%; margin: auto 0 0 8%;}

.muga-logo {position: absolute; width:100%; right: 0; bottom: 18%;}
.muga-logo img{margin: auto 25% ;}

.atom-logo {position: absolute; width:100%; right: 0; bottom: 18%;}
.atom-logo img{width: 100px; margin: auto 0 0 35% ;}
.hogilicious-logo img{width: 100px;}

}