*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html, body {
    overflow: auto;
    overflow-x: hidden;
}

body {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 14px;
    background: black;
}

b {
    font-weight: 700;
}

a {
    cursor: pointer;
}

/* ONEPCSSGRID */

.onepcssgrid-1000, .onepcssgrid-1200 {
    margin: 0 auto;
    padding: 0 0 0 1%;
}

.onepcssgrid-1200 {
    max-width: 1220px;
}

.onepcssgrid-1000 {
    max-width: 1020px;
}

.onerow {
    clear: both;
    padding: 0 10px;
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    float: left;
    margin: 0 3% 0 0;
}

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
    margin: 0;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
    width: 100%;
    height: auto;
    display: block;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* ADAPTIVE */

@media all and (min-width: 1024px) {
    .onepcssgrid-1000 {
        max-width: 1000px;
    }
    .onepcssgrid-1000 .onerow {
        padding: 0;
    }
}

@media all and (max-width: 1024px) {
    .content .item:nth-child(3) {
      clear: both;
    }
    .col3 { width: 48%; }
    .col3:nth-child(2) { margin: 0; }
}

@media all and (max-width: 768px) {
    .logo img {
        margin: 0 auto;
    }
    #slider-wrapper {
        display: none;
    }
    #slider-wrapper.mobile {
        display: block;   
    }
    header {
        display: none;
    }
    .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
        float: none;
        width: 99%;
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { 
    #slider-wrapper {
        display: block;
    }
    #slider {
        /*-webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        transform: scale(0.75);
        -webkit-transform-origin: 50% 0 0;
        -moz-transform-origin: 50% 0 0;
        -ms-transform-origin: 50% 0 0;
        transform-origin: 50% 0 0;*/
        -webkit-transform: scale(0.9);
        -webkit-transform-origin: 50% 0 0;
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { 
    #slider-wrapper {
        display: block;
    }
    #slider {
        /*-webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        transform: scale(0.75);
        -webkit-transform-origin: 50% 0 0;
        -moz-transform-origin: 50% 0 0;
        -ms-transform-origin: 50% 0 0;
        transform-origin: 50% 0 0;*/
        -webkit-transform: scale(0.9);
        -webkit-transform-origin: 50% 0 0;
    }
}

/* STYLE */

header {
    min-height: 94px;
    background: white;
    position: relative;
    z-index: 300;
}

    header .logo {
        padding-top:10px;
    }

        header .logo img {
            max-width: 174px;
        }

    header .nav ul {
        list-style: none outside none;
        margin: 34px 0 0 0;
        padding: 0;
    }

        header .nav ul > li {
            float:left;
            display:block;
            margin:0 5px 10px;
        }

        header .nav ul > li:last-child {
            margin-bottom:20px;
        }

            header .nav ul > li > a {
                background: black;
                text-decoration:none;
                text-transform:uppercase;
                padding:2px 10px;
                color:white;
            }

            header .nav ul > li > a:hover, 
            header .nav ul > li > a.active {
                background: #e3010f;
            }

    header .social {
        float: right;
    }

    header .social > ul {
        list-style: none outside none;
        margin: 34px 0 0 0;
        padding: 0;
        float:right;
    }

        header .social > ul > li {
            float:left;
            display:block;
            margin:0 5px 10px;
        }

.content {
    background: black url("../img/content-bg.jpg") top center repeat-x;
    padding-top: 134px;
    position: relative;
    color: white;
}
.content.small-padding {
    padding-top: 40px;
}

