html {
  min-height:100vh;
}

body {
  min-height:100vh;
}

div.sidebar {
 max-height: 100%;
 overflow-y: auto;
 overflow-x: auto;
}

.below-nav {
 padding-top: 60px;
}


x3d.fullscreen {
 width: 100%;
 height: 100%;
}

x3d.background-grad {
 border: 0; 
 background: #D1DEF0; /* For browsers that do not support gradients */
 background: -webkit-linear-gradient(#D1DEF0, #828AAE); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(#D1DEF0, #828AAE); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#D1DEF0, #828AAE); /* For Firefox 3.6 to 15 */
 background: linear-gradient(#D1DEF0, #828AAE); /* Standard syntax */
}

x3d.background-geo {
 border: 0; 
 background: #ecf0f1; /* For browsers that do not support gradients */
 background: -webkit-linear-gradient(#ecf0f1, #717070); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(#ecf0f1, #717070); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#ecf0f1, #717070); /* For Firefox 3.6 to 15 */
 background: linear-gradient(#ecf0f1, #717070); /* Standard syntax */
}

x3d.background-white {
 border: 0; 
/*  background: white; */
}


#x3dom_small_axes {
 position: absolute;
 border: 0;
 width: 10%;
 height: 10%;
 bottom: 0%;
 right: 0%;
}

#div_warp {
 position: absolute;
 top: 60px;

 left:0;
 right:0;

 margin-left: auto;
 margin-right: auto;
  
}

#div_legend {
 right: 2.5%;
 top: 25%;
 height: 50%;
 width: 15%;
 position: absolute;
}

#tick_title {
  position: absolute;
  top: -40pt;
  right: 0;
}

#tick_units {
  position: absolute;
  top: -20pt;
  right: 0;
}

#tick_100 {
 position: absolute;
 top: 0%;
 width: 50%;
}

#tick_75 {
 position: absolute;
 top: 25%;
 transform: translateY(-25%);
 width: 50%;
}

#tick_50 {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 50%;
}

#tick_25 {
 position: absolute;
 bottom: 25%;
 transform: translateY(+25%);
 width: 50%;
}

#tick_0 {
 position: absolute;
 bottom: 0%;
 text-align: right;
 width: 50%;
}

#dropzone {
 width: 100%;
 height: 25%;
 background-color: #eeeeee;
 color: black;
 border: 3px dashed #717070;
 border-radius: 16px;
 cursor: default;
}

.footer {
  z-index: 10;
  color: white;
  background-color: #717070;
  background-image: url(../img/world-meshed-splash.svg);
  background-attachment: fixed;
  background-position: center 110%;
}

div.footer-nav {
  line-height: 1.2rem;

  a {
    color: white;
  }

  a:hover,
  .active > a, {
    border-color: white;
    color: white;
  }
}

a.white {
  color: white;
}

a.white:hover,
  .active > a, {
    border-color: white;
    color: white;
}

div.footer-caeplex {
  font-size: 80%;
  line-height: 0.75rem;

  a {
    color: white;
  }

  a:hover,
  .active > a, {
    border-color: white;
    color: white;
  }
}

.capitalize {
  text-transform: capitalize;
}


.bounce {
 -moz-animation: bounce 3s infinite;
 -webkit-animation: bounce 3s infinite;
 animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(+3rem);
    transform: translateY(+3rem);
  }
  60% {
    -moz-transform: translateY(+1.5rem);
    transform: translateY(+1.5rem);
  }
  85% {
    -moz-transform: translateY(+0.25rem);
    transform: translateY(+0.25rem);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(+3rem);
    transform: translateY(+3rem);
  }
  60% {
    -webkit-transform: translateY(+1.5rem);
    transform: translateY(+1.5rem);
  }
  85% {
    -webkit-transform: translateY(+0.25rem);
    transform: translateY(+0.25rem);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(+3rem);
    -ms-transform: translateY(+3rem);
    -webkit-transform: translateY(+3rem);
    transform: translateY(+3rem);
  }
  60% {
    -moz-transform: translateY(+1.5rem);
    -ms-transform: translateY(+1.5rem);
    -webkit-transform: translateY(+1.5rem);
    transform: translateY(+1.5rem);
  }
  85% {
    -moz-transform: translateY(+0.25rem);
    -ms-transform: translateY(+0.25rem);
    -webkit-transform: translateY(+0.25rem);
    transform: translateY(+0.25rem);
  }
}


/*
.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: goldenrod;
}*/



@media only screen and (max-width: 800px) {
	
	/* Force table to not be like tables anymore */
/* 	#stuff table,  */
/* 	#stuff thead,  */
/* 	#stuff tbody,  */
/* 	#stuff th,  */
	#stuff td, 
	#stuff tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#stuff thead tr { 
	  display: none;
/* 		position: absolute; */
/* 		top: -9999px; */
/* 		left: -9999px; */
	}
 
	#stuff tr { border: 1px solid #ccc; margin-bottom: 2rem; }
 
	#stuff td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ddd; 
		position: relative;
		padding-left: 35%; 
		white-space: normal;
		text-align:left;
	}
 
	#stuff td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
/* 		top: 0.5rem; */
		left: 0.5rem;
		width: 30%; 
/* 		padding-right: 2em;  */
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	#stuff td:before { content: attr(data-title); }
}