// 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;
}

a#backLink {

    text-align : center;
    position : fixed;
    z-index: 70;
    top : 0;
    right : 0;
    margin : 20px;
    border-top : 10px solid #FFF;
    border-left : 10px solid #FFF;
    border-right : 10px solid #EEE;
    border-bottom : 10px solid #EEE;
    display : none;
    padding : 15px 20px;
    font-family: "Lucida Console", Monaco, monospace;
    font-size : 1em;
    line-height : 1.2em;

    strong {
        font-weight : normal;
        font-family: "Neuebold", helvetica, arial, serif;
        font-size : 1.6em;
        line-height : 1em;
    }

}

a#backLink:hover {
    background : #228B75;
}

// STYLES - DESKTOP
html {

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

     body { 

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

        #desktop {

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

            .accessLink {
                position : absolute; top : -9999px;
            }

            .circle {
                font-family: 'Neue';
                text-transform : uppercase;
                position : absolute;
                left : 0;
                top :0;
                z-index : 50;
                padding : 0;
                margin : 10px;
                font-size : 2.1em;
                border-radius : 50%;
                width : 250px;
                height : 250px;
                letter-spacing : 2px;
                text-align : center;

                border : 5px solid #EB344B;
                background : #fff;
                color : #EB344B;

                .taller {
                   font-size : 1.2em;
                }

                .l1 {
                    font-size : 0.9em;
                    padding-top : 70px;
                }

                .l2 {
                    font-size : 1.2em;
                }

                // Transition
                perspective: 1000;
                -moz-transition: all 0.5s ease-in;
                -webkit-transition: all 0.5s ease-in;
                -o-transition: all 0.5s ease-in;
                transition: all 0.5s ease-in;

            }

            .flipin {
                -moz-transition: all 0.5s ease-out;
                -webkit-transition: all 0.5s ease-out;
                -o-transition: all 0.5s ease-out;
                transition: all 0.5s ease-out;
                transform: rotateY(90deg);
                -webkit-transform: rotateY(90deg); /* Safari and Chrome */
                border : 5px solid #ecf0f1;
                background : #02da91;
                color : #FFF;

                div {
                    transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg); /* Safari and Chrome */
                }

            }

            .flipin.basse {
                background : #66CCFF;
                color : #FFF;
            }
            .flipin.baryton {
                background : #C079CF;
                color : #FFF;
            }
            .flipin.tenor {
                background : #3788AB;
                color : #FFF;
            }
            .flipin.alto {
                background : #ABD372;
                color : #FFF;
            }
            .flipin.mezzo {
                background : #FFFF6F;
                color : #FFF;
            }
            .flipin.soprano {
                background : #EB344B;
                color : #FFF;
            }

            .flipout {
                -moz-transition: all 0.5s ease-out;
                -webkit-transition: all 0.5s ease-out;
                -o-transition: all 0.5s ease-out;
                transition: all 0.5s ease-out;
                transform: rotateY(180deg);
                -webkit-transform: rotateY(180deg); /* Safari and Chrome */
                border : 5px solid #ecf0f1;
                background : #02da91;
                color : #FFF;

                div {
                    transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg); /* Safari and Chrome */
                }

            }


            .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%;
                min-width : 960px;
            }

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

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

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

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

            #w960 {
                max-width : 960px;
                min-height : 768px;
                height : 768px;
                margin : 0 auto;
                text-align : left;

                #layer {
                    min-width : 960px;
                }             

                #baryton .avatar {
                    position : absolute;
                    z-index : 20;
                    margin-top : 10px; // ma = Margin top de .avatar                              
                    height : 578px; // ha = Hauteur de .avatar      
                    margin-left : 0;
                }

                #baryton .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+578px+10px-10px); // -hs + ha + ma - 10                            
                    width : 546px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 0;
                    display : none;
                }

                #basse .avatar {
                    position : absolute;
                    z-index : 20;
                    margin-top : 74px; // ma = Margin top de .avatar
                    height : 514px; // ha = Hauteur de .avatar      
                    margin-left : 590px;
                }

                #basse .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+514px+74px-10px); // -hs + ha + ma - 10               
                    width : 378px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 590px;
                    display : none;
                }

                #tenor .avatar {
                    position : absolute;
                    z-index : 30;
                    margin-top : 315px; // ma = Margin top de .avatar
                    height : 322px; // ha = Hauteur de .avatar      
                    margin-left : 50px;
                }

                #tenor .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+322px+315px-10px); // -hs + ha + ma - 10                                  
                    width : 236px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 50px;
                    display : none;
                }

                #alto .avatar {
                    position : absolute;
                    z-index : 30;
                    margin-top : 210px; // ma = Margin top de .avatar
                    height : 425px; // ha = Hauteur de .avatar      
                    margin-left : 370px;
                }

                #alto .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+425px+210px-10px); // -hs + ha + ma - 10                                          
                    width : 316px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 370px;
                    display : none;
                }

                #mezzo .avatar {
                    position : absolute;
                    z-index : 40;
                    margin-top : 360px; // ma = Margin top de .avatar
                    height : 353px; // ha = Hauteur de .avatar      
                    margin-left : 260px;
                }

                #mezzo .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+353px+360px-10px); // -hs + ha + ma - 10                                      
                    width : 224px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 260px;
                    display : none;
                }

                #soprano .avatar {
                    position : absolute;
                    z-index : 40;
                    margin-top : 448px; // ma = Margin top de .avatar
                    height : 268px; // ha = Hauteur de .avatar      
                    margin-left : 610px;
                }

                #soprano .shadow {
                    position : absolute;
                    z-index : 19;
                    margin-top : (-1024px+268px+448px-10px); // -hs + ha + ma - 10                   
                    width : 210px; // la = Largeur de .avatar
                    height : 1024px; // hs = Hauteur de shadow.png
                    margin-left : 610px;
                    display : none;
                }

            }

            #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;
                    }       

                }

            }

            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 10px;
                    }
                }

            }

        }

        #mobile {
            display : none;
        }

    }

}

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

    a#backLink {
        display : none;
    }

    html {

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

         body { 

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

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

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

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

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

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

            #desktop {
                display : none;
            }

            #mobile {

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

                header {
                    display : table;
                    padding : 0;
                    margin : 0;
                    width : 100%;
                    height : 20px;
                    position : fixed;
                    z-index : 21;
                    top : 0;
                    text-align : center;
                    background : #228B75;
                    color : #FFF;
                    font-size : 1.5em;
                    font-weight: 300;
                    letter-spacing : 2px;
                    line-height : 1.85em;
                    font-family: 'Neue';
                    text-transform : uppercase;
                }

                #mobileMain {
                    display : table;
                    padding : 0;
                    margin : 0;
                    width : 100%;
                    height : 100%;
                    text-align : center;
                    position : absolute;
                    z-index : 20;

                    table {
                        margin : 50px auto;
                    }

                    td {
                        color : #FFF;
                        font-size : 1em;
                        font-weight: 300;
                        letter-spacing : 2px;
                        font-family: 'Neue';
                        text-transform : uppercase;
                        text-align : center;
                        padding : 10px;

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

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

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

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

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

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

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

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

                    }

                }

                footer {
                    display : table;
                    padding : 0;
                    margin : 0;
                    width : 100%;
                    height : 25px;
                    position : fixed;
                    bottom : 0;
                    text-align : center;
                    background : #228B75;
                    z-index : 20;

                    a {
                        margin : 0 10px;
                        color : #FFF;
                        font-size : 0.8em;
                        line-height : 1.5em;
                        font-weight: 300;
                        letter-spacing : 1px;
                        font-family: 'Neue';
                    }

                }

            }
        }
    }

}