@import url(reset.css);

.topper {
    overflow: hidden;
    background-color: white;
    display: flex;
    padding: 1rem;
    color: black;
    font-size: 11px;
    font-family: sans-serif;
    box-shadow: 1px 1px 6px #00000030;
    z-index: 50;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    animation: animateopa 2s normal forwards ease-in-out;
}
 .topper .content {
     margin-left: 1rem;
}
 .topper h1, .topper h2, .topper h3 {
     margin: 0;
	 font-weight: bold;
}
 .topper img {
     width: 7rem;
	 padding-top: 1px;
}



a:visited{
color: blue;}
a:hover{
text-decoration: none;}

body { overflow: hidden;}

#wrapper { 
    display: none;
    text-align: center;
}

video.bgvideo {
    position: fixed;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
	  top: 0;
	  left: 0;
}

.panorama {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
}

.panorama a,
.panorama a:active,
.panorama a:visited,
.panorama a:link
{
	font-size: 2rem;
	color: white;
}

.panorama a:hover { text-decoration: none; }

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes animateopa { 
  0% { opacity: 0; }
  100% { opacity: 1 !important; }
}

#tooltip{
  position: absolute;
  display: block;
  opacity: 0;
  visibility: hidden;
  background: #262626;
  border-radius: 7.5px;
  color: #ccc;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  padding: 10px 15px;
  border: 2px solid #ccc;
  margin-left: 3rem;
  z-index: 200;
}

body.rdy:hover #tooltip{
  opacity: 1;
  visibility: visible;
}


@media (min-width: 900px) {
  .topper {
    width: fit-content;
    position: fixed;
  }
}
@media (min-width: 400px) {
		.topper img {
     width: 8.5rem;
	 padding-top: 1px;
}
}
@media (min-width: 450px) {
		.topper img {
     width: 10.5rem;
	 padding-top: 1px;
}