body    	{background-color: black; font-family: Arial, Helvetica, sans-serif; 
			color: white; font-size: 1.2em; background-image: url(img/woven-light.png);
			font-weight: 300; background-size: 3%}

h1,h2,h3	{font-family: Palatino, "Palatino Linotype", "URW Pallido L", Serif; clear:both;}

h2			{color: white; padding-left: 125px; background-image: url(img/cube.png);
			background-repeat: no-repeat; height: 100px; background-position: 0, 50%;
			vertical-align: center; font-size: 2em; font-weight: 100;}

h1			{color: black;}

h3			{font-size: 1.5em; font-weight: 100;}

span 		{color: red}

p  			{font-size: 1.2em;}

table 		{width: 90%; color: white; border-width: 1px; border-color: white; 
			font-size: 1.2em; vertical-align: top;}
td			{padding: 15px;}
tr			{height: 100px;}
table b 	{text-align: right; font-weight: 700;}

#headSection {width: 100%; background-color: white; background-image: url(img/QLWlogo.png); 
				background-repeat: no-repeat;background-position: center; height: 460px;}

#subtitle	{text-align: center; position: relative; top: 400px; width: 100%; 
			letter-spacing: 22px;}

#main		{width: 80%; margin-left: auto; margin-right: auto; padding: 15px; 
			background-image: url(img/transpBlack90.png); margin-top: 30px; background-size: 100%}

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

.bar 		{background-color: red;  text-align: center; 
			box-shadow:   0 10px 10px 2px rgb(100,0,0);}

.box	{width: 80%; max-width: 1024px; min-width: 660px; margin-left: auto; margin-right: auto;}

#distruxia,#warpWake	{height: 350px;}

#softwareBox img {width: 200px; height: 200px;}

.two 		{width: 250px; margin: 10px; border-color: red; background-color: #202020; 
			text-align: center; float:left; height: 250px; 
			border: 3px solid red;}

.two h3 	{color: red; font-size: 1.4em;}

#techBox 	{height: 402px; background-image: url(img/techCloud.png); 
			background-repeat: no-repeat; background-size: 55%; 
			background-position: 40% 0;}

#web		{margin-left: 15%}

iframe		{float:left; margin-left: auto}

.textBlurb	{width: 55%; float: left; padding: 0 10px; margin-left: 30px;}

.leftFloat	{float: left;}

.rightFloat	{float: right;}

#navigation	{width: 102%; position: fixed;left: -20px; top: 0px; 
			 background-color: red; z-index: 20;}

#navigation img {height: 95%; width: 175px; margin-top: 2px; margin-left: 40px;}
#navigation ul 	{text-align: left; list-style-type: none;}
#navigation li,a 	{ color: white; text-decoration: none;}

#subtitle2	{text-align: center; position: relative; top: 400px; width: 100%; 
			letter-spacing: 7px;}

#profile	{width: 30%; float:left; margin-top: 13%; background-color: black;
			margin-left: 20px; height: 600px; border-radius: 30px;}

#picture	{height: 250px; width: 250px; margin-right: auto; margin-left: auto;
			border-radius: 100%; position: relative; top:  10px; background-size: 100%;
			background-image: url(img/me.jpg);}





.cubeWrap 	{perspective: 2400px; perspective-origin: 75% 100px;}

.cube 		{position: relative; width: 600px; transform-style: preserve-3d;}

.cube div 	{position: absolute; width: 600px; height: 600px;}

.back {transform:  translateY(0px)translateZ(-300px) rotateY(180deg); 
		background-position: center; background-size: 90%;background-repeat: no-repeat;
		background-color: black;}

.back h1	{color: white; text-align: center; font-weight: 200; }

.back img 	{width: 220px; height: 220px; margin:0 35px; }

.right {transform: rotateY(-270deg) translateX(300px) translateY(0px); transform-origin: top right;
		background-image: url(img/warpWakeTitle-01.png); background-size: 100%;}
	
