.background-centered-content {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover; }

.centered-content {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width: 100%;
  max-height: 100%;
  overflow: hidden; }

.clock {
  padding-left: 10%; }

@media all and (orientation: portrait) {
  .clock {
    padding-left: 6%; }

  .centered-content {
    width: 100%; } }
@media all and (orientation: landscape) {
  .clock {
    padding-left: 15%; }

  .centered-content {
    width: 100%; } }
@media (min-width: 768px) and (max-width: 959px) {
  .zoomfix {
    zoom: 80%; }

  .centered-content {
    width: 60%; }

  .flip-clock-label {
    display: none; }

  .centered-content > h1 {
    font-size: 2.5em; } }
@media (min-width: 480px) and (max-width: 767px) {
  .zoomfix {
    zoom: 45%; }

  .centered-content {
    width: 60%; }

  .flip-clock-label {
    display: none; }

  .centered-content > h1 {
    font-size: 2.5em; } }
@media (max-width: 479px) {
  .centered-content {
    width: 75%; }

  .zoomfix {
    zoom: 39%; }

  .flip-clock-label {
    display: none; }

  .centered-content > h1 {
    font-size: 1.75em; } }