@font-face { font-family: 'grlight'; src: url('gr-light.eot'); src: url('gr-light.eot?#iefix') format('embedded-opentype'), url('gr-light.woff') format('woff'), url('gr-light.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'grmedium'; src: url('gr-medium.eot'); src: url('gr-medium.eot?#iefix') format('embedded-opentype'), url('gr-medium.woff') format('woff'), url('gr-medium.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'susabold'; src: url('susa-bold.eot'); src: url('susa-bold.eot?#iefix') format('embedded-opentype'), url('susa-bold.woff') format('woff'), url('susa-bold.ttf') format('truetype'); font-weight: normal; font-style: normal; }

* { margin: 0; padding: 0; border: 0; text-decoration: none; }

html, body, .page, .sections, section, .center { height: 100%; }
html { overflow: hidden; }
body { font-family: 'grlight'; }
h2, h3, h4 { font-family: 'grmedium'; font-weight: normal; line-height: normal; }

.center { width: 1140px; padding: 0 5px; margin: 0 auto; position: relative; display: table; color: #fff; }
.ctext { text-align: center; }
.text-content p, .text p { margin: 10px 0; }
.text-content h2, .text h4 { font-size: 40px; }
.bullet-list { margin-left: 20px; }
.susebold { font-family: 'susabold'; font-size: 28px; line-height: normal; }
.fs24 { font-size: 24px; line-height: normal; }
a.white { font-family: 'grmedium'; color: #fff; }

#page-loader { background: url(../img/loader-page.gif) #fff no-repeat center; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; }

#top-nav { position: fixed; z-index: 666; top: -70px; left: 0; right: 0; height: 70px; background: #000; }
#top-nav.over { background: #fff; }
#top-nav .center { display: block; }

#menu-btn { float: left; background: url(../img/menu.png) no-repeat; color: #fff; font-size: 27px; line-height: 19px; margin-top: 26px; padding-left: 25px; }
#menu-btn:hover, #top-nav.over #menu-btn { background-position: left bottom; color: #000; }
#top-nav.over #winners-cat-menu a { color: #000; }
#top-nav.over #winners-cat-menu a.active { color: #ca2021; }

#top-nav-menu { display: none; position: absolute; top: 0; left: -65px; padding: 70px; background: url(../img/ie.png); }
#top-nav.over #top-nav-menu { display: block; }
#top-nav-menu > p > a { display: block; background: #fff; background: #fff; color: #000; font-size: 14px; line-height: 40px; padding: 0 40px 0 20px; border-top: 1px solid #000; border-top: 1px solid rgba(0,0,0,.15); position: relative; }
#top-nav-menu p:first-child a { border: 0; }
#top-nav-menu > p > a:hover, #top-nav-menu > p > a.over { color: #fff; background: #000; }
#top-nav-menu > p > a span { width: 7px; height: 11px; background: url(../img/menu-arrow.png); position: absolute; top: 50%; right: 12px; margin-top: -4px; }
#top-nav-menu > p > a:hover span, #top-nav-menu > p > a.over span { background-position: left bottom; }

.sub-menu { display: none; position: absolute; }
.sub-menu a { display: block; background: #000; background: #000; color: #fff; font-size: 12px; line-height: 37px; border-top: 1px solid #fff; border-top: 1px solid rgba(255,255,255,.15); }
.sub-menu b { display: block; position: relative; font-weight: normal; padding: 0 25px 0 20px; white-space: nowrap; }
.sub-menu p:first-child a { border: 0; }
.sub-menu p { position: relative; }
.sub-menu p span { width: 5px; height: 37px; position: absolute; top: 1px; left: 0; }
.sub-menu p:first-child span { top: 0; }

#sm-judges { top: 152px; }
#sm-winners { top: 193px; }


#winners-cat-menu { float: right; margin: 28px 15px 0 0; display: none; }
#winners-cat-menu a { font-size: 21px; line-height: 1px; color: #fff; margin: 0 13px; }
#winners-cat-menu a.active { color: #ca2021; }

#keys { float: right; margin-top: 20px; }
#keys span { display: block; width: 13px; height: 13px; border: 2px solid #000; float: left; margin: -1px; }
#keys span.active { background-position: left bottom; }
span#k-u { background-image: url(../img/key-up.png); margin: -1px auto; float: none; }
#k-l { background-image: url(../img/key-left.png); clear: left; }
#k-d { background-image: url(../img/key-down.png); }
#k-r { background-image: url(../img/key-right.png); }


.page { position: relative; overflow: hidden; padding-top: 70px; box-sizing: border-box; -moz-box-sizing: border-box; min-width: 1150px; min-height: 650px; }


img.resize { position: absolute; top: 50%; left: 50%; min-width: 1150px; min-height: 650px; }

section { float: left; position: relative; }

.middle { vertical-align: middle; display: table-cell; position: relative; }

h2 { background: url(../img/sep-h.png) no-repeat center bottom; padding-bottom: 20px; margin-bottom: 20px; font-weight: normal; }

b { font-weight: normal; font-family: 'grmedium'; }

.text { overflow: auto; width: 950px; height: 230px; margin: auto; }

.people .header { float: left; position: relative; }
.people .header.abs { position: absolute; top: 0; left: 440px; }
.people .text { width: 430px; height: 575px; float: right; font-size: 16px; line-height: 22px; }
.people .text p { margin: 10px 0; }
.people img { position: absolute; bottom: 0; right: 42%; max-height: 620px; height: 90%; }
.people h2 { background-position: left bottom; padding-bottom: 5px; margin-bottom: 5px; font-size: 26px; font-family: 'grlight'; }
.people h3 { font: normal 16px/22px 'grmedium'; }


.jspVerticalBar { background: none; box-sizing: border-box; -moz-box-sizing: border-box; width: 10px; border: 1px solid #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 4px; }
.jspTrack { background: none; }
.jspDrag { background: #fff; background: rgba(255,255,255,.77); width: 4px; margin: 2px; border-radius: 2px; }
.jspCapBottom { display: block; height: 6px; }


.arrow { width: 67px; height: 67px; position: absolute; z-index: 1; top: 50%; margin-top: -33px; text-indent: -666px; overflow: hidden; }
.arrow:hover { background-position: left bottom; }
.arrow.prev { left: 30px; background-image: url(../img/arrow-left.png); }
.arrow.prev.brown { background-image: url(../img/arrow-left-brown.png); }
.arrow.next { right: 30px; background-image: url(../img/arrow-right.png); }
.arrow.next.brown { background-image: url(../img/arrow-right-brown.png); }
#detail .arrow { width: 40px; height: 70px; text-indent: 0; overflow: inherit; }
#detail .arrow.prev { background-image: url(../img/arrow-detail-left.png); }
#detail .arrow.next { background-image: url(../img/arrow-detail-right.png); }
#detail .arrow span { position: absolute; display: none; bottom: -20px; left: 0; color: #7e7e7e; font: 14px/normal 'grmedium'; min-width: 100px; }
#detail .arrow:hover span { display: block; }

@media only screen and (max-width: 1200px) {
	.arrow { display: none; }
}

#landing { background: #e99885; padding: 0; }

#landing-nav { margin-left: 65%; }
#landing-nav a { font-size: 32px; color: #fdfbf7; }

#scroll-down { width: 100px; padding-top: 60px; background: url(../img/scroll-down.png) no-repeat center top; font-size: 12px; color: #efcac2; text-align: center; position: absolute; bottom: 60px; left: 50%; margin-left: -50px; }


#intro { background: #ba8748; color: #f1efe8; }


#awards { background: #404040; }

#award-logos { margin: 20px auto; padding-right: 25px; font-size: 12px; font-family: 'grmedium'; }
#award-logos > div { display: inline-block; padding: 0 25px; }
#aw-cdc { color: #fff; }
#aw-win { color: #b28245; }
#aw-hir { color: #a8b0b2; }


#judges { background: #efefed; }

#judges-list h2 { background-image: url(../img/sep-h-brown.png); color: #9e733d; }

#judges-thumbs { width: 1000px; margin: auto; }
#judges-thumbs > div { display: inline-block; width: 24%; vertical-align: top; padding: 20px 0; cursor: pointer; }
[data-rel="john_o_keeffe"] { color: #ca2021; }
[data-rel="aziz_cami"] { color: #0a659e; }
[data-rel="eric_salama"] { color: #0a659e; }
[data-rel="tim_greenhalgh"] { color: #2aacb5; }
[data-rel="james_hilton"] { color: #602783; }
[data-rel="nick_moore"] { color: #ee738e; }
[data-rel="steve_hatch"] { color: #00934c; }
[data-rel="marcia_silverman"] { color: #cb1a8a; }

#john_o_keeffe, [data-rel="john_o_keeffe"] span { background: #ca2021; }
#aziz_cami, [data-rel="aziz_cami"] span { background: #0a659e; }
#eric_salama, [data-rel="eric_salama"] span { background: #0a659e; }
#tim_greenhalgh, [data-rel="tim_greenhalgh"] span { background: #2aacb5; }
#james_hilton, [data-rel="james_hilton"] span { background: #602783; }
#nick_moore, [data-rel="nick_moore"] span { background: #ee738e; }
#steve_hatch, [data-rel="steve_hatch"] span { background: #00934c; }
#marcia_silverman, [data-rel="marcia_silverman"] span { background: #cb1a8a; }


#advertising, [data-rel="advertising"] .c { background: #ca2021; }
#design_branding, [data-rel="design_branding"] .c { background: #2aacb5; }
#direct, [data-rel="direct"] .c { background: #ee738e; }
#digital, [data-rel="digital"] .c { background: #602783; }
#media, [data-rel="media"] span { background: #00934c; }
#public-relations, [data-rel="public-relations"] .c { background: #cb1a8a; }
#consumer-insight, [data-rel="consumer-insight"] .c { background: #0a659e; }
#integrated, [data-rel="integrated"] .c { background: #f1a137; }

[data-rel="advertising"], #winners [data-rel="advertising"] { color: #ca2021; }
[data-rel="design_branding"], #winners [data-rel="design_branding"] { color: #2aacb5; }
[data-rel="direct"], #winners [data-rel="direct"] { color: #ee738e; }
[data-rel="digital"], #winners [data-rel="digital"] { color: #602783; }
[data-rel="media"], #winners [data-rel="media"] { color: #00934c; }
[data-rel="public-relations"], #winners [data-rel="public-relations"] { color: #cb1a8a; }
[data-rel="consumer-insight"], #winners [data-rel="consumer-insight"] { color: #0a659e; }
[data-rel="integrated"], #winners [data-rel="integrated"] { color: #f1a137; }

#winners [data-rel="advertising"].active { border-bottom: 1px solid #ca2021; }
#winners [data-rel="design_branding"].active { border-bottom: 1px solid #2aacb5; }
#winners [data-rel="direct"].active { border-bottom: 1px solid #ee738e; }
#winners [data-rel="digital"].active { border-bottom: 1px solid #602783; }
#winners [data-rel="media"].active { border-bottom: 1px solid #00934c; }
#winners [data-rel="public-relations"].active { border-bottom: 1px solid #cb1a8a; }
#winners [data-rel="consumer-insight"].active { border-bottom: 1px solid #0a659e; }
#winners [data-rel="integrated"].active { border-bottom: 1px solid #f1a137; }


#winners { padding: 0; height: auto; }
.winner-color-bars { overflow: hidden; }
.winner-color-bars div { width: 12.5%; height: 73px; float: left; }
.winner-color-bars span { width: 100%; height: 100%; display: block; }

.winners-menu { color: #ececec; font-size: 18px; line-height: 60px; text-align: center; height: auto; white-space: nowrap; }
.winners-menu a { margin: 0 6px; color: #000; }
#agency .winners-menu a:hover, #client .winners-menu a:hover, #award .winners-menu a:hover { color: #f02325; }
.winners-menu a:first-child { padding-left: 0; }
.winners-menu a:last-child { padding-right: 0; }
.winners-menu a.active { color: #ca2021; }
#category .winners-menu { font-size: 20px; }

#winners section { display: none; float: none; }
section#advertising { display: block; }

#winners .win-header { height: 185px; background-position: left center; background-repeat: no-repeat; padding: 0 0 10px 710px; width: 430px; }
#advertising .win-header { background-image: url(../img/winner-cat-advertising.jpg); }
#design_branding .win-header { background-image: url(../img/winner-cat-design_branding.jpg); }
#direct .win-header { background-image: url(../img/winner-cat-direct.jpg); }
#digital .win-header { background-image: url(../img/winner-cat-digital.jpg); }
#media .win-header { background-image: url(../img/winner-cat-media.jpg); }
#public-relations .win-header { background-image: url(../img/winner-cat-public_relations.jpg); }
#consumer-insight .win-header { background-image: url(../img/winner-cat-consumer_insight.jpg); }
#integrated .win-header { background-image: url(../img/winner-cat-integrated.jpg); }

#winners .people { padding-bottom: 50px; }
#winners .text { height: 530px; }


.show-all-works { float: right; color: #fff; background: url(../img/show-all-works.png) no-repeat 10px 50%; padding: 15px 15px 15px 47px; border: 1px solid #fff; font-size: 20px; }
.filter { display: none; color: rgba(255,255,255,.3); }
.filter a { color: #fff; white-space: nowrap; }
/*.filter a.active { font-family: 'grmedium'; }*/
#advertising .filter a.active { color: #ff4848; }
#design_branding .filter a.active { color: #c3f2f8; }

.work-list { background: #edece7; padding-bottom: 50px; display: none; }
.work-list .center { padding: 30px 5px; }
.work-list.db { display: block; }

.sub-list { width: 1192px; margin: 0 -26px 45px; }

.list-header { border-bottom: 1px solid #c4c4c0; margin: 0 26px 30px; height: 48px; }
.list-header h2 { float: left; font-size: 30px; line-height: 30px; margin: 0; font-family: 'grlight'; }
.list-header a { float: right; background: #e1e0db; border: 1px solid #c1c0bc; font-size: 18px; color: #000; padding: 8px 12px; margin: -5px 0 0 30px; }
.list-header a:hover { background: #c1c0bc; color: #fff; }

.list-header > div { height: 44px; float: right; margin-top: -5px; }
.list-header > div > span { background-repeat: no-repeat; height: 44px; display: block; float: left; padding-left: 50px; margin-left: 30px; line-height: 44px; }
.list-header > div > span.w-cdc { background-image: url(../img/award-creme-small_v2.png); color: #81633d; }
.list-header > div > span.w-win { background-image: url(../img/award-winner-small_v2.png); color: #b28245; }
.list-header > div > span.w-hir { background-image: url(../img/award-recommended-small_v2.png); color: #75797a; }

.sub-list > a { background: url(../img/loader.gif) no-repeat center 80px; display: inline-block; vertical-align: top; margin: 0 28px 50px; border-top: 6px solid #ba8748; color: #000; font-size: 16px; line-height: 18px; padding-bottom: 10px; width: 242px; position: relative; }
.sub-list > a.creme { background: #ba8748; color: #fff; }
.sub-list > a.creme p { padding: 0 10px; }
.sub-list > a.hirec { border-color: #8c9192; }
.sub-list > a img { display: block; width: 242px; height: 189px; margin-bottom: 10px; }
.sub-list > a span.play-btn { background: url(../img/play-btn.png); width: 46px; height: 46px; position: absolute; top: 71px; left: 50%; margin-left: -23px; }

.sub-list > a:hover { background-image: none; }
.sub-list > a:hover img { opacity: .5; }



#detail { display: none; position: fixed; z-index: 660; top: 70px; bottom: 0; left: 0; right: 0; background: #000; }

#detail .winner-color-bars div { height: 3px; }

#detail .header { height: 60px; }
#detail .header .c { width: 100%; height: 100%; }
#detail .header p { display: table-cell; vertical-align: middle; text-align: right; font-size: 13px; }
#detail #d-cat-subcat { float: left; font-size: 21px; line-height: 60px; }
#d-title { font-size: 16px; }


#work { position: absolute; top: 63px; bottom: 0; width: 100%; overflow: hidden; }

#prev-work, #next-work { width: 50%; height: 100%; }
#prev-work { float: left; }
#next-work { float: right; }

#main-work { position: absolute; top: 0; bottom: 0; background: #000 url(../img/loader.gif) no-repeat center; }
#work-img { max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; margin-left: 10000px; }

#work-info, #work-more { position: absolute; bottom: -1000px; left: 0; right: 0; border-top: 2px solid #ca2021; background: #fff; text-align: center; }
#work-info.creme { background: #edece7; }
#work-info img { position: absolute; top: 15px; left: 15px; }
#work-info div, #work-more div { padding: 0 50px 10px; max-width: 1000px; margin: auto; }
#work-more div { padding: 25px 10px; }
#work-info div h2 { font-family: 'grmedium'; font-size: 22px; padding: 15px 0; background: url(../img/sep-h-gray.png) no-repeat center bottom; }
#work-info div.single { padding-bottom: 0; }
#work-info div.single h2 { background: none; margin-bottom: 0; }
#work-info div p { font-size: 13px; margin: 10px 0; text-align: left; }

#work-more div a { display: inline-block; width: 110px; height: 70px; border: 1px solid #fff; margin: 0 5px; position: relative; }
#work-more div a.active { border-color: #0a0a0a; }
#work-more div a span.play-btn { background: url(../img/play-btn-small.png); width: 35px; height: 35px; display: block; position: absolute; top: 50%; left: 50%; margin: -17px 0 0 -17px; }

#info-btn { position: absolute; width: 59px; height: 65px; background: url(../img/info.png); bottom: -100px; left: 50%; margin-left: -65px; }
#more-btn { position: absolute; width: 59px; height: 65px; background: url(../img/more.png); bottom: -100px; left: 50%; margin-left: 5px; }

#close-detail { position: absolute; width: 45px; height: 45px; background: url(../img/close-big.png); top: 40px; right: -45px; display: none; }
#close-info, #close-more { position: absolute; width: 45px; height: 45px; background: url(../img/close-small.png); top: 0; right: 0; }

#main-work a.ti { text-indent: -666px; overflow: hidden; }

#work-player { /*width:800px; height:450px; margin-top:50px;*/ }

.cat { display: none; }
.cat.db { display: block; }