body { margin: 0; padding: 0; background: #E1DCCE }
@font-face{font-family:'Guardian Sans Web Bold';src:url('../fonts/Guardian Sans Web-Bold.woff') format("woff");
font-weight:700;
font-style:normal}

@font-face{font-family:'Guardian Sans Web Light';src:url('../fonts/Guardian Sans Web-Light.woff') format("woff");
font-weight:300;
font-style:normal}

@font-face{font-family:'Guardian Sans Cond Web Bold';src:url('../fonts/Guardian Sans Cond Web-Bold.woff') format("woff");
font-style:normal}

header{width:100%}

nav{
	position: fixed;
    top: 60px;
    width: 190px;
    z-index: 9999;
	padding:1px;
	z-index:999;
	background: #367BBC;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
	transition: right 0.5s;
	-webkit-transition: right 0.5s;	
}

#main-nav{
	right:5px;
}

#main-nav.closed{
	right:-195px;
}

nav .nav-tab{
	width:35px;
	height:45px;
	border-radius:5px;
	position:absolute;
	top:50px;
	right:190px;
	font-size:28px;
	padding:7px;
	line-height:45px;
	z-index:0;
	text-align:center;
	cursor:pointer;
	background: #367BBC;
	color:#fff;
}

nav a{
	background: #285a8a;
    color:  #E1DCCE;
    display: block;
    font-family: Arial;
    font-size: 16px;
    line-height: 24px;
    margin: 1px auto 1px 1px;
    padding: 1px 47px 2px 5px;
    text-decoration: none;
	
}



nav a:hover{
	color:#fff;
	background: #367BBC;
}

header img{
	/* margin-top:-4vw; */
}

#section0 header img{
	padding-top:40px;
}


header img{width:100%}
header .hd-image{
	width:100%;
	background-size:100%;
	-moz-background-size: cover;
	-o-background-size: cover;	
}


header .hd-image2{
	width:100%;
	background-size:100%;
	-moz-background-size: cover;
	-o-background-size: cover;	
}

#section1 .hd-image{background:url(../images/subs.jpg) no-repeat 0 0; background-size:100%}
#section2 .hd-image{background:url(../images/sub2.jpg) no-repeat 0 0; background-size:100%}
#section3 .hd-image{background:url(../images/sub3.jpg) no-repeat 0 0; background-size:100%}
#section4 .hd-image{background:url(../images/sub4.jpg) no-repeat 0 0; background-size:100%}
#section5 .hd-image{background:url(../images/sub5.jpg) no-repeat 0 0; background-size:100%}
#section6 .hd-image{background:url(../images/sub6.jpg) no-repeat 0 0; background-size:100%}
#section7 .hd-image{background:url(../images/sub7.jpg) no-repeat 0 0; background-size:100%}
#section8 .hd-image{background:url(../images/sub8.jpg) no-repeat 0 0; background-size:100%}
#section9 .hd-image{background:url(../images/sub9.jpg) no-repeat 0 0; background-size:100%}
#section10 .hd-image{background:url(../images/sub10.jpg) no-repeat 0 0; background-size:100%}
#section11 .hd-image{background:url(../images/sub11.jpg) no-repeat 0 0; background-size:100%}
#section12 .hd-image{background:url(../images/sub12.jpg) no-repeat 0 0; background-size:100%}
#section13 .hd-image{background:url(../images/sub13.jpg) no-repeat 0 0; background-size:100%}
#section14 .hd-image{background:url(../images/sub14.jpg) no-repeat 0 0; background-size:100%}
#section15 .hd-image{background:url(../images/sub15.jpg) no-repeat 0 0; background-size:100%}
#section16 .hd-image{background:url(../images/sub16.jpg) no-repeat 0 0; background-size:100%}

#section_collins .hd-image2{background:url(../images/profile_collins.jpg) no-repeat 0 0; background-size:100%}
#section_soryu .hd-image2{background:url(../images/profile_soryu.jpg) no-repeat 0 0; background-size:100%}
#section_barracuda .hd-image2{background:url(../images/profile_barracuda.jpg) no-repeat 0 0; background-size:100%}
#section_216 .hd-image2{background:url(../images/profile_216.jpg) no-repeat 0 0; background-size:100%}



header.pagetop{
	width:100%;
	/* background:#E0D19F; */
	background:#fff;
	position:fixed;
	height:40px;
	z-index:9999;
	border-bottom:1px solid #ccc;
}


