* { 
	--webkit-transition: -webkit-transform 0s, opacity 6s ease;
	}
	
kk* { border: solid  red 1px; }

#mhp {
    overflow-x: hidden;
}

body {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px	;
    margin-right: 0px;
    font-family: Helvetica;
    min-height: 900px;
    height: auto;
    overflow: hidden;
    width: auto;
    background-position: 50% 200px;
    background-repeat: no-repeat no-repeat;
}
.page {
	height:768px;
	width:1024px;
    background-color: rgb(25, 42, 65);
	overflow: hidden;
	position:absolute;

}

.steel {
	  background-image: -webkit-gradient(linear, left top, left bottom, 
	color-stop(0.00, white), 
		color-stop(25%, rgb(83,83,83)),
		color-stop(50%, white),
		color-stop(75%, rgb(3,3,3)),
	
		color-stop(1.00, white)	
	
	
	);
 -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-shadow: rgba(0, 0, 0, 0) 30px 14px 5px;

}

.banner {
    font-family: 'Lucida Grande', Arial, sans-serif;
    overflow: hidden;
    border-top-left-radius: 0px 0px;
    border-top-right-radius: 0px 0px;
    border-bottom-left-radius: 0px 0px;
    border-bottom-right-radius: 0px 0px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 44px;
    position: absolute;
    margin-top: 0px;
    height: 100px;
    width: 1000px;
    left: 0px;
    top: 4px;
}

.circle {
    width: 80px;
    height: 80px;
    display: block;
    }



#topicWrapper {
    color: rgb(200, 200, 200);
    margin-top: 50px;
    margin-left: 80px;
    width: auto;
    height: auto;
	line-height: 2em;
	font-size: 20px;
}

.detail_box li{
	line-height: 2em;
}

#topicWrapper li:hover,
.detail_box a:hover,
.detail_box li:hover,
.detail_box div:hover


 {
	color:white;
	font-size: 105%;
}

#bigCircle {
    position: absolute;
    margin-top: 0px;
    height: 320px;
    left: 30px;
    top: 120px;
   
    width: 320px;
	border:0;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat no-repeat;
    background-image: url(../Images/metal-cog.png);

}



.puc-container {
	position:absolute;
    height: 90%;
    width: 900px;
	opacity:.2;
	left:2.5%;
	top: 10%;
	border:solid  1px white;
	padding: 30px;
	z-index:2;
	-webkit-transition: -webkit-transform 1s ease-in-out, opacity 1s ease;
	-webkit-transform: translate3d(-2000px,0px,0px);
	    overflow: hidden;

}
.puc-container iframe {
	width:500px;
}
#popupContent {
}

.puc-container.visible {
	opacity:1;
	-webkit-transform: translate3d(0px,0px,0px);
}

#popupContent * {
	height:100%;
	width:100%;
	border:solid;
}

#closePage {
    border-color: black;
    border-style: solid;
    position: absolute;
    margin-top: 0px;
    height: 15px;
    width: 15px;
    color: rgb(0, 0, 0);
    text-align: center;
    border-width: 3px;
    font-size: 12px;
    left: 3px;
    top: 3px;
}

.close:hover {
	    color: rgb(255, 255, 255);
}

#colors-rs {
    margin-right: 0px;
    margin-left: 0px;
    -webkit-margin-top-collapse: separate;
    -webkit-margin-bottom-collapse: separate;
    width: 155px;
    min-height: 54px;
    height: auto;
}

.detail_box {
	-webkit-transform-origin:50% -150px; 
    font-size: 20px;
    overflow: hidden;
    color: rgb(198, 198, 198);
    min-height: 98px;
	background-image:url(../Images/metal-cog.png);
	background-size:100% 100%;
	background-color:rgba(0,0,0,0);
	position:absolute;
	left: 400px;
    top: 400px;
    height: 350px;
    width: 350px;
	padding: 0px;
	opacity:0;
}
.detail_box a {
    color: rgb(198, 198, 198);
}

.detail_box>* {
	position:absolute;
	-webkit-transform-origin:95px 95px; 
	margin: 80px;
}

..detail_box>* {
	-webkit-transform: rotateZ(-270deg);
}

	/* transform to match centres
		--webkit-transform: translate3d(-395px,-305px,200px) rotateZ(0deg);
	*/	
	/* to touch surfaces move down sum of radii 
	
	-webkit-transform: translate3d(-395px,-60px,200px) rotateZ(270deg);	
		opacity:.5;	
	*/

