@font-face {
    font-family: ClearSans-Regular;
    src: url("/static/ClearSans-Regular.woff") format("woff"),
         url("/static/ClearSans-Regular.eot") format("embedded-opentype"),
         url("/static/ClearSans-Regular.ttf") format("truetype");
}
@font-face {
    font-family: ClearSans-Bold;
    src: url("/static/ClearSans-Bold.woff") format("woff"),
         url("/static/ClearSans-Bold.eot") format("embedded-opentype"),
         url("/static/ClearSans-Bold.ttf") format("truetype");
}
@font-face {
    font-family: ClearSans-Italic;
    src: url("/static/ClearSans-Italic.woff") format("woff"),
         url("/static/ClearSans-Italic.eot") format("embedded-opentype"),
         url("/static/ClearSans-Italic.ttf") format("truetype");
}
@font-face {
    font-family: ClearSans-BoldItalic;
    src: url("/static/ClearSans-BoldItalic.woff") format("woff"),
         url("/static/ClearSans-BoldItalic.eot") format("embedded-opentype"),
         url("/static/ClearSans-BoldItalic.ttf") format("truetype");
}

body{
    background: rgb(100,0,0,0.1);
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0; padding: 0;
    color: white;
    #font-family: 'Courgette', cursive;
    #font-family: 'Handlee', cursive;
    #font-family: 'Indie Flower', cursive;
    #font-family: 'Kalam', cursive;
    #font-family: 'Oxygen', sans-serif;
    #font-family: "Syke-Regular", "Oxygen", sans-serif;
    font-family: "ClearSans-Regular", "Oxygen";
    font-family: oxygen;
    font-size:3.7vw ;
    
    cursor: none;

}

ul, li { margin: 0 0 0 0; }

.article {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.main {
    flex-grow:1;
}
.mainfull {
    flex-grow:0;
}


.header, .main, .footer {
    flex-shrink: 0;
}

.highlight {
    background: rgb(50,50,160,0.8);
    font-size: 120%;
    Xoutline: solid 1px yellow;
}

.top {   vertical-align: top !important;
  margin: 0px !important;  }

.footer {
        margin: auto;
        text-align:center;
        vertical-align: middle;
        background-color: rgba(0,0,0,0.8);
        border: 0px solid #a0a0a0a;
        border-radius: 20px;
        padding: 5px 10px;
        NOTbox-shadow: 1px 2px 30px rgba(40,0,40,1);
        max-width: 95%;
}


.topper {
        margin: 0px;
        text-align:center;
        vertical-align: top;
        background-color: rgba(0,0,0,0.8);
        border: 0px solid #a0a0a0a;
        border-radius: 20px;
        padding: 5px 10px;
        NOTbox-shadow: 1px 2px 30px rgba(40,0,40,1);
        max-width: 90%;
}

.mlt img { max-height: 340px !important; }

.topper .mf img {
  max-height: 99% important;
  max-width:  99% !important;
  width: 99% !important;
  padding: 0px 0px !important;
}

.footer .mf img {
  max-height: 99% important;
  max-width:  99% !important;
  width: 99% !important;
  padding: 0px 0px !important;
}

.footer-buffer {
        margin:0;
        height:40px;
}

.stage-buffer {
        margin: 100px;
        padding: 200px;
}
.stuff {
  font-size:90px;
  }

.vi {
    position: relative;
    top: -0.5em;
    font-size: 80%;
}

.chord {
    display:none;
    font-size: 0.85em;
    color: #8ee;
    height: 2.5em;
    width: 0px;
    vertical-align: bottom;
    text-wrap: nowrap;
}
  
#lowerthird {
        position: relative;
        top: 60%; height:40%;
        width: 100%; margin: auto; padding: 0;
        NOborder: 1px solid red;
}
.mid{
        display: flex;
        justify-content: center; //horizontal alignment
        align-items: center; //vertical alignment
        vertical-align: middle;
        padding: 90px;
}
#data {
        display:absolute;
        text-align: center;
        vertical-align: middle;
        background-color: rgba(0,0,0,0.6);
        font-size: 70rem;
        color: rgb(200,200,200);
        border:2px solid #a0a0a0;
        padding:10px 20px;
        border-radius: 25px;
 
}

