@font-face {
    font-family: 'huntsonregular';
    src: url('../fonts/huntson-webfont.eot');
    src: url('../fonts/huntson-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/huntson-webfont.woff2') format('woff2'),
         url('../fonts/huntson-webfont.woff') format('woff'),
         url('../fonts/huntson-webfont.ttf') format('truetype'),
         url('../fonts/huntson-webfont.svg#huntsonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'FreestyleScript-Regular';
  src: url('../fonts/FreestyleScript-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/FreestyleScript-Regular.woff') format('woff'), 
       url('../fonts/FreestyleScript-Regular.ttf')  format('truetype'), 
       url('../fonts/FreestyleScript-Regular.svg#FreestyleScript-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body{background-color: #c5f2f8; margin:0; padding:0; -webkit-tap-highlight-color: rgba(0,0,0,0);}

a, a:visited{color:#00949b; text-decoration:none;}
a:hover{text-decoration: underline;}

#clipper{width:100%; height: 100%; overflow:hidden;}
#wrapper{background-color:transparent; position: fixed; top:0;}
.pageBox{width:100%; height:100%; float:left;}        

/*
#pageTopLeft{background-color: #ccff00;}
#pageTop{background-color: #aa00aa;}
#pageLeft{background-color: #aa0000;}
#pageMiddle{background-color: #00aa00;}
#pageRight{background-color: #0000aa;}
*/      

#pageLeft {clear:both;}
.cloud {width:100px; height:76px; top:0; right:0; background-image: url(../images/cloud.png); position: relative;}

#truck { display:none; width:148px; height:71px; position:absolute; bottom:35px; left:50%; background-image: url(../images/truck.png); z-index: 105;}

#airship {width:436px; height:364px; position:absolute; background-image: url(../images/airship.png); left:50%; top:25%; margin-left:-218px; margin-top:-230px; z-index:30;}

.bird {width:71px; height:42px; position:absolute; top:0; left:0; z-index: 20;}

#road {position:absolute; bottom:0; left:0; right:0; height:70px; background-color: #fff; border-top:1px solid #000; text-align: center; z-index:100;}
#menu {position:fixed; bottom:10px; left:0; right:0; height:0; background-color:transparent; text-align: center; z-index:750;}
#menu ul{position: fixed; bottom:10px; left:0; right:0; margin:0; padding:0; z-index:900;}
#menu li{list-style: none; display: inline-block; margin:0 5px 0 5px; padding:0;}
#menu li a { text-decoration: none; color:#000; font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;
             text-transform: uppercase; font-size: 11px; font-weight: bold; font-style: italic;}

#house {position: absolute; background-image:url(../images/building.png); bottom:70px; left:50%; margin-left:-235px; width:269px; height:460px; z-index:90;}

#billboard {position: absolute; background-image:url(../images/billboard.png); bottom:70px; left:50%; margin-left:100px; width:223px; height:149px;}
#billboard img {position: absolute; top:0; left:0; margin: 5px;}

#homeClientBottom {z-index:10;}
#homeClientTop {z-index:20;}

#lamppost {position: absolute; background-image:url(../images/lamppost.png); bottom:70px; left:50%; margin-left:23px; width:77px; height:216px;}

#telegraph {position: absolute; background-image:url(../images/telegraph.png); bottom:70px; left:0; margin-left:-100px; width:1136px; height:320px;}

.city {position: relative; /*bottom:70px;*/ left:50%; margin-left:-400px; background-image: url(../images/buildings.jpg); width:799px; height:148px;}
.cityTestimonials {position: relative; /*bottom:70px;*/ left:50%; margin-left:-400px; background-image: url(../images/testimonialsBg.png); width:780px; height:148px;}


.hitZone{display: block; width:110px; height:120px; float:left; background-color:rgba(255,0,128, 0); margin-right: 5px; cursor:pointer;}
#specialHit {width:110px; height:120px; margin:0 0 0 510px;}
#adHit {margin:40px 0 0 20px;}
#mediaHit {margin:40px 0 0 30px;}
#marketingHit {margin: 30px 0 0 40px; width:80px; }
#philosophyHit {margin: 140px 0 0 10px; height:80px; width:95px;}

#offeringDetail {background-image:url(../images/birdBox.png); width:713px; height:289px; position:relative; left: 50%; margin-left: -356px; top:20%; cursor:pointer; z-index:90;}
#offeringDetail p {height: 180px; margin:85px 0 0 87px; float: left; clear:both; font-size: 14px; font-family: Calibri, Helvetica, Arial, sans-serif; width: 545px;}
#offeringDetail p a{color:#00949b; text-decoration: none;}


#birdLeft {-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";
float:left; margin:-20px 0 0 -38px;
}
#birdRight {float:right; margin:-20px -38px 0 0;}


#testimonialsWrapper {height:110px; background-color:transparent; position: absolute; bottom: 71px;}
#testimonialsDetail {background-image:url(../images/testimonial.png); width:480px; height:263px; position:relative; left: 50%; margin-left: -240px; top:15%; margin-top:-148px; opacity: 0; z-index:90;}
#testimonialsDetail p {margin:30px; float:left; font-size:14px; font-family: Calibri, Helvetica, Arial, sans-serif;}

@media (max-width: 1100px) {
#testimonialsDetail p {/* letter-spacing: -0.5px; margin:0 20px 10px 20px; */ font-size: 13px;}

}

#testimonialsDetail a{font-weight: bold; color:#000; font-size:14px; text-decoration: none; font-family: Calibri, Helvetica, Arial, sans-serif;}
#testimonialsDetail a:hover{color:#00949b;}


#telUK {float:left; font-family: 'huntsonregular'; font-size: 20px; margin:262px 0 0 184px; background-color: transparent; font-weight: 400; width:110px; letter-spacing: -0.5px;}
#telAU {display:none; float:left; font-family: 'huntsonregular'; font-size: 20px; margin:262px 0 0 0; background-color: white; font-weight: 400; width:100px; letter-spacing: -0.5px;}

/* the hit zones for the airship map links */
#mapUK {width:200px; height:30px; margin:0 0 0 130px; clear:both;}
#mapAU {display:none; width:100px; height:30px; margin:0 0 0 10px; }

#contactEmail {clear:both; margin:1px 0 0 130px; width:210px; height:30px;}

#aboutUs {position: fixed; top:0; left:0; right:0; bottom:0; z-index:500; background:url(../images/line.jpg) repeat-x bottom #fff; opacity: 1; display: none;}
#blackFade {position: fixed; top:0; left:0; right:0; bottom:0; z-index:110; background-color: #000; opacity: 0; display: none;}

#room {background-image:url(../images/room.jpg); width: 995px; height: 611px; position: fixed; bottom: 35px; left:50%; margin-left: -452px; z-index:960;}

#arrowLeft{position: fixed; left:30px; top:50%; margin-top: -40px; cursor: pointer; z-index:0; display: none;}
#arrowRight{position: fixed; right:30px; top:50%; margin-top: -40px; cursor: pointer; z-index:0; display: none;}
#arrowUp{position: fixed; left:50%; margin-left:-40px; top: 10px; cursor: pointer; z-index:0; display: none;}
#arrowDown{position: fixed; left:50%; margin-left:-40px; bottom: 60px; cursor: pointer; z-index:0; display: none;}

#hitLeft {position: fixed; left:0; top:0; bottom:0; width:100px; z-index:90; cursor: pointer; display:none;}
#hitRight {position: fixed; right:0; top:0; bottom:0; width:100px; z-index:90; cursor: pointer; display:none;}
#hitUp {position: fixed; left:100px; right:100px; top:0; height:100px; z-index:90; cursor: pointer; display:none;}
#hitDown {position: fixed; left:100px; right:100px; bottom:30px; height:100px; z-index:90; cursor: pointer; display:none;}


/* about us styles */

#room .hitZone {float:none; position: absolute; margin:0; padding:0;}

#person1, #person2, #person3 {width :60px; height:100px;}
#person1 {left: 12px; top: 255px; width:80px;}
#person2 {left: 95px; top: 255px; width:60px;}
#person3 {left: 163px; top: 255px; width:60px;}
#person4 {top:205px; left:409px; width: 125px; height: 135px; z-index:495;}
#person5 {left: 0px; top: 450px; width: 138px; height: 170px;}
#person6 {top: 415px; left: 240px; height: 83px; width: 85px;}
#person7 {width: 85px; height: 80px; top: 525px; left: 215px;}
#person8 {top: 329px; left: 409px; width: 125px; height: 67px; z-index: 495;}
#person9 {top: 409px; left: 400px; width: 140px; height: 195px; z-index: 495;}
#person10 {top: 510px; left: 409px; width: 125px; height: 30px; z-index: 496;}
#person11 {top: 540px; left: 409px; width: 125px; height: 30px; z-index: 496;}
#person12 {top: 565px; left: 409px; width: 125px; height: 30px; z-index: 496;}
#person13 {top: 395px; left: 120px; width: 66px; height: 40px; z-index: 496;}

.personName, .offeringName {font-family: 'huntsonregular'; font-size: 24px; color: #000; margin:0; padding: 0; text-align: center; line-height:30px;}

.offeringName {margin-top: -6px;}

#mediaHit {margin-top:67px;}
#marketingHit {margin-top:45px; margin-left: 47px;}
#adHit {margin-top:56px;}

#telegraph a:hover {text-decoration: none;}

#person1 .personName, #person2 .personName, #person3 .personName, #person13 .personName {width:60px; margin:6px 0 0 -3px;}
#person1 .personName {margin-left:12px;}
#person4 .personName {margin:0 0 0 -7px;}


/* clipping divs */

#person1 div, #person2 div, #person3 div, #person13 div {height: 15px; overflow: hidden; margin: 19px 0 0 0;}

#person4 div {height: 15px; overflow: hidden; margin: 106px 0 0 0;}

#person5 div {height: 15px; overflow: hidden; margin: 103px 0 0 42px; width:55px;}

#person6 div {display:none;}

#person7 div {height: 15px; overflow: hidden; margin: 38px 0 0 12px; width:50px;}

#person8 div {height: 15px; overflow: hidden; margin:21px 0 0 34px; width:50px;}

#person9 div {height: auto; overflow:visible; margin:76px 0 0 17px; width:110px;}

#person10 div, #person11 div, #person12 div {height: auto; overflow:visible; margin:0 0 0 8px; width:110px;}

#person9 .personName, #person10 .personName, #person11 .personName, #person12 .personName  {font-family: 'FreestyleScript-Regular', cursive; }

#person9 {background: url(../images/board.jpg) 10px 0 no-repeat; }

/* lighten up board font on ipad */

@media (max-width: 1100px) {
  #person9 .personName, #person10 .personName, #person11 .personName, #person12 .personName {color:#303030;}
}

#person1 .personName, #person2 .personName, #person3 .personName, #person4 .personName, #person5 .personName, #person7 .personName, #person8 .personName, #person9 .personName, #person10 .personName, #person11 .personName, #person12 .personName, #person13 .personName {margin-top:-12px;}

#twitterPara {position: absolute; left:150px; top:95px; font-family: 'huntsonregular'; font-size: 24px; margin: 0; padding: 0;}
#twitterPara a{color:#111;}
#twitterPara a:hover{text-decoration: none; color:#00949b;}

#cat {left: 600px; top: 505px; width: 65px; height: 50px;}
#fish {position: absolute; left: 580px; top: 422px; opacity: 0;}

#z1, #z2 {width:10px; position: absolute; left: 600px; top: 500px; z-index: 800;}

#blue {width: 465px; height: 205px; position: absolute; top: 200px; left: 240px; background-color: #c5f2f8; overflow: hidden;}
#windows {position: absolute; top: 188px; left: 223px;}

#insideCloud1 {margin:0 0 0 -100px; position: absolute; top:100px; left:0;}
#insideCloud2 {margin:0 0 0 -50px; width:50px; position: absolute; top:20px; left:0;}

#aboutBox {background: url(../images/aboutBox.png) no-repeat; width:583px; height:398px; position: absolute; left:50%; margin-left: -290px; top:70px; z-index:500; opacity: 0; display: none;}
#aboutBox .close {float:right; margin:0; padding:0; z-index: 520; width:50px; height:25px; cursor:pointer;}

#modalBox {background: url(../images/modal.png) no-repeat; width:282px; height:182px; position: absolute; left:50%; margin-left: -141px; top:50%; margin-top:-91px; z-index:500; opacity: 0; display: none;}
#modalBox .close {float:right; margin:0; padding:0; z-index: 520; width:50px; height:25px; cursor:pointer;}

#modalBox p {text-align: center; padding:0; margin:50px 10px 0 10px; font-family: Calibri, Helvetica, Arial, sans-serif; font-size: 13px;}
#modalBox a {text-decoration: none; padding:0 10px 0 10px; color: #000;}

#forClients {top:185px; left:788px; height: 150px;}
#forCandidates {left:867px; top:370px; height:230px;}

#aboutBox h3 {float:left; clear:both; font-family: 'huntsonregular'; font-weight: normal; font-size: 30px; margin:0 0 10px 20px; padding: 0;}
#aboutBox h4 {float:left; clear:both; font-family: Calibri, Helvetica, Arial, sans-serif; font-size: 13px; margin:0 20px 10px 20px; font-weight: bold;}
#aboutBox p {float:left; clear:both; font-family: Calibri, Helvetica, Arial, sans-serif; font-size: 13px; margin:0 20px 20px 20px; } 

@media (max-width: 1100px) {
#aboutBox p {letter-spacing: -0.5px; margin:0 20px 10px 20px;}

}

#aboutBox .tel {font-weight: bold; margin-bottom: 5px;}
#aboutBox .email {font-weight: bold; margin-bottom: 5px;}
#aboutBox .email a {font-weight: 400; text-decoration: none; color:#00949b;}

#peep {z-index: 1000; position: fixed; left:50%; bottom:0; margin-left:-500px;}
#peepLeft, #peepRight, #peepTop, #peepBottom {z-index: 1000; position: fixed; background: #000;}

.peep {display:none;}