/**********************/
/****** FUENTES *******/
/**********************/
@font-face {
  font-family: font1;
  src: url('fonts/BalooBhai-Regular.ttf');
}
@font-face {
  font-family: font2;
  src: url('fonts/IndieFlower.ttf');
}
@font-face {
  font-family: font3;
  src:url('fonts/PT_Sans-Narrow-Web-Regular.ttf');
}
@font-face {
  font-family: font4;
  src:url('fonts/Poppins-Regular.ttf');
}
@font-face {
  font-family: font5;
  src:url('fonts/Assistant.ttf');
}
@font-face {
  font-family: font6;
  src:url('fonts/Telex.ttf');
}
@font-face {
  font-family: font7;
  src:url('fonts/Avenir-LT-Std-85-Heavy_5177.ttf');
}


@font-face {
  font-family: 'font-title';
  src:url('fonts/Metropolis-Bold.otf');
}

@font-face {
  font-family: 'font-text';
  src:url('fonts/Metropolis-Regular.otf');
}

@font-face {
  font-family: 'font-austria';
  src:url('fonts/Austria.otf');
}


.font-text{
  font-family:font-text !important;
}
.font-title{
  font-family:font-title !important;
}

/**********************/
/***** BODY  *******/
/**********************/
body{
  font-family:font-text;
  padding-left:5em;
  padding-right:5em;
}


@media (max-width:1024px){
  body{
    padding-left:0em;
    padding-right:0em;
    }
}

@media (min-width:1441px){
  body{
    padding-left:15%;
    padding-right:15%;
    }
}



/**********************/
/***** COLORES  *******/
/**********************/
:root{
	--primary : #4aab57;
	--secondary:#005aa9;
	--tres: gray;

  --color1: #e51e3b;
  --color2: #f2ca13;
  --color3: #4aac57;

  --verdeClaro: #D0DE9A;
  --rojoClaro: #FA6861;
  --amarilloClaro: #ECF79E;

  --colorSlider: black;
}



