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

html, body {margin: 0; height: 100%; width: 100%; background-color: #fff; padding: 0; font-size: 16px; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"; box-sizing: border-box;}

header {width: 100%; position: absolute; top: 0; left: 0; padding: 2em; box-sizing: border-box; height: 8em;}
#logo {height: 100%;}
.left {width: 20%; box-sizing: border-box; float: left; height: 2em; display: inline-block;}
.right {width: 80%; box-sizing: border-box; float: left; text-align: right; height: 2em; font-family: 'Karla', sans-serif; display: inline-block;}

footer {width: 100%; position: relative; float: left; padding: 0; box-sizing: border-box; font-size: 1em;}

nav a:link {margin-left: 1em; font-size: 14px; color: #000; text-decoration: none;}
nav a:visited {color: #000; text-decoration: none;}
nav a:hover {color: #000; text-decoration: underline;}
nav a:active {color: #000; text-decoration: none;}

.main {width: 100%; height: 100%; margin: auto;}
.intro {vertical-align: middle; height: 100%; padding: 2em; width: 100%; box-sizing: border-box; overflow: hidden; position: relative;}
.introtext {font-size: 4em; letter-spacing: -5px; font-weight: bold; top: 50%; transform: translateY(-50%); position: absolute;}

.about {height: 100%; padding: 2em; width: 100%; box-sizing: border-box; position: relative;}
.aboutheadline {font-size: 4em; letter-spacing: -5px; font-weight: bold; color: #fff; margin-top: 2em; margin-bottom: 1em;}
.abouttext {font-size: 14px;}
.strike {opacity: 50%; text-decoration: line-through;}

.scroll {width: 100%; position: absolute; bottom: 0; left: 0; padding: 2em; box-sizing: border-box; font-size: 14px; color: #000000; font-family: 'Karla', sans-serif; font-weight: 400;}

.title {width: 70%; position: relative; float: left; background-color: #000; color: #fff; padding: 2em; box-sizing: border-box;}
.picture {width: 30%; height: 30em; position: relative; float: left;}

.parallax-window {margin: 4em 0; padding: 1em; box-sizing: border-box; width: 100%; transition: all 0.2s ease-in-out; display: inline-block; position: relative; float: left; background-color: #000; clear: both; min-height: 35em; background: transparent; background-position: cover;}

.work {margin: 0; padding: 1em; box-sizing: border-box; width: 100%; transition: all 0.2s ease-in-out; display: inline-block; position: relative; float: left;}
.hero {width: 100%; display: block;}
.workinside {width: 100%; float: left; padding: .5em; box-sizing: border-box; text-align: center; display: inline-block;}
.worktile {box-sizing: border-box; background-position: center; background-size: cover; display: inline-block; vertical-align: middle; width: 100%; position: relative;}

p {font-family: 'Karla', sans-serif; font-size: 16px; color: #9b9b9b; font-weight: 400;}

h1 {padding: 0; margin-top: 0; font-size: 5em; letter-spacing: -5px; line-height: .9;}
h2 {padding: 0; color: #9b9b9b; margin-bottom: .5; font-size: 1.5em; letter-spacing: -1px;}
h3 {padding: 0; font-size: 16px; color: #9b9b9b; font-family: 'Karla', sans-serif; font-weight: 400; margin-bottom: 2em;}
h4 {margin: 3em 0 1em 0; font-style: italic; text-align: left; font-size: 16px; text-align: center;}

a.workdesc {box-sizing: border-box; background-color: #f1f1f1; padding: 10em 0; width: 100%; display: inline-block; position: relative; opacity: 0%; cursor: pointer; font-size: .8em;}
a.workdesc:link {text-decoration: none; color: #000}
a.workdesc:hover {opacity: 95%; transition: all 0.2s ease-in-out;}
a.workdesc:visited {text-decoration: none; color: #000;}

.ooh {padding: 0; box-sizing: border-box; display: inline-block;}
.ooh img {display: block;}
.full {width: 100%; float: left; padding: 0; box-sizing: border-box;}
.half {width: 100%; float: left; padding: 0; box-sizing: border-box;}

/*-----WORK-----*/

#nced {background-image: url("../work/brisbane/nothings-changed-everythings-different/BrisbaneMarketing_NCED-Hero.jpg");}
#fathersday {background-image: url("../images/INSTANTSCRATCHITS-FathersDay.gif");}
#qfcc {background-image: url("../work/qfcc/QFCC-Hero.jpg");}
#innerhealth {background-image: url("../work/inner-health/inner-health-plus-double-strength/InnerHealthDoubleStrength-HeroImage.jpg");}
#twcqantas {background-image: url("../work/terrywhite-chemmart/qantas-partnership/TWCM-Qantas_HeroImage.jpg");}
#winners {background-image: url("../work/isi/winners/POPCORN_04.jpg");}
#monopoly {background-image: url("../work/isi/monopoly/ISI-Monopoly-HeroImage-1.jpg");}
#codebreaker {background-image: url("../work/isi/code-breaker/ISI-CodeBreaker-HeroImage.jpg");}
#joyments {background-image: url("../images/INSTANTSCRATCHITS-Joyments.gif");}
#isuzu {background-image: url("../work/isuzu/GYOW-Isuzudual-water.jpg");}
#ppq {background-image: url("../work/ppq/PPQ-Hero.jpg");}
#mothersday {background-image: url("../work/isi/mothers-day/ISI-MothersDay-HeroImage.jpg");}
#communities {background-image: url("../images/THELOTT-ALottToGoAround.gif");}
#bigaussiefun {background-image: url("../work/oz-lotto/big-aussie-fun/OZLotto-BigAussieFun-Tile.jpg");}
#bungimyumi {background-image: url("../images/SPLAGER-BungimYumi-Hero.jpg");}
#translink {background-image: url("../images/TRANSLINK-BeKind-Hero.jpg");}
#rsl {background-image: url("../images/RSL-MoreThanYouKnow-Hero.jpg");}
#twc {background-image: url("../images/TWC-Weight-Hero.jpg");}
#microdoors {background-image: url("../images/Bond-MicroDoors.gif"); background-position: center;}
#dedicatedtocare {background-image: url("../images/TWC-DedicatedToCare.jpg");}
#challengingrewardingpolicing {background-image: url("../images/QPS-ChallengingRewardingPolicing_Hero.jpg");}
#qutrecruitment {background-image: url("../images/QUT-Recruitment.gif"); background-position: center;}
#qutrealis {background-image: url("../images/QUT-RealIs_Hero.jpg"); background-position: center;}
#riotintointo {background-image: url("../images/RioTinto-Into.gif"); background-position: center;}

/*-----INSIDE PAGES-----*/

.content {
	padding: 2em;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: left;
	text-align: center;
}

.content img {
	width: 100%;
	display: block;
	padding: .25em;
	box-sizing: border-box;
}

/*-----VIDEO-----*/

.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}
.video-responsive iframe{
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
	padding: .25em;
	box-sizing: border-box;
}

.video-responsive-vert {
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
    height: 0;
}
.video-responsive-vert iframe{
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
	padding: .25em;
	box-sizing: border-box;
}

/*-----RESPONSIVE MEDIA QUERY-----*/

@media only screen and (min-width: 600px) {
	.workinside {width: 50%; transition: all 0.2s ease-in-out;}
	.half {width: 50%;}
}

@media only screen and (min-width: 800px) {	
	.introtext {font-size: 6em; transition: all 0.2s ease-in-out;}
	.main {width: 85%; margin: auto; transition: all 0.2s ease-in-out;}
}

@media only screen and (min-width: 1200px) {
	.left, .right {width: 50%;}
	.main {width: 70%; margin: auto; transition: all 0.2s ease-in-out;}
	.workinside {width: 33.33%; transition: all 0.2s ease-in-out;}	
	.content {max-width: 80%; transition: all 0.2s ease-in-out;}
}

@media only screen and (max-height: 600px) {
	.introtext {font-size: 3.5em!important; letter-spacing: -2px;}
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
	  
	.main {width: 100%; padding: 2em; box-sizing: border-box;}

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px)
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
	  html, body {background-color: #ff0!important;}
	  .introtext {font-size: 2em!important;}
}