*{
    box-sizing: border-box;
    padding: 0%;
    margin: 0%;
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'IBM Plex Sans', sans-serif; */
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    transition: 0.75s;

}

    

#header1{
    display:flex;
    justify-content: space-evenly;
    padding:10px 10px 10px 50%;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

}
#header1 a{
    font-family: 'Roboto', sans-serif;
    color: #393939;
    text-decoration-line: none;
}
#header1 a:hover{
    color: #393939b9 ;

}
#header1 i{
    width: 15px;
}

#header2{
    position: absolute;
    z-index: 101;
    top: 40px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    width: 100%;
    display: flex;
}
#header2 a{
    color: white;
}
#header2 #centroBorges{
    
    color: red;
}
#logo{
    width: 20%;
    padding-left: 30px;
}
#header3{
    display: flex;
    
    padding: 20px 20px 20px 40%;
    font-size: larger;

}
#nav{
    margin-top: 40px;
    width: 100%;
    
}
.navTri{

    width: 60%;
    height: 40px;
    background-color:#393B3E ;
    border-radius: 2px;
}
.navTriangle{
    position: absolute;

    width: 45%;
    height: 0px;
    border-bottom: 40px solid red;
    ;
    border-right: 150px solid transparent;
}
.textuli{
    position: absolute;
    padding-left: 50% ;
    padding-top: 5px;
    color: white;
    font-size: x-large;
}

#nav2{
    margin-top: 40px;
    width: 100%;
    
}
.navTri2{

    width: 60%;
    height: 40px;
    background-color:#393B3E ;
    border-radius: 2px;
    position: absolute;
    right: 0%;
}
.navTriangle2{
    position: absolute;
    right: 0%;
    width: 45%;
    height: 0px;
    border-bottom: 40px solid #00AF85;
    ;
    border-left: 150px solid transparent;
}
.textuli2{
    position: absolute;
    padding-left: 50% ;
    padding-top: 5px;
    color: white;
    font-size: x-large;
}

#nav3{
    width: 100%;
    
}
.navTri3{

    width: 60%;
    height: 40px;
    background-color:#393B3E ;
    border-radius: 2px;
}
.navTriangle3{
    position: absolute;

    width: 45%;
    height: 0px;
    border-bottom: 40px solid #4EC7E1;
    border-right: 150px solid transparent;
}
.textuli3{
    position: absolute;
    padding-left: 48% ;
    padding-top: 5px;
    color: white;
    font-size: x-large;
}

#nav4{
    margin-top: 40px;
    width: 100%;
    
}
.navTri4{

    width: 60%;
    height: 40px;
    background-color:#393B3E ;
    border-radius: 2px;
    position: absolute;
    right: 0%;
}
.navTriangle4{
    position: absolute;
    right: 0%;
    width: 45%;
    height: 0px;
    border-bottom: 40px solid #DEE14E;
    border-left: 150px solid transparent;
}
.textuli4{
    position: absolute;
    padding-left: 45% ;
    padding-top: 5px;
    color: white;
    font-size: x-large;
}

#nav5{
    margin-top: 80px;
    width: 100%;
    
}
.navTri5{

    width: 60%;
    height: 40px;
    background-color:#393B3E ;
    border-radius: 2px;
}
.navTriangle5{
    position: absolute;

    width: 45%;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 150px solid transparent;
}
.textuli5{
    position: absolute;
    padding-left: 50% ;
    padding-top: 5px;
    color: white;
    font-size: x-large;
}
#contenedorNovedades{
    width: 100%;
    padding:20px;
    
}
#containerNov{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0px;

}
.nov{
    filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.25));
    transition: 0.4s;
}
.nov:hover{
    opacity: 80%;
}


#contenedorLocales{
    width: 100%;
    margin-top: 150px;

}
#containerLocales{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    text-align: center;
}
.locales{
    padding: 10px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    border: black 2px dotted;
    border-radius: 5px;
    
}
.locales img{
    opacity:70%;
}

.locales img:hover{
    opacity: 100%;
    transition: 0.3s;
}

