/*core styles*/
.disable-scroll{
  height: 100%;
  overflow: hidden;
}

.metro-interactive{
    padding:0px 0px;
    min-width:320px;
    margin:0rem auto;
}

.metro-interactive .c-fix:after{
  content:""; 
  display:table; 
  clear:both;
}

/*use border-box on div containers*/
.metro-interactive, .metro-interactive div, .metro-interactive .border-box{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.metro-interactive ul{
  list-style-type:disc;
  padding-left:2rem;
}

/*1 - big, section separator*/
div.major-title-span, div.major-title{
  margin:4rem 0em 0rem 0em;
  padding: 1rem 1rem 0.5rem 1rem;
  border-bottom: 1px solid #aaaaaa;
  clear:both;
}
div.major-title.no-border,
div.major-title-span.no-border{border-bottom:none;}

div.major-title > p:first-child,
div.major-title-span > p:first-child{
  font-weight:bold;
  font-size:1.75rem;
  font-style:normal;
}

div.major-title > p,
div.major-title-span > p{
  max-width:950px;
  text-align:center;
  line-height:1.5em;
  margin:0em auto;
  font-style:italic;
}

.metro-interactive div.reading, div.reading{
  max-width:780px;
}

.metro-interactive div.center-column, div.center-column{
  margin:2rem auto 4rem auto;
  border:1px solid #aaaaaa;
  border-width:0px 0px;
}

div.major-title-span + div.center-column {
  margin-top:1rem;
}

.size-article-fullbleed > .reading{
  padding: 1rem 1rem;
}

.size-article-fullbleed > .reading > *,
.size-article-fullbleed > .reading li{
  margin-bottom:1rem;
}

p.big-jump-link{
  background-color:#324661;
  padding:1rem 1.5rem;
  border:1px solid #324661;
  border-radius: 15px;
  color:#ffffff;
  display:block;
  clear:both;
  text-decoration:none;
  cursor:pointer;
  margin:2rem auto;
}

p.big-jump-link:hover, p.big-jump-link:active{
  text-decoration:underline;
  border-width:1px;
}

ul.mpp-interactive-list{
  list-style-type:disc;
  padding-left:2rem;
}

/*end core styles*/

/*image grids*/

.mpp-text-border{
  margin:1rem auto 2rem auto;
  width:100%;
  height:1px;
  max-width:800px;
  padding:0rem;
  border-top:1px solid #aaaaaa;
}
.mpp-text-border.bottom-cap{margin:2rem auto 2rem auto;}

.metro-interactive .mpp-image-grid > p{
  margin:1rem 3%;
}

.metro-interactive .mpp-image-grid{
  margin:1rem auto 3rem auto;
  padding:1rem 0rem;
}

.metro-interactive .mpp-image-grid > div{
  width:100%;
  display:table;
  table-layout: fixed;
  margin:0rem auto 0rem auto;
  max-width:1200px;
  border-spacing: 2rem 0rem;
}

.metro-interactive .mpp-image-grid.three-col > div {max-width:1700px;}

.metro-interactive .mpp-image-grid > div > div{
  display:table-row;
}

.metro-interactive .mpp-image-grid > div > div > div{
  display:table-cell;
  padding:0rem 7px 0rem 10px;
  margin:2rem 0rem;
}

.metro-interactive .mpp-image-grid p{
  margin:5px 0px;
  font-style:italic;
}
.metro-interactive .mpp-image-grid p.chart-title{
  font-size:1.15rem;
  font-weight:bold;
  font-style:normal;
}
.metro-interactive .mpp-image-grid p.chart-note{
  font-size:0.85rem;
  color:#555555;
  line-height:1.5em;
}

.metro-interactive .mpp-image-grid > div > div:first-child > div{
  vertical-align:bottom;
}

.metro-interactive .mpp-image-grid > div > div:nth-child(2) > div{
  background-color:#eeeeee;
  border:1px solid #d0d0d0;
  border-width:1px 0px;
}

.metro-interactive .mpp-image-grid img{
  width:100%;
  height:auto;
}

/*oic dashboard*/
.metro-interactive .dashboard-wrap{
  position:relative;
  max-width:1900px;
  margin:0rem auto;
}

.metro-interactive .dashboard-wrap p{
  margin:0rem 0rem 5px 0rem;
  color:#333333;
}

.metro-interactive .dashboard-menu{
  position:relative;
  margin-bottom:1.25rem;
  margin-right:1rem;
  border-radius:0px 15px 15px 0px;
  overflow:hidden;
}

.metro-interactive .dashboard-menu > div{
  padding:10px 1rem; 
  background: #333333;
  background: -webkit-linear-gradient(to left, #324661, #141E30);
  background: linear-gradient(to left, #324661, #141E30); 
}

.metro-interactive p.dashboard-title{
  font-size:42px;
  line-height:1em;
  font-weight:bold;
  margin:0px 1rem 0px 0px;
  padding:0px 0px 2px 0px;
  color:#ffffff;
  float:left;
}

.metro-interactive #oic-type{
  float:right;
  margin:12px 0rem 0px 0rem;
}

.metro-interactive #oic-type > div{
  display:inline-block;
  vertical-align:bottom;
}

.metro-interactive #oic-type > div > p{
  background-color:transparent;
  border:0px solid #ffffff;
  color:#ffffff;
  float:left;
  font-size:16px;
  line-height:1em;
  padding:5px 10px;
  border-radius:5px;
  margin:0rem;
}
.metro-interactive #oic-type p:first-child{
  padding:5px 5px 5px 0px;
}

