body
{
 -webkit-perspective: 5000px;
 -webkit-transform: translateZ(-1000px );
 -webkit-perspective-origin: 50% 50%;
 -moz-perspective: 5000px;
 -moz-transform: translateZ(-1000px );
 -moz-perspective-origin: 50% 50%;
 min-height: 100%;
 background: #484848;
 height: auto;
 text-align: center;
 font-family: 'Bangers' , cursive;
 color: #fff;
 text-shadow: 2px 2px 1px rgba(0,0,0,0.5), 0 0 2px #000;
 letter-spacing: .2em;
overflow-x:hidden;
}
body, ul, li, div, h1, h2, p, i
{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
h1, h2, p
{
-webkit-transform: translateZ(-100px ) rotatex(10deg);
-moz-transform: translateZ(-100px ) rotatey(10deg);
}
#threedeme ul, #threedeme li
{
 list-style-type: none;
margin:0;
padding:0;
display:block;
}


/********************** Colours ********************************/


#threedeme li:nth-of-type(5):before
{
background-color: rgba(200,164,147,0.8);
}
#threedeme li.one
{
background-color: rgba(191,148,130,0.8);
}
#threedeme li.two, #threedeme b, #threedeme b
{
background-color: rgba(174,119,98,0.8);
}
#threedeme li.three, #threedeme li:nth-of-type(4):before
{
background-color: rgba(145,96,75,0.8);
}
#threedeme li.four
{
background-color: rgba(191,148,130,0.5);
}
#threedeme li:before
{
background-color: rgba(182,134,114,0.8);
}
#threedeme li:after
{
background-color: rgba(162,107,83,0.8);
}
a:link, a:visited
{
 color: #FFCC99;
text-decoration:none;
}
a:hover
{
 color: #FFCC99;
text-decoration: underline;
}
div#threedeme
{
 margin: 100px auto;
 width: 300px;
 height: 300px;
-webkit-transform: translateZ(0px );
-moz-transform: translateZ(0px );
position:relative;
}
#threedeme ul
{
 width: 300px;
 height: 300px;
-webkit-transform: translateZ(300px );
-moz-transform: translateZ(300px );
position:absolute;
font-size:0;
}
#threedeme li, #threedeme li:before, #threedeme li:after, #threedeme i, #threedeme i:after, #threedeme b
{
position:absolute;
}
#threedeme li:before, #threedeme li:after, #threedeme i:after
{
content:"";
display:block;
}
#threedeme i
{
 display: block;
 background-color: #333300;
 border-radius: 50%;
}
#threedeme i:after
{
left:3px;
top:3px;
 background-color: #000;
 border-radius: 50%;
-webkit-transform: translateZ(2px);
-moz-transform: translateZ(2px);
height:6px;
width:6px;
}

#threedeme li:nth-of-type(1)
{
width:40px;
height:60px;
-webkit-transform: translateZ(30px ) rotatex(90deg);
-moz-transform: translateZ(30px ) rotatex(90deg);
top:-30px;
left:130px;
}
/*
li:nth-of-type(1):before
{
width:30px;
height:60px;
-webkit-transform: translateZ(-5px ) rotatey(-20deg);
-moz-transform: translateZ(-5px ) rotatey(-20deg);
left:-30px;
}
*/
#threedeme li:nth-of-type(2)
{
width:40px;
height:40px;
-webkit-transform: translateZ(75px) rotatex(60deg);
-moz-transform: translateZ(75px) rotatex(60deg);
top:-10px;
left:130px;
}
#threedeme li:nth-of-type(2):before
{
width:40px;
height:40px;
-webkit-transform: translateZ(-10px) rotatey(-30deg);
-moz-transform: translateZ(-10px) rotatey(-30deg);
top:0px;
left:-37px;
border-radius: 0 0 0 40px;
}
#threedeme li:nth-of-type(2):after
{
width:40px;
height:40px;
-webkit-transform: translateZ(-10px) rotatey(30deg);
-moz-transform: translateZ(-10px) rotatey(30deg);
top:0px;
right:-37px;
border-radius: 0 0 40px 0;
}













#threedeme li:nth-of-type(3)
{
width:40px;
height:60px;
-webkit-transform: translateZ(100px) rotatex(10deg);
-moz-transform: translateZ(100px) rotatex(10deg);
top:20px;
left:130px;
}
#threedeme li:nth-of-type(3):before
{
width:100%;
height:100%;
left:-35px;
-webkit-transform: translateZ(-15px) rotatey(-40deg);
-moz-transform: translateZ(-15px) rotatey(-40deg);
}
#threedeme li:nth-of-type(3):after
{
width:100%;
height:100%;
right:-35px;
-webkit-transform: translateZ(-15px) rotatey(40deg);
-moz-transform: translateZ(-15px) rotatey(40deg);
}
#threedeme li:nth-of-type(4)
{
width:40px;
height:20px;
-webkit-transform: translateZ(95px) rotatex(-60deg);
-moz-transform: translateZ(95px) rotatex(-60deg);
top:75px;
left:130px;
}
#threedeme li:nth-of-type(4):before
{
width:100%;
height:100%;
left:-29px;
-webkit-transform: translateZ(-5px) rotatey(-15deg) rotate(-40deg);
-moz-transform: translateZ(-5px) rotatey(15deg) rotate(40deg);
top:12px;
}
#threedeme li:nth-of-type(4):after
{
width:100%;
height:100%;
right:-29px;
-webkit-transform: translateZ(-5px) rotatey(15deg) rotate(40deg);
-moz-transform: translateZ(-5px) rotatey(15deg) rotate(40deg);
top:12px;
}

/*nose*/

#threedeme li:nth-of-type(5)
{
width:20px;
height:60px;
-webkit-transform: translateZ(100px) rotatex(30deg);
-moz-transform: translateZ(100px) rotatex(30deg);
top:85px;
left:140px;
}
#threedeme li:nth-of-type(5):before
{
width:30px;
height:100%;
left:-18px;
-webkit-transform: translateZ(-15px) rotatey(-75deg);
-webkit-transform: translateZ(-15px) rotatey(-75deg);
border-radius: 0 0 0 10px;
}
#threedeme li:nth-of-type(5):after
{
width:30px;
height:100%;
right:-18px;
-webkit-transform: translateZ(-15px) rotatey(75deg);
-moz-transform: translateZ(-15px) rotatey(75deg);
border-radius: 0 0 10px 0;
}

#threedeme li:nth-of-type(7)
{
width:20px;
height:10px;
-webkit-transform: translateZ(113px) rotatex(-30deg);
-moz-transform: translateZ(113px) rotatex(-30deg);
top:140px;
left:140px;
}
#threedeme li:nth-of-type(7):before
{
width:10px;
height:10px;
left:-7px;
-moz-transform: translateZ(-5px) rotatey(-45deg);
-webkit-transform: translateZ(-5px) rotatey(-45deg);
border-radius: 10px 0 0 10px;
}
#threedeme li:nth-of-type(7):after
{
width:10px;
height:10px;
right:-7px;
-webkit-transform: translateZ(-5px) rotatey(45deg);
-moz-transform: translateZ(-5px) rotatey(45deg);
border-radius: 0 10px 10px 0;
}

#threedeme li:nth-of-type(8)
{
width:10px;
height:20px;
-webkit-transform: translateZ(100px) rotatex(-80deg);
-moz-transform: translateZ(100px) rotatex(-80deg);
top:141px;
left:145px;
}
/*
#threedeme li:nth-of-type(8):before
{
width:5px;
height:30px;
-webkit-transform: translateZ(-5px) rotate(10deg) rotatex(30deg) ;
left:-15px;
top:-7px;
}
#threedeme li:nth-of-type(8):after
{
width:5px;
height:30px;
-webkit-transform: translateZ(-5px) rotate(-10deg) rotatex(30deg) ;
right:-15px;
top:-7px;
}
*/
#threedeme li:nth-of-type(8):before
{
width:100%;
height:100%;
-webkit-transform: translateZ(-5px) rotatey(90deg);
-moz-transform: translateZ(-5px) rotatey(90deg);
left:-5px;
background-color: rgba(112,74,56,0.9);
}
#threedeme li:nth-of-type(8):after
{
width:100%;
height:100%;
-webkit-transform: translateZ(-5px) rotatey(-90deg);
-moz-transform: translateZ(-5px) rotatey(-90deg);
right:-5px;
background-color: rgba(78,52,39,0.9);
}



/*top lip*/

#threedeme li:nth-of-type(9)
{
width:10px;
height:20px;
-webkit-transform: translateZ(90px) rotatey(45deg);
-moz-transform: translateZ(90px) rotatey(45deg);
top:150px;
left:142px;
}
#threedeme li:nth-of-type(9):before
{
width:40px;
height:20px;
-webkit-transform: translateZ(-20px) rotatey(-85deg);
-moz-transform: translateZ(-20px) rotatey(-85deg);
left:-20px;
}

#threedeme li:nth-of-type(10)
{
width:10px;
height:20px;
-webkit-transform: translateZ(90px) rotatey(-45deg);
-moz-transform: translateZ(90px) rotatey(-45deg);
top:150px;
left:148px;
}
#threedeme li:nth-of-type(10):after
{
width:40px;
height:20px;
-webkit-transform: translateZ(-20px) rotatey(85deg);
-moz-transform: translateZ(-20px) rotatey(85deg);
right:-20px;
}


#threedeme li:nth-of-type(11)
{
width:60px;
height:5px;
-webkit-transform: translateZ(80px) rotatex(45deg);
-moz-transform: translateZ(80px) rotatex(45deg);
top:174px;
left:120px;
border-radius: 0 0 10px 10px;
}
#threedeme li:nth-of-type(12)
{
width:40px;
height:10px;
-webkit-transform: translateZ(81px) rotatex(-20deg);
-moz-transform: translateZ(81px) rotatex(-20deg);
top:178px;
left:130px;
}
#threedeme li:nth-of-type(12):before
{
width:40px;
height:10px;
-webkit-transform: translateZ(-17px) rotatey(-60deg);
-moz-transform: translateZ(-17px) rotatey(-60deg);
left:-30px;
}
#threedeme li:nth-of-type(12):after
{
width:40px;
height:10px;
-webkit-transform: translateZ(-17px) rotatey(60deg);
-moz-transform: translateZ(-17px) rotatey(60deg);
right:-30px;
}




#threedeme li:nth-of-type(13)
{
width:20px;
height:20px;
-webkit-transform: translateZ(83px) rotatex(20deg);
-moz-transform: translateZ(83px) rotatex(20deg);
top:187px;
left:140px;
}
#threedeme li:nth-of-type(14)
{
width:20px;
height:15px;
-webkit-transform: translateZ(80px) rotatex(-50deg);
-moz-transform: translateZ(80px) rotatex(-50deg);
top:204px;
left:140px;
}
#threedeme li:nth-of-type(15)
{
width:20px;
height:40px;
-webkit-transform: translateZ(53px) rotatex(-100deg);
-moz-transform: translateZ(53px) rotatex(-100deg);
top:194px;
left:140px;
}
#threedeme li:nth-of-type(16)
{
width:20px;
height:40px;
-webkit-transform: translateZ(22px) rotatex(-40deg);
-moz-transform: translateZ(22px) rotatex(-40deg);
top:206px;
left:140px;
}

/******************** glasses *************************/

#threedeme .left, #threedeme .right
{
 background-image: url('headshine.png');
}

#threedeme li:nth-of-type(17):before,#threedeme li:nth-of-type(17):after, #threedeme li:nth-of-type(18):before, #threedeme li:nth-of-type(18):after
{
background-color: rgba(255,255,255,0.1);
border-radius:5px;
}
#threedeme li:nth-of-type(17)
{
width:50px;
height:20px;
-webkit-transform: translateZ(100px) rotatex(-10deg);
-moz-transform: translateZ(100px) rotatex(-10deg);
top:90px;
left:95px;
background-color: rgba(255,255,255,0.1);
}
#threedeme li:nth-of-type(17):before
{
width:50px;
height:20px;
-webkit-transform: translateZ(3px);
-moz-transform: translateZ(3px);
top:0;
left:0;
}
#threedeme li:nth-of-type(17):after
{
width:70px;
height:5px;
-webkit-transform: translateZ(-30px) rotatey(100deg);
-moz-transform: translateZ(-30px) rotatey(100deg);
top:0;
left:-45px;
background-color: rgba(0,0,0,0.9);
}
#threedeme li:nth-of-type(18)
{
width:50px;
height:20px;
-webkit-transform: translateZ(100px) rotatex(-10deg);
-moz-transform: translateZ(100px) rotatex(-10deg);
top:90px;
left:155px;
background-color: rgba(255,255,255,0.1);
}
#threedeme li:nth-of-type(18):before
{
width:50px;
height:20px;
-webkit-transform: translateZ(3px);
-moz-transform: translateZ(3px);
top:0;
left:0;
}
#threedeme li:nth-of-type(18):after
{
width:70px;
height:5px;
-webkit-transform: translateZ(-30px) rotatey(80deg);
-moz-transform: translateZ(-30px) rotatey(80deg);
top:0;
right:-45px;
background-color: rgba(0,0,0,0.9);
}

/******************** eyes *************************/

#threedeme li:nth-of-type(19), #threedeme li:nth-of-type(20)
{
width:30px;
height:10px;
-webkit-transform: translateZ(85px);
-moz-transform: translateZ(85px);
top:95px;
background-color: rgba(255,255,255,0.5);
border-radius:50%;
}
#threedeme li:nth-of-type(19) i, #threedeme li:nth-of-type(20) i
{
width:12px;
height:12px;
-webkit-transform: translateZ(2px);
-moz-transform: translateZ(2px);
}
#threedeme li:nth-of-type(19)
{
left:105px;
}
#threedeme li:nth-of-type(20)
{
left:165px;
}
#threedeme li:nth-of-type(19) b, #threedeme li:nth-of-type(20) b
{
display:block;
width:34px;
height:14px;
left:-2px;
top:-2px;
-webkit-transform: translateZ(6px);
-moz-transform: translateZ(6px);
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-name: blink;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
}


/************************* ANIMATION *****************************/


@-webkit-keyframes blink
{
0% {
height:0px;
}
96%
{
height:0px;
}
98% {
height:16px;
}
}

@-moz-keyframes blink
{
0% {
height:0px;
}
96%
{
height:0px;
}
98% {
height:16px;
}
}

/************************* back of head *****************************/



#threedeme li:nth-of-type(6)
{
width:40px;
height:60px;
-webkit-transform: translateZ(-21px) rotatex(-50deg);
-moz-transform: translateZ(-21px) rotatex(-50deg);
left:130px;
top:-10px;
}
#threedeme li:nth-of-type(21)
{
width:40px;
height:40px;
-webkit-transform: translateZ(-47px) rotatex(-10deg);
-moz-transform: translateZ(-47px) rotatex(-10deg);
left:130px;
top:39px;
}
#threedeme li:nth-of-type(22)
{
width:40px;
height:50px;
-webkit-transform: translateZ(-44px) rotatex(15deg);
-moz-transform: translateZ(-44px) rotatex(15deg);
left:130px;
top:78px;
}


/************************* Eye Brows *****************************/


#threedeme li:nth-of-type(23)
{
width:30px;
height:5px;
-webkit-transform: translateZ(104px) rotate(10deg);
-moz-transform: translateZ(104px) rotate(10deg);
top:65px;
left:110px;
background-color: rgba(0,0,0,0.3);
}
#threedeme li:nth-of-type(24)
{
width:30px;
height:5px;
-webkit-transform: translateZ(104px) rotate(-10deg);
-moz-transform: translateZ(104px) rotate(-10deg);
top:65px;
left:160px;
background-color: rgba(0,0,0,0.3);
}
#threedeme li:nth-of-type(23):after
{
width:12px;
height:5px;
-webkit-transform:rotate(-10deg) skew(0deg,-30deg);
-moz-transform:rotate(-10deg) skew(0deg,-30deg);
top:5px;
left:-10px;
background-color: rgba(0,0,0,0.3);
}
#threedeme li:nth-of-type(24):after
{
width:12px;
height:5px;
-webkit-transform:rotate(10deg) skew(0deg,30deg);
-moz-transform:rotate(10deg) skew(0deg,30deg);
top:5px;
right:-10px;
background-color: rgba(0,0,0,0.3);
}

/* cheek bones */

#threedeme li:nth-of-type(25)
{
width:30px;
height:30px;
-webkit-transform: translateZ(83px) rotatex(30deg);
-moz-transform: translateZ(83px) rotatex(30deg);
top:90px;
left:107px;
}
#threedeme li:nth-of-type(25):after
{
width:30px;
height:50px;
-webkit-transform: translateZ(-22px) rotatex(-60deg);
-moz-transform: translateZ(-22px) rotatex(-60deg);
top:17px;
left:0px;
border-radius: 0 0 10px 10px;
}
#threedeme li:nth-of-type(25):before
{
width:20px;
height:15px;
-webkit-transform: translateZ(-20px) rotatey(-30deg) rotatex(-10deg);
-moz-transform: translateZ(-20px) rotatey(-30deg) rotatex(-10deg);
top:45px;
left:10px;
border-radius: 10px 0 10px 10px;
}

#threedeme li:nth-of-type(26)
{
width:30px;
height:30px;
-webkit-transform: translateZ(83px) rotatex(30deg);
-moz-transform: translateZ(83px) rotatex(30deg);
top:90px;
left:163px;
}
#threedeme li:nth-of-type(26):after
{
width:30px;
height:50px;
-webkit-transform: translateZ(-22px) rotatex(-60deg);
-moz-transform: translateZ(-22px) rotatex(-60deg);
top:17px;
left:0px;
border-radius: 0 0 10px 10px;
}
#threedeme li:nth-of-type(26):before
{
width:20px;
height:15px;
-webkit-transform: translateZ(-20px) rotatey(30deg) rotatex(-10deg);
-moz-transform: translateZ(-20px) rotatey(30deg) rotatex(-10deg);
top:45px;
left:0px;
border-radius: 0 10px 10px 10px;
}