@charset "utf-8";
@font-face{
   font-family: LogoMC;
   src: url("fuentes/DGA_JennaSue.otf")
}

.clock {
    /* margin: auto; */
    width: 45%;
    max-width: 50%;
    background-image: url("../imag/alimentosr.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    fill:transparent;
  }

  .cubiertoizq, .cubiertodch{
    width: 20%;
    max-width: 23%;
  }

  .outer-circle{
    fill:rgba(255,255,255,.2);
  }
  .center-circle {
    fill:rgba(100,100,100,1);
  }
  
  .hours,
  .minutes,
  .seconds {
    transform-origin: center;
    stroke-linecap: round;
  }
  
  .hours {
    stroke: rgba(0,0,0,1);
    stroke-width: 3px; 
  }
  .minutes {
    stroke-width: 2px; 
    stroke: rgba(0,0,0,1);
    /* transition: transform 1s ease-in-out; */
  }
  .seconds {
    stroke: rgba(255,0,0,1);
  }
  
  .line1, .line2, .line3, .line4, .line5, .line6, .line7, .line8, .line9, .line10, .line11{
    stroke-width: 1px;
    stroke:   rgba(3, 3, 144,1); /*rgba(100,100,100,.7); */
    stroke-linecap:square;
    transform-origin: center;
  }

 .line0, .line3, .line6, .line9{
    stroke-width: .4px;
    stroke:  rgba(3, 3, 144,1); /*rgba(100,100,100,.7);*/
    font-size: .4rem;
  } 

  .line1{
      transform: rotate(30deg);
  }
  .line2{
    transform: rotate(60deg);
  }

  .line3{
    transform: rotate(90deg);
  }
  
  .line4{
    transform: rotate(120deg);
  }

  .line5{
    transform: rotate(150deg);
  }
  
  .line6{
    transform: rotate(180deg);
  }
  
  .line7{
    transform: rotate(210deg);
  }
  
  .line8{
    transform: rotate(240deg);
  }
  
  .line9{
    transform: rotate(270deg);
  }
  
  .line10{
    transform: rotate(300deg);
  }
  
  .line11{
    transform: rotate(330deg);
  }

  .fechahoyt, .fechahoym{
    stroke: rgba(0,0,0,1);
    stroke-width: .3px;
    font-family: LogoMC, sans-serif;
    font-size: .7rem;
    fill:rgba(0,0,255,1);
    background: rgba(255,255,255,.7);
  }

  /*********************************************************************/
/*--------------------- Pantallas Tabletas-------------------------- */
/*********************************************************************/

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape){ 

  .clock {
    max-width: 60%;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait){ 
   .izquierda{
      width: 100%;
      padding: 10px;
      text-align: center;
      font-size: 1rem;
   }
   
   .derecha{
      width: 100%;
      text-align: center;
   }

   .derecha img{
      width: 70%;
   }
}