.masthead_logos{position:absolute; width:910px; top:5px; left:50%; margin-left:-350px}
.masthead_logos span {}
.masthead_logos span a{display:block; float:left; text-decoration:none; line-height:30px; font-size:20px; padding:2px 62px; color:#fff}

.masthead_logos span.logo_news a{background:url(../images/masthead_logos.png) no-repeat 0px 0;}
.masthead_logos span.logo_adv a{background:url(../images/masthead_logos.png) no-repeat -135px 0;}
.masthead_logos span.logo_aus a{background:url(../images/masthead_logos.png) no-repeat -270px 0;}
.masthead_logos span.logo_dt a{background:url(../images/masthead_logos.png) no-repeat -405px 0;}
.masthead_logos span.logo_pn a{background:url(../images/masthead_logos.png) no-repeat -545px 0;}
.masthead_logos span.logo_cm a{background:url(../images/masthead_logos.png) no-repeat -680px 0;}
.masthead_logos span.logo_hs a{background:url(../images/masthead_logos.png) no-repeat -815px 0;}

.pagetop-logo{position:absolute; width:160px; height:60px; background:url(../images/toplogo.png) no-repeat 0 0; margin:7px;}

.clear{clear:both}

header .hd-bar{
	height:4.1vw;
	width:auto;
	opacity:0.99;
	overflow:hidden;
	margin-bottom:-4vw;
}


header .ft-bar{
	height:55vw;
	width:auto;
	opacity:0.99;
	margin-top:-53.3vw;
	overflow:hidden; 
}


header .ft-bar svg{
	/*float:left;
	width:100%;
	height:100%; */
	float:left;
	width:100%;
	
}

header .ft-bar .img-svg, header .hd-bar .img-svg {
	float:left;
	width:100%;
	height:100%;
}

body.old_safari header .hd-bar{	
	width:100%;
	/* Values below equal vw * 100, which are converted to px values by script */
	height:6px;
	margin-bottom:-5px;
}

body.old_safari header .ft-bar{
	width:100%;
	/* Values below equal vw * 100, which are converted to px values by script */
	height:55px;
	margin-top:-55px;	
	
}

body.old_safari header .hd-image{
	background-size: cover;
	-webkit-background-size: cover; 
    background-position: center center;
}

header svg{
	
	
}
#section1{
	padding-top:40px;
}

.expert{
	position:absolute;
	right:5%;
	width:18%;
	max-width:300px;
	height:400px;
	margin-top:-450px;
	
}



.expert.chris-burns{
	background: url("../images/chris-burns.png") no-repeat bottom;	
	background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;	
}

.expert.paul-johnson{
	background: url("../images/paul-johnson.png") no-repeat bottom;	
	background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;	
}

.expert.kevin-andrews{
	background: url("../images/kevin-andrews.png") no-repeat bottom;
background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;		
}

.expert.peter-briggs{
	background: url("../images/peter-briggs.png") no-repeat bottom;	
	background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;	
}

.expert.jay-weatherill{
	background: url("../images/jay-weatherill.png") no-repeat bottom;	
	background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;	
}

.expert.innes-willox{
	background: url("../images/innes-willox.png") no-repeat bottom;	
	background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;	
}


.expert.goran-roos{
	background: url("../images/goran-roos.png") no-repeat bottom;	
	background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;	
}

.expert.andrew-davies{
	background: url("../images/andrew-davies.png") no-repeat bottom;
background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;		
}

.expert.john-bruni{
	background: url("../images/john-bruni.png") no-repeat bottom;
background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;		
}

.expert.rex-patrick{
	background: url("../images/rex-patrick.png") no-repeat bottom;
	background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;	
}



.expert.beth-laughton{
	background: url("../images/beth-laughton.png") no-repeat bottom;
	background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;	
}

.expert.belinda-willis{
	background: url("../images/belinda-willis.png") no-repeat bottom;
	background-size:100%;	
	-moz-background-size: cover;
	-o-background-size: cover;	
}




article{
	margin-left:12%;
	margin-right:15%;
}

body.old_safari article{
	padding-top:50px;
}

article p, article ul li, article ol li{
	font-family:'Lato', Arial, Helvetica;
}

article h5{
	margin:0; 
	padding:0;
	font-family:Arila, Helvetica;
	color:#fff;
	background: #285a8a;
	float:left;
	padding-left:10px;
	padding-right:10px;
	line-height:20px;
	font-size:14px;
}

