/* ============ CSS Resets =========== */
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 {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
a, a:hover, a:focus, a:active {outline: 0; border: none;}
img {border: none; max-width: 100%; height: auto; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
*, *::before, *::after {box-sizing: border-box;}
select:-moz-focusring, input:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;}
::-moz-focus-inner {border: 0; padding: 0;}
input, select, textarea {font: inherit; color: inherit;}

/* ============ Core Settings ========= */
body {font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 1.8; color: #000;}
h1, h2, h3, h4 {font-family: 'Source Sans Pro', sans-serif; line-height: 1.2; color: #000; font-weight: 600;}
h1 {font-size: 30px; margin: 0 0 15px 0;}
h2 {font-size: 24px; margin: 20px 0 15px 0; font-weight: 600;}
h3 {font-size: 20px; margin: 0 0 5px 0; color: #ed193f;}
h4 {font-size: 18px; margin: 0 0 5px 0;}
p {margin: 0 0 15px 0;}
/*a {color: #000; text-decoration: none;}*/
a {color: #ed193f; text-decoration: none;}
a:hover {text-decoration: none;}
em {font-style: italic;}

p.last-para {margin-bottom: 0;}
p.list-head {margin-bottom: 8px;}
strong {font-weight: bold; color: #000;}

p.read-more {margin: 15px 0 0 0; line-height: 26px;}
p.read-more a {color: #ed193f; position: relative}
p.read-more a span {font-size: 28px; position: absolute; top: -3px; margin-left: 4px;}
p.read-more a:hover {border-bottom: 1px solid #ed193f; padding-right: 20px;}

/* ========= Lists ========== */
ul, ol {margin: 0 0 15px 0; padding: 0; list-style: none;}
ul li, ol li {margin: 0 0 5px 0;}

ul.arrow {margin: 0 0 0 20px;}
ul.arrow li {padding: 0 0 10px 15px; margin: 0; position: relative;}
ul.arrow li::before {border-left: 6px solid #ed193f; border-top: 6px solid transparent; border-bottom: 6px solid transparent; content: ""; position: absolute; left: 0; top: 11px;}

ol {list-style-type: decimal; padding: 0 0 0 35px;}
ol.roman {list-style-type: lower-roman; padding: 0 0 0 35px;}
ul.circle {list-style-type: circle; padding: 0 0 0 35px;}

/* ========= Table ======= */
table {border: 1px solid #c9c9c9; table-layout: fixed; border-collapse: collapse; margin: 0 0 15px 0;}
table th, table td {padding: 14px 14px; border: 1px solid #bbb;}
table th {padding: 7px 14px;}
table th {color: #fff; font-weight: bold; background: #333;}
table th.col1 {width: 70%;}
table th.col2 {width: 30%;}
table td div {margin: 0 0 5px 0;}
table td div:last-child {margin: 0;}
table h4, table div.title {font-size: 18px; line-height: 1.3; color: #ed193f; font-weight: bold; margin: 0 0 10px 0;}
table h4.anchor, table div.anchor {color: #000; font-size: 18px; line-height: 1.3; font-weight: bold; margin: 0 0 10px 0;}
table ol {list-style: decimal; padding: 0 0 0 1em;}
table ol li {margin: 0;}
table p:last-child {margin-bottom: 0}
p.footnote {font-style: italic; margin: 0;}


/* ============ Header ========= */

header {width: 100%;}

/* home page banner */
#banner-wrapper {width: 100%; background: #ed193f;}
#banner {width: 100%; position: relative;}
#banner img {display: block; margin: 0 auto;}
#banner-button {position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); font-size: 18px; line-height: 1; padding: 15px 20px; color: #fff; background-color: #000;}
#banner-button:hover {text-decoration: none; background-color: #ed193f;}


/* ============ Common ========== */

.content {width: 1140px; margin: 0 auto; padding: 0 15px;} /* common content width */
main {}
#inside-main {display: flex; padding: 30px 0 0 0;}
.left-col {width: 820px; padding: 0 50px 0 0;}
.right-col {width: 290px; min-width: 250px; background: #f0f0f0; padding-bottom: 25px;}

.left-col a {color: #ed193f; text-decoration: none;}
.left-col a:hover {text-decoration: none;}


/* ============ Resources Pages ========== */

#resources-listing {}

/* resource listing */
#resources-listing .resource {padding: 25px 0; border-bottom: 1px solid #e0e0e0;}
#resources-listing .resource:first-child {padding-top: 10px;}
#resources-listing .resource p.title {display: block; font-size: 20px; margin: 0 0 5px 0; color: #000; line-height: 1.3; padding: 0; background: none;}
#resources-listing .resource p.title a {color: #ed193f; text-decoration: none;}
#resources-listing .resource p.title a:hover {color: #000; text-decoration: none;} /* title hover */

#resources-listing .resource p.author {display: block; font-size: 16px; color: #333; margin-bottom: 10px; padding: 0; background: none;}
#resources-listing .resource p {display: inline; font-size: 14px; line-height: 25px; padding: 0 10px 0 25px; background-repeat: no-repeat; background-position: 0 0;}
#resources-listing .resource p.publication {background-image: url('../images/icon-publication.png')}
#resources-listing .resource p.year {background-image: url('../images/icon-date.png') }
#resources-listing .resource p.pub-type {background-image: url('../images/icon-pub-type.png')}
#resources-listing .resource p.pub-theme {background-image: url('../images/icon-theme.png')}

/* listing pagination */
#pagination {margin: 30px 0 0 0; font-size: 16px; overflow: hidden;}
#pagination li {float: left; margin-right: 10px; }
#pagination li.down {display: block; width: 35px; line-height: 33px; border-radius: 3px; text-align: center; background: #ed193f; color: #fff; text-decoration: none;}
#pagination li a {display: block; width: 35px; line-height: 33px; border-radius: 3px; text-align: center; background: #000; color: #fff;text-decoration: none;}
#pagination li a:hover {background: #ed193f;}
#pagination li a.next {background: url('../images/icon-next.png') no-repeat center center;}


/* ========== Resources Details =========== */

#resource {}
#resource p.title {font-size: 22px; margin: 0; padding: 0; color: #ed193f; line-height: 1.3; background: none; border: none;}
#resource p.author {font-size: 16px; color: #333; margin-bottom: 15px; padding: 0; background: none; border: none;}

#resource p {font-size: 16px; margin: 0; padding: 7px 10px 7px 37px; background-repeat: no-repeat; background-position: 10px 13px; max-width: 610px; border: 1px solid #dedede; border-bottom: none;}
#resource p.publication {background-color: #f2f2f2; background-image: url('../images/icon-publication.png')}
#resource p.year {background-image: url('../images/icon-date.png')}
#resource p.pub-type {background-color: #f2f2f2; background-image: url('../images/icon-pub-type.png')}
#resource p.pub-theme {border-bottom: 1px solid #dedede; background-image: url('../images/icon-theme.png')}

#resource p.summary {margin-top: 15px; background: none; border: none; padding: 0;}

#resource p.pdf, #resource p.hyperlink {border: none; padding: 0; margin: 20px 0 0 0;}
#resource p a {display: block; width: 248px; line-height: 50px; text-align: center; color: #FFF; background: #ed193f;}
#resource p a:hover {background: #000;}
p.backLink {border: none; margin: 20px 0 0 0; padding: 0}
p.backLink a {color: #000; line-height: 1.8; padding: 0; margin: 0; background: none;}
p.backLink a:hover {color: #ed193f; border-bottom: 1px solid #ed193f;}


/* ============ Resources Sub-Menu ========== */

.right-col.resources {padding: 0 0 70px 0;}
.right-col.resources h2 {font-size: 24px; margin: 14px 25px 5px 20px; font-weight: 600;}

ul#resources-menu {font-size: 16px; margin: 0; padding: 0;}
ul#resources-menu li {line-height: 54px; margin: 0; padding: 0;}
ul#resources-menu li:hover {background: #ed193f;}
ul#resources-menu li a {display: block; margin: 0 20px; padding-left: 40px; border-bottom: 1px solid #c9c9c9;} 
ul#resources-menu li a:hover {color: #fff;}

ul#resources-menu li a.acad-research {background: url('../images/icon-acad-res-sm.png') no-repeat 4px 18px;}
ul#resources-menu li a.acad-research:hover {background-image: url('../images/icon-acad-res-rev.png')}

ul#resources-menu li a.analysis {background: url('../images/icon-analysis-sm.png') no-repeat 4px 18px; }
ul#resources-menu li a.analysis:hover  {background-image: url('../images/icon-analysis-rev.png')}

ul#resources-menu li a.cap-building {background: url('../images/icon-capacity-building-sm.png') no-repeat 4px 18px;}
ul#resources-menu li a.cap-building:hover  {background-image: url('../images/icon-capacity-building-rev.png');}

ul#resources-menu li a.news-media {background: url('../images/icon-news-media-sm.png') no-repeat 4px 18px;}
ul#resources-menu li a.news-media:hover  {background-image: url('../images/icon-news-media-rev.png')}

ul#resources-menu li a.action-tools {background: url('../images/icon-action-tools-sm.png') no-repeat 4px 18px;}
ul#resources-menu li a.action-tools:hover  {background-image: url('../images/icon-action-tools-rev.png')}


/* =============== About Us ============== */

.left-col.about article {margin: 0 0 25px 0; clear: both; overflow: hidden;}
.left-col.about article h4 {font-size: 22px; color: #ed193f;}
.left-col.about article p {margin-bottom: 20px;}
.left-col.about article p:last-child {margin-bottom: 0;}
.left-col.about article figure {float: left; margin: 5px 17px 3px 0; padding: 3px; border: 1px solid #ccc;}


/* ============ Right Col Sub-Menue ============ */

.sub-menu h3 {font-size: 24px; line-height: 50px; color: #fff; background: #ed193f; padding: 0px 25px 0px 20px; margin: 0; font-weight: 600; border-bottom: 1px solid #c9c9c9;}
.sub-menu ul {padding: 0; font-size: 16px;}
.sub-menu ul li {line-height: 50px; position: relative; margin: 0;}
.sub-menu ul li:hover {background: #ed193f;}
.sub-menu ul li.down {margin: 0 20px; padding-left: 14px; border-bottom: 1px solid #c9c9c9;}
.sub-menu ul li.down:hover {background: none;}
.sub-menu ul li.down::before {border-left: 6px solid #ed193f; border-top: 6px solid transparent; border-bottom: 6px solid transparent; content: ""; position: absolute; left: 0; top: 20px;}

.sub-menu ul li a {display: block; margin: 0 20px; border-bottom: 1px solid #c9c9c9;} 
.sub-menu ul li a:hover {color: #fff; border-bottom: 1px solid #ed193f;}


/* ============== Useful Links ============ */

.useful-links article {margin: 0 0 25px 0; clear: both; overflow: hidden;}
.useful-links article:last-child {margin: 0;}
.useful-links article h4 {font-size: 20px; line-height: 1.4; color: #ed193f; coor: #000; margin: 0px; font-weight: normal;}
.useful-links article p {margin-bottom: 0; line-height: 1.4;}
.useful-links article a {color: #777}
.useful-links article a:hover {text-decoration: underline;}


#useful-links article {margin: 0 0 25px 0; clear: both; overflow: hidden;}
#useful-links article p {margin-bottom: 0; line-height: 1.4;}
#useful-links article p.title {font-size: 20px; line-height: 1.4; color: #ed193f; coor: #000; margin: 0px; font-weight: normal;}
#useful-links article p.published {font-size: 17px;}
#useful-links article p.link a {color: #777}
#useful-links article p.link a:hover {text-decoration: underline;}


/* ============ Videos ========== */

.left-col.videos article {float: left; margin: 0 45px 30px 0; max-width: 313px;}
.left-col.videos article figure {position: relative;}
.left-col.videos article img {display: block; padding: 9px; border: 1px solid #afafaf;}
.left-col.videos article figcaption {display: block; font-size: 18px; line-height: 26px; font-weight: 300; margin-top: 10px;}
.left-col.videos article a {display: block; position: relative;}
.left-col.videos article figure:hover a:before {content:''; position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; background-color:rgba(0, 0, 0, 0.5); z-index: 1; box-sizing: border-box;}
.left-col.videos article figure:hover a:after {content: url('../images/icon-play.png'); position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px; z-index: 5; } 

#videos-listing {display: flex; flex-wrap: wrap;}
#videos-listing article {float: left; margin: 0 45px 30px 0; max-width: 313px;}
#videos-listing article figure {position: relative;}
#videos-listing article img {display: block; padding: 9px; border: 1px solid #afafaf; max-width: 313px; max-height: 170px;}
#videos-listing article figcaption {display: block; font-size: 18px; line-height: 26px; font-weight: 300; margin-top: 10px;}
#videos-listing article a {display: block; position: relative;}
#videos-listing article figure:hover a:before {content:''; position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; background-color:rgba(0, 0, 0, 0.5); z-index: 1; box-sizing: border-box;}
#videos-listing article figure:hover a:after {content: url('../images/icon-play.png'); position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px; z-index: 5; } 

/* pop-up video */
.yu2fvl {z-index: 9999; top: 0; max-width: 700px; max-height: 393px}
.yu2fvl-iframe {display: block; height: 100%; width: 100%; border: 0;}
.yu2fvl-overlay {z-index: 9998; background: #000; opacity: 0.8;}
.yu2fvl-close {position: absolute; top: -20px; right: -20px; color: #fff; border: 0; background: none; cursor: pointer;}


/* ============== Events ============= */

#events {}

/* events listing */
#events .event {padding: 25px 0; border-bottom: 1px solid #e0e0e0;}
#events .event:first-child {padding-top: 10px;}
#events .event p.title {display: block; font-size: 20px; margin: 0 0 5px 0; color: #000; line-height: 1.3; padding: 0; background: none;}
#events .event p.title a {color: #ed193f;}
#events .event p.title a:hover {color: #000;} /* title hover */
#events .event p.venue {display: block; font-size: 16px; color: #737373; margin-bottom: 10px; padding: 0; background: none;}
#events .event p {display: inline; font-size: 15px; padding: 0 0 0 25px; background-repeat: no-repeat; background-position: 0 0;}
#events .event p.start-date {background-image: url('../images/icon-date.png') }
#events .event p.end-date {padding-left: 0;}

/* event details */
#event {}
#event p {font-size: 16px; margin: 0;}
#event .title {font-size: 22px; margin: 0; padding: 0; color: #000; line-height: 1.3; background: none; border: none;}
#event .venue {font-size: 16px; color: #737373; margin-bottom: 15px; padding: 0; background: none; border: none;}
#event .start-date {display: inline; padding: 0 0 0 27px; background: url('../images/icon-date.png') no-repeat 0px 1px;}
#event .end-date {display: inline;}
#event .description {margin-top: 15px; background: none; border: none; padding: 0; clear: both;}
#event a {color: #ed193f;}
#event a:hover {text-decoration: underline;}


/* ========== Request Help Form ========== */

#contactForm {color: #000;}
#contactForm p {font-weight: 300; line-height: 1.4;}
#contactForm p.alert {color: #ed193f; font-weight: 400;}
#contactForm p.success {color: #057439; font-weight: 400;}
#contactForm ul {}
#contactForm ul li {display: block; width: 100%; margin-bottom: 20px; clear: both;}
#contactForm label {float: left; width: 160px; line-height: 50px; font-size: 18px; font-weight: 300;}
#contactForm .asterisk {color: #ed193f;}
#contactForm input[type="text"] {width: 360px; height: 50px; border: 1px solid #afafaf; color: #666; padding: 5px 10px;}
#contactForm textarea {width: 360px; height: 190px; border: 1px solid #afafaf; color: #666; padding: 5px 10px; line-height: 1.3;}

/* submit button */
#buttonsContainer input {margin-left: 160px; width: 170px; line-height: 50px; height: 50px; color: #fff; background-color: #ed193f; border: none;}
#buttonsContainer input:hover {background-color: #000;}


/* =============== Home Page ================ */

/* home page intro section */
#intro {padding-top: 30px; display: flex;}
.left-col-home {width: 730px; padding: 15px 30px 0 0; overflow: hidden;}
.right-col-home {width: 380px; padding: 0;}

/* 5 years poster */
.left-col-home figure {float: left; width: 23%; border: 1px solid #999; margin: 5px 4% 0 0;}

#grb-box {background: #f0f0f0; padding: 25px 20px; color: #000; line-height: 1.4;}
#grb-box h2 {font-size: 28px; color: #ed193f; margin: 0 0 10px 0;}
#grb-box a {}

/* home page resources strip */
#resources-strip {padding-top: 30px; overflow: hidden;}
#resources-strip h2 {font-size: 28px; margin: 0 0 20px 0;}

#resources {display: flex; justify-content: space-between;}
#resources figure {width: 20%; margin-right: 17px; background: #ed193f; color: #fff; text-align: center; position: relative; line-height: 1;}
#resources figure a {display: block; height: 100%; color: #fff; text-decoration: none; }
#resources figure img {padding: 25px 30px 60px 30px; vertical-align: top;}
#resources figcaption {position: absolute; left:0; bottom: 22px; width: 100%; font-size: 18px; line-height: 1.1; text-align: center; }

#resources figure a:hover {background: #000;}
#resources figure:last-child {margin-right: 0;}

/* ------- home page what's new section ------- */
#whats-new-events {padding-top: 30px; display: flex;}
#whats-new h2 {font-size: 28px; margin: 0 0 20px 0;}
#whats-new-feed article {margin-bottom: 20px;}
#whats-new-feed article:last-child {margin-bottom: 0;}
#whats-new-feed article p {margin-bottom: 0;}
#whats-new-feed article p.title {font-size: 19px; line-height: 24px; margin-bottom: 3px; font-weight: normal;}
#whats-new-feed article p.author {font-size: 16px; line-height: 22px; color: #737373; }
#whats-new-feed article a {color: #ed193f;}
#whats-new-feed article a:hover {color: #000;}
#whats-new-feed p.all-link {margin: 0;}
#whats-new-feed p.all-link a {color: #ed193f;}
#whats-new-feed p.all-link a:hover {border-bottom: 1px solid #ed193f;}

/* ---- home page events feed ---- */
#related-events {background-color: #f0f0f0;}
#events-box {padding: 25px 20px 30px 20px;}
#events-box h2 {font-size: 24px; margin: 0 0 12px 0;}

#events-feed article {margin-bottom: 15px;}
#events-feed article:last-child {margin-bottom: 0;}
#events-feed p {font-size: 18px; line-height: 28px; margin: 0;}
#events-feed p.date {color: #ed193f; margin-bottom: 3px; padding-left: 33px; background: url('../images/icon-calendar.png') no-repeat 3px 7px;}
#events-feed p.title {}
#events-feed p.title a {color: #000;}
#events-feed p.title a:hover {border-bottom: 1px solid #000;}

#events-feed p.all-link {margin: 0;}
#events-feed p.all-link a {color: #ed193f;}
#events-feed p.all-link a:hover {border-bottom: 1px solid #ed193f;}


/* ============ Footer ========== */

footer {margin-top: 50px; background-color: #000; color: #fff;}

footer #top {padding: 35px 0 30px 0;}
footer #top .content {overflow: hidden;}

footer #footer-links {display: flex; justify-content: space-between; font-size: 16px; line-height: 25px; color: #fff; font-weight: normal; max-width: 810px;}
footer #footer-links .col {}
footer #footer-links .col:last-child {}
footer #footer-links h4 {font-size: 16px; line-height: 25px; margin: 0 0 5px 0; color: #fff; font-weight: normal;}
footer #footer-links ul {margin: 0; padding: 0;}
footer #footer-links ul li {padding: 0; margin: 0 0 12px 0;} 
footer #footer-links ul.sublinks li {padding-left: 20px; background: url('../images/bullet-white.png') no-repeat 0px 8px;}
footer #footer-links a {color: #fff; text-decoration: none;}
footer #footer-links a:hover {color: #ed193f;}

footer #logos {float: right; width: 58%; display: flex; justify-content: flex-end; padding-left: 30px;}
footer #logos figure {padding: 0 0 12px 12px;}
footer #logos img {max-width: 100%; display: block;}
footer #logos img:first-child {margin-left: 0}

footer #strip {background-color: #ed193f; font-size: 14px; line-height: 50px; color: #fff; overflow: hidden;  clear: both; }
footer #strip a {color: #fff; text-decoration: underline;}
footer #strip #copyright {float:left;}
footer #strip #credit {float: right;}


/* =========== Responsive Nav ============== */

#nav-wrapper {width: 100%; background: #000; position: relative; z-index: 5; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .5)}
.container {}
nav {display: block; width: 100%; font-size: 17px; line-height: 65px; height: 65px; position: relative;}
#fpi-logo {display: block; position: absolute; z-index: 99; width: 15%;}

/* nav universal styles */
nav ul {list-style: none; margin: 0; padding: 0;}
nav ul a {display: block; color: #fff; padding: 0 25px; text-decoration: none;} /* universal link scheme */
nav ul a:hover {color: #fff; background: #ed193f; text-decoration: none;} /* level 1 link mouseover color */

/* Level 1 Menu */
nav ul {float: right; margin: 0; padding: 0;}
nav ul li {float: left; position: relative; margin: 0;}
nav ul li.node > a {padding-right: 35px;}
nav ul li.node > a:after {border-top: 6px solid #fff; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ""; position: absolute; right: 14px; top: 31px;}

/* Level 2 Menu */
nav ul ul {position: absolute; min-width: 100%; background: #db2142; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .5); display: none; float: none;}
nav ul li li {display: block; float: none; line-height: 50px; border-bottom: 1px solid #ab0725;}
nav ul li li a {display: block; padding: 0 25px; white-space: nowrap;  }
nav ul li:hover li a {color: #fff; } /* level 2 links color to override level 1 mouseover color */
nav ul li li a:hover {color: #fff; background: #000;} /* level 2 link mouseover color */

/* Display Level 2 on Mouseover */
nav ul li:hover ul {display: block;} /* Show level 2 when hovering over level 1 item */
nav ul li:hover a {color: #fff; background: #ed193f;} /* Keep level 1 menu item highlighted when hovering over dropdown */

/* Responsive Menu Icon */
input.menu-icon {display: none;} /* Icon checkbox is always hidden*/
label.menu-icon {text-align: right; color: #fff; font-size: 22px; cursor: pointer; padding: 0px 15px; display: none;}
label.menu-icon:hover {color: #fff;}
label.menu-icon::before {content: '\2630';} /* using heaven trigram for menu icon */