#DIV_1 {
    align-items: center;
    block-size: 190px;
    border-block-end-color: rgb(61, 71, 240);
    border-block-start-color: rgb(61, 71, 240);
    border-inline-end-color: rgb(61, 71, 240);
    border-inline-start-color: rgb(61, 71, 240);
    box-sizing: border-box;
    caret-color: rgb(61, 71, 240);
    column-rule-color: rgb(61, 71, 240);
    display: flex;
    height: 190px;
    inline-size: 260px;
    justify-content: center;
    margin-inline-end: 18.25px;
    margin-inline-start: 18.25px;
    perspective-origin: 130px 95px;
    text-align: center;
    text-decoration: none solid rgb(61, 71, 240);
    text-size-adjust: 100%;
    transform-origin: 130px 95px;
    user-select: none;
    width: 260px;
    background: rgba(0, 0, 0, 0) url("") repeat scroll 0% 0% / cover padding-box border-box;
    border: 0px none rgb(61, 71, 240);
    font: 16px / 24px "Noto Sans JP", sans-serif;
    margin: 0px 18.25px;
    outline: rgb(61, 71, 240) none 0px;
}/*#DIV_1*/

#IMG_2 {
    border-block-end-color: rgb(61, 71, 240);
    border-block-start-color: rgb(61, 71, 240);
    border-inline-end-color: rgb(61, 71, 240);
    border-inline-start-color: rgb(61, 71, 240);
    box-sizing: border-box;
    caret-color: rgb(61, 71, 240);
    color: rgb(61, 71, 240);
    column-rule-color: rgb(61, 71, 240);
    display: block;
    inline-size: 180px;
    max-inline-size: 100%;
    max-width: 100%;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    padding-block-end: 39px;
    perspective-origin: 90px 43.625px;
    text-align: center;
    text-decoration: none solid rgb(61, 71, 240);
    text-size-adjust: 100%;
    transform-origin: 90px 43.625px;
    user-select: none;
    width: 180px;
    border: 0px none rgb(61, 71, 240);
    font: 16px / 24px "Noto Sans JP", sans-serif;
    outline: rgb(61, 71, 240) none 0px;
    padding: 0px 0px 39px;
}
#contenedorServicios{
    width: 100%;
    padding:20px;
    
}
#containerServicios{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;

}
.boxi{
    padding:50px;
    /* background-color: black;
    color: white; */
    text-align: center;
    cursor: pointer;
    /* filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.25));  */
}
.boxi:hover{
    transform: scale(1.2);

}
.row{
    width: 70%;
    padding-top: 40px;
    margin:  auto  !important;
}

#contenedorPromociones{
    width: 100%;
}
#containerPromociones{
    padding-top: 40px;
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr  ;
    gap: 20px;
}
.promo{
    width:500px;
    height:500px;
    padding: 20px;
}

#containerPromociones img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.25)); */

}
.textoPromo{
    font-weight: 400;
    text-transform: uppercase;
    font-size: 30px;

}

#titulos{
    text-align: center;
    margin: auto;
    padding-top:60px;
    padding-bottom: 20px;
}
#titulos a{
    margin:30px;
    padding:20px;
    color: black;
    font-size: 30px;
    cursor: pointer;
    text-transform: uppercase;
    border: 2px black double;
}

#titulos a:hover{
    background-color: black;
    color: white;
}
#contenedorRegalos{
    width: 100%;

}
#containerRegalos{
    padding-top: 40px;
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr  1fr;
    gap: 30px;
    vertical-align: middle;
    text-align: center;

}

.regalos{
    border: black 1px double;
    transition: 0.4s;
    width: 100%;
    background-color: white;

}
.regalos2{
    border: black 1px double;
    transition: 0.4s;

}
.regalos2:hover{
    transform: scale(1.05);


}
.regalos2 img{
    margin: auto;
    width:100%;
    height: 400px;
    object-fit: cover;
}
.textu{
    font-size: 20px;
    font-weight: 600;
    padding: 15px;
    background: white;
    text-transform: uppercase;
}
.regalos:hover{
    transform: scale(1.05);


}
.regalos img{
    margin: auto;
    width:100%;
    cursor: pointer;
}

.puntos{
    background-color: rgb(0, 0, 0);
    color: white;
    text-align: center;
    padding:15px;
    font-size: 40px;
    border-radius: 2px;
}
.servi{
    text-align: center;
    font-size: xxx-large;
    color: #393939;
}
.section{
    /* background: rgba(214, 214, 214, 0.527); */
    /* background-image: url("/img/blue-and-white-line-pattern.jpg") no-repeat ; */
    
}

