@charset "utf-8";
html,
body {
	width: 100%;
	height: 100%;
}
html {
	display: table;
}
body {
	display: table-cell;
	vertical-align: middle;
}
img {
	max-width: 100%;
	min-height: 1px;
}
#holder {
  max-width: 100%;
  max-height: 100%;
    align: center;
    valign: middle;
}
#holder1 {
  max-width: 100%;
  max-height: 100%;
    align: center;
    valign: middle;
}
#holder2 {
  max-width: 100%;
  max-height: 100%;
    align: center;
    valign: middle;
}
#holder3 {
  max-width: 100%;
  max-height: 100%;
    align: center;
    valign: middle;
}
#holder4 {
  max-width: 100%;
  max-height: 100%;
    align: center;
    valign: middle;
}
#vid {
    max-width: 90vw;
    max-height: 60vw; /* height/width ratio = 315/560 = .5625 */
    align: center;
    valign: middle;
}
#youtube {
    max-width: 90vw;
    max-height: 50vw; /* height/width ratio = 315/560 = .5625 */
    align: center;
}

#info1 {
	position: absolute; 
	margin-top: -54px;
	margin-left: 0px;
	top: 50%; 
	right: 0px;
	z-index: 100;
        display: none;
}
#phone {
	position: absolute;
        top: 100px; 
	z-index: 100;
	animation: infoButtons 5s infinite linear;
}
#email {
	position: absolute; 
        top: 0px; 
	z-index: 100;
	animation: infoButtons 5s infinite linear;
}
#FB {
	position: absolute; 
        top: 0px; 
	z-index: 100;
	animation: infoButtons 5s infinite linear;
}
#LI  {
	position: absolute; 
        top: 0px; 
	z-index: 100;
	animation: infoButtons 5s infinite linear;
}

@keyframes infoButtons {
        100% {transform: rotate(-360deg);}
}
@keyframes infoButtons2 {
        100% {transform: rotate(360deg);}
}


#info2 {
	position: absolute; 
	margin-top: -55px;
	margin-left: 0px;
	top: 50%; 
	right: 0px;
	z-index: 99;

}
#resume {
	position: absolute; 
	margin-top: -10px;
	margin-left: -35px;
	top: 0px; 
	left: 50%;
	z-index: 99;

}
#home {
	position: absolute; 
	margin-top: -45px;
	margin-left: -5px;
	top: 50%; 
	left: 0px;
	z-index: 99;

}
#copyright {
	position: absolute; 
	margin-top: 0px;
	margin-left: -52px;
	bottom: 0px; 
	left: 50%;
	z-index: 99;

}

#info2White {
	position: absolute; 
	margin-top: -55px;
	margin-left: 0px;
	top: 50%; 
	right: 0px;
	z-index: 99;

}
#resumeWhite {
	position: absolute; 
	margin-top: -10px;
	margin-left: -35px;
	top: 0px; 
	left: 50%;
	z-index: 99;

}
#homeWhite {
	position: absolute; 
	margin-top: -45px;
	margin-left: -5px;
	top: 50%; 
	left: 0px;
	z-index: 99;

}
#copyrightWhite {
	position: absolute; 
	margin-top: 0px;
	margin-left: -52px;
	bottom: 0px; 
	left: 50%;
	z-index: 99;

}

#long {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -115px;
	margin-left: -115px;
	z-index: 100;
	animation: longspinforward 2s;
        animation-iteration-count: 3;
}

@keyframes longspinforward {
        100% {transform: rotate(-360deg);}
}

#long2 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -115px;
	margin-left: -115px;
	z-index: 101;
	animation: longspinforward2 6s infinite linear;
}

@keyframes longspinforward2 {
        100% {transform: rotate(-360deg);}
}

#short {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -115px;
	margin-left: -115px;
	z-index: 100;
	animation: shortspinforward 3s linear;
        animation-iteration-count: 1;
}

@keyframes shortspinforward {
        100% {transform: rotate(-360deg);}
}

#short2 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -115px;
	margin-left: -115px;
	z-index: 101;
	animation: shortspinforward2 72s infinite linear;
}

@keyframes shortspinforward2 {
        100% {transform: rotate(-360deg);}
}

#GearBlack1 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -150px;
	margin-left: -110px;
	z-index: 98;
	animation: GearBlack1 1s infinite linear;

}

@keyframes GearBlack1 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-2deg);
        }
}

@keyframes GearForward {
        100% {transform: rotate(360deg);}
}

@keyframes GearForwardShort {
        100% {transform: rotate(30deg);}
}

@keyframes GearBack {
        100% {transform: rotate(-360deg);}
}

@keyframes GearBackShort {
        100% {transform: rotate(-30deg);}
}

#GearBlack2 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 45px;
	margin-left: 10px;
	z-index: 98;
	animation: GearBlack2 1s infinite linear;

}

@keyframes GearBlack2 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-2deg);
        }
}



#GearGray1 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -110px;
	margin-left: 45px;
	z-index: 98;
	animation: GearGray1 1s infinite linear;

}