.detail_box.rotated {
	-webkit-transform: translate3d(-385px,30px,200px) rotateZ(270deg);
	-webkit-animation: circle-in 1s linear ;
	opacity:1.0;
	z-index:100;
}

.detail_box.unrotated {
	-webkit-animation: circle-out 1s linear ;
}

.detail_box.rotated>* {
	-webkit-transform: rotateZ( -270deg);	
	-webkit-animation: circle-in-counter 1s linear
}

#project_details.rotated {

}

@-webkit-keyframes circle-in
{
	0% 		{-webkit-transform: translate3d(0px,0px,200px);}
	50%		{-webkit-transform: translate3d(-385px,30px,200px) ;	}
	75%		{-webkit-transform: translate3d(-385px,30px,200px)  rotateZ(135deg);		}
	100%	{-webkit-transform: translate3d(-385px,30px,200px)  rotateZ(270deg);		}
}
@-webkit-keyframes circle-out
{
	100% 	{-webkit-transform: translate3d(0px,0px,200px); }
	75%		{-webkit-transform: translate3d(-385px,30px,200px);}
	50%		{-webkit-transform: translate3d(-385px,30px,200px) rotateZ(135deg);		}
	0%		{-webkit-transform: translate3d(-385px,30px,200px) rotateZ(270deg); opacity:1;		}
}

@-webkit-keyframes circle-in-counter
{
	0%		{-webkit-transform: rotateZ( 0000deg);}
	50%		{-webkit-transform: rotateZ( 0000deg);}
	75%	    {-webkit-transform: rotateZ( -135deg);		}
	100%	{-webkit-transform: rotateZ( -270deg);		}
}



.book-list:hover ,
.book-list.rotated {
	left:400px;
	opacity:1;
	z-index:100;
}

.book-list {
	position:absolute;
	height:auto;
	top: 10%;
	left:-1000px;
	padding: 30px;
	-webkit-transition: left 1s linear, opacity 2s ease;
	opacity:.2;
	z-index:100;
}

#contact_details {
	-webkit-transform-origin:-150px 50%; 
	opacity:0;
	height: 140px;
	width: 320px;
    background-image: url(../Images/metal-squarecog.png);
	background-size:contain;
	background-position: -0px,0px;
	background-repeat: no-repeat no-repeat;
	left:200px;
	top:600px;

}
/*
**	Animate the contact details in a moving box
**
*/
#contact_details>*{
	margin:60px 40px 60px 52px;
}

#contact_details.rotated>* {
	-webkit-transform: rotateZ( 0deg);	
	-webkit-animation: none 1s linear
}

#contact_details.rotated {
	-webkit-transform: translate3d(145px,-405px,200px) rotateZ(0deg);	
	-webkit-animation: square-in 1s linear ;
	opacity:1.0
}

#contact_details.unrotated {
	-webkit-animation: square-out 1s linear ;
	opacity:0.0
}

@-webkit-keyframes square-in
{
	0% 		{-webkit-transform: translate3d(0px,0px,200px); opacity:0;}
	50%		{-webkit-transform: translate3d(145px,-405px,200px) rotateZ(90deg);;		}
	75%		{-webkit-transform: translate3d(145px,-405px,200px) rotateZ(225deg);		;}
	100%	{-webkit-transform: translate3d(145px,-405px,200px) rotateZ(360deg);		opacity:1;}
}

@-webkit-keyframes square-out
{
	100% 	{-webkit-transform: translate3d(0px,0px,200px); opacity:0; }
	75%		{-webkit-transform: translate3d(145px,-405px,200px) rotateZ(90deg);	;}
	50%		{-webkit-transform: translate3d(145px,-405px,200px) rotateZ(225deg); 		}
	0%		{-webkit-transform: translate3d(145px,-405px,200px) rotateZ(360deg);	opacity:1; }
}

/*
**
**		END OF Contact Details
**
*/

/*
**
**		M H P Introduction Video
**
*/

.MHPIntro  {
	position:absolute;
	width:100%;
	height:100%;
	margin: 0px;
	left:0px;
	top:0px;
	margin-top:0%;
	z-index:200;
	background:inherit;
	-webkit-transition: -webkit-transform 1.5s ease-in-out;
	-webkit-transform:translate3d(-3000px,0px,0px);

}

video {
	margin-left:15%;
	width:720px;
	height:534px;
}
.video-playing .MHPIntro  {
	display:block;
}

.video-ended .MHPIntro,
.video-ended .veil  {
	-webkit-transform:translate3d(-3000px,0px,0px);
}