@media only screen and (max-width: 1693px) {
    #header1{
        padding: 10px 10px 10px 10%;
    }
    #header3{
        padding: 20px 20px 20px 20%;
    }
  }
  @media only screen and (max-width: 930px) {
    #header1{
        padding: 10px;
    }

  }   

#imgNav{
    position: absolute;
    top: 150px;
    left: 42%;
    width: 300px;
}

.wrapper {
    display: flex;
    width: 90%;
    justify-content: space-around;
  }
  
  .card {
    margin: 20px;
    padding: 6rem;
    background: white;
    position: relative;
    display: flex;
    transition: 0.4s ease-out;
    cursor: pointer;
  }

  
  .card:hover {
    transform: scale(1.05);
  } 
  .card:hover:before {
    opacity: 1;
  }
  .card:hover .info {
    opacity: 1;
    transform: translateY(0px);
  }
  .card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: 0.5s;
    opacity: 0;
  }
  .card img {
    width: 100%;
    max-height:100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    padding:10px;
    top: 0;
    left: 0;
  }
  .card .info {
      
    position: relative;
    z-index: 3;
    color: black;
    opacity: 0;
    transform: translateY(30px);
    transition: 0.5s;
    height: max-content;
  }














  .card .info h1 {
    margin: 0px;
  }
  .card .info p {
    letter-spacing: 1px;
    font-size: 15px;
    margin-top: 8px;
  }
  .card .info button {
    padding: 0.6rem;
    outline: none;
    border: none;
    border-radius: 3px;
    background: white;
    color: black;
    font-weight: bold;
    cursor: pointer;
    transition: 0.4s ease;
  }
  .card .info button:hover {
    background: dodgerblue;
    color: white;
  }

#footer{
    text-align: center;
    margin-top: 200px;
    position: static;
    bottom: 0;
    width: 100%;
}
#footer li{
    cursor: pointer;
}
#footer li:hover{
    text-decoration-line: underline;
}
  .footerBlack{
background-color: black;
color: white;
padding: 10px;
font-size:25px ;
text-transform: uppercase;
  }
  .footerWhite{
      padding: 10px;
      width: 100%;
  }
  .footerD{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      text-align: center;
      padding: 40px;
  }
  .social{
      display: flex;
      justify-content:center;

  }
  .social a{
      padding:20px 10px;
  }
  .footerL{
      width:90%;
      display: grid;
      grid-template-columns: 1fr 2fr;
      /* display: flex; */
      /* justify-content: space-around; */
      margin:auto;
      text-align: justify;
      gap: 20px;
      padding: 20px;
}
    .footerL ul{
        list-style-type: none;    

    }

    .footerB{
        text-align: center;
        background: black;
        color: white;
        padding:20px;
    }
    .footerL ul li{
        text-transform: uppercase;
    }


.categoriesLocal{
    width: 100%;
}
.categoriasLocales{
    width: 90%;
    color: white;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    font-family: 'IBM Plex Sans', sans-serif;
    gap: 10px;
    
}
.categoriasLocales div{
    background-color: white;
    color: black;
    padding: 8px;
    border: 2px double black;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 25px;
}
.buscadorMarcaContainer{
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 0.5fr 1fr;
    margin:auto;
}
.buscadorMarca{
    display: flex;
    justify-content: space-between;
    padding: 5px 5px 5px 10px;
    color: black;
    font-size: 25px;
    border: black 2px double;
}
.buscadorMarcaContainer2{
    margin: 0 5%;
    text-align: center;

}
.buscadorMarca2{
    margin-left: 20px;
    padding: 10px;
    background: black;
    color: white;
    font-size: 20px;
    text-align: center !important;
    cursor: pointer;
}
.categoriasLocales div:hover{
    background:black;
    color: white;
}
.linksHead{
    color: black; 
    font-size: 16px; 
    font-weight: 600;   
}

.social a{
color: black;
}











.container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  justify-content: center;
  overflow: hidden;
}

.hover-card {
  margin: calc(5% / 3);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  background: rgb(255, 255, 255);
  border-radius: 5px;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0);
  transition: 0.2s ease-out;
  text-align: center;
  vertical-align: middle;
}
.hover-card.card-rounded.mouse-out {
  transform: rotateX(0) rotateY(0) !important;
  transition: 0.8s ease-out;
}
.hover-card .card-img {
  height: auto;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}