.metro-interactive #geography-note p,
.metro-interactive #geography-download p{
  margin:5px 0rem;
  padding:5px 0px;
  font-size:16px;
  line-height:20px;
  vertical-align:middle;
  font-style:italic;
}

.metro-interactive #geography-download a{
  color:#333333;
  text-decoration:none;
  border:none;
}

.metro-interactive #oic-select{
  height:27px;
  float:left;
  margin: 8px 0px 8px 0px;
}

.metro-interactive select{
  font-size:16px;
  color:#555555;
  padding:0em 1rem 0rem 0.5rem;
  margin:0px;
  height:100%;
  background-color:#ffffff;
  border:0px solid #ffffff;
  border-radius:8px;
  -moz-appearance:none;
  font-weight:bold;

  display:block;
}

.metro-interactive .dashboard-wrap .oic-help{
  position:relative;
  padding-right:30px !important;
  display:block;
}

.metro-interactive .dashboard-wrap .oic-help:after{
  content:"?";
  font-size:14px;
  line-height:14px;
  top:50%;
  right:0px;
  margin:-10px 0px 0px 0px;
  position:absolute;
  background: #999999;
  color:#ffffff;
  height:20px;
  width:20px;
  padding:3px;
  border-radius:10px;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
  display:block;
  box-sizing: border-box; 
  white-space:nowrap; 
}

.metro-interactive .dashboard-wrap .oic-help.icon-top:after{
  top:0%;
  margin:5px 0px 0px 0px;
}


/*the dashboard is made up of three panels
  --each panel has 0 or more sections
  ----each section has 1 or more tiles*/ 

.metro-interactive .dashboard-panel{
  float:left;
  padding:0rem 1rem 0rem 1rem;
  margin:10px 0px 3rem 0px;
}

.metro-interactive .dashboard-panel-title{
  margin:0rem 0rem 0px 0rem;
  padding:10px 10px 0px 10px; 
  /*border:1px solid #1d2b3a;
  background-color:#1d2b3a;*/
  border:0px solid #aaaaaa;
}

.metro-interactive .dashboard-panel-title > p{
  font-style:italic;
}
.metro-interactive .dashboard-panel-title > p:first-child{
  font-weight:bold;
  font-style:normal;
  font-size:23px;
  margin:7px 0rem 0px 0px;
}