/**********************/
/**** BOTONES *********/
/**********************/
.btn, button{
    color: white !important;
    background: linear-gradient(#2d2d2d, #000000) !important;
    padding:0.25em 1.5em;
    cursor:pointer;
    border-radius:0.35em;
    border:solid 1px black;
    box-shadow:1px 1px 1px black;
}

/**********************/
/***** HEADER  ********/
/**********************/
header{
  width:100%;
  display:block;
  position: relative;
  padding-left:0em;
  padding-right:0em;
  z-index: 1;
  /*background-color: #0000001c;*/
}

header .headerCesta .sub-cont{
  display: inline-block;
  background-color: #ffffff59;
  padding-top: 0.5em;
  padding-left: 0.5em;
}

@media (max-width:767px){
  .line2{
    font-size: 1em;
    background-color: #ffffff66;
    padding-bottom: 1em;
    border-radius: 0.5em;
    margin-top: 0.5em;
  }
  header{
    padding-left:0.3em;
    padding-right:0.3em;
  }
  header .line-movil-1{
    background-color: var(--primary);
    color: white;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
  header .line-movil-1 .icono{
    height:1.5em;
    filter: invert(1);
    margin-right: 0.25em;
  }
}

header .line2 .a1 img{
    height: 3.5em;
    margin-top: 1em;

}
@media (max-width:767px){
  header .line2 .a1 img {
      height: 3.5em;
      margin-top: 1em
  }
}

header .area_profesional{
    color: black;
    font-weight: normal;
    padding-top: 0.2em;
}


header .item2 .c1{
  font-size:1em;
  position: relative;
  z-index: 100;
  width: 23em;
  display: inline-block;
}

@media (max-width:767px){
  .item2.item2-movil{
    margin-top: 1em;
    padding-left: 0em;
    padding-right: 0em;
  }


  header .item2 .c1{
    width: 100%;
  }
}

header .line1{
    padding-top: 0.75em;
    background-color: var(--color3);
    color: white;
    font-size: 0.85em;
}

@media (max-width:767px){
  header .line1{
    font-size: 0.75em;
    padding-top: 0.75em;
    padding-bottom: 0.5em;
    background-color: white;
    color: black;
  }
}

header .item1,
header .item2{
  padding-left:0em;
  padding-right:0em;
  margin-left:0em;
  margin-right:0em;
  padding-top: 1.25em;
}

@media (max-width:767px){
    header .item1, header .item2 {
        padding-top: 0.25em;
    }
}
header .item2 input{
    width: 100%;
    border: none;
    border-radius: 0.5em;
    padding-left: 0.5em;
    position: relative;
    z-index: 1;
    background-color: white;
    border: solid 1px #c5c5c5;
}
header .item2{
  margin-top:0.5em;
}

header .item2-escritorio{
  padding-top: 0em;
  margin-top: 0em;
  text-align: right;
}

header .imgBusqueda{
  height: 2.5em;
  width: 100%;
  margin-right: 0.5em;
  position: relative;
  top: -0.1em;
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
}

header td.td_imgBusqueda{
  width: 5em !important;
  min-width: 0em !important;
  text-align: left !important;
  overflow: hidden !important;
  padding-left: 1em !important;
  padding-right: 0 !important;
  position: relative;
}
header .line21 .it .icono{
  height:1.25em;
  position: relative;
  top: -2px;
  /*filter: invert(1);*/
}

header .item .circulo{
  height: 0.5em;
  width: 0.5em;
  border-radius: 0.25em;
  background-color: var(--color1);
  display: inline-block;
  margin-left: 0.75em;
  position: relative;
  top: -0.2em;
}

header .itemHijo .circulo{
  background-color: var(--color2) !important;
}

header .line3 .item .circulo{
  margin-right: 0.75em;
  margin-left: 0;
}

@media (max-width:767px){
  header .it_sesion{
    position: relative;
    right: 3px;
  }

  header .menuMovil img.icono{
    margin-left: 0.2em;
  }

  header .cuadroMenuMovil{
   display: none;
    position: absolute;
    top: 4em;
    background-color: white;
    text-align: left;
    width: 100%;
    right: -1em;
    border: solid 1px #cccccc;
    border-top: none;
    border-right: none;
    padding-top: 0.5em;
    padding-bottom: 1em;
    z-index: 10000;
    font-size: 1.1em;
  }

  header .contPestanas{
    display: block;
    margin: 0em 1em;
  }

  header .cuadroMenuMovil .item{
    display: inline-block;
    font-size: 0.9em;
    padding: 0.35em;
    padding-left: 1em;
    line-height: 1;
  }

  header .contPestanas .submenu{
    display: none;
    background-color: #D0DE9A;
    padding: 1em 2em;
    font-size: 0.85em;
    text-align: left;
  }

  header .item .itemHijo .circulo{
    background-color: var(--color2);
  }
}

header .line21{
  padding-left:0em;
  padding-right:0em;
  margin-left:0em;
  margin-right:0em;
  margin-top: 0.25em;
}
@media (max-width:767px){
  header .line21{
    margin-top: 0.5em;
    padding-right: 0.5em;
    font-size: 1.2em;
  }
}
header .line21  a.a{
  display:inline-block;
}
header .line21 .it{
  display:inline-block;
  white-space: nowrap;
}
header .line21 .it div{
  display:inline-block;
  /*width:75%;*/
  line-height:1.1;
  font-size:0.8em;
  font-family:font-text;
  font-weight: bold;
  color: var(--colorSlider);
}

header .line21 .phones{
    font-size: 0.85em !important;
    width: auto !important;
    padding-left: 1em;
    padding-right: 1em;
    margin-right: 1em;
    background-color: #ffffff69;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    border-radius: 0.5em;
}

header .line21 .whatsapp{
    top: 1px;
    position: absolute;
    padding-top: 6px;
}

header .line21 .cont-phones{
  position: relative;
  top: -0.4em;
}

header .area_profesional{
    color: black;
    font-weight: normal;
    padding-top: 0.2em;
    width: auto !important;
    background-color: #ffffff42;
}

@media (max-width:767px){
  header .area_profesional{
    font-size: 0.6em !important;
  }
}

header .line21 .it > img{
  display:inline-block;

}

header .icono_carro{
    font-family: 'simple-line-icons' !important;
    width: auto !important;
    font-size: 1.5em !important;
    position: relative;
    top: 0em;
}

header .item2 .c1 img.imgInputBuscar{
    position: absolute;
    right: 0.5em;
    top: 0.35em;
    height: 1.2em;
    z-index: 2;
    opacity: 0.8;
    cursor: pointer;
}

header .item2 .c1 img.imgInputCargando{
    position: absolute;
    right: 2.5em;
    top: 0.35em;
    height: 1.2em;
    z-index: 2;
    opacity: 0.8;
    display: none;
}

header .line3{
    display: block;
    height: 4em;
    /*background-color: white;*/
    /*border-top: solid 2px var(--primary);*/
    /*border-bottom: solid 2px var(--primary);*/
    margin-top: 3em;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 1em;
    font-size: 0.8em;
    position: relative;
}

header .line3 .item,
header .menuMovil .item{
  cursor:pointer;
  position: relative;
  display:inline-block;
  padding-left:0.5em;
  padding-right:0.5em;
  padding-top: 1em;
  padding-bottom: 1em;
  box-sizing: border-box;
  background-color: #ffffff42;
}

@media (max-width:767px){
  header .menuMovil{
    font-size: 0.8em;
    margin-top: 0.25em;
  }

  header .line3 .item,
  header .menuMovil .item{
    display:block;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    text-align: right;
    margin-right: 1em;
  }
  header .line3{
    border: none !important;
    margin-top: 1em;
    margin-bottom: -1em;
  }
}


/*
@media (max-width:767px){
  header .line3{
    height: 2.5em;
    background-color: var(--primary);
    margin-top: 0.5em;
    padding-left: 0em;
    padding-right: 0em;
    padding-top: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 1em;
    font-size: 0.8em;
  }
}
*/
header .line3 .item .tit,
header .menuMovil .item .tit{
  padding-left:0.5em;
  padding-right:0.5em;
  color:var(--colorSlider);
  font-weight: bold;
  height:100%;
  font-size: 1.2em;
}


header .line3 .item:hover{
  border-top: solid 0.4em var(--color1);
  padding-top: 0.6em;
}

header .line3 .item .submenu,
header .menuMovil .item .submenu{
  display:none;
  position: absolute;
  top: 3.4em;
  left: 0;
  background-color: white;
  border: solid 1px lightgray;
  border-top: none;
  z-index:1000;
  /*margin-top: 2px;*/
  padding: 1em 0.5em;
  width: 35em;
  padding-left: 3em;
}
@media (max-width:767px){

  header .menuMovil .item .submenu{
    width: auto;
  }
}

header .flechaMenu{
  border: solid 0.4em transparent;
  border-top: solid 0.5em #777777;
  display: inline-block;
  position: relative;
  top: 0.3em;
  margin-left: 0.5em;
}

@media (max-width:767px){
  header .menuMovil .item .submenu{
    display:none;
    position: relative;
    top: 0;
    border: none;
    background-color: transparent;
    color:#777777;
    padding-left: 0;
    font-size: 0.8em;
  }
  header .menuMovil .item:hover{
    border-top: none;
  }

}

header .line3 .item .submenu .itemHijo,
header .menuMovil .item .submenu .itemHijo{
  padding-left:1em;
  padding-right:1em;
  padding-top:0.2em;
  padding-bottom:0.2em;
  color:#777777;
  font-weight:bold;
  margin-bottom: 0.1em;
  /*min-width: 20em;*/
  text-align:left;
  font-size: 0.9em;
 /* margin-left: 1em;*/
}

@media (max-width:767px){
  header .menuMovil .item .submenu .itemHijo{
    text-align: right;
    min-width: 0;
  }

  header .menuMovil .item .submenu .itemHijo{
    border-left: 0;
  }
}

header .b3 .foto-perfil{
  height:1.4em;
  margin-right:0.25em;
  position:relative;
  top:-0.1em;
}

header .line21 .nombre_sesion{
  font-family:font3;
  cursor: pointer;
  color: var(--colorSlider);
}


header .line21 .b3{
  display:block;
  text-align: right;
  position:relative;
  /*width:50%;*/
  font-size: 1em;
  padding-right: 0.25em;
}


header .line21 .b3 .menuSesion{
  font-size:0.8em;
  font-weight:normal;
}

@media (max-width:767px){

  header .iconoMenuMovil{
    font-size: 1.5em;
    color: black;
    height: 1.25em;
    width: 1.25em;
    float: right;
    margin-right: 0em;
    /* background-color: var(--color3); */
    padding-top: 0.4em;
    border-radius: 1em;
    text-align: center;
    margin-top: -0.4em;
    font-weight: bold;
    margin-left: 1em;
  }

  header .headerCesta{
    margin-top: -0.2em;
  }


  header .iconoMenuMovil .menuMovil{
    font-size:0.8em;
    font-weight:normal;
  }

  header .iconoMenuMovil > *{
    cursor:pointer;
  }
}

header .menuSesion{
  background-color:white;
  position:absolute;
  top:2.5em;
  right:0;
  z-index:200;
  padding:0.5em;
  padding-top:1em;
  padding-bottom:1em;
  box-shadow: 1px 1px 3px black;
  width:10em;
}


@media (max-width:767px){
  /*
  header .menuMovil{
    background-color:white;
    position:absolute;
    top:2.5em;
    right: -2em;
    z-index:200;
    padding:0.5em;
    padding-top:1em;
    padding-bottom:1em;
    box-shadow: 1px 1px 3px black;
    width:10em;
  }
  */
  header .menuSesion{
      right:-1.3em;
    }
}

header .menuSesion .item{
  border-bottom:solid 1px gray;
  padding-top:0.1em;
  padding-bottom:0.1em;
  padding-left:1em;
  padding-right:1em;
  margin-bottom:0.05em;
  margin-top:0.05em;
}

header .menuSesion .item:last-child{
}

header .resultadosBusqueda{
    background-color: white;
    position: absolute;
    top: 1em;
    right: 0;
    padding-top: 1.5em;
    padding-bottom: 1em;
    z-index: 1;
    height: auto;
    border: solid 1px lightgray;
    box-shadow: 2px 4px 4px black;
    width: 23em;
}

header .resultadosBusqueda td{
  color: black;
  padding-left: 0.5em;
  padding-right: 2em;
  font-family: font-text;
  font-size: 0.8em;
  cursor: pointer;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  line-height: 1.1;
  text-align: left;
}

/*************************/
/** ERRORES FORMULARIO ***/
/*************************/
#_texto_alerta{
  position:absolute;
  left:0;
  background-color:red;
  color:white;
  padding-left:0.5em;
  padding-right:0.5em;
  padding-top:0.25em;
  padding-bottom:0.25em;
  display:inline-block;
  max-width: 60%;
  border-radius:0.5em;
  box-shadow: 1px 6px 15px rgba(0, 0, 0, 0.5);
  line-height:1.2;
}

#_texto_alerta:before {
    border: 12px solid red;
    content: '';
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    position: absolute;
    bottom: -23px;
    left: calc(15% - 12px)
}

