@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

html {
  background: linear-gradient(-50deg, #97c794, #12656c);
  background-size: cover;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  /* aqui modificaremos primero */
  font-size: 11px;
  margin: 2em auto;
  width: 30em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.watch {
  position: relative;
  margin: 0 auto;
  width: 20.8em;
  height: -30em;
  padding: -10.3em;
  border-radius: 50px;
  /* queda excelente y eso que no tenia */
}

.case {
  position: relative;
  z-index: 2;
  width: 21.2em;
  height: 24.7em;
  border-radius: 4em;
  box-shadow: inset 0 0 0 0.1em #bdbdbd, inset 0 0 0.2em 0.2em #bebebe, inset 0 0.3em 0.3em 0.4em #070707, inset 0 -0.3em 0.1em 0.1em #070707, inset 0 0 0 0.9em #fff, inset 0 0 0 1.05em #313131, inset 3.5em -0.5em 2em -2em #a4a4a4, inset -1.2em -0em 0.5em 0em #a4a4a4, inset -0.4em -1.1em 0.5em 0em #a4a4a4;
}

.case:before {
  content: '';
  position: absolute;
  top: 0.3em;
  left: 2.5em;
  right: 2.5em;
  height: 8%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 1%, rgba(255, 255, 255, 0.5) 41%, rgba(255, 255, 255, 0.2) 100%);
  border-radius: 10em 10em 11em 11em / 4em 4em 4em 4em;
}

.crown {
  /* opcinal */
  position: absolute;
  background: #f6f6f6;
  width: 1.5em;
  height: 4.2em;
  top: 8.2em;
  right: -1.5em;
  box-shadow: -0.26em 0 0 -0.1em #060606, inset -0.1em 0 0.1em 0 #747474, inset 0 -0.1em 0 #fefefe, inset 0 0.1em 0 #fefefe, inset 0em 0.2em 0.1em 0em #eeeeee, inset 0.1em 1.1em 0.6em -0.3em #040404, inset 0.1em -1.1em 0.6em -0.3em #040404;
  border-radius: 0.8em 0.6em 0.6em 0.8em / 1em 0.6em 0.6em 1em;
  overflow: hidden;
}

.crown:before {
  content: '';
  position: absolute;
  top: 0.1em;
  right: 0;
  height: 0.1em;
  width: 0.5em;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:
    0 0.1em 0 rgba(255, 255, 255, 0.2),
    0 0.3em 0 rgba(0, 0, 0, 0.2),
    0 0.4em 0 rgba(255, 255, 255, 0.2),
    0 0.6em 0 rgba(0, 0, 0, 0.2),
    0 0.7em 0 rgba(255, 255, 255, 0.2),
    0 0.9em 0 rgba(0, 0, 0, 0.2),
    0 1em 0 rgba(255, 255, 255, 0.2),
    0 1.2em 0 rgba(0, 0, 0, 0.2),
    0 1.3em 0 rgba(255, 255, 255, 0.2),
    0 1.5em 0 rgba(0, 0, 0, 0.2),
    0 1.6em 0 rgba(255, 255, 255, 0.2),
    0 1.8em 0 rgba(0, 0, 0, 0.2),
    0 1.9em 0 rgba(255, 255, 255, 0.2),
    0 2.1em 0 rgba(0, 0, 0, 0.2),
    0 2.2em 0 rgba(255, 255, 255, 0.2),
    0 2.4em 0 rgba(0, 0, 0, 0.2),
    0 2.5em 0 rgba(255, 255, 255, 0.2),
    0 2.7em 0 rgba(0, 0, 0, 0.2),
    0 2.8em 0 rgba(255, 255, 255, 0.2),
    0 3em 0 rgba(0, 0, 0, 0.2),
    0 3.1em 0 rgba(255, 255, 255, 0.2),
    0 3.3em 0 rgba(0, 0, 0, 0.2),
    0 3.4em 0 rgba(255, 255, 255, 0.2),
    0 3.6em 0 rgba(0, 0, 0, 0.2),
    0 3.7em 0 rgba(255, 255, 255, 0.2),
    0 3.9em 0 rgba(0, 0, 0, 0.2),
    0 4em 0 rgba(255, 255, 255, 0.2),
    0 4.2em 0 rgba(0, 0, 0, 0.2),
    0 4.3em 0 rgba(255, 255, 255, 0.2),
    0 4.5em 0 rgba(0, 0, 0, 0.2),
    0 4.6em 0 rgba(255, 255, 255, 0.2),
    0 4.8em 0 rgba(0, 0, 0, 0.2),
    0 4.9em 0 rgba(255, 255, 255, 0.2),
    0 5.1em 0 rgba(0, 0, 0, 0.2),
    0 5.2em 0 rgba(255, 255, 255, 0.2)
}

/* botones */
.l_power1 {
  position: absolute;
  left: -0.6em;
  top: 3.5em;
  height: 4.5em;
  width: 0.6em;
  background: #e4e4e4;
  border-radius: -0.1em -0.2em -0.5em 0.5em/0.9em 0.1em 0.1em 0.9em;
  box-shadow: inset 0.1em 0.05em 0 #AFAFAF, inset -0.2em 0.5em 0.2em -0.2em #FFF, inset -0.25em 0.8em 0.2em -0.2em #000, inset 0.1em -0.6em 0.2em -0.2em #000;
}

.r_power2 {
  position: absolute;
  right: -0.6em;
  top: 3.5em;
  height: 4.5em;
  width: 0.6em;
  background: #e4e4e4;
  border-radius: -0.1em -0.2em -0.5em 0.5em/0.9em 0.1em 0.1em 0.9em;
  box-shadow: inset 0.1em 0.05em 0 #AFAFAF, inset -0.2em 0.5em 0.2em -0.2em #FFF, inset -0.25em 0.8em 0.2em -0.2em #000, inset 0.1em -0.6em 0.2em -0.2em #000;
}

.r_power3 {
  position: absolute;
  right: -0.6em;
  top: 16em;
  height: 2.5em;
  width: 0.6em;
  background: #e4e4e4;
  border-radius: 0.3em 0.1em 0.1em 0.3em / 0.9em 0.1em 0.1em 0.9em;
  border-radius: -0.1em -0.2em -0.5em 0.5em/0.9em 0.1em 0.1em 0.9em;
  box-shadow: whitesmoke;
}

/* boton especial */
.btn-spc {
  position: absolute;
  right: -0.6em;
  top: 16em;
  height: 4.5em;
  width: 0.6em;
  background: #e4e4e4;
  border-radius: -0.1em -0.2em -0.5em 0.5em/0.9em 0.1em 0.1em 0.9em;
  box-shadow: inset 0.1em 0.05em 0 #AFAFAF, inset -0.2em 0.5em 0.2em -0.2em #FFF, inset -0.25em 0.8em 0.2em -0.2em #000, inset 0.1em -0.6em 0.2em -0.2em #000;
}


.strap {
  position: absolute;
  z-index: 1;
  left: 2.5em;
  width: 16.2em;
  height: -17.6em;
}

.strap.strap-top {
  top: 0;
}

.strap.strap-bottom {
  bottom: 0;
  transform: rotate(180deg);
}

.strap:before {
  content: '';
  position: absolute;
  left: -3.2em;
  bottom: -0.3em;
  height: 3.7em;
  width: 3.7em;
  border-radius: 50%;
  box-shadow: 2.2em 2.2em 0 -0.5em #B8B8B8;
}

.strap:after {
  content: '';
  position: absolute;
  right: -3.2em;
  bottom: -0.3em;
  height: 3.7em;
  width: 3.7em;
  border-radius: 50%;
  box-shadow: -2.2em 2.2em 0 -0.5em #A0A0A0;
}
/* brazalete */
.mesh {
  position: absolute;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.7em 0 -0.6em rgba(0, 0, 0, 0.6), 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}

.mesh:nth-child(1) {
  z-index: 5;
  bottom: -0.5em;
  left: 0;
  width: 100%;
  height: 2.5em;
  background: linear-gradient(to top, #a1a1a1 1%, #eeeeee 100%);
  border-radius: 2em 2em 0 0 / 2.5em 2.5em 0 0;
  overflow: hidden;
}

.mesh:nth-child(1):before {
  content: '';
  position: absolute;
  bottom: -1em;
  width: 100%;
  height: 5em;
  left: 0;
  box-shadow: inset 0 -2.6em 1em -0.5em rgba(0, 0, 0, 0.3);
  transform: rotate(-4deg);
}

.mesh:nth-child(2) {
  z-index: 4;
  bottom: 1.5em;
  width: 90%;
  left: 5%;
  height: 2.5em;
  background: linear-gradient(to bottom, #d2d2d2 1%, #e9e9e9 100%);
  border-radius: 1.5em 1.5em 0 0 / 2.5em 2.5em 0 0;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.4em 0 -0.3em rgba(0, 0, 0, 0.6), 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}

.mesh:nth-child(3) {
  z-index: 3;
  bottom: 3.5em;
  width: 82%;
  left: 9%;
  height: 2.3em;
  background: linear-gradient(to bottom, #d7d7d7 1%, #ececec 100%);
  border-radius: 1.1em 1.1em 0 0 / 2.2em 2.2em 0 0;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.25em 0 -0.15em rgba(0, 0, 0, 0.6), 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}

.mesh:nth-child(4) {
  z-index: 2;
  bottom: 5.1em;
  width: 78%;
  left: 11%;
  height: 2em;
  background: linear-gradient(to bottom, #d5d5d5 1%, #ebebeb 100%);
  border-radius: 1em 1em 0 0 / 1.9em 1.9em 0 0;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.25em 0 -0.15em rgba(0, 0, 0, 0.6), 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}

.mesh:nth-child(5) {
  z-index: 1;
  bottom: 6.75em;
  width: 74%;
  left: 13%;
  height: 1.2em;
  background: linear-gradient(to bottom, #c3c3c3 1%, #e2e2e2 100%);
  border-radius: 0.7em 0.7em 0 0 / 1.2em 1.2em 0 0;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}

.resizer {
  position: absolute;
  top: 1em;
  left: 1em;
  width: 230px;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-size: 2em;
  color: #fff;
}

#range {
  margin-top: 2em;
  width: 100%;
  border-radius: 5px;
  height: 5px;
  -webkit-appearance: none;
  position: relative;
  outline: none !important;
  display: block;
  cursor: -webkit-grab;
}

#range::-webkit-media-slider-thumb,
#range::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  background: none;
  height: 10px;
  width: 10px;
}

input[type="range"]::-webkit-slider-thumb:before {
  content: "< >";
  font-family: 'Concert One', cursive;
  position: absolute;
  background: #eaebe5;
  background: -moz-linear-gradient(top, #eaebe5 0%, #dcdedd 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaebe5), color-stop(100%, #dcdedd));
  background: -webkit-linear-gradient(top, #eaebe5 0%, #dcdedd 100%);
  background: -o-linear-gradient(top, #eaebe5 0%, #dcdedd 100%);
  background: -ms-linear-gradient(top, #eaebe5 0%, #dcdedd 100%);
  background: linear-gradient(to bottom, #eaebe5 0%, #dcdedd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebe5', endColorstr='#dcdedd', GradientType=0);
  top: -4px;
  left: 0px;
  border-radius: 2px;
  color: #5a5a5a;
  text-shadow: 0 1px 0 white;
  height: 22px;
  width: 32px;
  border-top: 1px solid white;
  border-left: 1px solid white;
  box-sizing: border-box;
  text-align: center;
  line-height: 19px;
  font-size: 17px;
  cursor: -webkit-grab;
}

#clock {
  position: absolute;
  top: 60px;
  text-align: center;
  width: 100%;
  height: 100%;
  transition: all ease-in-out 0.5s;
}

#clock.full {

  transition: all ease-in-out 0.5s;
}

#time {
  font-size: 50px;
}

#day {
  color: whitesmoke;
  font-size: 30px;
}

#date {
  color: whitesmoke;
  font-size: 20px;
}

.light {
  color: #333;
  box-shadow: thistle;
}


/*  div  que contiene modo luz */
#luz {
  position: absolute;
  top: 140px;
  text-align: center;
  width: 100%;
  height: 100%;
  transition: all ease-in-out 0.5s;
}

/* div que contiene modo alarma */
#alarm {
  position: absolute;
  top: 140px;
  text-align: center;
  width: 100%;
  height: 50%;
  transition: all ease-in-out 0.5s;
}

/* div que contiene modo fecha */
#camfecha {
  position: absolute;
  top: 140px;
  text-align: center;
  width: 100%;
  height: 100%;
  transition: all ease-in-out 0.5s;
}

/* despues la activaremos para AM o PM */
/* #prueba{
  font-size: 30px;
  color: whitesmoke;
} */

.container-flex {
  display: flex;
  width: 30%;
  justify-content: center;
}


.container-flex div {
  width: 40px;
  height: 40px;
  /*  margin: 0 auto; */
  border: 1px solid black;
  border-radius: 50%;
  /*  margin: 10px 5px;
  text-align: center; */
}


.container-flex div {
  opacity: 0.25;
}

.container-flex div.active {
  opacity: 1;
}

.container-flex div:nth-child(1) {}

.container-flex div:nth-child(2) {}

.container-flex div:nth-child(3) {}