@keyframes GearGray1 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(2deg);
        }
}

#GearGray2 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 10px;
	margin-left: -145px;
	z-index: 98;
	animation: GearGray2 1s infinite linear;

}

@keyframes GearGray2 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(2deg);
        }
}



#GearBlack1s {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -150px;
	margin-left: -110px;
	z-index: 98;
	animation: GearBlack1a 14s infinite linear;

}

@keyframes GearBlack1a {
        100% {transform: rotate(360deg);}
}



#GearBlack2s {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 45px;
	margin-left: 10px;
	z-index: 98;
	animation: GearBlack2a 14s infinite linear;

}

@keyframes GearBlack2a {
        100% {transform: rotate(360deg);}
}



#GearGray1s {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -110px;
	margin-left: 45px;
	z-index: 98;
	animation: GearGray1a 14s infinite linear;

}

@keyframes GearGray1a {
        100% {transform: rotate(360deg);}
}

#GearGray2s {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 10px;
	margin-left: -145px;
	z-index: 98;
	animation: GearGray2a 14s infinite linear;

}

@keyframes GearGray2a {
        100% {transform: rotate(360deg);}
}



#wormScrew1 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -13px;
	margin-left: -50%;
	z-index: 97;
        height: 24px;
        width: 50%;
        background-image: url("wormScrew1.png");
}

#wormScrew2 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -13px;
	margin-left: 0px;
	z-index: 97;
        height: 24px;
        width: 50%;
        background-image: url("wormScrew1.png");
        rotate: 180deg;
}

#wormScrew3 {
	position: absolute; 
	top: 0px; 
	left: 50%;
	margin-top: 0px;
	margin-left: -12px;
	z-index: 97;
        height: 50%;
        width: 24px;
        background-image: url("wormScrew2.png");
        rotate: 180deg;
}

#wormScrew4 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 0px;
	margin-left: -12px;
	z-index: 97;
        height: 50%;
        width: 24px;
        background-image: url("wormScrew2.png");
}



#wormScrew1a {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -13px;
	margin-left: -50%;
	z-index: 98;
        height: 24px;
        width: 50%;
        background-image: url("wormScrew1.gif");
}

#wormScrew2a {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -13px;
	margin-left: 0px;
	z-index: 98;
        height: 24px;
        width: 50%;
        background-image: url("wormScrew1.gif");
        rotate: 180deg;
}

#wormScrew3a {
	position: absolute; 
	top: 0px; 
	left: -12px;
	margin-top: 0px;
	margin-left: 50%;
	z-index: 98;
        height: 50%;
        width: 24px;
        background-image: url("wormScrew2.gif");
        rotate: 180deg;
}

#wormScrew4a {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 0px;
	margin-left: -12px;
	z-index: 98;
        height: 50%;
        width: 24px;
        background-image: url("wormScrew2.gif");
}

#logo {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -115px;
	margin-left: -115px;
	z-index: 99;

}
#logo1 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -115px;
	margin-left: -115px;
	z-index: 99;

}	
#logo2 {
	position: absolute; 
	top: 0; 
	left: 50%;
	margin-top: 0px;
	margin-left: -100px;
	z-index: 98;

}
	
#JoshJoplin {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:100%;
	width:100%;
	z-index: 96;

}

#hide {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:100%;
	width:100%;
	z-index: 96;

}
#hidden {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:100%;
	width:100%;
	z-index: 97;

}
#quad1 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:50%;
	width:50%;
	z-index: 97;
	}
#quad2 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 50%;
	height:50%;
	width:50%;
	z-index: 97;


}
#quad3 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top:50%; 
	left: 0px;
	height:50%;
	width:50%;
	z-index: 97;

}
#quad4 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 50%; 
	left: 50%;
	height:50%;
	width:50%;
	z-index: 97;

}

#Q1 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:50%;
	width:50%;
	z-index: 95;
	}
#Q2 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 50%;
	height:50%;
	width:50%;
	z-index: 95;


}
#Q3 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top:50%; 
	left: 0px;
	height:50%;
	width:50%;
	z-index: 95;

}
#Q4 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 50%; 
	left: 50%;
	height:50%;
	width:50%;
	z-index: 95;

}

#quad1a {
	position:absolute;
	margin-top: -2000px;
	margin-left: -3px;
	top: 0px; 
	left: 0px;
	height:100%;
	width:100%;
	z-index: 97;
	}
#quad2a {
	position:absolute;
	margin-top: -1326px;
	margin-left: 3px;
	top: 0px; 
	left: 0px;
	height:100%;
	width:100%;
	z-index: 97;


}
#quad3a {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:100%;
	width:100%;
	z-index: 97;

}
#quad4a {
	position:absolute;
	margin-top: -590px;
	margin-left: 7px;
	top: 0px; 
	left: 0px;
	height:100%;
	width:100%;
	z-index: 97;

}

#green1 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:50%;
	width:50%;
	opacity:0.5;
	z-index: 1;
	}