.left {transform: rotateY(270deg) translateX(-300px) translateY(0px); transform-origin: center left;
		background-image: url(img/distruxia.png); background-size: 100%}
	
.top {transform: rotateX(-90deg) rotateX(180deg) translateY(-300px) translateZ(0px);
	transform-origin: top center; background-image: url(img/pennance.PNG); background-size: 100%;}
	

.bottom {transform: rotateX(270deg) translateY(300px) translateZ(0px);
	transform-origin: bottom center; background-image: url(img/zombie.png); background-size: 100%}
	

.front {transform: translateY(0px) translateZ(300px); background-image: url(img/QLWlogo.png);
		background-position: center; background-size: 90%; background-repeat: no-repeat;
		background-color: white;}

#technologies	{}

-webkit-@keyframes spin {
	0% { transform: rotateX(0) rotateY(0) translateY(0) translateZ(0);}
	50% { transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0); }
	62.5% { transform: rotateX(90deg) rotateY(360deg) translateY(-300px) translateZ(-300px);}
	75% { transform: rotateX(0deg) rotateY(360deg) translateY(0px) translateZ(0px);}
	87.5% {transform: rotateX(-90deg) rotateY(360deg) translateY(0px) translateZ(300px);}
	100% {transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0);}

}
-moz-@keyframes spin {
	0% { transform: rotateX(0) rotateY(0) translateY(0) translateZ(0);}
	50% { transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0); }
	62.5% { transform: rotateX(90deg) rotateY(360deg) translateY(-300px) translateZ(-300px);}
	75% { transform: rotateX(0deg) rotateY(360deg) translateY(0px) translateZ(0px);}
	87.5% {transform: rotateX(-90deg) rotateY(360deg) translateY(0px) translateZ(300px);}
	100% {transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0);}

}
-o-@keyframes spin {
	0% { transform: rotateX(0) rotateY(0) translateY(0) translateZ(0);}
	50% { transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0); }
	62.5% { transform: rotateX(90deg) rotateY(360deg) translateY(-300px) translateZ(-300px);}
	75% { transform: rotateX(0deg) rotateY(360deg) translateY(0px) translateZ(0px);}
	87.5% {transform: rotateX(-90deg) rotateY(360deg) translateY(0px) translateZ(300px);}
	100% {transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0);}

}
-ms-@keyframes spin {
	0% { transform: rotateX(0) rotateY(0) translateY(0) translateZ(0);}
	50% { transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0); }
	62.5% { transform: rotateX(90deg) rotateY(360deg) translateY(-300px) translateZ(-300px);}
	75% { transform: rotateX(0deg) rotateY(360deg) translateY(0px) translateZ(0px);}
	87.5% {transform: rotateX(-90deg) rotateY(360deg) translateY(0px) translateZ(300px);}
	100% {transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0);}

}
@keyframes spin {
	0% { transform: rotateX(0) rotateY(0) translateY(0) translateZ(0);}
	50% { transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0); }
	62.5% { transform: rotateX(90deg) rotateY(360deg) translateY(-300px) translateZ(-300px);}
	75% { transform: rotateX(0deg) rotateY(360deg) translateY(0px) translateZ(0px);}
	87.5% {transform: rotateX(-90deg) rotateY(360deg) translateY(0px) translateZ(300px);}
	100% {transform: rotateX(0) rotateY(360deg) translateY(0) translateZ(0);}

}
-webkit-@keyframes rotate{
	from { transform: rotateZ(0);}
	to { transform: rotateZ(360deg);}
}
-moz-@keyframes rotate{
	from { transform: rotateZ(0);}
	to { transform: rotateZ(360deg);}
}
-o-@keyframes rotate{
	from { transform: rotateZ(0);}
	to { transform: rotateZ(360deg);}
}
-ms-@keyframes rotate{
	from { transform: rotateZ(0);}
	to { transform: rotateZ(360deg);}
}
@keyframes rotate{
	from { transform: rotateZ(0);}
	to { transform: rotateZ(360deg);}
}


