html, body {
    height: 100%;
}


body {
    margin: 0;
}
/* typography */

h1 {
	margin-bottom: 10px;
    font-size: 16px;
    line-height: 23px;
}

h1.name {
	font-size: 18vw;
	line-height: 180px;
	margin: 0 0 60px;
}


h2 {
	font-size: 16px;
	font-weight: bold;
}

h3 {
	font-size: 12px;
	margin-top: 20px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
}

sidebar, sidebar ul, sidebar ul li, sidebar h3 {
   display: block;  
}

sidebar h1 {
	margin-bottom: 2px;
}

sidebar a {
	border: none;
}

a { }

a:hover {
	}

a:active: {
	position: relative;
	bottom: -1px;
}


sidebar li {
    font-size: 12px;
    text-align: left;
}

section li {
	line-height: 22px;
	margin-bottom: 10px;
}

p {margin-bottom: 20px;}

p a {
    border-bottom: #fff dotted 1px;
}

ul {
	margin-bottom: 10px;
}

p span {
    text-transform: uppercase;
    font-size: 16px;
}

p a {
    border: transparent;
}

footer a:hover {
    color: #fff;
}



/* structure */

container {
	max-width: 800px;
	margin: 0 auto;
}


section, footer {
    margin: 0 0 40px 0px;
        width: 100%;
    max-width: 800px;
}

section#previously ul {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

/* sidebar */


li {line-height: 18px}


footer {
	text-align: left;
	padding: 0;
}

footer span {
    display: inline;
}


/* animations */

.letter {
	display: inline-block;
	
}

.letter {
    -webkit-transform: rotateY(0deg); /* Safari */
    transform: rotateY(0deg);
    color: #fff !important;
    transition-timing-function: ease-in-out;
    -webkit-transition:  1s; /* Safari */
    transition:  1s;
}


.letter:hover {
    -webkit-transform: rotateY(180deg); /* Safari */
    transform: rotateY(180deg);
    color: #fff !important;
    transition-timing-function: ease-in-out;
    -webkit-transition:  1s; /* Safari */
    transition:  1s;
}


/* 3d */

/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ 
#tridiv {
	position: static;
	width: 100%;
	height: 200px;
	z-index: -2;
	opacity: .5;
	overflow: visible;
	text-align: center;
	
}

.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 0;
  height: 0;
  -webkit-transform-style: preserve-3d;
  -webkit-animation: rotatestar 5s linear infinite;
  margin: 40px 0 0 380px;
}

.shape {
  top: 0%;
  left: 0%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}

