.q-uppercase {
	text-transform: uppercase;
}

.q-reveal-basic {
	opacity: 0;
	
}

.q-reveal-basic.active {
	transform: translateY(-20px);
	opacity: 1;
	transition: 2s all ease;
}

.q-reveal-jump {
  opacity: 0;
  transform: translateY(100px);
}

.q-reveal-jump.active {
  transform: translateY(0px);
  opacity: 1;
  transition: 1s all ease;
}

.q-reveal-slide {
  opacity: 0;
  transform: translateX(100px);  
}

.q-reveal-slide.active {
  transform: translateX(0px);
  opacity: 1;
  transition: 1s all ease;
}

.q-reveal-fade {
  opacity: 0;
  
}

.q-reveal-fade.active {
  opacity: 1;
  transition: 4s all ease;
}

.q-goldenrod,.w3-goldenrod:hover{color:#fff!important;background-color:#daa520!important;}
.q-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important;}

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

.q-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 5px;
  width: 600px;
  max-width: 100%;
}

.q-grid-item {
  padding: 5px;
  font-size: 25px;
  text-align: center;
}

.loading {
  font-size: 16px;
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;
  }
}