/* Define Font Families */
@font-face {
    font-family: "stencil";
    src: url("../fonts/pfdin.woff2") format('woff2');
}


.navbar-brand {
 text-shadow: 0 0 10px #ff0000;
 color: #f55 !important;
 font-family: "stencil", sans-serif;
 font-size: 2em;
}
#navbar .active a {
 text-shadow: 0 0 10px #0000ff;
 color: #aaf !important;
}

body {
 font-size: 16px;
 position: relative;
}

h2 , h1 {
 margin-top: 40px;
 margin-bottom: 40px;
}
h2 {
 text-align: center;
 font-size: 3em;
}
h3 {
 margin-top: 0;
 padding-top: 20px;
}

.jumbotron {
 background-color: #333;
 background-image: url('../images/banner.jpg');
 background-size: cover;
 background-position: left top;
 color: #fff;
 height: 600px;
 text-align: right;
}

.clock {
 color: #777;
 text-align: center;
 width: 200px;
 padding:10px;
 font-size: 18px;
 line-height: 1em;
 position: relative;
 box-shadow: 1px 1px 10px #888888;
 font-family: "stencil";
 margin: 45px auto;
 border: 1px solid #333;
 -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
  cursor: default;
}
.clock.large {
 width: 260px;
 padding: 40px;
 margin: 15px auto;
}
.clock.round {
 width: 290px;
 padding: 55px;
 margin: 0 auto;
 border-radius: 50%;
}
.clock .top {
 top: 2px;
}
.clock .bottom {
 bottom: 2px;
}
.clock .left {
 left: 2px;
}
.clock .right {
 right: 2px;
}
.clock.large .top {
 top: 7px;
}
.clock.large .bottom {
 bottom: 7px;
}
.clock.large .left {
 left: 7px;
}
.clock.large .right {
 right: 7px;
}
.clock.round .top {
 top: 47px;
}
.clock.round .bottom {
 bottom: 47px;
}
.clock.round .left {
 left: 47px;
}
.clock.round .right {
 right: 47px;
} 
.clock.black, #btnFaceBlack {
 background: rgb(69,72,77) !important;
 background: linear-gradient(135deg, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%) !important;
}
.clock.blue, #btnFaceBlue {
 background: rgba(44,159,203,1) !important;
 background: linear-gradient(135deg, rgba(44,159,203,1) 0%,rgba(0,100,180,1) 100%) !important;
}
.clock.green, #btnFaceGreen {
 background: rgba(65,133,133,1) !important;
 background: linear-gradient(135deg, rgba(105,190,190,1) 0%,rgba(0,123,123,1) 100%) !important;
}
.clock.grey, #btnFaceGrey {
 background: rgba(100,100,100,1) !important;
 background: linear-gradient(135deg, rgba(120,120,120,1) 0%,rgba(80,80,80,1) 100%) !important;
}
.clock.wood, #btnFaceWood {
 background: rgba(243,226,199,1 !important);
 background: linear-gradient(to right, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 19%,rgba(191,163,122,1) 42%,rgba(182,141,76,1) 69%,rgba(233,212,179,1) 100%) !important;
 background-image: url("../images/wood.jpg") !important;
}

