body {
  background-color: #D8DCDC;
  height: 100%;
}

@media (min-width: 100px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
}

.btn-default {
  color: gray;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0; 
}

.navbar-brand {
  letter-spacing: 0.9px;
}

.navbar-default {
    background: #111;
    border-radius: 0;
    border-color: #111;

}

.navbar-default .navbar-brand {
  color: #fff;
  font-size: 28px;
}

@media (max-width: 550px)
{
    .navbar-default .navbar-brand {
        font-size: 20px;
		letter-spacing: 1.2px;
    } 
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #fff;
}

.modal-dialog, .modal-content
{
   border-radius: 0px; 
}

.btn-primary 
{
    border-radius: 0px;
}

.panel-title {
  margin-top: 6px;
  font-size: 16px;
  font-family: Open Sans;

}


.panel-default {
  margin-left: 5em;
  margin-right: 5em;
}

.panel 
{
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);   
}


@media (max-width: 550px)
{
    .panel-default {
      border-color: #ddd;
      margin-left: 1em;
      margin-right: 1em;
    }
     
    .panel, .panel-group
    {
        width: auto;   
    }
    
}

.panel-primary {
  border-color: #D8DCDC ;
  width: 90%;
  margin-left: 5%; 
  margin-bottom: 5%; 
  border-radius: 0; 
}

.panel-primary > .panel-heading {
  color: #111;
  background-color: transparent;
  border-color: transparent;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #111;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #111;
}

.tooltip-inner 
{
   border-radius: 0;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: transparent; /* black */
  border-width: 0 5px 5px;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: transparent; /* black */
  border-width: 0 5px 5px;
}

.information-text 
{
    font-family: Tahoma;
    line-height: 30px;
	word-wrap:break-word; 	
}


#loading_gif{
	margin-top: -10px;
	margin-bottom: -10px;
	margin-left:38%;

}
.loading_block{
	background-color: #088D93;
	border:0px solid #3B5998;
	float:left;
	height:30px;
	margin-left:5px;
	width:8px;
    opacity:0.1;
	
	
	-webkit-transform:scale(0.7);
	-moz-transform:scale(0.7);
	-ms-transform:scale(0.7);
	-o-transform:scale(0.7);
	
	animation-name: loading_gif;
	-webkit-animation-name: loading_gif;
	-moz-animation-name: loading_gif;
	-ms-animation-name: loading_gif;
	-o-animation-name: loading_gif;
 	
animation-duration: 1s;
 	-webkit-animation-duration: 1s;
 	-moz-animation-duration: 1s;
 	-ms-animation-duration: 1s;
 	-o-animation-duration: 1s;

animation-iteration-count: infinite; 	
 	-webkit-animation-iteration-count: infinite;
 	-moz-animation-iteration-count: infinite;
 	-ms-animation-iteration-count: infinite;
 	-o-animation-iteration-count: infinite;
 	
animation-direction: linear;
 	-webkit-animation-direction: linear;
 	-moz-animation-direction: linear;
 	-ms-animation-direction: linear;
 	-o-animation-direction: linear;
	
	}
#block_1{
 	animation-delay: .3s;
 	-webkit-animation-delay: .3s;
 	-moz-animation-delay: .3s;
 	-ms-animation-delay: .3s;
 	-o-animation-delay: .3s;
 }
#block_2{
 	animation-delay: .4s;
 	-webkit-animation-delay: .4s;
 	-moz-animation-delay: .4s;
 	-ms-animation-delay: .4s;
 	-o-animation-delay: .4s;
}
#block_3{
 	animation-delay: .5s;
 	-webkit-animation-delay: .5s;
 	-moz-animation-delay: .5s;
 	-ms-animation-delay: .5s;
 	-o-animation-delay: .5s;
}
#block_4{
 	animation-delay: .6s;
 	-webkit-animation-delay: .6s;
 	-moz-animation-delay: .6s;
 	-ms-animation-delay: .6s;
 	-o-animation-delay: .6s;
}
#block_5{
 	animation-delay: .7s;
 	-webkit-animation-delay: .7s;
 	-moz-animation-delay: .7s;
 	-ms-animation-delay: .7s;
 	-o-animation-delay: .7s;
}