.hover-card .card-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.special{
    position: relative;
}
.white{
    position: absolute;
    background-color: white;
    right:40px ;
    padding:20px;
    bottom: 350px;
}
/* 
.modal-content{
    width: 150% !important;
} */

/* .grid2{
    display: grid;
    grid-template-columns: 1fr 2fr;
} */
.grid2 img{
    width: 100%;
}
.textModal{
    text-align: center;
    padding: 50px;
    font-size: 40px;
}

.n2{
    width: 200%  !important;
}
#myModal{
    padding-right: 30% !important;
}

.n3{
    padding-right:20% !important ;
}
a.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
    -webkit-mask-size: 200%;
    animation: shine 2s infinite;
  }
  
  @-webkit-keyframes shine {
    from {
      -webkit-mask-position: 150%;
    }
    
    to {
      -webkit-mask-position: -50%;
    }
  }

  
.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
    -webkit-mask-size: 200%;
    animation: shine 2s infinite;
  }
  
  @-webkit-keyframes shine {
    from {
      -webkit-mask-position: 150%;
    }
    
    to {
      -webkit-mask-position: -50%;
    }
  }

  .contLocal{
    width: 100%;
}
.conteLocal{
    width: 90%;
    margin:auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr  ;
    gap: 20px;
    text-align: center;
    padding-top: 20px;
}
.conteLocal img{
    width: 100%;
}
.localsa{
    padding:20px;
    cursor: pointer;
    border: #393939 2px double;
}

body{
	font-family: Raleway;
}
header{
	border: black;
	border-width: 2px;
	box-shadow: 0px 3px 20px 3px rgba(0, 0, 0, 0.06);
    position: fixed;
    top: 0px;
    background-color: white;
    width: 100%;
    z-index: 212312;
}
.head_container{
	padding: 20px;
	overflow: hidden;
   
    
}
.logo{
	float:left;
	margin-left: 20px;
}
.logo img{
	height: 50px;
}
.menu{
	margin-top:5px;
	float:right !important;
}
.menu ul{
	list-style-type: none;
	    margin-right: -10px;
}
.menu li{
	display: inline;
	margin-right-last:0px; 
}
.menu a{
	text-decoration: none;
	font-weight: 500;
	color: #1c3664;
	    padding:10px;
	    padding-left: 15px;
	    padding-right: 15px;
}
.menu a:hover { 
	background: rgba(247, 202, 24, 0.1);
    border:#F7CA18;
    border-radius: 20px;
    border-style: solid;
    border-width: 2px;
    transition: 0.4s;

}
.icon{
	display: none;
}

menu.responsive{
	position: relative;
}
menu.responsive{
	float: none;
    display: block;
    text-align: left;
}

@media screen and (max-width: 835px) {
	.logo img {
	    height: 40px;
	}
	
	.menu{
		margin:0;
	}
}


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

.menu li{
	display: none;
}
.icon{
    font-weight: 900 !important;
        font-size: 27px !important;
    padding: 0;
    margin: 0;
       margin-top: -22px;
    display: flex;
}
	.logo img {
	    height: 40px;
	}
}




.sidenav {
	height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.2s;
    padding-top: 87px;
    box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.24);
    z-index: 342343423423324;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #1c3664;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #F7CA18;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}



.ubi{
    background: #000;
    color: white;
    padding: 10px;
    font-size: x-large;
    cursor: pointer;
    width: 40%;
    margin: auto;
}

#header{
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 123;
    background-color: white;
    transition: top 0.5s; 
}

.containerLogo{
    text-align: center;
    margin: auto;
    padding: 10px;
   
}

.containerLogo2{
    width: 8%;
    text-align: center;
    margin: auto;
    padding: 10px;
   
}
.containerLogo2 img{
    width: 100%;
}
.textuli2222{
    font-size: 50px;
    line-height: 1.5ch;
}
.containerLogo img{
    width: 100%;
    
}

.linksHeader{
    width: 60%;
    display: flex;
    justify-content: space-evenly;
    margin: 80px auto 0px auto;
    z-index: 1233;
    color: black;
    
}
.linksHeader a{
    color: black;
    padding: 10px;
}

.linksHeader a:hover{
    color: black;
    font-weight: bold;
}

.coso1{
    text-align: center;
}
.coso1 img{
    padding: 20px;
}