/**********************/
/**** FOOTER *********/
/**********************/
footer{
  width:100%;
  display:block;
  /*padding-top:0.25em;*/
  padding-bottom:0.25em;
  background-color:black;
  margin-bottom:1em;
  margin-top:4em;
  color:white;
  text-align:left;
  font-size:0.75em;
  position: relative;
  z-index: -1;
}

footer .redes{
  height: 2em;
  background-color: var(--color1);
  padding: 0;
  position: relative;
}

footer .redes .item{
  position: relative;
  top: -1.9em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  color: var(--color1);
  background-color: white;
  border-radius: 1.7em;
  height: 3.4em;
  width: 3.4em;
  border: solid 2px var(--color1);
  text-align: center;
  padding-top: 0.7em;
  cursor: pointer;
}

footer .redes .item:hover{
  background-color: var(--color1);
  color: white;
}
footer .icono-redes{
  font-family: 'simple-line-icons' !important;
    font-size: 1.5em;
    font-weight: bold;
}

footer .line1{
  border-bottom:solid 2px white;
}

footer .imgNave{
  height: 9em;
  margin-bottom: 1em;
  background-image: url('https://tejidosanmol.es/archivos/imagenes/tejidos_anmol.jpeg');
  background-color: white;
  background-size: 100% auto;
  background-position: center 35%;
}