#green2 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 50%;
	height:50%;
	width:50%;
	opacity:0.5;
	z-index: 1;


}
#green3 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top:50%; 
	left: 0px;
	height:50%;
	width:50%;
	opacity:0.5;
	z-index: 1;

}
#green4 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 50%; 
	left: 50%;
	height:50%;
	width:50%;
	opacity:0.5;
	z-index: 1;

}

#hidden1 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:50%;
	width:50%;
	z-index: 95;
}
#hidden2 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 50%;
	height:50%;
	width:50%;
	z-index: 95;

}
#hidden3 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top:50%; 
	left: 0px;
	height:50%;
	width:50%;
	z-index: 95;

}
#hidden4 {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 50%; 
	left: 50%;
	height:50%;
	width:50%;
	z-index: 95;

}


#top {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:100%;
	width:100%;
	align:center;
	z-index: 96;

}
#base {
	position:absolute; 
	margin-top:0px; 
	margin-left:0px;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	align:center;
	z-index: 90;
        data-preservescroll:true;
}

#base2 {
	position:absolute; 
	margin-top:0px; 
	margin-left:0px;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	align:center;
	z-index: 90;
        data-preservescroll:true;
}

#subtop {
	position:absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px; 
	left: 0px;
	height:100%;
	width:100%;
	align:center;
	z-index: 56;

}
#subbase {
	position:absolute; 
	margin-top:0px; 
	margin-left:0px;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	align:center;
	z-index: 50;
        data-preservescroll:true;
}


#inerds {
	position:absolute; 
	margin-top:0px; 
	margin-left:0px;
	top:0px;
	left:0px:
	height:100%;
	width:100%;
	z-index:95;
}

.style1 {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
	}


#GearLarge {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 158px;
	margin-left: -74px;
	z-index: 3;
	animation: SSForward 1.05s;
}

#GearMedium1 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 219px;
	margin-left: -170px;
	z-index: 2;
	animation: SSBackward 1.05s;
}
#GearMedium2 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 219px;
	margin-left: 40px;
	z-index: 2;
	animation: SSBackward 1.05s;
}

#GearSmall1 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 168px;
	margin-left: -211px;
	z-index: 1;
	animation: SSForward 1.05s;
}
#GearSmall2 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 168px;
	margin-left: 120px;
	z-index: 1;
	animation: SSForward 1.05s;
}




#GearLargeM {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -39px;
	margin-left: -74px;
	z-index: 3;
	animation: SSForward 1.05s;
}

#GearMedium1M {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 22px;
	margin-left: -170px;
	z-index: 2;
	animation: SSBackward 1.05s;
}
#GearMedium2M {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 22px;
	margin-left: 40px;
	z-index: 2;
	animation: SSBackward 1.05s;
}

#GearSmall1M {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -29px;
	margin-left: -211px;
	z-index: 1;
	animation: SSForward 1.05s;
}
#GearSmall2M {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: -29px;
	margin-left: 120px;
	z-index: 1;
	animation: SSForward 1.05s;
}

@keyframes SSForLarge {
        100% {transform: rotate(180deg);}
}
@keyframes SSBackLarge {
        100% {transform: rotate(-180deg);}
}
@keyframes SSForMed {
        100% {transform: rotate(270deg);}
}
@keyframes SSBackMed {
        100% {transform: rotate(-270deg);}
}

@keyframes SSForLarge2 {
        100% {transform: rotate(180deg);}
}
@keyframes SSBackLarge2 {
        100% {transform: rotate(-180deg);}
}
@keyframes SSForMed2 {
        100% {transform: rotate(270deg);}
}
@keyframes SSBackMed2 {
        100% {transform: rotate(-270deg);}
}

@keyframes SSForward {
        100% {transform: rotate(360deg);}
}
@keyframes SSBackward {
        100% {transform: rotate(-360deg);}
}
@keyframes SSForward2 {
        100% {transform: rotate(360deg);}
}
@keyframes SSBackward2 {
        100% {transform: rotate(-360deg);}
}

#rev1 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 197px;
	margin-left: -170px;
	z-index: 90;
}
#rev2 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 197px;
	margin-left: -170px;
	z-index: 91;
}
#fore1 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 197px;
	margin-left: 7px;
	z-index: 90;
}
#fore2 {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 197px;
	margin-left: 7px;
	z-index: 91;
}





#rev1M {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 0px;
	margin-left: -170px;
	z-index: 90;
}
#rev2M {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 0px;
	margin-left: -170px;
	z-index: 91;
}
#fore1M {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 0px;
	margin-left: 7px;
	z-index: 90;
}
#fore2M {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 0px;
	margin-left: 7px;
	z-index: 91;
}

#videoCopy {
	position: absolute; 
	top: 50%; 
	left: 0px;
	margin-top: 0px;
	margin-left: 90px;
	margin-right: 90px;
	z-index: 1;
}

#2revM {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 0px;
	margin-left: 0px;
	z-index: 1;
}

#2foreM {
	position: absolute; 
	top: 50%; 
	left: 50%;
	margin-top: 0px;
	margin-left: 0px;
	z-index: 1;
}