/* font */
@font-face {
  font-family: 'fontello';
  src: url("../resources/font/fontello.eot?15363580");
  src: url("../resources/font/fontello.eot?15363580#iefix") format("embedded-opentype"), url("../resources/font/fontello.woff?15363580") format("woff"), url("../resources/font/fontello.ttf?15363580") format("truetype"), url("../resources/font/fontello.svg?15363580#fontello") format("svg");
  font-weight: normal;
  font-style: normal; }
.leaflet-label,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  font-family: 'Roboto', sans-serif !important;
  font-weight: bold;
  font-size: 13px;
  background: rgba(250, 250, 250, 0.9);
  border-radius: 3px;
  border-color: white;
  box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.4); }

.leaflet-popup-content, .leaflet-label {
  margin: 0; }

.leaflet-popup-content p, .leaflet-label p {
  margin: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center; }

.mobile .leaflet-top.leaflet-right {
  display: none; }

.mobile .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.3); }

.social-icon {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  color: #989898;
  cursor: pointer;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* You can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

/* defines .social-icon */
.al-qaeda {
  background-color: #92b766;
  color: white; }

.islamic-state {
  background-color: #e1ab48;
  color: white; }

.boko-haram {
  background-color: #db606a;
  color: white; }

.taliban {
  background-color: #bb75c5;
  color: white; }

.pkk {
  background-color: #d1713d;
  color: white; }

.al-shabaab {
  background-color: #7289cc;
  color: white; }

.other {
  background-color: #a99880;
  color: white; }

.unknown {
  background-color: #aaaaaa;
  color: white; }

/* defines colors for perpetrator classes e.g. .boko-haram */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  /* note: instead of using width: 100%; height: 100%; using the following
           because twitter embedded browser in iOS doesn't seem to handle
           height: 100%... */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */ }

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  background-color: #FFF; }

div.adsbox {
  display: none; }

a {
  cursor: pointer; }

/******************************************************
 *************** re-usable classes ********************
 ******************************************************/
.mobile-strip {
  color: white;
  background-color: black;
  display: none;
  padding: 10px;
  font-size: 20px;
  font-weight: 400; }
  .mobile .mobile-strip {
    display: block; }

a.clear-filter {
  font-size: 30px; }

a.clear-filter:before {
  content: "\00d7"; }

div.select-container {
  display: flex;
  color: white;
  padding: 10px; }
  div.select-container select.select-perpetrator {
    font-family: 'Roboto', sans-serif;
    flex: 1;
    padding: 5px;
    font-size: 18px; }
  div.select-container a.clear-filter {
    flex: 0;
    margin-left: 10px;
    visibility: hidden; }
    .state-filter-perpetrator div.select-container a.clear-filter {
      visibility: visible; }

div.filter-display {
  display: flex;
  font-size: 18px;
  color: white; }
  div.filter-display div.filter-text {
    padding-left: 10px;
    flex: 1; }
  div.filter-display a.clear-filter {
    flex: 0; }

.filter-display.filter-display-location {
  /* note: for some reason, toggling the display
     causes flexbox to behave all wonky, so I'm 
     having to use a combination of padding and visibility
     to get the effect */
  visibility: hidden;
  padding: 0px; }
  .filter-display.filter-display-location a.clear-filter {
    display: none; }
    .state-filter-location .filter-display.filter-display-location a.clear-filter {
      display: block; }
  .state-filter-location .filter-display.filter-display-location {
    visibility: visible;
    padding: 10px; }

.totals-text {
  padding-top: 10px;
  padding-left: 20px; }

/*********************************************************
 ******************* specific elements *******************
 ********************************************************/
#header {
  position: relative;
  background-color: #6F6F6F;
  width: 100%;
  color: white;
  display: flex;
  align-items: center;
  padding: 10px 20px 10px 20px; }
  #header .bold-yellow {
    color: #FFEC4E;
    font-weight: 400; }
  #header h1 {
    margin: 0px;
    font-weight: 300; }
  #header h1#title {
    flex: 1 0 auto; }
  #header h1#totals {
    padding-left: 30px;
    padding-right: 30px;
    flex: 1 1 auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  #header .social-button-bar {
    flex: 1 0 160px;
    display: flex;
    justify-content: flex-end; }
    #header .social-button-bar .story-map-link {
      color: #989898;
      font-size: 1em;
      font-weight: 400;
      text-decoration: none; }
    #header .social-button-bar .social-icon:hover {
      color: #d6d6d6; }
    #header .social-button-bar .story-map-link:hover {
      color: #d6d6d6;
      text-decoration: underline; }
  .mobile #header {
    display: none; }