.resto{
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.contenedorUbi{
    width: 100%;
}
.containerUbi{
    width: 70%;
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin: auto;
    text-align: justify;
    gap: 20px;
}
.containerUbi h2{
    font-size: 40px;
}
.containerUbi p{
    font-size: larger;
}




header{
	border: black;
	border-width: 2px;
	box-shadow: 0px 3px 20px 3px rgba(0, 0, 0, 0.06);
    position: fixed;
    top: 0px;
    background-color: white;
    width: 100%;
    z-index: 212312;
}
.head_container{
	padding: 20px;
	overflow: hidden;
   
    
}
.logo{
	float:left;
	margin-left: 20px;
}
.logo img{
	height: 50px;
}
.menu{
	margin-top:5px;
	float:right !important;
}
.menu ul{
	list-style-type: none;
	    margin-right: -10px;
}
.menu li{
	display: inline;
	margin-right-last:0px; 
}
.menu a{
	text-decoration: none;
	font-weight: 500;
	color: #1c3664;
	    padding:10px;
	    padding-left: 15px;
	    padding-right: 15px;
}
.menu a:hover { 
	background: rgba(247, 202, 24, 0.1);
    border:#F7CA18;
    border-radius: 20px;
    border-style: solid;
    border-width: 2px;
    transition: 0.4s;

}
.icon{
	display: none;
}

menu.responsive{
	position: relative;
}
menu.responsive{
	float: none;
    display: block;
    text-align: left;
}

@media screen and (max-width: 835px) {
	.logo img {
	    height: 40px;
	}
	
	.menu{
		margin:0;
	}
}


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

.menu li{
	display: none;
}
.icon{
    font-weight: 900 !important;
        font-size: 27px !important;
    padding: 0;
    margin: 0;
       margin-top: -22px;
    display: flex;
}
	.logo img {
	    height: 40px;
	}
}




.sidenav {
	height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.2s;
    padding-top: 87px;
    box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.24);
    z-index: 342343423423324;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #1c3664;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #F7CA18;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}



.ubi{
    background: #000;
    color: white;
    padding: 10px;
    font-size: x-large;
    cursor: pointer;
    width: 40%;
    margin: auto;
}

#header{
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 123;
    background-color: white;
    transition: top 0.5s; 
}

.containerLogo{
    text-align: center;
    margin: auto;
    padding: 10px;
   
}

.containerLogo2{
    width: 8%;
    text-align: center;
    margin: auto;
    padding: 10px;
   
}
.containerLogo2 img{
    width: 100%;
}

.containerLogo img{
    width: 100%;
    
}

.linksHeader{
    width: 60%;
    display: flex;
    justify-content: space-evenly;
    margin: 120px auto 0px auto;
    z-index: 1233;
    color: black;
    
}
.linksHeader a{
    color: black;
    padding: 10px;
}

.linksHeader a:hover{
    color: black;
    font-weight: bold;
}

.coso1{
    text-align: center;
}
.coso1 img{
    padding: 20px;
}


.resto{
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.textuli2222:hover{
    text-decoration-line: none;
 }

 
#footer{
    text-align: center;
    margin-top: 200px;
    position: static;
    bottom: 0;
    width: 100%;
}
#footer li{
    cursor: pointer;
}
#footer li:hover{
    text-decoration-line: underline;
}
  .footerBlack{
background-color: black;
color: white;
padding: 10px;
font-size:25px ;
text-transform: uppercase;
  }
  .footerWhite{
      padding: 10px;
      width: 100%;
  }
  .footerD{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      text-align: center;
      padding: 40px;
  }
  .social{
      display: flex;
      justify-content:center;

  }
  .social a{
      padding:20px 10px;
  }
  .footerL{
      width:90%;
      display: grid;
      grid-template-columns: 1fr 2fr;
      /* display: flex; */
      /* justify-content: space-around; */
      margin:auto;
      text-align: justify;
      gap: 20px;
      padding: 20px;
}
    .footerL ul{
        list-style-type: none;    

    }

    .footerB{
        text-align: center;
        background: black;
        color: white;
        padding:20px;
    }
    .footerL ul li{
        text-transform: uppercase;
    }


    .social a{
        color: black;
        }
        
        

        

        
  
  nav ul {
    margin: 0;
    padding: 0;
    font-family: Open Sans;
    list-style: none;
    text-align: center;
  }
  nav ul.hidden {
    display: none;
  }
  nav ul a {
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    text-decoration: none;
    color: white;
    font-size: 2em;
    line-height: 1;
    width: 100%;
    display: block;
    padding: 10px;
  }
  nav ul a:hover {
    background-color: rgba(0, 0, 0, 1);
    text-decoration-line: none;
    color: white;
  }
  
  .menu-section.on {
    z-index: 654654654;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
  }
    
