/*.main-menu .fa-2x {
    font-size: 2em;
    }
    .main-menu .fa {
    position: relative;
    display: table-cell;
    width: 60px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size:20px;
    }
    
    
    .main-menu:hover,nav-bar.main-menu.expanded {
    width:150px;
    overflow:visible;
    }
    
    .main-menu {
    background:#212121;
    border-right:1px solid #e5e5e5;
    position:absolute;
    top: 51px;
    bottom:0;
    height:92.3%;
    right:-1px;
    width:51px;
    overflow:hidden;
    -webkit-transition:width .05s linear;
    transition:width .05s linear;
    -webkit-transform:translateZ(0) scale(1,1);
    z-index:1000;
    }
    
    .main-menu>ul {
    margin:7px 0;
    }
    
    .main-menu li {
    position:relative;
    display:block;
    width:250px;
    }
    
    .main-menu li>a {
    position:relative;
    display:table;
    border-collapse:collapse;
    border-spacing:0;
    color:#999;
     font-family: arial;
    font-size: 14px;
    text-decoration:none;
    -webkit-transform:translateZ(0) scale(1,1);
    -webkit-transition:all .1s linear;
    transition:all .1s linear;
      
    }
    
    .main-menu .nav-icon {
    position:relative;
    display:table-cell;
    width:51px;
    height:36px;
    text-align:center;
    vertical-align:middle;
    font-size:18px;
    }
    
    .main-menu .nav-text {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:190px;
      font-family: 'Titillium Web', sans-serif;
    }
    
    .main-menu>ul.logout {
    position:absolute;
    left:0;
    bottom:0;
    }
    
    .no-touch .scrollable.hover {
    overflow-y:hidden;
    }
    
    .no-touch .scrollable.hover:hover {
    overflow-y:auto;
    overflow:visible;
    }
    
    a:hover,a:focus {
    text-decoration:none;
    }
    
    nav-bar {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
    }
    
    nav-bar ul,nav-bar li {
    outline:0;
    margin:0;
    padding:0;
    }
    .main-menu li:hover>a,nav-bar.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav-bar.dashboard-menu ul li:hover a,.dashboard-page nav-bar.dashboard-menu ul li.active a {
    color:#fff;
    background-color:#5fa2db;
    }
    .area {
    float: left;
    background: #e2e2e2;
    width: 100%;
    height: 100%;
    }*/

    .side-bar[data-position="right"]{
        position: absolute;
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        height:92.3%;
        width: 64px;
        background-color: #43a;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      
      .side-bar[data-position="left"]{
        position: absolute;
        left: 400px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        min-height: 100%;
        width: 64px;
        background-color: #2a2a2a;
      }
      
      div.item {
        color: white;
        height: 64px;
        width: 64px;
        background-color: #2a2a2a;
        line-height: 64px;
        text-align: center;
        font-size: 15px;
      }
      
      div.item.bottom {
        position: absolute;
        bottom: 0;
        left:0;
      }
      
      div.heading {
        font-size: 16px;
        font-family: "OpenSans", sans-serif;
        color: white;
        height: 44px;
        line-height: 44px;
        font-weight: 100;
        font-size:1.5rem;
        text-align:center;
        padding: 10px;
        background-color: #333;
      }
      
      div.item:hover {
        background-color: white ;
        color:black;
        border: solid 1px rgba(160, 160, 160, 0.3);
        cursor: pointer;
      }
      
      div.side-panel {
        z-index: 9;
        left: -400px;
        position: absolute;
        min-width: 400px;
        height:92.3%;
        
        background-color: #FFF;
        color: #777;
        
        display: inline-block;
      }
      
      div.side-panel.open{
        animation-name: sidebar-open;
        animation-duration: .25s;
        left: 0;
      }
      
      div.side-panel.close{
        animation-name: sidebar-close;
        animation-duration: .25s;
        left: -400px;
      }
      .paneltext{
        font-size: 14px;
        font-family: "OpenSans", sans-serif;
        
        height: 79vh;
 
        padding: 10px;
        background: rgba(255, 255, 255, 0);
        color: #777;
        overflow-y: scroll;
      }
      /* Keyframes */
      @keyframes sidebar-open {
        0% {
          left: -400px;
        }
        
        100% {
          left: 0;
        }
      }
      
      @keyframes sidebar-close {
        0% {
          left: 0;
        }
        
        100% {
          left: -400px;
        }
      }
.geomap{
    position:fixed;
    background-color:white;
    background-image: url(https://i.gifer.com/7zxq.gif);
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: center;
    color: #50595E;
    width: 100vw;
    height: 100vh;
    z-index: -10000;
    top:0;

    margin-top:0px;
    margin-left: 64px;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;


      }
    
     /* (Optional) Apply a "closed-hand" cursor during drag operation. */
    .geomap:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }
      
    /*Controls tooltip*/
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
       
      }
      
      .tooltip .tooltiptext {
        visibility: hidden;
        width: 200px;
        background-color: rgba(0, 0, 0, 0);
        color: black;
       
        border-radius: 6px;
        padding: 0px 0;
        position: absolute;
        z-index: 1;
        top: 0px;
        left: 200%;
        font-size: 15px;
        margin-left: -55px;
        text-align: left;
        padding-left:5px;
        
        /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
        opacity: 0;
        transition: opacity 1s;
      }
      .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent;
      }
      .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
      }

