: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-gris: #e6e6e6;
  --color-coral: #F98484;
  --color-verde: #00c4c4;
  --color-morado: #850073;
  --color-naranja: #F48279;

  --strong-z-index: 9;
  --medium-z-index: 4;
  --small-z-index: 1;
}

* {
  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: UniviaPro;
  src: url(../fonts/UniviaPro-Regular.otf),
  url(../fonts/UniviaPro-Black.otf);

  font-family: Alkatra;
  src: url(../fonts/Alkatra-Regular.ttf),
  url(../fonts/Alkatra-Medium.ttf),
  url(../fonts/Alkatra-SemiBold.ttf),
  url(../fonts/Alkatra-Bold.ttf);

}



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

html {
  height: 100%;
}

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

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

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

  /* background: url(../../ima/bg3.png); */
  background-color: var(--theme-color);
  
  /*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;
  background: url(../../ima/ENCABEZADO.jpg);
  background-repeat: no-repeat;
  background-size: cover;
} */

.header {
  position: relative; 
  grid-area: header;
  height: 300px; 
  overflow: hidden; 
  background: url(../../ima/ENCABEZADO_DOS.jpg) no-repeat;
}

.header::after {
  content: "";
  position: absolute;
 /*  bottom: -20px; */ 
  bottom: -8px; 
  left: 0;
  width: 100%;
  height: 100%; 
  background: url(../../ima/NUBE_INFERIOR.png) repeat-x bottom; 
  background-repeat: repeat-x; 
  background-position: bottom; 
}

.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;
  position: fixed;
  font-family: "Alkatra", sans-serif;
  z-index: var(--strong-z-index);
}



.main {
  grid-area: main;
  /* background-color: #f5f5f5;*/
  min-height: 20em;
  max-width: 100dvw;
}

.footer_imag {
  grid-area: footer_imag;
}

.footer {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-area: footer;
  background: var(--color-morado);
  color: var(--color-suave2);
}

.footer_manitas_greca {
  display: flex;
  flex-direction: column;
  text-align: start;
  justify-content: end;
  background-color: var(--color-morado);
}

.manos_footer_image {
  width: 50%;
}

.footer_greca {
  background: url(../../ima/FOOTER_GRECAS.jpg) repeat;
  height: 2.2em;
}

.footer_items {
  flex: 1;
  display: flex;
  flex-flow: wrap column;
  gap: 1.5em;
  color: var(--theme-color);
  margin-top: 2em;
}

.footer_items_contact {
  max-width: 16em;
  margin: auto;
  text-align: left;

}

.footer_items_privacy {
  text-decoration: none;
  color: var(--theme-color);
}

.icons_text {
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  justify-content: start;
  gap: 1em;
  font-weight: 100;
}

.social_media-icons, .footer_items_icons {
  width: 24px;
  height: 24px;
}

.social_media_icons {
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.social_media_icons_text {
  font-size: 1.3em;
  font-weight: 100;
}

.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 " 300px
    "navbarmenu " 49px
    "sidebar" auto
    "main" auto
    "footer_imag" 40px
    "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: 40%;
  position: absolute;

  height: 100vh;
  width: 100%;

  left: 0;
  transition: all 0.5s;

  transform: translateX(-105%);
  z-index: 10;
  background-color: rgba(150, 143, 143,0.8);
  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: 55px;
  /*color: #333333;*/
  /*background:gray;*/
  border: none;
  outline: none;
  /* border-radius: 5%;*/
  /* padding: 15px; */
  gap: 1em;
  /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  background-color: var(--color-gris);
  color: var(--color-negro);
  /*var(--color-suave2);*/
  font-size: 18px;


}

.icon-button:hover, .icon-button-second:hover {
  cursor: pointer;
  /*cursor:default;*/
  background-color: var(--color-verde);
  color: var(--color-suave1);
  transform: translateX(10px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);

}

.icon-button-active {
  background-color: var(--color-verde);
  color: var(--theme-color);
}

.icon-button-second:hover, .icon-button-second-active {
  background-color: var(--color-morado);
  color: var(--theme-color);
}

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


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


}
/*** Circle sidebar icon **/
.circle-sidebar-button {
  min-width: 3em;
  min-height: 100%;
  /* padding: 2em; */
  border-top-right-radius: 3em;
  border-bottom-right-radius: 3em;
  /* margin-left: -1em; */
}

.circle-sidebar-first, .circle-sidebar-button-active {
  background-color: var(--color-verde);
}

.circle-sidebar-second, .circle-sidebar-second-active {
  background-color: var(--color-morado);
}

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




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

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

/* SLIDERS */
.slider_ini {
  max-width: 25em;
}

/* buttons options in home */
.buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 10em;
  font-family: 'Alkatra', sans-serif;
}

.buttons-circle {
  cursor: pointer;
  text-decoration: none;
  color: var(--color-negro);
}

/* children section **/
.children {
  position: relative;
}

.children-icon {
  position: absolute;
}
.children-left {
  left: 0;
  width: 180px;
}
.children-right {
  right: 2%;
  width: 148px;
}
/* logo quienes somos */
.logo_girl {
  transform: rotateY(190deg);
}
.quienes_somos-description {
  text-align: justify;
  font-weight: 300;
  padding: 2em;
}
/* LAPTOPS */
@media screen and (max-width: 1440px) {
  .buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* MOBILE */
@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 {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }


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

  }

  #imacalenda {
    display: block;
  }



  .div_footer {
    display: flex;
    flex-flow: wrap 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;
    margin-top: 120px;
    /* 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: 14px;
    width: 100%;
    text-align: center;
    font-weight: lighter;
  }

  .sidebar .textsidebar_first {
    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 {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    width: 16em;
  }
}

@media screen and (max-width: 900px) {
  .footer_items_contact {
    max-width: fit-content;
    text-align: center;
  }

  .icons_text {
    justify-content: center;
  }
  .buttons {
    grid-template-columns: repeat(1,1fr);
  }
}

@media screen and (max-width: 500px) {
  .icon-button {
    height: 70px;
    font-size: 1em;
  }
  .children-left {
    width: 120px;
  }
  .children-right {
    width: 100px;
  }
}