.veil {
	position:absolute;
	height:	1000px;
	width:	1024px;
	left:0;
	top:0;
	z-index:199;
	background-color: rgb(25, 42, 65);
	
	
		-webkit-transform:translate3d(-3000px,0px,0px);

}

.video-playing .veil {
	display:block;
}


/*
**
**	Putt the horse on
*/

.horse {
	position:absolute;
	background-size:contain;
    background-repeat:no-repeat no-repeat;
	background-position: 0% 0%;
	height:600px;
	width:700px;
	left:225px;
	top:210px;
	-webkit-transform-origin:75% 75%; 
	-webkit-transform: scale3d(.9,.9,.9);

}

.rotated~.horse {
	-webkit-transform: translate3d(150px,0px,200px) scale3d(.9,.9,.9);rotateZ(0deg); 
	-webkit-animation: rear-back 1s ease ;
	opacity:.6;
}

.unrotated~.horse {
	-webkit-animation: rear-back-rev 1s ease ;
}

.horse * {
	height:100px;
	width:100px;
	position:absolute;
	background-size:contain;
    background-repeat:no-repeat no-repeat;
	background-position: 0% 0%;
	-webkit-transition: -webkit-transform 1.5s ease;
}

.horse .body {
	height:600px;
	width:700px;
    background-image: url(../Images/horse_noLeg.png);
}

.horse .shoulder {
    background-image: url(../Images/horse_shoulder.png);
	top:180px;
	left:214px;
	height:120px;
	width:140px;
	z-index:1;
}

.horse .leg {
	height:100px;
	width:225px;
	top:213px;
	left:83px;
    background-image: url(../Images/horse_upperLeg.png);
	-webkit-transform-origin:90% 50%;
}

.rotated~.horse .leg {
	-webkit-animation:horse-leg-down 1.0s 2;
}

.horse .knee {
	height:100px;
	width:225px;
	top:0px;
	left:0px;
    background-image: url(../Images/knee.png);
	-webkit-transform-origin:90% 50%; 

}

.horse .lower-leg {
	height:130px;
	width:50px;
	left:5px;
	top:60px;
    background-image: url(../Images/horse_lowerLeg.png);
	-webkit-transform-origin:25% 5%; 
}

.rotated~.horse .lower-leg {
	-webkit-animation:horse-lower-leg-down 1.0s 2;
}


.horse .hoof {
	height:50px;
	width:40px;
	bottom:-4px;
	right:-27px;
    background-image: url(../Images/horse_hoof.png);
	-webkit-transform-origin:25% 5%; 
}

.rotated~.horse .hoof {
	-webkit-animation:horse-hoof-down 1.0s 2;
}



@-webkit-keyframes horse-leg-down
{
	0% 		{-webkit-transform:rotateZ(-00deg) translate3d(00px, 00px, 0px); }
	50% 	{-webkit-transform:rotateZ(-45deg) translate3d(25px, -40px, 0px); }
	100% 	{-webkit-transform:rotateZ(-00deg) translate3d(00px, 00px, 0px); }
}

@-webkit-keyframes horse-lower-leg-down
{
	0% 		{-webkit-transform:rotateZ(-00deg) translate3d(00px, 00px, 0px); }
	50% 	{-webkit-transform:rotateZ(60deg)  translate3d(00px, 15px, 0px);  }
	100% 	{-webkit-transform:rotateZ(-00deg) translate3d(00px, 00px, 0px); }
}

@-webkit-keyframes horse-hoof-down
{
	0% 		{-webkit-transform:rotateZ(-00deg) translate3d(00px, 00px, 0px); }
	50% 	{-webkit-transform:rotateZ(75deg) translate3d(0px, -00px, 0px); }
	100% 	{-webkit-transform:rotateZ(-00deg) translate3d(00px, 00px, 0px); }
}


@-webkit-keyframes rear-back
{
	0% 	{-webkit-transform: translate3d(00px,0px,200px) scale3d(.9,.9,.9);
;}
	100% 	{-webkit-transform: translate3d(150px,0px,200px) rotateZ(00deg)  scale3d(.9,.9,.9); opacity:1; }
}

@-webkit-keyframes rear-back-rev
{
		100%{-webkit-transform: translate3d(00px,0px,200px)  scale3d(.9,.9,.9);  }
		0% 	{-webkit-transform: translate3d(150px,0px,200px) rotateZ(00deg)  scale3d(.9,.9,.9); opacity:1; }
}