article img{
	

}

article img.im-left{
	float:left;
	margin-right:10px;
}

article img.im-right{
	float:right;
	margin-left:10px;
}

article img.im-full{
	float:left;
	margin:0px;
	width:100%;
}

article .quotebox {
	width:366px;
	margin-bottom:10px;
}

article .quotebox  h2{
	font-family: "Guardian Sans Web Bold", Arial, Helvetica;
    color:#367BBC;
	font-size: 28px;
    font-style: italic;
    margin-bottom: -10%;
    margin-top: 20%;
}

article object{
	width:100%;
	height:600px;
}

article .pannable-image{
	width:100%;
	height:600px;
	overflow:hidden;
}

article iframe{
	width:100%;
	height:600px;
}



.quotebox-left{
	float:left;
	margin-right:10px;
}

.quotebox-right{
	float:right;
	margin-left:10px;
}

.lquote{
	float:left;
	width:22%;
	height:22%;
}

.rquote{
	float:right;
	width:22%;
	height:22%;
}


header h1{
	position:absolute;
	font-family:'Guardian Sans Cond Web Bold';
	color:#E1DCCE;	
	font-size:8vw;
	float:left;
	width:25vw;
	line-height:7vw;
	padding:0;
	margin:-23vw 0 0 12%;
	text-shadow: 3px 3px 5px #666;	
}

body.old_safari header h1{	
	/* Values below equal vw * 100, which are converted to px values by script */
	font-size:8px;
	width:25px;
	line-height:7px;	
	margin-top:-28px;
	margin-left:12%;
}


#section6 header h1{
	/* font-size:6vw;
	line-height:5vw; */
}

#section5 header h1
{
	/* margin:-16vw 0 0 12%; */
} 
			
header h2{
	position:absolute;
	font-family:'Guardian Sans Cond Web Bold';
	color:#B3CFE3;
	font-size:2vw;
	float:left;
	width:32vw;
	line-height:2vw;
	padding:0;	
	margin:-8vw 0 0 12%;
	text-shadow: 3px 3px 5px #333;		
}

body.old_safari header h2{	
	/* Values below equal vw * 100, which are converted to px values by script */
	font-size:2px;	
	width:32px;
	line-height:2px;	
	margin-top:-11px;
	margin-left:12%;
}



header h4{
	position:absolute;
	width:15vw;
	text-align:right;
	font-family:'Guardian Sans Web Light';
	color:#E1DCCE;	
	font-size:2vw;
	float:right;
	line-height:2.2vw;
	padding:0;
	margin:-7.7vw 0 0 80%;	
}

body.old_safari header h4{
	/* Values below equal vw * 100, which are converted to px values by script */
	
	width:15px;	
	font-size:2px;	
	line-height:2.2px;
	margin-top:-7.5px;
	margin-left:80%;
}

header h3{
	width:15vw;
	text-align:right;
	color: #e1dcce;
    float: right;
    font-family: "Guardian Sans Cond Web Bold";
    font-size: 4vw;
    line-height: 3.2vw;
    margin: -5.8vw 0 0 80%;
    padding: 0;
    position: absolute;	
}

body.old_safari header h3{
	/* Values below equal vw * 100, which are converted to px values by script */
	width:15px;	
    font-size: 4px;
    line-height: 3.2px;
    margin-top: -5px;
	margin-left:80%;			
}

#section6  h3{
	margin: -5.8vw 0 0 75%;
}

header h5{
	width:18vw;
	text-align:right;
	color: #333;
    float: right;
    font-family: "Guardian Sans Cond Web Bold";
    font-size: 1.4vw;
    line-height: 1.4vw;
    margin: -2.4vw 0 0 77%;
    padding: 0;
    position: absolute;	
}

body.old_safari header h5{
	width:18px;	
    font-size: 1.4px;
    line-height: 1.5px;
	margin-top:-1.5px;
	margin-left:77%;
}


header h6{
	width:15vw;
	text-align:right;
	color: #333;
    float: right;
    font-family: "Guardian Sans Web Light";
    font-size: 1.4vw;
    line-height: 1.4vw;
    margin: -1.0vw 0 0 80%;
    padding: 0;
    position: absolute;	
}

body.old_safari header h6{
	width:15px;
    font-size: 1.4px;
    line-height: 1.4px;  
	margin-left:80%;
	margin-top:0px;
}

