: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: #610B21;
  --letra-colorside: #ddd;
  --color-suave1: #EEEBDD;
  --color-suave2: #D8B6A4;
  --color-cafe: #630000;
  --color-negro: #000000;
  --color-azul: #0C3C54;
  --color-suavemorado: #fbf9ff;

  --color-coral: #F98484;
}

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

@font-face {
  font-family: SourceSansPro;
  src: url(../client/SourceSansPro-Regular.ttf);

  /*font-family: monofont;
  src: url(../../fontcapt/monofont.ttf);*/
  /*src: url(../client/Nunito-Regular.ttf);*/

  font-family: fuentemigra;
  src: url(../client/framdcn.ttf);

}



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

html {
  height: 100%;
}

body {
  /*font-family: "Arial Sans", sans-serif;*/
  font-family: "fuentemigra";

  font-size: 1.2rem;
  min-height: 100%;

  /*font-family: "Muli", sans-serif;
  font-weight: normal;
  font-style: normal;*/

  background: url(../../ima/bg3.png);
  
  /*background-size: 200%;*/

 /*background-repeat : no-repeat;*/
   /*background-size : contain;*/
}



.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;

}

.navbarmenu {
  grid-area: navbarmenu;
  /*box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.75);*/

  /*border-top: 1px solid  #5D6975;
  border-bottom: 1px solid  #5D6975;*/

  color: #5D6975;
  font-size: 2.4em;
  line-height: 1.4em;
  font-weight: normal;
  text-align: center;
  margin: 0 0 20px 0;
  background: url(../../ima/dimension.png);


  padding: 5px;

}

#imacalenda {
  display: none;
}

.sidebar {
  grid-area: sidebar;
  border-radius: 0 4px 0 0;
}



.main {
  grid-area: main;
  /* background-color: #f5f5f5;*/
}

.footer_imag {
  grid-area: footer_imag;
}

.footer {
  grid-area: footer;
  background-color: var(--menu-mobile-background-color);
  color: var(--color-suave2);
}

.grid-container {
  display: grid;
  gap: 0px;
  /*separacion entre cada elem grid*/
  grid-template:

    /*"header" 150px "navbarmenu" 80px
    "sidebar" auto
    "main" 0 "footer" 100px;*/

    /*"header" 150px
    "navbarmenu" 80px
    "sidebar" auto
    "main" auto "footer" 100px;*/


    "header " 200px
    "navbarmenu " 49px
    "sidebar" auto
    "main" auto
    "footer_imag" auto
    "footer" auto;
}





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

.sidebar label {
  float: left;
  font-size: 50px;
  font-weight: bold;
  /*margin: 6px 10px;*/
  padding: 5px;
  cursor: pointer;


}

.divsidebtn {

  /*original para botones de side*/
  /*display: flex;
  gap: 10px;
  flex-direction: column;*/



  /*display: none;*/

  margin-top: 55px;
  position: absolute;

  height: 100vh;
  width: 100%;

  left: 0;
  transition: all 0.5s;

  transform: translateX(-105%);
  z-index: 10;
  background-color: rgb(150, 143, 143);
  border-top-right-radius: 10px;
  /* padding: 10px;*/

}

#menu-sidecheck {
  display: none;
}


#menu-sidecheck:checked~.divsidebtn {
  transform: translateX(0%);
}

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



/*******side icon*********/

.icon-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;

  text-align: start;


  /*width: 50px;*/
  height: 70px;
  /*color: #333333;*/
  /*background:gray;*/
  border: none;
  outline: none;
  /* border-radius: 5%;*/

  padding: 15px;


  box-shadow: rgba(99, 99, 99, 0.2) 1px 12px 8px 1px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  background-color: var(--color-azul);
  color: #ffff;
  /*var(--color-suave2);*/
  font-size: 18px;


}

.icon-button:hover {
  cursor: pointer;
  /*cursor:default;*/
  background-color: var(--color-cafe);

  transform: translateX(10px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);

}