section.in-progress + .content {
    background: black url("../img/content-bg-in-progress.jpg") top center repeat-x;
}

    .content .nowork {
        position: absolute;
        top:0;
        z-index: 1;
        height: 144px;
        background-color: transparent;
        background-position: left bottom;
        -webkit-transform: rotate(-.7deg);
        -moz-transform: rotate(-.7deg);
        -ms-transform: rotate(-.7deg);
        -o-transform: rotate(-.7deg);
        transform: rotate(-.7deg);
    }

    .content .content-bg.bg1 {
        background: black url("../img/bg/bg1.png");
    }

    .content .content-bg.bg2 {
        background: black url("../img/bg/bg2.jpg");
    }

    .content .content-bg.bg3 {
        background: black url("../img/bg/bg3.jpg");
    }

    .content .content-bg.bg4 {
        background: black url("../img/bg/bg4.jpg");
    }

    .content .content-bg.bg5 {
        background: black url("../img/bg/bg5.jpg");
    }
        .content .content-bg > hr:first-child, 
        .content .content-bg > div {
            margin-top: -134px;
        }

        .content .content-bg > div {
            z-index: 2;
            position: relative;
            padding-top: 20px;
        }

    .content > div {
        z-index: 2;
        position: relative;
        padding-top: 20px;
    }

    .content .item {
        text-align: center;
        position: relative;
        margin-bottom: 80px;
    }

        .content .item img {
            position: inherit;
            max-width: 253px;
            margin: 0 auto;
            padding-bottom: 30px;
            /*-webkit-transition: -webkit-transform .25s ease;
             -moz-transition: -moz-transform .25s ease;
               -o-transition: -o-transform .25s ease;
                  transition: transform .25s ease;*/
        }

        /*.content .item img:hover {
            transform: scale(1.3);
            -ms-transform: scale(1.3);
            -webkit-transform: scale(1.3);
        }*/

    .content .name,
    .content .description {
        display: block;
        position: absolute;
        left: 50%;
    }

        .content .name a,
        .content .description a {
            white-space: nowrap;
            position: relative;
            left: -50%;
        }

    .content .name {
        bottom: 25px;
    }

        .content .name a {
            background: #e3010f;
            font-size: 18px;
            padding: 4px 8px;
        }

    .content .description {
        bottom: 0;
    }

    .content .description a {
        background: white;
        color: black;
        font-size: 14px;
        padding: 4px 8px;
    }

hr.nowork {
    background: black url("../img/nowork.png") top center repeat-x;
    display: block;
    position: absolute;
    border: none;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0;
    height: 20px;
    z-index: 10;
}

footer {
    background: #e3010f url("../img/footer-bg.png");
    float: left;
    position: relative;
    width: 100%;
    min-height: 94px;
    padding: 60px 0 40px;
}

    footer .nowork {
        -webkit-transform: rotate(.6deg);
        -moz-transform: rotate(.6deg);
        -ms-transform: rotate(.6deg);
        -o-transform: rotate(.6deg);
        transform: rotate(.6deg);
    }

    footer .social {
        text-align: center;
    }

        footer .social > p.last {
            display: inline-block;
            background: black;
            padding: 2px 10px;
            margin: 0 0 10px;
            color: #e3010f;
        }

            footer .social > p > a {
                display: inline-block;
                margin: 0 5px 10px;
            }

/* SINGLE */

.single {
    margin-top: 160px;
    margin-bottom: 60px;
}

.single .images > img {
    max-width: 526px;
    margin: 0 auto 40px;
}

.single h2 {
    font-size: 28px;
}

.single h2 + span {
    font-size: 24px;
    color: #e3010f;
    display: block;
    margin-bottom: 30px;
}

.single .price {
    font-size: 18px;
}

.single .price > s {
    color: #e3010f;
}

.single .price > span {
    font-size: 34px;
}

.single p {
    margin-top: 20px;
    margin-bottom: 40px;
}

.single p a {
    color: #e3010f;
    text-decoration: underline;
}

.single .option {
    font-size: 24px;
}

.single .option > div {
    margin-bottom: 10px;
}

.single .option ul {
    list-style: none outside none;
    display: inline-block;
    margin-bottom: -5px;
}

.single .option ul li {
    float: left;
    margin-left: 10px;
}

.single .option input[type="radio"] {
    display:none;
}

.single .option label {
    font-size: 18px;
    display: inline-block;
    cursor: pointer;
    width: 40px;
}

.single .option .size label {
    background: #ffffff;
    color: #e3010f;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.single .option .size input[type="radio"]:checked + label {
    background: #e3010f;
    color: #ffffff;
}

.single .option .color label {
    border: 1px #bbbbbb solid;
    text-indent: -9999px;
    position: relative;
}

label[for="color-black"] {
    background: #000000;
}

label[for="color-white"] {
    background: #ffffff;
}

label[for="color-gray"] {
    background: #646464;
}

label[for="color-red"] {
    background: #e3010f;
}

.single .option .color input[type="radio"]:checked + label:before {
    content: "✓";
    position: absolute;
    text-indent:0;
    bottom:0;
    left:12px;
    color: #bbbbbb;
}

