body{
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        min-height: 100vh;
    }

    
 .MainTitle {
    display:inline-block; 
    font-size: 8vw; 
    font-weight: bold;   
    }
 .MainSubTitle {
      display:inline-block; 
      font-size: 2vw;
    }

        
    
.DropDownWrap {
  width:100%;
  marign: 0, auto;
  z-index: 100;
    }    
.dropdown {
  overflow: hidden;
  text-align: center;
}

.dropdown .dropbtn {
  font-size: 2vw;    
  border: none;
  outline: none;
  color: black;
  padding: 1vw 1vw;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  text-align: center;
}

.dropdown-content {
  display: none;
  background-color: #f9f9f9;
  min-width: 20vw;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: center;
  font-size: 2vw;    
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 0.5vw  0.5vw;
  text-decoration: none;
  display: block;
  text-align: center;
}
    
    
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.SmartassLine {
  text-align: center; 
  font-size: 2vw; 
  font-weight: bold;
}

@media only screen and (max-width: 980px) {
.MainTitle {
    font-size:  9vw; 
    }
 .MainSubTitle {
    font-size: 4vw;
    }
.dropdown .dropbtn {
  font-size: 6vw;    
}

.dropdown-content {
  font-size: 6vw;    
}
.SmartassLine {
  font-size: 4vw; 
}
}    

footer {
    position: fixed; /* Fix to the viewport */
    bottom: 0; /* Align to the bottom */
    left: 0;
    width: 100%; /* Full width */
    background-color: #f8f8f8; /* Light background for visibility */
    text-align: center; /* Center the text */
    padding: 10px 0; /* Vertical padding */
    border-top: 1px solid #ddd; /* Optional separator */
    font-size: 14px;
    color: #333;
}

#wrapper{
    position:fixed;
    margin:0 auto;
    top:0px;
    left:0px;
    z-index: 50;
}
    
    .pic {
        position: absolute;
        width:20vw;
        top: calc( 50vh - 10vw);
        
    }
    
/* The element to apply the animation to */
#MovingPic {
  position:absolute;
  animation-name: moveit;
  animation-duration: 4s;
  animation-iteration-count: infinite;
/*  animation-delay: 2s;  */
}
	
#MovingPic img{
    position:absolute;
}	

.pic1 {
  position:absolute;	
  animation-name: hidepic;
  animation-duration: 0.48s;
  animation-iteration-count: infinite;
	}
	
.pic2 {
  position:absolute;	
  animation-name: hidepic;
  animation-duration: 0.48s;
  animation-iteration-count: infinite;
  animation-delay: 0.08s;
	}
	
.pic3 {
  position:absolute;	
  animation-name: hidepic;
  animation-duration: 0.48s;
  animation-iteration-count: infinite;
  animation-delay: 0.16s;
	}
	
.pic4 {
  position:absolute;	
  animation-name: hidepic;
  animation-duration: 0.48s;
  animation-iteration-count: infinite;
  animation-delay: 0.24s;
	}
	
.pic5 {
  position:relative;	
  animation-name: hidepic;
  animation-duration: 0.48s;
  animation-iteration-count: infinite;
  animation-delay: 0.32s;
	}
	
.pic6 {
  position:relative;	
  animation-name: hidepic;
  animation-duration: 0.48s;
  animation-iteration-count: infinite;
  animation-delay: 0.40s;
	}
	

	@keyframes showhidepic {
		0% {opacity:1;}
		16.66%{opacity:0;}
	}
	@keyframes showpic {
		from {opacity:0;}
		to{opacity:1;}
	}
	
	@keyframes hidepic {
		from {opacity:1;}
		to{opacity:0;}
	}

@keyframes moveit {
    from {left: -20vw;} 
    to{left:120VW;}
}
	
@-moz-keyframes moveit {
    from {left: -20vw;} 
    to{left:120vw;} 
}
	
@-webkit-keyframes moveit {
    from {left: -20vw;} 
    to{left:120vw;} 
}