/***************************
//          FADE          //
***************************/
.fade-in {
animation: fadeIn ease 20s;
-webkit-animation: fadeIn ease 20s;
-moz-animation: fadeIn ease 20s;
-o-animation: fadeIn ease 20s;
-ms-animation: fadeIn ease 20s;
}
@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;
  }
}

/***************************
// CHRISTMAS LETTERING    //
***************************/
.christmas-blue {
        color: #035ee2;
        background: -webkit-linear-gradient(transparent, transparent), url('http://10.181.1.10/misc/blue_glitter.gif') repeat;
        background: -o-linear-gradient(transparent, transparent) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        margin: 0;
        padding: 0;

        font-weight: 900;
        width: 100%;
        text-align: center;
        letter-spacing: 1px;
        z-index: 999999;
        -webkit-background-clip: text;
}

.christmas-gold {
        color: #D81E1E;
        color: gold;
        background: -webkit-linear-gradient(transparent, transparent), url('http://10.181.1.10/misc/gold_glitter.gif') repeat;
        background: -o-linear-gradient(transparent, transparent) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        margin: 0;
        padding: 0;

        font-weight: 900;
        width: 100%;
        text-align: center;
        letter-spacing: 1px;
        z-index: 999999;
        -webkit-background-clip: text;
}



h1, h2 {position:absolute;font-size: 8.5vw;
  width:100%;
  height:100%;
  text-align:center;
  max-height:100px;
  z-index:-1;
  line-height:0;
  margin-top:10%;
  color:#fff;
  font-family: 'Mountains of Christmas', cursive;
}

h2 { margin-top: 95%; }


/***************************
//        SNOW-1          //
***************************/
.snow, .snow:before, .snow:after {

        position: absolute;
        top: -600px;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: radial-gradient(5px 5px at 34px 172px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 86px 25px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 388px 47px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 53
px 303px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 373px 475px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 196px 261px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 434px 424px, rgba(255, 255, 255, 0.7)
 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 234px 213px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 393px 356px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 537px 497px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 
0, 0)), radial-gradient(3px 3px at 151px 362px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 110px 99px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 270px 111px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 351px 424px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 459px 279px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 584px 126px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 303px 486px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 132px 292px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 120px 162px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 396px 460px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 169px 508px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 177px 298px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 575px 410px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 29px 140px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 82px 378px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 482px 473px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 56px 24px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 157px 73px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 97px 496px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 240px 225px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 12px 102px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 518px 417px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 323px 155px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 534px 119px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 294px 245px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 270px 432px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 406px 292px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 42px 233px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 109px 160px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 158px 359px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 212px 133px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 303px 536px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 513px 314px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 54px 346px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 127px 115px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 559px 29px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 493px 581px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 339px 414px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 349px 481px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 331px 86px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 497px 385px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 65px 332px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 432px 593px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 377px 240px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 293px 224px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 455px 336px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 93px 50px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 129px 453px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 393px 78px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 364px 75px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 66px 19px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 254px 199px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 178px 454px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 499px 280px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 419px 40px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 179px 593px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 66px 529px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 498px 329px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 381px 464px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 172px 17px, #ffffff 50%, rgba(0, 0, 0, 0));
        background-size: 600px 600px;
        animation: snow 5s linear infinite;
}
#snow {
        background: none;
        z-index: -1;
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake1.png'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake2.png'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake3.png');
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        -webkit-animation: snow 10s linear infinite;
        -moz-animation: snow 10s linear infinite;
        -ms-animation: snow 10s linear infinite;
        animation: snow 10s linear infinite;
}

@keyframes snow {
 0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
 50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
 100% {
background-position: 500px 1000px, 200px 400px, -100px 300px;
}
}
@-moz-keyframes snow {
 0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
 50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
 100% {
background-position: 400px 1000px, 200px 400px, 100px 300px;
}
}
@-webkit-keyframes snow {
 0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
 50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
 100% {
background-position: 500px 1000px, 200px 400px, -100px 300px;
}
}
@-ms-keyframes snow {
 0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
 50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
 100% {
background-position: 500px 1000px, 200px 400px, -100px 300px;
}
}