:root{
  /*
    --theme-color:white;
    --primary-color:#D5137F;
    --secundary-color:#610B21;
    --text-color-inverse:white;
    --text-color:rgb(29, 28, 28);
    --navbar-shallow-color:rgb(122, 111, 111);
    --navbar-shadowmenu-color:#f8f9fa;
    --menu-mobile-background-color:#610B38;

    --profile-suave-color:#F2F2F2;
    --profile-border-color:#E6E6E6;

    --fondo-azul-color: #2d2d4b;
    --letra-colorside: #ddd;

     --cafe-claro:#EEEBDD;*/

     --theme-color:white;
     --primary-color:#9C0F48;
     --secundary-color:#610B21;
     --text-color-inverse:white;
     --text-color:rgb(29, 28, 28);
     --navbar-shallow-color:rgb(122, 111, 111);
     --navbar-shadowmenu-color:#f8f9fa;
     --menu-mobile-background-color:#610B38;
 
     --profile-suave-color:#F2F2F2;
     --profile-border-color:#E6E6E6;
 
     --fondo-azul-color: #470D21;
     --letra-colorside: #ddd;
 
      --cafe-claro:#EEEBDD;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    height: 100%;
  }
  
  body {
    font-family: "Public Sans", sans-serif;
    font-size: 1.2rem;
    min-height: 100%;
  }


  
  .grid-container > * {
   /* box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);*/
    /*border-radius: 4px;*/
    padding: 10px;
    text-align: center;
  }
  
  .header {
    grid-area: header;
    /*background-color: #85aedd;*/
    
  }
  
  .navbar {
    grid-area: navbar;
    /*background-color: #afd6af;*/
  }
  
  .sidebar {
    grid-area: sidebar;
    background-color: var(--fondo-azul-color);
    /*background-color: #D5137F;*/
    color: var(--letra-colorside);
    overflow-y: auto;
    grid-gap: 21px 82%;

   /* position: relative;*/
   
  }

  .side-tempicon{
    display: none;
  }

  
  .main {
    grid-area: main;
    background-color: var(--navbar-shadowmenu-color);

  /*************/
    /*width: 70%;
    height: 100%;
    background-color: #ccc;
    transition: 1s ease;*/
    /***********/
  }

 
  
  .footer {
    grid-area: footer;
    background-color: var(--fondo-azul-color);
    color: var(--text-color-inverse);

   
    
  }


  .footer-text{
    font-size: 12px;
       max-width: 900px;
      margin: 0 auto; /* top-bottom izq-der */
   
      
  }
  
  /*******/
  .horizontal-padding {
    padding-left: 25px;
    padding-right: 25px;

}
.vertical-padding{
    padding-top: 25px;
    padding-right: 25px;
}
/*******/
  
  .grid-container {
    display: grid;
    /*gap: 10px;*/
    gap: 0px;
    grid-template:
      "header"  0px
      "navbar"  50px
      "sidebar" 100px
      "main"    auto      
      "footer"  80px;      
  }

  
  .elmenu{
    display: none;
  }


  @media (min-width: 600px) {
    .grid-container {
      /* grid-template-columns: 200px auto;
      grid-template-rows: 100px 50px auto 100px;
      grid-template-areas: 
      "header  header"
      "navbar  navbar"
      "sidebar main"
      "footer  footer"; */
  
      grid-template:
        "header  header" 0px
        "navbar  navbar" 50px
        "sidebar main"   auto
        "footer  footer" 80px /
        20%    auto;
    }

    .horizontal-padding {
        padding-left: 70;
        padding-right: 70;
    
    }
    .vertical-padding{
        padding-top: 70;
        padding-right: 70;
    
    }

  
    .side_chec{
      display: none;
    }

   
  }
  
  @media (min-width: 900px) {
   
    .grid-container {
      grid-template:
      "header  header" 100px
      "navbar  navbar" 50px
      "sidebar main"   auto
      "sidebar  footer" 80px /
      20%    auto;
      
    }


    /*************************/
    .elmenu{
      display: block;
    }

    .gridContrae{
      grid-template:
      "header  header" 100px
      "navbar  navbar" 50px
      "sidebar main"   auto
      "sidebar  footer" 80px /
      90px   auto;

      transition: 0.2s;
    }

    .sidebar-contenido-quita{
      /*display: block;*/
     /* max-width: 90%;*/
     /* background-color: green;*/
     display: none;
    }

    
   

    .side-tempicon-pone{
      display: block;
    }
    
    .rotate{
      transform: rotate(180deg); 
      transition: .5s;
     
    }

  /****************/
    

    .navbar{
        display: flex;  
        justify-content: space-between;
    
    }

   

    .horizontal-padding {
        padding-left: 70;
        padding-right: 70;
    
    }
    .vertical-padding{
        padding-top: 70;
        padding-right: 70;
    
    }

   
    

  }