@charset "utf-8";

/*
reset styles
*/

* {
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
}

body {
    background-color: #000;
    overflow: hidden;
}

#mainContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 2048px;
    height: 1536px;
    overflow: hidden;
}

.backgroundImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 2048px;
    height: 1536px;
}

#overlay0 {
    position: absolute;
    top: 1030px;
    left: 500px;
    width: 988px;
    height: 259px;
}

.steps {
    /*position:absolute;*/
    top: 0;
    left: 0;
    width: 2048px;
    height: 1536px;
    display: none;
}

#overlay1Pic {
    position: absolute;
    top: 280px;
    left: 160px;
    /*width:1398px;*/
    /*height:1028px;*/
}

.debug {
    border: 1px solid red;
}

#nextButton {
    position: absolute;
    top: 1332px;
    left: 876px;
    width: 321px;
    height: 63px;
}

#step1 {
    position: absolute;
    top: 1333px;
    left: 1420px;
    width: 65px;
    height: 65px;
}

#step2 {
    position: absolute;
    top: 1333px;
    left: 1529px;
    width: 65px;
    height: 65px;
}

#step3 {
    position: absolute;
    top: 1333px;
    left: 1638px;
    width: 65px;
    height: 65px;
}

#step4 {
    position: absolute;
    top: 1333px;
    left: 1747px;
    width: 65px;
    height: 65px;
}

#step5 {
    position: absolute;
    top: 1333px;
    left: 1856px;
    width: 65px;
    height: 65px;
}

#step1-beat1 {
    position: absolute;
    top: 855px;
    left: 160px;
    width: 280px;
    height: 125px;
}

#step1-beat2 {
    position: absolute;
    top: 1000px;
    left: 160px;
    width: 280px;
    height: 125px;
}

#equaliser1 {
    position: absolute;
    top: 562px;
    left: 524px;
    top: 525px;
    left: 572px;
    /*width:137px;*/
    /*height:413px;*/
}

#equaliser2 {
    position: absolute;
    top: 525px;
    left: 938px;
    /*width:137px;*/
    /*height:413px;*/
}

#equaliser3 {
    position: absolute;
    top: 562px;
    left: 1043px;
    width: 137px;
    height: 413px;
}

#equaliser4 {
    position: absolute;
    top: 562px;
    left: 1302px;
    width: 137px;
    height: 413px;
}

#step1-instrument1 {
    position: absolute;
    top: 702px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step1-instrument2 {
    position: absolute;
    top: 850px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step1-instrumentName1 {
    position: absolute;
    top: 843px;
    left: 285px;
    /*width:147px;*/
    /*height:113px;*/
}

#step1-instrumentName2 {
    position: absolute;
    top: 988px;
    left: 285px;
    /*width:169px;*/
    /*height:113px;*/
}

#step1-equaliser-light {
    position: absolute;
    top: 1135px;
    left: 550px;
    z-index: 10;
    /*width:246px;*/
    /*height:114px;*/
}

#overlay2DancePic {
    position: absolute;
    top: 280px;
    left: 160px;
    /*width:1398px;*/
    /*height:1351px;*/
}

#overlay2UrbanPic {
    position: absolute;
    top: 156px;
    left: 110px;
    top: 280px;
    left: 160px;
    /*width:1398px;
height:1351px;*/
}

#overlay3DancePic {
    position: absolute;
    top: 280px;
    left: 160px;
}

#overlay3UrbanPic {
    position: absolute;
    top: 280px;
    left: 160px;
}

#overlay4DancePic {
    position: absolute;
    top: 280px;
    left: 160px;
}

#overlay4UrbanPic {
    position: absolute;
    top: 280px;
    left: 160px;
}

#step2dance-instrumentName1 {
    position: absolute;
    top: 311px;
    left: 285px;
    /*width:207px;
height:117px;*/
}

#step2dance-instrumentName2 {
    position: absolute;
    top: 447px;
    left: 285px;
    /*width:150px;
height:112px;*/
}

#step2dance-instrumentName3 {
    position: absolute;
    top: 592px;
    left: 285px;
    /*width:174px;
height:112px;*/
}