div#mobile-header.mobile-strip {
  font-size: 24px; }
  div#mobile-header.mobile-strip .social-button-bar {
    position: absolute;
    display: inline;
    text-align: right;
    right: 8px; }
  div#mobile-header.mobile-strip .social-icon {
    margin: 2px auto; }
  div#mobile-header.mobile-strip .bold-yellow {
    color: #FFEC4E;
    font-weight: 400; }

div#mobile-footer.mobile-strip {
  text-align: center; }
  div#mobile-footer.mobile-strip a {
    margin-left: 20px;
    margin-right: 20px;
    color: #6F6F6F; }
  .mobile-state-about div#mobile-footer.mobile-strip a#mobile-link-about.mobile-link {
    color: white; }
  .mobile-state-list div#mobile-footer.mobile-strip a#mobile-link-list.mobile-link {
    color: white; }
  .mobile-state-map div#mobile-footer.mobile-strip a#mobile-link-map.mobile-link {
    color: white; }

div#mobile-filter-container {
  padding: 10px;
  background-color: black;
  color: white;
  display: none; }
  .mobile div#mobile-filter-container {
    display: block; }
  .mobile.mobile-state-about div#mobile-filter-container {
    display: none; }

#meat {
  width: 100%;
  flex: 1;
  /* same as flex: 1 1 auto; */
  display: flex;
  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */
  position: relative;
  overflow: hidden;
  /* about menu */
  /* info-pane */ }
  #meat #map {
    flex: 1;
    overflow: hidden;
    background-color: #232227; }
    #meat #map .home {
      width: 18px;
      height: 18px;
      margin-top: 3px;
      margin-left: -2px; }
    #meat #map .easy-button-button {
      cursor: pointer; }
  #meat #button-about {
    position: absolute;
    z-index: 1000;
    top: 12px;
    right: 60px;
    color: white;
    background-color: #6F6F6F;
    padding: 7px;
    cursor: pointer; }
    .mobile #meat #button-about {
      display: none; }
  #meat #button-about:hover {
    background-color: #FFEC4E;
    color: #505050; }
  #meat #veil {
    position: absolute;
    background-color: black;
    opacity: 0.7;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 3900;
    display: none; }
    .about #meat #veil {
      display: block; }
    .mobile.about #meat #veil {
      display: none; }
  #meat #about {
    padding: 20px;
    padding-top: 10px;
    z-index: 4000;
    position: absolute;
    background-color: #505050;
    color: white;
    width: 700px;
    left: 50%;
    margin-left: -300px;
    height: calc(100% - 200px);
    top: 100px;
    display: none;
    overflow: hidden; }
    #meat #about #dismiss-about {
      font-size: 30px;
      float: right;
      margin-bottom: 10px; }
    #meat #about #inner {
      width: 100%;
      height: calc(100% - 60px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0px 20px; }
    #meat #about #contribute-button-wrapper {
      width: 100%;
      display: inline-block;
      text-align: center;
      padding: 20px 0px;
      margin: auto; }
    #meat #about #contribute-button {
      font-size: 120%;
      background-color: #6F6F6F;
      color: #fff;
      padding: 5px 15px;
      text-decoration: none; }
    #meat #about #contribute-button:hover {
      background-color: #FFEC4E;
      color: #505050; }
    #meat #about .about-logo-container {
      position: relative;
      padding: 20px;
      text-align: center; }
      #meat #about .about-logo-container a {
        text-decoration: none; }
    #meat #about .about-logo {
      max-width: 100%;
      max-height: 100%;
      display: inline-block;
      padding: 20px; }
    .about #meat #about {
      display: block; }
    .mobile #meat #about {
      top: 0px;
      left: 0px;
      margin-left: 0px;
      width: 100%;
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; }
      .mobile #meat #about #dismiss-about {
        display: none; }
      .mobile #meat #about #inner {
        height: 100%;
        overflow: visible;
        -webkit-overflow-scrolling: none; }
    .mobile.about #meat #about {
      display: none; }
    .mobile.mobile-state-about #meat #about {
      display: block; }
    #meat #about a {
      color: white; }
    #meat #about a:visited {
      color: white; }
  #meat #info-pane {
    position: absolute;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    width: 33vw;
    max-height: calc(100vh - 100px);
    font-size: 17px;
    letter-spacing: 0.1px;
    line-height: 22px;
    top: 20px;
    left: 20px;
    min-width: 350px;
    max-width: 500px;
    color: white;
    /* filter-container */
    /* date-banner */
    /* itemized-container */ }
    .mobile #meat #info-pane {
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      max-width: none;
      background-color: rgba(0, 0, 0, 0.7);
      max-height: 100%; }
    .mobile.mobile-state-map #meat #info-pane {
      display: none; }
    #meat #info-pane div#filter-container {
      padding: 10px;
      background-color: black; }
      .mobile #meat #info-pane div#filter-container {
        display: none; }
    #meat #info-pane #date-banner {
      background-color: gray;
      color: white;
      padding: 10px;
      height: 40px;
      visibility: hidden; }
      .loaded #meat #info-pane #date-banner {
        visibility: visible; }
    #meat #info-pane #itemized-container {
      padding: 0px;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      flex-grow: 1;
      /* itemized */
      /* this file has all the scss for the actual itemized table */ }
      .mobile #meat #info-pane #itemized-container {
        max-height: calc(100vh - 140px); }
      .state-filter.mobile #meat #info-pane #itemized-container {
        height: 100%; }
      #meat #info-pane #itemized-container #itemized {
        width: 100%;
        padding: 0px;
        margin-top: 0px; }
        #meat #info-pane #itemized-container #itemized li.day {
          width: 100%; }
          #meat #info-pane #itemized-container #itemized li.day a.event-date {
            display: inline-block;
            width: 100%;
            background-color: gray;
            color: white;
            padding: 10px; }
          #meat #info-pane #itemized-container #itemized li.day ul.activities {
            list-style-type: none;
            -webkit-margin-before: 0px;
            -webkit-margin-after: 0px;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-padding-start: 0px;
            -moz-margin-start: 0px;
            -moz-margin-end: 0px;
            -moz-padding-start: 0px;
            -moz-padding-end: 0px; }
            #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity {
              padding: 10px;
              background-color: rgba(59, 59, 59, 0.4);
              cursor: pointer;
              overflow: hidden;
              border-left: 10px solid rgba(59, 59, 59, 0.4); }
              .mobile #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity {
                border-left: 10px solid rgba(59, 59, 59, 0); }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity .caption {
                float: left;
                margin-right: 5px; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity .location {
                font-weight: 400; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity .group {
                font-weight: 400; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity .fatalities {
                font-weight: 400; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity .details {
                font-style: italic;
                font-weight: 300;
                padding: 20px;
                display: none; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active {
                background-color: #2d2d2d;
                border-left: 10px solid yellow;
                cursor: default; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active .details {
                  display: block; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active .group {
                  text-decoration: underline;
                  cursor: pointer; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active .location {
                  text-decoration: underline;
                  cursor: pointer; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active.islamic-state {
                  border-left: 10px solid #e1ab48; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active.taliban {
                  border-left: 10px solid #bb75c5; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active.al-qaeda {
                  border-left: 10px solid #92b766; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active.boko-haram {
                  border-left: 10px solid #db606a; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active.al-shabaab {
                  border-left: 10px solid #7289cc; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active.pkk {
                  border-left: 10px solid #d1713d; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active.unknown {
                  border-left: 10px solid #aaaaaa; }
                #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active.other {
                  border-left: 10px solid #a99880; }
                  #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.active.other .group {
                    text-decoration: none;
                    cursor: default; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.taliban .group {
                color: #bb75c5; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.islamic-state .group {
                color: #e1ab48; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.al-qaeda .group {
                color: #92b766; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.boko-haram .group {
                color: #db606a; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.al-shabaab .group {
                color: #7289cc; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.pkk .group {
                color: #d1713d; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.unknown .group {
                color: #aaaaaa; }
              #meat #info-pane #itemized-container #itemized li.day ul.activities li.activity.other .group {
                color: #a99880; }
        #meat #info-pane #itemized-container #itemized li.day:first-child a.event-date {
          display: none; }

/* meat */

/*# sourceMappingURL=main.css.map */