.single .option .quantity input[type="text"] {
    font-size: 16px;
    padding: 2px 5px;
    outline: none;
    font-weight: bold;
    text-align: center;
    margin-left: 10px;
    display: inline-block;
}

.single .action a,
#form .action a, 
#form-error .action a,
#form-success .action a {
    margin-top: 30px;
    background: #e3010f;
    font-size: 18px;
    padding: 4px 8px;
    color: #ffffff;
    text-transform: uppercase;
}

#form-error .action a.white {
    background: #ffffff;
    color: #e3010f;
    margin-left: 10px;
}

#form .action,
#form-error .action, 
#form-success .action {
    text-align: center;
}

#form-error h2,
#form-success h2 {
    font-size: 20px;
    white-space: nowrap;
}

#form label, input {
    display: block;
    text-align: center;
}

#form input[type="text"] {
    width: 100%;
    margin-bottom: 15px;
    font-size: 16px;
    padding: 2px 5px;
    outline: none;
}

/* SLIDER */

#slider-wrapper {
    background: black url("../img/slider-bg.jpg") top center repeat-x;
    height: 560px;
    position: relative;
}

#slider-wrapper.in-progress {
    background: black url("../img/slider-bg-in-progress.jpg") top center repeat-x;
    height: 560px;
    position: relative;
}

#slider, #slider > * {
    position: absolute;
}

#slider {
    overflow-x: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#loading, #replay, #skip, #shop {
    z-index: 100;
    background: #e3010f;
    color: white;
    text-transform: uppercase;
    padding: 4px 8px;
    display: none;
}

#loading {
    font-size: 18px;
    top: 50%;
    left: 50%;
}

#replay {
    font-size: 10px;
    top: -100%;
    right: 20px;
    display: block;
}

#skip {
    font-size: 10px;
    top: -100%;
    right: 20px;
    display: block;
}

#shop {
    font-size: 20px;
    top: 50%;
    left: 50%;
    margin-left: -62px;
    margin-top: 240px;
}

#slide_noschool {
    top: 165px;
    left:50%;
    margin-left: -155px;
    z-index: 100;
}

#slide_nowork {
    top:215px;
    left:50%;
    margin-left: -206px;
    z-index: 200;
}

#slide_nomoney {
    top: 310px;
    left:50%;
    margin-left: -105px;
    z-index: 100;
}

#slide_nofuture {
    top: 360px;
    left:50%;
    margin-left: -166px;
    z-index: 80;
}

#slide_noproblem {
    top: 425px;
    left:50%;
    margin-left: -114px;
    z-index: 60;
}

#slide_generation {
    top: 400px;
    left:50%;
    margin-left: -260px;
    z-index: 400;
}

#slide_logo {
    top: 70px;
    left: 50%;
    margin-left: -150px;
    z-index: 70;
}

#slide_skater {
    top: 20px;
    right: 50%;
    margin-right: -600px;
    z-index: 50;
}

#slide_jump1 {
    top: 60px;
    left: 50%;
    margin-left: -480px;
    z-index: 50;
}

#slide_jump2 {
    top: 40px;
    right: 50%;
    margin-right: -570px;
    z-index: 50;
}

#slide_boombox, #slide_emptypockets {
    top: 40px;
    right: 50%;
    margin-right: -460px;
    z-index: 50;
}

#slide_guitar {
    top: 40px;
    left: 50%;
    margin-left: -460px;
    z-index: 50;
}

/* SKEW */

.skew, .skew > span {
    display: inline-block;
}

.skew {
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .6);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .6);
    -ms-box-shadow: 0 0 1px rgba(0, 0, 0, .6);
    -o-box-shadow: 0 0 1px rgba(0, 0, 0, .6);
    box-shadow: 0 0 1px rgba(0, 0, 0, .6);
}

.sk1 {
    -webkit-transform: skewX(-3deg) rotate(-3deg);
    -moz-transform: skewX(-3deg) rotate(-3deg);
    -ms-transform: skewX(-3deg) rotate(-3deg);
    -o-transform: skewX(-3deg) rotate(-3deg);
    transform: skewX(-3deg) rotate(-3deg);
}

    .sk1 > span {
        -webkit-transform: skewX(3deg) rotate(3deg);
        -moz-transform: skewX(3deg) rotate(3deg);
        -ms-transform: skewX(3deg) rotate(3deg);
        -o-transform: skewX(3deg) rotate(3deg);
        transform: skewX(3deg) rotate(3deg);
    }