#step2dance-instrumentName4 {
    position: absolute;
    top: 740px;
    left: 285px;
    /*width:233px;
height:116px;*/
}

#step2dance-instrumentName5 {
    position: absolute;
    top: 881px;
    left: 285px;
    /*width:173px;
height:150px;*/
}

#step2dance-instrumentName6 {
    position: absolute;
    top: 1017px;
    left: 285px;
    /*width:178px;*/
    /*height:140px;*/
}

#step2dance-equaliser-light,
#step2urban-equaliser-light {
    position: absolute;
    top: 1008px;
    left: 887px;
    top: 1135px;
    z-index: 10;
    /*width:287px;*/
    /*height:114px;*/
}

#step2dance-instrument1,
#step2urban-instrument1 {
    position: absolute;
    top: 111px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step2dance-instrument2,
#step2urban-instrument2 {
    position: absolute;
    top: 260px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step2dance-instrument3,
#step2urban-instrument3 {
    position: absolute;
    top: 406px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step2dance-instrument4,
#step2urban-instrument4 {
    position: absolute;
    top: 553px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step2dance-instrument5,
#step2urban-instrument5 {
    position: absolute;
    top: 702px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step2dance-instrument6,
#step2urban-instrument6 {
    position: absolute;
    top: 850px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step2urban-instrumentName1 {
    position: absolute;
    top: 312px;
    left: 285px;
}

#step2urban-instrumentName2 {
    position: absolute;
    top: 451px;
    left: 285px;
}

#step2urban-instrumentName3 {
    position: absolute;
    top: 591px;
    left: 285px;
}

#step2urban-instrumentName4 {
    position: absolute;
    top: 742px;
    left: 285px;
}

#step2urban-instrumentName5 {
    position: absolute;
    top: 876px;
    left: 285px;
}

#step2urban-instrumentName6 {
    position: absolute;
    top: 1020px;
    left: 285px;
}


#step3dance-instrument1,
#step3urban-instrument1 {
    position: absolute;
    top: 260px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step3dance-instrument2,
#step3urban-instrument2 {
    position: absolute;
    top: 406px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step3dance-instrument3,
#step3urban-instrument3 {
    position: absolute;
    top: 553px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step3dance-instrument4,
#step3urban-instrument4 {
    position: absolute;
    top: 702px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step3dance-instrument5,
#step3urban-instrument5 {
    position: absolute;
    top: 850px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step3dance-instrumentName1 {
    position: absolute;
    top: 451px;
    left: 285px;
}

#step3dance-instrumentName2 {
    position: absolute;
    top: 591px;
    left: 285px;
}

#step3dance-instrumentName3 {
    position: absolute;
    top: 736px;
    left: 285px;
}

#step3dance-instrumentName4 {
    position: absolute;
    top: 880px;
    left: 285px;
}

#step3dance-instrumentName5 {
    position: absolute;
    top: 1020px;
    left: 285px;
}

#step3dance-equaliser-light,
#step3urban-equaliser-light {
    position: absolute;
    top: 1008px;
    left: 1020px;
    width: 190px;
    height: 113px;
}

#step3dance-equaliser-light-fr,
#step3urban-equaliser-light-fr {
    position: absolute;
    top: 1014px;
    left: 984px;
    width: 280px;
    height: 97px;
}


#step3urban-instrumentName1 {
    position: absolute;
    top: 451px;
    left: 285px;
}

#step3urban-instrumentName2 {
    position: absolute;
    top: 591px;
    left: 285px;
}

#step3urban-instrumentName3 {
    position: absolute;
    top: 742px;
    left: 285px;
}

#step3urban-instrumentName4 {
    position: absolute;
    top: 878px;
    left: 285px;
}

#step3urban-instrumentName5 {
    position: absolute;
    top: 1020px;
    left: 285px;
}

#step4dance-instrument1,
#step4urban-instrument1 {
    position: absolute;
    top: 111px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step4dance-instrument2,