footer{}
footer.credits{
	text-align:left;
	background: url(../images/model_bg_ocean.jpg) no-repeat;
	background-size:100%;
	font-family: "Guardian Sans Web Light";
	color:#fff;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:12%;
	margin-top:70px;
}



@media only screen and (max-width: 1024px){
	
	header .ft-bar{
		height: 550px;
		margin-left: -10%;
		margin-top: -545px;		
		position: absolute;
		right: 0;
		width: 1000px;
	}
	
	
	header.pagetop{
		height:75px;
	}
	
	.pagetop-logo{
		top:10px;
	}
	
	.masthead_logos{
		width:610px;
		margin-left:-255px;
		
	}
	
	
	.masthead_logos span.logo_pn a{
		margin-left:80px;
	}
	

	
	header h1{
	
		font-size:10vw;		
		width:25vw;
		line-height:8vw;		
		margin:-25vw 0 0 12%;	
	}
				
	header h2{
		
		font-size:3vw;		
		width:59vw;
		line-height:2.5vw;		
		margin:-8vw 0 0 12%;	
		
	}
	
	header h4{	
		width:20vw;	
		font-size:2vw;	
		line-height:2.2vw;	
		margin:-9.5vw 0 0 70%;	
	}

	header h3{
		width:20vw;   
		font-size: 4vw;
		line-height: 3.2vw;
		margin: -7vw 0 0 70%;   
	}

	header h5{
		width:20vw;   
		font-size: 2vw;
		line-height: 2.5vw;
		margin: -2.4vw 0 0 70%;    
	}


	header h6{
		width:20vw;   
		font-size: 2vw;
		line-height: 2.5vw;
		margin: -0.5vw 0 0 70%;   
	}
	
	article object{
		width:100%;
		height:480px;
	}


}

@media only screen and (max-width: 768px){
	header.pagetop{
		
	}
	
	.masthead_logos{
		margin-left:-175px;
	}
	
	/*
	nav {
		top:90px;
	}
	*/
}

@media only screen and (max-width: 640px){
	/* Android phone & iPhone landscape */
	
	
	header.pagetop{
		margin-top:160px;
	}
	
	.pagetop-logo{
		top:40px;
	}
	
	#section0 header img{
		padding-top:230px;
	}
	
	/*
	nav{
		top:0px;
		width:100%;
		right:auto;
		padding:5px;
		background:#fff;
		opacity:1;
		display:block;
	}
	
	nav a{
		float: left;
		font-family: Arial;
		font-size: 12px;
		height: 55px;
		line-height: 16px;
		margin-bottom: 2px;
		margin-left: 2px;
		margin-right: 2px;
		padding-left: 2px;
		padding-right: 2px;
		padding-top: 20px;
		text-align: center;
		text-decoration: none;
		width: 71px;		
	}
	*/
	
	nav{
		top:80px;
	}
	
	
	header h4{	
		width:120px;
		font-size:10px;
		line-height:12px;
		margin:-40px 0 0 55%;	
	}

	header h3{
		width:120px;
		font-size: 16px;
		line-height: 16px;
		margin: -30px 0 0 55%;   
	}
	
	.android header .hd-bar{
		height: 38px;
		margin-bottom:-28px;
	}
	
	.android header .ft-bar{
		height: 350px;
		margin-left: -10%;
		margin-top: -352px;		
		width: 640px;	
	}
	
	.android header h1{	
		font-size:40px;		
		width:150px;
		line-height:32px;		
		margin:-200px 0 0 12%;	
	}
	
	.android header h2{		
		font-size:18px;		
		width:150px;
		line-height:20px;	
		margin:-130px 0 0 12%;		
	}
	
	
	.android header h3{
		width:120px;
		font-size: 16px;
		line-height: 16vw;
		margin: -30px 0 0 75%;   
	}
	
	.android header h4{	
		width:120px;
		font-size:10px;
		line-height:10px;
		margin:-40px 0 0 75%;	
	}
	
	.android header h6{
		width:120px;
		font-size: 11px;
		line-height: 11px;
		margin: 0 0 0 75%;   
	}

	header h5{
		width:120px;
		font-size: 11px;
		line-height: 2.5vw;
		margin: -2.4vw 0 0 55%;    
	}
	
	.android header h5{
		width:120px;
		font-size: 11px;
		line-height: 11px;
		margin: -10px 0 0 75%;    
	}
	
	article{
		margin-top:35px;
	}
	
	article .quotebox  h2{	
		font-size: 4.0vw;   
	}
	
	article object{
		width:100%;
		height:300px;
	}
		
	.android .expert{
		margin-top:-170px;
		height:150px;
		width:120px;
	}
	
	.android .expert.chris-burns{
		background: url("../images/chris-burns.png") repeat scroll 0px 0px;
		background-size:100% auto;
	}
	
}

