/* ----------------------------------------------------- NAVBAR-------------------------------------------- */

#navbar {
  background-color: #1a1616  !important;
  cursor: pointer;
}

.home-img {
  width: 8vh;
}

/* Home logo shows up in a larger relative size on larger devices */

@media (min-width: 768px) {
  .home-img {
    width: 15vh;
  }
}



/* Links in the navbar are targeted by ID due to override strong Bootstrap presets and use the IDs with jQuery */

#navGenLink {
  color: #6E403A !important;
}

#navGenLink:active {
  color: #7FB7BE !important;
}


.nav-item {
  font-family: 'MedievalSharp', cursive;
  font-size: 1.2em;
}

.navbar {
  height: 10vh;
}

.navbar-container {
  margin-bottom: 0;
  padding: 0;
  top: 0;
}

#resetLink {
  font-size: 1em !important;
  color: #7FB7BE !important;
}

@media (min-width: 768px) {
  #resetLink {
    font-size: 1.3em;
  }
}



/* -----------------------------------------------------LANDING PAGE-------------------------------------------- */

.db-img-lp {
  max-width: 100%;
  height: auto;
  margin-bottom: 10vh;
}

@media (min-width: 768px) {
  .db-img-lp {
    max-width: 70%;
    margin-bottom: 10vh;
  }
}