.sk2 {
    -webkit-transform: skewX(2deg) rotate(2deg);
    -moz-transform: skewX(2deg) rotate(2deg);
    -ms-transform: skewX(2deg) rotate(2deg);
    -o-transform: skewX(2deg) rotate(2deg);
    transform: skewX(2deg) rotate(2deg);
}

    .sk2 > span {
        -webkit-transform: skewX(-2deg) rotate(-2deg);
        -moz-transform: skewX(-2deg) rotate(-2deg);
        -ms-transform: skewX(-2deg) rotate(-2deg);
        -o-transform: skewX(-2deg) rotate(-2deg);
        transform: skewX(-2deg) rotate(-2deg);
    }

.sk3 {
    -webkit-transform: skewX(-2deg) rotate(-2deg);
    -moz-transform: skewX(-2deg) rotate(-2deg);
    -ms-transform: skewX(-2deg) rotate(-2deg);
    -o-transform: skewX(-2deg) rotate(-2deg);
    transform: skewX(-2deg) rotate(-2deg);
}

    .sk3 > span {
        -webkit-transform: skewX(2deg) rotate(2deg);
        -moz-transform: skewX(2deg) rotate(2deg);
        -ms-transform: skewX(2deg) rotate(2deg);
        -o-transform: skewX(2deg) rotate(2deg);
        transform: skewX(2deg) rotate(2deg);
    }

.sk4 {
    -webkit-transform: skewX(3deg) rotate(3deg);
    -moz-transform: skewX(3deg) rotate(3deg);
    -ms-transform: skewX(3deg) rotate(3deg);
    -o-transform: skewX(3deg) rotate(3deg);
    transform: skewX(3deg) rotate(3deg);
}

    .sk4 > span {
        -webkit-transform: skewX(-3deg) rotate(-3deg);
        -moz-transform: skewX(-3deg) rotate(-3deg);
        -ms-transform: skewX(-3deg) rotate(-3deg);
        -o-transform: skewX(-3deg) rotate(-3deg);
        transform: skewX(-3deg) rotate(-3deg);
    }

.sk5 {
    -webkit-transform: skewX(2deg) rotate(1deg);
    -moz-transform: skewX(2deg) rotate(1deg);
    -ms-transform: skewX(2deg) rotate(1deg);
    -o-transform: skewX(2deg) rotate(1deg);
    transform: skewX(2deg) rotate(1deg);
}

    .sk5 > span {
        -webkit-transform: skewX(-2deg) rotate(-1deg);
        -moz-transform: skewX(-2deg) rotate(-1deg);
        -ms-transform: skewX(-2deg) rotate(-1deg);
        -o-transform: skewX(-2deg) rotate(-1deg);
        transform: skewX(-2deg) rotate(-1deg);
    }

.sk6 {
    -webkit-transform: skewX(-3.5deg) rotate(-2deg);
    -moz-transform: skewX(-3.5deg) rotate(-2deg);
    -ms-transform: skewX(-3.5deg) rotate(-2deg);
    -o-transform: skewX(-3.5deg) rotate(-2deg);
    transform: skewX(-3.5deg) rotate(-2deg);
}

    .sk6 > span {
        -webkit-transform: skewX(3.5deg) rotate(2deg);
        -moz-transform: skewX(3.5deg) rotate(2deg);
        -ms-transform: skewX(3.5deg) rotate(2deg);
        -o-transform: skewX(3.5deg) rotate(2deg);
        transform: skewX(3.5deg) rotate(2deg);
    }

.sk7 {
    -webkit-transform: skewX(-2deg) rotate(-.8deg);
    -moz-transform: skewX(-2deg) rotate(-.8deg);
    -ms-transform: skewX(-2deg) rotate(-.8deg);
    -o-transform: skewX(-2deg) rotate(-.8deg);
    transform: skewX(-2deg) rotate(-.8deg);
}

    .sk7 > span {
        -webkit-transform: skewX(2deg) rotate(.8deg);
        -moz-transform: skewX(2deg) rotate(.8deg);
        -ms-transform: skewX(2deg) rotate(.8deg);
        -o-transform: skewX(2deg) rotate(.8deg);
        transform: skewX(2deg) rotate(.8deg);
    }