.celo{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.celo a{
  background:black;
  font-size: 20px;
    color: white;
    padding: 10px;
    text-align: center;
}
.celo a:hover{
  background:white;

    color: black;
    padding: 5px;
    text-align: center;
}


@media (max-width: 1600px) {
.puntos{
    font-size: 30px;
}
.textu{
    font-size: 20px;
}
.n3{
  padding-right:20% !important ;
  }
  .n4{
      width: 150% !important;

  }
}
@media (max-width: 1200px) {

  #containerNov{
      grid-template-columns: 1fr 1fr;
  }
  .info h1{
      font-size: 30px;
  }
  .n2{
      width: 100%  !important;
  }
  #myModal{
      padding-right: 0 !important;
  }
  .n3{
      padding-right: 0px !important;
  }
  #titulos a{
      font-size: 25px;

  }

  #containerRegalos{
      grid-template-columns: 1fr 1fr 1fr;
  }
  .n3{
      padding-right:0 !important ;
  }
  .n4{
      width: 100% !important;
  }

  #containerInsta{
      grid-template-columns: 1fr 1fr 1fr;
  }
  .celo{
      grid-template-columns:  1fr;
  }
  .containerUbi{
      grid-template-columns: 1fr;
      text-align: ce;
  }
}

@media (max-width: 800px) {

  #containerNov{
      grid-template-columns: 1fr ;
  }
  .info h1{
      font-size: 35px;
  }
  #containerRegalos{
      grid-template-columns:  1fr 1fr;
  }
  #containerServicios{
      grid-template-columns: 1fr 1fr;
  }
  
  #containerInsta{
      grid-template-columns: 1fr 1fr ;
  }
  .footerL{
      
      grid-template-columns: 1fr ;
  }
  .resto{
      grid-template-columns: 1fr;
      text-align: center;
  }
  .textuli2222{
      font-size: 40px;
  }
}


@media (max-width: 550px) {

 
  #containerRegalos{
      grid-template-columns:   1fr;
  }
  #containerServicios{
      grid-template-columns: 1fr ;
  }
  
  #containerInsta{
      grid-template-columns:  1fr;
  }
  .textuli2222{
      font-size: 30px;
  }
  .menu-toggle{
      top: 20px;
      right: 10px;
      
  }
}








































  
#footer{
    text-align: center;
    /* margin-top: 200px; */
    position: static;
    bottom: 0;
    width: 100%;
}
#footer li{
    cursor: pointer;
}
#footer li:hover{
    text-decoration-line: underline;
}
  .footerBlack{
background-color: black;
color: white;
padding: 10px;
font-size:25px ;
text-transform: uppercase;
  }
  .footerWhite{
    background-color: black;
    color: white;
      padding: 10px;
      width: 100%;
    border-top:1px solid white; 
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      list-style-type: none;
  }
  
  .social{
      text-align: left;

  }
  .social div{
      padding: 10px;
  }
  .social a{
      padding:20px 10px;
      color: white;
  }
  .social a:hover{
    color: rgb(153, 151, 151);
}
.social2{
    padding: 10px 20px!important;
}
  .footerL{
      width:90%;
      display: flex;
      flex-wrap: wrap;     
      margin:auto;
      text-align: justify;
      gap: 20px;
      padding: 20px;
}
    .footerL ul{
        list-style-type: none;    

    }

    .footerB{
        text-align: center;
        background: black;
        color: white;
        padding:20px;
    }
    .footerL ul li{
        text-transform: uppercase;
    }

.logoContainer img{
    width: 70%;
    padding-top: 20px;
}



.ubi{
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding-top: 20px;
}

.links1 a{
    color: white;
    text-decoration-line: none;
}
.links2 a{
    color: white;
    text-decoration-line: none;
    padding:20px 10px;

}

.textosContainer{
    padding-top: 20px;
    color: white;
}
.links2{
    text-align: left;
    padding-top: 20px;
}
.links2 a:hover{
    color: white;
}
.social a:hover{
  color: rgb(153, 151, 151);
}