/*Cards*/



.story-tabs {
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  

  background: rgba(148, 26, 26, 0);
  width: 95%;
  height:79vh;

  min-width: 240px;
  
}
.story-tabs input[name=tab-control] {
  display: none;
}
.story-tabs .content section h2,
.story-tabs ul li label {
    font-family: "OpenSans", sans-serif;
    font-weight: normal;
  font-size: 0.9em;
  color: #50595E;
}
.story-tabs ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
.story-tabs ul li {
  box-sizing: border-box;
  flex: 1;
  width: 25%;
  padding: 0 10px;
  text-align: center;
}
.story-tabs ul li label {
  transition: all 0.3s ease-in-out;
  color: #50595E;
  padding: 5px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.story-tabs ul li label br {
  display: none;
}
.story-tabs .content section{
    font-size: 14px;
    line-height: 22px;
    font-style: italic;
    text-align: justify;
    margin: 0;
    color: #777;
    background-color: white;
    padding-left: 15px;
    border-left: 8px solid rgba(63, 148, 148, 0.1);
}
.story-tabs ul li label svg {
  color: #50595E;
  height: 1.2em;
  vertical-align: bottom;
  margin-right: 0.2em;
  transition: all 0.2s ease-in-out;
}
.story-tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
  outline: 0;
  color: #50595E;
}
.story-tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg {
    color: #50595E;
}
.story-tabs .slider {
  position: relative;
  width: 25%;
  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.story-tabs .slider .indicator {
  position: relative;
  width: 50px;
  max-width: 100%;
  margin: 0 auto;
  height: 4px;
  background: #2a2a2a;
  border-radius: 1px;
}
.story-tabs .content {
  margin-top: 30px;
}
.story-tabs .content section {
  display: none;
  -webkit-animation-name: content;
          animation-name: content;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  line-height: 1.4;
}
.story-tabs .content section h2 {
  color: #2a2a2a;
  display: none;
}
.story-tabs .content section h2::after {
  content: "";
  position: relative;
  display: block;
  width: 30px;
  height: 3px;
  background: #2a2a2a;
  margin-top: 5px;
  left: 1px;
}
.story-tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
  cursor: default;
  color: #2a2a2a;
}
.story-tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg {
  fill: #2a2a2a;
}
@media (max-width: 600px) {
  .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
    background: rgba(0, 0, 0, 0.08);
  }
}
.story-tabs input[name=tab-control]:nth-of-type(1):checked ~ .slider {
  transform: translateX(0%);
}
.story-tabs input[name=tab-control]:nth-of-type(1):checked ~ .content > section:nth-child(1) {
  display: block;
}
.story-tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
  cursor: default;
  color: #2a2a2a;
}
.story-tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg {
  fill: #2a2a2a;
}
@media (max-width: 600px) {
  .story-tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
    background: rgba(0, 0, 0, 0.08);
  }
}
.story-tabs input[name=tab-control]:nth-of-type(2):checked ~ .slider {
  transform: translateX(100%);
}
.story-tabs input[name=tab-control]:nth-of-type(2):checked ~ .content > section:nth-child(2) {
  display: block;
}
.story-tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
  cursor: default;
  color: #2a2a2a;
}
.story-tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg {
  fill: #2a2a2a;
}
@media (max-width: 600px) {
  .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
    background: rgba(0, 0, 0, 0.08);
  }
}
.story-tabs input[name=tab-control]:nth-of-type(3):checked ~ .slider {
  transform: translateX(200%);
}
.story-tabs input[name=tab-control]:nth-of-type(3):checked ~ .content > section:nth-child(3) {
  display: block;
}
.story-tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
  cursor: default;
  color: #2a2a2a;
}
.story-tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg {
  fill: #2a2a2a;
}
@media (max-width: 600px) {
  .tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
    background: rgba(0, 0, 0, 0.08);
  }
}
.story-tabs input[name=tab-control]:nth-of-type(4):checked ~ .slider {
  transform: translateX(300%);
}
.story-tabs input[name=tab-control]:nth-of-type(4):checked ~ .content > section:nth-child(4) {
  display: block;
}
@-webkit-keyframes content {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes content {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@media (max-width: 1000px) {
  .story-tabs ul li label {
    white-space: initial;
  }
  .tabs ul li label br {
    display: initial;
  }
  .story-tabs ul li label svg {
    height: 1.5em;
  }
}
@media (max-width: 600px) {
  .story-tabs ul li label {
    padding: 5px;
    border-radius: 5px;
  }
  .story-tabs ul li label span {
    display: none;
  }
  .story-tabs .slider {
    display: none;
  }
  .story-tabs .content {
    margin-top: 20px;
  }
  .story-tabs .content section h2 {
    display: block;
  }
}