body {
    font-family:'Oxygen Mono', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
    -moz-user-select: none;
    -webkit-user-select: none; 
    -ms-user-select:none; 
    user-select:none; 
    unselectable:'on';
    onselectstart:'return false'; 
    onmousedown:'return false';
    background:#f9f2f4;
}


.noBackground {opacity: 0.5;}
.invisible {display: none;}
.white {color: white;}
.blue {color: #0049a3;}
.scrolly {overflow-y:hidden; !important
          overflow-x:hidden; !important
          overflow: hidden; !important}

.slogan {color:#gray;
         position: absolute;
         bottom: 0;}

#backgroundVideo {z-index: -9;}

#navbar   {
          position:fixed;
          bottom: 0;
          top: 55px;
          left: 5px;
          height:100%;          
          margin: 0 auto;
          z-index: 5;
          display: block;
          color: #0049a3;
          padding: 5px;
          }

#navbar p {padding: 10px;
           display: block;
           text-align: left;
           background-color: white;
          }

#playButton   {
          position:fixed;
          bottom: 0;
          top: 10px;
          left: 5px;
          height:100%;          
          margin: 0 auto;
          display: block;
          color: #0049a3;
          padding: 5px;
          }

#playButton p {padding: 10px;
           display: block;
           text-align: left;
           background-color: #f9f2f4;
          }



#theBox{
  position: absolute;
  left:0;
  right: 0;
  margin: 0 auto;
  width: 80%;
  max-width: 800px;
  text-align: left;
  background-color: white;
}

#theBox img, #theBox p, #theBox ul, #theBox h1, #theBox h2, #theBox h3 {
  padding: 17px;
  min-width: 100%;  

 
}


#a1 h1 {max-height: 40%;
          opacity: 0.8;
          padding-left: 25px;
          padding-right: 25px;
 
}

#clock{
      position: absolute;
      top:25%;
      left: 0;
      right: 0;
      margin: auto;
      cursor: default;}

#centralize {
      left: 0;
      right: 0;
      margin: auto;top: 25%;}

#basic {
    font-weight:100;
    background-color: #0049a3;
    background-color: #1c3f94;
    color: white;
    border-radius: 10px;
    padding: 15px;
    padding-bottom: 0px;
    border: 5px;

}

.activityButton {
    font-weight:100;
    background-color: #0049a3;
    background-color: #1c3f94;
    color: white;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
    padding-bottom: 0px;
    border: 5px;
}

.toggled {
    background-color: white;
    border:1px solid #1c3f94;
    color: #1c3f94;
}

.smaller {
  font-size: 15px;
  display: block;   
}


iframe {
    z-index: -9;
    top:-30%;
    left:-30%;
    position:absolute;
    width: 150%;
    height: 150%;
}


#footsie {position: fixed;
right: 0;
bottom: 0;}

/* Smaller than standard 960 (devices and browsers) */
 @media only screen and (max-width: 959px) { 
 
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
 @media only screen and (min-width: 768px) and (max-width: 959px) {
    .titleText {display: none;}
    #clock{padding-top: 15px;}
}
/* All Mobile Sizes (devices and browser) */
 @media only screen and (max-width: 767px) {
    .titleText {display: none;}
    #clock{padding-top: 15px;}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
 @media only screen and (min-width: 480px) and (max-width: 767px) {

 .titleText {display: none;}
 #clock{padding-top: 15px;}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
 @media only mobile and (max-width: 479px) {

#navbar   {
          position:absolute;
          margin-bottom: 0;
          left: 0;
          height:100%;          
          display: block;
          color: #0049a3;
          padding: 5px;
          }

#navbar p {padding: 10px;
            display: block;
            text-align: left;
           background-color: #f9f2f4;
          font-size: 2em;}

#playButton {display: none;}


  #container {width: 100%;}
}
@font-face {
    font-family:'100b';
    src:url('fonts/100b.eot?-1ny5vv');
    src:url('fonts/100b.eot?#iefix-1ny5vv') format('embedded-opentype'), url('fonts/100b.woff?-1ny5vv') format('woff'), url('fonts/100b.ttf?-1ny5vv') format('truetype'), url('fonts/100b.svg?-1ny5vv#100b') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family:'100b';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-small:before {
    content:"\e600";
}