body {
    background-color: black;/* Overall Background color */
    margin-top: auto;
    background-repeat: no-repeat;
    color: red;
}

/***************************/


.header {
    background: url(header.png) 50% no-repeat;
    background-size: contain
}

img {
    max-width: 100%
}

h1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
    
       font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;/* Palatino Linotype */
    /*    font-family: ‘Times New Roman’, Times, serif;/* Times New Roman */
    /*    font-family: Copperplate / Copperplate Gothic Light, sans-serif;/**/
    /*    font-family: Gill Sans / Gill Sans MT, sans-serif;/* web safe, it is not! */
}

p.serif {
    font-family: "Times New Roman", Times, serif;/* Nice */
}

p.serif a {
    
    color:red;
    text-decoration: none;
}

p.serif a:hover {
    color:white;
}
/*****/
p.serif2 {
    font-family: "Times New Roman", Times, serif;/* Nice */
}

p.serif2 a {
    
    color: rgba(255, 154, 14, 0.8);
    text-decoration: none;
}

p.serif2 a:hover {
    color:white;
}
/*****/
.beyondP {
    margin: 0px 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
    color: white;
}

p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
}

/* http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css */
p.type1 {
/*    font-family: Impact, Charcoal, sans-serif;/* Impact */
/*    font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;/* Palatino Linotype */
/*    font-family: Tahoma, Geneva, sans-serif;/* Tahoma */
/*    font-family: Century Gothic, sans-serif;/* Century Gothic */
/*    font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;/* Lucida Sans Unicode */
/*    font-family: ‘Arial Black’, Gadget, sans-serif;/* Arial Black */
/*    font-family: ‘Times New Roman’, Times, serif;/* Times New Roman */
/*    font-family: ‘Arial Narrow’, sans-serif;/* Arial Narrow */
/*    font-family: Verdana, Geneva, sans-serif;/* Verdana */
/*    font-family: Copperplate / Copperplate Gothic Light, sans-serif;/**/
/*    font-family: ‘Lucida Console’, Monaco, monospace;/* Copperplate Gothic Light */
/*    font-family: Gill Sans / Gill Sans MT, sans-serif;/* web safe, it is not! */
/*    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;/* Trebuchet MS */
   font-family: ‘Courier New’, Courier, monospace;/* Courier New */
/*    font-family: Arial, Helvetica, sans-serif;/* Arial */
/*    font-family: Georgia, Serif;/* Georgia /**/
}

/* Works
@media screen and (max-width: 500px) {
    body {
        background-color: green;
    }
}
*/

.description {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: white;
    margin-top: 21.0em;
}

#canvas1 {
    
    display:block;
    margin:10px auto;
}

.centerImage {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.centerVideo {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
}

#Icon {
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/***************************************************************/
#Mergatroid {
    position: absolute;
    transition: left 2.5s cubic-bezier(.42,-0.3,.78,1.25),
    top 2.5s cubic-bezier(.42,-0.3,.78,1.25);
    z-index: 2;
}
.centerMergatroid {
    position absolute;
}

.centerMergatroid p {
    text-align: center;
}
.centerMergatroid img {
    position: absolute;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    left: calc(50% - 50px);
}


/**************************** nav ***********************************/
.nav {
    margin: 20px 0;
    visibility: visible;
}

.nav ul {
    margin: 0;
    padding: 0;
}

.nav li {
    margin: 0 5px 10px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    display:inline; /* ie7 */
}

.nav a {
    padding: 3px 12px;
    text-decoration: none;
    color: #999;
    line-height: 100%;
}

.nav a:hover {
    color: red;
}

.nav .current a {/* removing .current caused grey blocks to be displayed around text*/
    background: #999;
    color: #fff;
}

/* center nav */
.nav.center ul {
    text-align: center;
}
/**************************** nav ***********************************/
.menuButton {
    position: absolute;
    float: left;
    max-width: 100%;
    display: none;
}


#menuButton {
    display: none;
}

.closeMenuButton {
    position: absolute;
    float: left;
    max-width: 100%;
    display: none;
}

#closeMenuButton {
    display: none;
}

IMG.centeredSmallInstagram {
    width: 4%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
/**************************************/
@media screen and (max-width: 600px) {
    

    IMG.centeredSmallInstagram {
        width: 5%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
  
    .menuButton {
        position: absolute;
        float: left;
        max-width: 100%;
        display: flex;
    }
    #menuButton {
        display: flex;
    }
    
    #closeMenuButton {
        display: none;
    }
    .closeMenuButton {
        position: absolute;
        float: left;
        max-width: 100%;
        display: none;
    }
    
    /*******************************/
    .nav {
        position: relative;
        min-height: 40px;
        visibility: hidden;
    }
    
    .nav ul {
        width: 180px;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 5px;
        display: block;
        margin: 0 0 5px;
    }
    
    .nav li {
        display: block;
        margin: 0;
    }
    
    .nav {
        display: block; /* show only current <li> item */
    }
    .nav a {
        display: block;
        padding: 5px 5px 5px 32px;
        text-align: left;
    }
    .nav a {
        background: none;
        color: #666;
    }
    
    
    /* center nav */
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }
}
/* End Mobile resize */


/* https://css-tricks.com/almanac/properties/a/animation/ */
/* Animation/Circles/Circles.html */
#eyesID {
    opacity: 1;
}
/************************************************/
.exhibit {
    list-style: none;
    padding: 0px 0;/* 20px vertical padding*/
    margin: 0 auto;
    text-align: center;
    width: 100%;/* 100%,  60% creates two columns */
    line-height:300px;
}

