@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

html,body,.left,.right{
  height:100%;
}

body{
  background: radial-gradient(ellipse at center, #2C3E50, #0F1E32);
  perspective: 1100px;
  transform-style: preserve-3d;
}

.pseudo_body{
  width:100%;
  min-height:100%;
  background:#ECF0F1;
  font-size:1.1em;
  display:none;
}

.current{
  display:block;
  z-index:2;
}

h1{
  letter-spacing: -2px;
  font:bold 3em Helvetica,sans-serif;
}

.menu{
  list-style:none;
  background:#2C3E50;
  height:50px;
  margin:auto;
  border-radius:5px;
  font-family: 'Lato', sans-serif;
  font-size:1.1em;
}

.menu li{
  display:inline;
  margin:0 25px;
}

.menu li a{
  color:#FFFFFF;
  text-decoration:none;
  height:50px;
  line-height:50px;
  display:inline-block;
}

.menu li a:hover,.menu li a.active{
   color:#16A085;
}

.content{
  width:90%;
  margin:auto;
  font-family:Arial,sans-serif;
  line-height:1.5em;
  background:#FFFFFF;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
}

.subcontent{
  width:95%;
  margin:15px auto 0 auto;
  padding-bottom:30px;
}

.content p{
  margin:10px auto 0 auto;
  text-align:justify;
  text-justify:inter-word;
}

.content img{
  max-width:100%;
  display:block;
  margin:auto;
}

.left,.right{
  width:50%;
  overflow:hidden;
  position:absolute;
  background:#FFFFFF;
}

.left{
  left:0;
  top:0;
  transform-origin:left center;
}

.left:before{
  z-index:2;
  content:"";
  background: linear-gradient(to left, rgba(0,0,0,0.66),transparent);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  animation:shadows 0.5s ease-out;
  animation-fill-mode: forwards;
}

.left.animate{
    animation:openLeft 0.5s ease-out;
    animation-fill-mode: forwards;
}

.right.animate{
    animation:openRight 0.5s ease-out;
    animation-fill-mode: forwards;
}

.zoomIn{
    animation:zoomIn 1s ease-out;
    animation-iteration-count: 1;
}

.right{
  right:0;
  top:0;
  transform-origin:right center;
}

.right:after{
  z-index:2;
  content:"";
  background: linear-gradient(to right, rgba(0,0,0,0.66),transparent);
  position:absolute;
  right:0;
  top:0;
  width:100%;
  height:100%;
  animation:shadows 0.5s ease-out;
  animation-fill-mode: forwards;
}

.right .pseudo_body{
  position:absolute;
  left:-100%;
}

@keyframes shadows
{
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes openLeft
{
  0% {transform:rotateY(0deg);z-index:2;}
  100% {transform:rotateY(90deg);z-index:-1;}
}

@keyframes openRight
{
   0% {transform:rotateY(0deg);z-index:2;}
  100% {transform:rotateY(-90deg);z-index:-1;}
}

@keyframes zoomIn
{
  0%{transform:translateZ(-4000px);opacity:0.33;}
  100%{transform:translateZ(0px);opacity:1;}
}