footer > div{
  padding:2em;
}

footer > div:nth-child(2){
  padding:2em !important;
}

@media (max-width:767px){
  footer > div:first-child {
     /* padding: 1em 2em;*/
  }
}

footer .titF{
  font-weight:bold;
  font-size:1.4em;

}

footer .raya{
  width: 25%;
  border: solid 2px var(--color1);
  margin-bottom: 1em;
}

footer .raya.raya2{
  border: solid 2px var(--color2);
}

footer .raya.raya3{
  border: solid 2px var(--color3);
}



@media (max-width:767px){
  footer .line2 h4{
    font-size: 1.5em;
  }
}

footer .itemsF{
  font-size:1.2em;
}

footer .textoFooter{
  line-height:1.2;
  font-size:1em;
}

@media (max-width:767px){
  footer .textoFooter{
    font-size:0.8em;
  }
}


/**********************/
/**** CONTENT *********/
/**********************/
body > .ruta{
  display:block;
  height:2em;
  margin-top:2em;
}



@media (max-width:1024px){
  body{
    width: 95%;
    margin-left: 2.5%;
  }
}

@media (max-width:767px){
  body{
    width: 96%;
    margin-left: 2%;
  }
}

body > .ruta .item{
  font-family: font-text;
  color: black;
}

body > .ruta .item .flecha{
  font-family: font4;
    position: relative;
    top: 0.1em;
    margin-left: 0.1em;
    margin-right: 0.5em;
}
/**********************/
/**** CONTENT *********/
/**********************/
body > .content{
	padding-top:2em;
	width:100%;
  text-align:center;
  position: relative;
  z-index: 0;
}