.metro-interactive .box-shadowed{
  box-shadow: 2px 3px 6px rgba(50,50,50,.35);
}

.metro-interactive #dash-panel-1{
  padding:0rem 1rem 0rem 0rem;
}

.metro-interactive #dash-legend{
  margin-bottom:0px;
  text-align:center;
  line-height:1em;
  padding:0rem 1rem;
}

.metro-interactive #dash-legend > div{
  display:inline-block;
  border:1px solid #e0e0e0;
  border-radius:15px;
  background:#e0e0e0;
  padding:0rem 0px 10px 10px;
}

.metro-interactive #dash-legend > div > div{
  display: inline-block;
}

.metro-interactive #dash-legend > div > div > div.legend-entry{
  float:left;
  margin:10px 12px 0px 0px;
  line-height:1em;
}

.metro-interactive .dashboard-panel-image{
  margin:0rem 0rem 0rem 0rem;
  height:290px;
  width:100%;
  background-size:cover;
  background-position: 50% 0%;
  background-color:#1d2b3a;
  border-radius: 0px 15px 0px 0px;
  border:none;
  position:relative;
  padding:0px !important;
  float:left;
}

.metro-interactive .dashboard-panel .panel1-content{
  /*background-color:#eeeeee;
  border: 1px solid #aaaaaa;
  border-width: 0px 1px 1px 0px;*/
  float:left;
  padding: 1px 0rem;
  background-color:#ffffff;
  border: 1px solid #aaaaaa;
  border-width: 0px 1px 1px 1px;
}


.metro-interactive .dashboard-panel-section{
  padding:0.5rem 0px 0rem 0px;
  margin:0px 0px 10px 0px;
  border:0px solid #aaaaaa;
  background-color:transparent;
}

.metro-interactive .dashboard-panel-section .oic-section-title{
  font-weight:bold;
  font-size:16px;
  line-height:1em;
  margin:0px;
  /*padding:10px 0px 10px 12px;*/
  padding:10px 0px 10px 10px;
  border-bottom:1px solid #aaaaaa;
  position:relative;
}

.metro-interactive .dashboard-tile{
  float:left;
  margin:0px;
  width:100%;
  max-width:480px;
  min-height:100px;
  padding:5px 10px 5px 10px;
}

.metro-interactive .dashboard-tile svg{
  background-color:#ffffff;
  border:1px solid #d0d0d0;
  border-radius: 0px 10px 0px 10px;
}

.metro-interactive .dashboard-tile p{
  font-size:16px;
  line-height:20px;
}

.metro-interactive .dashboard-tile p > span{
  white-space: nowrap;
}

.metro-interactive .dashboard-tile .tile-header{
  vertical-align:bottom;
  line-height:100%;
}

.metro-interactive .dashboard-tile .tile-header p{
  display:inline-block;
  line-height:1.5em;
  vertical-align:bottom;
}

.metro-interactive .criterion{
  margin:1rem 0rem 1.25rem 0rem;
  padding:0rem 1rem 0rem 1rem;
  min-width:240px;
}

.metro-interactive .criterion p{
  margin:5px 15px 0em 30px;
  font-size:16px;
  line-height: 24px;
  font-style:italic;
}

.metro-interactive .criterion p.criteria-title{
  margin:6px 0rem 7px 0rem;
  font-weight:bold;
  line-height:24px;
  background-color:#e0e0e0;
  border:2px solid #e0e0e0;
  border-radius:13px;
  font-style:normal;
  max-width:none;
}

.metro-interactive .criterion p.criteria-title span{
  display:block;
  float:left;
  background-color:#F4B734;
  color:#333333;
  border-radius:12px;
  height:24px;
  line-height:1em;
  padding:4px;
  width:24px;
  text-align:center;
  margin:0px 6px 0px 0px;
  box-sizing: border-box;
}

.metro-interactive .criterion p.criteria-value span{
  font-weight:bold;
  font-size:1.5em;
  display:inline-block;
  margin:0px 0px 0px 0px;
  font-style:normal;
}


