/* Patek Philippe 5170R parts (supplied from the original source; the archive never kept it) */
/* Page styling/ reset */

body{text-align:center;padding:0;margin:0}
.hero{background:linear-gradient(#bf9056 0%, #d9b589 55%, #ebd8c0 69%, #e3c5a0 100%) #e3c5a0;padding:40px 0 60px;border-bottom:1px solid #bf9056}
h1 {text-transform:uppercase;margin:0 0 5px 0;color:#463527;font-weight:normal;font-size:1.6em}
.clear{clear:both}
.watch-desc {margin-bottom:90px;font-size:.8em}
.winding {text-transform:uppercase;font-size:.85em;letter-spacing:1px}
.type {text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.reference {color:#ab947d}
.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}

.row {
    max-width:1230px;
    margin:auto
}

.box {
    background:#333;
    border-radius:5px;
    box-shadow:inset 0 10px 65px rgba(0,0,0,.3);
    border:1px solid rgba(0,0,0,.5);
    height:420px;
    margin-bottom:30px;
    padding:20px;
    text-align:center;
    font-family:serif;
    overflow:hidden
}

.desc {
    text-transform:uppercase;
    letter-spacing:2px;
    font-family:sans-serif;
    font-size:.7em;
    color:#fff;
    margin-bottom:35px;
    padding:10px;
    border-radius:5px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(0,0,0,.4);
}

.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:#ab947d;
    text-decoration:none;
    border:1px solid #ab947d;
    padding:10px
}

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


/* Case */

.watch-case-frame {margin:0px auto 0;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%, #a4643d 4%, #e5a978 42%, #feebd1 100%) #e3c5a0;
    -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(#222 0%, #a4643d 4%, #e5a978 32%, #feebd1 100%) #e3c5a0;
    -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%, #a4643d 4%, #e5a978 38%, #feebd1 100%) #e3c5a0;
    -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%, #a4643d 4%, #e5a978 38%, #feebd1 100%) #e3c5a0;
    -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(#feebd1 0%, #e5a978 20%, #e5a978 30%, #a4643d 94%, #222 100%) #e3c5a0;
    -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(#feebd1 0%, #e5a978 40%, #a4643d 94%, #222 100%) #e3c5a0;
    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(#feebd1 0%, #e5a978 40%, #dab16c 72%, #d6b47f 100%) #e3c5a0;
    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(40deg)
}

.watch-left-lug-ft-in{
    background:linear-gradient(#feebd1 0%, #e5a978 40%, #dab16c 72%, #d6b47f 100%) #e3c5a0;
    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 */


.dial {
    margin:55px auto 0;
    width:230px;
    height:230px;
    position:relative;
    border-radius:50%;
    z-index:4;
background:#333;
    box-shadow:0 0 0 1px  #e7af69, 0 0 0 3px  #a4643d ,0 0 0 5px  #ebc18d, 0 0 0 9px  #dfb178, 0 0 0 14px  #dfb178,0 0 0 16px  #dfb178, 0 0 0 17px  #ebc18d, 0 0 0 19px #e3c5a0, 0 0 0 20px #e7af69, 0 0 0 22px #d99d51
}

.dial-edge{width:228px;height:228px;    border-radius:50%;margin:auto}

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

.dial-center{
    width:208px;
    height:208px;
    margin-left:9px;
    margin-top:9px;
    border-radius:50%;
    border:1px solid #fff;
    background:#222;
    background:linear-gradient(30deg, #000 0%, #191919 28%, #333 54%, #000 100%) #141516
}

.case-shine {
    position:relative;
    height:260px;
    width:260px;
    margin-top:-285px;
    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
}

.case-reflect {
    position:relative;
    z-index:21;
    width:260px;
    height:260px;
    margin:-260px auto 150px;
    border-radius:50%;
    background:none;
    opacity:.3;
    border-top:10px solid orange;
    border-bottom:10px solid orange;
    box-shadow: -2px -3px 3px rgba(255,255,255,1)
}


/* Hands  */

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

.sec-needle {
    width:220px;
    height:220px;
    width:14px;
    margin:61px auto 0;
}

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

.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,#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #d59442
}

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

.sec-b {
    width:10px;
    height:6px;
    margin:20px auto 0;
    background:linear-gradient(#d59442 0%, #e3c5a0 50%, #e3c5a0 100%) #d59442;
    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:201px;
    height:201px;
    position:relative;
    z-index:10;
    width:30px;
    margin:70px auto 0;
}

.min-t{
    width:10px;
    height:106px;
    margin:0 10px;
    position:relative;
    z-index:10;
    -webkit-clip-path:polygon(50% 100%,
    30% 75%, 25% 60%,40% 25%, 50% 0%,60% 25%,
    75% 60%,70% 75%);
    clip-path:polygon(50% 100%,
    30% 75%, 25% 60%,40% 25%, 50% 0%,60% 25%,
    75% 60%,70% 75%);
    background:linear-gradient(#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0
}

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

.hr-needle {
    width:40px;
    height:180px;
    width:30px;
    margin: 80px auto 0;
}

.hr-t {
    width:14px;
    height:94px;
    margin:0 0 0 8px;
    background:linear-gradient(to left,#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
    -webkit-clip-path:polygon(50% 100%, 30% 75%, 25% 60%,40% 25%, 50% 8%,60% 25%, 75% 60%,70% 75%);
    clip-path:polygon(50% 100%, 30% 75%, 25% 60%,40% 25%, 50% 8%,60% 25%, 75% 60%,70% 75%)
}

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




/* Brand info  */

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


/* Numerals */

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

.watch-numerals-top {margin:134px auto 0}
.watch-numerals-mid {width:198px;margin:0 auto -33px;height:28px}
.numerals-btm{width:100px;height:27px;margin:0 auto;}
.watch-numerals-eleven {width:14px;float:left;margin-top:-6px;margin-left:6px}
.watch-numerals-twelve {width:26px;float:left;margin-top:-20px;margin-left:30px}
.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:89px;margin-top:-25px}
.watch-numerals-six {width:14px;margin: -10px auto 0}
.watch-numerals-five {width:14px}


/* Chronographs */

.watch-chronos {width:190px;margin:126px auto 78px;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 #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:10px;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:10px;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:#fff;border:1px dashed #fff;border-radius:50%;
box-shadow:
inset 0 0 0 1px #fff,
inset 0 0 0 2px #0f0f0f,
inset 0 0 0 3px #3d3d3d,
inset 0 0 0 4px #0f0f0f,
inset 0 0 0 5px #3d3d3d,
inset 0 0 0 6px #0f0f0f,
inset 0 0 0 7px #3d3d3d,
inset 0 0 0 8px #0f0f0f,
inset 0 0 0 9px #3d3d3d,
inset 0 0 0 10px #0f0f0f,
inset 0 0 0 11px #3d3d3d,
inset 0 0 0 12px #0f0f0f,
inset 0 0 0 13px #3d3d3d,
inset 0 0 0 14px #0f0f0f,
inset 0 0 0 15px #3d3d3d,
inset 0 0 0 16px #0f0f0f,
inset 0 0 0 17px #3d3d3d,
inset 0 0 0 18px #0f0f0f,
inset 0 0 0 19px #3d3d3d,
inset 0 0 0 20px #0f0f0f,
inset 0 0 0 21px #3d3d3d,
inset 0 0 0 22px #0f0f0f,
inset 0 0 0 23px #3d3d3d,
inset 0 0 0 24px #0f0f0f,
inset 0 0 0 25px #3d3d3d,
inset 0 0 0 26px #0f0f0f,
inset 0 0 0 27px #3d3d3d,
inset 0 0 0 28px #0f0f0f,
inset 0 0 0 29px #3d3d3d,
inset 0 0 0 30px #0f0f0f,
inset 0 0 0 31px #3d3d3d,
inset 0 0 0 32px #0f0f0f,
inset 0 0 0 33px #3d3d3d,
inset 0 0 0 34px #0f0f0f
}

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

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

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

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

.watch-chrono-hand-right {
    width:5px;
    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}

.watch-chrono-hand-btm {margin:-10px auto 0;width:5px}

.chrono-btm-hand-top{
    width:4px;
    height:15px;
    background:linear-gradient(#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
    clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
}

.chrono-btm-hand-btm{
    width:4px;
    height:4px;
    transform:rotate(180deg);
    background:linear-gradient(#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
    clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
    -webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%)
}

.chrono-top-hand-btm{
    width:4px;
    height:35px;
    background:linear-gradient(#d59442 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
    clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
    -webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
    transform:rotate(180deg)
}

.chrono-top-hand-top{
    width:4px;
    height:15px;
    background:linear-gradient(#d59442 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
    -webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path:polygon(50% 0%, 0% 100%, 100% 100%)
}

.side-btns{
    width:50px;
    height:80px;
    margin:93px auto 0;
    transform:rotate(-90deg)
}

a#start-stop{
    display:block;
    width:40px;
    height:12px;
    margin-left:4px;
    position:relative;
    z-index:4;
    transform:rotate(90deg);
    border-top:2px solid #a4643d;
    border-top-left-radius:27%;
    border-top-right-radius:27%;
    background:#ebb88a;
      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(161,100,61,.6), inset  2px 2px 2px rgba(255,255,255,.4)
}

a#reset{
    width:40px;
    height:12px;
    margin-top:49px;
    margin-left:4px;
    position:relative;
    z-index:3;
    background:#ebb88a;
    border-top:2px solid #a4643d;
      border-top-left-radius:27%;
      border-top-right-radius:27%;
    transform:rotate(90deg);
    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(161,100,61,.6), inset  2px 2px 2px rgba(255,255,255,.4)
}

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

.main-btn{
    width:30px;
    height:43px;
    padding-top:3px;
    margin:126px auto 0;
    position:relative;
    transform:rotate(-90deg);
    background:#ebb88a;
    border-right:2px solid #a4643d;
    border-bottom:1px solid #a4643d;
    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(161,100,61,.6), 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 #a4643d;
      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(161,100,61,.6), 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:#ebb88a;
      border-top:1px solid #a4643d;
      border-bottom:1px solid #a4643d;
      border-left:1px solid #ebb88a;
      border-right:1px solid #a4643d;
      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(161,100,61,.6), inset  2px 2px 2px rgba(255,255,255,.4)
}


/* Watch straps */

.watch-strap-bottom {
    width:147px;
    margin:85px 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:105px auto 0;
    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)}