/*
CSS isn't organized very well
*/
/* Text */
@import url("https://fonts.googleapis.com/css?family=Roboto:300i,400&display=swap");
/* Numerals */
@import url("https://fonts.googleapis.com/css?family=Chathura:800&display=swap");
/* Date */
@import url("https://fonts.googleapis.com/css?family=Krona+One&display=swap");
/* Rolex */
@import url("https://fonts.googleapis.com/css?family=Rhodium+Libre&display=swap");
/* Swiss Made */
@import url("https://fonts.googleapis.com/css?family=Montserrat:600&display=swap");
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  transform: scale(0.74);
  background: linear-gradient(45deg, #292927 0%, #565654 50%, #AFAFAD 100%) fixed;
  
 /* background: linear-gradient(45deg, #354031 0%, #273F1F 50%, #042A08 100%) fixed; */
}

.band .band-detail-bottom-brushed:nth-child(1):before, .band .band-detail-bottom-brushed:nth-child(1):after, .band .band-detail-top-brushed:before, .band .band-detail-top-brushed:after, .band .band-detail-bottom-center:after, .band .band-detail-bottom-center:before, .band .band-detail-top-center:before, .band .band-detail-top-center:after, .hand-hour span .hour-decor:after, .hand-hour span .hour-decor:before, .hand-hour span:after, .hand-hour span:before, .hand-hour:after, .hand-hour:before, .hand-min span:after, .hand-min:before, .hand-sec:after, .hand-sec:before, .date:after, .marker-square:before, .marker-square:after, .marker-triangle:after, .marker-triangle:before, .content-upper .logo .logo-left:before,
.content-upper .logo .logo-right:before, .content-upper .logo:before, .content-upper .logo:after, .face .sec:nth-of-type(14):after, .face .sec:nth-of-type(1):after, .face:after, .crystal:before, .crystal:after, .bezel-decor:after, .bezel-decor:before, .bezel .bezel-gradient:before, .bezel .bezel-gradient:after, .crown-wrapper .crown-wrapper-detail:after, .crown-wrapper .crown-wrapper-detail:before, .crown-wrapper:before, .crown-wrapper:after, .crown .crown-detail:before, .crown .crown-detail:after, .crown:after, .crown:before, .lug:after, .lug:nth-child(3):before, .lug:nth-child(4):before, .lug:nth-child(1):before, .lug:nth-child(2):before, .lug-bg:before, .lug-bg:after, i:before, i:after {
  content: "";
  display: block;
  position: absolute;
}

/* Circle marker details */
.markers-circle:before, .markers-circle:after, .bezel-decor:after {
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: #fff;
  box-shadow: inset 1px 1px 1px 0 #666, inset 2px 2px 7px 0 #aaa, 1px 1px 1px 0 #222;
  border: 2px solid #ccc;
}

