/* common */
* { outline: none; }
body { margin: 0; background: url(../img/bg-navy.png) #000; font-family: arial; font-size: 14px; line-height: 20px; }
header, section, footer { text-align: center; margin: 40px 0 0 0; }
section { margin-top: 30px; }
img { border: 0; }
.ribbon { margin-top: 31px; }
#timer { margin: 0 auto; position: relative; background: url(../img/timer.png) center center no-repeat; width: 552px; height: 102px; }
#d1, #d2, #h1, #h2, #m1, #m2, #s1, #s2 { width: 35px; height: 49px; position: absolute; top: 17px; }
#timer img { position: absolute; top: 0; left: 0; }
#d1 { left: 15px; }
#d2 { left: 52px; }
#h1 { left: 165px; }
#h2 { left: 202px; }
#m1 { left: 315px; }
#m2 { left: 352px; }
#s1 { left: 465px; }
#s2 { left: 502px; }

/* backgrounds */
.background-asfalt { background: url(../img/bg-asfalt.png) #000; }
.background-brick { background: url(../img/bg-brick.png) #000; }
.background-burried { background: url(../img/bg-burried.png) #000; }
.background-carbon { background: url(../img/bg-carbon.png) #000; }
.background-cloth { background: url(../img/bg-cloth.png) #000; }
.background-darkdenim3 { background: url(../img/bg-darkdenim3.png) #000; }
.background-denim { background: url(../img/bg-denim.png) #000; }
.background-dirty { background: url(../img/bg-dirty.png) #000; }
.background-dotted { background: url(../img/bg-dotted.png) #000; }
.background-dvsup { background: url(../img/bg-dvsup.png) #000; }
.background-fabric { background: url(../img/bg-fabric.png) #000; }
.background-hexabunp { background: url(../img/bg-hexabunp.png) #000; }
.background-icongrpip { background: url(../img/bg-icongrpip.png) #000; }
.background-illusion { background: url(../img/bg-illusion.png) #000; }
.background-linen { background: url(../img/bg-linen.png) #000; }
.background-mamba { background: url(../img/bg-mamba.png) #000; }
.background-matter { background: url(../img/bg-matter.png) #000; }
.background-metal { background: url(../img/bg-metal.png) #000; }
.background-nami { background: url(../img/bg-nami.png) #000; }
.background-navy { background: url(../img/bg-navy.png) #000; }
.background-noisy { background: url(../img/bg-noisy.png) #000; }
.background-office { background: url(../img/bg-office.png) #000; }
.background-outlets { background: url(../img/bg-outlets.png) #000; }
.background-rebel { background: url(../img/bg-rebel.png) #000; }
.background-skewed { background: url(../img/bg-skewed.png) #000; }
.background-suit { background: url(../img/bg-suit.png) #000; }
.background-tasky { background: url(../img/bg-tasky.png) #000; }
.background-tire { background: url(../img/bg-tire.png) #000; }
.background-tr24 { background: url(../img/bg-tr24.png) #000; }
.background-twill { background: url(../img/bg-twill.png) #000; }
.background-txture { background: url(../img/bg-txture.png) #000; }
.background-wall { background: url(../img/bg-wall.png) #000; }
.background-tile { background: url(../img/bg-tile.png) #000; }

/* progress bar */
.progress { margin: 40px auto 0 auto; width: 342px; height: 42px; background: url(../img/progress-background.png) 0 0 no-repeat; }
.progress .bar { width: 0%; height: 42px; background: url(../img/progress-bar.png) 0 0 no-repeat; -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; }
.progress .tooltip { width: 65px; height: 41px; margin-left: -31px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 19px; line-height: 45px; color: #e9e9e9; text-shadow: 0 0 2px #000; background: url(../img/progress-tooltip.png) 0 0 no-repeat;  -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; }

/* footer */
footer { height: 72px; background: url(../img/footer-background.png) 0 0 repeat-x; margin: 80px auto 0 auto;  }
footer .container { width: 552px; height: 32px; margin: 0 auto; padding: 20px 0; }
footer .social { padding: 0; margin: 0; list-style: none; }
footer .social li { float: left; display: block; width: 32px; height: 32px; margin-right: 10px; background: url(../img/social-circle.png) center center no-repeat; }
footer .social li a img { -webkit-opacity: 0.35; -moz-opacity: 0.35; -o-opacity: 0.35; opacity: 0.35; -webkit-transition-duration: 0.35s; -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; transition-duration: 0.35s; }
footer .social li a:hover img { -webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; opacity: 1; }
footer .notify { float: right; display: block; width: 277px; height: 32px; margin: 0; background: url(../img/notify.png) 0 0 no-repeat; }
footer .notify .field { display: block; float: left; width: 191px; height: 27px; padding: 0 0 3px 0; margin: 1px 12px 0 12px; background: transparent; border: 0; font-size: 14px; line-height: 16px; color: #fff; }
footer .notify .button { display: block; float: left; width: 61px; height: 30px; background: transparent; border: 0; cursor: pointer; }

/* number animations */
#timer img { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }

/* no animation, default */
#timer.none img { display: none }
#timer.none img.new { display: inline; }
#timer.none img.old { display: none; }

/* fade animation */
#timer.fade img.new { -webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; opacity: 1; }
#timer.fade img, #timer.fade img.old { -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; }

/* slide animation */
#timer.slide #d1,
#timer.slide #d2,
#timer.slide #h1,
#timer.slide #h2,
#timer.slide #m1,
#timer.slide #m2,
#timer.slide #s1,
#timer.slide #s2 { overflow: hidden; }
#timer.slide img { margin-top: -49px; }
#timer.slide img.new { margin-top: 0px; }
#timer.slide img.old { margin-top: 49px; }

/* scale + fade animation */
#timer.scale img { -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; }
#timer.scale img.new { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); -webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; opacity: 1; }
#timer.scale img.old { -webkit-transform: scale(3, 3); -moz-transform: scale(3, 3); -o-transform: scale(3, 3); transform: scale(3, 3); -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; }

/* wiggle + fade animation */
@-webkit-keyframes wiggle {
	0% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
	25% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
	50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
	75% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
}
@-moz-keyframes wiggle {
	0% { -moz-transform: rotate(-10deg); transform: rotate(-10deg); }
	25% { -moz-transform: rotate(10deg); transform: rotate(10deg); }
	50% { -moz-transform: rotate(-10deg); transform: rotate(-10deg); }
	75% { -moz-transform: rotate(10deg); transform: rotate(10deg); }
}
@-o-keyframes wiggle {
	0% { -o-transform: rotate(-10deg); transform: rotate(-10deg); }
	25% { -o-transform: rotate(10deg); transform: rotate(10deg); }
	50% { -o-transform: rotate(-10deg); transform: rotate(-10deg); }
	75% { -o-transform: rotate(10deg); transform: rotate(10deg); }
}
@keyframes wiggle {
	0% { transform: rotate(-10deg); }
	25% { transform: rotate(10deg); }
	50% { transform: rotate(-10deg); }
	75% { transform: rotate(10deg); }
}
#timer.wiggle img.new { -webkit-animation: wiggle 0.25s; -moz-animation: wiggle 0.25s; -o-animation: wiggle 0.25s; animation: 0.25s; }
#timer.wiggle img.old { -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; }

/* shake + fade animation */
@-webkit-keyframes shake {
	0% { -webkit-transform: translate(-5px, 0); transform: translate(-5px, 0); }
	25% { -webkit-transform: translate(5px, 0); transform: translate(5px, 0); }
	50% { -webkit-transform: translate(-5px, 0); transform: translate(-5px, 0); }
	75% { -webkit-transform: translate(5px, 0); transform: translate(5px, 0); }
	100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@-moz-keyframes shake {
	0% { -moz-transform: translate(-5px, 0); transform: translate(-5px, 0); }
	25% { -moz-transform: translate(5px, 0); transform: translate(5px, 0); }
	50% { -moz-transform: translate(-5px, 0); transform: translate(-5px, 0); }
	75% { -moz-transform: translate(5px, 0); transform: translate(5px, 0); }
	100% { -moz-transform: translate(0, 0); transform: translate(0, 0); }
}
@-o-keyframes shake {
	0% { -o-transform: translate(-5px, 0); transform: translate(-5px, 0); }
	25% { -o-transform: translate(5px, 0); transform: translate(5px, 0); }
	50% { -o-transform: translate(-5px, 0); transform: translate(-5px, 0); }
	75% { -o-transform: translate(5px, 0); transform: translate(5px, 0); }
	100% { -o-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes shake {
	0% { transform: translate(-5px, 0); }
	25% { transform: translate(5px, 0); }
	50% { transform: translate(-5px, 0); }
	75% { transform: translate(5px, 0); }
	100% { transform: translate(0, 0); }
}
#timer.shake img.new { -webkit-animation: shake 0.25s; -moz-animation: shake 0.25s; -o-animation: shake 0.25s; animation: shake 0.25s; }
#timer.shake img.old { -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; }

/* explode animation */
@-webkit-keyframes shock {
	0% { -webkit-transform: rotate(0deg) translate(0,0) scale(1,1); -webkit-opacity: 0; opacity: 0; }
	10% { -webkit-transform: rotate(42deg) translate(-28px,-83px) scale(1.09,1.09); -webkit-opacity: 0.13; opacity: 0.13; }
	20% { -webkit-transform: rotate(-39deg) translate(-28px,63px) scale(1.06,1.06); -webkit-opacity: 0.89; opacity: 0.89; }
	30% { -webkit-transform: rotate(-23deg) translate(-37px,52px) scale(1.95,1.95); -webkit-opacity: 0.81; opacity: 0.81; }
	40% { -webkit-transform: rotate(-8deg) translate(-68px,-40px) scale(1.68,1.68); -webkit-opacity: 0.68; opacity: 0.68; }
	50% { -webkit-transform: rotate(-44deg) translate(-40px,-67px) scale(1.11,1.11); -webkit-opacity: 0.81; opacity: 0.81; }
	60% { -webkit-transform: rotate(22deg) translate(32px,-95px) scale(1.43,1.43); -webkit-opacity: 0.58; opacity: 0.58; }
	70% { -webkit-transform: rotate(18deg) translate(-52px,-18px) scale(0.57,0.57); -webkit-opacity: 0.1; opacity: 0.1; }
	80% { -webkit-transform: rotate(37deg) translate(60px,-20px) scale(0.96,0.96); -webkit-opacity: 0.4; opacity: 0.4; }
	90% { -webkit-transform: rotate(-45deg) translate(-40px,-33px) scale(1.18,1.18); -webkit-opacity: 0.74; opacity: 0.74; }
	100% { -webkit-transform: rotate(0deg) translate(0,0) scale(1,1); -webkit-opacity: 0; opacity: 0; }
}
@-moz-keyframes shock {
	0% { -moz-transform: rotate(0deg) translate(0,0) scale(1,1); -moz-opacity: 0; opacity: 0; }
	10% { -moz-transform: rotate(42deg) translate(-28px,-83px) scale(1.09,1.09); -moz-opacity: 0.13; opacity: 0.13; }
	20% { -moz-transform: rotate(-39deg) translate(-28px,63px) scale(1.06,1.06); -moz-opacity: 0.89; opacity: 0.89; }
	30% { -moz-transform: rotate(-23deg) translate(-37px,52px) scale(1.95,1.95); -moz-opacity: 0.81; opacity: 0.81; }
	40% { -moz-transform: rotate(-8deg) translate(-68px,-40px) scale(1.68,1.68); -moz-opacity: 0.68; opacity: 0.68; }
	50% { -moz-transform: rotate(-44deg) translate(-40px,-67px) scale(1.11,1.11); -moz-opacity: 0.81; opacity: 0.81; }
	60% { -moz-transform: rotate(22deg) translate(32px,-95px) scale(1.43,1.43); -moz-opacity: 0.58; opacity: 0.58; }
	70% { -moz-transform: rotate(18deg) translate(-52px,-18px) scale(0.57,0.57); -moz-opacity: 0.1; opacity: 0.1; }
	80% { -moz-transform: rotate(37deg) translate(60px,-20px) scale(0.96,0.96); -moz-opacity: 0.4; opacity: 0.4; }
	90% { -moz-transform: rotate(-45deg) translate(-40px,-33px) scale(1.18,1.18); -moz-opacity: 0.74; opacity: 0.74; }
	100% { -moz-transform: rotate(0deg) translate(0,0) scale(1,1); -moz-opacity: 0; opacity: 0; }
}
@-o-keyframes shock {
	0% { -o-transform: rotate(0deg) translate(0,0) scale(1,1); -o-opacity: 0; opacity: 0; }
	10% { -o-transform: rotate(42deg) translate(-28px,-83px) scale(1.09,1.09); -o-opacity: 0.13; opacity: 0.13; }
	20% { -o-transform: rotate(-39deg) translate(-28px,63px) scale(1.06,1.06); -o-opacity: 0.89; opacity: 0.89; }
	30% { -o-transform: rotate(-23deg) translate(-37px,52px) scale(1.95,1.95); -o-opacity: 0.81; opacity: 0.81; }
	40% { -o-transform: rotate(-8deg) translate(-68px,-40px) scale(1.68,1.68); -o-opacity: 0.68; opacity: 0.68; }
	50% { -o-transform: rotate(-44deg) translate(-40px,-67px) scale(1.11,1.11); -o-opacity: 0.81; opacity: 0.81; }
	60% { -o-transform: rotate(22deg) translate(32px,-95px) scale(1.43,1.43); -o-opacity: 0.58; opacity: 0.58; }
	70% { -o-transform: rotate(18deg) translate(-52px,-18px) scale(0.57,0.57); -o-opacity: 0.1; opacity: 0.1; }
	80% { -o-transform: rotate(37deg) translate(60px,-20px) scale(0.96,0.96); -o-opacity: 0.4; opacity: 0.4; }
	90% { -o-transform: rotate(-45deg) translate(-40px,-33px) scale(1.18,1.18); -o-opacity: 0.74; opacity: 0.74; }
	100% { -o-transform: rotate(0deg) translate(0,0) scale(1,1); -o-opacity: 0; opacity: 0; }
}
@keyframes shock {
	0% { transform: rotate(0deg) translate(0,0) scale(1,1); opacity: 0; }
	10% { transform: rotate(42deg) translate(-28px,-83px) scale(1.09,1.09); opacity: 0.13; }
	20% { transform: rotate(-39deg) translate(-28px,63px) scale(1.06,1.06); opacity: 0.89; }
	30% { transform: rotate(-23deg) translate(-37px,52px) scale(1.95,1.95); opacity: 0.81; }
	40% { transform: rotate(-8deg) translate(-68px,-40px) scale(1.68,1.68); opacity: 0.68; }
	50% { transform: rotate(-44deg) translate(-40px,-67px) scale(1.11,1.11); opacity: 0.81; }
	60% { transform: rotate(22deg) translate(32px,-95px) scale(1.43,1.43); opacity: 0.58; }
	70% { transform: rotate(18deg) translate(-52px,-18px) scale(0.57,0.57); opacity: 0.1; }
	80% { transform: rotate(37deg) translate(60px,-20px) scale(0.96,0.96); opacity: 0.4; }
	90% { transform: rotate(-45deg) translate(-40px,-33px) scale(1.18,1.18); opacity: 0.74; }
	100% { transform: rotate(0deg) translate(0,0) scale(1,1); opacity: 0; }
}
#timer.shock img.new { -webkit-animation: shock 0.25s cubic-bezier(1,0,1,0); }
#timer.shock img.old { -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; }