@import url(//cloud.typography.com/6966154/691568/css/fonts.css);

html, body {
    min-height: 100%;
    font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    font-size: 18px;
    line-height: 1.33333;
    overflow-x: hidden;
    color: #fff;
    background-color: #121B20;
}

.home {
    height: 100%;
    width: 100%;
    min-width: 512px;
    min-height: 800px;
    position: absolute;
    top:-36px;
    left: 0;
/*    background-color: #38B9FA;
    background: linear-gradient(180deg, 
        #38B9FA 0%, #38B9FA 20%, 
        #37B1EF 20%, #37B1EF 40%,
        #36A9E4 40%, #36A9E4 60%,
        #35A2DA 60%, #35A2DA 80%, 
        #349BD0 80%, #349BD0 100%
    );*/
}

/*.gradient { height: 20%; }
.g1 { background-color: #38B9FA; }
.g2 { background-color: #37B1EF; }
.g3 { background-color: #36A9E4; }
.g4 { background-color: #35A2DA; }
.g5 { background-color: #349BD0; }
*/
.smarterer-side,
.pluralsight-side {
    min-width: 512px;
}

.smarterer-side {
    width: 100%;
    height: 100%;
}

.smarterer-text {
    font-size: 20px;
    font-weight: 200;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -20px;
}

.smarterer-logo{
    background: url(/images/logo-beta-fff-f.png) 50% 50% no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-top: -10px;
}

.interim-divider {
    background: url(/images/interim/interim-divider.png);
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -30px;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.pluralsight-side {
    box-sizing: border-box;
    background: #121B20 url(/images/interim/ps-background.png) 50% 50% no-repeat;
    font-size: 13px;
    font-weight: 100;
    line-height: 20px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

.pluralsight-content {
    padding: 0 40px;
    width: 556px;
    margin-left: auto;
    margin-right: auto;
    -moz-transform: translate(0, 50%);
    -o-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
}

.pluralsight-side h1 {
    font-size: 20px;
    font-weight: bold;
    color: #FD7D18;
    margin-bottom: 0;
    margin-top: 40px;
}

.pluralsight-side h2 {
    font-size: 13px;
    font-weight: 500;
    color: #FFF;
    margin: 0;
}

.pluralsight-side h3 {
    font-size: 13px;
    font-weight: 400;
    color: rgb(255, 255, 255);
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0;
}

.pluralsight-side h4 {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 5px;
    text-align: center;
}

.pluralsight-side hr {
    border-top: 3px solid #4B5256;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
    width: 194px;
    padding-left: 5px;
}

.pluralsight-side ul {
    padding: 0
}

.pluralsight-side li {
    list-style-type: square;
    list-style-position: outside;
    margin-left: 18px;
}

.pluralsight-side .gray-link {
    color: #FFF;
}

.pluralsight-side .orange-link {
    color: #FD7D18;
    text-decoration: none;
}

.pluralsight-side .orange-button {
    display: table;
    background-color: #F96816;
    color: #FFF;
    font-size: 16px;
    font-weight: 200;
    line-height: 50px;
    white-space: nowrap;
    text-decoration: none;
    padding: 0 55px;
    margin: 20px auto;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; /* future proofing */
    -khtml-border-radius: 3px; /* for old Konqueror browsers */
}

.pluralsight-side .footer-link {
    font-weight: 100;
    text-align: center;
}


.smarterer-side { transition: width 0.3s ease-out; }
.smarterer-text { transition: all 0.6s ease-out; }
.smarterer-logo { transition: all 0.6s ease-out; }
.pluralsight-side  { transition: transform 0.3s ease-out; }
.interim-divider { transition: transform 0.3s ease-out; }

.step0 .smarterer-side   { width: 100%; }
.step0 .smarterer-text   {
    opacity: 0;
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.step0 .smarterer-logo   { opacity: 0; }
.step0 .pluralsight-side {
    -moz-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
.step0 .interim-divider  {
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.step1 .smarterer-text { opacity: 1; }

.step2 .smarterer-side { width: 50%; }
.step2 .pluralsight-side {
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0  , 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.step2 .interim-divider {
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.step2 .smarterer-text {
    -moz-transform: translate(0, 30px);
    -o-transform: translate(0, 30px);
    -ms-transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
    transform: translate(0, 30px);
}
.step2 .smarterer-logo {
    opacity: 1;
    -moz-transform: translate(0, -25px);
    -webkit-transform: translate(0, -25px);
    -o-transform: translate(0, -25px);
    -ms-transform: translate(0, -25px);
    transform: translate(0, -25px);
}

footer {
    display: none;
    width: 100%;
    overflow: hidden;
    background-color: #FFF;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 20;
}

.footer-container {
    text-align: center;
}

.footer-container ul {
    margin: 0 auto;
    display: table;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.footer-list li {
    float: left;
    font-size: 13px;
    font-weight: 200;
    color: #CCC;
    list-style-type: square;
    list-style-position: inside;
    list-style-image: none;
    padding-left: 0;
    margin-left: 10px;
}

.footer-list li a {
    color: #8C9498;
    text-decoration: none;
}

.footer-copyright {
    font-size: 10px;
    font-weight: 200;
    color: #CCC;
    text-align: center;
}