/* General HTML Settings */
body{
  margin:0px;
  padding:0px;
  font-size:20px;
  font-family:'Roboto',sans-serif;
  color:#333;
}
p{
  line-height:1.75;
}
a{text-decoration: none;color: #f0696a;}
blockquote{border-left: 4px solid #00BCD4;padding-bottom: 16px;padding: 10px 20px;margin: 0 0 20px;font-size: 17.5px;font-style: oblique;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
  font-weight:600;
  letter-spacing: 0.5px;
}
h1{
  font-family: "Alfa Slab One";
}h3{
  margin-top: 20px;
  margin-bottom:.5em;
}
h2{margin-top: 50px;font-family:Roboto!important;}
@media (max-width: 800px){
    h2{font-size:1.2em;}
}


/* Basic Settings  */
.background{background:#F9F9F9;fill:#f9f9f9;}
.border{border: 1px solid #D4D4D4;}
.mt-0{margin-top:0px;}
.ta-right{text-align:right;}
.border-bottom{border-bottom: 1px solid #D4D4D4;}
@media (max-width: 619px) {.hide-on-mobile{display:none;}}
@media (min-width: 1024px) {.hide-on-desktop{display:none;}}


/* HomeSnacks Styles */
.hs-style{color:#0dceef;font-family:alfa slab one,open sans,sans-serif;}
#withLove {clear: both;width: 100%;background: #099092;min-height: 100px;text-align: center;line-height: 100px;font-size: 1.5rem;color: #fff;font-family: 'alfa slab one',open sans,sans-serif;}
.hs-footer{background:#333!important; color:white!important;width:100%;padding-top:20px;}
.list-image{max-height: 600px;max-width:100%;}
#loadMoreCitiesButton{width: 100%;background: #0dceef!important;color: white;font-weight: normal;border-radius: 4px;padding-top: 10px;
padding-bottom: 10px;font-family: 'alfa slab one',open sans,sans-serif;border: none;margin-top: 20px;cursor: pointer;
}
.source{margin-bottom: 10px;width: 100%;font-size: .8em;color: #777;}
.street-view{width:100%;height:300px;pointer-events:none;}
.iframe-gallery{width:100%; height:440px;}
@media (max-width: 1200px){.iframe-gallery{height:350px; margin:0px;}}
@media (max-width: 600px){.iframe-gallery{width:580px; max-width: 100%; height:300px; margin:0px;}}
@media (max-width: 414px){.iframe-gallery{width:400px; max-width: 100%; height:220px; margin:0px;}}
@media (max-width: 320px){.iframe-gallery{width:300px; max-width: 100%; height:175px; margin:-8px;}}
.footable th{cursor:pointer;}
.inline-related-article{padding:20px;text-align:center;border:1px solid #d4d4d4;background:#f9f9f9;margin-bottom:15px;}

/* Navbar */
.navbar{padding:0px;}
.navbar-brand{font-family:'alfa slab one',open sans,sans-serif;color:#0b91a7!important;font-size:30px;}
.nav-link{font-size:1rem;}
.breadcrumb{margin-bottom:0px;padding: 8px 0px;background-color:white;font-size:.9rem;}

/* Featured Image Section */
.featuredImageSection{width:100%;height:250px;position:relative;}
.featured_image{padding:0px;width:100%;	overflow:hidden;position:initial;max-height:250px;}
.featured_image img{width:100%;height:100%;object-fit:cover;vertical-align:middle}
.rankBackgroundColor{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(249,249,249,0.6);}
.articleTitle{position:absolute;top:57%;left:50%;transform:translate(-50%,-50%);color:black;text-align:center;}
.articleTitle h1{font-family:'alfa slab one',open sans,sans serif;letter-spacing:.5px;}
.postInfo{font-weight:bold;}

@media(max-width:800px){
    .articleTitle {width: 80%;}
    .articleTitle h1{font-size:20px;}
    .postInfo{font-size:14px;}
}


/*CityHeader*/
.cityHeader{width:100%;height:50px;margin-top:30px;margin-bottom:10px;}
.cityName{
  font-family:'Alfa slab one',sans-serif;
  float:left;
  line-height:50px;
  margin:0px;
  width:100%;
  min-height:40px;
  font-size:20px;
  font-weight:bold!important;
}
.cityMap{max-height: 50px;float:right;max-width: 100px;}


/* Score */
.cityGrade{float:right;text-align: center;}
.city-card{border:1px solid #ededed;border-radius:4px;padding:0px 20px 0px 20px;margin-bottom:30px;}
.list-ranking{font-size:.7em;color:#777;margin-bottom:-40px;font-weight:100;letter-spacing:0.5px;}
.score-element{display:block;line-height:20px;padding-top:25px;}
.out-of{font-size:.5em;font-family:'Roboto',sans-serif;}
.info-box{padding:8px;background:#F9F9F9;border-radius:4px;margin-bottom:10px;text-align:center;}
.score-outer {display: table;font-family: 'alfa slab one',open sans,sans-serif;width: 100px;height: 100px;background: #0dceef!important;font-size: 1.5em;margin-left: auto;margin-right: auto;text-align: center;font-weight: 700;border-radius: 50%;margin-bottom: 10px;}
.score-inner {display: table-cell;vertical-align: middle;background: #fff;width: 80px;height: 80px;border-radius: 50%;position: absolute;margin: 10px;}


@media (max-width: 619px) {.list-image{max-height: 350px;}}
@media(max-width:600px){
    .list-image{max-height:250px;}
	.cityGrade{float:none;}
}

/* College Page */
.strip{
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	list-style-type: none;
}

.strip-item-outer{
	padding:0px 15px 15px;
}
.strip-item-outer-source{
	font-size: .7em;
  	color: #777;
	margin-top:5px;
}
.strip-item img{
	height:100%;
	border-radius:4px;
	width:100%;
}
.strip-item h3{
	position:absolute;
	bottom:0;
	left:0;
	color:white;
	z-index:2;
	padding-left: 12px;
	padding-right: 12px;
}
.strip-item .mask {
    position: absolute;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: transparent;
    background-image: -webkit-linear-gradient(top,transparent 0,rgba(0,0,0,.7) 100%);
    background-image: -o-linear-gradient(top,transparent 0,rgba(0,0,0,.7) 100%);
    background-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.7) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003c3f55', endColorstr='#993c3f55', GradientType=0);
    z-index: 1;
	cursor:pointer;
	border-radius:4px;
}

.strip-item {
    color: #fff;
    padding: 0!important;
    position: relative!important;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 4px;
}


.section-header {
    display: table;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
	font-size: 24px;
	font-weight:bold;
	margin-top: 50px;
	margin-bottom:20px;
	width: 100%;
}
.section-header:after, .section-header:before {
    display: table-cell;
    content: ' ';
    width: 50%;
    border-top: 1px solid #d4d4d4;
    position: relative;
    top: .7em;
	
}
.section-header span{
	margin:0px 20px;
}
@media (max-width: 600px) {
	.section-header span{
		margin:0px;
		white-space: initial;
	}
	.section-header:after, .section-header:before {
		width:10%;
	}
	.strip-item{
		max-height:125px;
	}
  .table{
    font-size:.75em!important;
  }
}

/* Create defaults that can be re-used via html */
[data-bg~='oddbird'] {
  --bg-color: hsla(189, 90%, 49%, 0.75);
  --bg-tint: hsla(360, 82%, 68%, 0.74);
  --bg-shade: hsla(188, 88%, 35%, 0.75);
}


/* We could also provide preset values to choose from */
[style*='--bg-'] {
  --mia-hue: 330;
  --mia-color: hsl(330, 100%, 29%);
}


/* 
The mixin logic
---------------
- I've exposed more variables than you would need to.
  Each additional variable provides another "argument" to the API.
  For patterns that require less customization, use fewer variables.
- Defining it on the * selector makes this globally available,
  but it could also be scoped to any selector you want.
  Scoping functions/mixins to the DOM is a feature that only CSS can provide.
*/
* {
  /* Setting a valid hue (any unitless number) will auto-set all the other values */
  --bg-hue: initial;
  
  /* Adjust the base saturation and lightness as desired */
  --bg-saturation: 50%;
  --bg-lightness: 40%;
  
  /* set angles for the tint and shade gradients */
  --bg-tint-angle: -20deg;
  --bg-shade-angle: -110deg;

  /* set amounts for default tint & shade */
  --bg-tint-amount: 20%;
  --bg-shade-amount: 20%;
  
  /* set indiviidual hues for the tint and shade */
  /* defaults are set by higher-level argument
     which alows for both simpler & more customized uses*/
  --bg-tint-hue: var(--bg-hue);
  --bg-shade-hue: var(--bg-hue);
  
  /* set the gradient positions all at once */
  --bg-gradient-stops: 10%;
  
  /* override tint/shade gradients directly */
  --bg-tint-start: var(--bg-gradient-stops);
  --bg-tint-end: var(--bg-tint-start);
  --bg-shade-start: var(--bg-gradient-stops);
  --bg-shade-end: var(--bg-shade-start);

  /* override tint/shade saturation & lightness directly */
  --bg-tint-saturation: var(--bg-saturation);
  --bg-tint-lightness: calc(var(--bg-lightness) + var(--bg-tint-amount));
  --bg-shade-saturation: var(--bg-saturation);
  --bg-shade-lightness: calc(var(--bg-lightness) - var(--bg-shade-amount));

  /* or override any individual color directly */
  --bg-color: hsl(var(--bg-hue), var(--bg-saturation), var(--bg-lightness));
  --bg-tint: hsla(var(--bg-tint-hue), var(--bg-tint-saturation), var(--bg-tint-lightness), 0.25);
  --bg-shade: hsla(var(--bg-shade-hue), var(--bg-shade-saturation), var(--bg-shade-lightness), 0.25);

  
  /* this is the internal logic that creates your angled tint/shade background */
  --bg-image: 
    linear-gradient(
      var(--bg-tint-angle),
      var(--bg-tint) var(--bg-tint-start),
      transparent var(--bg-tint-end)
    ),
    linear-gradient(
      var(--bg-shade-angle),
      var(--bg-shade) var(--bg-shade-start),
      transparent var(--bg-shade-end)
    )
  ;
  
  /* Creating a final "output" variable acts like a function return */
  --bg: var(--bg-image) var(--bg-color);
  
  /* Applying that value to a property creates a mixin */
  /* Since the initial return is invalid, nothing happens unless we set a --bg-hue */
  background: var(--bg);
}


/* Just the layout */
* { box-sizing: border-box; }


.info-box {padding: 8px;background: #F9F9F9;border-radius: 4px;margin-bottom: 10px;text-align:center;}


.states {
    fill: none;
    stroke: none;
    stroke-width: 1px;
    stroke-linejoin: round;
}
.mesh {
    fill: none;
    stroke: lightgrey;
    stroke-width: 1px;
    stroke-linejoin: round;
}
#canvas{
    width:100%;
    min-height:200px;
    background:#f9f9f9;
}
.caption{
}
.graphTitle{
    font-size:20px;
}
.graphSubTitle{
    font-size:14px;
}
@media (max-width: 600px) {
    .caption{
        font-size:8px;
    }
    .graphSubTitle{
        font-size:12px;
    }
}
/* Style northward tooltips differently */
.tip{
border: 1px solid steelblue;
padding: 5px;
position: absolute;
display: none;
background: white;
font-size:10px;
}
.cityText{font-size:.5em;font-size: .6em;font-weight: bold;
}
@media (max-width: 619px) {
    .cityText{display:none;}
    .graphTitle{display:none;}
}
.feature{
    stroke:lightgrey;
    stroke-width:1px;
}
.statistic-box{
    border-radius:4px;
    margin: 10px;
    padding: 30px;
    text-align:center;
}
.statistic-box-inner{
    border-radius:4px;
    padding:10px;
    background:white;
}
.statistic-box-inner span{
    font-size:40px;
    font-family: "Alfa Slab One";
    background: white;
}
.note{
  font-size:.6em;
  margin-top: -10px;
  margin-bottom: 10px
}
.axis { font: 14px sans-serif; }

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 4px;
}
.us_line {
  fill: none;
  stroke: orange;
  stroke-width: 4px;
}
.bottom-author-image {
    border-radius: 100px;
    height: 100px;
    float: left;
    margin-right: 20px;
}
.bar.negative{
    fill: hsla(360, 82%, 68%, 0.74);
}
.bar.positive{
    fill: #0dceef;
}
.axis-line {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

/*Summary Boxes*/
.ta-center {
    text-align: center;
    margin-bottom: 20px;
}
.ta-right {
    text-align: right;
    font-weight: 500;
}
@media (max-width: 1099px) {
  .snackscore{
    font-size:.75em;
  }
  .minor-score-align{
    line-height:20px;
  }
  .strip-item img{
    height:initial;
  }
  .summary .info-box{
    font-size:.7em;
  }
  .info-box img{
    height:25px;
  }
  .statistic-table{
    font-size:.75em;
  }
}
/*End Summary Boxes*/

/* Statistic Boxes Bottom Of City Page */
.rank-list-item{
  display:inline-block;
  width:100%;
  border-bottom: 1px solid #dddddd;
}
.rank{
  width:25%;
  text-align:center;
  float:left;
}
.list-item{
  width:75%;
  text-align:left;
  float:left;
  position:relative;
}
/*Bar Chart*/
.bar-chart{
  width:100%;
  border:1px solid #fff;
  background:#eee;
  margin-bottom:10px;
}
.bar{
  height:25px;
  line-height:25px;
  width:100%;
  border-bottom:1px solid #fff;
  text-align:right;
  position: relative;
}
.bar>div:hover{
  opacity:.5;
}
.bar>div{
  height:100%;
  float:left;
  white-space:nowrap; 
  padding-left: 10px;
}
@media (max-width: 1024px) {.bar{font-size:12px;}}

.ordered{
  color:white;
  text-align:left;
  position: absolute;
}
.unordered-bar1{background:#a6cee3;}.unordered-bar2{background:#1f78b4;}.unordered-bar3{background:#b2df8a;}.unordered-bar4{background:#33a02c;}.unordered-bar5{background:#fb9a99:}.unordered-bar6{background:#e31a1c;}.unordered-bar7{background:#fdbf6f;}.unordered-bar8{background:#ff7f00;}.unordered-bar9{background:#cab2d6;}.unordered-bar10{background:#6a3d9a;}
.ordered-bar10{background-color:rgba(58, 123, 213, 0.8);}.ordered-bar9{background-color:rgba(58, 123, 213, 0.8);}.ordered-bar8{background-color:rgba(58, 123, 213, 0.8);}.ordered-bar7{background-color:rgba(58, 123, 213, 0.8);}.ordered-bar6{background-color:rgba(58, 123, 213, 0.8);}.ordered-bar5{background-color:rgba(58, 123, 213, 0.8);}.ordered-bar4{background-color:rgba(58, 123, 213, 0.8);}.ordered-bar3{background-color:rgba(58, 123, 213, 0.8);}.ordered-bar2{background-color:rgba(58, 123, 213, 0.8);}.ordered-bar1{background-color:rgba(58, 123, 213, 0.8);}

.see-more{
  clear:both;
  padding:8px;
  border-radius:4px;
  color:white;
  background:#F0696A;
  border:none;
}
.sub-head{
  font-size:.75em;
  font-weight:lighter;
}
.title{
   border-bottom: 1px solid #eef1f5;
}
.side-words{
  padding-bottom:10px;
  padding-top:10px;
  border-bottom: 1px solid #dddddd;
}
/* End Statitics Box on City Page */

/*Info Cards*/
.card-outer{
  padding: 8px!important
}
.card{
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e7ecf1!important;
  border-radius:4px;
  margin: 30px 0px;
}
@media (max-width: 600px) {
  .card-outer{
    padding:2px;
  }
}
/* End Info Cards */