body    { max-width:1030px; padding:0px;}


.zoom {
    padding: 5px;
    transition: transform .8s; /* Animation */
    margin: 0 auto;
}

.zoom:hover {
    transform: scale(1.05); /* (120% zoom) */
}

.zoomGlass {
    opacity: 0.7;
    padding: 5px;
    transition: transform .5s; /* Animation */
    margin: 0 auto;
}

.zoomGlass:hover {
    opacity: 0.7;
    transform: scale(1.10); /* (120% zoom) */
}

.g { vertical-align:top; 
     background-color:black;
     transition: transform .5s ease; /* Animation */
     margin: 0 auto;
}
.g:hover {
    transform: scale(1.05); /* (% zoom) */
    cursor: pointer;
}

.zoomcolor {
    padding: 5px;
    transition: transform .8s; /* Animation */
    margin: 0 auto;

  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

.zoomcolor:hover {
    transform: scale(1.05); /* (120% zoom) */
    -webkit-filter: grayscale(0%);
    filter: none;
}

.color {
  transition: all .5s ease;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
.color:hover {
    transform: scale(1.05); /* (120% zoom) */
    -webkit-filter: grayscale(0%);
    filter: none;
    cursor: pointer;
}

.links {margin-top:0in; margin-left:0px;}

#stage {
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding: 0px;
    width: 100%;        //1035px;
    height: 400px;       //100%
  }

  #stage a {
    position: absolute;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 6s;
    animation-duration: 3s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

@keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }


@media only screen and (min-width:800px){
  div#vidtx { float:left; }
  div#vid   { float:right; }
}
@media only screen and (max-width:799px){
  div#vidtx { float:center; }
  div#vid   { float:center; }
}


@media screen and (min-width:550px){
  nav { display:table-cell; }
}
@media screen and (max-width:549px){
  nav { float:left; }
}


.button { background-color:#cceeff; font-family:'Arial'; font-size:12pt; text-align:center; vertical-align:top; padding:20px; margin-left:20px; margin-top:4px; margin-bottom:4px; border-radius:8px;}

.button:hover { background-color:#88ffcc; font-family:'Arial'; font-size:12pt; text-align:center; vertical-align:top; padding:20px; margin-left:20px; margin-top:4px; margin-bottom:4px; border-radius:8px;}