@media (max-width:767px){
 body > .content{
  padding-top: 0em;
 }
}

a:visited{
	color:inherit;
}
a:hover{
	color:inherit;
	text-decoration:none;
}
a{
	text-decoration:none;
	color:inherit;
}

p{
  line-height:1.1 !important;
}

/*****************/
/**** cesta ******/
/*****************/

.btn-pedido .carga-pedido{
  height:1em;
  margin-right:0.5em;
  position:relative;
  top:-1px;
}

.cont-btn-pedido{
  position:relative;
}

.cont-btn-pedido .info{
  position:absolute;
  top:0.75em;
  width:100%;
  color:#3a3a3a;
  font-weight:bold;
}

.cont-btn-pedido .icono{
  height:1em;
  margin-right:0.5em;
  position:relative;
  top:-1px;
}

.enlace{
  color:blue;
  text-decoration:underline;
}

header .b3 .flechaAbajo{
  border-top: solid 5px var(--colorSlider);
    border-bottom: solid 5px transparent;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    width: 10px;
    display: inline-block;
    height: 10px;
    position: relative;
    top: 3px;
    cursor: pointer;
}

header .text_carrito{
    position: relative;
    top: -3px;
    padding-top: 6px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
}

header .vertical-align-top{
  vertical-align: top !important;
}

/*****************/
/**** movil ******/
/*****************/


@media (max-width:767px){
  .content.registro{
    width: 90%;
    margin-left: 5%;
  }
  .font-md-menos{
    font-size: 0.8em !important;
  }
  .font-h3-movil{
    font-size: 1.2em !important;
  }
}

/*** LOADER ***/
.loader:before,
.loader:after,
.loader {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation-duration: 1.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.loader {
  margin: 8em auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  animation-delay: 0.16s;
  animation-name: load7_1;
}
.loader:before {
  left: -3.5em;
  animation-name: load7_2;
}
.loader:after {
  left: 3.5em;
  animation-delay: 0.32s;
  animation-name: load7_3;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}



@keyframes load7_1 {
  0%{}
  80%{}
  100% {
    box-shadow: 0 2.5em 0 -1.3em #var(--color2);
  }
  40% {
    box-shadow: 0 2.5em 0 0 var(--color2);
  }
}
@keyframes load7_2 {
  0%{}
  80%{}
  100% {
    box-shadow: 0 2.5em 0 -1.3em #var(--color1);
  }
  40% {
    box-shadow: 0 2.5em 0 0 var(--color1);
  }
}
@keyframes load7_3{
  0%{}
  80%{}
  100% {
    box-shadow: 0 2.5em 0 -1.3em #var(--color3);
  }
  40% {
    box-shadow: 0 2.5em 0 0 var(--color3);
  }
}

/******************/
/*****REALIZAR*****/
/******************/
.realizar{
  background-color: white;
  position: fixed;
  top: 0;
  right: -17em;
  width: 25%;
  height: 100%;
  border-left: solid 1px gray;
  z-index: 1000;
  padding: 5em 1em;
  font-family: font-text;
  overflow: auto;
}

@media (max-width:768px){
  .realizar{
    width: 75%;
  }
}

.realizar .titulo{
  font-size: 0.9em;
  font-family: font-title;
}

.realizar .items{
  margin-top: 2em;
  font-size: 0.7em;
  overflow: auto;
}
.realizar .item img{
  height: 5em;
}

.realizar .item{
  margin-bottom: 5em;
}

.realizar .item .nombre{
  line-height: 1.1;
}
.realizar .item .variante{
  line-height: 1.1;
}

.realizar .cerrar{
  position: absolute;
  top: 0.75em;
  left: 1em;
  cursor: pointer;
  font-size: 0.7em;
}

.headerCesta{
  cursor: pointer;
  margin-top: -4px;
}