/* stylelint-disable */

@font-face {
  font-family: 'rolex-light';
  font-weight: 300;
  src: url('rolex/fonts/RolexFont-Light-WebXL.woff') format('woff'), url('rolex/fonts/RolexFont-Light-WebXL.woff2') format('woff2')
}

@font-face {
  font-family: 'rolex-regular';
  font-weight: 300;
  src: url('rolex/fonts/rolexfont-regular-webfont.woff') format('woff'), url('rolex/fonts/rolexfont-regular-webfont.woff2') format('woff2')
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

body,
html {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent
}

body {
  -webkit-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
  line-height: 16px;
  font-weight: normal;
  font-family: 'rolex-regular', arial, 'Lucida Grande', sans-serif;
  text-transform: none;
  position: relative
}

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

.rlxmain {
  position: relative
}

.container {
  background-color: #006039;
  width: 320px;
  height: 90px;
  margin: 0 auto;
  position: relative;
  overflow: hidden
}

#countdown {
  width: 70%;
  margin: 0 auto
}

.container.borderActive:before {
  border: 1px dashed #000;
  position: absolute;
  display: inherit;
  height: 100%;
  width: 100%
}

.container.borderActive:hover:before {
  border: 1px dashed #000;
  position: absolute;
  display: none;
  height: 100%;
  width: 100%
}

.content {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100%;
  width: 100%
}

.ie6.content,
.ie7.content,
.ie8.content,
.ie9.content {
  display: none
}

#rolex-clock a {
  display: block
}

.ie6#rolex-clock a,
.ie7#rolex-clock a,
.ie8#rolex-clock a,
.ie9#rolex-clock a {
  position: absolute;
  top: 0;
  left: 0
}

.container:before,
.container:after {
  content: ' ';
  display: table
}

.container:after {
  clear: both
}

.sr-only {
  border: 0 none;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

.border-all:after {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(100% -2px);
  height: calc(100% -2px);
  content: ' ';
  pointer-events: none;
  border: 0 solid #ccc;
  background: none !important;
  filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale')
}

.content a {
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-decoration: none;
  z-index: 100
}

.clock {
  display: inline-block
}

.logo {
  margin-top: 0;
  background: url('rolex/img/logo/white/logo_rolex.svg') no-repeat scroll 0 0 transparent;
  display: block;
  position: relative;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
  background-size: 100%;
  background-position: 50%;
  width: 80px;
  height: 80px
}

#logo {
  position: absolute;
  left: 23px;
  top: 3px
}

.block {
  margin: 0;
  line-height: 14px
}

.block a {
  color: #fff
}

.block.active a {
  color: #a37e2c
}

.clock {
  background: url('rolex/img/clock/white/80.png') no-repeat scroll 0 0 transparent;
  display: block;
  position: relative;
  top: 50%;
  right: 50%;
  z-index: 50;
  overflow: hidden;
  left: 160px;
  top: 45px;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px
}

@media only screen and (-webkit-min-device-pixel-ratio:1),
only screen and (min-device-pixel-ratio:1) {
  .clock {
    background: url('rolex/img/clock/white/80.png') no-repeat scroll 0 0 transparent
  }
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-o-min-device-pixel-ratio:2 / 1),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:192dpi),
only screen and (min-resolution:2dppx) {
  .clock {
    background: url('rolex/img/clock/white/80_retina.png') no-repeat scroll 0 0 transparent;
    background-size: 100% 100%
  }
}

.block .city,
.block .time {
  display: inline-block;
  font-size: 9px;
  line-height: 12px;
  white-space: nowrap
}

.glyph {
  background: 0;
  font-size: 15px;
  left: -7px;
  line-height: 1em;
  position: absolute;
  top: -2px;
  display: none;
  width: 8px;
  height: 18px;
  overflow: hidden
}

.glyph:after {
  content: '•'
}

.active .glyph {
  display: block
}

#block-control {
  display: block;
  position: absolute;
  left: 225px;
  top: 8px
}

.block {
  position: absolute
}

.block .city {
  position: absolute;
  left: 0;
  top: 0
}

.block .time {
  position: absolute;
  top: 10px;
  left: 0
}

#city {
  position: absolute;
  left: 0;
  top: 0
}

#local {
  position: absolute;
  left: 0;
  top: 30px
}

.arrow span {
  display: none
}

#regular_timepiece_canvas {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0
}

#racetext {
  display: none
}

.has-countdown #logo {
  display: none
}

.has-countdown.end-countdown #logo {
  display: block
}

.has-countdown.end-countdown #block-control {
  display: block
}

.has-countdown.end-countdown #logo {
  display: block;
  left: 26px;
  top: 1px
}

.has-countdown.end-countdown #countdown {
  display: none
}

.has-countdown.end-countdown #clock {
  left: 150px
}