@import url("//fast.fonts.net/t/1.css?apiType=css&projectid=411dcd77-eeeb-4bf0-a0c2-7cdf19f88192");
/* Original names: "Trade Gothic W01 Cn 18", "TradeGothicW01-BoldCn20 675334"; */

@font-face{
font-family:"TradeGothic";
src:url("fonts/087e5c21-3358-4cf3-9d2c-289a03a48292.eot?#iefix");
src:url("fonts/087e5c21-3358-4cf3-9d2c-289a03a48292.eot?#iefix") format("eot"),url("fonts/fb754dec-aa8f-444c-be48-868464c47ab0.woff") format("woff"),url("fonts/295ff20c-2b48-4fa6-be92-a53bbf9bbbb4.ttf") format("truetype"),url("fonts/c573d9d0-0726-4b95-aeee-fb621a299563.svg#c573d9d0-0726-4b95-aeee-fb621a299563") format("svg");
font-weight: normal;
}
@font-face{
font-family:"TradeGothic";
src:url("fonts/257c802f-349c-4b4d-aefa-546d5de15ec6.eot?#iefix");
src:url("fonts/257c802f-349c-4b4d-aefa-546d5de15ec6.eot?#iefix") format("eot"),url("fonts/5fdc935e-9e30-442a-bbe9-8d887b858471.woff") format("woff"),url("fonts/616c4c87-a077-43f4-a9f4-f01267c13818.ttf") format("truetype"),url("fonts/c901ad5f-a842-4549-a1f4-583a97f7e169.svg#c901ad5f-a842-4549-a1f4-583a97f7e169") format("svg");
font-weight: bold;
}

/*** General ***/

* { box-sizing: border-box; }
img { border: none; }
body { font-family: TradeGothic; line-height: 1.2; margin: 0; }

h1, h2, h3 { font-weight: normal; margin: 1.5em 0 0.25em; }
h1, h3, b { font-weight: bold; }
p { font-size: 20px; margin: 0 0 0.75em; }
ul { font-size: 20px; list-style: none; padding: 0; margin: 10px 0 20px;}
li { margin-bottom: 6px; }
li:before { content: "––"; margin-right: 10px; color: rgba(0,0,0,0.4); }
li:after { content: "––"; margin-left: 10px; color: rgba(0,0,0,0.4); }
p.quote { font-weight: bold; margin: 2em 0 0; }
p.quote-source { margin: 0.5em 0 2em; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }

