/*------------------Wordpress --------------------------------------------*/
header{
  display:flex;
  margin:20px
}
nav{
  margin-right:20px;
  margin-left:auto;
}
.site-title{
  margin-left:20px;
}

#mobile{
  z-index:900;
  position:fixed;
  display:none;
  right:2%;
  top:0px;
  width:64px;
  height:64px;
  overflow: hidden;
}
  #mobile img{width:auto;height:85%;float:right;margin-top:auto;margin-bottom: auto;}
  #mobile img:hover{cursor: pointer;}

.menu{
  display:flex;
  z-index: 1000;
  list-style: none;
  font-size: 1rem;
  right:0
}
  .menu li{margin-left:20px}

.custom-logo{height:auto;width:120px}

.woocommerce-info {
  border-top: 2px solid #525aa3;
}

li.active a,li.is-active a, a {
  color: #525aa3;
}

.button, button, a.button{
  background-color: #525aa3!important;
  color:#ffffff!important;
}

a:hover{
  border-bottom: 1px solid #525aa3;
}


/*------------------Woocommerce --------------------------------------------*/
.woocommerce-tabs ul li.active a {
  box-shadow: 0 2px 0 #525aa3;
}
.woocommerce-products-header{
	display:block;
}

.woocommerce-loop-category__title mark{
  background:none;
  color:gray;
}

.product-category a img {border: 5px solid #525aa3}

.woocommerce-store-notice{background:#525aa3}
	
/*----------------- Propios SHJ-------------------------------*/

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
}

@font-face {
      font-family: "Assistant";
    src: url("https://fonts.googleapis.com/css2?family=Assistant&display=swap");
}

html{font-family: 'Assitant'}


div.auto{width:auto}
div.width1_1{width:100%;}
div.width2_3{width:75%}
div.width1_2{width:50%}
div.width1_3{width:33%}
div.width1_4{width:25%}
div.width1_5{width:20%}

div.width80_20{width:80%}
div.width20_80{width:20%}

div.block{display:block;overflow:hidden;padding:1%;}
    div.block img{width:100%;height:auto;pointer-events: none;user-select: none;}       
    div.block p{margin:0;text-align: center;color:black;pointer-events: none;user-select: none;}

div.blocks{
    display:flex;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: auto;
    width:100%;
    height:auto;
    overflow: hidden;
}

footer{position:relative;display:flex;bottom:0;color:white;background-color: black;padding-top:5px;margin-top:0px; padding-bottom:5px;font-family: 'Roboto', sans-serif;}
    footer .blocks{width:auto;}
        footer .block.corporate{width:12vw;height:auto;font-size:0.5rem;text-align: center;}
            footer .block.corporate .logo{width:auto;height:90%;background-image:url('https://sistemashj.com/public/img/logo.svg');background-size: 90% 90%;background-repeat: no-repeat;background-color: white;background-position-x: center;background-position-y:center;margin-left:auto;margin-right:auto;margin-bottom:5px}      
        footer .block.line{width:1px;height:10vw;background-color: white;padding:0;margin:5px}
        footer .block.info{display:block;overflow: visible;margin:auto;font-size:1rem;text-align:left;}
        footer .block.social{display:block;margin-top:auto;margin-bottom:auto;width:50px}
        footer .block.legal{font-size:1rem}

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

  /********/
  header{display:block}
  #mobile{width:100%;display:block;background-color: white;padding:5px} /*fondo blanco para cubrir logo y icono menu*/
  .custom-logo{
    position: fixed;
    top: 0;
    z-index: 1000;
    height: 48px!important;
    margin-top:3px;
    width: auto;
  }
  .site-title{
    z-index: 1000;
    position: fixed;
    font-size: 1.4rem;
    left: 25%;
    top: 10px;
  }

  .menu{
    position:fixed;
    left:auto;
    right:0;
    top:50px;
    width:auto;
    background-color:rgba(214, 214, 214,0.7);
    display:none;
    padding-right:10px
  }
    .menu li{margin:5px;font-weight: bold;}

  main{margin-top:60px}

  div.block {margin:2%;width:95%}
  
  div.blocks{display:block}
      
  footer{top:0px}
  footer .blocks{display:block;}
  footer .block{width:100%;margin-right: auto;margin-left: auto;}
      footer .block.corporate {width:40vw;height: 40vw;}
      footer .block.line{width:90vw;height:1px}
      footer .block.social{display:flex;width:120px}
}