:root {
  --primary-color: #333333;
  --secondary-color: #FFFFFF;
  --gray-1: #333F51;
  --color-text: #8896AB;
  --color-text-hover: #FFFFFF;
  --menu-color: #BDBDBD;
  --menu-color-hover: #FFFFFF;
  --button-green: #35DB23;
  --button-gray: #F2F2F2;
  --white: #FFFFFF;
  --black: #000000;
  --error: #d1dbe1;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Medium.otf') format('opentype');
  font-weight: 600;
  font-style: semibold;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Bold.otf') format('opentype');
  font-weight: 800;
  font-style: bold;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Black.otf') format('opentype');
  font-weight: 900;
  font-style: black;
  font-display: swap;
}
html{
  scroll-behavior: smooth;

}
body {
  background: #FFF;
  font-family: 'Metropolis', arial, sans-serif;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Metropolis', arial, sans-serif;
}

h1{ 
  font-size: 52px; 
  font-weight: bold;
}
h2{ 
  font-size: 45px; 
  font-weight: bold;
}
h3{ 
  font-size: 24px; 
  font-weight: bold;
}
h4{ 
  font-size: 22px; 
  font-weight: bold;
}
h5{ 
  font-size: 20px; 
  font-weight: bold;
}
h5{ 
  font-size: 18px; 
  font-weight: bold;
}

p{
  font-size: 20px;
  line-height: 30px;
  font-family: 'Metropolis', arial, sans-serif;
}
ul, ol{
  font-family: 'Metropolis', arial, sans-serif;    
}
.uk-container{
  max-width: 1400px;
}
.principal-content{
  background: url("../images/sec_bg_image.png") no-repeat center center; 
  background-size: cover;
}
.header{
  background: var(--black);
  min-height: 85px;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-shadow: 0px 5px 6px rgba(255,255,255,.03);
}
.header nav a{
  text-transform: none;
  color: var(--white);
  font-size: 16px;
}
.header .offcanvasbtn{
  margin-right: 20px;
}
.header nav .uk-active a{
  color: #FFF;
  text-decoration: underline;
}
.header nav a:hover{
  color: var(--white);
  text-decoration: underline;
}
.header svg{
  fill: var(--white);
  width: 30px;
  height: 30px;
}
/*Footer*/
.footer{
  background: var(--black);
  padding-top: 50px;
  padding-bottom: 50px;
}
.footer p{
  color: var(--white);
  font-size: 16px;
}
.footer a{
  color: var(--white);
}
.footer a:hover,
.footer a:focus{
  color: var(--color-text-hover);
  text-decoraton: underline;
}
.footer .footer-logo{
  text-align: left;
}
.footer .address{
  text-align: right;
}
.footer .address p{
  margin-bottom: 5px;
}
.footerline{
  border: 1px solid var(--gray-1);
  width: 95%;
  margin-top: 50px;
  margin-bottom: 50px;
}