#step4urban-instrument2 {
    position: absolute;
    top: 260px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step4dance-instrument3,
#step4urban-instrument3 {
    position: absolute;
    top: 406px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step4dance-instrument4,
#step4urban-instrument4 {
    position: absolute;
    top: 553px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step4dance-instrument5,
#step4urban-instrument5 {
    position: absolute;
    top: 702px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step4dance-instrument6,
#step4urban-instrument6 {
    position: absolute;
    top: 850px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step4dance-equaliser-light,
#step4urban-equaliser-light {
    position: absolute;
    top: 1008px;
    left: 1281px;
    width: 190px;
    height: 114px;
}

#step4dance-equaliser-light-fr,
#step4urban-equaliser-light-fr {
    position: absolute;
    top: 1008px;
    left: 1277px;
    width: 190px;
    height: 114px;
}

#step4urban-instrumentName1 {
    position: absolute;
    top: 313px;
    left: 285px;
}

#step4urban-instrumentName2 {
    position: absolute;
    top: 475px;
    left: 285px;
}

#step4urban-instrumentName3 {
    position: absolute;
    top: 607px;
    left: 285px;
}

#step4urban-instrumentName4 {
    position: absolute;
    top: 752px;
    left: 285px;
}

#step4urban-instrumentName5 {
    position: absolute;
    top: 884px;
    left: 285px;
}

#step4urban-instrumentName6 {
    position: absolute;
    top: 1016px;
    left: 285px;
}


#step4dance-instrumentName1 {
    position: absolute;
    top: 312px;
    left: 285px;
}

#step4dance-instrumentName2 {
    position: absolute;
    top: 451px;
    left: 285px;
}

#step4dance-instrumentName3 {
    position: absolute;
    top: 591px;
    left: 285px;
}

#step4dance-instrumentName4 {
    position: absolute;
    top: 742px;
    left: 285px;
}

#step4dance-instrumentName5 {
    position: absolute;
    top: 876px;
    left: 285px;
}

#step4dance-instrumentName6 {
    position: absolute;
    top: 1020px;
    left: 285px;
}

#overlay5Pic {
    position: absolute;
    top: 280px;
    left: 160px;
}

#step5photo-filter1 {
    position: absolute;
    top: 111px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step5photo-filter2 {
    position: absolute;
    top: 260px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step5photo-filter3 {
    position: absolute;
    top: 406px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step5photo-filter4 {
    position: absolute;
    top: 553px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step5photo-filter5 {
    position: absolute;
    top: 702px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step5photo-filter6 {
    position: absolute;
    top: 850px;
    left: 66px;
    width: 196px;
    height: 196px;
}

#step5photo-filter1Text {
    position: absolute;
    top: 154px;
    left: 216px;
    width: 205px;
    height: 112px;
}

#step5photo-filter2Text {
    position: absolute;
    top: 302px;
    left: 217px;
    width: 166px;
    height: 112px;
}

#step5photo-filter3Text {
    position: absolute;
    top: 452px;
    left: 214px;
    width: 187px;
    height: 111px;
}

#step5photo-filter4Text {
    position: absolute;
    top: 594px;
    left: 216px;
    width: 235px;
    height: 118px;
}

#step5photo-filter5Text {
    position: absolute;
    top: 743px;
    left: 214px;
    width: 267px;
    height: 112px;
}

#step5photo-filter6Text {
    position: absolute;
    top: 894px;
    left: 215px;
    width: 191px;
    height: 115px;
}

#overlay6Pic {
    position: absolute;
    top: 280px;
    left: 160px;
}

#overlay7Pic {
    position: absolute;
    top: 280px;
    left: 160px;
}

#overlay7Play {
    position: absolute;
    top: 778px;
    left: 528px;
}