@keyframes loading_gif{	
	0%{transform: scale(1.2); opacity:1;}	
	100%{transform: scale(0.7);	opacity:0.1;}	
}
@-webkit-keyframes loading_gif{	
	0%{-webkit-transform: scale(1.2); opacity:1;}	
	100%{-webkit-transform: scale(0.7); opacity:0.1;}	
}
@-moz-keyframes loading_gif{	
	0%{-moz-transform: scale(1.2); opacity:1;}	
	100%{-moz-transform: scale(0.7); opacity:0.1;}	
}
@-ms-keyframes loading_gif{	
	0%{-ms-transform: scale(1.2); opacity:1;}	
	100%{-ms-transform: scale(0.7); opacity:0.1;}	
}
@-o-keyframes loading_gif{	
	0%{-o-transform: scale(1.2); opacity:1;}	
	100%{-o-transform: scale(0.7); opacity:0.1;}	
}


/* progress bar */
progress,          /* All HTML5 progress enabled browsers */
progress[role]     /* polyfill */
{

	/* Turns off styling - not usually needed, but good to know. */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	/* gets rid of default border in Firefox and Opera. */ 
	border: none;

	/* Needs to be in here for Safari polyfill so background images work as expected. */
	background-size: auto;
	
	/* Dimensions */
	width: 80%;
	height: 10px;
	
}

/* Polyfill */
progress[role]:after {
	background-image: none; /* removes default background from polyfill */
}

/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
	display: none;
}

progress,                          /* Firefox  */ 
progress[role][aria-valuenow] {    /* Polyfill */
   background: White !important; /* !important is needed by the polyfill */
}

/* Chrome */
progress::-webkit-progress-bar {
    background: White;
}

/* IE10 */
progress {
    color: #086A87;
}

/* Firefox */
progress::-moz-progress-bar { 
    background: #086A87;	
}

/* Chrome */
progress::-webkit-progress-value {
    background: #086A87;
}

/* Polyfill */
progress[aria-valuenow]:before  {
    background: #086A87;
}

/* Firefox */
progress:not([value])::-moz-progress-bar { 
  background-image:  url(../images/indeter.gif);	
}

/* Chrome */
progress:not([value])::-webkit-progress-bar {
  background-image:  url(../images/indeter.gif);	
}

/* Polyfill - IE */
progress[role]{
	background-image: url(../images/indeter.gif) !important;
}

/* Polyfill - Safari */
progress:not([value])  {
	background-image: url(../images/indeter.gif) !important;
	background-size: auto;  /* Needs to be in here for Safari */
}

/**** TABLET AND SMARTPHONES ****/

/* Height */
@media (min-height: 851px) {
  div .the_scene { height: 90vh; }  
}

@media (min-height: 701px) and (max-height: 850px) {
  div .the_scene { height: 88vh; }  
}

@media (min-height: 571px) and (max-height: 700px) {
  div .the_scene { height: 86vh; }  
}

@media (min-height: 501px) and (max-height: 570px) {
  div .the_scene { height: 84vh; }  
}

@media (min-height: 451px) and (max-height: 500px) {
  div .the_scene { height: 82vh; }  
}

@media (min-height: 401px) and (max-height: 450px) {
  div .the_scene { height: 80vh; }  
}

@media (min-height: 351px) and (max-height: 400px) {
  div .the_scene { height: 76vh; }  
}

@media (max-height: 350px) {
  div .the_scene { height: 72vh; }  
}



/* Width */

@media (min-width: 1251px) {
  progress { width: 85%; } 
}

@media (min-width: 1121px) and (max-width: 1250px) {
  progress { width: 80%; }  
}

@media (min-width: 901px) and (max-width: 1120px) {
  progress { width: 75%; }
}

@media (min-width: 701px) and (max-width: 900px) {
  progress { width: 70%; }
}

@media (min-width: 601px) and (max-width: 700px) {
  progress { width: 65%; }
}

@media (min-width: 501px) and (max-width: 600px) {
  progress { width: 60%; }
}

@media (min-width: 451px) and (max-width: 500px) {
  progress { width: 55%; }
}

@media (min-width: 401px) and (max-width: 450px) {
  progress { width: 45%; }
}

@media (min-width: 331px) and (max-width: 400px) {
  progress { width: 35%; }
}

@media (max-width: 330px) {
  progress { width: 25%; }
  img { height:30px;
        width:30px; }
}