.lp-container {
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.background {
  background: url("../img/bg-img.jpg") no-repeat 70% scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* ----------------- The following media query re-positions the background picture to the center for tablet and larger devices */

@media (min-width: 769px) {
  .background {
    background: url("../img/bg-img.jpg") no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.main-container {
  position: relative;
  height: 100vh;
  padding-top: 28vh;
  margin-top: 0 !important;


}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

article {
  margin-top: 0 !important;
}

/*---------------------------- Button Styles------------------------------------------- */

.btn-outline-primary {
  color: #7FB7BE !important;
  border-color: #D3F3EE !important;
}

#main-btn {
  height: 13vh;
}

@media (min-width: 600px) {
  #main-btn {
    max-width: 50%;
    height: 15vh;
    border: 2px solid;
  }
}

.winter-pic {
  max-width: 50%;
}

.jumbotron {
  background-color: #7FB7BE;
}

html,
body {
  color: #d9d9d9 !important;
  background-color:   #262626;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  height: auto !important;
}

body {
  margin-top: 5vh;
}



/* -----------------------------------------------------TUTORIAL STYLING-------------------------------------------- */

.introjs-tooltip {
  color: #000;
  font-size: 1rem !important;
}

.introjs-helperLayer {
background-color: #fff;
margin-top: 2px;
background: transparent;
}

.introjs-overlay {
  opacity: 0 !important;
}

.introjs-helperLayer:before {
  opacity: 0;
  content: '';
  position: fixed;
  width: inherit;
  height: inherit;
  border-radius: 0.5em;
  box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
  opacity: 1;
}

.introjs-helperLayer:after {
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 1000;
}


/* -----------------------------------------------------GEN DASHBOARD GENERAL STYLING-------------------------------------------- */

h1 {
  font-family: 'MedievalSharp', cursive;
  font-size: 3em;
  padding-top: 10vh;
}

.db-img-db {
  max-width: 70%;
  margin-bottom: 10vh;
  margin-top: 12vh;
}

.btn-light {
  font-size: 0.8em;
}

.death-btn {
  margin-top: 2vh;
  margin-right: 2vw;
}

.rating-btn {
  margin-top: 2vh;
  margin-left: 2vw;
}

.db-logo {
  margin-top: 25vh;
  padding-left: 5vw;
  padding-right: 5vw;
}

.dashboard-container {
  margin-top: 15vh;
}

.number-box {

margin: 1rem;
font-size: 1rem;
border: 2px solid  #d9d9d9;
border-radius: 25px;
background-color:  #d9d9d9;
color: #1a1616;
padding: 0.5rem;
}

.number-display {
  font-size: 1.3rem;
  padding: 0.5rem;
  font-weight: 500;
  color: #6E403A;

}

.fas-display {
  padding: 0.5rem;
}

svg {
  margin-bottom: 5vh;
}




/* ----------------------------------------------------- Downward pointing Arrow -------------------------------------------- */

.arrow-container {
  margin-top: 15vh;
  margin-bottom: 25vh;
}

.arrow,
.arrow:before {
  position: absolute;
  left: 48.5%;
}

.arrow {
  width: 60px;
  height: 60px;
  top: 50%;
  margin: -20px 0 0 -20px;
  -webkit-transform: rotate(45deg);
  border-left: none;
  border-top: none;
  border-right: 2px  #d9d9d9 solid;
  border-bottom: 2px  #d9d9d9 solid;
}

.arrow:before {
  content: "";
  width: 40px;
  height: 40px;
  top: 50%;
  margin: -10px 0 0 -10px;
  border-left: none;
  border-top: none;
  border-right: 1px  #d9d9d9 solid;
  border-bottom: 1px  #d9d9d9 solid;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: arrow;
}

/* -----------------------------------------------------GRAPH STYLING-------------------------------------------- */

.graph-wrapper {
  padding: 0.8em;
  border-radius: 0.8em;
  background-color: #d9d9d9;
  opacity: 0.9;
  margin: 0.8em;
  text-align: center;
  color: #1a1616;
}

/* The following gives a darker background to row charts */

.graph-wrapper-rowchart {
  padding: 0.8em;
  border-radius: 0.8em;
  background-color: #696969;
  opacity: 0.9;
  margin: 0.8em;
  text-align: center;
  color: #fff;
}


.season-selector {
  margin-left: 42%;
  margin-bottom: 4vh;
}

h3{
  font-family: 'MedievalSharp', cursive;
  margin-bottom:4vh;
  margin-top: 2vh;
}

h4 {
  margin-bottom: 4vh;
  margin-left: 1vh;
}


.dc-legend-item {
  font-size: 1.1em;

}


.dc-chart .pie-slice.external {
  fill: #000;
}

svg {
  max-width: 90%;
}





/* -----------------------------------------------------DEATH DASHBOARD-------------------------------------------- */

.death-container {
  margin-top: 20vh;
}


/* -----------------------------------------------------Back to top arrow -------------------------------------------- */

.to-top {
	color: #d9d9d9;
  padding-top: 1.8em;
  margin: 2em;
  text-align: center;
	display: inline-block; /* or block */
	position: relative;
  border-color: #d9d9d9;
  font-size: 120%;
  text-decoration: none !important;
	transition: all 0.3s ease-out;
}
.to-top:before {
	content: "▲";
	font-size: 0.9em;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -0.7em;
	border: solid 0.13em #d9d9d9;
	border-radius: 10em;
	width: 1.4em;
	height: 1.4em;
	line-height: 1.3em;
	border-color: inherit;
	transition: transform 0.5s ease-in;
}
.to-top:hover {
	color: #7FB7BE;
	border-color: #7FB7BE;
}
.to-top:hover:before {
	transform: rotate(360deg);
}


/* -------------------------------------------------- FOOOTER ------------------------------------------------*/

.footer {
  height: auto;
  background-color: #1a1616;
  color: #7FB7BE;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}

.github-logo {
  color:  #d9d9d9;
  font-size: 1.5em;
  transition: all .2s ease-in-out
}

.github-logo:focus,
.github-logo:hover {
  color: #7FB7BE;
}

@media (min-width: 768px) {
  .github-logo {
      font-size: 2em;
  }
}






/* Animista classes and keyframes */

.flicker-in-1 {
  -webkit-animation: flicker-in-1 2s linear both;
  animation: flicker-in-1 2s linear both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-5-17 12:56:0
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * @animation flicker-in-1
 * ----------------------------------------
 */
@-webkit-keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  10.1% {
    opacity: 1;
  }

  10.2% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  20.1% {
    opacity: 1;
  }

  20.6% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  30.1% {
    opacity: 1;
  }

  30.5% {
    opacity: 1;
  }

  30.6% {
    opacity: 0;
  }

  45% {
    opacity: 0;
  }

  45.1% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  55.1% {
    opacity: 0;
  }

  57% {
    opacity: 0;
  }

  57.1% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  60.1% {
    opacity: 0;
  }

  65% {
    opacity: 0;
  }

  65.1% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  75.1% {
    opacity: 0;
  }

  77% {
    opacity: 0;
  }

  77.1% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  85.1% {
    opacity: 0;
  }

  86% {
    opacity: 0;
  }

  86.1% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  10.1% {
    opacity: 1;
  }

  10.2% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  20.1% {
    opacity: 1;
  }

  20.6% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  30.1% {
    opacity: 1;
  }

  30.5% {
    opacity: 1;
  }

  30.6% {
    opacity: 0;
  }

  45% {
    opacity: 0;
  }

  45.1% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  55.1% {
    opacity: 0;
  }

  57% {
    opacity: 0;
  }

  57.1% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  60.1% {
    opacity: 0;
  }

  65% {
    opacity: 0;
  }

  65.1% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  75.1% {
    opacity: 0;
  }

  77% {
    opacity: 0;
  }

  77.1% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  85.1% {
    opacity: 0;
  }

  86% {
    opacity: 0;
  }

  86.1% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes arrow {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-10px, -10px);
  }
}