/* Reset */
/************************/
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; font-weight: normal; }

strong { font-weight: bold; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* Text Offset - for screen readers and SEO */
/************************/
.text-offset, .icon, #home .content-area h2.logo, #home .content-area .next-section { text-indent: -999em; }

/* Clearfix */
/************************/
.clearfix, .module, .module .content-area, #whatiscode .content-area .stats, #partnerspeoples .ourpartners, #partnerspeoples .ourpeople { zoom: 1; }
.clearfix:before, .module:before, .module .content-area:before, #whatiscode .content-area .stats:before, #partnerspeoples .ourpartners:before, #partnerspeoples .ourpeople:before, .clearfix:after, .module:after, .module .content-area:after, #whatiscode .content-area .stats:after, #partnerspeoples .ourpartners:after, #partnerspeoples .ourpeople:after { content: ""; display: table; }
.clearfix:after, .module:after, .module .content-area:after, #whatiscode .content-area .stats:after, #partnerspeoples .ourpartners:after, #partnerspeoples .ourpeople:after { clear: both; }

/*
Variables
----------------------------------------------------------------------------- */
/*
Typography
----------------------------------------------------------------------------- */
.hel-serif { font-family: 'Helvetica Neue', Helvetica,Arial,sans-serif; }

.futura-pt, .futura-medium, p.big, #home .content-area .header h1, #whatiscode .content-area .col-l p, #whatiscode .content-area .stats .col-third p, #whatiscode .content-area p.big, #moshipong .content-area p, #partnerspeoples .ourpeople .people-cell h4 span, #contactus .content-area p, .futura-bold, .section-title, .btn, #home .content-area h2.tagline, #whatiscode .content-area .stats .col-third p strong, #partnerspeoples .ourpeople .people-cell h4, #contactus .content-area p span { font-family: "futura-pt", sans-serif; }

.futura-medium, p.big, #home .content-area .header h1, #whatiscode .content-area .col-l p, #whatiscode .content-area .stats .col-third p, #whatiscode .content-area p.big, #moshipong .content-area p, #partnerspeoples .ourpeople .people-cell h4 span, #contactus .content-area p { font-weight: 500; }

.futura-bold, .section-title, .btn, #home .content-area h2.tagline, #whatiscode .content-area .stats .col-third p strong, #partnerspeoples .ourpeople .people-cell h4, #contactus .content-area p span { font-weight: 700; }

.section-title { font-size: 28px; line-height: 32px; text-align: center; text-transform: uppercase; padding: 14px 0 16px; background: url(../img/section-title-bg.png) center bottom no-repeat; }
.section-title.white-bg { background: url(../img/section-title-bg-white.png) center bottom no-repeat; }
.section-title.what-is-year { margin-bottom: 20px; }

.proxima-nova-soft, body, #contactus .content-area p.small { font-family: "proxima-nova-soft",sans-serif; }

/*
Base
----------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: none; }

body { position: relative; font-size: 16px; line-height: 20px; font-style: normal; font-weight: 400; text-transform: none; letter-spacing: normal; text-align: left; background: white; color: black; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

a { color: black; text-decoration: none; }
a:hover, a:active, a:focus { outline: none; }

p.big { font-size: 40px; line-height: 56px; text-transform: uppercase; text-align: center; margin-bottom: 30px; }
p.middle { font-size: 20px; line-height: 26px; text-align: center; }
p.mb26 { margin-bottom: 26px; }
p strong { font-weight: 600; }

dl { margin-top: 35px; margin-bottom: 30px; font-size: 16px; line-height: 30px; display: inline-block; }
dl dt, dl dd { width: 470px; margin-bottom: 10px; display: inline-block; float: left; }
dl dt { text-align: right; font-weight: 600; }
dl dd { margin-left: 20px; text-align: left; font-weight: 400; }

.mb20 { margin-bottom: 20px; }

/*
Structure
----------------------------------------------------------------------------- */
#mainWrap { margin: auto; max-width: 100%; padding-top: 0; position: relative; z-index: 1; }

.module { margin: auto; max-width: 100%; padding-top: 0px; padding-bottom: 0px; }
.module .content-area { margin: auto; padding: 0; position: relative; width: 960px; }

.btn { font-size: 30px; color: white; text-align: center; text-decoration: none; text-transform: uppercase; display: inline-block; height: 82px; line-height: 82px; border: 4px solid white; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; width: 612px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; }
.btn:hover { background: #333333; border-color: #333333; }

.icon { width: 16px; height: 16px; display: inline-block; }
.icon.icon-mail-black { background: url("../img/sprite.png") -248px 0 no-repeat; }
.icon.icon-mail { background: url("../img/sprite.png") -264px 0 no-repeat; }
.icon.icon-twitter { background: url("../img/sprite.png") -264px -16px no-repeat; }
.icon.icon-facebook { background: url("../img/sprite.png") -248px -16px no-repeat; }

/*
Home
----------------------------------------------------------------------------- */
#home { color: black; background: url(../img/home-bg.png) #ffcf58 bottom center no-repeat; padding-bottom: 45px; }
#home .content-area .header { color: white; margin: 32px 92px 0; padding-bottom: 14px; border-bottom: solid 1px white; height: 32px; }
#home .content-area .header h1 { font-size: 20px; text-transform: uppercase; margin-left: 8px; display: inline-block; line-height: 32px; }
#home .content-area .header .social-links { float: right; display: inline-block; }
#home .content-area .header .social-links li { display: inline; float: left; width: 32px; height: 32px; line-height: 32px; background: white; color: #ffcf58; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; margin-right: 20px; }
#home .content-area .header .social-links li.end { margin-right: 0px; }
#home .content-area .header .social-links li a { display: block; height: 32px; width: 32px; line-height: 32px; background: white; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; }
#home .content-area .header .social-links li a:hover { -webkit-transform: scale(1.5, 1.5); -moz-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); }
#home .content-area .header .social-links li a .icon-mail { margin: 7px 0 0 8px; }
#home .content-area .header .social-links li a .icon-twitter, #home .content-area .header .social-links li a .icon-facebook { margin: 8px 0 0 8px; }
#home .content-area h2.logo { width: 178px; height: 178px; margin: 38px auto 40px; background: url("../img/sprite.png") 0 0 no-repeat; }
#home .content-area h2.tagline { text-align: center; text-transform: uppercase; color: black; font-size: 46px; line-height: 58px; margin-bottom: 37px; }
#home .content-area .next-section { width: 70px; height: 70px; margin: 0 auto; background: url("../img/sprite.png") -178px 0 no-repeat; display: block; }

/*
What is Code?
----------------------------------------------------------------------------- */
#whatiscode { background: url(../img/what-is-code-bg.png) top center no-repeat, url(../img/map-bg.png) center 775px no-repeat; padding-top: 40px; padding-bottom: 78px; }
#whatiscode .content-area #youtube-vid { width: 620px; height: 349px; margin: 45px auto 80px; display: block; border-width: 0; }
#whatiscode .content-area .col-l { margin: 0 0 0 90px; width: 320px; display: inline-block; float: left; }
#whatiscode .content-area .col-l p { font-size: 40px; line-height: 56px; text-transform: uppercase; }
#whatiscode .content-area .col-r { margin: 0 0 0 40px; width: 420px; display: inline-block; float: left; }
#whatiscode .content-area .col-r p { font-size: 20px; line-height: 26px; margin-bottom: 20px; }
#whatiscode .content-area .stats { height: 560px; margin: 50px 150px 0; }
#whatiscode .content-area .stats h3 { margin-bottom: 35px; }
#whatiscode .content-area .stats .col-third { float: left; width: 33.33%; height: 125px; text-align: center; display: inline-block; margin-bottom: 26px; }
#whatiscode .content-area .stats .col-third img { margin-bottom: 25px; }
#whatiscode .content-area .stats .col-third p { font-size: 20px; line-height: 30px; text-transform: uppercase; }
#whatiscode .content-area .stats .col-third p span { font-size: 12px; }
#whatiscode .content-area p.big { font-size: 40px; line-height: 56px; text-transform: uppercase; text-align: center; margin-bottom: 30px; }
#whatiscode .content-area p.middle { font-size: 20px; line-height: 26px; text-align: center; }
#whatiscode .content-area p.mb26 { margin-bottom: 26px; }
#whatiscode .content-area p strong { font-weight: 600; }

/*
Will you commit to learning code this year?
----------------------------------------------------------------------------- */
#moshipong { background: #ffcf58; padding-top: 40px; padding-bottom: 67px; text-align: center; }
#moshipong .content-area p { font-size: 20px; line-height: 26px; text-align: center; text-transform: uppercase; margin: 20px 0 60px; }

/*
Our partner organisations
Our people
----------------------------------------------------------------------------- */
#partnerspeoples { background: url(../img/partnerspeoples-bg.png) bottom center no-repeat; padding-bottom: 20px; padding-top: 40px; }
#partnerspeoples .ourpartners { margin: 45px 160px 0; width: 640px; }
#partnerspeoples .ourpartners .partner-cell { float: left; width: 140px; height: 83px; text-align: center; display: inline-block; margin: 0 10px 35px; }
#partnerspeoples .ourpartners .partner-cell.push { margin-left: 80px; }
#partnerspeoples .ourpartners .partner-cell a { width: 140px; height: 83px; display: block; }
#partnerspeoples .ourpeople { margin: 45px 80px 0; }
#partnerspeoples .ourpeople .people-cell { float: left; width: 33.33%; height: 125px; text-align: center; display: inline-block; margin-bottom: 26px; }
#partnerspeoples .ourpeople .people-cell h4 { font-size: 20px; line-height: 34px; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 12px; background: url(../img/section-title-bg-black.png) center bottom no-repeat; }
#partnerspeoples .ourpeople .people-cell h4 span { font-size: 16px; line-height: 24px; display: block; }

/*
Contact Us
----------------------------------------------------------------------------- */
#contactus { background: #ffcf58; padding-top: 40px; padding-bottom: 67px; text-align: center; }
#contactus .content-area p { font-size: 16px; line-height: 34px; text-align: center; text-transform: uppercase; margin: 40px 0 30px; }
#contactus .content-area p span { display: block; font-size: 20px; line-height: 24px; }
#contactus .content-area p.small { line-height: 20px; text-transform: none; font-weight: 400; margin-top: 15px; }
#contactus .content-area a span { margin-right: 15px; margin-bottom: -2px; }