.copyright p{
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: right;
}
.store .yellow-title{
  color: #f9bd4b;
  text-shadow: 0px 2px 8px rgba(0,0,0,.5)
}
.store .hello-space{
  margin-bottom: 0px;
}
.location{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.btnwhats:hover{
  color: var(--white);
  text-decoration: none;
}
.btnwhats{
  background: var(--button-green); 
  padding:10px 28px;
  display: flex;
  flex-direction:row;
  gap: 10px;
  color: #121212;
  align-items: center;
  border-radius: 6px;
  font-weight: 500;
  min-width: 180px;
  width: 180px;
  margin: 0 auto;
  justify-content: center;
  height: 30px;
  text-shadow: none;
}
a.btnvisit:hover{
  color: var(--primary-color);
  text-decoration: none;
}
.btnvisit{
  background: var(--button-gray);
  padding: 10px 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  font-weight: 500;
  color: var(--primary-color);
  min-width: 180px;
  margin: 0 auto;
  width: 180px;
  justify-content: center;
  height: 30px;
  text-shadow:none;
}
.store{
  background: url('../images/xtore-noche-b.webp') no-repeat center center;
  background-size: cover;
  min-height: calc(100vh - 85px);
  color: var(--white);
  text-shadow: 0px 3px 10px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.store h1{
  margin-bottom: 10px;
}
.store p{
  margin: 0px;
}

.store h1{
  color: var(--white);
  text-shadow: 0px 5px 10px rgba(0,0,0,.4);
}
.asesorysection{
  min-height: 100vh;
  background: url('../images/asesoria.webp') no-repeat center center;
  text-align: center;
  background-size: cover;
  padding-top: 5rem;
  text-shadow: 0px 5px 20px rgba(0,0,0,.1);
}
.asesorysection p,
.asesorysection h2{
  color: var(--white);
  text-shadow: 0px 5px 20px rgba(0,0,0,.7);
}
.brands-content{
  background: var(--white);
  padding-top: 35px;
  padding-bottom: 35px;
  margin-bottom:0px;
}
.servicesection{
  min-height: 95vh;
  color: var(--white);
  background: url('../images/servicio-tecnico.webp') no-repeat center center;
  text-align: center;
  background-size: cover;
  text-shadow: 0px 5px 20px rgba(0,0,0,.7);
  padding-top: 5vh;
  text-align: center;
  display: flex;
  justify-content: start;
  flex-direction: column;
}
.servicesection h2{
  color: var(--white);
  margin-top: 50px;
}
.hardwaresection{
  min-height: 92vh;
  color: var(--white);
  background: url('../images/hardware-negocios.webp') no-repeat center center;
  text-align:center;
  background-size: cover;
  padding-top: 8vh;
  text-shadow: 0px 5px 20px rgba(0,0,0,.7);
}
.hardwaresection h2{
  color: var(--white);
}
.gamercontent{
  min-height: 60vh;
  color: var(--white);
  background: url('../images/equipo-gamer.webp') no-repeat center center;
  text-align:center;
  background-size: cover;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  padding-top: 5vh;
}
.screenscontent{
  min-height: 60vh;
  color: var(--white);
  background: url('../images/pantallas.webp') no-repeat center center;
  text-align:center;
  background-size: cover;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  padding-top: 5vh;
}
.printcontent{
  min-height: 60vh;
  color: var(--white);
  background: url('../images/impresion.webp') no-repeat center center;
  background-size: cover;
  padding-top: 5vh
}
.accesoriescontent{
  min-height: 60vh;
  color: var(--white);
  background: url('../images/laptops.webp') no-repeat center center;
  background-size: cover;
  padding-top: 5vh;
}

.gamercontent h2, .gamercontent p,
.screenscontent h2, .screenscontent p,
.printcontent h2, .accesoriescontent h2{
  text-shadow: 0px 5px 20px rgba(0,0,0,.7);
  color: #FFFFFF;
  text-align:center;
  margin-bottom:0px;
}
.printcontent p,
.accesoriescontent p{
  color: #333;
}
.custom-button{
  background: var(--primary-color);
  color: #FFFFFF;
  text-transform: none;
  text-align:center;
}
.error {
  color: red;
  font-size: 10px;
  font-weight: bold;
}
.maps-title{
  font-size: 24px;
}
.contact{
  background: var(--white);
  padding-bottom: 50px;
}
.categories-content{
  max-width: 1480px;
  padding-left:0px;
  padding-right: 0px;
}
.error_content{
  background: var(--error);
  height: calc(100vh - 80px - 100px);
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}
.error_content h1{
  font-size: 19rem;
  color: var(--white);
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  text-align: center;
  font-weight: 900;
  margin-bottom: 0px;
}
.error_content p{
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  text-align: center;
  color: var(--black);
  font-weight: 800;
  font-size: 20px;
  z-index: 3;
  vertical-align: bottom;
  display: flex;
  justify-content: center;
  align-items: center;
}
.error_image {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  height: 100%;
  width: 100%;
  background: transparent url(../images/tecnico.webp) no-repeat 55% 90%;
  background-size: auto 70%;
}
.aviso-privacidad ul li,
.aviso-privacidad ol li,
.aviso-privacidad p{
  font-size: 16px;
  line-height: 24px;
}
.aviso-privacidad h1{
  font-size: 42px;
  text-align: center;
  line-height: 42px;
}
.aviso-privacidad h2{
  font-size: 32px;
  line-height: 32px;
  text-align: center;
}
.aviso-privacidad a{
  color: #0052B8;
  text-decoration: none;
  font-weight: 600;
}
.aviso-privacidad a:hover,
.aviso-privacidad a:focus,
.aviso-privacidad a:active{
  color:#0052B8;
  text-decoration: underline;
}
.aviso-image{
  width: 560px;
  height: 560px;  
}
.loading{
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  position: fixed;
}
.minheight{
  min-height: 100%;
}
.socialmedia{
  background: var(--black);
  width: 100%;
  padding:0px;
  margin:0px;
  min-height: 100%;
  color: var(--white);
}
.socialmedia .border-image{
  border-radius: 25px;
}
.socialmedia h1{
  font-size: 90px;
  line-height: 70px;
  letter-spacing: -1px;
}
.socialmedia h2{
  font-size: 32px;
  margin-bottom: 40px;
}
.socialmedia h1,
.socialmedia h2{
  color: var(--white);
}
.socialmedia p{
  font-size: 16px;
  line-height: 24px;
  font-weight: 200;
}
.socialmedia .imgxtore{
  margin-top: 50px;
}
.socialmedia .backgroudlink{
  height: 150px;
  width: 100%;
  background-size: cover !important;
  border-radius: 25px;
}
.socialmedia .backgroudlink-face{
  background: url('../images/facebook-back.webp') no-repeat center center;
}
.socialmedia .backgroudlink-instagram{
  background: url('../images/instagram-back.webp') no-repeat center center;
}
.socialmedia .backgroudlink-x{
  background: url('../images/x-back.webp') no-repeat center center;
}
.socialmedia .backgroudlink-tiktok{
  background: url('../images/tiktok-back.webp') no-repeat center center;
}
.figure-image{
  position: relative;
  margin:0px;
  padding: 0px;  
}
.figure-image > img{
  border-radius: 25px;
}
.figure-image .figure-caption{
  position: absolute;
  top: 30px;
  right: calc(50% - 97px);
}
.label-files{
  font-size: 0px;
}
.tienda-menu{
  display: flex;
  justify-content: center;
  align-items: center;
}
.tienda-menu img{
  margin-right: 5px;
}
.tienda-menu svg{
  height: 20px;
  width: 20px;
  margin-right: 10px;
}
.header nav a.tienda-linea{
  min-height: 30px;
  padding: 8px 18px;
}
a.tienda-linea{
  width: auto;
  padding: 8px 18px;
  height: auto;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  min-height: 30px;
}

a.tienda-linea:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

a.tienda-linea:active {
    color: #000;
}

a.tienda-linea:hover{
  text-decoration: none;
}
a.tienda-linea:hover:after {
  opacity: .6;
}

a.tienda-linea:before {
    opacity: 1;
}

a.tienda-linea:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}
.button-store{
  width: 180px!important;
  padding: 10px 28px!important;
  line-height: 30px;
  border-radius: 6px!important;
}
.button-store svg{
  height: 25px;
  width: 25px;
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
@media (min-width: 1081px) and (max-width:1440px){
  .gamercontent.
  .screenscontent,
  .printcontent,
  .accesoriescontent{
    min-height: 70vh;
  }

}
@media (max-width: 959px){
  .footer .footer-logo,
  .footer .address{
    text-align:center;
  }
  .copyright p{
    text-align: center;
  }
}
@media  (min-width: 661px) and (max-width: 1080px){
  .store .hello-space{
    margin-bottom: 7rem;
  }
  h1{
    font-size: 36px;
  }
  h2{
    font-size: 36px
  }
  .error_content{
    justify-items: center;
    align-items: center;
    height: auto;
    min-height: 72vh;
  }
  .error_image{
    background-size: auto 50%;
  }
}

@media (min-width: 0px) and (max-width: 660px){
  h1{
    font-size: 34px;
  }
  h2{
    font-size: 32px
  }
  .header{
    height: 40px;
    min-height: 40px;
    top: 0px;
    position: sticky;
    z-index: 100;
    box-shadow: none;
  }
  .header,
  .header .uk-navbar,
  .header .uk-navbar .uk-logo,
  .header .uk-navbar .uk-grid > div{
    height: 40px;
    min-height: 40px;
    width: 100%;
  }
  .header .offcanvasbtn{
    margin-right: 0px!important;
  }
  .header .logo{
    height: 22px;
  }
  .store{
    height:calc(98vh - 40px);
    min-height: calc(98vh - 40px);
    background: url('../images/portada-mobile-b.webp') no-repeat center -25px;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .text-home{
    margin-bottom: 20vh;
  }
  .store h1{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 5rem;
  }
  .asesorysection{
    background-size: inherit;
    background-position: center center; 
  }
  .servicesection{
    background-size: cover;
  }
  .servicesection h2{
    margin-top: 0rem;
  }
  .hardwaresection{
    background-size: cover;
  }
  .screenscontent{
    background-size: cover;
    background-position: 43%;
  }
  .gamercontent{
    background-size: cover;
  }
  .printcontent{
    background-size: cover;
  }
  .accesoriescontent{
    background-size: cover;
  }
  .store .content-store{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .servicesection{
    align-items: flex-start;
    min-height: 70vh;
    background-attachment: local;    
  }
  .hardwaresection,
  .asesorysection,
  .servicesection{
    min-height: 75vh;
    background-attachment: local;
    padding-top: 3rem;
    background-position-y: top;
  }
  .asesorysection{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }
  .gamercontent,
  .screenscontent,
  .printcontent,
  .accesoriescontent{
    height: calc(75vh - 40px);
    min-height: 75vh;
    justify-content: start;
    padding-top: 3rem;
    box-sizing: content-box;
  }
  .gamercontent h2,
  .screenscontent h2,
  .printcontent h2,
  .accesoriescontent h2{
    margin-bottom: 10px!important;
    padding: 0px 25px;
  }
  .store .hello-space{
    margin-bottom: 1rem;
    font-size: 18px;
  }
  .btnwhats{
    padding: 10px;
    min-width: 130px;
    width: 130px;
  }
  .btnvisit{
    padding: 10px;
    min-width: 130px;
    width: 130px;
  }
  .logocontent{
    align-items: center;
  }
  .gamercontent p,
  .screenscontent p,
  .printcontent p,
  .accesoriescontent p{
    padding: 0px 20px;
  }
  .error_content{
    justify-items: center;
    align-items: center;
    height: auto;
    min-height: 72vh;
  }
  .error_content h1{
    font-size: 9rem;
  }
  .error_image{
    background-size: auto 50%;
  }
  .aviso-image{
    width: 360px;
    height: 360px;  
  }
  .socialmedia h1{
    font-size: 50px;
  }
  .socialmedia h2{
    font-size: 24px;
  }
  .logo-store{
    width: 100px;
  }
  .figure-image .figure-caption{
    right: calc(50% - 50px);
  }
  .button-store{
    padding: 10px 8px!important
  }
  .tienda-menu svg{
    margin-right: 5px;
  }
}