.clock div {
 height: 10px;
 width: 10px;
 background: #ccc;
 position: absolute;
 border-radius: 50%;
 background: linear-gradient(135deg, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
 background-image: url("../images/spacer.jpg");
 background-size: cover;
 background-position: center;
 border: 1px solid #999;
 box-shadow: 1px 1px 2px #000;
}
.clock table {
 width: 180px;
 height: 180px;
}
.clock tr {
 height: 20px;
}
.clock td {
 width: 18px;
}
.clock .white .on {
 text-shadow: 0 0 20px #77f;
 color: #ddf;
}
#btnFontWhite {
 background: #eef !important;
 background: radial-gradient(#fff, #ddf) !important;
}
.clock .blue .on {
 text-shadow: 0 0 20px #339;
 color: #66f;
}
#btnFontBlue {
 background: #55f !important;
 background: radial-gradient(#99f, #55f) !important;
}
.clock .amber .on {
 text-shadow: 0 0 20px #c90;
 color: #fc6;
}
#btnFontAmber {
 background: #fc6 !important;
 background: radial-gradient(#ff9, #fc6) !important;
}
.clock .green .on {
 text-shadow: 0 0 20px #0f0;
 color: #9f9;
}
#btnFontGreen {
 background: #5f5 !important;
 background: radial-gradient(#cfc, #5f5) !important;
}
.clock .red .on {
 text-shadow: 0 0 20px #f00;
 color: #f66;
}
#btnFontRed {
 background: #f55 !important;
 background: radial-gradient(#f99, #f55) !important;
}

#inputFont {
 font-size: 1.4em;
 height: 2.2em;
}

#clock {
 width: 300px;
 padding: 15px;
 font-size: 27px;
 box-shadow: 2px 2px 20px #888888;
 border: 1px solid #333;
 margin: 68px auto 67px auto;
}
#clock.large {
 width: 390px;
 padding: 60px;
 margin: 22px auto;
}
#clock.round {
 width: 435px;
 padding: 83px;
 margin: 0 auto;
}
#clock .top {
 top: 3px;
}
#clock .bottom {
 bottom: 3px;
}
#clock .left {
 left: 3px;
}
#clock .right {
 right: 3px;
}
#clock.large .top {
 top: 11px;
}
#clock.large .bottom {
 bottom: 11px;
}
#clock.large .left {
 left: 11px;
}
#clock.large .right {
 right: 11px;
}
#clock.round .top {
 top: 70px;
}
#clock.round .bottom {
 bottom: 70px;
}
#clock.round .left {
 left: 70px;
}
#clock.round .right {
 right: 70px;
}
#clock div {
 height: 15px;
 width: 15px;
 border: 1px solid #999;
 box-shadow: 1px 1px 3px #000;
}
#clock table {
 width: 270px;
 height: 270px;
}
#clock tr {
 height: 30px;
}
#clock td {
 width: 27px;
}


@media (min-width: 700px) {

  #clock {
   width: 400px;
   padding: 20px;
   font-size: 36px;
   box-shadow: 2px 2px 20px #888888;
   margin: 90px auto;
   border: 1px solid #333;
  }
  #clock.large {
   width: 520px;
   padding: 80px;
   margin: 30px auto;
  }
  #clock.round {
   width: 580px;
   padding: 110px;
   margin: 0 auto;
  }
  #clock .top {
   top: 4px;
  }
  #clock .bottom {
   bottom: 4px;
  }
  #clock .left {
   left: 4px;
  }
  #clock .right {
   right: 4px;
  }
  #clock.large .top {
   top: 14px;
  }
  #clock.large .bottom {
   bottom: 14px;
  }
  #clock.large .left {
   left: 14px;
  }
  #clock.large .right {
   right: 14px;
  }
  #clock.round .top {
   top: 94px;
  }
  #clock.round .bottom {
   bottom: 94px;
  }
  #clock.round .left {
   left: 94px;
  }
  #clock.round .right {
   right: 94px;
  }
  #clock div {
   height: 20px;
   width: 20px;
   border: 2px solid #999;
   box-shadow: 2px 2px 4px #000;
  }
  #clock table {
   width: 360px;
   height: 360px;
  }
  #clock tr {
   height: 40px;
  }
  #clock td {
   width: 36px;
  }

}

.btn.active {
 background-image: inherit;
}

#buy {
 text-align: center;
}
#buy a.btn{
 font-size: 2em;
 padding: 0.5em;
}
#buy a.btn:hover{
 text-shadow: 0 0 10px rgba(255,255,255,0.4);
}


footer {
 background: #333;
 color: #eee;
 padding: 30px 0;
}


.stencil{
 font-family: "stencil";
}