a:link, a:visited, .link-in-a-link { color: #C61B25; text-decoration: none; }
a:hover, a:active, .link-in-a-link:hover { color: black; text-decoration: none; }

.red { color: #C61B25; }
.left { float: left; max-width: 48%; }
.right { float: right; max-width: 48%; }


/*** Header ***/

#header { position: fixed; left: 0; top: 0; width: 100%; height: 180px; overflow: hidden; background: white; -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2); -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2); box-shadow: 0 5px 5px rgba(0,0,0,0.2); }

#headerinner { max-width: 780px; height: 100%; position: relative; padding: 0 30px; margin: 0 auto; }
#logo { margin: -20px 0 0 0; width: 200px; }
#logo-small { margin: 30px 0 0 0; width: 200px; }
#bosh { margin: 20px 0 0 210px; }

#nav { position: fixed; top: 145px; margin-top: 0; font-size: 25px; font-weight: bold; width: 100%; }
#nav .rowinner { padding: 0; text-align: right; }
#nav a { margin-left: 16px; }
#nav a:link, #nav a:visited { color: black; }
#nav a:hover, #nav a:active { color: #C61B25; }
#nav a.selected { color: #999; cursor: default; }
#nav #nav-home { float: left; height: 30px; width: 60px; display: inline-block; margin-left: 10px; }

/*** Content ***/

#content { padding-top: 180px; width: 100%; position: relative; }
.row { width: 100%; background-size: cover; position: relative; text-align: center; background-position: 50% 50%; overflow: hidden; }
.rowinner { width: 100%; max-width: 740px; margin: 0 auto; background-size: cover; position: relative; padding: 80px 20px 100px; }

.row-name { color: #bcbcbc; position: relative; top: -20px; font-size: 30px; text-transform: uppercase; letter-spacing: 2px; text-align: center; }
.row-nav { margin: 30px 0 40px; font-size: 19px; line-height: 1.5; }
.row-nav .nav-item { font-size: 18px; text-transform: uppercase; letter-spacing: 2px; padding: 0 10px; color: #666; cursor: pointer; display: inline-block; }
.row-nav .nav-item:hover { color: #222; }
.row-nav .nav-item.selected { color: #C61B25; font-weight: bold; }

.nav-section { display: none; }
.nav-section.selected { display: block; }
.nav-section h1 { font-size: 60px; margin: 50px 0 40px; line-height: 1; }
.nav-section h2 { font-size: 26px; margin-top: 32px; }

.nav-link { color: #C61B25; text-decoration: none; cursor: pointer; }
.nav-link:hover { color: black; text-decoration: none; }

.splash { min-height: 400px; position: relative; overflow: hidden; }
.splash .rowinner { text-align: left; }
.splash h1 { font-size: 50px; margin: 0; color: white; line-height: 1; }
.splash h2 { font-size: 20px; margin: 0; color: white; }
.splash iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: -1; }
.splash:hover h1, .splash:hover h2 { color: white; }
.splash .splash-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: black; opacity: 0.3; }
.splash:hover .splash-overlay { opacity: 0.5; }

.splash.flourish { background-image: url(images/highlights/time_maps.jpg); }
.splash.flourish .rowinner { padding-top: 175px; padding-bottom: 175px; }
.splash.flourish .splash-overlay { opacity: 0.3; }
.splash.flourish:hover .splash-overlay { opacity: 0.5; }
.splash.flourish h1, .splash.flourish h2 { max-width: 250px; }

.splash.panamapapers { background-image: url(images/highlights/panamapapers.jpg); }
.splash.panamapapers .rowinner { text-align: right; }
.splash.panamapapers .splash-overlay { opacity: 0.6; background: #590000; }
.splash.panamapapers:hover .splash-overlay { opacity: 0.5; }
.splash.panamapapers h1 { margin-top: 150px; text-align: right; }

.splash.shipmap { background-image: url(images/highlights/shipmap.jpg); }
.splash.shipmap .rowinner { text-align: right; }
.splash.shipmap .splash-overlay { opacity: 0; }
.splash.shipmap:hover .splash-overlay { opacity: 0.2; }
.splash.shipmap h1 { margin-top: 90px; text-align: right; }

.splash.roads { background-image: url(images/highlights/roads.jpg); }
.splash.roads h1 { margin-top: 50px; line-height: 0.9; }
.splash.roads .rowinner { text-align: right; }
.splash.roads .splash-overlay { opacity: 0.2; }
.splash.roads:hover .splash-overlay { opacity: 0.3; }

.splash.worldwar { background-image: url(images/highlights/worldwar.jpg); }
.splash.worldwar h1 { margin-top: 140px; }
.splash.worldwar h1, .splash.worldwar h2 { max-width: 300px; }

.splash.wri { background-image: url(images/highlights/wri.jpg); }
.splash.wri .splash-overlay { opacity: 0.2; }
.splash.wri:hover .splash-overlay { opacity: 0.35; }

.splash.aviation { background-image: url(images/highlights/aviation.png); }
.splash.aviation h1 { margin-top: 80px; }
.splash.aviation h1, .splash.aviation h2 { padding-left: 30px; width: 300px;  }
.splash.aviation img { padding-left: 30px; margin-top: 10px; }

.splash.landing { background-image: url(images/highlights/aviation.png); }
.splash.landing h1 { margin-top: 80px; font-size: 42px; font-weight: normal; }
.splash.landing h1, .splash.landing h2 { padding-left: 20px; }
.splash.landing img { padding-left: 30px; margin-top: 10px; }
.splash.landing .splash-overlay { opacity: 0.2; }
.splash.landing:hover .splash-overlay { opacity: 0.2; }

#projects { background: #aaa; }
#projects .rowinner { max-width: 1200px; padding-left: 0; padding-right: 0; }
#projects .row-name { color: #cacaca; }
#projects h1 { color: #bcbcbc; }
#projects .project { cursor: pointer; width: 320px; height: 200px; display: inline-block; vertical-align: top; margin: 30px; background-size: cover; background-position: 50%; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); box-shadow: 3px 3px 3px rgba(0,0,0,0.2); position: relative; overflow: hidden; }
#projects .greyout { width: 100%; height: 100%; background: rgba(255,255,255,0.75); opacity: 0; padding: 20px; text-align: left; font-size: 30px; color: #454545; }

#about .rowinner { color: black; }
#about .nav-section { min-height: 260px; }
#about #mugshots { width: 100%; margin-bottom: -110px; }
#about #about-awards h2 { margin-bottom: 20px; }
#about #about-awards .awards { position: relative; width: 100%; text-align: center; }
#about #about-awards .award { width: 24%; padding: 0 10px; display: inline-block; vertical-align: top; margin-bottom: 20px; }
#about #about-awards .award .award-image { max-width: 90%; }
#about .client-logo { width: 150px; margin: 20px 10px; vertical-align: middle; }

#news { background: #fafafa; }
#news .rowinner { text-align: left; }
#news #feed { margin-top: 20px; }
#news .post { min-height: 140px; margin-bottom: 30px; }
#news h2 { font-size: 16px; margin: 0 20px 0 0; display: inline-block; text-transform: uppercase; letter-spacing: 2px; width: 100px; height: 100px; border-radius: 50%; float: left; background: #999; padding: 20px; text-align: center; color: white; }
#news .post-text { display: inline-block; width: calc(100% - 150px); }
#news h1 { font-size: 20px; margin: 0 0 0.25em; }
#news p { margin: 0 0 1em; }
#toggle-news { text-align: center; font-size: 32px; opacity: 0.3; cursor: pointer; }
#toggle-news:hover { opacity: 0.7; }

#training { background: #efefef; }
#training .book-now { margin-top: 50px; }

#contact { background: #dedede; }
#contact #details { margin: 0 10px 15px; line-height: 1.5em; width: 300px; text-align: center; display: inline-block; vertical-align: top; }
#contact #details i { margin-right: 0.25em; }
#contact #details p { margin: 0 0 6px 0; position: relative; text-align: center; }

#footer { background-image: -moz-linear-gradient(top, #222, #3a3a3a); background-image: -ms-linear-gradient(top, #222, #3a3a3a); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#3a3a3a)); background-image: -webkit-linear-gradient(top, #222, #3a3a3a); background-image: -o-linear-gradient(top, #222, #3a3a3a); background-image: linear-gradient(top,#222, #3a3a3a); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); }
#footer .rowinner { padding: 100px 20px 150px; color: white; }
#footer .footerlinks { height: 1em; position: relative; top: 0; }
#footer .footerlink { position: absolute; top: 0px; font-weight: bold; text-transform: uppercase; }
#footer a:link, #footer a:visited { color: white; }
#footer a:hover, #footer a:active, .info-icon { cursor: pointer; }
#footer .info { position: absolute; right: 0px; top: 155px; width: 100%; color: rgba(255,255,255,0.8); opacity: 0; overflow: hidden; }
#footer .info .dot { margin: 0 10px; }
#footer #odi-badge { position: absolute; left: 50%; bottom: 40px; margin-left: -45px; }

/*** Responsiveness ***/

@media only screen and (max-width: 1200px) {
	#projects .project { width: 280px; height: 175px; }
}

@media only screen and (max-width: 1040px) {
	#projects .project { width: 320px; height: 200px; }
}

@media only screen and (max-width: 800px) {
	#projects .project { margin: 20px; width: 280px; height: 190px; }
}

@media only screen and (max-width: 750px) {
	#nav { margin-top: 180px; left: 0; top: 0px; height: 35px; background: white; width: 100%; border-top: 1px solid rgba(0,0,0,0.1); padding-left: 18px; -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2); -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2); box-shadow: 0 5px 5px rgba(0,0,0,0.2); }
	#nav .rowinner { margin-right: 0; text-align: left; }
	#nav #nav-home { display: none!important; }
	#nav a { font-size: 20px; margin-left: 10px; }
	#projects .project { margin: 10px; }
	#header { box-shadow: none }
	.row-nav .nav-item { padding: 0 8px; }
	#contact #details { text-align: center; }
}

@media only screen and (max-width: 630px) {
	.nav-section h1 { font-size: 50px; }
	.nav-section h2 { font-size: 22px; }
	#news .post-text { width: calc(100% - 100px); }
	#news h2 { font-size: 14px; width: 80px; height: 80px; padding: 14px; }
	#news h1 { font-size: 18px; }
	#footer .rowinner { padding: 100px 30px 150px; }
	.splash.wri .splash-overlay { opacity: 0.35; }
	p, ul { font-size: 17px; left-align: left; }
	#projects .project { margin: 15px; width: 350px; height: 220px; }
}

@media only screen and (max-width: 400px) {
	#projects .project { margin: 10px 5%; width: 90%; height: 200px; }
	.splash.landing h1 { margin-top: 60px; font-size: 32px; }
}

/*** Static pages; needs tidying up in due course ***/

.metapage { text-align: left; max-width: 1000px; margin: 0 auto;}
.no-space-before { margin-top: 0; }
.topbar { }
.container { position: relative; }

#menu { width: 100%; text-align: right; font-size: 26px; text-transform: uppercase; letter-spacing: 2px; line-height: 1.1em; margin: 40px 0 10px; }
.menuitems { text-align: right; }
.menuitem { display: inline-block; margin-left: 20px; }
.menuitem a:hover, .menuitem a:active { color: black; border-bottom: none; }
.menuselected, .menuselected a:link, .menuselected a:visited, menuselected a:hover, .menuselected a:active { color: #555; }

.footertext { text-align: center; padding: 50px; font-size: 22px; letter-spacing: 1px; color: white; font-size: 16px; }
.footertext a:link, .footertext a:visited { color: white; text-decoration: none;}
.footertext a:hover, .footertext a:active { color: #4BA9C9; text-decoration: none; border-bottom: none; }
.footertext a:hover img:hover, .footertext a:active img { border-bottom: none; }

/* Project page */

.projectimage { -moz-box-shadow: 5px 5px 10px #aaa; -webkit-box-shadow: 5px 5px 10px #aaa; box-shadow: 5px 5px 10px #aaa; margin-bottom: 20px; }

.projectlinks { font-size: 20px; padding-bottom: 20px; }
.projectlinks .link { margin-right: 12px; }
.projectlinks a:hover, .projectlinks a:active  { border-bottom: none; }
.projectstandfirst p { font-size: 26px; line-height: 1.2em; color: #4FB7DB; padding-left: 12px;  }

.projectmain img { margin-top: 10px; margin-bottom: 20px; }
.quoteblock { text-align: right; position: absolute; bottom: 0; right: 0; margin-top: 30px; }

.quotesource { font-size: 20px; color: #4FB7DB; padding-left: 40px; line-height: 1.3em; margin-top: 5px; }

.grey { color: #ccc }