* { -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative }

html {width: 100%; height: 100%}
body { background-color: #001457; height: 100%; overflow:hidden; letter-spacing: 0em;}


/* General construction Styles */
.wrapper {display: block; width: 100%; margin-bottom: 0px;}

.scrollPre1 {display: block; position: fixed; background: #fff; width: 50px; height: 50px; left: 50%; margin-left: -25px; bottom: 30px; border-radius: 50%; opacity: 0.6}
.scrollPre2 {display: block; position: fixed; background: #fff; width: 40px; height: 40px; left: 50%; margin-left: -20px; bottom: 35px; border-radius: 50%; opacity: 0.6}
.scrollPre3 {display: block; position: fixed; background: #fff; width: 30px; height: 30px; left: 50%; margin-left: -15px; bottom: 40px; border-radius: 50%; opacity: 0.6}

.scrollHintTop {display: block; position: fixed; bottom: 30px; left: 50%; margin-left: -25px; width: 50px; height: 50px; border-radius: 50%; border: 2px solid white; background: url("../images/down_arrow.gif") no-repeat 13px -2px; z-index: 20}
.scrollHintBack {display: block; position: fixed; bottom: 30px; left: 50%; margin-left: -25px; width: 50px; height: 50px; border-radius: 50%; background: #1d0f3e; border: 2px solid white; opacity: 0.5;  z-index: 19}
.scrollHintText {display: block; position: fixed; bottom: 10px; left: 50%; width: 60px; margin-left: -30px; color: #fff; text-align: center; text-transform: uppercase; font-family: 'Lato', sans-serif; font-size: 12px; line-height: 12px; vertical-align: bottom; z-index: 20}

.fs {height: 100vh}

.clearFloats {clear: both}

.shadowMed {-webkit-box-shadow: 1px 3px 4px 0px rgba(0,0,0,0.75); -moz-box-shadow: 1px 3px 4px 0px rgba(0,0,0,0.75); box-shadow: 1px 3px 4px 0px rgba(0,0,0,0.75);}
.shadowSml {-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);}

#loader {background: #001457 url('../images/loader.gif') center center no-repeat; display: block; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 99999; }

.policeTape {position: absolute; top: 0px; left: 0px; width: 99.9%; height: 65px; background: url('../images/police_tape.jpg') top center repeat-x; -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -webkit-backface-visibility: hidden; overflow: hidden; z-index: 10}
.policeTapeSml {position: relative; top: 0px; left: 0px; width: 99.9%; height: 35px; background-image: url('../images/police_tape.jpg'); background-repeat: repeat-x; background-size: 420px; -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -webkit-backface-visibility: hidden; overflow: hidden; z-index: 10}
.policeTapeOdd { -ms-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); transform: rotate(-2deg);}





/* Copy Styles */


p.leftText {display: inline-block; text-align: left; left: 0px;}
p.rightText {display: inline-block; text-align: right; right: 0px; }
p.centerText {display: block; text-align: center; width: 100%;}

.leftAlign {display: block; text-align: left; left: 0px;}
.rightAlign {display: block; text-align: right; right: 0px; }
.bottomAlign {position: absolute; bottom:0px; width: 100%;}

.floatLeft {display: block; float: left;}
.floatRight {display: block; float: right;}
.group:after { content: ""; display: table; clear: both; }


p { color: #fff; margin: 0px; text-indent: 0px; font-size: 19px; line-height: 30px; font-weight: 300; font-family: 'Ubuntu', san-serif; }
p strong {font-weight: 700; font-size: 1.1em}
p.blueBox { display: inline-block; position: relative; color: #fff; background: url('../images/blueBoxBg.png'); padding: 45px 30px 45px 30px;}
p.blueBox:before { content:""; display: block; position: absolute; width: 100%; height: 16px; top: 0px; left: 0px; background: url('../images/blueBoxTop.png') repeat-x top left;}


.title, .subTitle {background: none; color: #fff; font-family: 'Oswald', sans-serif; font-size: 90px; line-height: 90px; font-weight: 700; margin-bottom: 20px;text-transform: uppercase; }
.subTitle {color: #fff; font-size: 40px; line-height: 40px; font-weight: 700; margin-bottom: 20px; margin-top: 20px;}

.blueBoxPic { display: inline-block; position: relative; color: #fff; background: url('../images/blueBoxBg.png'); padding: 25px 10px 10px 10px;}
.blueBoxPic:before { content:""; display: block; position: absolute; width: 100%; height: 16px; top: 0px; left: 0px; background: url('../images/blueBoxTop.png') repeat-x top left;}

/* Pane Styles */
/* Pane 1 Intro */
.pane01 {position: relative; width: 100%; /*height: 200vh;*/ padding-bottom: 688px; background: url('../images/pane01_bg.jpg') no-repeat center center; background-size: cover; overflow: hidden; border: 0px solid yellow}

.frontContainer {position: relative; display: table; width: 100%; height: 100vh; border: 0px solid red}
.panedistress {position: absolute; width: 100%; height: 100%; background: url('../images/distress_dots_blue.png') center center;}
.checkTop {position: absolute; width: 100%; height: 100%; background: url('../images/blue_checks.png') top center repeat-x;}

#homeContainer {display: table-cell; vertical-align: middle; left: 0px; border: 0px solid yellow; text-align: center}
#homeContainer p {display: block; width: 60%; text-align: center; margin-left: 20%; margin-bottom: 20px; margin-top: -40px;}


.watchOnUktvPlay {display: inline-block; height: 92px; width: 337px;}
.watchOnUktvPlay a, .watchOnUktvPlay img {display: inline-block;}

#bill_logo {position: relative; width: 332px; height: 332px;}


.topVideo {display: block; position: relative; border: 0px solid white; text-align: center; padding: 20px; background: url('../images/blueBoxBg.png'); margin-top: 50px;}
.topVideo:before{content: ""; position: absolute; top: -40px; left: 0px; width: 99.9%; height: 65px; background: url('../images/police_tape.jpg') top center repeat-x; -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg); -webkit-backface-visibility: hidden; overflow: hidden; z-index: 10}
.topVideo:after{content: ""; position: absolute; bottom: -40px; left: 0px; width: 99.9%; height: 65px; background: url('../images/police_tape.jpg') top center repeat-x; -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.55); -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg); -webkit-backface-visibility: hidden; overflow: hidden; z-index: 10}

.pane01bottomFade {position: absolute; bottom: 0px; left: 0px; width: 100%; min-height: 688px; background: url('../images/sky_grad.png') center bottom repeat-x; }

.anchorLink {display: inline-block; position: relative; color: #fff; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 18px; line-height: 22px; text-transform: uppercase; margin-left: 10px; margin-right: 10px; margin-bottom: 5px; padding-bottom: 2px; border-bottom: 2px solid transparent; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out}
.anchorLink:hover {color: #1681cc; border-bottom: 2px solid white;}








/* Pane 2 Sun hill */
.pane02 { position: relative; width: 100%; min-height: 1050px; background: #101736; margin-bottom: 0px; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; }

.sunHillStationContainer {background: #8edee8; position: absolute; padding-top: 10%; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border: 0px solid pink}
.sunhillCover {position: absolute; width: 100%; height: 100%; background: #101736; top: 0px; left: 0px; opacity: 0; z-index: 10}
.sunHillStation {position: relative; left: 0px; width: 100%; height: 391px; background: url('../images/sunhill_station.jpg') repeat-x bottom center;}
.sunHillDoorsContainer {position: absolute; width: 86px; height: 120px; top: 271px; left: 50%; margin-left: 23px; overflow: hidden}
.sunHillDoors {position: absolute; width: 43px; height: 120px; top: 0px; background: url('../images/sunhill_doors.jpg'); overflow: hidden}
.sunHillDoorLeft{left: 0px; background-position: 0px 0px;}
.sunHillDoorRight{right: 0px; background-position: -43px 0px;}
.sunHillStationFloor {position: relative; left: 0px; width: 100%; height: 391px; background: url('../images/sunhill_station_floor.jpg') repeat-x bottom center;}
.sunHillSign {position: absolute; top: -100px; left: 5%; height: 212px; width: 355px; background: url('../images/sunhill_sign.png') no-repeat bottom left;}

.pane02 p.blueBox {margin-bottom: 20px;}
.pane02 p.box1, .pane02 p.box2 {margin-top: -30px}



/* Pane 3 Top Coppers */
.pane03 {display: block; position: relative; min-height: 1545px; width: 100%; background: #101736; margin-top: 0px; padding-bottom: 100px; padding-top: 0px; border: 0px solid red; overflow: hidden }

.pane03 .title {margin-top: 150px}
.noticeBoard {position: relative; width: 1674px; overflow: hidden; }

.noticeBoardSides { position: relative; width: 100%; padding: 20px; background: url('../images/noticeboard_sides.gif'); background-position: left top; overflow: hidden; }

.noticeBoardLeft .noticeBoardSides:before {content: ""; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 57px; background: url('../images/noticeboard_top.gif');}
.noticeBoardLeft .noticeBoardSides:after {content: ""; position: absolute; display: block; bottom: 0px; left: 0px; width: 100%; height: 57px; background: url('../images/noticeboard_bottom.gif');}

.noticeBoardRight .noticeBoardSides:before {content: ""; position: absolute; display: block; top: 0px; right: 0px; width: 100%; height: 57px; background: url('../images/noticeboard_top.gif'); background-position: right top;}
.noticeBoardRight .noticeBoardSides:after {content: ""; position: absolute; display: block; bottom: 0px; right: 0px; width: 100%; height: 57px; background: url('../images/noticeboard_bottom.gif'); background-position: right top;}

.noticeBoardLeft { float: left; margin-left: -80px; margin-top: 30px;}
.noticeBoardLeft:before {content: ""; position: absolute; display: block; top: 0px; left: 50px; width: 96%; height: 100%; background: url('../images/noticeboard_bg.jpg');}
.noticeBoardLeft .noticeBoardShine {width: 98.5%; height: 408px; border: 0px solid red; position: absolute; top: 660px; left: 14px; background: url('../images/noticeboard_shine.png') top left repeat-x}

.noticeBoardRight { float: right; margin-right: -80px; margin-top: 30px; }
.noticeBoardRight:before {content: ""; position: absolute; display: block; top: 0px; right: 50px; width: 96%; height: 100%; background: url('../images/noticeboard_bg.jpg');}
.noticeBoardRight .noticeBoardShine {width: 98.5%; height: 408px; border: 0px solid red; position: absolute; top: 660px; right: 8px; background: url('../images/noticeboard_shine.png') top left repeat-x}

.jobSheet {background: rgba(226,226,226,1); position: relative; display: block;  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(208,208,209,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(100%, rgba(208,208,209,1))); background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(208,208,209,1) 100%); background: -o-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(208,208,209,1) 100%); background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(208,208,209,1) 100%); background: linear-gradient(to bottom, rgba(226,226,226,1) 0%, rgba(208,208,209,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d0d0d1', GradientType=0 ); -webkit-box-shadow: 1px 3px 4px 0px rgba(0,0,0,0.75); -moz-box-shadow: 1px 3px 4px 0px rgba(0,0,0,0.75); box-shadow: 1px 3px 4px 0px rgba(0,0,0,0.75); width: 305px; min-height: 410px !important; padding: 10px; display:table;}
.jobSheet:after {content: "SUN HILL POLICE STATION"; position: absolute; bottom: 0px; left: 10px; font-size: 6px; line-height: 6px; font-weight: normal; color: #3e3e3e; text-align: left; width: 90%; height: 8px; }
.jobSheet:before {content: "SH - PR200 v 29:"; position: absolute; bottom: 0px; right: 10px; font-size: 6px; line-height: 6px; font-weight: normal; color: #3e3e3e; text-align: right; width: 90%; height: 8px; }
.jobSheet p {font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; font-size: 13px; line-height: 16px; color: #3e3e3e; padding: 5px;}
.jobSheet p.titleRank {text-transform: uppercase; margin-top: 10px;}
.jobSheet p.titleRank::first-letter { font-size: 1.2em;}
.jobSheet p.titleName {font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif; font-size: 24px; color: #3e3e3e; font-weight: bold; margin-left: 10px; margin-bottom: 5px; }
.jobSheet p.sectionTitle {width: 100%; clear: both; height: 24px; text-transform: uppercase; border-top: solid 2px #373737; border-bottom: solid 2px #373737; font-size: 11px; line-height: 11px; text-align: center}
.jobSheet .cvPic {padding: 10px; border-right: solid 2px #373737; float: left; width: 40%}
.jobSheet .cvRight {float: left; width: 60%}
.jobSheet .cvRight p {text-align: center}
.jobSheet .cvRight p.sectionTitle:first-of-type { border-top: solid 0px #373737;}
.jobSheetInner { background: url('../images/cv_watermark.gif') 50% 50% no-repeat; width: 100%; height: 100%; border: solid 4px #373737; display:table-cell; }
.jobSheetInner:before {content: ""; background: url('../images/cv_met_police_logo.gif'); background-size: 102px 27px; position: absolute; top: 5px; right: 5px; width: 102px; height: 27px;}

.bobCryer {margin-top: 60px; margin-left: 70px;}
.regHollis {margin-top: -80px; margin-left: 440px;}
.juneAckland {margin-top: -700px; margin-bottom: 370px;  margin-left: 870px; -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg);}

.pollyPage {float: right; margin-right: 860px;margin-top: 320px; -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.jimCarver {float: right; margin-top: -675px; margin-right: 465px; -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg);}
.toshLines {float: right; margin-top: -300px; margin-right: 205px; -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.frankBurnside {float: right; margin-top: -670px; margin-right: -450px; margin-bottom: 450px}

.graceDasari {margin-top: 80px; margin-left: 80px; -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.daveQuinnan {margin-top: -190px; margin-left: 440px; -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.tonyStamp {margin-top: -630px; margin-left: 860px; margin-bottom: 320px; -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg);}

.samanthaNixon {float: right; margin-top: 50px; margin-right: 70px; -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.mickeyWebb {float: right; margin-top: 290px; margin-right: 50px; margin-bottom: 60px; -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg);}


.noticeBoardPin {position: absolute; width: 20px; height: 20px; background: url('../images/noticeboard_pins.png'); background-repeat: no-repeat; border: 0px solid red;}
.noticeBoardPinBlue {background-position: 0px 0px}
.noticeBoardPinYellow {background-position: -20px 0px}
.noticeBoardPinGreen {background-position: -40px 0px}
.noticeBoardPinBlack {background-position: -60px 0px}
.noticeBoardPinRed {background-position: -80px 0px}

.noticeBoardPinTopLeft {top: -5px; left: -5px}
.noticeBoardPinTopRight {top: -4px; right: -4px}
.noticeBoardPinBottomRight {bottom: -5px; right: -5px}
.noticeBoardPinBottomLeft {bottom: -5px; left: -5px}
.rndPin1 {bottom: 150px; left: 145px}
.rndPin2 {bottom: 370px; left: 1045px}
.rndPin3 {top: 300px; left: 405px}
.rndPin4 {top: 340px; left: 435px}
.rndPin5 {top: 540px; left: 765px}
.rndPin5b {top: 460px; left: 1435px}
.rndPin6 {top: 170px; left: 775px}
.rndPin7 {top: 270px; left: 475px}
.rndPin7b {top: 420px; left: 1155px}
.rndPin8 {bottom: 190px; left: 365px}
.rndPin9 {bottom: 150px; left: 1065px}

.board_npcc {position: absolute; left: 100px; bottom: 80px;}
.board_bombs {position: absolute; left: 570px; top: 75px; width:197px; height:305px; -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.board_fraud {position: absolute; left: 900px; bottom: 120px; width:157px; height:223px}
.board_cctv {position: absolute; left: 1110px; bottom: 95px; width:150px; height:225px}
.board_cctv2 {position: absolute; left: 970px; top: 70px; width:150px; height:225px}
.board_uktvplay {position: absolute; left: 210px; bottom: 225px; width: 117px; height:88px; z-index: 10}
.board_uktvplayb {position: absolute; left: 1470px; bottom: 125px; width: 117px; height:88px; z-index: 10}
.board_drama {position: absolute; left: 440px; top: 125px; width:77px; height:77px; z-index: 10}
.board_dramab {position: absolute; left: 1200px; top: 175px; width:77px; height:77px; z-index: 10}
.board_dramac {position: absolute; left: 120px; bottom: 175px; width:77px; height:77px; z-index: 10}
.board_prob_nothing { position: absolute; left: 440px; top: 75px; width: 334px; height:225px; }
.board_life_savers { position: absolute; left: 880px; bottom: 69px; width: 247px; height:349px;  -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.board_life_savers2 { position: absolute; left: 480px; bottom: 79px; width: 247px; height:349px;  -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}





/* Pane 4 Rotten Apples */
.pane04 {display: block; position: relative; background: #fff; margin-top: 0px; padding-top: 0px; border: 0px solid transparent; background: url('../images/pane04_bg.jpg') no-repeat top center; background-size: cover;}
.pane04:before {content: ""; display: block; position: absolute; width: 100%; height: 128px; top: 0px; left: 0px; background: url('../images/pane04_top.png') no-repeat top center; z-index: 1}

.pane04 .title {margin-top: 150px}

.rapSheet {display: block; position: relative; width: 530px; min-height: 700px; background: #f3f3f3; font-family: 'Ubuntu', san-serif; font-size: 16px; line-height: 18px; color: #1b1a1a; padding-bottom: 80px; margin-bottom: 20px; -webkit-backface-visibility: hidden; -webkit-box-shadow: 1px 4px 6px 2px rgba(0,0,0,0.55); -moz-box-shadow: 1px 4px 6px 2px rgba(0,0,0,0.55); box-shadow: 1px 4px 6px 2px rgba(0,0,0,0.55);  }
.rapSheet:before {content: 'POLICE APPEAL FOR ASSISTANCE'; display: block; width: 94%; text-align: center; font-size: 20px; line-height: 20px; padding: 12px 0px 12px 0px; font-weight: normal; color: #fff; background: #00009b; margin: 0px auto}
.rapSheet:after {content: ''; background: url('../images/rapsheet_bottom.gif') no-repeat bottom left; background-size: 100%; display: block; width: 100%; height: 100px; position: absolute; bottom: 0px; left: 0px; }
.rapSheet p.crimes {color: #e41c1c; font-size: 30px; line-height: 28px; margin-top: 15px; font-weight: bold; text-transform: uppercase; text-align: center}
.rapSheet p.crimes:after {content: ""; display: block; width: 94%; height: 8px; background: #e41c1c; margin: 15px auto 0px }
.rapSheet p { color: #1b1a1a; margin: 10px 40px 10px 40px; text-align: center; font-size: 16px; line-height: 22px; }
.rapSheet p strong {font-size: 22px; line-height: 30px; text-transform: uppercase; display: block; }
.rapSheet img {display: block; border: 0px solid red; margin: 0px auto}

.rapDonBeech { float: right; -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
.rapEddieSantini {float: left; -ms-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); transform: rotate(-2deg); margin-top: -300px}
.rapGabrielKent {float: right; -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); margin-top: -300px}

.pane04 .ctaBox { margin-top: 100px; margin-left: 50px; float: left;}


/* SOME RIGHT BAD 'UNS */
.pane05 {display: block; position: relative; width: 100%; padding-bottom: 150px; background: url('../images/pane05_bg.jpg') no-repeat center center; background-size: cover;}
.pane05:before {content: ""; display: block; position: absolute; width: 100%; height: 128px; top: 0px; left: 0px; background: url('../images/pane05_top.png') no-repeat top center; z-index: 1}

.pane05 .title {margin-top: 150px}

.caseFile {width: 840px; min-height: 540px; -webkit-backface-visibility: hidden; }
.caseFileLeft {position: absolute; left: 0px; top: 0px; width: 420px; height: 540px; background: url('../images/casefile_folder_left.png')}
.caseFileRight {position: absolute; right: 0px; top: 0px;  width: 420px; height: 540px; background: url('../images/casefile_folder_right.png')}
.caseFilePaper {position: absolute; top: 20px; right: 45px; padding-bottom: 10px; width: 366px; min-height: 505px !important; background: #f3f3f4; -webkit-box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.55); -moz-box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.55); box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.55); -ms-transform: rotate(0.5deg); -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg);}
.caseFilePaper:before {content: ""; display: block; position: relative; width: 181px; height: 29px; margin: 10px auto; background: url('../images/casefile_fastener.gif') no-repeat;}

.caseFile:last-of-type {margin-bottom: 100px}

.caseNotes {border: #5f5f60 2px solid; margin: 10px; font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;  display:table}
.caseNotes:after {content: "SUN HILL POLICE STATION"; position: absolute; bottom: -15px; left: 0px; font-size: 7px; line-height: 7px; font-weight: normal; color: #3e3e3e; text-align: left; width: 90%; height: 8px; }
.caseNotes:before {content: "SH - PR200 v 29:"; position: absolute; bottom: -15px; right: 0px; font-size: 7px; line-height: 7px; font-weight: normal; color: #3e3e3e; text-align: right; width: 90%; height: 8px; }

.caseNotes p, .caseNotes p.caseTop, .caseNotes p.caseTitle {font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; font-weight: 600; font-size: 16px; line-height: 16px; color:#3e3e3e; text-transform: none; padding: 10px; }

.caseNotes p.caseTop small {display: block; position: relative; font-weight: 300;}
.caseNotes p.caseTitle {font-weight: 300; font-size: 16px; line-height: 16px; border-bottom: #5f5f60 1px solid; border-top: #5f5f60 1px solid; }
.caseNotes p.caseTitle:before {content: "Crime File:"; position: relative; font-size: 12px; line-height: 12px; font-weight: 600; margin-left: 15px; display: block;}
.caseNotes p.caseTitle span {font-size: 24px; font-weight: bold; margin-left:-5px; margin-right: 15px; }
.caseNotes p {font-weight: 300; font-size: 14px; line-height: 18px;}

.file1 { float: right; -ms-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); transform: rotate(-2deg);}
.file2 { float: left; margin-top: -10px; -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}

.caseFilePic_oap {position: absolute; top: 0px; left: 100px;}
.caseFilePic_hotdog {position: absolute; bottom: 10px; left: 100px;}
.caseFilePic_coppers {position: absolute; top: 180px; left: 0px;}
.caseFilePic_cowboy {position: absolute; top: 0px; left: 150px;}
.caseFilePic_prints {position: absolute; top: 200px; left: 0px;}
.caseFilePic_horse {position: absolute; bottom: 0px; left: 175px;}

/* THE SUN HILL SERIAL KILLER */
.pane06 {display: block; position: relative; width: 100%; min-height: 100vh; padding-bottom: 50px; background: #1681cc }
.pane06:before {content: ""; display: block; position: absolute; width: 100%; height: 128px; top: -128px; left: 0px; background: #1681cc url('../images/pane05_top.png') no-repeat top center; z-index: 1}

.pane06 .title {margin-top: 80px}
.pane06 .row {z-index: 10}
.mapContainer {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; border: 0px solid red; z-index: 1}
.canleyMap {position: absolute; bottom: 50%; left: 50%; margin-left: -1225px; margin-bottom: -1386px; border: 0px solid pink; opacity: 0}
.victim, .suspect {position: absolute; width: 1060px; left: 50%; margin-left: -530px; bottom: 100px; border: 0px solid red}

.victim p, .suspect p {width: 45%; margin-left: 20px; padding-bottom: 20px;}
.victim p:before {content: "the victims:"; position: absolute; top: 0px; left: 0px; padding-left: 30px; padding-top: 27px; width: 100%; text-transform: uppercase; font-size: 1.2em; color:#b70b30; font-weight: bold; border:0px solid red; -moz-box-sizing: border-box; box-sizing: border-box;}
.suspect p:before {content: "the suspects:"; position: absolute; top: 0px; left: 0px; padding-left: 30px; padding-top: 27px; width: 100%; text-transform: uppercase; font-size: 1.2em; color:#1681cc; font-weight: bold; border:0px solid red; -moz-box-sizing: border-box; box-sizing: border-box;}
.killer p:before {content: "the culprit:"; position: absolute; top: 0px; left: 0px; padding-left: 30px; padding-top: 27px; width: 100%; text-transform: uppercase; font-size: 1.2em; color:#b70b30; font-weight: bold; border:0px solid red; -moz-box-sizing: border-box; box-sizing: border-box;}


.pane06 p.blueBox { padding: 65px 30px 45px 30px;}
.victim .pin, .suspect .pin {position: absolute; left: 52%; bottom: 50px;}
.victim .blueBoxPic, .suspect .blueBoxPic {position: absolute; right: 0px; bottom: -50px; margin-right: 20px}

.pin {width: 66px; height: 86px; background: url('../images/map_pin_marker.png') no-repeat; background-size: 100%;}
.pinInner {position: absolute; top: 12px; left: 13px; width: 40px; height: 40px; border: solid 10px #0b1ca3; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }




/* THE SUN HILL FIRES */


.pane07 {display: block; position: relative; width: 100%; padding-top: 1px; padding-bottom: 100px; background: #101736 url('../images/pane07_bg.jpg') no-repeat top center; background-size: cover;}
.pane07:before {content: ""; display: block; position: absolute; width: 100%; height: 128px; top: -63px; left: 0px; background: url('../images/pane07_top.png') no-repeat top center; z-index: 1}

.pane07 .title {margin-top: 90px}

.newspaper {position: relative; left: 50%; width: 1021px; min-height: 492px; background: url('../images/newspaper_middle.png') repeat-y 0px 0px; padding: 20px 70px 20px 70px; margin-left: -510px; margin-top: 250px; margin-bottom: 100px; -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg); -webkit-backface-visibility: hidden; }
.newspaper:before {content: ""; position: absolute; top: -241px; left: 0px; width: 1021px; height: 242px; background: url('../images/newspaper_top.png') no-repeat top left; -webkit-backface-visibility: hidden;}
.newspaper:after {content: ""; position: absolute; bottom: -109px; left: -1px; width: 1021px; height: 110px; background: url('../images/newspaper_bottom.png') no-repeat top left; -webkit-backface-visibility: hidden;}
.newspaperOdd { -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg);}

.newsLeft {width: 49%; float: left}
.newsRight {width: 49%; float: right}

.newsDate, .newsPrice {position: absolute; left: 75px; top: -170px; font-size: 12px; font-weight: bold; font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; color: #1b1a1a;}
.newsPrice {right: 80px; text-align: right;}
.newspaper p.newsHeadline {font-family: 'Oswald', sans-serif; font-size: 78px; line-height: 78px; text-align: center; color: #383742; margin-top: 0px; margin-bottom: 20px; color: #383742; }
.newspaper p.newsSubHeadline {font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif; color: #383742; font-size: 36px; line-height: 40px; margin-bottom: 20px;}
.newspaper p {color: #383742; font-size: 18px; line-height: 24px; margin-bottom: 22px; }

.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

/* SHOCKING MOMENTS */
.pane08 {display: block; position: relative; width: 100%; padding-top: 1px; padding-bottom: 50px; background: #5e6166 url('../images/pane08_bg.jpg') no-repeat top center; background-size: cover; padding-bottom: 150px;}
.pane08:before {content: ""; display: block; position: absolute; width: 100%; height: 128px; top: 0px; left: 0px; background: url('../images/pane05_top.png') no-repeat top center; z-index: 1}
.pane08:after {content: ""; display: block; position: absolute; width: 100%; height: 128px; bottom: -63px; left: 0px; background: url('../images/pane07_top.png') no-repeat top center; z-index: 1}

.pane08 .title {margin-top: 150px}

.shockBox {width: 100%; position: relative; border: 0px solid blue; margin-top: 50px; }
.shockBox .span_7 {padding-top: 40px;}

/* LOVE ON DUTY */
.pane09 {display: block; position: relative; width: 100%; padding-top: 1px; padding-bottom: 50px; background: #5e6166 url('../images/pane08_bg.jpg') no-repeat top center; background-size: cover; }
.pane09 .title {margin-top: 150px}
.picFrameRight, .picFrameLeft {width:304px; height:359px; margin: 10px auto;}
.picFrameRight:after {content:""; background: url('../images/picFrameRight.png'); position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-size: auto; background-repeat: no-repeat}
.picFrameLeft:after {content:""; background: url('../images/picFrameLeft.png'); position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-size: auto; background-repeat: no-repeat}


/* PRE FOOTER */
.prefooter {display: block; position: relative; background: #1d0f3e; padding-top: 30px; padding-bottom: 30px;}
.prefooter * {z-index: 10}
.prefooter:after {content: ""; display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url('../images/sky_grad.png') repeat-x top left; padding-top: 30px; padding-bottom: 30px; opacity: 0.1}
.prefooter .col {border: 0px solid yellow}


/*.prefooter .detailGroup {float: left; width: 60%}*/
.prefooter .details {color: #fff; display: block; font-size: 15px; line-height: 20px; padding-bottom: 8px; font-family: "Armata",Helvetiva,Arial,sans-serif;}
.prefooter .details em {color: #afafaf; display: block; font-size: 16px; padding-bottom: 0px; font-family: "Armata",Helvetiva,Arial,sans-serif; font-style: normal}
.prefooter .details strong {display: block; font-family: 'Oswald', sans-serif; font-size: 50px; line-height: 50px; font-weight: 700; text-transform: uppercase; color: #1681cc; padding-top: 5px; padding-bottom: 5px;}
.prefooter .transTime {display: block; text-transform: uppercase; color: #fff; font-size: 20px; line-height: 20px; padding-bottom: 3px; font-family: "Armata",Helvetiva,Arial,sans-serif;}
.prefooter .transTime a {display: inline-block; padding-left: 30px; margin-bottom: 5px; color: #fff; text-decoration: none; background:url("../images/uktv_play_icon.gif") no-repeat 0px 0px; background-size: 19px 19px;}
.prefooter .transTime a.noIcon {background:none; padding-left: 0px;}
.prefooter .transTime a span {display: inline-block; border-bottom: 1px solid #1681cc}
.prefooter .details a {text-decoration: none; color: #61a600}
.prefooter .details a:hover {text-decoration: underline; color: #fff}
.prefooter .transTime a:hover {color: #1681cc}
.prefooter .transTime a:hover > span {border-bottom: 1px solid transparent}


ul.channel-numbers.large { margin: 0; padding: 5px 5px 5px; width: 250px; float: right; border: 0px solid red; color: #fff; font-family: Verdana,Geneva,sans-serif;}
ul.channel-numbers.large li.platform { display: block; float: left; margin: 0px 0px 17px 20px; border: 0px solid pink; text-align: center; height: 63px; position: relative; }
ul.channel-numbers li.platform span.text { background: url("../images/platform-logos-sprite.png") 0 0 no-repeat; display: inline-block; height: 50px; width: 57px; text-indent: -9999px; }
ul.channel-numbers.large li.platform span.number {display: block; height: 20px; line-height: 20px; font-size: 16px; position: absolute; bottom: 0; left: 0;width: 100%;}
ul.channel-numbers li.platform.sky span.text { width: 55px; }
ul.channel-numbers.large li.platform.virgin span.text { background-position: 0 -50px; }
ul.channel-numbers li.platform.freeview span.text { background-position: 0 -250px; width: 65px; margin-top: 8px; }
ul.channel-numbers.large li.platform.youview span.text { background-position: 0 -190px; width: 72px; }
ul.channel-numbers.large li.platform.freesat span.text { background-position: 0 -356px; width: 72px; }


footer {display: block;}

footer ul, footer ol { margin: 0em 0; padding: 0px; display: block; }
footer#site-footer section.footer-bar { padding: 6px 10px 2px; background: #fff; display: block; position: relative; letter-spacing: 0px; color: #535353; }
footer#site-footer .social-title { display: inline-block; color: #333; float: left; font-family: Verdana, Arial, sans-serif; font-size: 11px; text-shadow: none; margin: 0; padding: 0; position: relative; top: 7px; font-weight: normal; }
footer#site-footer .footer-social-links { border-bottom: 1px solid #d1d1d1; height: 30px; padding: 0px; margin: 0px; width: auto; border-bottom: none; display: inline; line-height: 0; *display: inline; *zoom: 1; }

footer#site-footer .footer-social-links li { background: none; display: block; float: left; height: 30px; margin-left: 20px; width: 30px; }
footer#site-footer .footer-social-links li a { text-indent: -9999px; font-size: 0; line-height: 0; }

.social-links li a, .social-links div a { background-image: url('../images/social-sprite.png'); background-repeat: no-repeat; border-radius: 3px; display: block; font-size: 14px; height: 30px; line-height: 30px; width: 30px; text-align: center; text-indent: -9999px; }
.social-links li .fb, .social-links div .fb { background-position: 0 0; }
.social-links li .tw, .social-links div .tw { background-position: 1px -50px; }
.social-links li .yt, .social-links div .yt { background-position: 0 -150px; }
.social-links li .em, .social-links div .em { background-position: 0 -250px; }

footer#site-footer .imagined-by { float: right; display: block; position: relative; font-size: 11px; top: -3px; height: 35px; line-height: 35px; margin: 0 auto; width: 124px; text-align: center; padding: 20px 0 18px; text-align: center; font-family: Verdana, Arial, sans-serif; text-transform: none; }
footer#site-footer .imagined-by a { color: #333; text-decoration: none; }
footer#site-footer .imagined-by span { background: url("../images/uktv-sprite.png") 0 0px no-repeat; display: block; position: relative; float: right; height: 35px; margin-left: 5px; width: 35px; text-indent: -999em; }
footer#site-footer .imagined-by { float: right; margin: 0; padding: 0; position: relative; top: -3px; }

.copyright {display: block; font-family: "Armata",Helvetiva,Arial,sans-serif; font-size: 0.8em; color: #1681cc; clear: both; text-align: center; margin-top: 5px;}

/* colours */
.a{ fill:#FFF;}
.white {color: #fff;}
.lightBlue {color:#1681cc}


/**********************************
* Tablets // GREEN 
**********************************/
@media only screen and (max-width: 1200px) {
	.noticeBoardLeft {margin-left: 0px; }
	.noticeBoardRight {margin-right: 0px; }
	.juneAckland {margin-top: -270px; margin-left: 110px; margin-bottom: 60px;}
	.board_cctv {left: 890px; bottom: 595px;}
	.board_uktvplay {left: 480px; bottom: 125px; }
	
	.pollyPage {margin-top: 60px; margin-right: 460px;}
	.jimCarver {margin-top: 585px; margin-right: -305px; }
	.toshLines {margin-top: 500px; margin-right: -665px;}
	.frankBurnside {margin-top: 70px; margin-right: -695px; margin-bottom: 620px}

	.tonyStamp {margin-top: -110px; margin-left: 80px; margin-bottom: 100px; -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg);}
	

	.board_life_savers { left: 545px; bottom: 169px;}
	.board_npcc {left: 100px; bottom: 500px;}
	
	.board_dramac { left: 620px; bottom: 75px; }
	.rndPin1 {bottom: 150px; left: 85px}
	.rndPin8 {bottom: 90px; left: 465px}
	.rndPin9 {bottom: 70px; left: 1365px}
	
	.rapDonBeech { float: right; }
	.rapEddieSantini {float: left; margin-top: 100px}
	.rapGabrielKent {float: right; margin-top: 00px}

}

/**********************************
* Tablets // YELLOW
**********************************/
@media only screen and (max-width: 1060px) {

	.title {font-size: 80px; line-height: 80px;}
	p {font-size: 18px; line-height: 28px;}
	
	.noticeBoard {width: 100%; border: 0px dotted yellow; }
	.noticeBoardLeft {margin-left: 20px; }
	.noticeBoardRight {margin-right: 20px; }
	.noticeBoardRight .noticeBoardSides {background-position: right top; }
	.sunHillSign {position: relative; top: auto; left: 5%;}
	
	 .board_prob_nothing, .board_life_savers { display: none;}
	
	.jimCarver { margin-top: 70px; margin-right: 465px; }

	.toshLines {margin-top: 40px}
	.frankBurnside { margin-top: -400px}
	
	.pane04 .ctaBox { display: none;}
	.rapDonBeech { float: none; margin: 20px auto 10px}
	.rapEddieSantini {float: none; margin: 10px auto 20px}
	.rapGabrielKent {float: none; margin: 30px auto}
	
	.caseFile {width: 800px;}
	.caseFileLeft {position: relative; left: 0px; top: 0px; width: 50%; }
	.victim, .suspect {width: 100%; left: 0; margin-left: 0px; bottom: 100px;}
	.victim {width: 100%; left: 0; margin-left: 0px;}
	.victim .blueBoxPic, .suspect .blueBoxPic {width: 30%; }
	.victim .blueBoxPic img, .suspect .blueBoxPic img {width: 100%; height: auto; }
	
	.newspaper {left: 0px; width: 100%; background-position: 50% 50%; background-size: 1021px; padding: 20px; margin-left: 0px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	.newspaper:before {left: 0px; width: 100%; background-position: 50% 50%; background-size: 1021px}
	.newspaper:after {width:100%; background: url('../images/newspaper_bottom.png') no-repeat 50% 50%; background-size: 1021px}

	.lovepic {width: 90%; height: auto;}
	.lovepic img {width: 100%; height: auto;}
	.picFrameRight:after, .picFrameLeft:after {background-size: 100% auto}
}





/**********************************
* Mobile Devices // PINK
* - All columns are full width
**********************************/
@media only screen and (max-width: 767px) {
	.title {font-size: 70px; line-height: 70px;}
	p {font-size: 16px; line-height: 26px;}
	
	
	.pane03 .span_15 {padding: 0px;}
	.noticeBoard {margin-left: 0px;}
	.noticeBoardRight {margin-right: 0px;}
	.bobCryer {margin: 60px auto 10px;}
	.regHollis {margin: 10px auto; position:relative; left:auto;}
	.juneAckland {margin: 0px auto 150px;}
	.board_bombs {left: 70%; top: 75px; }
	.board_fraud {left: 80%; bottom: 120px;}
	.board_drama {left: 85%; top: 435px;}
	.board_cctv {left: 90px; bottom: 595px;}
	.board_uktvplay {left: 80px; bottom: 75px; }
	
	
	.pollyPage {float: none; margin: 60px auto 10px;}
	.jimCarver {float: none; margin: 0px auto 10px; position:relative; left:auto}
	.toshLines {float: none; margin: 0px auto 10px; position:relative; right:auto}
	.frankBurnside{float: none; margin: 0px auto 60px; position:relative; left:auto}

	.graceDasari {margin: 60px auto 10px; position:relative; left: auto;}
	.daveQuinnan {margin: 0px auto 10px;}
	.tonyStamp {margin: 0px auto 150px; position:relative; left:auto;}
	
	.samanthaNixon {float: none; margin: 60px auto 10px; position: relative; right: auto;}
	.mickeyWebb {float: none; margin: 0px auto 150px; position:relative; right: auto;}
	
	.board_drama {left: 60%; top: 90%; }
	.board_dramac {left: 70%; bottom: 75px; }
	
	.board_npcc, .board_bombs, .board_fraud, .board_cctv, .board_life_savers2 { display: none;}


	.caseFile {width: 100%; min-height: 620px; -webkit-backface-visibility: hidden;}
	.caseFilePaper {min-height: 555px !important;}

	.caseFileLeft {position: relative; left: 0px; top: 0px;  width: 320px; }
	.file1 { float: none; }
	.file2 { float: none; }
	.caseFilePic_cowboy {left: 30px;}






	.mapContainer {position: relative; top: 0px; left: 0px; width: 100%; height: auto; overflow: hidden; border: 0px solid red}
	
	.victim, .suspect {position: relative; bottom: auto; margin-bottom: 30px; width: 100%; padding: 10px; left: 0; margin-left: 0px; bottom: auto;}
	.victim .pin, .suspect .pin {display: none;}
	.victim .blueBoxPic, .suspect .blueBoxPic {width: 100%; position: relative; right: auto; bottom: auto; margin-right: 0px}
	.pane06 p.blueBox { width: 100%; margin-left: 0px; padding-bottom: 20px}

	.newspaper:before { background-size: 110%; background-position: bottom}
	.newspaper p.newsHeadline {font-size: 58px; line-height: 58px; }
	.newspaper p.newsSubHeadline {font-size: 32px; line-height: 36px;}
	.newsDate, .newsPrice {display: none;}



	.newsLeft {width: 100%;}
	.newsRight {width: 100%;}

	.inner iframe {width:500px; height:283px}
}


/**********************************
* PURPLE
**********************************/
@media only screen and (max-width: 599px) {
	
	.title {font-size: 60px; line-height: 60px;}
	p {font-size: 15px; line-height: 24px;}

	.pane01 {/*height: 180vh;*/}
	#homeContainer p {width: 90%; text-align: center; margin-left: 5%; margin-bottom: 20px; margin-top: -40px;}
	
	.noticeBoardSides {padding: 0px}
	.rapDonBeech { width: 100%; -ms-transform: rotate(0.5deg); -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg);}
	.rapEddieSantini {width: 100%; -ms-transform: rotate(-0.5deg); -webkit-transform: rotate(-0.5deg); transform: rotate(-0.5deg);}
	.rapGabrielKent {width: 100%; -ms-transform: rotate(0.5deg); -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg);}
	
	.caseFileLeft {display: none;}
	.caseFileRight {width: 100%; background: none; }
	.caseFilePaper {position: relative; top: 20px; right: 0px; padding-bottom: 10px; width: 100%; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}

	.file1 { -ms-transform: rotate(-0.5deg); -webkit-transform: rotate(-0.5deg); transform: rotate(-0.5deg);}
	.file2 { -ms-transform: rotate(0.5deg); -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg);}
	
	ul.channel-numbers.large {float: left; margin-top: 10px;}
	ul.channel-numbers.large li.platform { margin: 20px 17px 0px 0px;}
	
	.inner iframe {width:100%; height:227px}
	
	.pane09 .span_5 {width: 100%; border: 0px solid yellow}
	.lovepic {width: 55%; height: auto;}
	
	.copyright {text-align: left; padding-top: 10px; padding-bottom: 10px;}
}


@media only screen and (max-width: 399px) {
	
	.inner iframe { height:190px}
	.jobSheet {width: 90%;}

}

@media only screen and (max-width: 349px) {
	
	.inner iframe { height:180px}
	.jobSheet {width: 90%;}

}


@media only screen and (max-height: 769px) {
	#homeContainer {display: block; position: relative; top: auto; margin-top: 70px; margin-bottom: 200px; transform: none; border: 0px solid yellow;}
}

.no-js .pane01, .touchevents .pane01 {border: 0px solid red}
.no-js .introCopy, .touchevents .introCopy { position: absolute; top: 0px; right: 20px; border: 0px solid yellow}
.no-js .scrollHint, .touchevents .scrollHint { top: 40%; }

.no-js .pane02 .text1, .touchevents .pane02 .text1 { padding-top: 0px;}

.no-js .barbWireGroup, .touchevents .barbWireGroup {display: none;} 
.no-js .pane03, .touchevents .pane03 {overflow: hidden}
.no-js .pane03 .text1, .no-js .pane03 .text2, .no-js .pane03 .text3, .no-js .pane03 .text4, .no-js .pane03 .text5, .no-js .pane03 .text6 {position: relative; margin-bottom: 30px;}
.touchevents .pane03 .text1, .touchevents .pane03 .text2, .touchevents .pane03 .text3, .touchevents .pane03 .text4, .touchevents .pane03 .text5, .touchevents .pane03 .text6 {position: relative; margin-bottom: 30px;}
.no-js .mapContainer, .touchevents .mapContainer {position: relative; top: auto; width: 100%; }
.no-js .mapContinaerCenter, .touchevents .mapContinaerCenter { position: relative; top: auto; margin-top: 0px; height: auto;}
.no-js #maps, .touchevents #maps { position: relative; top: auto;}
.no-js .mapHut, .touchevents .mapHut {display: block; position: relative; top: auto; margin-top: 600px}
.no-js .mapHutTower, .touchevents .mapHutTower {display: none; }
.no-js #map01, .no-js #map02, .touchevents #map01, .touchevents #map02 { position: relative; width: 610px; height: 420px; }

.no-js .mapHutline, .no-js .mapSand, .touchevents .mapHutline, .touchevents .mapSand{display: none;}

.no-js .pane07 .tunnelCart, .touchevents .pane07 .tunnelCart  {left: 150px;}



/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.fs, .tunnel {height: 768px;}
	.pane01 { height: 1000px;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.fs, .tunnel {height: 1024px;}
	.pane01 { height: 1332px;}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
	.fs, .tunnel {height: 320px;}
	.pane01 { height: 416px;}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
	.fs, .tunnel {height: 568px;}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	.fs, .tunnel { height: 320px;}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	.fs, .tunnel { height: 480px; }
}