.icon-button:active {
  background: palevioletred;
}

.color-rosa-png{
  filter: brightness(0) saturate(100%) invert(59%) sepia(53%) saturate(591%) hue-rotate(315deg) brightness(99%) contrast(90%);
}

.icon-button__punto {
  position: absolute;
  top: 10px;
  right: 30px;

  width: 45px;
  height: 55px;

  /*background: red;*/
  color: coral;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-radius: 50%;*/
  padding: 5px;
  font-size: 50px;


}


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




.side-list-active {
  /*background-color: var(--color-suave2);*/
  color: var(--color-cafe);
}

.side-list-active a {
  /*background-color: var(--color-suave2);*/
  color: #eb53a1;
}





.divvideoyt {
  width: 500px;
  margin: auto
}






@media (min-width: 600px) {
  .grid-container {
    grid-template:

      "header  header" 100px
      "navbarmenu  navbarmenu" 80px
      "sidebar" auto
      "main main" auto
      "footer_imag footer_imag" auto
      "footer  footer" 100px /
      200px auto;
  }



  .sidebar {
    /*background-color: green;*/
    margin-bottom: 70px;
  }




  .slider_ini {
    /*margin-top: 130px;*/

    color: #5D6975;
    font-size: 2.4em;
    line-height: 1.4em;
    font-weight: normal;
    text-align: center;
    margin: -30px 0 10px 0;



  }


  .icon-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;

    text-align: start;


    /*width: 50px;*/
    height: 70px;
    /*color: #333333;*/
    /*background:gray;*/
    border: none;
    outline: none;
    /* border-radius: 5%;*/
    padding: 15px;


    /*box-shadow: rgba(99, 99, 99, 0.2) 1px 12px 8px 1px;*/
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: var(--color-azul);
    color: #ffff;
    /*var(--color-suave2);*/
    font-size: 18px;


  }


}

@media (min-width: 900px) {
  .grid-container {
    grid-template:
      "header  header" 250px
      "navbarmenu  navbarmenu" 48px
      "sidebar main" auto "footer_imag footer_imag" auto
      "footer footer" 80px / 20% auto;

  }

  #imacalenda {
    display: block;
  }



  .div_footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    position: relative;

  }


  .footer_imag img {
    margin-bottom: -14px;

  }

  .footer_imag i {
    font-size: 15px;
  }

  .foot_ico {

    display: flex;
    flex-direction: row;
    gap: 5px;
    position: absolute;
    right: 0;

    padding-top: 15px;

    align-items: center;


  }


  .foot_text {
    text-align: left;
    border-left: 2px solid var(--color-suave2);
    color: #ddd;
    padding-left: 15px;

  }

  .sidebar label {
    display: none;
  }


  .divsidebtn {
    display: flex;
    gap: 1px;
    flex-direction: column;
    position: static;
    /* top: 210px;
    left: 0;*/
    width: 100%;
    height: 100vh;
    float: left;
    transition: all 0.5s;
    transform: translateX(0%);

    background-color: transparent;
  }

  .slider_ini {
    margin-top: 15px;
  }


  .sidebar .textsidebtn {
    font-size: 18px;
  }

  .header {
    display: block;
  }


  .mapa-container {
    display: block;
  }

  .side-cont {
    margin-top: 18px;
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
  }


  .navbarmenu {
    display: flex;
    justify-content: space-between;

  }


  .icon-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;

    text-align: start;


    /*width: 50px;*/
    height: 70px;
    /*color: #333333;*/
    /*background:gray;*/
    border: none;
    outline: none;
    /* border-radius: 5%;*/
    padding: 15px;


    box-shadow: rgba(99, 99, 99, 0.2) 1px 12px 8px 1px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    background-color: var(--color-azul);
    color: #ffff;
    /*var(--color-suave2);*/
    font-size: 18px;


  }
}