.content {
    display: flex;
    align-items: center;
}

.content .widget {
    padding: 24px;
    margin: 24px;
}

.content .widget.clock {
    position: relative;
    width: 384px;
    height: 384px;
    border-radius: 100%;
    box-sizing: border-box;
    background-color: #2e44a5;
}

.content .widget.clock#okinawa,
.content .widget.clock#amalfi {
    width: 240px;
    height: 240px;
}

.content .widget.clock#okinawa:before,
.content .widget.clock#amalfi:before {
    border-width: 3px;
}

.content .widget.clock#okinawa .hand,
.content .widget.clock#amalfi .hand {
    height: 3px;
    top: 118.5px;
    transform-origin: right 1.5px;
}

.content .widget.clock#okinawa .hand.seconds,
.content .widget.clock#amalfi .hand.seconds {
    display: none;
}

.content .widget.clock:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 6px solid #FFF;
    border-radius: 100%;
    box-sizing: border-box;
}

.content .widget.clock .shadow {
    content: "";
    width: 100%;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    transform: rotate(-45deg);
    transform-origin: 50% 0%;
    opacity: 0.3;
    z-index: -1;
}

.content .widget.clock .hand {
    height: 6px;
    position: absolute;
    top: 189px;
    background-color: #FFF;
    border-radius: 100% 0% 0% 100%;
    transform-origin: right 3px;
    transition: all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s;
}

.content .widget.clock .hand.seconds {
    width: 45%;
    left: 5%;
    opacity: 0.25;
}

.content .widget.clock .hand.minutes {
    width: 35%;
    left: 15%;
    opacity: 0.5;
}

.content .widget.clock .hand.hours {
    width: 25%;
    left: 25%;
    opacity: 0.75;
}

.content .widget.clock .hand-cap {
    width: 5%;
    height: 5%;
    position: absolute;
    top: 47.5%;
    left: 47.5%;
    background-color: #FFF;
    border-radius: 100%;
}

.content .widget label {
    display: block;
    width: 100%;
    position: absolute;
    top: -24px;
    left: 0;
    font-family: sans-serif;
    font-weight: 200;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 4px;
    color: #FFF;
    opacity: 0.5;
}