@charset "UTF-8";
/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: 'relative-mono10pitch';
  src: url("../fonts/relative-mono10pitch.eot");
  src: url("../fonts/relative-mono10pitch.eot") format("embedded-opentype"), url("../fonts/relative-mono10pitch.html") format("woff2"), url("../fonts/relative-mono10pitch.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* General Layer Settings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.show-desktop {
  display: none;
}

@media (min-width: 992px) {
  .show-desktop {
    display: block;
  }
}

.show-mobile {
  display: block;
  height: 0px;
  visibility: hidden;
}

@media (min-width: 992px) {
  .show-mobile {
    display: none;
  }
}

.layer-intro-txt {
  background-color: black;
  color: #FFF;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

/* General Drag Settings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#drag-container-desktop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.draggable {
  position: absolute;
  z-index: 100;
}

.panel-drag {
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
  color: black;
  width: 377px;
  max-height: 640px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.panel-drag-head {
  background-color: #F5F5F5;
  border-radius: 5px 5px 0px 0px;
  height: 40px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.panel-drag-head img {
  margin: 10px;
}

.panel-drag-content {
  background-color: #FFF;
  max-height: 600px;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-y: auto;
}

/* Directions
––––––––––––––––––––––––––––––––––––––– */
#directions-panel {
  padding: 0px;
  padding-top: 10px;
}

/* ALL: vue.js
––––––––––––––––––––––––––––––––––––––– */
.tweet-container, .news-container, .flickr-container, .places-container, .unesco-container, .interpol-container {
  background-color: #F5F5F5;
  color: black;
  border-radius: 5px;
  margin-bottom: 10px;
  word-break: break-word;
}

a.source {
  color: #2196F3;
}

a.source:hover {
  text-decoration: underline;
}

/* ALL DRAG
––––––––––––––––––––––––––––––––––––––– */
#drag-flickr, #drag-places, #drag-twitter, #drag-news, #drag-unesco, #drag-interpol, #drag-directions {
  display: none;
  word-break: break-word;

}

.drag-img {
  border-radius: 5px 5px 0px 0px;
  width: 100%;
}

.drag-text {
  padding: 10px;
  word-break: break-word;

}

.drag-text .bottom-space {
  padding-bottom: 10px;
}

/* Individual Drag Positions
––––––––––––––––––––––––––––––––––––––– */
#drag-directions {
  top: 165px;
  left: 10px;
}

#drag-flickr {
  top: 165px;
  left: 55px;
}

#drag-interpol {
  top: 165px;
  left: 100px;
}

#drag-places {
  top: 165px;
  left: 145px;
}

#drag-news {
  top: 165px;
  left: 190px;
}

#drag-twitter {
  top: 165px;
  left: 235px;
}

#drag-unesco {
  top: 165px;
  left: 280px;
}

/* General Drag/Resize Settings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.resize-container {
  width: 100%;
  height: 0px;
  position: absolute;
  bottom: 0px;
  z-index: 100;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.resize-drag {
  width: 100%;
  height: 50vh;
  position: absolute;
  bottom: 0px;
  /* This makes things *much* easier */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.resize-fix {
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #FFF;
}

#touch-bar {
  background-color: #F5F5F5;
  border-bottom: 1px solid white;
}

#touch-bar img {
  display: block;
  margin: 0px auto;
  padding: 4px 0px;
}

.resize-head {
  background-color: #F5F5F5;
  height: 40px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0px 5px;
}

.resize-content {
  padding: 10px;
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 40px);
}

/* Icon Hover Functionality
––––––––––––––––––––––––––––––––––––––– */
.svg-color {
  fill: #757575;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.resize-head-icon {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  padding: 5px 5px 0px 5px;
  cursor: pointer;
}

.resize-head-icon:hover {
  cursor: pointer;
}

.resize-head-icon:hover svg .svg-color {
  fill: black;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.active-icon .svg-color {
  fill: black;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Icon Show / Hide classes
––––––––––––––––––––––––––––––––––––––– */
.mobile-content-item {
  display: none;
}
/*# sourceMappingURL=layers.css.map */