/* Page styling/ reset */

*, *:before, *:after { box-sizing: content-box}

.hero {background:linear-gradient(#999 0%, #ccc 55%, #eee 69%, #ccc 100%) #eee;padding:40px 0 60px;border-bottom:1px solid #999;text-align:center}
.clear {clear:both}
.watch-desc {margin-bottom:90px;font-size:.8em;color:#666}
.winding {text-transform:uppercase;font-size:.85em;letter-spacing:1px}
.type {text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.reference {color:#888}
.validation {color:#BADA55;margin-bottom:30px;font-size:.8em}
.validation a {color:#BADA55;text-decoration:underline}
.validation a:hover {color:#222;transition:all .5s ease-in-out}

.watch-info {
	margin:100px auto 50px;
	max-width:300px;
	font-family:sans-serif;
	color:#463527;
	line-height:1.5em
}

.visit a {
	display:block;
	text-transform:uppercase;
	letter-spacing:2px;
	margin:20px;
	color:#777;
	text-decoration:none;
	border:1px solid #ccc;
	padding:10px
}

.visit a:hover {color:#BADA55;filter:invert(40%)}


/* Case */

.watch-case-frame {margin:0 auto;width:290px}
	
.watch-top-lugs{
	width:240px;
	margin:0 auto -120px;
	clear:both;
	position:relative;
	z-index:3
}

.watch-left-lug{
	float:left;
	width:50px;
	height:100px;
	margin-top:-20px;
	border-top-left-radius:90%;
 	background:linear-gradient(#222 0%, #eee 4%, #999 42%, #fff 100%) #eee;
	-webkit-clip-path:polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%);
	clip-path:polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%)
}

.watch-left-lug-in{
	float:left;
	width:50px;
	height:100px;
	margin-top:-10px;
	background:linear-gradient(#eee 0%, #fff 4%, #ccc 32%, #444 100%) #ccc;
	-webkit-clip-path:polygon(0% 90%, 60% 30%, 100% 100%, 0% 100%);
	clip-path:polygon(0% 90%, 60% 30%, 100% 100%, 0% 100%);
	transform:rotate(-80deg)
}

.watch-right-lug{
	float:right;
	width:50px;
	height:100px;
	margin-top:-20px;
	border-top-right-radius:90%;
	background:linear-gradient(#222 0%, #ccc 4%, #999 38%, #999 100%) #eee;
	-webkit-clip-path:polygon(0% 0%, 30% 0%, 100% 100%, 0% 100%);
	clip-path:polygon(0% 0%, 30% 0%, 100% 100%, 0% 100%)
}

.watch-right-lug-in{
	float:right;
	width:50px;
	height:100px;
	margin-top:-10px;
	background:linear-gradient(#222 0%, #ccc 4%, #999 38%, #fff 100%) #ccc;
	-webkit-clip-path:polygon(0% 90%, 30% 30%, 100% 100%, 0% 100%);
	clip-path:polygon(0% 90%, 30% 30%, 100% 100%, 0% 100%);
	transform:rotate(90deg)
}

.watch-btm-lugs{width:240px;position:relative;margin:-62px auto -40px;z-index:3}

.watch-left-lug-ft, .watch-right-lug-ft{width:50px;height:100px;border-bottom-right-radius:90%}

.watch-left-lug-ft{
	float:left;
	background:linear-gradient(#222 0%, #999 20%, #999 30%, #ccc 94%, #555 100%) #ccc;
	-webkit-clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
	clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
	transform:scaleX(-1)
}

.watch-right-lug-ft{
	background:linear-gradient(#222 0%, #999 40%, #ccc 92%, #555 100%) #ccc;
	float:right;
	width:50px;
	height:100px;
	border-bottom-right-radius:90%;
	-webkit-clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
	clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%)
}
	
.watch-right-lug-ft-in{
	background:linear-gradient(#222 0%, #999 40%, #fff 72%, #fff 100%) #ccc;
	float:right;
	width:50px;
	height:110px;
	-webkit-clip-path:polygon(0% 0%, 70% 0%, 60% 55%, 0% 100%);
	clip-path:polygon(0% 0%, 70% 0%, 50% 75%, 0% 100%);
	transform:rotate(25deg)
}

.watch-left-lug-ft-in{
	background:linear-gradient(#222 0%, #999 40%, #fff 72%, #fff 100%) #ccc;
	float:right;
	width:50px;
	height:110px;
	-webkit-clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
	clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
	transform:rotate(40deg)
}


/*  Dial */

@keyframes clockwise {100% {transform:rotate(360deg)}}

.dial {
	width:230px;
	height:230px;
	margin:55px auto 0;
	position:relative;
	border-radius:50%;
	z-index:4;
  box-shadow:0 0 0 3px  #999 ,0 0 0 5px  #ccc, 0 0 0 9px  #ccc, 0 0 0 14px  #ccc ,0 0 0 16px #ccc, 0 0 0 17px  #999, 0 0 0 19px #999, 0 0 0 20px #fff, 0 0 0 22px #999
}

.dial-edge{
	width:210px;
	height:210px;	
	background:#fff;
	margin-left:-1px;
	padding:10px;
	margin-top:-1px;	
	border-radius:50%;
 	box-shadow:inset 0 0 10px rgba(0,0,0,.9), inset 0 0 20px rgba(0,0,0,.3);
 	border: 1px solid #fff
}

.dial-in{
 	width:208px;
	height:208px;
	border:1px solid #222;
	border-radius:50%;
	background:
	linear-gradient(66deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(72deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(78deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(84deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(90deg, transparent 49%, black 50%, transparent 50%),
	linear-gradient(96deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(102deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(108deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(114deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(120deg, transparent 49%, black 50%, transparent 50%),
	linear-gradient(126deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(132deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(138deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(144deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(150deg, transparent 49%, black 50%, transparent 50%),
	linear-gradient(156deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(162deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(168deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(174deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(180deg, transparent 49%, black 50%, transparent 50%),
	linear-gradient(186deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(192deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(198deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(204deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(210deg, transparent 49%, black 50%, transparent 50%),	 
	linear-gradient(216deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(222deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(228deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(234deg, transparent 49.5%, black 50%, transparent 50%),
	linear-gradient(240deg, transparent 49%, black 50%, transparent 50%), 
	#fff;
	z-index:4
}

.dial-center{
	width:180px;
	height:180px;
	margin-left:13px;
	margin-top:7px;
	border-radius:50%;
	border:1px solid #222;
	background:#fff;
	background:linear-gradient(30deg, #fff 0%, #eee 28%, #fff 54%, #eee 100%) #fff
}

.case-shine {
	position:relative;
	height:240px;
	width:250px;	
	margin-top:-415px;
	margin-bottom:-190px;
	margin-left:auto;
	margin-right:auto;
	border-radius:50%;
	transform:rotate(160deg); 
	border-top:10px solid #fff;
	border-bottom:10px solid #fff;
	opacity:.8;		
	z-index:20;
	box-shadow: -2px -3px 3px rgba(0,0,0,.6),	inset 2px 3px 3px rgba(255,255,255,.4),	inset 5px 7px 13px rgba(255,255,255,1)
}

.case-reflect {
	position:relative;
	z-index:21;
	width:240px;
	height:240px;
	margin:-260px auto 150px;
	border-radius:50%;
	background:none;
	opacity:.3;
	transform:rotate(-160deg); 
	background:linear-gradient(to bottom, rgba(255,255,255,.2) 28%, rgba(135,221,249,.1) 50%, rgba(135,221,249,.1) 100%) transparent;
	border-top:10px solid #fff;
	border-bottom:10px solid #fff;
	box-shadow: -2px -3px 3px rgba(255,255,255,1)
}


/* Hands  */

.time {
	width:220px;
	height:220px;
	position:relative;
	z-index:10;	
	margin:-98px 0 0 -19px
}

.sec-needle {
	width:220px;
	height:220px;
	width:14px;
	margin:-190px auto;
	animation:clockwise 60s linear infinite
}

.sec-t {
	width:2px;
	height:120px;
	margin:0 auto;
	background:linear-gradient(to top, #333 0%, #222 100%) #222
}

.sec-m {
	width:10px;
	height:70px;
	margin:-53px auto 0;
	-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
	clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
	background: linear-gradient(to top,#222 0%, #333 50%, #444 100%) #333
}

.sec-disk {
	width:14px;
	height:14px;
	margin:-34px auto 0;
	border-radius:50%;
	position:relative;	
	background:radial-gradient(#111 0%, #222 4%,  #333 30%, #444 30%, #333 50%, #222 100%) #222
}

.sec-b {
	width:10px;
	height:6px;
	margin:20px auto 0;
	border-color: transparent transparent #222 transparent;
	transform:rotate(-180deg); 
	-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
	clip-path:polygon(50% 0%, 0% 100%, 100% 100%)
}

.min-needle {
	width:30px;
	height:161px;
	position:relative;
	z-index:10;
	width:30px;
	margin:-171px auto 0;
	animation:clockwise 3600s linear infinite
}

.min-t{
	width:4px;
	height:86px;
	margin:0 13px;
	position:relative;
	z-index:10;
	background:#777
}

.min-tip{
	margin:0 13px 0;
	width:0;
	height:0;
	border-style:solid;
	border-width:0 2px 4px 2px;
	border-color:transparent transparent #777 transparent
}

.min-disk {
	width:2px;
	height:2px;
	margin:-18px auto 0;
	border-radius:50%;
	position:relative;	
	border:6px solid #777
}

.hr-needle {
	width:40px;
	height:138px;
	width:30px;
	position:relative;
	z-index:1;
	padding-top:42px;
	margin: 40px auto 0;
	animation:clockwise 43200s linear infinite	
}

.hr-t {
	width:6px;
	height:64px;
	margin:-10px 0 0 12px;
	background:#777
}

.hr-tip {
	margin:-15px auto 10px;
	width: 0;
	height: 0;
	border-style:solid;
	border-width:0 3px 4px 3px;
	border-color:transparent transparent #777 transparent
}

.hr-disk {
	width:3px;
	height:3px;
	margin:-15px auto 0;
	border-radius:50%;
	position:relative;	
	border:8px solid #777;
	position:relative;
	z-index:3
}

/* Brand info  */

.watch-case-city, .watch-case-brand, .swiss-made  {text-transform:uppercase;font-family:sans-serif;color:#222}
.watch-case-brand {margin-left:35px;padding-top:0;margin-top:10px;height:9px;font-size:8px;font-weight:300;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.watch-case-city {font-size:5px;letter-spacing:1px;padding-bottom:2px;margin-left:37px;}
.swiss-made {font-size:2px;margin-top:29px}


/* Numerals */

.watch-numerals-top, .watch-numerals-mid, .numerals-btm {
	font-style:italic;
	position:relative;
	font-weight:bold;
	color:#666;
	text-shadow:0 2px 2px rgba(0,0,0,.2);
	font-size:18px;
	z-index:9
}

.watch-numerals-top {width:112px;margin:auto;padding-top:22px;height:18px}
.watch-numerals-mid {width:120px;margin:0 auto -33px;height:24px}
.numerals-btm{width:100px;height:27px;margin:70px auto 0}
.watch-numerals-eleven {width:14px;float:left;margin-top:-6px;margin-left:10px}
.watch-numerals-twelve {width:20px;float:left;margin-top:-20px;margin-left:20px}
.watch-numerals-one {width:14px;float:right;margin-top:-6px;margin-right:12px}
.watch-numerals-ten {width:14px;float:left;margin-left:-13px}
.watch-numerals-two {width:19px;float:right;margin-right:-13px}
.watch-numerals-seven {width:14px;margin-left:5px}
.watch-numerals-six {width:14px;margin: -10px auto 0}
.watch-numerals-five {width:14px;margin-left:86px;margin-top:-20px}


/* Chronographs */

.watch-chronos {width:180px;margin:-146px auto 68px;position:relative;z-index:2}
.chronos-l{float:left}
.chronos-r{float:right}
.chrono-left-in {position:relative;z-index:9;margin-top:-3px;margin-left:-3px;float:left}
.chrono-right-in {float:right;position:relative;z-index:9;margin-top:-3px;margin-right:-3px}
.chrono-left-in, .chrono-right-in {width:70px;height:70px;margin-bottom:-74px;border:1px solid #222;box-shadow:
inset 0 0 0 2px #fff;border-radius:50%}
.chrono-l-t {position: relative; display:block;margin-top:2px;margin-left:3px}
#ch-r .chrono-l-t, #ch-r .chrono-l-b {margin-left:3px}
.chrono-l-t>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;transform-origin:50% 100%}
.chrono-l-t span{font-size:8px;line-height:0.65; padding:0}
.chrono-l-t .w0 {transform: rotate(-1.15rad); width: 6px; height: 6px; left:9px; top: 16px}
.chrono-l-t .w1 {transform: rotate(-0.57rad); width: 3px; height: 6px; left:18px; top: 7px}
.chrono-l-t .w2 {transform: rotate(0rad); width: 6px; height: 6px; left:24px; top: 4px}
.chrono-l-t .w3 {transform: rotate(0.58rad); width: 3px; height: 6px; left:40px; top: 79px}
.chrono-l-t .w4 {transform: rotate(1.15rad); width: 6px; height: 6px; left:45px; top: 16px}
.chrono-l-b {position: relative; display: block;width:80px; height:80px;margin-top:2px;margin-left:2px}
.chrono-l-b >span[class^=w]:nth-of-type(n+0){display:block; position:absolute;transform-origin:50% 100%}
.chrono-l-b  span{font-size:8px;line-height:0.65;padding:0px}
.chrono-l-b .w0 { transform: rotate(7.38rad); width: 6px; height: 6px; left:2px; top: 37px}
.chrono-l-b .w1 {transform: rotate(6.9rad); width: 3px; height: 6px; left:12px; top: 47px}
.chrono-l-b .w2 {transform: rotate(6.42rad); width: 6px; height: 6px; left:23px; top: 51px}
.chrono-l-b .w3 {transform: rotate(5.93rad); width: 3px; height: 6px; left:38px; top: 50px}
.chrono-l-b .w4 {transform: rotate(5.45rad); width: 6px; height: 6px; left:47px; top: 43px}
                                                                                                                                                                                                  
#ch-l {position:relative; display:block; width:64px; height:64px;color:#222;border:1px solid #222;border-radius:50%;
box-shadow:
inset 0 0 0 1px #fff,
inset 0 0 0 2px #eee,
inset 0 0 0 3px #fff,
inset 0 0 0 4px #eee,
inset 0 0 0 5px #fff,
inset 0 0 0 6px #eee,
inset 0 0 0 7px #fff,
inset 0 0 0 8px #eee,
inset 0 0 0 9px #fff,
inset 0 0 0 10px #eee,
inset 0 0 0 11px #fff,
inset 0 0 0 12px #eee,
inset 0 0 0 13px #fff,
inset 0 0 0 14px #eee,
inset 0 0 0 15px #fff,
inset 0 0 0 16px #eee,
inset 0 0 0 17px #fff,
inset 0 0 0 18px #eee,
inset 0 0 0 19px #fff,
inset 0 0 0 20px #eee,
inset 0 0 0 21px #fff,
inset 0 0 0 22px #eee,
inset 0 0 0 23px #fff,
inset 0 0 0 24px #eee,
inset 0 0 0 25px #fff,
inset 0 0 0 26px #eee,
inset 0 0 0 27px #fff,
inset 0 0 0 28px #eee,
inset 0 0 0 29px #fff,
inset 0 0 0 30px #eee,
inset 0 0 0 31px #fff,
inset 0 0 0 32px #eee,
inset 0 0 0 33px #fff,
inset 0 0 0 34px #eee
}

#ch-r {position:relative;display:block;width:64px;height:64px;color:#222;border:1px solid #222;border-radius:50%;
box-shadow:
inset 0 0 0 1px #fff,
inset 0 0 0 2px #eee,
inset 0 0 0 3px #fff,
inset 0 0 0 4px #eee,
inset 0 0 0 5px #fff,
inset 0 0 0 6px #eee,
inset 0 0 0 7px #fff,
inset 0 0 0 8px #eee,
inset 0 0 0 9px #fff,
inset 0 0 0 10px #eee,
inset 0 0 0 11px #fff,
inset 0 0 0 12px #eee,
inset 0 0 0 13px #fff,
inset 0 0 0 14px #eee,
inset 0 0 0 15px #fff,
inset 0 0 0 16px #eee,
inset 0 0 0 17px #fff,
inset 0 0 0 18px #eee,
inset 0 0 0 19px #fff,
inset 0 0 0 20px #eee,
inset 0 0 0 21px #fff,
inset 0 0 0 22px #eee,
inset 0 0 0 23px #fff,
inset 0 0 0 24px #eee,
inset 0 0 0 25px #fff,
inset 0 0 0 26px #eee,
inset 0 0 0 27px #fff,
inset 0 0 0 28px #eee,
inset 0 0 0 29px #fff,
inset 0 0 0 30px #eee,
inset 0 0 0 31px #fff
}             

.watch-chrono-disk {
	width:6px;
	height:6px;
	margin-left:-1px;
	border-radius:50%;
	background:linear-gradient(#222 0%, #333 50%, #222 100%) #222
}

.watch-chrono-hand {
	width:5px;
	height:30px;
	margin:auto;
	position:relative
}

.watch-chrono-hand-left {
	width:3px;
	margin-top:1px;
	margin-left:33px;
	height:70px
}

.watch-chrono-hand-right {
	width:3px;
	margin-top:2px;
	margin-left:33px;
	height:70px
}

.watch-chrono-hand-left.animate {animation:clockwise 60s linear infinite}
.watch-chrono-hand-right.animate {animation:clockwise 1800s linear infinite}

.chrono-top-hand-btm{
	width:2px;
	height:30px;
	margin-left:1px;
	background:linear-gradient(#222 0%, #333 50%, #222 100%) #222;
	transform:rotate(180deg)
}
                         
.chrono-left-in .chrono-top-hand-btm {background:#888}
.chrono-left-in .watch-chrono-disk {background:#888}

.side-btns{
	width:50px;
	height:200px;
	float:right;
	margin:-353px -10px -150px 0
}

a#start-stop{
	display:block;
	width:40px;
	height:12px;
	margin-left:1px;
	margin-bottom:29px;
	position:relative;
	z-index:4;
	transform:rotate(66deg);	
	border-top:2px solid #666;
	background:#eee;
	border-top-left-radius:27%;
	border-top-right-radius:27%;	
	position:relative;
	z-index:3;
  background-image:repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
  repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
  background-image:-webkit-repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
  -webkit-repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
   box-shadow:inset -10px -10px 10px rgba(0,0,0,.4), inset  2px 2px 2px rgba(255,255,255,.4)
}

a#reset{
	width:40px;
	height:12px;
	margin-top:29px;
	margin-left:1px;
	position:relative;
	z-index:3;
	background:#eee;
	border-top:2px solid #666;
  border-top-left-radius:27%;
  border-top-right-radius:27%;	
	transform:rotate(113deg);
	background-image:repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
	repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
	repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
	background-image:-webkit-repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
 	 -webkit-repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
		-webkit-repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
  box-shadow:inset -10px -10px 10px rgba(0,0,0,.4), inset  2px 2px 2px rgba(255,255,255,.4)
}

#start-stop, #reset{display:block}

.main-btn{
	width:30px;
	height:43px;
	padding-top:3px;
	margin-left:13px;
	position:relative;
	background:#ccc;
	border-right:2px solid #666;
	border-bottom:1px solid #666;
	border-radius:5px;
	box-shadow:inset 10px -10px 10px rgba(0,0,0,.1);
	background-image:repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
	repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0) 4%, hsla(0,0%,  0%,.03) 4.5%),
	repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
	box-shadow:inset 10px -10px 10px rgba(0,0,0,.3), inset 10px -10px 10px rgba(0,0,0,.1), inset  2px 4px 12px rgba(255,255,255,.7), inset  2px 3px 12px rgba(255,255,255,.4)
}

.main-btn-ridge{
	height:3px;
	margin:3px 1px;
	border-radius:3px;	
	background:rgba(0,0,0,.2);
 	box-shadow:inset 1px 1px 1px rgba(0,0,0,.5)
}

.main-btn-ridge:nth-child(2n+0){
	height:4px;
	margin:4px 1px;
	border-radius:5px;	
	background:rgba(0,0,0,.3);
	box-shadow:inset 1px 1px 1px rgba(0,0,0,.3)
}

.main-btn-ridge:nth-child(3n+0){
	height:4px;
	margin:4px 1px;
	border-radius:5px;	
	background:rgba(0,0,0,.4);
  box-shadow:inset 1px 1px 1px rgba(0,0,0,.3)
 }

.btn-crest{
	height:40px;
	margin-top:-41px;
	margin-right:-6px;
	border-radius:30%;	
	background:#fff;
 	box-shadow:inset 1px 1px 1px rgba(0,0,0,.3),inset 11px 11px 11px rgba(255,255,255,.3);
  float:right;
 	width:4px;
  border:1px solid #666;
  background-image: repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
  repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
   repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
   box-shadow:inset -10px -10px 10px rgba(0,0,0,.2), inset  2px 2px 2px rgba(255,255,255,.4)
}

.btn-crest:after{
	content:"";
	float:right;
	width:3px;	
	margin-top:2px;
	margin-right:-3px;
	height:35px;
	border-radius:15px;	
	background:#ccc;
 	border-top:1px solid #666;
  border-bottom:1px solid #666;
  border-left:1px solid #666;
  border-right:1px solid #666;
  box-shadow:inset 1px 1px 1px rgba(0,0,0,.3),inset 11px 11px 11px rgba(255,255,255,.3);
  background-image: repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
  repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
   repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
   box-shadow:inset -10px -10px 10px rgba(0,0,0,.4), inset  2px 2px 2px rgba(255,255,255,.4)
}


/* Watch straps */

.watch-strap-bottom {
	width:147px;
	margin:15px auto 0;
	position:relative;
	border-radius:5px;
	background:linear-gradient(to bottom, #000000 10%, #213140 20%, #141516 100%) #141516;
	-webkit-clip-path:polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
	clip-path:polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
	z-index:2
}

.top-strap {transform:scaleY(-1);margin:auto}

.watch-strap-top-edge {
	width:117px;
	padding:10px 0;
	margin:0 auto;
	background:linear-gradient(to bottom, #000000 10%,#303135 60%,#141516 90%) #141516;
	border-radius:20px 20px 0 0
}

.watch-strap-btm-edge {
	width:117px;
	padding:10px 0;
	margin:0 auto 20px;
	position:relative;
	background:linear-gradient(to bottom, #141516 10%,#303135 40%,#000000 100%) #141516;
	border-radius:0 0 20px 20px;
	z-index:11
}

.watch-strap-top {
	width:165px;
	padding:60px 0;
	margin:0 auto;
	background:linear-gradient(to bottom, #141516 38%,#303135 90%,#000000 100%) #141516;
	border-radius:5px;
	-webkit-clip-path:polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
	clip-path:polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%)
}
		
.strap-stich-top-l {
	float:left;
	width:4px;
	height:80px;
	margin:0 15px;
	border-radius:5px;
	transform:rotate(-8deg);
	box-shadow:10px -10px 10px rgba(0,0,0,1)
}

.strap-stich-top-r {
	float:right;
	width:4px;
	height:80px;
	margin:0 15px;
	border-radius:5px;
	transform:rotate(8deg);
	box-shadow:-10px -10px 10px rgba(0,0,0,1)
}

.strap-stich-btm-l {
	float:left;
	width:4px;
	height:119px;
	margin:0 15px;
	border-radius:5px;	
	transform:rotate(-8deg);
	box-shadow:10px -10px 10px rgba(0,0,0,1)
}

.strap-stich-btm-r {
	float:right;
	position:relative;
	width:4px;
	height:119px;
	margin:0 15px;
	border-radius:5px;
	transform:rotate(8deg);
	box-shadow:-10px -10px 10px rgba(0,0,0,1)
}

.stich-l, .stich-r{
	background:#555;
	width:2px;
	height:7px;
	margin:2px 0;
	border-top:2px solid rgba(0,0,0,.5);
	border-bottom:2px solid rgba(0,0,0,.5);
	border-radius:50px;
	opacity:.5
}

.stich-l {box-shadow:2px 3px 3px rgba(0,0,0,1), inset 2px 3px 3px rgba(0,0,0,.4)}
.stich-r {box-shadow:-2px -3px 3px rgba(0,0,0,1), inset 2px 3px 3px rgba(0,0,0,.4)}
.stich-r:nth-child(0n+1){transform: rotate(5deg)}
.stich-r:nth-child(0n+2){transform: rotate(1deg)}
.stich-r:nth-child(0n+3){transform: rotate(-1deg)}
.stich-r:nth-child(0n+4){transform: rotate(-1deg)}
.stich-r:nth-child(0n+5){transform: rotate(-1deg)}
.stich-r:nth-child(0n+6){transform: rotate(1deg)}
.stich-r:nth-child(0n+7){transform: rotate(2deg)}
.stich-r:nth-child(0n+8){transform: rotate(1deg)}
.stich-l:nth-child(0n+1){transform: rotate(-5deg)}
.stich-l:nth-child(0n+2){transform: rotate(1deg)}
.stich-l:nth-child(0n+3){transform: rotate(-1deg)}
.stich-l:nth-child(0n+4){transform: rotate(-1deg)}
.stich-l:nth-child(0n+5){transform: rotate(-1deg)}
.stich-l:nth-child(0n+6){transform: rotate(1deg)}
.stich-l:nth-child(0n+7){transform: rotate(2deg)}
.stich-l:nth-child(0n+8){transform: rotate(1deg)}


/* Watch shadow */

.watch-shadow {margin:-110px auto 150px;padding:30px;width:70px;position:relative;background:rgba(0, 0, 0, .3);filter:blur(15px);z-index:1;border-radius:20%}

#pulse {position: relative; display: block; width:200px; height:200px;border-radius:100%;margin-bottom:-156px;text-transform:uppercase}
#pulse>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;transform-origin:50% 100%; }
#pulse span{font-size:7px;line-height:0.65; padding:0;margin-top:-79px;margin-left:-190px;}
#pulse .w0 { transform: rotate(-1.3rad); width: 6px; height: 5px; left:188.86px; top: 186.63px}
#pulse .w1 { transform: rotate(-1.25rad); width: 4px; height: 5px; left:191.63px; top: 180.89px}
#pulse .w2 { transform: rotate(-1.19rad); width: 6px; height: 5px; left:192.72px; top: 175.27px}
#pulse .w3 { transform: rotate(-1.13rad); width: 6px; height: 5px; left:195.56px; top: 168.87px}
#pulse .w4 { transform: rotate(-1.06rad); width: 5px; height: 5px; left:199.06px; top: 163.11px}
#pulse .w5 { transform: rotate(-1.01rad); width: 5px; height: 5px; left:202.15px; top: 157.96px}
#pulse .w6 { transform: rotate(-0.96rad); width: 3px; height: 5px; left:205.93px; top: 153.81px}
#pulse .w7 { transform: rotate(-0.91rad); width: 5px; height: 5px; left:207.91px; top: 149.8px}
#pulse .w8 { transform: rotate(-0.86rad); width: 5px; height: 5px; left:211.74px; top: 145.18px}
#pulse .w9 { transform: rotate(-0.8rad); width: 5px; height: 5px; left:215.81px; top: 140.78px}
#pulse .w10 { transform: rotate(-0.75rad); width: 4px; height: 5px; left:220.27px; top: 136.95px}
#pulse .w11 { transform: rotate(-0.71rad); width: 3px; height: 5px; left:224.14px; top: 133.98px}
#pulse .w12 { transform: rotate(-0.66rad); width: 5px; height: 5px; left:227.04px; top: 130.84px}
#pulse .w13 { transform: rotate(-0.6rad); width: 5px; height: 5px; left:231.9px; top: 127.33px}
#pulse .w14 { transform: rotate(-0.55rad); width: 3px; height: 5px; left:237.1px; top: 124.62px}
#pulse .w15 { transform: rotate(-0.51rad); width: 5px; height: 5px; left:240.43px; top: 122.11px}
#pulse .w16 { transform: rotate(-0.45rad); width: 5px; height: 5px; left:245.76px; top: 119.37px}
#pulse .w17 { transform: rotate(-0.4rad); width: 3px; height: 5px; left:251.32px; top: 117.32px}
#pulse .w18 { transform: rotate(-0.36rad); width: 4px; height: 5px; left:255px; top: 115.66px}
#pulse .w19 { transform: rotate(-0.3rad); width: 6px; height: 5px; left:259.68px; top: 113.73px}
#pulse .w20 { transform: rotate(-0.25rad); width: 4px; height: 5px; left:266.46px; top: 112.12px}
#pulse .w21 { transform: rotate(-0.21rad); width: 2px; height: 5px; left:271.36px; top: 111.23px}
#pulse .w22 { transform: rotate(-0.17rad); width: 5px; height: 5px; left:274.29px; top: 110.4px}
#pulse .w23 { transform: rotate(-0.11rad); width: 5px; height: 5px; left:280.23px; top: 109.6px}
#pulse .w24 { transform: rotate(-0.06rad); width: 4px; height: 5px; left:286.21px; top: 109.15px}

#pulse-num {position: relative; display: block; width:202px; height:202px;margin-left:-137px;margin-bottom:-65px;margin-right:0;position:relative;z-index:99;margin-top:-174px;transform: rotate(20deg)}
#pulse-num>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;transform-origin:50% 100%}
#pulse-num span{font-size:7px;line-height:0.65; padding:0}
#pulse-num .w0 { transform: rotate(0.23rad); width: 4px; height: 5px; left:317.04px; top: 112px}
#pulse-num .w1 { transform: rotate(0.34rad); width: 2px; height: 5px; left:328.57px; top: 115.14px}
#pulse-num .w2 { transform: rotate(0.44rad); width: 4px; height: 5px; left:337.73px; top: 119.37px}
#pulse-num .w3 { transform: rotate(0.54rad); width: 2px; height: 5px; left:348.39px; top: 124.62px}
#pulse-num .w4 { transform: rotate(0.65rad); width: 4px; height: 5px; left:356.45px; top: 130.84px}
#pulse-num .w5 { transform: rotate(0.75rad); width: 2px; height: 5px; left:365.82px; top: 137.97px}
#pulse-num .w6 { transform: rotate(0.86rad); width: 4px; height: 5px; left:372.41px; top: 145.93px}
#pulse-num .w7 { transform: rotate(0.96rad); width: 2px; height: 5px; left:380.13px; top: 154.63px}
#pulse-num .w8 { transform: rotate(1.06rad); width: 4px; height: 5px; left:384.91px; top: 163.98px}
#pulse-num .w9 { transform: rotate(1.17rad); width: 2px; height: 5px; left:390.7px; top: 173.88px}
#pulse-num .w10 { transform: rotate(1.27rad); width: 4px; height: 5px; left:393.43px; top: 184.22px}
#pulse-num .w11 { transform: rotate(1.38rad); width: 2px; height: 5px; left:397.07px; top: 194.9px}
#pulse-num .w12 { transform: rotate(1.48rad); width: 4px; height: 5px; left:397.59px; top: 205.79px}
#pulse-num .w13 { transform: rotate(1.58rad); width: 2px; height: 5px; left:398.98px; top: 216.77px}
#pulse-num .w14 { transform: rotate(1.69rad); width: 4px; height: 5px; left:397.23px; top: 227.74px}
#pulse-num .w15 { transform: rotate(1.79rad); width: 2px; height: 5px; left:396.34px; top: 238.58px}
#pulse-num .w16 { transform: rotate(1.89rad); width: 4px; height: 5px; left:392.34px; top: 249.15px}
#pulse-num .w17 { transform: rotate(2rad); width: 2px; height: 5px; left:389.26px; top: 259.37px}
#pulse-num .w18 { transform: rotate(2.1rad); width: 4px; height: 5px; left:383.15px; top: 269.1px}
#pulse-num .w19 { transform: rotate(2.21rad); width: 2px; height: 5px; left:378.05px; top: 278.25px}
#pulse-num .w20 { transform: rotate(2.31rad); width: 4px; height: 5px; left:370.04px; top: 286.72px}
#pulse-num .w21 { transform: rotate(2.41rad); width: 2px; height: 5px; left:363.19px; top: 294.42px}
#pulse-num .w22 { transform: rotate(2.52rad); width: 4px; height: 5px; left:353.59px; top: 301.26px}
#pulse-num .w23 { transform: rotate(2.62rad); width: 2px; height: 5px; left:345.32px; top: 307.18px}
#pulse-num .w24 { transform: rotate(2.72rad); width: 4px; height: 5px; left:330.49px; top: 312.1px}
#pulse-num .w25 { transform: rotate(2.83rad); width: 2px; height: 5px; left:325.2px; top: 315.98px}
#pulse-num .w26 { transform: rotate(2.93rad); width: 4px; height: 5px; left:313.57px; top: 318.78px}
#pulse-num .w27 { transform: rotate(3.04rad); width: 2px; height: 5px; left:303.7px; top: 320.45px}
#pulse-num .w28 { transform: rotate(3.14rad); width: 4px; height: 5px; left:291.72px; top: 320.99px}
#pulse-num .w29 { transform: rotate(3.24rad); width: 2px; height: 5px; left:281.74px; top: 320.4px}
#pulse-num .w30 { transform: rotate(3.35rad); width: 4px; height: 5px; left:269.88px; top: 318.66px}
#pulse-num .w31 { transform: rotate(3.45rad); width: 2px; height: 5px; left:260.26px; top: 315.81px}
#pulse-num .w32 { transform: rotate(3.55rad); width: 4px; height: 5px; left:249px; top: 311.88px}