@import url("fonts.css");
* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
}
a {
    color:#004a8f;
    text-decoration:underline;
}
body {
    background:#fff;
    font-size:17px;
    font-family:'trebuchet ms';
    color:#7c7c7c;
}
body.site {
    background:url(images/background.jpg) top center;
}
/* Helpers */
.ir {
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}
.center {
    width:940px;
    margin:auto;
    position:relative;
}
/* Header */
header {
    height:82px;
    background:url(images/bg-header.png);
}
    header h1 {
        width:282px;
        height:29px;
        margin-top:27px;
        background:url(images/movimentofun.png);
        float:left;
    }
    header h2 {
        width:188px;
        height:46px;
        margin-top:18px;
        background:url(images/seadoo.png);
        float:right;
    }
        header h2 a {
            width:188px;
            height:46px;
            display:block;
        }
/* HOME */
    #home {
        padding:47px 0 0 0;
    }
        #enter {
            width:466px;
            height:433px;
            margin:auto;
            display:block;
            position:relative;
        }
            #enter .button {
                width:280px;
                height:279px;
                background:url(images/button.png);
                top:92px;
                left:92px;
                position:absolute;
            }
            #enter.clicked .button {
                background-position:top right;
            }
            #enter .text {
                width:403px;
                height:402px;
                background: url(images/button-text.png);
                top:31px;
                left:31px;
                position:absolute;
            }
            @keyframes splash {
               from { background-position: 0px; }
                 to { background-position: -19747px; }
            }
            @-webkit-keyframes splash {
               from { background-position: 0px; }
                 to { background-position: -19747px; }
            }
            #enter:hover .text {
                animation: splash 1.5s steps(49);
                -webkit-animation: splash 1.5s steps(49);
                background: url(images/button-text.png) top right;
            }
            #enter.clicked .text {
                background: url(images/button-text.png) top right;
            }
            #enter.clicked:hover .text {
                animation: none;
                -webkit-animation: none;
            }
            #enter .tint {
                width:466px;
                height:433px;
                display:block;
            }
            #enter .tint img {
                top:0;
                left:0;
                position:absolute;
                display:none;
            }
            @keyframes tint {
                from { 
                    width:280px;
                    top:85px;
                    left:91px;
                }
                to { 
                    width:466px;
                    top:0;
                    left:0;
                }
            }
            @-webkit-keyframes tint {
                from { 
                    width:280px;
                    top:85px;
                    left:91px;
                }
                to { 
                    width:466px;
                    top:0;
                    left:0;
                }
            }
            #enter.clicked .tint img {
                animation: tint 0.5s steps(10);
                -webkit-animation: tint 0.5s steps(10);
                width:466px;
                top:0;
                left:0;
                display:block;
            }
    #login {
        width:366px;
        height:369px;
        padding:118px 117px 0 116px;
        background:url(images/bg-login.png);
        margin-left:-300px;
        top:120px;
        left:50%;
        position:absolute;
    }
        #login h3 {
            font-size:28px;
            font-family:'FontCondensedBold';
            font-weight:normal;
            color:#ff4500;
            text-transform:uppercase;
        }
        #login p {
            margin:5px 0 10px;
            font-size:18px;
            font-family:'FontCondensed';
        }
        #login div {
            margin:0 0 5px;
        }
        #login label {
            font-size:18px;
            font-family:'FontCondensed';
        }
            #login label span {
                color:#ff0000;
                display:none;
            }
            #login .error label span {
                display:inline;
            }
            #login input {
                width:346px;
                height:18px;
                padding:5px 10px;
                margin-top:2px;
                -webkit-border-radius: 3px;
                border-radius: 3px;
                background:#fff;
                font-size:18px;
                font-family:'FontCondensed';
                color:#7c7c7c;
            }
        #login p.error {
            height:16px;
            line-height:16px;
            margin:10px 0;
            font-size:12px;
            color:#ff0000;
        }
         #login button {
            width:175px;
            height:45px;
            line-height:45px;
            background:url(images/bg-button.png);
            font-size:18px;
            font-family:'FontCondensedBold';
            color:#c82a73;
            text-transform:uppercase;
            cursor:pointer;
         }
         #login button:active {
            background-position:top right;
         }