.step2-instrument1 {
    position: absolute;
    top: 293px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step2-instrument2 {
    position: absolute;
    top: 434px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step2-instrument3 {
    position: absolute;
    top: 575px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step2-instrument4 {
    position: absolute;
    top: 716px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step2-instrument5 {
    position: absolute;
    top: 858px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step2-instrument6 {
    position: absolute;
    top: 1000px;
    left: 160px;
    width: 360px;
    height: 125px;
}


.step3-drums1 {
    position: absolute;
    top: 434px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step3-drums2 {
    position: absolute;
    top: 575px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step3-drums3 {
    position: absolute;
    top: 716px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step3-drums4 {
    position: absolute;
    top: 858px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step3-drums5 {
    position: absolute;
    top: 1000px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step4-effect1 {
    position: absolute;
    top: 293px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step4-effect2 {
    position: absolute;
    top: 434px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step4-effect3 {
    position: absolute;
    top: 575px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step4-effect4 {
    position: absolute;
    top: 716px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step4-effect5 {
    position: absolute;
    top: 858px;
    left: 160px;
    width: 360px;
    height: 125px;
}

.step4-effect6 {
    position: absolute;
    top: 1000px;
    left: 160px;
    width: 360px;
    height: 125px;
}

#step5-photoFilterButton1 {
    position: absolute;
    top: 140px;
    left: 100px;
    width: 340px;
    height: 140px;
}

#step5-photoFilterButton2 {
    position: absolute;
    top: 284px;
    left: 100px;
    width: 340px;
    height: 140px;
}

#step5-photoFilterButton3 {
    position: absolute;
    top: 434px;
    left: 100px;
    width: 340px;
    height: 140px;
}

#step5-photoFilterButton4 {
    position: absolute;
    top: 580px;
    left: 100px;
    width: 340px;
    height: 140px;
}

#step5-photoFilterButton5 {
    position: absolute;
    top: 730px;
    left: 100px;
    width: 340px;
    height: 140px;
}

#step5-photoFilterButton6 {
    position: absolute;
    top: 880px;
    left: 100px;
    width: 340px;
    height: 140px;
}



.filter5 {
    filter: grayscale(100%);
}

.filter4 {
    filter: hue-rotate(50deg);
}

.filter2 {
    filter: sepia(64%) contrast(130%);
}

.filter1 {
    filter: contrast(250%)
}

.filter3 {
    filter: saturate(400%);
}

.filter6 {
    filter: none;
}

#photo,
#blueLightsFilterOverlay,
#fashionFilterOverlay,
#diamondFilterOverlay {
    position: absolute;
    left: 704px;
    top: 511px;
    width: 675px;
    height: 547px;
}

#shootPhotoButton {
    position: absolute;
    top: 1143px;
    left: 952px;
    width: 132px;
    height: 130px;
}

#qrCode {
    position: absolute;
    top: 725px;
    left: 821px;
    width: 256px;
    height: 256px;
    background-color: #fff;
    padding: 10px
}

#listenToSong {
    position: absolute;
    top: 760px;
    left: 480px;
    width: 270px;
    height: 240px;
}

#email {
    position: absolute;
    top: 720px;
    left: 1158px;
    width: 270px;
    height: 60px;
    padding: 4px;
    font-size: 30px;
    color: black !important;
    background-color: #fff !important;
}

#sendButton {
    position: absolute;
    top: 812px;
    left: 1200px;
    width: 180px;
    height: 118px;
}

#sendButton-fr {
    position: absolute;
    top: 774px;
    left: 1228px;
    width: 200px;
    height: 118px;
}

#startAgain {
    position: absolute;
    top: 1200px;
    left: 793px;
    width: 377px;
    height: 204px;
}

#photoBranding {
    position: absolute;
    top: 511px;
    left: 705px;
}

#photoMessage {
    position: absolute;
    top: 930px;
    left: 730px;
    width: 400px;
    height: 60px;
    background-color: transparent;
    border: none;
    font-size: 30px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-shadow: -1px 1px 8px #000, 1px -1px 8px #000;
}

#home {
    position: absolute;
    top: 60px;
    left: 50px;
    width: 88px;
    height: 23px;
}

#language {
    position: absolute;
    top: 60px;
    left: 200px;
    width: 97px;
    height: 31px;
}
#startbutton {
    position: absolute;
    width: 319px;
    height: 65px;
    top: 556px;
    left: 224px;
}