/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/

body {
  background: #efefef url("../images/textured-bg.png") top center repeat fixed;
}

body, p, ul, ol, b, i, blockquote, h2, h3, h4, h5, h6 {
  font-family: 'Lato', Helvetica, sans-serif;
  font-weight: normal;
}

.disclaimer {
  background: #eee;
  padding: .5em;
  color: #fff;
  background: rgba(0,0,0,.6);
  margin-bottom: .5em;
  border-bottom: 1px solid #fff;
  text-align: center;
}

.disclaimer p, a {color: #fff;}
.disclaimer a {margin-left: 1em; font-size: .9em;  text-decoration: none; border-bottom: 1px solid #eee; border-bottom: 1px solid rgba(255,255,255,.5);}

@media only screen and (max-width: 620px) { 
  .disclaimer span {display: block;} 
}

.disclaimer a b {font-weight: bold;}
.disclaimer a:hover {color: #ccc;}

#header {margin: 0 0 1.5em 0; }

#header h1 {
  font-weight: normal;
  font-family: 'Abel', Helvetica, sans-serif;
  margin: 0; 
  padding: 0;
}

#header h1 span {font-weight: bold;}

#header h1 {
  display: block;
  font-size: 2.3em;
  padding: 1.5em 0 1em 0;
  font-family: 'Abel', Helvetica, sans-serif;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}

@media only screen and (max-width: 420px) { 
  #header h1 {
  background: none; 
  background-size: contain;
  font-size: 1.6em; 
  height: auto;
  letter-spacing: 0.05em;
  padding: .18em 1.75em;
  margin-top: .4em;
  }
}

@media only screen and (orientation: landscape) {
  body {font-size: 75%;}
}

#header h1 span {font-weight: normal; color: #888;}

abbr:hover, abbr:active {cursor: pointer;}

