// LESS

// VAR
@imgPath: "img/desktop";
@imgMobile: "img/mobile";

// VAR CLASSES
.bg-home(@id) {
    z-index : 10;
    background : url('@{imgPath}/bg/bg@{id}.png') no-repeat center center;
    background-size: 100% 100%;
}

// FONTS
@font-face {font-family: Neue;src: url('fonts/HelveticaNeueLTStd-Th.otf');}
@font-face {font-family: Neueitalic;src: url('fonts/HelveticaNeueLTStd-ThIt.otf');}
@font-face {font-family: Neuebold;src: url('fonts/HelveticaNeueLTStd-Md.otf');}

// GLOBAL
a {
    text-decoration : none;
    color : #FFF;
}

a:focus {
    border : 0;
    outline: 0;
    text-decoration : none;
}

sup {
    text-transform : lowercase;
}

// STYLES - DESKTOP
html {

    padding : 0;
    margin : 0;
    width : 100%;
    height : 100%;

    #bodyPlay {
        overflow : hidden;
    }

     body { 

        padding : 0;
        margin : 0;
        width : 100%;
        height : 100%;
        background : #1bbc9b;
        font-family: helvetica, arial, serif;
        color : #FFF;
        font-size : 18px;

            #ready {
                position : fixed;
                z-index : 100;
                left : 0;
                top : 0;                
                font-family: "Neue";
                text-transform : uppercase;
                background : #228B75;
                font-size : 1em;
                width : 100%;
                height : 100%;
                display : table;
                text-align : center;
                transition: top 0.3s ease-in;
            }

            #topScore {
                position : fixed;
                z-index : 100;
                left : 0;
                top : -200%;                
                font-family: "Neue";
                text-transform : uppercase;
                background : #228B75;
                font-size : 1em;
                width : 100%;
                height : 100%;
                display : table;
                text-align : center;
                transition: top 0.3s ease-in;
                overflow : hidden;

                #record {
                    font-weight: 300;
                    border: 1px dotted #FFF;
                    font-size: 1.8em;
                    font-family: Arial;
                    display: inline-block;
                    letter-spacing: 2px;
                    background: #EB344B !important;   
                    padding: 10px 15px;
                }

                #overflowScore {
                    width : 100%;
                    height : 100%;
                    overflow : auto;
                    padding-top : 40px;
                }

                #record.blink {
                    background: #EB344B !important;                    
                }

                table {
                    margin : 40px auto;
                    font-family: "Lucida Console", Monaco, monospace;

                    thead {
                        text-transform: lowercase;
                        border-bottom : 1px solid #FFF;
                    }

                    tr.myScore {
                        background : #01da90;

                        input[type="text"]{                            
                            width : 45px;
                            text-align : right;
                            font-family: "Lucida Console", Monaco, monospace;
                            text-transform : uppercase;
                            color : #2c3e50;
                            border : 3px solid #f1c40f;
                            background : #ecf0f1;
                            padding : 5px 10px;
                            margin-right : -12px;
                        }

                        #tooltip{  
                            border : 5px solid #FFF; 
                            background : #228B75; 
                            text-align: center; 
                            padding : 8px 10px; 
                            margin-left : -290px;
                            float : left;

                            .arrow {
                                    display : inline-block;
                                    width: 0;
                                    height: 0;
                                    border-top: 11px solid transparent;
                                    border-left: 15px solid #FFF;
                                    border-bottom: 11px solid transparent;
                                    float: right;
                                    margin-right: -30px;
                            }

                        }

                        #submitForm {
                            background: none;
                            border: 0;
                            padding: 0;
                            font-size: 1.5em;
                            letter-spacing: 0px;
                            text-decoration: none;
                            color: #FFF;
                        }

                        #tweet-button {

                            float : right;
                            background : url('@{imgPath}/arrow.png') no-repeat left center; 
                            padding-left: 70px;
                            display: inline-block;
                            text-transform: none;
                            font-family: 'Neue';
                            font-weight: 300;
                            text-align: center;
                            margin-top: 0;
                            padding-top: 15px;
                            line-height: 25px;
                            margin-right: -200px;
                            height: 1px;

                            a {
                                display: block;
                                padding: 0;
                                background: none;
                                border: 0;
                            }
                        }
                    }

                    td {
                        text-align : right;
                        padding : 2px 40px;
                        margin : 0;
                        font-size: 1.4em;

                        .avatarMin {                            
                            border-radius : 50%;
                            width : 40px;
                            height : 40px;
                            margin : 0 0 0 10px;
                            border-bottom : 0;
                            display : block;
                        }

                        .avatarMin.basse { 
                            border : 5px solid #58AFE1;
                            background : #66ccff url('@{imgMobile}/avatars/basse/50.gif') no-repeat center center;
                            background-size : contain;
                        }

                        .avatarMin.baryton { 
                            border : 5px solid #BF78CE;
                            background : #d79ae5 url('@{imgMobile}/avatars/baryton/50.gif') no-repeat center center;
                            background-size : contain;
                        }

                        .avatarMin.tenor {
                            border : 5px solid #81D4F8;
                            background : #abfed8 url('@{imgMobile}/avatars/tenor/50.gif') no-repeat center center;
                            background-size : contain;
                        }

                        .avatarMin.alto {  
                            border : 5px solid #149E80;
                            background : #abd372 url('@{imgMobile}/avatars/alto/50.gif') no-repeat center center;
                            background-size : contain;
                        }

                        .avatarMin.mezzo {  
                            border : 5px solid #D6AA1A;
                            background : #ffff6f url('@{imgMobile}/avatars/mezzo/50.gif') no-repeat center center;
                            background-size : contain;
                        }

                        .avatarMin.soprano {  
                            border : 5px solid #EB344B;
                            background : #eb344b url('@{imgMobile}/avatars/soprano/50.gif') no-repeat center center;
                            background-size : contain;
                        }

                    }

                    td.noPadding {
                        padding : 2px 0;
                    }

                }

                a, input[type="submit"] {
                    background: #EB344B;
                    border: 1px solid #FFF;
                    padding: 15px 20px;
                    font-size: 2em;
                    letter-spacing: 3px;
                    text-decoration : none;
                    color : #FFF;
                    text-transform : uppercase;
                }

                a:hover, input[type="submit"]:hover {
                    border : 1px dotted #FFF;
                }

            }

            #timer {
                position : absolute;
                left : 0;
                top :0;
                z-index : 51;
                padding : 0;
                margin : 10px;
                border-radius : 50%;
                width : 200px;
                height : 200px;
                border : 10px solid #FFF;
                background : #fff;
            }

            #countdown {
                font-family: "Neue";
                text-transform : uppercase;
                position : absolute;
                left : 20px;
                top :20px;
                z-index : 53;
                padding : 0;
                margin : 10px;
                font-size : 8em;
                border-radius : 50%;
                width : 180px;
                height : 180px;
                line-height : 180px;
                text-align : center;
                background : #fff;
                color : #01DA90;
            }

            #countdown.alert {
                color : #EB344B;
            }

            // PIECHART - STRAT ================================================

            // VAR
            @pieValue: 200px;

            // FUNCTION
            .piechart(@data) {
                position : absolute;
                z-index : 52;  
                left : 0px;
                top :0px;
                width: @data; 
                height: @data; 
                border-top-left-radius: @data; 
                border-top-right-radius: @data; 
                border-bottom-right-radius: @data; 
                border-bottom-left-radius: @data; 
            }

            #piechart {
                     
                margin : 20px 0 0 20px;
                background-color: #FFF;
                .piechart(@pieValue);

                .d1 {

                    .piechart(@pieValue);
                    -webkit-transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -o-transform : rotate(0deg);
                    transform: rotate(0deg);
                    
                    
                    .q1 {

                        .piechart(@pieValue);
                        background-color: #01DA90;
                        clip: rect(0px @pieValue/2 @pieValue 0px); 

                    }

                }                

                .d2 {

                    .piechart(@pieValue);
                    clip: rect(0px @pieValue @pieValue @pieValue/2); 
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -o-transform : rotate(180deg);
                    transform: rotate(180deg);
                    
                    .q2 {
                        .piechart(@pieValue);
                        background-color: #01DA90;
                        clip: rect(0px @pieValue/2 @pieValue 0px);
                    }
                }

            }

                // FIRST HALF
                .count9 .d1, .count8 .d1, .count7 .d1, .count6 .d1, .count5 .d1 {
                    clip: rect(0px @pieValue @pieValue 0px); 
                }
                .count4 .d1, .count3 .d1, .count2 .d1, .count1 .d1, .count0 .d1 {
                    clip: rect(0px @pieValue @pieValue @pieValue/2); 
                }
                .count9 .q1, .count8 .q1, .count7 .q1, .count6 .q1, .count5 .q1 {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -o-transform : rotate(180deg);
                    transform: rotate(180deg);
                }
                .count4 .q1{
                    -webkit-transform: rotate(144deg);
                    -moz-transform: rotate(144deg);
                    -o-transform : rotate(144deg);
                    transform: rotate(144deg);
                }
                .count3 .q1{
                    -webkit-transform: rotate(108deg);
                    -moz-transform: rotate(108deg);
                    -o-transform : rotate(108deg);
                    transform: rotate(108deg);
                }
                .count2 .q1{
                    -webkit-transform: rotate(72deg);
                    -moz-transform: rotate(72deg);
                    -o-transform : rotate(72deg);
                    transform: rotate(72deg);
                }
                .count1 .q1{
                    -webkit-transform: rotate(36deg);
                    -moz-transform: rotate(36deg);
                    -o-transform : rotate(36deg);
                    transform: rotate(36deg);
                }
                .count0 .q1 {
                    -webkit-transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -o-transform : rotate(0deg);
                    transform: rotate(0deg);
                }

                // SECOND HALF
                .count9 .q2 { 
                    -webkit-transform: rotate(144deg);
                    -moz-transform: rotate(144deg);
                    -o-transform : rotate(144deg);
                    transform: rotate(144deg);
                }

                .count8 .q2 { 
                    -webkit-transform: rotate(108deg);
                    -moz-transform: rotate(108deg);
                    -o-transform : rotate(108deg);
                    transform: rotate(108deg);
                }

                .count7 .q2 { 
                    -webkit-transform: rotate(72deg);
                    -moz-transform: rotate(72deg);
                    -o-transform : rotate(72deg);
                    transform: rotate(72deg);
                }

                .count6 .q2 { 
                    -webkit-transform: rotate(36deg);
                    -moz-transform: rotate(36deg);
                    -o-transform : rotate(36deg);
                    transform: rotate(36deg);
                }
                .count5 .q2 { 
                    -webkit-transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -o-transform : rotate(0deg);
                    transform: rotate(0deg);
                }
                .count4 .d2, .count3 d2, .count2 .d2, .count1 .d2, .count0 .d2 {
                    display : none; 
                }
                .alert .q1 {
                    background : #EB344B !important;
                }

            // PIECHART - END ==================================================

            #wrapper{
                padding : 0;
                margin : 0;
                width : 100%;
                height : 100%;
                display : table;
                vertical-align : middle;

                // #############################################################
                // PLAYERS - START =============================================
                // #############################################################

                .basse {

                    #playerCorpse {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 50; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/basse/body1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerCorpse.step1 {background-image : url('@{imgPath}/avatars/basse/body1.png'); }
                    #playerCorpse.step2 {background-image : url('@{imgPath}/avatars/basse/body2.png'); }
                    #playerCorpse.step3 {background-image : url('@{imgPath}/avatars/basse/body3.png'); }
                    #playerCorpse.step4 {background-image : url('@{imgPath}/avatars/basse/body4.png'); }

                    #playerHead {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 51; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/basse/face1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerHead.step1 {background-image : url('@{imgPath}/avatars/basse/face1.png'); }
                    #playerHead.step2 {background-image : url('@{imgPath}/avatars/basse/face2.png'); }
                    #playerHead.step3 {background-image : url('@{imgPath}/avatars/basse/face3.png'); }
                    #playerHead.step4 {background-image : url('@{imgPath}/avatars/basse/face4.png'); }
                    #playerHead.step5 {background-image : url('@{imgPath}/avatars/basse/face5.png'); }
                    #playerHead.step6 {background-image : url('@{imgPath}/avatars/basse/face6.png'); }

                }

                .baryton {

                    #playerCorpse {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 50; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/baryton/body1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerCorpse.step1 {background-image : url('@{imgPath}/avatars/baryton/body1.png'); }
                    #playerCorpse.step2 {background-image : url('@{imgPath}/avatars/baryton/body2.png'); }
                    #playerCorpse.step3 {background-image : url('@{imgPath}/avatars/baryton/body3.png'); }
                    #playerCorpse.step4 {background-image : url('@{imgPath}/avatars/baryton/body4.png'); }

                    #playerHead {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 51; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/baryton/face1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerHead.step1 {background-image : url('@{imgPath}/avatars/baryton/face1.png'); }
                    #playerHead.step2 {background-image : url('@{imgPath}/avatars/baryton/face2.png'); }
                    #playerHead.step3 {background-image : url('@{imgPath}/avatars/baryton/face3.png'); }
                    #playerHead.step4 {background-image : url('@{imgPath}/avatars/baryton/face4.png'); }
                    #playerHead.step5 {background-image : url('@{imgPath}/avatars/baryton/face5.png'); }
                    #playerHead.step6 {background-image : url('@{imgPath}/avatars/baryton/face6.png'); } 

                }

                .tenor {

                    #playerCorpse {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 50; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/tenor/body1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerCorpse.step1 {background-image : url('@{imgPath}/avatars/tenor/body1.png'); }
                    #playerCorpse.step2 {background-image : url('@{imgPath}/avatars/tenor/body2.png'); }
                    #playerCorpse.step3 {background-image : url('@{imgPath}/avatars/tenor/body3.png'); }
                    #playerCorpse.step4 {background-image : url('@{imgPath}/avatars/tenor/body4.png'); }

                    #playerHead {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 51; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/tenor/face1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerHead.step1 {background-image : url('@{imgPath}/avatars/tenor/face1.png'); }
                    #playerHead.step2 {background-image : url('@{imgPath}/avatars/tenor/face2.png'); }
                    #playerHead.step3 {background-image : url('@{imgPath}/avatars/tenor/face3.png'); }
                    #playerHead.step4 {background-image : url('@{imgPath}/avatars/tenor/face4.png'); }
                    #playerHead.step5 {background-image : url('@{imgPath}/avatars/tenor/face5.png'); } 

                }

                .alto {

                    #playerCorpse {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 50; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/alto/body1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerCorpse.step1 {background-image : url('@{imgPath}/avatars/alto/body1.png'); }
                    #playerCorpse.step2 {background-image : url('@{imgPath}/avatars/alto/body2.png'); }
                    #playerCorpse.step3 {background-image : url('@{imgPath}/avatars/alto/body3.png'); }
                    #playerCorpse.step4 {background-image : url('@{imgPath}/avatars/alto/body4.png'); }

                    #playerHead {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 51; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/alto/face1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerHead.step1 {background-image : url('@{imgPath}/avatars/alto/face1.png'); }
                    #playerHead.step2 {background-image : url('@{imgPath}/avatars/alto/face2.png'); }
                    #playerHead.step3 {background-image : url('@{imgPath}/avatars/alto/face3.png'); }
                    #playerHead.step4 {background-image : url('@{imgPath}/avatars/alto/face4.png'); }
                    #playerHead.step5 {background-image : url('@{imgPath}/avatars/alto/face5.png'); }                    

                }

                .mezzo {

                    #playerCorpse {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 50; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/mezzo/body1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerCorpse.step1 {background-image : url('@{imgPath}/avatars/mezzo/body1.png'); }
                    #playerCorpse.step2 {background-image : url('@{imgPath}/avatars/mezzo/body2.png'); }
                    #playerCorpse.step3 {background-image : url('@{imgPath}/avatars/mezzo/body3.png'); }
                    #playerCorpse.step4 {background-image : url('@{imgPath}/avatars/mezzo/body4.png'); }

                    #playerHead {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 51; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/mezzo/face1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerHead.step1 {background-image : url('@{imgPath}/avatars/mezzo/face1.png'); }
                    #playerHead.step2 {background-image : url('@{imgPath}/avatars/mezzo/face2.png'); }
                    #playerHead.step3 {background-image : url('@{imgPath}/avatars/mezzo/face3.png'); }
                    #playerHead.step4 {background-image : url('@{imgPath}/avatars/mezzo/face4.png'); }
                    #playerHead.step5 {background-image : url('@{imgPath}/avatars/mezzo/face5.png'); }
                    #playerHead.step6 {background-image : url('@{imgPath}/avatars/mezzo/face6.png'); }

                }

                .soprano {

                    #playerCorpse {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 50; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/soprano/body1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerCorpse.step1 {background-image : url('@{imgPath}/avatars/soprano/body1.png'); }
                    #playerCorpse.step2 {background-image : url('@{imgPath}/avatars/soprano/body2.png'); }
                    #playerCorpse.step3 {background-image : url('@{imgPath}/avatars/soprano/body3.png'); }
                    #playerCorpse.step4 {background-image : url('@{imgPath}/avatars/soprano/body4.png'); }

                    #playerHead {
                        position : fixed;
                        top : 0;
                        left : 0;                        
                        z-index : 51; 
                        padding : 0;
                        margin : 0;
                        width : 100%;
                        height : 100%; 
                        background : url('@{imgPath}/avatars/soprano/face1.png') no-repeat center center;
                        background-size : contain;

                        // ANIMATION
                        //-webkit-animation-duration: 3s;
                        //-webkit-animation-delay: 2s;
                        -webkit-animation-iteration-count: infinite;
                        -moz-animation-iteration-count: infinite;
                        -o-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                    #playerHead.step1 {background-image : url('@{imgPath}/avatars/soprano/face1.png'); }
                    #playerHead.step2 {background-image : url('@{imgPath}/avatars/soprano/face2.png'); }
                    #playerHead.step3 {background-image : url('@{imgPath}/avatars/soprano/face3.png'); }
                    #playerHead.step4 {background-image : url('@{imgPath}/avatars/soprano/face4.png'); }
                    #playerHead.step5 {background-image : url('@{imgPath}/avatars/soprano/face5.png'); }

                }

                // #############################################################
                // PLAYERS - END ===============================================
                // #############################################################

            }


            .tr {
                padding : 0;
                margin : 0;
                width : 100%;
                height : 100%;
                display : table-row;
                vertical-align : middle;
            }

            .td {
                padding : 0;
                margin : 0;
                width : 100%;
                height : 100%;
                display : table-cell;
                vertical-align : middle;
            }

            .bg {
                position : fixed;
                top : 0;
                left : 0;
                padding : 0;
                margin : 0;
                width : 100%;
                height : 100%;
            }

            #bg1 {
                .bg-home("1")
            }

            #bg2 {
                .bg-home("2")
            }

            #bg3 {
                .bg-home("3")
            }

            #bg4 {
                .bg-home("4")
            }

            #instructions {

                font-size : 1em;
                position : fixed;
                right : 0;
                bottom :0;
                z-index : 70;
                width : 310px;
                height : 290px;
                overflow : hidden;

                .wrapper {
                    margin : 0;
                    padding : 60px 0 0 10px ;
                    border-radius : 50%;
                    width : 600px;
                    height : 600px;
                    letter-spacing : 2px;
                    text-align : right;
                    background : #01da90;

                    h2 {
                        font-family: 'Neue';
                        font-weight : 300;
                        text-transform : uppercase;
                        color : #FFF;
                        font-size : 1.2em;
                        letter-spacing : 1px;
                        margin : 0 0 20px 0;
                        padding : 20px 0 0 0;
                        position : relative;
                        left : -310px;
                        border-bottom : 1px dotted #fff;
                        display : inline-block;
                    }   

                    img#iclock  {
                        position : relative;
                        left : -330px;
                        top : -5px;
                        height : 70px;
                    }  

                    img#iscroll  {
                        position : relative;
                        left : -320px;
                        top : -5px;
                        height : 70px;
                    }  

                    img#itap  {
                        position : relative;
                        left : -320px;
                        height : 70px;
                    } 

                    img#ispace  {
                        position : relative;
                        left : -320px;
                        height : 70px;
                    }       

                }

            }


            #score{
                font-size : 2.5em;
                position : fixed;
                left : 20px;
                bottom : 50px;
                z-index : 70;  
                font-family: 'Neue';
                font-weight : 300;
                text-transform : uppercase;
                background : #EB344B;
                padding : 10px 15px;
                #db{
                    text-transform : lowercase;
                    display : none;
                }
            }

            footer {

                position : fixed;
                bottom : 0;
                width : 100%;
                z-index : 60;
                padding : 10px 0px;
                font-size : 0.8em;
                letter-spacing : 0.1em;
                background : #228B75;
                font-family: 'Neue';
                font-weight : 300;

                .fleft {
                 float : left;
                 padding-left : 10px;
                 background : #228B75;
                }

                a {
                    font-family: 'Neue';
                    font-weight : 300;
                }

                a:hover {
                    border-bottom : 1px dotted #fff;
                }

                a:focus {
                    border-bottom : 1px dotted #fff;
                }

                center {
                    position : relative;
                    left : -210px;
                    a {
                        background : #228B75;
                        margin : 0 5px;
                    }
                }

                #instructionsLink {
                        display : none;
                }

             }

        }

}

// STYLES - MOBILE
@media screen and (max-width: 960px) {

   footer {
       .fleft {
           display : none;
       }

       center {
           left : 0 !important;
       }
   }

    #instructions {
        display : none;
    }

    #instructionsLink {
            display : inline !important;
    }

}