/*end oic dashboard*/


@media (min-width:0px){
  .metro-interactive{padding:0px 0px;}
  .metro-interactive .dashboard-panel{width:100%;}
  .metro-interactive #dash-panel-1{padding:0rem;}

  .metro-interactive .dashboard-tile{margin:0px; width:100%; float:none;}

  .metro-interactive .dashboard-panel-image{height:360px; border-radius:0px;} 

  .metro-interactive .dashboard-menu{
    margin-right:0rem;
    border-radius:0px;
  }

  .metro-interactive .dashboard-panel .panel1-content{
    width:100%;
    border-width: 0px 0px 1px 0px;
  }

  .metro-interactive #dash-legend > div{
    display:block;
  }

  .metro-interactive #oic-type > p{padding:5px 3px;}
  .metro-interactive #oic-type p:first-child{display:none;}
  .metro-interactive p.dashboard-title {font-size:34px;}

  /*IMAGE GRIDS*/
  .metro-interactive .mpp-image-grid > div {display:block;}
  .metro-interactive .mpp-image-grid > div > div{display:block;}
  .metro-interactive .mpp-image-grid.two-col > div > div > div,
  .metro-interactive .mpp-image-grid.three-col > div > div > div{display:block; width:auto;}
  .metro-interactive .mpp-image-grid p{display:none;}
  /*display titles immediately above images*/
  .metro-interactive .mpp-image-grid > div > div.image-row p{display:block;}
}


@media (min-width:700px){
  .metro-interactive .dashboard-panel{width:50%;}
  .metro-interactive .dashboard-tile{width:100%;margin:0px;}
  
  .metro-interactive #dash-legend{
    width: 100%;
  }

  .metro-interactive #dash-panel-1{
    padding:0rem 1rem 0rem 0rem;
    width:100%;
  }

  .metro-interactive .dashboard-panel-image{
    width:25%; 
    width: calc(35% - 2rem); 
    margin:0rem 1rem 1rem 1rem; 
    border-radius: 0px 15px;
    height:200px;

  }  

  .metro-interactive .dashboard-panel .panel1-content{
    width:65%;
    border-width: 1px;
    border-radius: 15px 0px;
  }

  .metro-interactive #oic-type p{padding:5px 8px;}  
  .metro-interactive #oic-type p:first-child{display:block;}
  .metro-interactive p.dashboard-title {font-size:42px;}
  /*.metro-interactive #oic-type{line-height:2.5rem;}*/

  /*IMAGE GRIDS*/
  .metro-interactive .mpp-image-grid > div {display:table;}
  .metro-interactive .mpp-image-grid > div > div{display:table-row;}
  .metro-interactive .mpp-image-grid.two-col > div > div > div{display:table-cell; width:50%;}
  .metro-interactive .mpp-image-grid.three-col > div > div > div{display:table-cell; width:33%;}

  .metro-interactive .mpp-image-grid p{display:block;}
  /*don't display titles immediately above images*/
  .metro-interactive .mpp-image-grid > div > div.image-row p{display:none;}
}

@media (min-width:1180px){
  .metro-interactive .dashboard-tile{margin:0px auto;width:50%; float:left;}
  .metro-interactive .dashboard-panel{width:36%;}

  .metro-interactive .dashboard-menu{
    margin-right:1rem;
    border-radius:0px 15px 15px 0px;
  }

  .metro-interactive #dash-legend{
    width: 72%;
  }

  .metro-interactive #dash-panel-1{
    width:28%;
  }

  .metro-interactive .dashboard-panel-image{
    border-radius:0px 15px 0px 0px; 
    width:100%; 
    margin:0rem 0rem 0rem 0rem; 
    height:290px;
  }

  .metro-interactive .dashboard-panel .panel1-content{
    width:100%;
    border-width: 0px 1px 1px 1px;
    border-radius:0px 0px 15px 0px;
  }  

  .metro-interactive #dash-legend > div{
    display:block;
  }  
}