@-webkit-keyframes rotatestar {
  0% { -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg); }
  100% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
	position: absolute;
	top: 250px;
	left: 100px;
	width: 150px;
	height: 200px;
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="pyramid"] .face-wrapper .face {
  transform: rotateZ(45deg) translateX(-35.35%) translateY(35.35%);
}
[class*="pyramid"] .bk {
  left: 100%;
}
[class*="pyramid"] .bm {
  top: 100%;
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="pyramid"] .rt, [class*="pyramid"] .lt {
  transform-origin: 50% 0;
}
[class*="prism"] .ft, [class*="prism"] .bk {
  width: 100%;
  height: 100%;
}
[class*="prism"] .bk {
  left: 100%;
}
[class*="prism"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="prism"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="prism"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="prism"] .lt {
  left: 100%;
}
[class*="prism"] .bm {
  top: 100%;
}
[class*="prism"] .rt .face {
  left: -100%;
  transform-origin: 100% 0;
}
[class*="cylinder"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp, [class*="cylinder"] .bm, [class*="cylinder"] .tp .photon-shader, [class*="cylinder"] .bm .photon-shader {
  border-radius: 50%;
}
[class*="cylinder"] .bm {
  top: 100%;
}
/* .pyr-1 styles */
.pyr-1 {
  transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:5em;
  margin:-2.5em 0 0 -2em;
}
.pyr-1 .face-wrapper {
  width:4em;
  height:2em;
}
.pyr-1 .face-wrapper .face {
  width:4em;
  height:4em;
}

.ft, .bk, .rt, .lt, .bm { opacity: .5;}

.side { opacity: .2;}


.pyr-1 .ft {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(21.801409486351798deg);
}
.pyr-1 .bk {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(-21.801409486351798deg) rotateY(180deg);
}
.pyr-1 .rt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(21.801409486351798deg) rotateY(-90deg);
}
.pyr-1 .lt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(-21.801409486351798deg) rotateY(90deg);
}
.pyr-1 .bm {
  width:4em;
  height:4em;
}
.pyr-1 .face {
  background-color:#FFFFFF;

}
/* .pyr-2 styles */
.pyr-2 {
  transform:translate3D(0em, 5em, 0em) rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:5em;
  margin:-2.5em 0 0 -2em;
}
.pyr-2 .face-wrapper {
  width:4em;
  height:2em;
}
.pyr-2 .face-wrapper .face {
  width:4em;
  height:4em;
}
.pyr-2 .ft {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(21.801409486351798deg);
}
.pyr-2 .bk {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(-21.801409486351798deg) rotateY(180deg);
}
.pyr-2 .rt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(21.801409486351798deg) rotateY(-90deg);
}
.pyr-2 .lt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(-21.801409486351798deg) rotateY(90deg);
}
.pyr-2 .bm {
  width:4em;
  height:4em;
}
.pyr-2 .face {
  background-color:#FFFFFF;
}
/* .pri-1 styles */
.pri-1 {
  transform:translate3D(0em, 0.39999999999999997em, 2.7450980392156854em) rotateX(-68deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2em;
  height:3em;
  margin:-1.5em 0 0 -1em;
}
.pri-1 .rt .face {
  transform:rotateZ(-33.690067525979785deg);
}
.pri-1 .lt .face {
  transform:rotateZ(33.690067525979785deg);
}
.pri-1 .ft {
  height:3.605551275463989em;
  transform:translateZ(-1em) rotateX(33.690067525979785deg);
}
.pri-1 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-1 .rt, .pri-1 .lt {
  width:2em;
  height:3em;
}
.pri-1 .rt .face, .pri-1 .lt .face {
  height:3.605551275463989em;
}
.pri-1 .bm {
  width:2em;
  height:2em;
}
.pri-1 .face {
  background-color:#FFFFFF;
}
/* .pri-2 styles */
.pri-2 {
  transform:translate3D(0.033333333333333326em, 0.3999999999999999em, -2.788235294117648em) rotateX(-111deg) rotateY(0deg) rotateZ(-180deg);
  opacity:1;
  width:2em;
  height:3em;
  margin:-1.5em 0 0 -1em;
}
.pri-2 .rt .face {
  transform:rotateZ(-33.690067525979785deg);
}
.pri-2 .lt .face {
  transform:rotateZ(33.690067525979785deg);
}
.pri-2 .ft {
  height:3.605551275463989em;
  transform:translateZ(-1em) rotateX(33.690067525979785deg);
}
.pri-2 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-2 .rt, .pri-2 .lt {
  width:2em;
  height:3em;
}
.pri-2 .rt .face, .pri-2 .lt .face {
  height:3.605551275463989em;
}
.pri-2 .bm {
  width:2em;
  height:2em;
}
.pri-2 .face {
  background-color:#FFFFFF;
}
/* .pri-3 styles */
.pri-3 {
  transform:translate3D(0.06666666666666665em, 4.6000000000000005em, -2.788235294117648em) rotateX(112deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2em;
  height:3em;
  margin:-1.5em 0 0 -1em;
}
.pri-3 .rt .face {
  transform:rotateZ(-33.690067525979785deg);
}
.pri-3 .lt .face {
  transform:rotateZ(33.690067525979785deg);
}
.pri-3 .ft {
  height:3.605551275463989em;
  transform:translateZ(-1em) rotateX(33.690067525979785deg);
}
.pri-3 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-3 .rt, .pri-3 .lt {
  width:2em;
  height:3em;
}
.pri-3 .rt .face, .pri-3 .lt .face {
  height:3.605551275463989em;
}
.pri-3 .bm {
  width:2em;
  height:2em;
}
.pri-3 .face {
  background-color:#FFFFFF;
}
/* .pri-4 styles */
.pri-4 {
  transform:translate3D(-0.033333333333333465em, 4.6em, 2.8117647058823527em) rotateX(69deg) rotateY(0deg) rotateZ(-180deg);
  opacity:1;
  width:2em;
  height:3em;
  margin:-1.5em 0 0 -1em;
}
.pri-4 .rt .face {
  transform:rotateZ(-33.690067525979785deg);
}
.pri-4 .lt .face {
  transform:rotateZ(33.690067525979785deg);
}
.pri-4 .ft {
  height:3.605551275463989em;
  transform:translateZ(-1em) rotateX(33.690067525979785deg);
}
.pri-4 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-4 .rt, .pri-4 .lt {
  width:2em;
  height:3em;
}
.pri-4 .rt .face, .pri-4 .lt .face {
  height:3.605551275463989em;
}
.pri-4 .bm {
  width:2em;
  height:2em;
}
.pri-4 .face {
  background-color:#FFFFFF;
}
/* .cyl-1 styles */
.cyl-1 {
  transform:translate3D(1.8041124150158794e-16em, 2.4em, -3.5500000000000007em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:1em;
  height:.2em;
  margin:-0.1em 0 0 -0.5em;
}
.cyl-1 .tp, .cyl-1 .bm {
  width:1em;
  height:1em;
}
.cyl-1 .side {
  width:0.25324347439014994em;
  height:.2em;
}
.cyl-1 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.475em);
}
.cyl-1 .face, .cyl-1 .side {
  background-color:#FFFFFF;
}
/* .cyl-2 styles */
.cyl-2 {
  transform:translate3D(1.1102230246251565e-16em, 2.5em, 3.650000000000001em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:1em;
  height:.4em;
  margin:-0.2em 0 0 -0.5em;
}
.cyl-2 .tp, .cyl-2 .bm {
  width:1em;
  height:1em;
}
.cyl-2 .side {
  width:0.25324347439014994em;
  height:.4em;
}
.cyl-2 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.475em);
}
.cyl-2 .face, .cyl-2 .side {
  background-color:#FFFFFF;
}
/* .cyl-3 styles */
.cyl-3 {
  transform:translate3D(0em, -3.2em, 0.05000000000000071em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:1em;
  height:.2em;
  margin:-0.1em 0 0 -0.5em;
}
.cyl-3 .tp, .cyl-3 .bm {
  width:1em;
  height:1em;
}
.cyl-3 .side {
  width:0.25324347439014994em;
  height:.2em;
}
.cyl-3 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.475em);
}
.cyl-3 .face, .cyl-3 .side {
  background-color:#FFFFFF;
}
/* .cyl-4 styles */
.cyl-4 {
  transform:translate3D(0em, 8.3em, 8.881784197001252e-16em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:1em;
  height:.2em;
  margin:-0.1em 0 0 -0.5em;
}
.cyl-4 .tp, .cyl-4 .bm {
  width:1em;
  height:1em;
}
.cyl-4 .side {
  width:0.25324347439014994em;
  height:.2em;
}
.cyl-4 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.475em);
}
.cyl-4 .face, .cyl-4 .side {
  background-color:#FFFFFF;
}