ul.sublist {margin: 0; padding: 0; text-align: right;}
ul.sublist li {display: inline-block; list-style: none; text-align: right; margin: .5em 0 0 1em; padding-left: 1em;}
ul.sublist li.second {border-left: 1px solid #ccc; }
ul.sublist li.second a {color: #D50B53}
ul.sublist li a {color: #444;}

@media only screen and (max-width: 420px) { 
  ul.sublist li {display: none;}
  
}

.next-header {
  background-color: #8db4d3;
  padding: .2em 0 .3em 0;
  width: 100%;
  display: block;
  text-align: center;
}

.next-header ul {
  list-style: none outside;
  text-align: left;
  margin: 0 auto;
  font-size: 1.5em;
  padding: 0;
  max-width: 920px;
}

.next-header ul li {list-style: none; list-style-type: none; display: inline-block; font-size: .75em; padding: 0 2em 0 0;}
.next-header ul li a:hover {color: #fff; text-decoration: underline;}

.next-nav {
  font-weight: normal;
  font-family: 'Abel', Helvetica, sans-serif;
  text-transform: uppercase;
}

.next-header ul li.next-us-flag {
  width: 21px;
  padding: 0;
  height: 15px;
  background: url("../images/us-flag.png");
  text-indent: -9999px;
  margin: 0px 10px 0px 0px;
}

h2  {
  font-weight: normal; 
  font-family: 'Abel', Helvetica, sans-serif;  
  text-transform: none;
  margin: 0; 
  padding: 0;
  line-height: 1.3em;
  text-transform: uppercase;
}

h2 {font-size: 2.5em; line-height: 1.6em; font-weight: normal; margin: 0 0 .75em 0;}
h3 {font-size: 1.2em; font-weight: bold; font-family: 'Lato', Helvetica, sans-serif;}
h4 {font-size: 1.2em; padding-bottom: 1em; }
h5 {font-size: 1.1em;}
h6 {font-size: 1.1em;}

#footer h4 {padding-bottom: 0;}
#footer .row {padding: 0; margin: 0;}

h3, h4, h5, h6 {color: #626262; text-shadow: 0 1px 0 rgba(255,255,255,.9);}

.bold h3 {text-shadow: none;}
.bold p {color: #fff; font-weight: 500;}

.reveal-modal {top: 20px;}

.reveal-modal h2 {margin-bottom: 0; padding-bottom: .2em; font-size: 1.4em; margin-bottom: .2em; }
.reveal-modal h3 {margin-top: 0; padding-top: 0; font-size: 1.6em; display: inline-block; margin-right: .5em; border-right: 1px solid rgba(0,0,0,.1); padding-right: .75em;}
.reveal-modal h4 {margin-top: 1em;}
.reveal-modal .secondary {padding-top: 1.5em;}

.reveal-modal .foundicon-globe {border-style: none;}
.reveal-modal .foundicon-torso {border-style: none;}

i.foundicon-globe, i.foundicon-torso {display: inline-block; margin-top: .75em;}

.margin-top {margin-top: 1em; clear: both;}

a.feature-link {display: block; color: #222; font-size: 1.1em; text-shadow: 0 1px 0 rgba(255,255,255,.8); text-align: center; background: #ddd; margin: 1.5em 2% 0 2%; clear: both; padding: 1em; }

a.feature-link.dev-link {background: #cdcdcd;}

.feature-box .panel {margin-bottom: 1.75em; text-center;}

.row .panel .description p {font-weight: normal; margin-bottom: .4em;}
.row .panel p {font-family: 'Lato', Helvetica, sans-serif; font-weight: normal; font-weight: 100; color: #777; text-shadow: 0 1px 0 rgba(255,255,255,.8);}

.row .close-reveal-modal {font-size: 2em; font-weight: bold; margin: .9em 1em;}

.commerce h2, a.more.commerce {color: #481872;}
.energy h2, a.more.energy {color: #83B03C;}
.health h2, a.more.health {color: #3E6B85;}
.education h2, a.more.education {color: #B25445;}
.finance h2, a.more.finance {color: #f0ab2e;} 
.development h2, a.more.development {color: #603813;}
.safety h2, a.more.safety {color: #15226D;}

p {font-size: 1.15em; margin: .25em 0; line-height: 1.4em; font-weight: normal; color: #535353;}

a.more {font-weight: normal; text-shadow: 0 1px 0 rgba(255,255,255,.9); background: #fff; background: rgba(255,255,255,.9); color: #444; padding: .5em 1em; border: 1px solid #eee; text-decoration: none; margin: 0;}

a.more.commerce:hover, a.more.commerce:active {border: 1px solid #481872;}
a.more.energy:hover, a.more.energy:active {border: 1px solid #83B03C;}
a.more.health:hover, a.more.health:active {border: 1px solid #3E6B85;}
a.more.education:hover, a.more.education:active {border: 1px solid #B25445;}
a.more.finance:hover, a.more.finance:active {border: 1px solid #f0ab2e;}
a.more.development:hover, a.more.development:active {border: 1px solid #603813;}
a.more.safety:hover, a.more.safety:active {border: 1px solid #15226D;}

h4.examples {font-weight: 500;}

.commerce h4.examples {color: #481872;}
.energy h4.examples {color: #83B03C;}
.health h4.examples {color: #3E6B85;}
.education h4.examples {color: #B25445;}
.finance h4.examples {color: #f0ab2e;}
.development h4.examples {color: #603813;}
.safety h4.examples {color: #15226D;}

a.more.commerce:hover, a.more.commerce:active {border: 1px solid #481872}
a.more.energy:hover, a.more.energy:active {border: 1px solid #83B03C}
a.more.health:hover, a.more.health:active {border: 1px solid #3E6B85}
a.more.education:hover, a.more.education:active {border: 1px solid #B25445;}
a.more.finance:hover, a.more.finance:active {border: 1px solid #f0ab2e}
a.more.development:hover, a.more.development:active {border: 1px solid #603813}
a.more.safety:hover, a.more.safety:active {border: 1px solid #15226D}

a.more {display: inline-block; margin-bottom: 1.5em;}

.row .panel {padding-top: 2em; min-height: 8.5em; font-size: .9em; font-weight: normal; }

.row .panel a {font-weight: normal; font-weight: 100; }

.row .mobile-two .panel {height: auto;}

.mobile-two .description.bold {height: auto; padding: 0;}

.reveal-modal .row .panel {min-height: 5em; text-align: center; background: rgba(0,0,0,.01); color: #333; font-weight: bold;}
.reveal-modal .row .panel p {font-weight: bold;}

.reveal-modal p {margin-bottom: 1em;}

.panel {
  background-color: #fff;
  -webkit-boxbox-shadow: 0px 2px 5px 1px #dadada;
  -moz-box-shadow: 0px 2px 5px 1px #dadada;
  -o-box-shadow: 0px 2px 5px 1px #dadada;
  -ms-box-shadow: 0px 2px 5px 1px #dadada;
  box-shadow: 0px 2px 5px 1px #dadada;
}
.row.video {margin-bottom: 1.5em;}

.row .description {
  bottom: 0;
  left: 0;
  display: block;
}

#header .align-right {padding-top: 2.2em;}

@media only screen and (max-width: 770px) {#header .align-right {display: none;}}

.align-right {text-align: right;}

.description.bold {color: #fff;  margin: 0 0 22px 0}
.description.bold h3 {color: #fff; margin-top: .4em; padding: .3em .5em 0 .5em;}
.description.bold p {padding: 0 .65em 1em .65em;}
.description h3 {padding: 0; margin: 0;}

.by-line{
	font-size: 12px;
	display: inline;
	position: absolute;
	top: 10px;
	left: 25px;
	color: #feffff;
}

.energy .description.bold {background: #C3423A;}
.health .description.bold {background: #3E6B85;}
.education .description.bold {background: #B25445;}
.finance .description.bold {background: #f0ab2e;}
.commerce .description.bold {background: #351947;}

a .description.bold img {border: none; width: 100%;}

h2.meta {font-size: .9em;}

h1 {font-family: 'Abel', Helvetica, sans-serif; text-transform: uppercase;}

abbr {text-decoration: none; border-bottom: none; color: inherit;}


#footer {
  /*
  background: #222;
  background: rgba(0,0,0,.8);
  -webkit-box-shadow: 0 5px 7px rgba(0,0,0,.4) inset;
  */
  color: #333;
  font-family: 'Abel', Helvetica, sans-serif;
  border-top: 1px solid #cecece;
  margin-top: 3em;
  padding: 2em 0;
  max-width: 910px;
  margin: 2em auto;
}

#footer a {display: block; display: block; padding: .25em 0; color: #003399; }
#footer p, #footer h4 {
  color: #333;
  text-transform: uppercase; 
}

#footer h4 {font-size: 1.2em; font-family: 'Abel', Helvetica, sans-serif; letter-spacing: 0.05em; text-shadow: none; font-weight: normal;}

#footer ul li {
  list-style: none;
  padding: 0;
  border-bottom: 1px solid #444;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

#footer ul li:last-child {border-bottom: none;}

.topic h2 {
  margin: 1em 0 .25em 0;
}

.feature {border: 1px solid #ccc;}

h2 abbr {text-transform: uppercase; background: #eee; background: rgba(0,0,0,.03); font-size: .7em; vertical-align: top; color: #fff; padding: .1em .2em;}

a.success.button {border: none; color: #fff; background: #777; background: rgba(0,0,0,.5);}

h2.salvo {text-transform: none; letter-spacing: normal; padding: 1em 0; display: block; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; text-shadow: 0 1px 0 rgba(255,255,255,.9); text-align: center;  color: #222; font-size: 2.7em; line-height: 1.3em; background: #eee; background: rgba(0,0,0,.05); padding: .5em 1em;}

@media only screen and (max-width: 420px) { 
  h2.salvo {font-size: 1.6em; margin-bottom: .3em;}
}

.blocks {
	list-style-type: none;
	margin-top: 42px;
	text-align: right;
}

.blocks li {
	display: inline-block;
	width: 35px;
	height: 35px;
	opacity: .9;
	margin-right: 2px;
	color: #fff;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

.blocks li:hover {opacity: 1; -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);}
.blocks .commerce {background-color: #481872;}
.blocks .energy {background-color: #83B03C;}
.blocks .health {background-color: #3E6B85;}
.blocks .education {background-color: #B25445;}
.blocks .safety {background-color: #15226D;}
.blocks .finance {background-color: #f0ab2e;} 
.blocks .development {background-color: #603813;}

.blocks li.development {margin-right: 0;}

.blocks li a, .blocks li a:visited {color: #fff; display:block; height:100%;}
.blocks li a abbr {display:block; height:100%; padding-top:8px;}

@media only screen and (max-width: 420px) { 
  .blocks {text-align: center;}
  .blocks li {width: 30px; height: 30px; margin-right: 2px; font-size: 14px;}
}

@media only screen and (max-width: 790px) { 
  body {border: 3px solid black;}
  #header .row .five.columns {width: 100%; float: none; text-align: center;}
  .blocks, ul.sublist {text-align: center; margin: .5em;}
  ul.sublist {margin: 0 0 1em 0;}
  #header h1 {text-align: center;}
  #header h1 {padding: .75em;}
}

@media only screen and (max-width: 790px) { 
  #header .logo.seven.columns {display: block; float: none; width: 100%;}
  .blocks {text-align: center; margin: 0 auto; text-align: center; clear: both;}
  #header ul.sublist.right {clear: both; text-align: center; float: none;}
  #header ul.sublist.right li {text-align: center; float: none;}
  ul.blocks {float: none;}
}

.reveal-modal .panel p {color: #333;}

.reveal-modal .panel p.description {font-weight: normal; color: #787878; text-shadow: 0 1px 0 rgba(255,255,255,.9);}

.search-box input{
	font-family: 'Lato', Helvetica, sans-serif;
  	font-weight: normal;
  	font-size: 22px;
	padding: 10px;
}

ul.panel-list li a {text-decoration: none; border-bottom: none;}

/*** IE 7 ***/

html.ie7 .panel {border: none; margin: 0 6% 2em 0;}

html.ie7 .row .eight.columns .panel {margin: 0 3% 2em 0;}

html.ie7 .columns {padding: 0; margin: 0; }

html.ie7 ul.sublist {position: absolute; top: 0; right: 0;}
html.ie7 ul.sublist li {float: left;}


html.ie7 ul.blocks {clear: both;}

html.ie7 .blocks li {float: right;}
html.ie7 #header .blocks li {color: #fff;}
html.ie7 #header .blocks li a, html.ie7 #header .blocks li a:visited {color: #fff;}
html.ie7 #header .blocks li a abbr {color: #fff;}
html.ie7 #header .blocks li.first {margin-right: 1.5%;}

html.ie7 .description.bold {margin-right: 3%; padding: 0; overflow: hidden;}
html.ie7 .description.bold img {width: 100%; margin: 0; padding: 0;}

html.ie7 #header h1 {  display: block;
  color: #333;
  height: auto;
  width: 100%;
  margin-top: 0:
  padding: 1em 0 1em 80px;
  background: url("../images/a.png") center left no-repeat;
  }

html.ie7 a.feature-link {margin: 1em 3% 1em 0;}
html.ie7 .reveal-modal p {padding-right: 3%;}

html.ie7 .close-reveal-modal {margin-top: 2em;}

html.ie7 #footer ul {margin: 0 2% 0 0;}
html.ie7 #footer li {float: left; width: 100%;}
html.ie7 #footer li a {color: #fff;}
html.ie7 #footer li a:hover {text-decoration: underline;}