.links3{
    text-align: left;
    padding-top: 10px;
}
.links3 div{
    padding: 10px 0px;
}
.reviewLogos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.reviewLogos a img{
    padding: 20px;
    width: 100%;
    /* filter: invert(100%); */
}

.footerWhite2{
    background-color: white;
    color: black;
      padding: 10px;
      width: 100%;
    border-top:1px solid white; 
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      list-style-type: none;
}

.reviewLogos a{
    height: auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.reviewLogos img{
    vertical-align: middle;
}

.textoTitulos{
    font-weight: 600;
    text-align: center; 
    color: black; 
    font-size: 45px;
}

.textulo ul li a{
    color: black;
    font-size: 16px;
    text-decoration-line: underline;

}
.textulo ul{
    list-style-type: none !important;
    text-decoration:none;
}


.textulo ul li a:hover{
    color: red;
}


.modal-content{
    border-radius: 0px !important;
    margin-right: 1.5rem!important;
    padding: 1.5rem!important;
    width: 130% !important;
}

#myModal6{
    margin-right:40%;
}


.textuli2223 {
    font-size: 1.5vw;
}

@media (max-width: 2900px) {

    .textu{
        font-size: 16px;
    }
}

@media (max-width: 2200px) {

    .textu{
        font-size: 14px;
    }
}


@media (max-width: 1640px) {
  .puntos{
      font-size: 16px;
  }
  .textu{
      font-size: 13px;
  }
  .n3{
    padding-right:20% !important ;
    }
    .n4{
        width: 150% !important;

    }
    #titulos a{
       
        font-size: 20px;
        
    
    }
    .puntos{
        font-size: 20px;
    }
    
    .textuli2223 {
        font-size: 2vw;
    }
  }

@media (max-width:1400px){
    .puntos{
        font-size: 16px;
    }
    
}

@media (max-width: 1200px) {
  
    
    .info h1{
        font-size: 30px;
    }
    .n2{
        width: 100%  !important;
    }
    #myModal{
        padding-right: 0 !important;
    }
    .n3{
        padding-right: 0px !important;
    }
    #titulos a{
        font-size: 18px;
    }
     .separadores {
        display: none !important;
    }

   
    .n3{
        padding-right:0 !important ;
    }
    .n4{
        width: 100% !important;
    }

    #containerInsta{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .celo{
        grid-template-columns:  1fr;
    }
    .textu{
        font-size: 10px;
        padding: 15px;

    }
    .textuli2223 {
        font-size: 3vw;
    } 
    
  }

  @media (max-width: 1000px) {
   
    #containerPromotions{
        grid-template-columns: 1fr 1fr 1fr;
    }

    #titulos a{
        font-size: 15px;
    }
    
   

}



  @media (max-width: 800px) {
  
    #containerNov{
        grid-template-columns: 1fr ;
    }
    .info h1{
        font-size: 35px;
    }
    
    #containerServicios{
        grid-template-columns: 1fr 1fr;
    }
    
    #containerInsta{
        grid-template-columns: 1fr 1fr ;
    }
    .footerL{
        
        grid-template-columns: 1fr ;
    }
    .resto{
        grid-template-columns: 1fr;
        text-align: center;
    }
    .textuli2222{


        font-size: 40px;
    }
    .footerWhite{
        grid-template-columns: 1fr;
        text-align: center !important;
    }
    .social{
        text-align: center;
    }
    .links2{
        text-align: center;
    }
    .links3{
        text-align: center;
    }
    #containerPromotions{
        grid-template-columns: 1fr  1fr;
    }
  }
  @media (max-width: 767px) {
    .modal-content{
        width: 100% !important;
    }
    .textulo{
        text-align: center !important;

    }
    
    .textuli2223 {
        font-size: 3vw;
    }
    .puntos{
        font-size: 14px;
    }
    .textu{
        font-size: 8px;
    }

  }
  @media (max-width: 550px) {
  
   
    #containerServicios{
        grid-template-columns: 1fr ;
    }
    
    #containerInsta{
        grid-template-columns:  1fr;
    }
    .textuli2222{
        font-size: 30px;
    }
    
    .textuli23215 {
        font-size: 1.5rem;
    }
  }

  @media (max-width: 450px) {
    .textuli2222 {
        font-size: 5.5vw;
    }
    .textuli2223 {
        font-size: 4.5vw;
    }

}

  @media (max-width: 391px) {

    .menu-toggle{
        width: 35px;
    }
    
    .puntos{
        padding: 10px;
    }
    
.textoTitulos{
    font-size: 35px;
}

  }
  @media (max-width: 350px) {
  
   
    
    .textuli23215 {
        font-size: 1rem;
    }
   .puntos{
       font-size: 10px;
       padding: 5px;
   }
   .textu{
       font-size: 8px;
       padding: 5px;
   }

  }
  @media (max-width: 295px) {
  
   .menu-toggle{
       width: 30px;
   }
  }
  

