body {
  margin:0;
  color: rgb(255, 255, 255);
  font-family: "Nunito Sans", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
          background-color: black;
}

.btnwrap {
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
    
}
#overlay-start{
    font-size: 150%;  
    color: white;
    background-color: black;	
}
#overlay-start:hover{
    text-decoration: underline;
}
.wrapper {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s;
    margin: auto;
    visibility: hidden;
    text-align: center;
}
#bgvid{
        position: fixed;
        top:50%;
        left:50%;
        min-width:100%;
        min-height:100%;
        width:auto;
        height:auto;
        z-index: -100;
        -webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
.header {
  position: relative;
  text-align: center;
  right: 1.6%;
}


.flex-container {
  
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically if the container has a set height */
  height: 250px; /* Example height */
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
  /* The grid: Four equal columns that floats next to each other */
  .column {
    float: left;
    justify-content: center;
    align-items: center;
    width: 20%;
    padding: 5px;
  }
  
  /* Style the images inside the grid */
  .column img {
    opacity: 0.8;
    cursor: pointer;
  }
  
  .column img:hover {
    opacity: 1;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* The expanding image container (positioning is needed to position the close button and the text) */
  .container {
    border-radius: 8px;
    border-collapse: collapse;
    border: 5px solid white;
    position: relative;
    display: block;
    left: 500px;
    top: -2050px;
    width: 30%
    
  }
  
  /* Expanding image text */
  #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
  }
  
  /* Closable button inside the image */
  .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
  } 


  .center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    top: 0;
    position: relative;
    left: 0;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .center .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
            
  }
  .title {
    position: relative;
  }

@media screen and (max-width: 900px) {
  .card {
    width: 300px;
    min-width: 300px;
  }
}

@media screen and (max-width: 730px) {
  .card {
    width: 200px;
    min-width: 200px;
  }
}

@media screen and (max-width: 520px) {
  .card {
    width: 100px;
    min-width: 100px;
    height: 210px;
  }
}

@media screen and (max-width: 300px) {
  .card {
    width: 80px;
    min-width: 80px;
    height: 220px;
  }
}
* {cursor: url(https://cur.cursors-4u.net/others/oth-8/oth704.cur), auto !important;}
.snowflake {
color: rgb(255, 255, 255);
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall {
0% {
    top: -10%;
}
100% {
    top: 100%;
}
}
@-webkit-keyframes snowflakes-shake {
0%,
100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
50% {
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
}
}
@keyframes snowflakes-fall {
0% {
    top: -10%;
}
100% {
    top: 100%;
}
}
@keyframes snowflakes-shake {
0%,
100% {
    transform: translateX(0);
}
50% {
    transform: translateX(80px);
}
}
.snowflake {
position: fixed;
top: -10%;
z-index: 9999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
-webkit-animation-name: snowflakes-fall, snowflakes-shake;
-webkit-animation-duration: 10s, 3s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
}
.snowflake:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 0s, 0s;
animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 1s, 1s;
animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 6s, 0.5s;
animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 4s, 2s;
animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 2s, 2s;
animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 6s, 2s;
animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 1s, 0s;
animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s;
}
.snowflake:nth-of-type(10) {
left: 25%;
-webkit-animation-delay: 2s, 0s;
animation-delay: 2s, 0s;
}
.snowflake:nth-of-type(11) {
left: 65%;
-webkit-animation-delay: 4s, 2.5s;
animation-delay: 4s, 2.5s;
}

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

.fade-in-text {
animation: fadeIn 5s;
-webkit-animation: fadeIn 5s;
-moz-animation: fadeIn 5s;
-o-animation: fadeIn 5s;
-ms-animation: fadeIn 5s;
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.glow {
background:none;
color:rgb(0, 0, 0);
text-shadow:1px 1px 10px rgb(0, 0, 0), 1px 1px 10px rgb(0, 0, 0);
font-size:48px;
text-align:center;
}

h1{ /* Members Text Font Settings */
font-weight:400; /* makes the text thinner */
line-height:0.0; /* sets height between each member */
font-size:18px;
}

.parent {
width: 400px;
height: 200px;
border: 1px solid #AAA;
overflow: hidden;
}

.child {
height: 100%;
margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
}
/* sparkling stars */
/*******************/
@keyframes comeInOut {
  0% { transform: scale(0); }
  50% { transform: scale(1); }
  100% { transform: scale(0); }
}

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

.sparkling {
  position: relative;
  display: inline-block;
  z-index: 0;
  font-size: smaller;
  color: #ffffff;
}

.sparkling > span {
  z-index: -1;
  position: absolute;
  display: block;
  animation: comeInOut 700ms forwards;
}

.sparkling > span > svg {
  display: block;
  animation: spin 1000ms linear;
}