@media only screen and (max-width: 480px){
	
	/*
	nav{
		margin-top:0px;
	}
	
	nav a{
		height:30px;
		padding-top:2px;
		line-height:30px;
		width:45%;
	}
	*/
	
	nav{
		top:5px;
	}
	
	.masthead_logos {
		margin-left:-150px;
	}
	
	.masthead_logos span a{
		padding: 2px 35px;
	}
	
	.masthead_logos span.logo_pn a{
		margin-left:30px;
	}
	
	#section0 header{
		overflow:hidden;
		height: 450px;
		background: #001130;
	}
	
	#section0 header img{
		padding-top:0px;
		width:150%;
		margin-left:-23%;
	}
	
	#section1 {
		/* padding-top:200px; */
	}
	
	header.pagetop{
		/* margin-top:120px; */
		display:none;
	}
	
	.pagetop-logo{
		visibility:hidden;
	}
	
	.masthead_logos{
		width:300px;
		margin-left:-150px;
		display:none;
	}
	
	header .ft-bar{
		height: 550px;
		margin-left: -10%;
		margin-top: -348px;		
		position: absolute;
		right: 0;
		width: 640px;
	}
	
	header .hd-image{
		
	}
	
	header h1{	
		font-size:10vw;		
		width:25vw;
		line-height:8vw;		
		margin:-30vw 0 0 6%;	
	}
				
	header h2{		
		font-size:3vw;		
		width:59vw;
		line-height:2.5vw;		
		margin:-11vw 0 0 6%;	
		
	}
	
	header h4{	
		width:120px;
		font-size:10px;
		line-height:2.2vw;	
		margin:-40px 0 0 55%;	
	}

	header h3{
		width:120px;
		font-size: 16px;
		line-height: 3.2vw;
		margin: -30px 0 0 55%;   
	}

	header h5{
		width:120px;
		font-size: 11px;
		line-height: 2.5vw;
		margin: -2.4vw 0 0 55%;    
	}


	header h6{
		width:120px;
		font-size: 11px;
		line-height: 2.5vw;
		margin: 0 0 0 55%;   
	}
	
		
	article{
		margin-left:6%;
		margin-right:6%;
		margin-top:35px;
	}
	
		
	
	article object{
		width:100%;
		height:170px;
	}
	
	article .pannable-1 object{
		height:300px;
	}
	
	article iframe{
		height:300px;
	}
	
	article .quotebox{
		width:290px;
	}
	
	article .quotebox h2{
		margin-bottom:0;
	}
	
	
	.expert{
		margin-top:-425px;
		
	}
	
	/* Android vh / vw overrides */
	.android header .hd-bar{
		height: 38px;
		margin-bottom:-28px;
	}
	
	.android header .ft-bar{
		height: 350px;
		margin-left: -10%;
		margin-top: -352px;		
		width: 640px;	
	}
	
	.android header h1{	
		font-size:40px;		
		width:150px;
		line-height:32px;		
		margin:-200px 0 0 6%;	
	}
	
	.android header h2{		
		font-size:18px;		
		width:150px;
		line-height:20px;	
		margin:-130px 0 0 6%;		
	}
	
	.android header h3{
		width:120px;
		font-size: 16px;
		line-height: 16vw;
		margin: -30px 0 0 55%;   
	}
	
	.android header h4{	
		width:120px;
		font-size:10px;
		line-height:10px;
		margin:-40px 0 0 55%;	
	}
	
	.android header h5{
		width:120px;
		font-size: 11px;
		line-height: 11px;
		margin: -10px 0 0 55%;    
	}
	
	.android header h6{
		width:120px;
		font-size: 11px;
		line-height: 11px;
		margin: 0 0 0 55%;   
	}
	
	.android .expert{
		margin-top:-140px;
		height:130px;
		width:90px;
	}
	
	.android .expert.chris-burns{
		background: url("../images/chris-burns.png") repeat scroll 0px 0px;
		background-size:100% auto;
	}
}