#header {
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 123;
    background-color: white;
    transition: top 0.5s;
    box-shadow: 3px 6px 5px -4px rgba(0,0,0,0.75);
    -webkit-box-shadow: 3px 6px 5px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 6px 5px -4px rgba(0,0,0,0.75);
}

.textuli2222{
    font-family: 'Crimson Text', serif !important;
}

 
.menu-toggle {
    width: 40px;
    height: 30px;
    position: absolute;
    top: 20px;
    right: 25px;
    cursor: pointer;
    z-index: 2423432432434;

  }
  .menu-toggle.on .one {
    -moz-transform: rotate(45deg) translate(7px, 7px);
    -ms-transform: rotate(45deg) translate(7px, 7px);
    -webkit-transform: rotate(45deg) translate(7px, 7px);
    transform: rotate(45deg) translate(7px, 7px);
    /* background-color: white; */
  }
  .menu-toggle.on .two {
    opacity: 0;
  }
  .menu-toggle.on .three {
    -moz-transform: rotate(-45deg) translate(8px, -10px);
    -ms-transform: rotate(-45deg) translate(8px, -10px);
    -webkit-transform: rotate(-45deg) translate(8px, -10px);
    transform: rotate(-45deg) translate(8px, -10px);
    /* background-color: white; */
  }
  
  .one,
  .two,
  .three {
    width: 100%;
    height: 5px;
    background: rgb(0, 0, 0);
    margin: 6px auto;
    backface-visibility: hidden;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
   
  }
  
  nav ul {
    margin: 0;
    padding: 0;
   
    list-style: none;
    text-align: center;
  }
  nav ul.hidden {
    display: none;
  }
  nav ul a {
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    text-decoration: none;
    color: white;
    font-size: 2em;
    line-height: 1;
    width: 100%;
    display: block;
    padding: 10px;
  }
  nav ul a:hover {
    background-color: rgba(0, 0, 0, 1);
    text-decoration-line: none;
    color: white;
  }
  
  .menu-section.on {
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.85);
    position: fixed;

  }
  .menu-section.on a{
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Heebo', sans-serif;
  }
  .owl-carousel div{
    cursor: pointer;
}
  .owl-carousel img{
    width: 100%;
    padding: 10px;
  }
  .carouselRegalos .regalos{
    padding: 10px;
  }

  .footerContainer{
      position: absolute;
      bottom: 0;
  }
  

  .menu-toggle{
    display: none;
}
#headerDesktop{

        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 123;
        background-color: white;
        transition: top 0.5s;
        box-shadow: 3px 6px 5px -4px rgba(0, 0, 0, 0.75);
        -webkit-box-shadow: 3px 6px 5px -4px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 3px 6px 5px -4px rgba(0, 0, 0, 0.75);
}

#headerDesktop2{

    width: 100%;
    position: absolute;
    z-index: 122;
    background-color: rgba(0, 0, 0, 0.801);
    transition: top 0.5s;
    box-shadow: 3px 6px 5px -4px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 3px 6px 5px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 6px 5px -4px rgba(0, 0, 0, 0.75);
}
#headerDesktop2 {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    top: 108px;
}
#headerDesktop2 a{
    color: white;
}


@media (max-width: 1057px) {

    #headerDesktop2{
        display: none;
    }
    #headerDesktop{
        display: none;
    }
    #header{
        display: block;
    }
    .menu-toggle{
        display: block;
    }
}

.reviewLogos{
    padding: 0px !important;
}
.links4{
    padding: 0px !important;
}

.menu-section.on {
    z-index: 4444444444444444444444;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.85);
    position: fixed;
    top: 75px;
}

.menu-section.on a {
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    padding: 10px;

} 
.itTechGroup{
    background:black;
    color: white;
    padding: 20px;
    text-align: center;
}
.itTechGroup a{
    color: rgb(255, 140, 32);
}