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

 @font-face{
   font-family: FuenteIconos;
   src:url("fuentes/iconosWeb.otf");
}

 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

.izquierda{
   width: 30%;
   padding: 10px;
   text-align: center;
}

.izquierda p{
   text-align: left;
}

.crud{
   font-family: LogoMC, sans-serif;
   font-size: 3rem;
   text-align: center;
}

.crud a{
   font-family: LogoMC, sans-serif;
   font-size: 3rem;
   text-align: center;
   padding: 5px;
}

.derecha{
   width: 70%;
   display:flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
   /* background-image: url("../imag/alimentoscd.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%; */
   text-align: center;
}

.menucrud{
   height: 100%;
   padding-left: 30%;
   display:flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: flex-start;
   border-left:1px solid rgba(0,0,0,.7);
  
}

.menucrud a{
   padding: 3px;
   border:1px solid rgba(0,0,255,1);
   border-radius: 5px;
   font-size: 3rem;
}

.menucrud a:hover{
   border-top: 1px solid rgba(0,0,255,1);
   border-left: 1px solid rgba(0,0,255,1);
   border-right: 5px solid rgba(0,0,0,.5);
   border-bottom: 5px solid rgba(0,0,0,.5);
}

.tarjeta img{
   max-width: 95%;
}

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

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

   .derecha{
      width: 100%;
      background-image: url("../imag/alimentoscd.png");
       background-position: center;
       background-repeat: no-repeat;
       background-size: 90%;
      text-align: center;
      font-size: 1rem;
   }

   .izquierda{
      width: 100%;
      padding: 10px;
      text-align: center;
      font-size: 1rem;
   }
   
}

@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%;
   }
}

/*********************************************************************/
/*--------------------- Pantallas Móbiles-------------------------- */
/*********************************************************************/

@media screen and (max-width:768px){

   .izquierda{
      width: 100%;
      padding: 10px;
      text-align: center;
      font-size: .7rem;
   }
   
   .derecha{
      width: 100%;
      text-align: center;
   }

   .derecha img{
      width: 70%;
   }
   
}

@media screen and (max-width:500px){

   .izquierda{
      width: 100%;
      padding: 10px;
      text-align: center;
      font-size: 1rem;
   }
   
   .derecha{
      width: 100%;
      text-align: center;
   }
   
}