@media only screen 
and (min-device-width : 320px)
and (max-device-width : 768px) {
	
html, body { background-color:#f1f1f1; min-width: 100%; width:100%; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; overflow:hidden; margin:0; padding:0; font-family: 'Open Sans', sans-serif; }

h1, h2, h3 { text-transform: uppercase; font-weight:300; letter-spacing:0.05em; }
strong { font-weight:800; }
p { text-align:center; }

/*  --- HOMEPAGE  ---  */

#banner { background-color:#FFF; height:auto; overflow:auto; }
#banner h1 a { background:url(../images/responsive/fhi-360-annual-report.png) no-repeat; text-indent:-9999px; background-size:313px 44px; width:313px; height:44px; display:block; margin:0 auto; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[http://designlab360.org/ar/2013/dev2/images/responsive/fhi-360-annual-report.png]', sizingMethod='scale'); }

.story { height: auto; width: 100%; }

#first, #second, #sixth { background:none; display:block; position:relative; width:100%; }
#first a, #second a { font-size:1.2em; font-weight:600; text-transform:uppercase; text-decoration:none; letter-spacing:0.05em; }
#first .article, #second .article { margin:0; width:100%; position:relative; }

/* Introduction */
#first .article { background-color:#FFFFFF; overflow:auto; }
#first .article img { max-width:100%; height: auto; margin-bottom:1em; }
#first .article .title { margin:1em; }
#first .article .title h1 { background:url(../images/responsive/first-h1-bkgd.gif) no-repeat; background-size:292px 21px; text-indent:-9999px; width:292px; height:21px; display:block; margin:0 auto; }	
#first .article .title p { color:#666; font-size:1.15em; line-height:1.4em; font-weight:600; }
#first .article a, #second a { padding:20px 0 0; margin:0 auto 1em; font-size: 1.1em; font-weight:700; color:#FFF; width:263px; height:49px; display:block; text-align:center;
}
#first .article a { background:url(../images/responsive/first-hear-from-ceo-bkgd-green.png) center no-repeat; }
#second a { background:url(../images/responsive/first-hear-from-ceo-bkgd.png) center no-repeat; }
#first .article a:hover { color: #fff; }

/* Projects */
#second { padding:0 0.5em; margin:0 }
#second .title { margin:0 auto; height:62px; }
#second .title h2 { font-size:1.25em; background:url(../images/responsive/h2-connecting-bkgd.png) no-repeat right; padding-right:30px; color:#333; float:left; width:45%; text-align:right; line-height:62px; }
#second .title p { font-size:0.9em; color:#ff6600; float:left; width:35%; padding-left:15px; font-weight:800; text-align:left; }
.view-projects-map { background:url(../images/responsive/view-our-projects-map.png); background-size:242px 122px; width:242px; height:122px; clear:both; margin:0 auto; }

/* In the report */
#sixth { background-color:#FFF; }
#sixth h2 { font-size:2em; letter-spacing:-0.02em; text-align:center; padding-top:1em; }		
#sixth .awards-mentions { margin:2em auto; width:265px; }
#sixth .awards-mentions a.download-full-report { background:url(../images/responsive/download-full-report.png); background-size:133px 21px; width:133px; height:21px; float:left; margin-right:20px; }
#sixth .awards-mentions a.awards { background:url(../images/responsive/awards-mentions.png); background-size:97px 23px; width:97px; height:23px; float:left; }
#sixth .article { margin:0 auto; width:85%; }
#sixth .article #bucket { padding:5px 8px; margin:10px auto; }
#sixth .article #bucket h3 { font-size:1em; text-transform:none; font-weight:600; letter-spacing:0; padding:0.5em 0; margin:0; }
#sixth .article #bucket a { color:#333; text-decoration:none; }
#sixth .article #bucket .arrow-right { float:right; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #333333; margin-top:5px; }

.ceo { border-top:5px solid #33ccff; }
.global { border-top:5px solid #99cc33; }
.leadership { border-top:5px solid #ffcc00; }
.financials { border-top:5px solid #ff6600; }
.funders { border-top:5px solid #006699; }

#footer-wrap { background-color:#FFFFFF; padding:10px 0; border-top:5px solid #f1f1f1; }
#footer-wrap #footer { font-size:1em; color:#999; line-height:35px; }
#footer-wrap #footer a { text-decoration:none; color:#333; font-weight:800; }
#footer-wrap #footer .follow { text-transform:uppercase; font-weight:800; }
#footer-wrap #footer img { display:inline; margin-left:5px; vertical-align:middle; }


/* --- SECONDARY PAGES --- */

.breadcrumb { background-color:#CCC; overflow:auto; }
.breadcrumb .button { background:url(../images/responsive/breadcrumb-separator.png) right no-repeat; float:left; padding:7px 11px; }
.breadcrumb .button a { color:#333; text-decoration:none; line-height:30px; }

#content { margin:0; padding:1em; clear:both; }
#content h2, #content h3 { font-size:1.25em; color:#ff6600; }
#content p { text-align:left; }
#content ul { margin: 0.5em 0 0; padding: 0; list-style: none; }
#content li { padding:4px 0 4px 25px; background: url(../images/responsive/m-section-arrow.png) no-repeat 0 9px; background-size: 14px 14px; -webkit-background-size: 14px 14px; }
#content li a { color:#333; text-decoration:none; }

.video-container { position:relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } 
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

}

@media \0screen {

#first .article img { width: auto; /* for ie 8 */  }

}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1023px) {
html, body { background-color:#f1f1f1; min-width: 100%; width:100%; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; overflow:hidden; margin:0; padding:0; font-family: 'Open Sans', sans-serif; }

h1, h2, h3 { text-transform: uppercase; font-weight:300; letter-spacing:0.05em; }
strong { font-weight:800; }
p { text-align:center; }

/*  --- HOMEPAGE  ---  */

#banner { background-color:#FFF; height:auto; overflow:auto; }
#banner h1 a { background:url(../images/responsive/fhi-360-annual-report.png) no-repeat; text-indent:-9999px; -webkit-background-size:470px 66px; background-size:470px 66px; width:470px; height:66px; display:block; margin:0 auto; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[http://designlab360.org/ar/2013/dev2/images/responsive/fhi-360-annual-report.png]', sizingMethod='scale'); }

.story { height: auto; width: 100%; }

#first, #second, #sixth { background:none; display:block; position:relative; width:100%; }
#first a, #second a { font-size:1.2em; font-weight:600; text-transform:uppercase; text-decoration:none; letter-spacing:0.05em; }
#first .article, #second .article { margin:0; width:100%; position:relative; }

/* Introduction */
#first .article { background-color:#FFFFFF; overflow:auto; }
#first .article img { max-width:100%; height: auto; margin-bottom:1em; }
#first .article .title { margin:1em auto; width:70%; overflow:auto; }
#first .article .title h1 { background:url(../images/responsive/first-h1-bkgd.gif) no-repeat; text-indent:-9999px; -webkit-background-size:438px 32px; background-size:438px 32px; width:438px; height:32px; display:block; margin:0.5em auto; }	
#first .article .title p { color:#666; font-size:1.15em; line-height:1.4em; font-weight:600; float:left; text-align:left; width:60%; }
#first .article a, #second a { font-weight:700; font-size:0.95em; line-height:1.25em; float:right; margin-left:0.5em; margin-top:1em; color:#333; height:100px; }
#first .article a { background:url(../images/first-hear-from-ceo-bkgd.png) no-repeat; padding:22px 50px 0 18px; width:85px; }
#second a { background:url(../images/first-hear-from-ceo-bkgd.png) no-repeat; padding:22px 60px 0 18px; width:70px; }
#first .article a:hover { color: #fff; }

/* Projects */
#second { padding:0 0.5em; margin:0; clear:both; }
#second .title { margin:0 auto; height:62px; }
#second .title h2 { font-size:2em; background:url(../images/responsive/h2-connecting-bkgd.png) no-repeat right; padding-right:30px; color:#333; float:left; width:53%; text-align:right; line-height:62px; }
#second .title p { font-size:1.25em; color:#ff6600; float:left; width:27%; padding-left:15px; font-weight:800; text-align:left; }
.view-projects-map { background:url(../images/responsive/view-our-projects-map.png); -webkit-background-size:242px 122px; background-size:242px 122px; width:242px; height:122px; clear:both; margin:0 19px 0 0; float:left; }
#second .projects-wrap { clear:both; width:450px; margin:1em auto; overflow:auto; }

/* In the report */
#sixth { background-color:#FFF; }
#sixth h2 { font-size:2em; letter-spacing:-0.02em; text-align:center; padding:1em 0 0; font-family: 'Open Sans', sans-serif; }		
#sixth .awards-mentions { margin:2em auto; width:265px; }
#sixth .awards-mentions a.download-full-report { background:url(../images/responsive/download-full-report.png); -webkit-background-size:133px 21px; background-size:133px 21px; width:133px; height:21px; float:left; margin-right:20px; }
#sixth .awards-mentions a.awards { background:url(../images/responsive/awards-mentions.png); -webkit-background-size:97px 23px; background-size:97px 23px; width:97px; height:23px; float:left; }
#sixth .article { margin:0 auto; width:85%; }
#sixth .article #bucket { padding:5px 8px; margin:10px auto; }
#sixth .article #bucket h3 { font-size:1.25em; text-transform:none; font-weight:600; letter-spacing:0; padding:0.5em 0; margin:0; }
#sixth .article #bucket a { color:#333; text-decoration:none; }
#sixth .article #bucket .arrow-right { float:right; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #333333; margin-top:5px; }

.ceo { border-top:5px solid #33ccff; }
.global { border-top:5px solid #99cc33; }
.leadership { border-top:5px solid #ffcc00; }
.financials { border-top:5px solid #ff6600; }
.funders { border-top:5px solid #006699; }

#footer-wrap { background-color:#FFFFFF; padding:10px 0; border-top:5px solid #f1f1f1; }
#footer-wrap #footer { font-size:1em; color:#999; line-height:35px; }
#footer-wrap #footer a { text-decoration:none; color:#333; font-weight:800; }
#footer-wrap #footer .follow { text-transform:uppercase; font-weight:800; }
#footer-wrap #footer img { display:inline; margin-left:5px; vertical-align:middle; }


/* --- SECONDARY PAGES --- */

.breadcrumb { background-color:#CCC; overflow:auto; }
.breadcrumb .button { background:url(../images/responsive/breadcrumb-separator.png) right no-repeat; float:left; padding:7px 11px; }
.breadcrumb .button a { color:#333; text-decoration:none; line-height:30px; }

#content { margin:0; padding:1em; clear:both; }
#content h2, #content h3 { font-size:1.25em; color:#ff6600; }
#content p { text-align:left; }
#content ul { margin: 0.5em 0 0; padding: 0; list-style: none; }
#content li { padding:4px 0 4px 25px; background: url(../images/responsive/m-section-arrow.png) no-repeat 0 9px; background-size: 14px 14px; -webkit-background-size: 14px 14px; }
#content li a { color:#333; text-decoration:none; }

.video-container { position:relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } 
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

}

@media only screen 
and (min-device-width : 320px)
and (max-device-width : 768px) {
	
html, body { background-color:#f1f1f1; min-width: 100%; width:100%; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; overflow:hidden; margin:0; padding:0; font-family: 'Open Sans', sans-serif; }

h1, h2, h3 { text-transform: uppercase; font-weight:300; letter-spacing:0.05em; }
strong { font-weight:800; }
p { text-align:center; }

/*  --- HOMEPAGE  ---  */

#banner { background-color:#FFF; height:auto; overflow:auto; }
#banner h1 a { background:url(../images/responsive/fhi-360-annual-report.png) no-repeat; text-indent:-9999px; background-size:313px 44px; width:313px; height:44px; display:block; margin:0 auto; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[http://designlab360.org/ar/2013/dev2/images/responsive/fhi-360-annual-report.png]', sizingMethod='scale'); }

.story { height: auto; width: 100%; }

#first, #second, #sixth { background:none; display:block; position:relative; width:100%; }
#first a, #second a { font-size:1.2em; font-weight:600; text-transform:uppercase; text-decoration:none; letter-spacing:0.05em; }
#first .article, #second .article { margin:0; width:100%; position:relative; }

/* Introduction */
#first .article { background-color:#FFFFFF; overflow:auto; }
#first .article img { max-width:100%; height: auto; margin-bottom:1em; }
#first .article .title { margin:1em; }
#first .article .title h1 { background:url(../images/responsive/first-h1-bkgd.gif) no-repeat; background-size:292px 21px; text-indent:-9999px; width:292px; height:21px; display:block; margin:0 auto; }	
#first .article .title p { color:#666; font-size:1.15em; line-height:1.4em; font-weight:600; }
#first .article a, #second a { padding:20px 0 0; margin:0 auto 1em; font-size: 1.1em; font-weight:700; color:#FFF; width:263px; height:49px; display:block; text-align:center;
}
#first .article a { background:url(../images/responsive/first-hear-from-ceo-bkgd-green.png) center no-repeat; }
#second a { background:url(../images/responsive/first-hear-from-ceo-bkgd.png) center no-repeat; }
#first .article a:hover { color: #fff; }

/* Projects */
#second { padding:0 0.5em; margin:0 }
#second .title { margin:0 auto; height:62px; }
#second .title h2 { font-size:1.25em; background:url(../images/responsive/h2-connecting-bkgd.png) no-repeat right; padding-right:30px; color:#333; float:left; width:45%; text-align:right; line-height:62px; }
#second .title p { font-size:0.9em; color:#ff6600; float:left; width:35%; padding-left:15px; font-weight:800; text-align:left; }
.view-projects-map { background:url(../images/responsive/view-our-projects-map.png); background-size:242px 122px; width:242px; height:122px; clear:both; margin:0 auto; }

/* In the report */
#sixth { background-color:#FFF; }
#sixth h2 { font-size:2em; letter-spacing:-0.02em; text-align:center; padding-top:1em; }		
#sixth .awards-mentions { margin:2em auto; width:265px; }
#sixth .awards-mentions a.download-full-report { background:url(../images/responsive/download-full-report.png); background-size:133px 21px; width:133px; height:21px; float:left; margin-right:20px; }
#sixth .awards-mentions a.awards { background:url(../images/responsive/awards-mentions.png); background-size:97px 23px; width:97px; height:23px; float:left; }
#sixth .article { margin:0 auto; width:85%; }
#sixth .article #bucket { padding:5px 8px; margin:10px auto; }
#sixth .article #bucket h3 { font-size:1em; text-transform:none; font-weight:600; letter-spacing:0; padding:0.5em 0; margin:0; }
#sixth .article #bucket a { color:#333; text-decoration:none; }
#sixth .article #bucket .arrow-right { float:right; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #333333; margin-top:5px; }

.ceo { border-top:5px solid #33ccff; }
.global { border-top:5px solid #99cc33; }
.leadership { border-top:5px solid #ffcc00; }
.financials { border-top:5px solid #ff6600; }
.funders { border-top:5px solid #006699; }

#footer-wrap { background-color:#FFFFFF; padding:10px 0; border-top:5px solid #f1f1f1; }
#footer-wrap #footer { font-size:1em; color:#999; line-height:35px; }
#footer-wrap #footer a { text-decoration:none; color:#333; font-weight:800; }
#footer-wrap #footer .follow { text-transform:uppercase; font-weight:800; }
#footer-wrap #footer img { display:inline; margin-left:5px; vertical-align:middle; }


/* --- SECONDARY PAGES --- */

.breadcrumb { background-color:#CCC; overflow:auto; }
.breadcrumb .button { background:url(../images/responsive/breadcrumb-separator.png) right no-repeat; float:left; padding:7px 11px; }
.breadcrumb .button a { color:#333; text-decoration:none; line-height:30px; }

#content { margin:0; padding:1em; clear:both; }
#content h2, #content h3 { font-size:1.25em; color:#ff6600; }
#content p { text-align:left; }
#content ul { margin: 0.5em 0 0; padding: 0; list-style: none; }
#content li { padding:4px 0 4px 25px; background: url(../images/responsive/m-section-arrow.png) no-repeat 0 9px; background-size: 14px 14px; -webkit-background-size: 14px 14px; }
#content li a { color:#333; text-decoration:none; }

.video-container { position:relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } 
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

}