body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 99vh;
    background: #000;
 }

#navigation {
    -webkit-transition: all 1.1s ease 0s;
       -moz-transition: all 1.1s ease 0s;
        -ms-transition: all 1.1s ease 0s;
         -o-transition: all 1.1s ease 0s;
            transition: all 1.1s ease 0s;

    background-color: rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    padding: 9px 0;
}
#navigation:hover {
-webkit-transition: all 1.1s ease 0s;
       -moz-transition: all 1.1s ease 0s;
        -ms-transition: all 1.1s ease 0s;
         -o-transition: all 1.1s ease 0s;
            transition: all 1.1s ease 0s;

    background-color: rgba(0,0,0,0.5);
	    box-shadow: 0 1px 2px rgba(0, 0, 0, 1);
  }
  
  #navigation.animated-header {
    padding: 25px 0;
}

h1.navbar-brand {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
 }

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
}
.navbar-inverse .navbar-nav > li > a:hover {
    color: #e79b1e;
   }

 
.dalearc {
	  border-radius: 8px;
}


.clock {
    display: flex;
    width: 380px;
    height: 380px;
    justify-content: center;
    align-items: center;
  background: url(http://www.daleirvine.co.uk/img/dale-clock4.png);
    background-size: 100%;
    border: 4px solid #3493f5;
    border-radius: 50%;
    box-shadow: -2px -2px 3px rgba(251,178,11, 0.8),
        inset 2px 2px 3px rgba(251,178,11, 0.4),
        inset -2px -2px 3px rgba(251,178,11, 0.8),
        2px 2px 3px rgba(251,178,11, 0.4);
}

.clock:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #3493f5;
    border-radius: 50%;
    z-index: 999;
}
.clock:hover {
  border: 3px solid #3493f5;
}

.clock .hour,
.clock .min,
.clock .sec {
    position: absolute;
}

.clock .hour, .hr {
    width: 190px;
    height: 190px;
}

.clock .min, .mn {
    width: 260px;
    height: 260px;
 }

.clock .sec, .sc {
    width: 252px;
    height: 252px;
 }

.hr, .mn, .sc {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    position: absolute;
    border-radius: 50%;
  }

.hr:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 80px;
    background: #fca237;
    z-index: 9;
    border-radius: 9px 9px 0 0;
    box-shadow: 2px 2px 2px rgb(52,147,245, 0.9);
}

.mn:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 118px;
    background: #fca237;
    z-index: 10;
    border-radius: 6px 6px 0 0;
    box-shadow: 2px 2px 2px rgb(52,147,245, 0.8);
}

.sc:before {
    content: "";
    position: absolute;
    width: 2px;
    height:150px;
    background: #3493f5;
    z-index: 11;
    border-radius: 6px 6px 0 0;
    box-shadow: 1px 2px 2px rgb(245,186,52, 0.8);
 }