.band, .hand-hour, .hand-min, .hand-sec, .marker-square, .face:after, .face, .crystal:before, .crystal:after, .crystal, .bez-num li, .bez-num, .bezel .bezel-gradient, .rolex {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

/* .bez, .sec */
i {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
i:before, i:after {
  height: inherit;
  width: inherit;
  border-radius: inherit;
  transform: rotateZ(calc(90deg));
}

/* ***********************

Start main code

*********************** */
/* Container */
.rolex {
  position: absolute;
  width: 430px;
  height: 430px;
  filter: drop-shadow(-20px 10px 20px rgba(0, 0, 0, 0.4));
}

/* Lug */
/* Lug shadow */
.lug-bg {
  position: absolute;
  z-index: -1;
  top: -19px;
  left: 0;
  width: inherit;
  height: 486px;
}
.lug-bg:before, .lug-bg:after {
  width: inherit;
  border-bottom: 188px solid #606467;
  border-left: 59px solid transparent;
  border-right: 59px solid transparent;
  top: 0;
  width: 410px;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
}
.lug-bg:after {
  transform: scaleY(-1);
  top: initial;
  bottom: 0;
  border-bottom-color: #222828;
}

/* Lug */
.lug {
  position: absolute;
  width: 104px;
  height: 250px;
  left: 1px;
  top: -26px;
  -webkit-clip-path: polygon(65% 3%, 100% 0, 100% 100%, 0% 96%);
          clip-path: polygon(65% 3%, 100% 0, 100% 100%, 0% 96%);
  /* Top right position */
  /* Bottom left position */
  /* Bottom right position */
  /* Top styling */
  /* Bottom styling */
}
.lug:nth-child(2) {
  transform: scaleX(-1);
  right: 1px;
  left: initial;
}
.lug:nth-child(3) {
  transform: scaleY(-1);
  top: initial;
  bottom: -44px;
}
.lug:nth-child(4) {
  transform: scaleY(-1) scaleX(-1);
  top: initial;
  bottom: -44px;
  right: 1px;
  left: initial;
}
.lug:nth-child(1):before, .lug:nth-child(2):before {
  width: 94px;
  left: 28px;
  height: inherit;
  transform: rotate(-8deg);
  top: 2px;
  background: linear-gradient(to bottom, #8F9396 1%, #111619 3%, #434949 5%, #BABEC1 14%, #E2E6E9 19%, #E2E6E9 22%, #828689 40%);
}
.lug:nth-child(3):before, .lug:nth-child(4):before {
  width: 108px;
  left: 14px;
  height: inherit;
  transform: rotate(-8deg);
  top: 6px;
  background: linear-gradient(to bottom, #8F9396 2%, #111619 4%, #434949 9%, #BABEC1 15%, #E2E6E9 19%, #E2E6E9 22%, #373D3D 46%);
}
.lug:after {
  left: 10px;
  width: inherit;
  height: inherit;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0.2) 4px, transparent 4px, transparent 6px);
  opacity: 0.2;
}

/* Crown */
.crown {
  z-index: 0;
  width: 40px;
  height: 75px;
  position: absolute;
  right: -30px;
  background: #31383B;
  top: 0;
  bottom: 0;
  margin: auto;
  box-shadow: 6px 0 0 -5px #8C7C4F;
  border-radius: 8px;
  /* Edge detail */
  /* Top detail */
}
.crown:before {
  width: 1px;
  height: 45px;
  background: #B0B6B9;
  right: -10px;
  top: 15px;
}
.crown:after {
  width: 10px;
  height: 65px;
  right: -9px;
  top: 5px;
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
          clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
  background: linear-gradient(to bottom, #010200 10%, #394241 16%, #FBFCFE 42%, #FBFCFE 50%, #394241 84%, #010200 90%);
  box-shadow: inset 2px 0 2px 0 #85888D, inset -4px 4px 2px -2px #A5AAAD;
}
.crown .crown-detail {
  position: absolute;
  z-index: 1;
  border-bottom: 5px solid #8D9194;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  width: 30px;
  right: 0;
  filter: drop-shadow(1px 0 0 #5E5D60);
}
.crown .crown-detail:before, .crown .crown-detail:after {
  border-left: inherit;
  border-right: inherit;
  height: 0;
  left: -2px;
  width: inherit;
}
.crown .crown-detail:before {
  border-top: 5px solid #E2E6E7;
  top: 5px;
  filter: drop-shadow(0 10px 0 #B7BBBE);
}
.crown .crown-detail:after {
  border-bottom: 5px solid #7A7F82;
  top: 10px;
}
.crown .crown-detail:nth-of-type(2) {
  top: 20px;
  border-bottom-color: #F7FBFE;
}
.crown .crown-detail:nth-of-type(2):before {
  border-top-color: #7D7E80;
  filter: drop-shadow(0 10px 0 #CDD1D4);
}
.crown .crown-detail:nth-of-type(2):after {
  border-bottom-color: #121A1C;
}
.crown .crown-detail:nth-of-type(3) {
  top: 40px;
}
.crown .crown-detail:nth-of-type(4) {
  top: 60px;
}
.crown .crown-detail:nth-of-type(4):before {
  filter: none;
}
.crown .crown-detail:nth-of-type(4):after {
  display: none;
}

/* Crown sides */
.crown-wrapper {
  width: 58px;
  height: 240px;
  position: absolute;
  right: -16px;
  top: 0;
  bottom: 0;
  margin: auto;
  /* Shadow */
  /* Rounded sides */
}
.crown-wrapper:after {
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 95%, 0 6%, 100% 20%, 100% 30%, 60% 36%, 60% 62%, 100% 70%, 100% 82%);
          clip-path: polygon(0 95%, 0 6%, 100% 20%, 100% 30%, 60% 36%, 60% 62%, 100% 70%, 100% 82%);
  background: linear-gradient(90deg, #0A181A 46%, #A3A8AB 50%, #F9FEFF 72%, #FAFBFF 80%, #D6DBDC 90%, #0A0B10 94%);
}
.crown-wrapper:before {
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 97%, 0 4%, 100% 20%, 100% 30%, 60% 36%, 64% 62%, 100% 70%, 100% 82%);
          clip-path: polygon(0 97%, 0 4%, 100% 20%, 100% 30%, 60% 36%, 64% 62%, 100% 70%, 100% 82%);
  background: #0A0B10;
}
.crown-wrapper .crown-wrapper-detail {
  position: absolute;
  width: 5px;
  height: 16px;
  border-radius: 20% 100% 0 0;
  background: #0A0B10;
  right: -3px;
  top: 48px;
  box-shadow: 0 120px 0 #0A0B10;
}
.crown-wrapper .crown-wrapper-detail:before {
  width: 5px;
  height: 16px;
  border-radius: 0 0 100% 20%;
  background: #0A0B10;
  right: 0px;
  top: 7px;
  box-shadow: 0 125px 0 #0A0B10;
}
.crown-wrapper .crown-wrapper-detail:after {
  background: #B2B6B9;
  height: 24px;
  width: 20px;
  z-index: -1;
  right: 4px;
  top: 14px;
  transform: rotate(18deg);
  background: linear-gradient(-18deg, #727679 20%, #B2B6B9 36%, #181E1E 36%);
}

/* Bezel radius and face */
.bezel {
  width: inherit;
  height: inherit;
  background: linear-gradient(45deg, #f0f0f0 0%, #ddd 50%, #f0f0f0 100%);
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  filter: drop-shadow(2px 0px 3px rgba(0, 0, 0, 0.5));
  /* Bezel face */
}
.bezel .bezel-gradient {
  position: absolute;
  overflow: hidden;
  height: 404px;
  width: 404px;
  border-radius: inherit;
  background: linear-gradient(90deg, #1C3A7E 0%, #1E2B59 30%, #295CA9 50%, #1E2B59 60%, #1153A2 100%);
  /* Main BG */
  box-shadow: 0 0 0 2px #272A51, -1px 0 6px 0 #fff;
  /* Shadow */
  /* Gradient shine decor */
  /* Gradient shine decor */
}
.bezel .bezel-gradient:after {
  height: 280px;
  width: 120px;
  right: 0;
  opacity: 0.6;
  background: linear-gradient(128deg, #373D7D 0%, #2E305B 22%, #3C68B3 22%, #5274B8 50%, rgba(40, 42, 80, 0) 90%);
}
.bezel .bezel-gradient:before {
  height: 300px;
  width: 148px;
  left: 0;
  top: 50px;
  opacity: 0.4;
  background: linear-gradient(-138deg, #373D7D 0%, #2E305B 22%, #5666AD 23%, #4B60A6 64%, rgba(40, 42, 80, 0) 70%);
}

/* Bezel indents */
.bez {
  opacity: 0.7;
  height: 18px;
  width: 18px;
  border-radius: inherit;
  box-shadow: 0 222px 0 0 #fff, 0 -222px 0 0 #fff, 2px 216px 2px -2px #777, 2px -216px 2px -2px #777, 0 -215px 0 0 #222, 0 215px 0 0 #222;
}
.bez:before {
  box-shadow: 0 222px 0 0 #fff, 0 -222px 0 0 #fff, 2px 216px 2px -2px #777, 2px -216px 2px -2px #777, 0 -215px 0 0 #222, 0 215px 0 0 #222;
}

i.bez:nth-of-type(1) {
  transform: rotateZ(calc(6deg * 1));
}

i.bez:nth-of-type(2) {
  transform: rotateZ(calc(6deg * 2));
}

i.bez:nth-of-type(3) {
  transform: rotateZ(calc(6deg * 3));
}

i.bez:nth-of-type(4) {
  transform: rotateZ(calc(6deg * 4));
}

i.bez:nth-of-type(5) {
  transform: rotateZ(calc(6deg * 5));
}

i.bez:nth-of-type(6) {
  transform: rotateZ(calc(6deg * 6));
}

i.bez:nth-of-type(7) {
  transform: rotateZ(calc(6deg * 7));
}

i.bez:nth-of-type(8) {
  transform: rotateZ(calc(6deg * 8));
}

i.bez:nth-of-type(9) {
  transform: rotateZ(calc(6deg * 9));
}

i.bez:nth-of-type(10) {
  transform: rotateZ(calc(6deg * 10));
}

i.bez:nth-of-type(11) {
  transform: rotateZ(calc(6deg * 11));
}

i.bez:nth-of-type(12) {
  transform: rotateZ(calc(6deg * 12));
}

i.bez:nth-of-type(13) {
  transform: rotateZ(calc(6deg * 13));
}

i.bez:nth-of-type(14) {
  transform: rotateZ(calc(6deg * 14));
}

/* 5, 15, 25, 35, 45, 55 marks */
.bez-five-min {
  height: 30px;
  width: 10px;
  box-shadow: 0 182px 0 0 #efefef, 0 -182px 0 0 #efefef, 2px -182px 0 0 #888, 2px 182px 0 0 #888;
  opacity: 1;
  transform: rotateZ(30deg);
}
.bez-five-min:before, .bez-five-min:after {
  height: inherit;
  width: inherit;
  box-shadow: inherit;
}
.bez-five-min:before {
  transform: rotateZ(60deg);
}
.bez-five-min:after {
  transform: rotateZ(-60deg);
}

/* 10, 20, 30, 40, 50 numbers */
.bez-num {
  font-family: "Chathura", sans-serif;
  font-size: 72px;
  letter-spacing: -0.02em;
  position: absolute;
  width: 406px;
  height: 406px;
}
.bez-num li {
  position: absolute;
  height: 436px;
  width: 48px;
  text-align: center;
  text-indent: -5px;
  /* Fake inset */
  color: #e0e0e0;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
.bez-num li:nth-child(1) {
  transform: rotateZ(calc(60deg * 1));
}
.bez-num li:nth-child(2) {
  transform: rotateZ(calc(60deg * 2));
}
.bez-num li:nth-child(3) {
  transform: rotateZ(calc(60deg * 3));
}
.bez-num li:nth-child(4) {
  transform: rotateZ(calc(60deg * 4));
}
.bez-num li:nth-child(5) {
  transform: rotateZ(calc(60deg * 5));
}

/* Bezel top triangle and circle */
.bezel-decor {
  /* Bezel top triangle */
  /* Bezel circle in triangle */
}
.bezel-decor:before {
  top: 18px;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 32px solid #ddd;
  border-right: 24px solid transparent;
  border-left: 24px solid transparent;
  box-shadow: 0 -1px 0 #333;
}
.bezel-decor:after {
  left: 0;
  right: 0;
  margin: auto;
  top: 17px;
  box-shadow: inset 0 2px 1px 0 rgba(0, 0, 0, 0.7);
  background: linear-gradient(90deg, #ccc 0%, #ccc 30%, #eee 70%, #eee 100%);
}

/* 1-15 squares */
.bez-min {
  height: 14px;
  width: 4px;
  box-shadow: 0 -174px 0 0 #efefef, 1px -175px 0 0 #444;
  /* Fake indent */
}
.bez-min:nth-child(5), .bez-min:nth-child(10) {
  display: none;
}

.bez-min:nth-child(1) {
  transform: rotateZ(calc(6deg * 1));
}

.bez-min:nth-child(2) {
  transform: rotateZ(calc(6deg * 2));
}

.bez-min:nth-child(3) {
  transform: rotateZ(calc(6deg * 3));
}

.bez-min:nth-child(4) {
  transform: rotateZ(calc(6deg * 4));
}

.bez-min:nth-child(5) {
  transform: rotateZ(calc(6deg * 5));
}

.bez-min:nth-child(6) {
  transform: rotateZ(calc(6deg * 6));
}

.bez-min:nth-child(7) {
  transform: rotateZ(calc(6deg * 7));
}

.bez-min:nth-child(8) {
  transform: rotateZ(calc(6deg * 8));
}

.bez-min:nth-child(9) {
  transform: rotateZ(calc(6deg * 9));
}

.bez-min:nth-child(10) {
  transform: rotateZ(calc(6deg * 10));
}

.bez-min:nth-child(11) {
  transform: rotateZ(calc(6deg * 11));
}

.bez-min:nth-child(12) {
  transform: rotateZ(calc(6deg * 12));
}

.bez-min:nth-child(13) {
  transform: rotateZ(calc(6deg * 13));
}

.bez-min:nth-child(14) {
  transform: rotateZ(calc(6deg * 14));
}

/* Border, inner and outer rings */
.crystal {
  position: absolute;
  width: 322px;
  height: 322px;
  border-radius: 50%;
  box-shadow: inset 1px 1px 4px 0 rgba(0, 0, 0, 0.7), 0 0 0 2px #272A51;
  background: linear-gradient(90deg, #ddd 0%, #777 65%, #ccc 100%);
  /* Outer ring */
  /* Inner ring */
}
.crystal:before, .crystal:after {
  border-radius: 100%;
}
.crystal:before {
  width: 316px;
  height: 316px;
  border: 2px solid #444;
  background: linear-gradient(0deg, #aaa 0%, #888 65%, #aaa 100%);
  box-shadow: inset 0 0 10px 0 #444;
}
.crystal:after {
  width: 304px;
  height: 304px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(-25deg, #666 0%, #ddd 55%, #999 100%);
  box-shadow: inset 0 -2px 4px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px 0 rgba(255, 255, 255, 0.6);
}

.face {
  position: absolute;
  width: 286px;
  height: 286px;
  border-radius: 100%;
  background: radial-gradient(ellipse at center, #1752A3 0%, #1D3A6F 80%);
  box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, 0.4), inset 0 -4px 20px 0 rgba(0, 0, 0, 0.2);
  /* Thicker 30, reduced height */
  /* Each second tick */
}
.face:after {
  width: 3px;
  height: 3px;
  background: #e0e0e0;
  top: 281px;
  transform: rotateZ(180deg);
}
.face .sec {
  height: 7px;
  width: 1px;
  box-shadow: 0 137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2), 0 -137px 0 0 #e0e0e0;
  /* Thicker 35, 5, before:20, after:50 */
  /* Thicker 40, 10, before:25, after:55 */
  /* Thicker before:15, after:50 */
  /* Remove ticks for footer text */
}
.face .sec:before {
  box-shadow: 0 -137px 0 0 #e0e0e0, 0 137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2);
}
.face .sec:nth-of-type(5) {
  box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0, 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2);
}
.face .sec:nth-of-type(5):before {
  box-shadow: 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2);
}
.face .sec:nth-of-type(5):after {
  box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0;
}
.face .sec:nth-of-type(10) {
  box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0, 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2);
}
.face .sec:nth-of-type(10):before {
  box-shadow: 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2);
}
.face .sec:nth-of-type(10):after {
  box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0;
}
.face .sec:nth-of-type(15):before {
  box-shadow: 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2);
}
.face .sec:nth-of-type(15):after {
  box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0;
}
.face .sec:nth-of-type(1) {
  box-shadow: 0 -137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2);
  /* Shorter tick 31 */
}
.face .sec:nth-of-type(1):after {
  height: 1px;
  width: 3px;
  background: #e0e0e0;
  top: 143px;
  left: -1px;
}
.face .sec:nth-of-type(14) {
  /* Shorter tick 29 - Super hacky */
}
.face .sec:nth-of-type(14):before {
  box-shadow: 0 137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2);
}
.face .sec:nth-of-type(14):after {
  height: 3px;
  width: 1px;
  background: #e0e0e0;
  left: 140px;
  top: 2px;
}
.face .sec:nth-of-type(15) {
  box-shadow: 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2), 1px 147px 0 0 rgba(255, 255, 255, 0.2), -1px 147px 0 0 rgba(255, 255, 255, 0.2);
}

i.sec:nth-of-type(1) {
  transform: rotateZ(calc(6deg * 1));
}

i.sec:nth-of-type(2) {
  transform: rotateZ(calc(6deg * 2));
}

i.sec:nth-of-type(3) {
  transform: rotateZ(calc(6deg * 3));
}

i.sec:nth-of-type(4) {
  transform: rotateZ(calc(6deg * 4));
}

i.sec:nth-of-type(5) {
  transform: rotateZ(calc(6deg * 5));
}

i.sec:nth-of-type(6) {
  transform: rotateZ(calc(6deg * 6));
}

i.sec:nth-of-type(7) {
  transform: rotateZ(calc(6deg * 7));
}

i.sec:nth-of-type(8) {
  transform: rotateZ(calc(6deg * 8));
}

i.sec:nth-of-type(9) {
  transform: rotateZ(calc(6deg * 9));
}

i.sec:nth-of-type(10) {
  transform: rotateZ(calc(6deg * 10));
}

i.sec:nth-of-type(11) {
  transform: rotateZ(calc(6deg * 11));
}

i.sec:nth-of-type(12) {
  transform: rotateZ(calc(6deg * 12));
}

i.sec:nth-of-type(13) {
  transform: rotateZ(calc(6deg * 13));
}

i.sec:nth-of-type(14) {
  transform: rotateZ(calc(6deg * 14));
}

/* Rolex text */
.content-upper {
  color: #ddd;
  text-transform: uppercase;
}
.content-upper .logo {
  top: 82px;
  position: absolute;
  width: 8px;
  height: 6px;
  border: 2px solid #ddd;
  border-top-width: 2px;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* Dots */
  /* Center tip */
}
.content-upper .logo:before, .content-upper .logo:after {
  top: -16px;
}
.content-upper .logo:before {
  left: 1px;
  width: 2px;
  height: 2px;
  background: #ddd;
  border-radius: 50%;
  box-shadow: 5px 1px 0 #ddd, 9px 3px 0 #ddd, -5px 1px 0 #ddd, -9px 3px 0 #ddd;
}
.content-upper .logo:after {
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  border-bottom: 16px solid #ddd;
}
.content-upper .logo .logo-left,
.content-upper .logo .logo-right {
  position: absolute;
  top: -15px;
  border-bottom: 15px solid #ddd;
}
.content-upper .logo .logo-left:before,
.content-upper .logo .logo-right:before {
  top: 1px;
  border-top: 15px solid transparent;
}
.content-upper .logo .logo-left {
  left: -3px;
  border-right: 1px solid transparent;
  border-left: 2px solid transparent;
  transform: rotateZ(-15deg);
}
.content-upper .logo .logo-left:before {
  left: -4px;
  border-left: 2px solid #ddd;
  transform: rotateZ(-5deg);
}
.content-upper .logo .logo-right {
  right: -3px;
  border-right: 2px solid transparent;
  border-left: 1px solid transparent;
  transform: rotateZ(15deg);
}
.content-upper .logo .logo-right:before {
  right: -4px;
  border-right: 2px solid #ddd;
  transform: rotateZ(5deg);
}
.content-upper .name {
  font-family: "Rhodium Libre", serif;
  position: absolute;
  font-size: 1.125em;
  letter-spacing: 0.07em;
  /* 16px */
  text-align: center;
  width: 100%;
  top: 90px;
}
.content-upper .sub-name {
  font-family: "Roboto", sans-serif;
  position: absolute;
  text-align: center;
  top: 106px;
  width: 100%;
  font-size: 0.5625em;
  /* 9px */
}

/* Submariner text */
.content-lower {
  position: absolute;
  font-family: "Roboto", sans-serif;
  text-align: center;
  top: 178px;
  color: #ddd;
  width: 100%;
}
.content-lower .sub-text {
  text-transform: uppercase;
  font-size: 0.8125em;
  /* 13px */
  letter-spacing: 0.02em;
}
.content-lower .sub-num {
  font-size: 0.75em;
  /* 12px */
  top: -1px;
  position: relative;
}
.content-lower .sub-num em {
  font-style: italic;
  font-weight: 300;
}
.content-lower .sub-fine {
  text-transform: uppercase;
  font-size: 0.5625em;
  /* 9px */
  letter-spacing: -0.05em;
}
.content-lower .sub-swiss {
  position: absolute;
  top: 96px;
  width: 100%;
  text-transform: uppercase;
  font-size: 6px;
  /* 6px */
  letter-spacing: 0.02em;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}
.content-lower .sub-swiss span {
  display: inline-block;
  z-index: 2;
  position: relative;
}
.content-lower .sub-swiss span:nth-child(1) {
  transform: rotateZ(4deg);
}
.content-lower .sub-swiss span:nth-child(2) {
  transform: rotateZ(-4deg);
}

/* Face triangle marker */
.marker-triangle {
  position: absolute;
  left: -2px;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 48px solid #333;
  border-right: 21px solid transparent;
  border-left: 21px solid transparent;
  top: 16px;
  /* BG */
  /* White FG */
}
.marker-triangle:before {
  width: 0;
  height: 0;
  border-top: 47px solid #ccc;
  border-right: 19px solid transparent;
  border-left: 19px solid transparent;
  top: -48px;
  left: -18px;
}
.marker-triangle:after {
  width: 0;
  height: 0;
  border-top: 40px solid #fff;
  border-right: 15px solid transparent;
  border-left: 14px solid transparent;
  top: -46px;
  left: -13px;
  filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.3));
}

/* Face square markers */
.marker-square {
  position: absolute;
  width: 43px;
  height: 17px;
}
.marker-square:before, .marker-square:after {
  width: inherit;
  height: inherit;
  background: #fff;
  box-shadow: inset -1px -1px 1px 0 #999, inset -2px -2px 7px 0 #aaa, -1px -1px 2px 1px rgba(0, 0, 0, 0.3);
  border: 2px solid #ccc;
}
.marker-square:before {
  left: -108px;
}
.marker-square:after {
  top: 108px;
  transform: rotateZ(-90deg);
}

/* Face circle markers */
.markers-circle {
  height: 26px;
  width: 26px;
}
.markers-circle:before {
  top: -116px;
}
.markers-circle:after {
  top: 116px;
}
.markers-circle:nth-child(1) {
  transform: rotateZ(30deg);
}
.markers-circle:nth-child(2) {
  transform: rotateZ(-30deg);
}
.markers-circle:nth-child(2):before, .markers-circle:nth-child(2):after {
  transform: rotateZ(-200deg);
}
.markers-circle:nth-child(3) {
  transform: rotateZ(60deg);
}
.markers-circle:nth-child(3):before, .markers-circle:nth-child(3):after {
  transform: rotateZ(80deg);
}
.markers-circle:nth-child(4) {
  transform: rotateZ(-60deg);
}
.markers-circle:nth-child(4):before, .markers-circle:nth-child(4):after {
  transform: rotateZ(200deg);
}

/* Date glass */
.date {
  width: 76px;
  height: 60px;
  top: 8px;
  bottom: 0;
  margin: auto;
  right: 6px;
  position: absolute;
  border-radius: 20px/30px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 2px -2px 12px 2px rgba(255, 255, 255, 0.3);
  overflow: hidden;
  z-index: 1;
  /* Shine */
}
.date:after {
  top: -120px;
  left: -80px;
  width: 180px;
  height: 400px;
  transform: rotateZ(-25deg);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.3) 48%, rgba(255, 255, 255, 0) 68%);
}

/* Date box, border, and number */
#date-num {
  font-family: "Krona One", sans-serif;
  position: absolute;
  top: 8px;
  bottom: 0;
  margin: auto;
  right: 16px;
  text-align: center;
  text-indent: -1px;
  letter-spacing: -0.06em;
  font-size: 1.6875em;
  /* 27px */
  line-height: 1.2;
  color: #3e3e3e;
  height: 36px;
  width: 56px;
  background: radial-gradient(ellipse at center, #efefef 0%, #A7ACB0 100%);
  border-radius: 4px;
  border-top: 3px solid #373D7D;
  border-left: 3px solid #373D7D;
  border-bottom: 3px solid #5666AD;
  border-right: 3px solid #5666AD;
  box-shadow: -1px -1px 2px 0 rgba(255, 255, 255, 0.2);
}

/* Second hand */
.hand-sec {
  position: absolute;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transform: rotateZ(90deg);
  /* Circles */
  /* Hand */
}
.hand-sec:after {
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: #eee;
  border: 5px solid #d0d0d0;
  box-shadow: inset 1px 1px 2px 0 #555, 0 -73px 1px -2px #fff, 0 48px 0 -2px #ddd, 0 -74px 0 -1px #999, 0 -74px 0 1px #ddd;
}
.hand-sec:before {
  height: 184px;
  width: 2px;
  background: linear-gradient(to bottom, #aaa 0%, #d0d0d0 30%, #ddd 100%);
  bottom: -44px;
  left: 7px;
}

/* Shadow */
.hand-sec-details {
  position: absolute;
  height: 176px;
  width: 0;
  bottom: -44px;
  left: 10px;
  z-index: -1;
  transform: rotateZ(3deg);
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
}

/* Minute hand */
.hand-min {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
  background: #d0d0d0;
  /* Arm */
  /* Top of hand */
}
.hand-min:before {
  height: 86px;
  width: 16px;
  bottom: 28px;
  left: 3px;
  background: #fff;
  border: 3px solid #d0d0d0;
  box-shadow: inset 1px 1px 2px 0 #999, 0 0 4px 1px rgba(0, 0, 0, 0.4);
}
.hand-min span {
  height: 0;
  width: 0;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 26px solid #d0d0d0;
  position: absolute;
  bottom: 114px;
  left: 3px;
  /* Bottom of hand  */
}
.hand-min span:after {
  height: 0;
  width: 0;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 16px solid #d0d0d0;
  position: absolute;
  bottom: -128px;
  left: -8px;
}

/* Hour hand */
.hand-hour {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.3);
  /* Arm */
  /* Circle, covers box-shadow of arm */
  /* Circle and triangle*/
}
.hand-hour:before {
  height: 54px;
  width: 14px;
  bottom: 24px;
  left: 6px;
  background: #fff;
  border: 3px solid #d0d0d0;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4), 0 -10px 7px 0 rgba(0, 0, 0, 0.4);
}
.hand-hour:after {
  background: #d0d0d0;
  height: inherit;
  width: inherit;
  border-radius: inherit;
}
.hand-hour span {
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  border: 3px solid #d0d0d0;
  bottom: 48px;
  left: -3px;
  position: absolute;
  /* Top triangle - BG */
  /* Top triangle - FG */
  /* Circle decor */
}
.hand-hour span:before {
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 22px solid #d0d0d0;
  position: absolute;
  bottom: 27px;
  left: 6px;
}
.hand-hour span:after {
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  border-bottom: 10px solid #fff;
  position: absolute;
  bottom: 30px;
  left: 10px;
}
.hand-hour span .hour-decor {
  height: 16px;
  width: 3px;
  bottom: -14px;
  background: #d0d0d0;
}
.hand-hour span .hour-decor:after, .hand-hour span .hour-decor:before {
  width: inherit;
  height: inherit;
  background: inherit;
}
.hand-hour span .hour-decor:before {
  transform: rotateZ(60deg);
  top: -10px;
  left: 6px;
}
.hand-hour span .hour-decor:after {
  transform: rotateZ(120deg);
  top: -10px;
  left: -6px;
}

/* Band details */
.band {
  position: absolute;
  height: 430px;
  top: 0;
  width: 96px;
  /* Top */
  /* Bottom */
}
.band .band-detail-top-center {
  height: 56px;
  width: inherit;
  position: absolute;
  top: -44px;
  background: linear-gradient(180deg, #2C3033 0%, #B8B8BA 6%, #0D1114 10%, #0D1114 16%, #6F7376 17%, #DFDFDF 50%, #ECECEC 80%);
  box-shadow: inset -1px 0 1px 0px rgba(0, 0, 0, 0.5), inset 1px 0 1px 0px rgba(0, 0, 0, 0.5);
}
.band .band-detail-top-center:before, .band .band-detail-top-center:after {
  box-shadow: inset -1px 0 1px 0px rgba(0, 0, 0, 0.5), inset 1px 0 1px 0px rgba(0, 0, 0, 0.5);
  border-radius: 4px 4px 0 0;
}
.band .band-detail-top-center:before {
  height: 46px;
  width: inherit;
  top: -46px;
  background: linear-gradient(180deg, #606163 0%, #929397 7%, #D8D9DB 28%, #D8D9DB 78%, #0B0D0C 79%, #0B0D0C 90%, #3D4144 92%, #B8B8BA 98%, #2E3235 100%);
}
.band .band-detail-top-center:after {
  width: inherit;
  height: 36px;
  top: -82px;
  background: linear-gradient(180deg, #DFDFDF 15%, #393D40 38%, #DEDEDE 42%, #B0B1B5 50%, #000002 51%, #000002 68%, #88898B 69%, #E7E7E9 84%, #000002 85%, #000002 100%);
}
.band .band-detail-bottom-center {
  height: 164px;
  width: inherit;
  position: absolute;
  bottom: -154px;
  background: linear-gradient(180deg, #F7F7F7 0%, #575B5E 33%, #000000 34%, #000000 40%, #EDEDEF 40%, #EDEDEF 41%, #000000 42%, #202123 42%, #878B8C 43%, #000000 44%, #45494A 45%, #D9DADC 47%, #000000 48%, #000000 52%, #D4D5D7 53%, #E1E1E1 64%, #E1E1E1 74%, #9B9C9E 91%, #000000 92%, #000000 96%, #A7A8AA 98%, #222828 100%);
  box-shadow: inset -1px 0 1px 0px rgba(0, 0, 0, 0.5), inset 1px 0 1px 0px rgba(0, 0, 0, 0.5);
}
.band .band-detail-bottom-center:before {
  width: inherit;
  height: 70px;
  bottom: -70px;
  background: linear-gradient(180deg, #222828 0%, #C8C8CA 3%, #050507 5%, #050507 20%, #C8C9CB 23%, #C8C9CB 35%, #75797C 80%, #010103 81%, #010103 90%, #ADAEB0 92%, #060709 94%, #666769 95%, #747476 97%, #222828 100%);
  box-shadow: inset -1px 0 1px 0px rgba(0, 0, 0, 0.5), inset 1px 0 1px 0px rgba(0, 0, 0, 0.5);
}
.band .band-detail-bottom-center:after {
  width: inherit;
  height: 38px;
  bottom: -108px;
  background: linear-gradient(180deg, #C4C5C9 0%, #C5C5C5 15%, #212528 17%, #AFB0B2 38%, #D7D7D9 56%, #D7D7D9 79%, #75797C 83%, #010103 85%, #010103 90%, #E0E1E3 92%, #949899 94%, #949899 95%, #E0E1E3 97%, #222828 100%);
  box-shadow: inset -1px 0 1px 0px rgba(0, 0, 0, 0.5), inset 1px 0 1px 0px rgba(0, 0, 0, 0.5);
}
.band .band-detail-top-brushed {
  position: absolute;
  width: 221px;
  left: -63px;
  top: 20px;
  height: 55px;
  z-index: -1;
  background-image: linear-gradient(180deg, #5C6061 0%, #808388 1%, #808388 3%, #252B2B 4%, #787C7D 9%, #262A2D 11%, #5C4D36 12%, #86878B 13%, #E2E2E2 28%, #E5E5E5 58%, #8A8B8F 90%);
  box-shadow: inset -1px 0 2px 0 rgba(0, 0, 0, 0.8), inset 1px 0 2px 0 rgba(0, 0, 0, 0.8);
}
.band .band-detail-top-brushed:before, .band .band-detail-top-brushed:after {
  box-shadow: inset -1px 0 1px 0 rgba(0, 0, 0, 0.7), inset 1px 0 1px 0 rgba(0, 0, 0, 0.7);
}
.band .band-detail-top-brushed:before {
  top: -64px;
  height: 64px;
  width: inherit;
  left: 0;
  border-radius: 7%/100% 100% 0% 0%;
  background-image: linear-gradient(180deg, #101616 0%, #58595B 6%, #9A9B9F 16%, #D2D2D2 34%, #D2D2D2 78%, #75767A 88%, #9FA0A4 97%, #5C6061 100%);
}
.band .band-detail-top-brushed:after {
  top: -100px;
  height: 36px;
  width: 195px;
  left: 13px;
  background-image: linear-gradient(180deg, #DFDFDF 8%, #C9C9CB 10%, #4B4F52 46%, #2F3334 58%, #D2D2D2 64%, #D2D2D2 74%, #9FA0A4 82%, #5C5D5F 92%, #B7B8BA 99%, #808183 100%);
  border-radius: 6%/100% 100% 0 0;
}
.band .band-detail-bottom-brushed:nth-child(1) {
  position: absolute;
  left: -63px;
  bottom: 111px;
  width: 221px;
  height: 74px;
  z-index: -1;
  background: linear-gradient(180deg, #C8C8CA 10%, #e7e7e7 30%, #D7D7D7 40%, #B2B3B5 60%, #3B3F40 76%, #151B1B 78%, #212727 80%, #313639 84%, #8C9093 86%, #2A3030 88%, #0F1515 90%, #565A5D 94%, #7F8384 96%, #7F8384 98%, #5C5D5F 100%);
  box-shadow: inset -1px 0 1px 0 rgba(0, 0, 0, 0.4), inset 1px 0 1px 0 rgba(0, 0, 0, 0.4);
}
.band .band-detail-bottom-brushed:nth-child(1):before, .band .band-detail-bottom-brushed:nth-child(1):after {
  box-shadow: inset -1px 0 1px 0 rgba(255, 255, 255, 0.4), inset 1px 0 1px 0 rgba(255, 255, 255, 0.4);
}
.band .band-detail-bottom-brushed:nth-child(1):before {
  bottom: -86px;
  left: 0;
  height: 86px;
  width: inherit;
  background-image: linear-gradient(180deg, #A2A3A7 6%, #CACCCB 8%, #D3D3D5 20%, #D3D3D5 50%, #666A6B 88%, #262C2C 90%, #262C2C 92%, #747879 94%, #141819 96%, #4F5354 100%);
  border-radius: 7%/0 0 100% 100%;
}
.band .band-detail-bottom-brushed:nth-child(1):after {
  bottom: -162px;
  height: 76px;
  width: 195px;
  left: 13px;
  background-image: linear-gradient(180deg, #7F8384 2%, #7B7B7D 5%, #B1B2B4 6%, #CFCFD1 30%, #C4C4C6 60%, #2D3132 89%, #3F4042 94%, #ECEDEF 96%, #C3C3C5 97%, #606163 99%);
  border-radius: 5%/0 0 100% 100%;
}
.band .band-detail-bottom-brushed:nth-child(2) {
  position: absolute;
  left: -41px;
  bottom: -107px;
  width: 178px;
  height: 56px;
  z-index: -1;
  border-radius: 7%/0 0 100% 100%;
  background-image: linear-gradient(180deg, #9B9C9E 0%, #D6D7D9 12%, #3B3F40 18%, #161A1B 20%, #363A3B 22%, #393D3E 23%, #717274 42%, #D7D8DA 74%, #D7D8DA 81%, #5D6162 83%, #5C5D5F 86%, #353638 89%, #F4F8F9 93%, #000100 94%);
  box-shadow: inset -1px 0 2px 0 rgba(255, 255, 255, 0.5), inset 1px 0 2px 0 rgba(255, 255, 255, 0.5);
}