/* Trade Gothic Original */

@import url("//fast.fonts.net/t/1.css?apiType=css&projectid=411dcd77-eeeb-4bf0-a0c2-7cdf19f88192");
@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;
}

/* Basic theming */

body { font-family: 'TradeGothic', sans-serif; line-height: 1.9em; }

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

p, ul  { font-size: 20px; color: black; }
li { margin-top: 4px; }

h1 { font-family: 'TradeGothic', sans-serif; font-size: 48px; color: black; font-weight: bold; margin: 60px 0 0px;  }
h2 { font-family: 'TradeGothic', sans-serif; font-size: 38px; color: black; font-weight: normal; margin: 50px 0 10px; }
h3 { font-family: 'TradeGothic', sans-serif; font-size: 30px; color: #C61B25; font-weight: normal; margin: 32px 0 5px; line-height: 1.1em; }
h3 .icon { margin-right: 2px; color: #ccc; }
h4 { font-family: 'TradeGothic', sans-serif; font-size: 24px; color: #333; font-weight: bold; margin: 24px 0 6px; line-height: 1.1em; }

.font-awesome { font-family: FontAwesome; }
.giant-icon { font-size: 160px; color: #C61B25; margin: 0.5em 20px 0 20px; opacity: 0.7; }
.no-space-before { margin-top: 0; }

.btn-kiln { background: #DB724F; font-size: 20px; margin-top: 20px; color: white; }
.btn-kiln:hover { background: #333; }

/* Core layout */

.topbar { -moz-box-shadow: 1px 1px 5px #aaa; -webkit-box-shadow: 1px 1px 5px #aaa; box-shadow: 1px 1px 10px #aaa; width: 100%; height: 80px; position: absolute; top: 0; z-index: -10; background-color: #eee; background-image: -moz-linear-gradient(top, #e3e3e3, #eee); background-image: -ms-linear-gradient(top, #e3e3e3, #eee); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e3e3e3), to(#eee)); background-image: -webkit-linear-gradient(top, #e3e3e3, #eee); background-image: -o-linear-gradient(top, #e3e3e3, #eee); background-image: linear-gradient(top,#e3e3e3, #eee); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); }

.logoholder { width: 100px; height: 50px; position: absolute; top: 15px; padding: 0; }
.logoholder img { width: 100%; }
.logoholder:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.container { position: relative; }

#menu { width: 100%; text-align: right; font-family: 'TradeGothic', sans-serif; font-size: 22px; font-weight: bold; margin: 45px 0 10px; }

.menuitems { text-align: right; }
.menuitem { display: inline-block; margin-left: 16px; }
.menuitem a:link, .menuitem a:visited { color: black; border-bottom: none; }
.menuitem a:hover, .menuitem a:active { color: #C61B25; border-bottom: none; }
.menuselected, .menuselected a:link, .menuselected a:visited, menuselected a:hover, .menuselected a:active { color: #C61B25; }

.carousel { overflow: hidden; margin-bottom: 20px;}
.carousel a:hover, .carousel a:active { border-bottom: none; }

.carousel-inner { height: 400px; text-align: center; }
.carousel-inner .item { overflow: hidden; height: 400px; background-position: 50% 0; background-repeat: no-repeat; },
.carousel-inner .item img,
.carousel-inner .item a img,
.carousel-inner .item .carousel-svg,
.carousel-inner .item a .carousel-svg { height: 400px; max-height: 400px; width: auto!important; max-width: none; position: relative; }
.carousel-control.left { display: none; }
.carousel-control.right,
.carousel-control.right:focus { width: 80px; background-image: none; filter: none; font-size: 300px; top: 40%; }
.carousel-control:focus { outline: none; }

.carousel-textholder { position: absolute; top: 0; width: 100%; text-align: center; }
.carousel-text { margin: 30px 10% 0; text-align: left; padding: 10px; }
.carousel-text h1 { margin: 0 0 10px; font-size: 70px; color: white; text-shadow: 0 1px 1px rgba(0,0,0,.4); line-height: 1em; }
.carousel-text p { font-size: 24px; color: white; text-shadow: 0 1px 1px rgba(0,0,0,.4); }

.carousel-text.carousel-talkie { margin-top: 30px; }

#carousel-carbonmap { background-image: url("/images/carbonmapfullwidth.png"); background-size: cover; }

#carousel-aviation { background-color: black; background-image: url("/images/aviationfullwidth.png"); background-size: cover; }
#carousel-aviation #laurel { display: inline-block; margin: 14px 20px 0 0; vertical-align: top; background-image: url("/images/laurel.png"); height: 80px; width: 100px; background-size: 100% 100%; background-repeat: no-repeat; }


#carousel-dja { background-color: black; background-image: url("/images/carboncompaniesfullwidth.png"); background-size: cover; }
#carousel-dja .white-out { width: 100%; height: 100%; background: white; opacity: 0.85; }
#carousel-dja .carousel-text { margin-top: 60px; max-width: 430px; }
#carousel-dja .carousel-text h1,
#carousel-dja .carousel-text p { color: #204455; }
#carousel-dja #genlogo { display: inline-block; margin: 14px 20px 0 0; vertical-align: top; background-image: url("/images/genlogo.png"); height: 77px; width: 200px; background-size: 100% 100%; background-repeat: no-repeat; }

.carousel-text h1 { margin: 0 0 10px; font-size: 70px; color: white; text-shadow: 0 1px 1px rgba(0,0,0,.4); line-height: 1em; }
.carousel-text p { font-size: 24px; color: white; text-shadow: 0 1px 1px rgba(0,0,0,.4); }

.carousel-svg { width: 1500px; height: 400px; margin: auto; display: block; }

.carousel-text-splash { margin: 70px 10% 20px; display: inline-block; }
.carousel-text-splash h1 { margin-top: 0; margin-bottom: 0; color: #333; font-size: 60px; line-height: 1.4em; }
.carousel-text-splash h1 em { color: #C61B25; font-style: normal; background: white;
-moz-box-shadow: 2px 2px 6px #aaa; -webkit-box-shadow: 2px 2px 6px #aaa; box-shadow: 2px 2px 6px #aaa; padding: 2px 6px 2px 8px; }
.carousel-text-splash h1 em.data { color: #DB724F; }

ol.carousel-indicators { margin-bottom: -10px; display: none; }

.carousel-indicators li { width: 13px; height: 13px; margin: 0 0 0 4px; text-indent: -999px; background-color: #5B8192; background-color: rgba(200,200,200,.9); border-radius: 10px; border: 2px solid #eee; }

.carousel-indicators .active { background-color: black; border: 2px solid #eee; margin: 0 0 0 4px; width: 13px;  height: 13px; }

#datastories { background: #666; }
#play-animation { width: 600px; height: 400px; margin-left: 44%; position: relative; left: -200px; }
#play-animation svg { width: 600px; height: 400px; stroke-width: 0; stroke: white; fill: #91C7DB; }
#play-animation svg text { font-size: 0.2px; fill: rgba(50,50,50,0.7); stroke: none; font-weight: bold; }

.footer { color: black; margin-top: 100px; background-color: #eee; 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); }
.footertext { text-align: center; padding: 50px; font-size: 22px; letter-spacing: 1px; color: white; font-size: 16px; }
#footerlogo { width: 30px; height: 30px; background-image: url("/images/bosh_white.png"); background-repeat: no-repeat; display: inline-block; vertical-align: middle; margin: 0 5px; background-size: cover; }
.footertext a:link, .footertext a:visited { color: white; text-decoration: none; margin: 0 3px; }
.footertext a:hover, .footertext a:active { color: #ddd; text-decoration: none; border-bottom: none; }
.footertext a:hover img:hover, .footertext a:active img { border-bottom: none; }

/* Homepage */

.project-area { max-width: 96%; margin: 0 auto; }

.projecthead { max-width: 1000px; margin: 10px auto; }
.projecthead h2 { font-size: 48px; }

.projectleft, .projectright { height: 260px; padding: 0 0 32px; position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto; }
.projectrow { margin-bottom: 4px; margin-top:0; height: 260px; background-image: none; }

.projectimage { width: 100%; position: relative; }
.projectleft .projectimage { width: 650px; position: absolute; right: 0;  }
.projectright .projectimage { width: 650px; position: absolute; left: 0; }

.projectimage-floatright { width: 50%; margin-left: 20px; float: right; -moz-box-shadow: 1px 1px 3px #aaa; -webkit-box-shadow: 1px 1px 3px #aaa; box-shadow: 1px 1px 3px #aaa; }

.projectimage .projectcolour { position: absolute; }
.projectimage .projectbw { position: absolute; display: none; }

.projecttextholder { width: 37%; background: #94C6DD; height: 260px; }
.projecttext { padding: 20px; height: 260px; }
.projecttext p { color: white; font-size: 20px; line-height: 1.2em; }
.projecttext h3 { margin-top: 0; color: black; font-size: 30px; }
.projectleft  .projecttextholder { position: absolute; left: 0; text-align: left;  }
.projectright .projecttextholder { position: absolute; right: 0; text-align: right; }

.projectcontent { background: #5b8192; width: 100%; height: 260px; opacity: 0.97  ; }

.projectwedge { width: 30px; height: 260px; }
.projectleft .projectwedge { background-image: url("/images/wedgeleft.png");   position: absolute; left: 37%; }
.projectright .projectwedge { background-image: url("/images/wedgeright.png"); position: absolute; right: 37%; }

.projectrow:hover .projectimage .projectbw { opacity: 0; }
.projectrow:hover h3 { color: #FCE53D; }
.projectrow:hover .projecttext { background: #5B8192; }
.projectleft.projectrow:hover .projectwedge { background-image: url("/images/wedgeleftdark.png"); }
.projectright.projectrow:hover .projectwedge { background-image: url("/images/wedgerightdark.png"); }

.projectleft.projectlast, .projectright.projectlast, .miscellany  { background-image: none; height: 260px; margin: 0 auto 30px; }


/* About page */

.person { min-height: 220px; }
.mugshot { float: right; width: 150px; margin: -20px 0 0 10px; }

.aboutmain { padding: 20px 0 35px; }
.aboutlogo { padding: 0; margin-bottom: 30px;  }
.aboutmain h1 { font-size: 60px; line-height: 1.1em; margin-bottom: 20px; margin-top: 35px; }
.aboutsplash { color: #C61B25; font-size: 32px; margin-top: 20px; margin-bottom: 20px; line-height: 1.2em; }

/* 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: #C61B25; padding-left: 12px;  }

.projectmain img { margin-top: 10px; margin-bottom: 20px; }
.quoteblock { text-align: right; position: absolute; bottom: 0; right: 0; margin-top: 30px; }
.quote { font-size: 28px; color: #888; padding-left: 40px; line-height: 1.1em; margin-top: 20px; }
.quotesource { font-size: 20px; color: #C61B25; padding-left: 40px; line-height: 1.3em; margin-top: 5px; }

.grey { color: #ccc }

/* Responsive settings */

@media (min-width: 1000px) {
  .carousel-text-splash h1 { font-size: 68px; }
}

@media (max-width: 1000px) {
  .quoteblock { position: relative; margin-top: 50px; padding-right: 20px; }
}

@media (max-width: 767px) {
  .toprow { margin: 0 10px; }
  body { padding-left: 0; padding-right: 0 }
  .carousel-text-splash { margin: 50px 13% 20px; }
  .carousel-text-splash h1 { font-size: 50px; }
}

@media (max-width: 525px) {
  .carousel-text-splash { margin: 40px 12% 20px; }
  .carousel-text-splash h1 { font-size: 45px; }
}

@media (max-width: 400px) {
  .topbar { height: 110px; }
  .toprow #menu { margin: 78px 0px 20px; text-align: left; }
  .toprow #menu .menuitem:first-child { margin-left: 0; }
}