/* Site */
        #name {
            padding:35px 0 260px 0;
            background:url(images/bg1.png) top center no-repeat;
        }
            #name h3 {
                font-size:62px;
                font-family:'FontBold';
                font-weight:normal;
                color:#323234;
                text-transform:uppercase;
            }
            #name p.spark {
                width:540px;
                height:157px;
                background:url(images/spark.png);
            }
        #counter {
            margin-top:-150px;
            padding:0 0 40px;
            background:url(images/bg2.png) top center no-repeat;
        }
            #counter h4 {
                margin:0 50px 50px;
                font-size:33px;
                font-family:'FontBold';
                font-weight:normal;
                color:#323234;
                text-transform:uppercase;
            }
            #counter > div.center div {
                width:245px;
                height:402px;
                margin-left:50px;
                display:inline-block;
                vertical-align:top;
            }
                #counter div.center div div {
                    width:120px;
                    height:349px;
                    line-height:349px;
                    margin-left:5px;
                    background:url(images/bloco.png);
                    text-align:center;
                    font-size:382px;
                    font-family: 'FontCondensedBold';
                    font-stretch: ultra-condensed;
                    color:#c82a73;
                    float:left;
                }
                #counter div.center div div:first-child {
                    margin:0;
                }
                #counter div div span {
                    width:113px;
                    height:327px;
                    margin:7px 0 0 4px;
                    background:url(images/numbers.png);
                    display:block;
                }
                @keyframes first {
                    from {
                        transform:rotateX(0);
                        -ms-transform:rotateX(0);
                    }
                    to {
                        transform:rotateX(90deg);
                        -ms-transform:rotateX(90deg);
                    }
                }
                @keyframes last {
                    from {
                        transform:rotateX(90deg);
                        -ms-transform:rotateX(90deg);
                    }
                    to {
                        transform:rotateX(0);
                        -ms-transform:rotateX(0);
                    }
                }
                @-webkit-keyframes first {
                    from {
                        -webkit-transform:rotateX(0deg);
                    }
                    to {
                        -webkit-transform:rotateX(90deg);
                    }
                }
                @-webkit-keyframes last {
                    from {
                        -webkit-transform:rotateX(90deg);
                    }
                    to {
                        -webkit-transform:rotateX(0deg);
                    }
                }
                #counter span.first {
                    animation: first 0.5s linear;
                    -webkit-animation: first 0.5s linear;
                }
                #counter span.last {
                    animation: first 0.5s linear;
                    -webkit-animation: last 0.5s linear;
                }
                #counter span.zero { 
                    background-position: -163px -1131px;
                } 
                #counter span.one { 
                    background-position: 0 -1508px;
                } 
                #counter span.two {
                    background-position: -163px -754px;
                }
                #counter span.three {
                    background-position: -163px -377px;
                } 
                #counter span.four {
                    background-position: 0 -754px;
                }
                #counter span.five {
                    background-position: 0 -377px;
                } 
                #counter span.six {
                    background-position: -163px 0;
                } 
                #counter span.seven {
                    background-position: 0 -1885px;
                } 
                #counter span.eight {
                    background-position: 0 0;
                } 
                #counter span.nine {
                    background-position: 0 -1131px;
                } 
                #counter div p {
                    width:245px;
                    margin:18px 0 0 0;
                    font-size:30px;
                    font-family: 'FontCondensedBold';
                    text-align:center;
                    text-transform:uppercase;
                    float:left;
                }
        #events {
            padding:0 0 356px;
            background:url(images/bg3.png) top center no-repeat;
        }
            #events div.center div {
                width:216px;
                margin-left:126px;
                text-align:center;
                display:inline-block;
                vertical-align:top;
            }
            #events div.center div + div {
                margin-left:250px;
            }
                #events h5 {
                    height:67px;
                    padding:10px 0;
                    border-top:#fdf200 1px solid;
                    border-bottom:#fdf200 1px solid;
                }
                #events .sp h5 {
                    background:url(images/sp.png) center center no-repeat;
                }
                #events .rj h5 {
                    background:url(images/rj.png) center center no-repeat;
                }
                #events p {
                    font-size:35px;
                    font-family: 'FontCondensedBold';
                    text-transform:uppercase;
                    border-bottom:#fdf200 1px solid;
                }
                #events p.time {
                    padding:10px 0;
                    line-height:80px;
                    font-size:80px;
                    color:#f86f3d;
                }
                #events span.image {
                    width:216px;
                    height:171px;
                    display:block;
                }
                #events .sp span.image {
                    background:url(images/sp-img.jpg);
                }
                #events .rj span.image {
                    background:url(images/rj-img.png);
                }
                #events a {
                    width:175px;
                    height:45px;
                    line-height:42px;
                    margin:-35px 0 0 20px;
                    background:url(images/bg-button.png);
                    font-size:18px;
                    font-family:'FontCondensedBold';
                    color:#ff4500;
                    text-transform:uppercase;
                    text-decoration:none;
                    cursor:pointer;
                    display:block;
                 }
                 #events a:active {
                    background-position:top right;
                 }
    #success {
        width:705px;
        height:362px;
        background:url(images/success-bg.png);
        margin:-181px 0 0 -352px;
        text-align:center;
        top:50%;
        left:50%;
        position:fixed;
        display:none;
    }
        #success h2 {
            padding:140px 0 10px;
            font-size:27px;
            font-weight:normal;
            font-family:'FontCondensedBold';
            color:#ff4500;
            text-transform:uppercase;
        }
        #success p {
            font-size:18px;
            font-family:'FontCondensed';
        }
    @media only screen and (max-width: 939px) {

        body.site {
            background: url(images/640/background.jpg) center bottom no-repeat;
        }
        /* Helpers */
        .center {
            width:602px;
            margin:auto;
            overflow:hidden;
        }
        /* Header */
        header {
            height:75px;
            background-position:center bottom;
        }
            header h1 {
                width:238px;
                height:24px;
                margin-top:23px;
                background:url(images/640/movimentofun.png);
            }
            header h2 {
                width:162px;
                height:40px;
                margin-top:15px;
                background:url(images/640/seadoo.png);
            }
                header h2 a {
                    width:162px;
                    height:40px;
                }
        /* HOME */
            #home {
                padding:72px 0;
            }
                #enter {
                    width:306px;
                    height:285px;
                }
                    #enter .button {
                        width:184px;
                        height:182px;
                        background:url(images/640/button.png);
                        top:60px;
                        left:61px;
                    }
                    #enter.clicked .button {
                        background-position:top right;
                    }
                    #enter .text {
                        width:265px;
                        height:264px;
                        background: url(images/640/button-text.png);
                        top:20px;
                        left:21px;
                        animation: splash 10s infinite;
                        -webkit-animation: splash 10s infinite;
                    }
                    @keyframes splash {
                        from { 
                            transform: rotate(0deg); 
                            -ms-transform: rotate(0deg); 
                        }
                        to {
                            transform: rotate(360deg); 
                            -ms-transform: rotate(360deg); 
                        }
                    }
                    @-webkit-keyframes splash {
                       from { -webkit-transform: rotate(0deg); }
                         to { -webkit-transform: rotate(360deg); }
                    }
                    #enter:hover .text {
                        animation: none;
                        -webkit-animation: none;
                        background:url(images/640/button-text.png);
                    }
                    #enter.clicked .text {
                        background:url(images/640/button-text.png);
                    }
                    #enter.clicked:hover .text {
                        animation: none;
                        -webkit-animation: none;
                    }
                    #enter .tint {
                        width:306px;
                        height:285px;
                        display:block;
                    }
                    #enter .tint img {
                        top:0;
                        left:0;
                        position:absolute;
                        display:none;
                    }
                    @keyframes tint {
                        from { 
                            width:184px;
                            top:60px;
                            left:55px;
                        }
                        to { 
                            width:306px;
                            top:0;
                            left:0;
                        }
                    }
                    @-webkit-keyframes tint {
                        from { 
                            width:184px;
                            top:60px;
                            left:55px;
                        }
                        to { 
                            width:306px;
                            top:0;
                            left:0;
                        }
                    }
                    #enter.clicked .tint img {
                        animation: tint 0.5s steps(10);
                        -webkit-animation: tint 0.5s steps(10);
                        width:306px;
                        top:0;
                        left:0;
                        display:block;
                    }
            #login {
                width:257px;
                height:378px;
                padding:109px 105px 0 103px;
                background:url(images/640/bg-login.png);
                margin-left:-232px;
                top:83px;
            }
                #login h3 {
                    font-size:23px;
                    padding:0 0 15px;
                }
                    #login input {
                        width:237px;
                    }

                 #login button {
                    margin-left:42px;
                 }
        /* Site */
            #name {
                padding:5px 0 150px 0;
                background:url(images/640/bg1.png) top center no-repeat;
                position:relative;
                z-index:10;
            }
                #name h3 {
                    padding:0;
                    font-size:40px;
                    text-align:center;
                }
                #name p.spark {
                    width:296px;
                    height:86px;
                    margin:auto;
                    background:url(images/640/spark.png);
                }
                #counter {
                    margin-top:-100px;
                    padding:0 0 64px;
                    background:url(images/640/bg2.png) top center no-repeat;
                    position:relative;
                    z-index:9;
                }
                    #counter h4 {
                        margin:0 0 10px;
                        font-size:28px;
                        text-align:center;
                    }
                    #counter div.center > div {
                        width:155px;
                        height:275px;
                        margin-left:30px;
                    }
                        #counter div.center div div {
                            width:76px;
                            height:221px;
                            line-height:221px;
                            margin-left:2px;
                            background:url(images/640/bloco.png);
                            font-size:200px;
                        }
                        #counter div.center div div:first-child {
                            margin:0;
                        }
                        #counter div div span {
                            width:72px;
                            height:207px;
                            margin:4px 0 0 2px;
                            background:url(images/640/numbers.png);
                        }
                        #counter span.zero{ background-position: -122px -257px;  } 
                        #counter span.one{ background-position: 0 -1028px;  } 
                        #counter span.two{ background-position: -122px 0;  } 
                        #counter span.three{ background-position: 0 -1799px;  } 
                        #counter span.four{ background-position: 0 -514px;  } 
                        #counter span.five{ background-position: 0 -257px;  } 
                        #counter span.six{ background-position: 0 -1542px;  } 
                        #counter span.seven{ background-position: 0 -1285px;  } 
                        #counter span.eight{ background-position: 0 0;  } 
                        #counter span.nine{ background-position: 0 -771px;  } 
                        #counter div p {
                            width:155px;
                            margin:12px 0 0 0;
                        }
                #events {
                    padding:0 0 121px;
                    background:url(images/640/bg3.png) top center no-repeat;
                }
                    #events p {
                        padding:12px 0 0;
                        height:66px;
                        line-height:35px;
                    }
                    #events p.time {
                        padding:0;
                        height:80px;
                        line-height:100px;
                    }
                    #events div.center div {
                        width:216px;
                        margin-left:52px;
                    }
                    #events div.center div + div {
                        margin-left:60px;
                    }
            #success {
                width:447px;
                height:315px;
                background:url(images/640/success-bg.png);
                margin:-157px 0 0 -223px;
            }
                #success h2 {
                    padding:110px 0 8px;
                    font-size:22px;
                }
                #success p {
                    width:220px;
                    margin:auto;
                }
    }
    @media only screen and (max-width: 639px) {
        body {
            overflow-x:hidden;
        }
        body.site {
            background:url(images/480/background.jpg) center bottom no-repeat;
        }
        .center {
            width:320px;
            overflow:hidden;
        }
        #login {
            width:257px;
            height:378px;
            padding:109px 32px 0 31px;
            background:url(images/640/bg-login.png) top center;
            margin-left:-160px;
            top:83px;
        }
        header {
            height:114px;
            background:url(images/480/bg-header.png);
            overflow:hidden;
        }
        header h1 {
            margin:15px auto 15px;
            float:none;
        }
        header h2 {
            margin:0 auto 0;
            float:none;
        }
                #name {
                    padding:38px 0 128px;
                    background:url(images/480/bg1.png) top center no-repeat;
                }
                #name h3 {
                    font-size:31px;
                }
                #name p {
                    height:70px;
                    line-height:60px;
                    font-size:70px;
                }
                #counter {
                    margin-top:-100px;
                    padding:0 0 50px;
                    background:url(images/480/bg2.png) top center no-repeat;
                }
                    #counter h4 {
                        margin:0 0 15px;
                        font-size:22px;
                    }
                    #counter div.center > div {
                        margin:auto;
                        display:block;
                    }
                        #counter div p {
                            font-size:18px;
                        }
                #events {
                    padding:0 0 78px;
                    background:url(images/480/bg3.png) top center no-repeat;
                }
                    #events div.center div {
                        margin:0 auto;
                        display:block;
                    }
                    #events div.center div + div {
                        margin-top:50px;
                    }
    }