/* Colores generales*/
:root {
    --projectCardBackgroud: #012362;
    --projectCardHeadBackground: #033385;
    --projectCardHeadColor: #FFFFFF;
    --projectCardBodyBackground:  #012362;
    --projectCardBodyColor: #FFFFFF;
    --projectCardBodyGroupBackground:  #012362;
    --projectCardFootBackground: #012362;
    --projectCardFootButtonBackground: #033385;
    --projectCardFootButtonColor: #FFFFFF;
    --projectCardFootButtonHover:  #033a9a;

   }



/* ---------------Animations---------------- */
  .slit-in-vertical {
      -webkit-animation: slit-in-vertical 0.45s ease-out both;
              animation: slit-in-vertical 0.45s ease-out both;
  }
  
  @-webkit-keyframes slit-in-vertical {
    0% {
      -webkit-transform: translateZ(-800px) rotateY(90deg);
              transform: translateZ(-800px) rotateY(90deg);
      opacity: 0;
    }
    54% {
      -webkit-transform: translateZ(-160px) rotateY(87deg);
              transform: translateZ(-160px) rotateY(87deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(0) rotateY(0);
              transform: translateZ(0) rotateY(0);
    }
  }
  @keyframes slit-in-vertical {
    0% {
      -webkit-transform: translateZ(-800px) rotateY(90deg);
              transform: translateZ(-800px) rotateY(90deg);
      opacity: 0;
    }
    54% {
      -webkit-transform: translateZ(-160px) rotateY(87deg);
              transform: translateZ(-160px) rotateY(87deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(0) rotateY(0);
              transform: translateZ(0) rotateY(0);
    }
  }
  /*
  /*
  /* OVERLAY*/
  /*----Fondo parte trasera de la cartilla.-----*/
  #dialogOverlay{
    display: none;
    opacity: 0.7;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #707070b7; 
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  /*
  /*
  /*-- DIALOG BOX --*/
  #dialogBox{
    box-sizing: border-box;
    position: fixed;
    width: auto;
    height: calc(90%);
    max-height: 450px;
    background: var(--projectCardBackgroud); 
    overflow: hidden;
    border-radius:7px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.575);
    transition: 0.3s;
    z-index: 10;
    top:0;
    left: 0;
    right: 0;
    margin: 5px;
    display: none; 
    grid-template-columns: 1fr; 
    grid-template-rows: 50px 1fr 50px; 
    gap: 0px 0px; 
    grid-template-areas: 
      "head1"
      "body1"
      "foot1";
  }
  
    #dialogBox:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);
    }
  
    #dialogBox > #dialogBoxHead{
      grid-area: head1; 
      text-transform: uppercase;
      font-size:19px;
      font-family: inherit;
      font-weight:bold;
  
      background: var(--projectCardHeadBackground); 
      color:var(--projectCardHeadColor);     
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    #dialogBox > #dialogBoxBody{ 
      grid-area:body1;
      padding:20px; 
      color:#FFF;
      display: flex;
      flex-direction: column;
      align-items: center; 
      opacity: 0.8;    
    }
    #dialogBox > #dialogBoxBody > #dialogBoxBodyImage{
      max-height: 250px;
    }
    #dialogBox > #dialogBoxBody > #dialogBoxBodyMessage{
      margin: 10px;
      padding: 5px;
      background: var(--projectCardBodyGroupBackground); 
      color:var(--projectCardBodyColor);
      border-radius: 7px;
      letter-spacing: normal;
      font-family: regularFont;
      text-align: center;

    }
  
    #dialogBox > #dialogBoxFoot{ 
      grid-area: foot1;
      background: var(--projectCardFootBackground);    
      height: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
     }
  /*
  /*
  /* DIALOG BOX FOOT */
  .dialog-box-foot-button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    padding: 0 16px;
    min-width: 250px;
    height: 36px;
    vertical-align: middle;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    color: var(--projectCardFootButtonColor);
    background-color: var(--projectCardFootButtonBackground);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    overflow: hidden;
    outline: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
  }
  .dialog-box-foot-button:hover{
    background-color: var(--projectCardFootButtonHover);  
  }