.cube {
	-webkit-animation: spin 30s infinite linear;
	-moz-animation: spin 30s infinite linear;
	-o-animation: spin 30s infinite linear;
	-ms-animation: spin 30s infinite linear;
	animation: spin 30s infinite linear;

}

.portrait { height: 300px; width: 300px; border-radius: 100%; }

#shelley 	{background-image: url(img/shelley.jpg); background-size: 100%}

#andrew		{background-image: url(img/drew.jpg); background-size: 100%}

#ben		{background-image: url(img/ben.jpg); background-size: 200%;
			background-position: 45% 15%;}

#josh		{background-image: url(img/josh.jpg); background-size: 155%;
			background-position: 35% 0;}

.frame 		{float:left; margin: 10px; }

#family 	{width: 85%;}

.widePic	{width: 50%; background-image: url(img/bandup.jpg); background-size: 100%;
			border-radius: 20px; height: 320px; background-repeat: no-repeat; }

#music 		{width: 45%; height:320px; margin: 0 10px;}

#books 		{background-image: url(img/bookCloud.png); width: 100%; height: 1150px;
			 background-position: center; background-size: 140%; background-repeat: no-repeat;}

#sideBar	{width: 5%; margin-right: 0px; position: fixed; right: 0px;}

.hoverSlide {width: 500px; height: 100px; padding-top: auto; padding-bottom: auto;
			background-color: red; margin-top: 50px; 
			-webkit-transform: translateX(-50px) rotateZ(-45deg);
			-moz-transform: translateX(-50px) rotateZ(-45deg);
			-o-transform: translateX(-50px) rotateZ(-45deg);
			-ms-transform: translateX(-50px) rotateZ(-45deg);
			transform: translateX(-50px) rotateZ(-45deg);
			-webkit-transition: transform 1s; 
			-moz-transition: transform 1s;
			-o-transition: transform 1s;
			-ms-transition: transform 1s;
			transition: transform 1s;
			color: red;}

.hoverSlide p 	{font-size: .8em;}

.hoverSlide img 	{float: left; margin-left: 10px; margin-top: 5px; 
					width:85px; height: 85px; margin-right: 3px;}


.hoverSlide:hover 	{-webkit-transform: translateX(-120px) translateY(30px) rotateZ(-45deg);
					-moz-transform: translateX(-120px) translateY(30px) rotateZ(-45deg); 
					-o-transform: translateX(-120px) translateY(30px) rotateZ(-45deg); 
					-ms-transform: translateX(-120px) translateY(30px) rotateZ(-45deg); 
					transform: translateX(-120px) translateY(30px) rotateZ(-45deg); 
					color: white;}

@media  screen and (min-width: 1200px) {
	
	#navigation		{height: 60px;}

	#navigation li,a 	{ display: inline; margin-right: 40px; color: white; 
					text-decoration: none;}
					
	#navigation ul 	{ float: right; margin-left: auto; text-align: right;}

	#cubePosition	{ margin-right: 25%; margin-top: 10%; width:45%;
				 float: right;}

}

@media  screen and (max-width: 1200px) {

	.hoverSlide {
			-webkit-transform: translateX(-100px) rotateZ(-45deg);
			-moz-transform: translateX(-100px) rotateZ(-45deg);
			-o-transform: translateX(-100px) rotateZ(-45deg);
			-ms-transform: translateX(-100px) rotateZ(-45deg);
			transform: translateX(-100px) rotateZ(-45deg);}

	.hoverSlide:hover 	{-webkit-transform: translateX(-150px) translateY(30px) rotateZ(-45deg);
					-moz-transform: translateX(-150px) translateY(30px) rotateZ(-45deg); 
					-o-transform: translateX(-150px) translateY(30px) rotateZ(-45deg); 
					-ms-transform: translateX(-150px) translateY(30px) rotateZ(-45deg); 
					transform: translateX(-150px) translateY(30px) rotateZ(-45deg); 
					color: white;}

	#cubePosition	 {margin-top: 30%; float: left; margin-left: 15%; transform: scale(.5);}
}