#achievements-wrapper{overflow:hidden;} #achievements ul:first-child{margin-left:0;} #lists{-moz-transition:0.5s left ease-in-out;-webkit-transition:0.5s left ease-in-out;-o-transition:0.5s left ease-in-out;-ms-transition:0.5s left ease-in-out;transition:0.5s left ease-in-out;position:relative;} #achievements-count{float:right;color:#fff;} #achievements-count div{display:inline-block;} #achievement-notification .coin{-moz-transition:0.2s opacity linear;-webkit-transition:0.2s opacity linear;-o-transition:0.2s opacity linear;-ms-transition:0.2s opacity linear;transition:0.2s opacity linear;} @media screen and (min-width:1501px){ .coin{width:72px;height:78px;} .achievement1 .coin{background-position:0 -666px;} .achievement2 .coin{background-position:-72px -666px;} .achievement3 .coin{background-position:-144px -666px;} .achievement4 .coin{background-position:-216px -666px;} .achievement5 .coin{background-position:-288px -666px;} .achievement6 .coin{background-position:-360px -666px;} .achievement7 .coin{background-position:-432px -666px;} .achievement8 .coin{background-position:-504px -666px;} .achievement9 .coin{background-position:-576px -666px;} .achievement10 .coin{background-position:-648px -666px;} .achievement11 .coin{background-position:-720px -666px;} .achievement12 .coin{background-position:-792px -666px;} .achievement13 .coin{background-position:-864px -666px;} .achievement14 .coin{background-position:-936px -666px;} .achievement15 .coin{background-position:-1008px -666px;} .achievement16 .coin{background-position:-1080px -666px;} .achievement17 .coin{background-position:-1152px -666px;} .achievement18 .coin{background-position:-648px -822px;} .achievement19 .coin{background-position:-720px -822px;} .achievement20 .coin{background-position:-792px -822px;} #achievements-wrapper{height:387px;width:1116px;margin:60px 0 30px 60px;} #achievements ul{float:left;margin-left:60px;} #achievements nav{height:66px;width:202px;margin:0 auto;} #previous,#next{height:66px;width:102px;display:inline-block;} .page1 #previous,.upscaled .page1 #previous{background-position:0px -846px;} .page5 #next,.upscaled .page5 #next{background-position:-99px -846px;} #previous,.upscaled #previous{background-position:-201px -846px;} #previous:active,.upscaled #previous:active{background-position:-402px -846px;} #next,.upscaled #next{margin-left:-15px;background-position:-300px -846px;} #next:active,.upscaled #next:active{background-position:-501px -846px;} .page1 #previous:hover,.page1 #previous:active{background-position:0px -846px;} .page5 #next:hover,.page5 #next:active{background-position:-99px -846px} #lists{width:6000px;} #achievements.page1 #lists{left:0;} #achievements.page2 #lists{left:-1176px;} #achievements.page3 #lists{left:-2352px;} #achievements.page4 #lists{left:-3528px;} #achievements.page5 #lists{left:-4704px;} #achievements-count{margin:18px 72px 0 0;} #achievements,#achievements li,#achievements .coin,#achievement-notification,#achievement-notification .coin,#coinsparks,.achievement-sharing a,#previous,#next{background-size:1248px;} #achievements{height:588px;width:1248px;margin-left:-624px;margin-top:-324px;font-size:30px;} #achievements li,.upscaled #achievements li{height:78px;width:1116px;background-position:0 -588px;margin:15px 0;} #achievements li .coin{margin-right:45px;} #achievements li span{padding-top:27px;} .achievement-sharing{right:24px;top:24px;} .achievement-sharing .facebook{height:33px;width:15px;background-position:-1116px -588px;} .achievement-sharing .facebook:hover{background-position:-1116px -621px;} .achievement-sharing .twitter,.upscaled .achievement-sharing .twitter{height:33px;width:48px;background-position:-1131px -588px;margin-left:15px;} .achievement-sharing .twitter:hover,.upscaled .achievement-sharing .twitter:hover{background-position:-1131px -621px;} #achievement-notification,.upscaled #achievement-notification{width:648px;bottom:66px;height:0;margin-left:-324px;background-position:0 -744px;} #achievement-notification.active{height:102px;} #achievement-notification .coin{position:absolute;top:-60px;left:50%;margin-left:-36px;opacity:0;} #achievement-notification.active .coin{opacity:1;} #achievement-notification.active #coinsparks,.upscaled #achievement-notification.active #coinsparks{height:78px;width:72px;-moz-animation:coinsparks3 0.8s steps(6,end) 7;-webkit-animation:coinsparks3 0.8s steps(6,end) 7;-o-animation:coinsparks3 0.8s steps(6,end) 7;-ms-animation:coinsparks3 0.8s steps(6,end) 7;} #achievement-notification .title{color:#fce045;font-size:20px;margin:27px 0 9px 0;} #achievement-notification .name{color:#eee;font-size:30px;margin:9px 0;} } @media screen and (max-width:1500px){ .coin{width:48px;height:52px;} .achievement1 .coin{background-position:0 -444px;} .achievement2 .coin{background-position:-48px -444px;} .achievement3 .coin{background-position:-96px -444px;} .achievement4 .coin{background-position:-144px -444px;} .achievement5 .coin{background-position:-192px -444px;} .achievement6 .coin{background-position:-240px -444px;} .achievement7 .coin{background-position:-288px -444px;} .achievement8 .coin{background-position:-336px -444px;} .achievement9 .coin{background-position:-384px -444px;} .achievement10 .coin{background-position:-432px -444px;} .achievement11 .coin{background-position:-480px -444px;} .achievement12 .coin{background-position:-528px -444px;} .achievement13 .coin{background-position:-576px -444px;} .achievement14 .coin{background-position:-624px -444px;} .achievement15 .coin{background-position:-672px -444px;} .achievement16 .coin{background-position:-720px -444px;} .achievement17 .coin{background-position:-768px -444px;} .achievement18 .coin{background-position:-432px -548px;} .achievement19 .coin{background-position:-480px -548px;} .achievement20 .coin{background-position:-528px -548px;} #achievements-wrapper{height:258px;width:744px;margin:40px 0 20px 40px;} #achievements ul{float:left;margin-left:40px;} #achievements nav{height:44px;width:134px;margin:0 auto;} #previous,#next{height:44px;width:68px;display:inline-block;} .page1 #previous,.upscaled .page1 #previous{background-position:0px -564px;} .page5 #next,.upscaled .page5 #next{background-position:-66px -564px;} #previous,.upscaled #previous{background-position:-134px -564px;} #previous:active,.upscaled #previous:active{background-position:-268px -564px;} #next,.upscaled #next{margin-left:-10px;background-position:-200px -564px;} #next:active,.upscaled #next:active{background-position:-334px -564px;} .page1 #previous:hover,.page1 #previous:active{background-position:0px -564px;} .page5 #next:hover,.page5 #next:active{background-position:-66px -564px} #lists{width:4000px;} #achievements.page1 #lists{left:0;} #achievements.page2 #lists{left:-784px;} #achievements.page3 #lists{left:-1568px;} #achievements.page4 #lists{left:-2352px;} #achievements.page5 #lists{left:-3136px;} #achievements-count{margin:12px 48px 0 0;} #achievements,#achievements li,#achievements .coin,#achievement-notification,#achievement-notification .coin,#coinsparks,.upscaled #coinsparks,.achievement-sharing a,#previous,#next{background-size:832px;} #achievements{height:392px;width:832px;margin-left:-416px;margin-top:-216px;font-size:20px;} #achievements li,.upscaled #achievements li{height:52px;width:744px;background-position:0 -392px;margin:10px 0;} #achievements li .coin{margin-right:30px;} #achievements li span{padding-top:18px;} .achievement-sharing{right:16px;top:16px;} .achievement-sharing .facebook{height:22px;width:10px;background-position:-744px -392px;} .achievement-sharing .facebook:hover{background-position:-744px -414px;} .achievement-sharing .twitter,.upscaled .achievement-sharing .twitter{height:22px;width:32px;background-position:-754px -392px;margin-left:10px;} .achievement-sharing .twitter:hover,.upscaled .achievement-sharing .twitter:hover{background-position:-754px -414px;} #achievement-notification,.upscaled #achievement-notification{width:432px;bottom:44px;height:0;margin-left:-216px;background-position:0 -496px;} #achievement-notification.active{height:68px;} #achievement-notification .coin{position:absolute;top:-40px;left:50%;margin-left:-24px;opacity:0;} #achievement-notification.active .coin{opacity:1;} #achievement-notification.active #coinsparks,.upscaled #achievement-notification.active #coinsparks{height:52px;width:48px;-moz-animation:coinsparks2 0.8s steps(6,end) 7;-webkit-animation:coinsparks2 0.8s steps(6,end) 7;-o-animation:coinsparks2 0.8s steps(6,end) 7;-ms-animation:coinsparks2 0.8s steps(6,end) 7;} #achievement-notification .title{color:#fce045;font-size:14px;margin:18px 0 6px 0;} #achievement-notification .name{color:#eee;font-size:20px;margin:6px 0;} } @media screen and (max-height:850px){ .coin{width:48px;height:52px;} .achievement1 .coin{background-position:0 -444px;} .achievement2 .coin{background-position:-48px -444px;} .achievement3 .coin{background-position:-96px -444px;} .achievement4 .coin{background-position:-144px -444px;} .achievement5 .coin{background-position:-192px -444px;} .achievement6 .coin{background-position:-240px -444px;} .achievement7 .coin{background-position:-288px -444px;} .achievement8 .coin{background-position:-336px -444px;} .achievement9 .coin{background-position:-384px -444px;} .achievement10 .coin{background-position:-432px -444px;} .achievement11 .coin{background-position:-480px -444px;} .achievement12 .coin{background-position:-528px -444px;} .achievement13 .coin{background-position:-576px -444px;} .achievement14 .coin{background-position:-624px -444px;} .achievement15 .coin{background-position:-672px -444px;} .achievement16 .coin{background-position:-720px -444px;} .achievement17 .coin{background-position:-768px -444px;} .achievement18 .coin{background-position:-432px -548px;} .achievement19 .coin{background-position:-480px -548px;} .achievement20 .coin{background-position:-528px -548px;} #achievements-wrapper{height:258px;width:744px;margin:40px 0 20px 40px;} #achievements ul{float:left;margin-left:40px;} #achievements nav{height:44px;width:135px;margin:0 auto;} #previous,#next{height:44px;width:68px;display:inline-block;} .page1 #previous,.upscaled .page1 #previous{background-position:0px -564px;} .page5 #next,.upscaled .page5 #next{background-position:-66px -564px;} #previous,.upscaled #previous{background-position:-134px -564px;} #previous:active,.upscaled #previous:active{background-position:-268px -564px;} #next,.upscaled #next{margin-left:-10px;background-position:-200px -564px;} #next:active,.upscaled #next:active{background-position:-334px -564px;} .page1 #previous:hover,.page1 #previous:active{background-position:0px -564px;} .page5 #next:hover,.page5 #next:active{background-position:-66px -564px} #lists{width:4000px;} #achievements.page1 #lists{left:0;} #achievements.page2 #lists{left:-784px;} #achievements.page3 #lists{left:-1568px;} #achievements.page4 #lists{left:-2352px;} #achievements.page5 #lists{left:-3136px;} #achievements-count{margin:12px 48px 0 0;} #achievements,#achievements li,#achievements .coin,#achievement-notification,#achievement-notification .coin,#coinsparks,.upscaled #coinsparks,.achievement-sharing a,#previous,#next{background-size:832px;} #achievements{height:392px;width:832px;margin-left:-416px;margin-top:-216px;font-size:20px;} #achievements li,.upscaled #achievements li{height:52px;width:744px;background-position:0 -392px;margin:10px 0;} #achievements li .coin{margin-right:30px;} #achievements li span{padding-top:18px;} .achievement-sharing{right:16px;top:16px;} .achievement-sharing .facebook{height:22px;width:10px;background-position:-744px -392px;} .achievement-sharing .facebook:hover{background-position:-744px -414px;} .achievement-sharing .twitter,.upscaled .achievement-sharing .twitter{height:22px;width:32px;background-position:-754px -392px;margin-left:10px;} .achievement-sharing .twitter:hover,.upscaled .achievement-sharing .twitter:hover{background-position:-754px -414px;} #achievement-notification,.upscaled #achievement-notification{width:432px;bottom:44px;height:0;margin-left:-216px;background-position:0 -496px;} #achievement-notification.active{height:68px;} #achievement-notification .coin{position:absolute;top:-40px;left:50%;margin-left:-24px;opacity:0;} #achievement-notification.active .coin{opacity:1;} #achievement-notification.active #coinsparks,.upscaled #achievement-notification.active #coinsparks{height:52px;width:48px;-moz-animation:coinsparks2 0.8s steps(6,end) 7;-webkit-animation:coinsparks2 0.8s steps(6,end) 7;-o-animation:coinsparks2 0.8s steps(6,end) 7;-ms-animation:coinsparks2 0.8s steps(6,end) 7;} #achievement-notification .title{color:#fce045;font-size:14px;margin:18px 0 6px 0;} #achievement-notification .name{color:#eee;font-size:20px;margin:6px 0;} } @media screen and (max-width:1000px){ .coin{width:24px;height:26px;} .achievement1 .coin{background-position:0 -222px;} .achievement2 .coin{background-position:-24px -222px;} .achievement3 .coin{background-position:-48px -222px;} .achievement4 .coin{background-position:-72px -222px;} .achievement5 .coin{background-position:-96px -222px;} .achievement6 .coin{background-position:-120px -222px;} .achievement7 .coin{background-position:-144px -222px;} .achievement8 .coin{background-position:-168px -222px;} .achievement9 .coin{background-position:-192px -222px;} .achievement10 .coin{background-position:-216px -222px;} .achievement11 .coin{background-position:-240px -222px;} .achievement12 .coin{background-position:-264px -222px;} .achievement13 .coin{background-position:-288px -222px;} .achievement14 .coin{background-position:-312px -222px;} .achievement15 .coin{background-position:-336px -222px;} .achievement16 .coin{background-position:-360px -222px;} .achievement17 .coin{background-position:-384px -222px;} .achievement18 .coin{background-position:-216px -274px;} .achievement19 .coin{background-position:-240px -274px;} .achievement20 .coin{background-position:-264px -274px;} #achievements-wrapper{height:129px;width:372px;margin:20px 0 10px 20px;} #achievements ul{float:left;margin-left:20px;} #achievements nav{height:22px;width:68px;margin:0 auto;} #previous,#next{height:22px;width:34px;display:inline-block;} .page1 #previous,.upscaled .page1 #previous{background-position:0px -282px;} .page5 #next,.upscaled .page5 #next{background-position:-33px -282px;} #previous,.upscaled #previous{background-position:-67px -282px;} #previous:active,.upscaled #previous:active{background-position:-134px -282px;} #next,.upscaled #next{margin-left:-5px;background-position:-100px -282px;} #next:active,.upscaled #next:active{background-position:-167px -282px;} .page1 #previous:hover,.page1 #previous:active{background-position:0px -282px;} .page5 #next:hover,.page5 #next:active{background-position:-33px -282px} #lists{width:2000px;-moz-transition:none;-webkit-transition:none;-o-transition:none;-ms-transition:none;transition:none;} #achievements.page1 #lists{left:0;} #achievements.page2 #lists{left:-392px;} #achievements.page3 #lists{left:-784px;} #achievements.page4 #lists{left:-1176px;} #achievements.page5 #lists{left:-1568px;} #achievements-count{margin:6px 24px 0 0;} #achievements,#achievements li,#achievements .coin,#achievement-notification,#achievement-notification .coin,#coinsparks,.achievement-sharing a,#previous,#next{background-size:416px;} #achievements{height:196px;width:416px;margin-left:-208px;margin-top:-108px;font-size:10px;} #achievements li,.upscaled #achievements li{height:26px;width:372px;background-position:0 -196px;margin:5px 0;} #achievements li .coin{margin-right:15px;} #achievements li span{padding-top:9px;} .achievement-sharing{right:8px;top:8px;} .achievement-sharing .facebook{height:11px;width:5px;background-position:-372px -196px;} .achievement-sharing .facebook:hover{background-position:-372px -207px;} .achievement-sharing .twitter,.upscaled .achievement-sharing .twitter{height:11px;width:16px;background-position:-377px -196px;margin-left:5px;} .achievement-sharing .twitter:hover,.upscaled .achievement-sharing .twitter:hover{background-position:-377px -207px;} #achievement-notification,.upscaled #achievement-notification{width:216px;bottom:22px;height:0;margin-left:-108px;background-position:0 -248px;} #achievement-notification.active{height:34px;} #achievement-notification .coin{position:absolute;top:-20px;left:50%;margin-left:-12px;opacity:0;} #achievement-notification.active .coin{opacity:1;} #achievement-notification.active #coinsparks,.upscaled #achievement-notification.active #coinsparks{height:26px;width:24px;-moz-animation:coinsparks1 0.8s steps(6,end) 7;-webkit-animation:coinsparks1 0.8s steps(6,end) 7;-o-animation:coinsparks1 0.8s steps(6,end) 7;-ms-animation:coinsparks1 0.8s steps(6,end) 7;} #achievement-notification .title{color:#fce045;font-size:10px;margin:9px 0 3px 0;} #achievement-notification .name{color:#eee;font-size:10px;margin:3px 0;} } @media screen and (max-width:600px){ #achievement-notification .coin{width:48px;height:52px;} #achievement-notification.achievement1 .coin{background-position:0 -444px;} #achievement-notification.achievement2 .coin{background-position:-48px -444px;} #achievement-notification.achievement3 .coin{background-position:-96px -444px;} #achievement-notification.achievement4 .coin{background-position:-144px -444px;} #achievement-notification.achievement5 .coin{background-position:-192px -444px;} #achievement-notification.achievement6 .coin{background-position:-240px -444px;} #achievement-notification.achievement7 .coin{background-position:-288px -444px;} #achievement-notification.achievement8 .coin{background-position:-336px -444px;} #achievement-notification.achievement9 .coin{background-position:-384px -444px;} #achievement-notification.achievement10 .coin{background-position:-432px -444px;} #achievement-notification.achievement11 .coin{background-position:-480px -444px;} #achievement-notification.achievement12 .coin{background-position:-528px -444px;} #achievement-notification.achievement13 .coin{background-position:-576px -444px;} #achievement-notification.achievement14 .coin{background-position:-624px -444px;} #achievement-notification.achievement15 .coin{background-position:-672px -444px;} #achievement-notification.achievement16 .coin{background-position:-720px -444px;} #achievement-notification.achievement17 .coin{background-position:-768px -444px;} #achievement-notification.achievement18 .coin{background-position:-432px -548px;} #achievement-notification.achievement19 .coin{background-position:-480px -548px;} #achievement-notification.achievement20 .coin{background-position:-528px -548px;} #achievements nav{height:22px;width:68px;margin:0 auto;} #previous,#next{height:22px;width:34px;display:inline-block;} .page1 #previous,.upscaled .page1 #previous{background-position:0px -282px;} .page5 #next,.upscaled .page5 #next{background-position:-33px -282px;} #previous,.upscaled #previous{background-position:-67px -282px;} #previous:active,.upscaled #previous:active{background-position:-134px -282px;} #next,.upscaled #next{margin-left:-5px;background-position:-100px -282px;} #next:active,.upscaled #next:active{background-position:-167px -282px;} .page1 #previous:hover,.page1 #previous:active{background-position:0px -282px;} .page5 #next:hover,.page5 #next:active{background-position:-33px -282px} #lists{width:2000px;-moz-transition:none;-webkit-transition:none;-o-transition:none;-ms-transition:none;transition:none;} #achievements.page1 #lists{left:0;} #achievements.page2 #lists{left:-392px;} #achievements.page3 #lists{left:-784px;} #achievements.page4 #lists{left:-1176px;} #achievements.page5 #lists{left:-1568px;} #achievements-count{margin:6px 24px 0 0;} #achievement-notification,#achievement-notification .coin,#coinsparks{background-size:832px;} #achievement-notification,.upscaled #achievement-notification{width:432px;bottom:34px;height:0;margin-left:-216px;background-position:0 -496px;} #achievement-notification.active{height:68px;} #achievement-notification .coin{position:absolute;top:-40px;left:50%;margin-left:-24px;opacity:0;} #achievement-notification.active .coin{opacity:1;} #achievement-notification.active #coinsparks{display:none;} #achievement-notification .title{color:#fce045;font-size:14px;margin:18px 0 6px 0;} #achievement-notification .name{color:#eee;font-size:20px;margin:6px 0;} #achievements li.unlocked .achievement-sharing{display:block;} }