body {
  background-image: url('noisy-texture.png');
  background-color: #CCC;
}

#title {
  text-align: center;
  height: 1em;
  color: #E0661F;
  font-size: 5em;
  text-shadow: #000 1px 1px 1px;
  visibility: hidden;
  z-index: 99;
}

.content, .content-box{
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.71);
    box-shadow: 0px 0px 20px #D8D8D8 inset;
    border: 1px solid #AAA;
}

.content {
    padding-bottom: 15px;
    margin-bottom: 15px;
}

* {
    box-sizing: border-box;
}

.centered {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.step-page {
    display: none;
    overflow: hidden;
    z-index: -1;
}

.step-current {
    display: block;
    z-index: -1;
}


.pt-page-moveToLeft {
	-webkit-animation: moveToLeft .6s ease both;
	animation: moveToLeft .6s ease both;
}
.pt-page-moveFromRight { 
	-webkit-animation: moveFromRight .6s ease both;
	animation: moveFromRight .6s ease both;
}

@-webkit-keyframes moveToLeft {
	from { }
	to { 
        -webkit-transform: translateX(-200%); 
    }
}
@keyframes moveToLeft {
	from { }
	to {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);      
    }
}

@-webkit-keyframes moveFromRight {
	from { 
        -webkit-transform: translateX(100%); 
    }
}
@keyframes moveFromRight {
	from { 
        -webkit-transform: translateX(100%); 
        transform: translateX(100%); 
    }
}