.exhibit img {
    height: 300px;
    opacity: 0.6;
    /* leftRight -(to the left, +to the right), Bottom, blur(0=no blur), color */
    
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.exhibit img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    
    -webkit-transform:scale(2.0); /* Safari and Chrome */
    -moz-transform:scale(2.0); /* Firefox */
    -ms-transform:scale(2.0); /* IE 9 */
    -o-transform:scale(2.0); /* Opera */
    transform:scale(2.0);
}

.exhibit li {
    display: inline-block;
    margin: 0px 30px 0 30px;/* 10px 5px 0 5px; top, right, bottom, left; */
    vertical-align: top;
    height: 150px;/* 250px Thumbnail Height */
}

.exhibit li > a,
.exhibit li > a img {
    
    display: block;
    position: relative;
}
/************************************************/
.informationFiller20 {
    background-color: black;
    height: 20px;
}

.informationFiller100 {
    background-color: black;
    height: 100px;
}

/************************************************/
#Mergatroid2 {
        position: absolute;
margin-left: auto;
margin-right: auto;
text-align: center;
display:block;
left: calc(50% - 165px);


        top: 40%;/*160px*/
    z-index: 20;

    animation: mergatroid2-animation 10s infinite;

    -webkit-animation: mergatroid2-animation 10s infinite;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-fill-mode: backwards;
}

@-webkit-keyframes mergatroid2-animation {
    0% {
        -webkit-transform: rotateZ(-3deg);
        -moz-transform:rotateZ(-3deg); /* Firefox */
        -ms-transform:rotateZ(-3deg);
    }
    50% {
        -webkit-transform: rotateZ(3deg);
        -moz-transform:rotateZ(3deg); /* Firefox */
        -ms-transform:rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateZ(-3deg);
        -moz-transform:rotateZ(-3deg); /* Firefox */
        -ms-transform:rotateZ(-3deg);
    }
}

/* Standard syntax */
@keyframes mergatroid2-animation {
    0% {
        -webkit-transform: rotateZ(-3deg);
        -moz-transform:rotateZ(-3deg); /* Firefox */
        -ms-transform:rotateZ(-3deg);
    }
    50% {
        -webkit-transform: rotateZ(3deg);
        -moz-transform:rotateZ(3deg); /* Firefox */
        -ms-transform:rotateZ(3deg);
    }
    100% {
        -webkit-transform: rotateZ(-3deg);
        -moz-transform:rotateZ(-3deg); /* Firefox */
        -ms-transform:rotateZ(-3deg);
    }
}

/************************************************/
#Wheel {
    position: absolute;
/*    top: 75%;/*160px*/
    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display:block;
    left: calc(50% - 32px);
    top: calc(50% + 200px);

z-index: 10;
    
    animation: slideOver 10s infinite;
    
    -webkit-animation: slideOver 10s infinite;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-fill-mode: backwards;
    
}

@-webkit-keyframes slideOver {
    0% {
        transform: translateX(30px);
        -webkit-transform: translateX(30px);
        -webkit-transform: rotateZ(60deg);
        -moz-transform:rotateZ(60deg); /* Firefox */
        -ms-transform:rotateZ(60deg);
    }
    50% {
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
    }
    100% {
        transform: translateX(30px);
        -webkit-transform: translateX(30px);
        -webkit-transform: rotateZ(60deg);
        -moz-transform:rotateZ(60deg); /* Firefox */
        -ms-transform:rotateZ(60deg);
    }
}

@keyframes slideOver {
    0% {
        transform: translateX(30px);
        -webkit-transform: translateX(30px);
        -webkit-transform: rotateZ(60deg);
        -moz-transform:rotateZ(60deg); /* Firefox */
        -ms-transform:rotateZ(60deg);
    }
    50% {
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
    }
    100% {
        transform: translateX(30px);
        -webkit-transform: translateX(30px);
        -webkit-transform: rotateZ(60deg);
        -moz-transform:rotateZ(60deg); /* Firefox */
        -ms-transform:rotateZ(60deg);
    }
}


/************************************************/
#WheelX {
    position: absolute;
    left: 45%;/*200px*/
    top: 45%;/*160px*/
    z-index: 10;
    
    animation: slideOver2 10s infinite;
    -webkit-animation: slideOver2 10s infinite ;
}
@keyframes slideOver2 {
    0% {
        transform: translateX(30px);
        -webkit-transform: translateX(30px);
        -webkit-transform: rotateZ(60deg);
    }
    50% {
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
    }
    100% {
        transform: translateX(30px);
        -webkit-transform: translateX(30px);
        -webkit-transform: rotateZ(60deg);
    }
}


/*
 
 -moz-transform:scale(2.0);  Firefox

 -webkit-animation: rotorRotation 8s linear infinite
 animation: rotorRotation 8s linear infinite;
 
 animation: slideOver 7.5s .5s infinite Alternate-reverse both;
 -webkit-animation: slideOver 7.5s .5s infinite Alternate-reverse both;

 -webkit-transform: translate(-50%, -50%)  rotorRotation 8s linear infinite;
 -moz-transform: translate(-50%, -50%)  rotorRotation 8s linear infinite;
 -o-transform: translate(-50%, -50%)  rotorRotation 8s linear infinite;
 transform: translate(-50%, -50%)  rotorRotation 8s linear infinite;

 
 */

@-webkit-keyframes numbot-l-lower-arm-animation {
    0% { -webkit-transform: rotateX(1.2deg); }
    50% { -webkit-transform: rotateX(-1.2deg); }
    100% { -webkit-transform: rotateX(1.2deg); }
}

/*** Rotation ***/
@-webkit-keyframes rotorRotation {
    100% {-webkit-transform: rotateZ(360deg);}
    
}


#Rope {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display:block;
    left: calc(50% - 192px);
    top: calc(50% + 180px);
/*    top: 73%;/*160px*/
    z-index: 15;
}