/* ==========================================================
   FAFA - ZURICH CLOCK
   ========================================================== */

#zurich-clock-widget{

    width:220px;

    margin:0 auto;

    text-align:center;

    font-family:Georgia,serif;

}


/* ==========================================================
   KLOK
   ========================================================== */

#zurich-clock-widget .clock{

    position:relative;

    width:220px;

    margin:0 auto;

}

#zurich-clock-widget img{

    display:block;

    width:100%;

    height:auto;

}

#zurich-clock-widget svg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:visible;

}


/* ==========================================================
   WIJZERS
   ========================================================== */

#zurich-clock-widget .hour-hand{

    stroke:#111;

    stroke-width:8;

    stroke-linecap:round;

}

#zurich-clock-widget .minute-hand{

    stroke:#111;

    stroke-width:5;

    stroke-linecap:round;

}

#zurich-clock-widget .center-cap{

    fill:#111;

}


/* ==========================================================
   PENDEL
   ========================================================== */

#zurich-clock-widget .pendulum{

    transform-origin:50% 0%;

    animation:swing 1.8s ease-in-out infinite alternate;

}

@keyframes swing{

    from{
        transform:rotate(-4deg);
    }

    to{
        transform:rotate(4deg);
    }

}


/* ==========================================================
   BIJSCHRIFT
   ========================================================== */

#zurich-clock-widget .caption{

    margin-top:10px;

    font-size:22px;

    font-weight:bold;

    color:#3d2a18;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

    #zurich-clock-widget{

        width:200px;

    }

    #zurich-clock-widget .clock{

        width:200px;

    }

    #zurich-clock-widget .caption{

        font-size:20px;

    }

}