@charset"utf-8";

@font-face {
  font-family: 'robotoblack';
  src: url('../fonts/roboto/roboto-black-webfont.eot');
  src: url('../fonts/roboto/roboto-black-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-black-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-black-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-black-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-black-webfont.svg#robotoblack') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotoblack_italic';
  src: url('../fonts/roboto/roboto-blackitalic-webfont.eot');
  src: url('../fonts/roboto/roboto-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-blackitalic-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-blackitalic-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-blackitalic-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-blackitalic-webfont.svg#robotoblack_italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotobold';
  src: url('../fonts/roboto/roboto-bold-webfont.eot');
  src: url('../fonts/roboto/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-bold-webfont.svg#robotobold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotobold_italic';
  src: url('../fonts/roboto/roboto-bolditalic-webfont.eot');
  src: url('../fonts/roboto/roboto-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-bolditalic-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-bolditalic-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-bolditalic-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-bolditalic-webfont.svg#robotobold_italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotoitalic';
  src: url('../fonts/roboto/roboto-italic-webfont.eot');
  src: url('../fonts/roboto/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-italic-webfont.svg#robotoitalic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotolight';
  src: url('../fonts/roboto/roboto-light-webfont.eot');
  src: url('../fonts/roboto/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-light-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-light-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-light-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-light-webfont.svg#robotolight') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotolight_italic';
  src: url('../fonts/roboto/roboto-lightitalic-webfont.eot');
  src: url('../fonts/roboto/roboto-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-lightitalic-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-lightitalic-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-lightitalic-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-lightitalic-webfont.svg#robotolight_italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotomedium';
  src: url('../fonts/roboto/roboto-medium-webfont.eot');
  src: url('../fonts/roboto/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-medium-webfont.svg#robotomedium') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotomedium_italic';
  src: url('../fonts/roboto/roboto-mediumitalic-webfont.eot');
  src: url('../fonts/roboto/roboto-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-mediumitalic-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-mediumitalic-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-mediumitalic-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-mediumitalic-webfont.svg#robotomedium_italic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotoregular';
  src: url('../fonts/roboto/roboto-regular-webfont.eot');
  src: url('../fonts/roboto/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-regular-webfont.svg#robotoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotothin';
  src: url('../fonts/roboto/roboto-thin-webfont.eot');
  src: url('../fonts/roboto/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-thin-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-thin-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-thin-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-thin-webfont.svg#robotothin') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'robotothin_italic';
  src: url('../fonts/roboto/roboto-thinitalic-webfont.eot');
  src: url('../fonts/roboto/roboto-thinitalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto/roboto-thinitalic-webfont.woff2') format('woff2'),
    url('../fonts/roboto/roboto-thinitalic-webfont.woff') format('woff'),
    url('../fonts/roboto/roboto-thinitalic-webfont.ttf') format('truetype'),
    url('../fonts/roboto/roboto-thinitalic-webfont.svg#robotothin_italic') format('svg');
  font-weight: normal;
  font-style: normal;
}










* {
  margin: 0;
  padding: 0;
}








/*index*/

body {
  background-color: black;
}

#header1 {
  background-image: url(../img/header.jpg);
  border-bottom-color: rgb(255, 106, 0);
  border-style: solid;
  border-width: 0.2em;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
} 

#inicio1 {
  display: flex;
  flex-direction: column;
  align-self: center;
}

#marca1 { 
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  margin-top: 1em;
}

h1 {
  font-family: 'robotoblack'; 
  color: white;
  font-size: 70px;
  font-weight: bolder;
}

h2 { 
  font-family: 'robotolight_italic';
  text-align: center;
  font-size: 20px;
  border-top-color: white;
  border-top-style: solid;
  color: white;
  padding: 0.3em;
  margin-bottom: 1em;
}

#bienvenida {
  display: block;
  background-color: #ff6c00;
  padding: 1px;
}

h3 { 
  font-family: 'robotobold';
  text-align: center;
  margin: 0.5em;
  font-size: 16px;
  color: #000000;
}

h4 {
  font-family:'robotomedium'; 
  color: ;
  margin: 1em;
  font-size: 15px;
  text-align: center;
  color: #ff6c00;
}

#ingreso {
  margin: 3em auto;
  display: flex;
  flex-direction: row;
  align-content: space-around;
  justify-content: space-around;
  width: 70%;
  font-family: 'robotoregular';
  font-size: 13px;
}

#parte1 {
  display: flex;
  flex-direction: column;
}

#campos1 { 
  display: flex;
  color: white;
  flex-direction: column;
  margin: 0.2em;
}

#botondeingreso {
  display: block; 
  margin: 2em auto;
  background-color: #ff6c00;
  font-family: 'robotobold';
  color: white;
  padding: 0.3em;
  border-radius: 0.3em;
  border: 0.2px solid;
  width: 40%;
  text-align: center;
  text-decoration: none;
}

#redes {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 50%;
  margin: 0 auto;
}

#parte2 {
  display: flex;
  flex-direction: column;
}

#campos2 {
  list-style: none;
  display: flex;
  color: white;
  flex-direction: column;
  margin-top: 1em;  
}

#acepto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1em;
  color: white;
}

#terminos {
  color: white;
  text-decoration: underline;
}

#footerpaginasimple {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  width: 100%;

  position: absolute;
  z-index: 100;
  bottom: 0;
}

#linkfooter {
  border: #ff6c00 solid 2px;
  text-decoration: none;
  color: white;
  font-family: 'robotoblack';
  font-size: 35.5px;
  text-align: center;
  padding: 0.15em 0.8em 0.2em 0.8em;
  width: 13%;
  height: auto;
  margin: 0;
}

#footerp {
  border: #ff6c00 solid 2px;
  font-family: 'robotoregular';
  font-size: 10px;
  background-color: #ff6c00;
  color: white;
  padding: 1.5em 5em 1.65em 5em;
  text-align: center;
}

#logofooter {
  border: #ff6c00 solid 2px;
  width: 13%;
  padding: 0.2em 0.8em 0.1em 0.8em;
  margin: 0;
}








/*webinicio*/

#menudesplegable {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  font-family: 'robotomedium';
  width: 100%;
  margin: 0;
}

ul {
  list-style: none;
}

.nav > li {
  float: left;
}

.nav li a {
  background-color: #ff6c00;
  color: #fff;
  text-decoration: none;
  padding: 0.5em 1em 0.5em 1em;
  display: block;
  margin: 0;
}

.nav li a:hover {
  background-color:#434343;
}

.nav li ul {
  display: none;
  position: absolute;
}

.nav li:hover > ul {
  display: block;
}

#u {
  right: 10.6%;
}

#m {
  right: 3.5%;
}

#h {
  right: 0.2%;
}

#inside {
  font-family: 'robotomedium';
  font-size: 13px; 
  text-align: center;
}

#cuerpo {
  display: flex;
  flex-direction: row;
  margin-top: 2em;
}

#caracteristicas {
  display: flex;
  flex-direction: column;
  border-color: #ff6c00;
  border-style: solid;
  border-width: 0.2em;
  border-radius: 0.5em;
  font-family: "robotothin";
  font-size: 12px;
  color: white;
  text-align: left;
  padding: 1em;
  margin-left: 1em;
  width: 10%;
  height: 480px;
}

H6 {
  font-family: "robotomedium";
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 1em;
  text-align: center;
}

#filtros {
  list-style: none;
}

#filtros li {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

h5 {
  font-family: 'robotobold_italic';
  font-size: 14px;
  margin: 0.5em 0 0.5em 0;
}

#elementos {
  width: 85%;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
}

#linea {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

h7 {
  font-family: "robotomedium";
  color: #ffffff;
  font-size: 15px;
  margin-left: 1.5em;
  width: 25%;
}

#buscador {
  display: flex;
  background-color:#7e7d7c;
  padding: 1px 0.3em 1px 0.3em;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  width: 44.5%;
  margin-right: 1.5em;
  height: 2em;
  border-radius: 0.3em;
}

#pbuscador {
  font-family: 'robotobold';
  font-size: 16px;
  color: black;
  padding: 0.3em;
}

#buscador input {
  width: 100%;
  margin: 0 1% 0 1%;
}

#iconodelupa {
  width: 5%;
  margin: 0 0.3em 0 0.3em;
}

#iconodelupa img {
  width: 100%;
  height: auto;
}

#objetos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1em;
}

#objetos a {
  width: 23%;
  height: auto;
  margin: 0.5em;
}

#objetos a img {
  width: 100%;
}

#banner {    
  display: block;
  margin: 1em auto 3em;
}

#footerpaginascroll {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  width: 100%;
}

#footerps {
  border: #ff6c00 solid 2px;
  font-family: 'robotoregular';
  font-size: 10px;
  background-color: #ff6c00;
  color: white;
  padding: 1.4em 5em 1.65em 5em;
  text-align: center;
}








/*webperfil*/

#iniciodepagina {
  display: block;
  background-color: #ff6c00;
  padding: 1px;
}

#cuerpodeperfil {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin: 3em auto;
  width: 50%;
}

#avatar {
  width: 40%;
  margin: auto;
}

#datospersonales {
  width: 50%;
  display: flex; 
  flex-direction: column;
}

#dato1 {
  color: white;
  list-style: circle; 
  list-style-position: inside;
  font-family: 'robotobold';
  margin: 0 0 0.5em 0;
}

#dato2 {
  color: white;
  list-style: none;
  font-family: 'robotoregular';
  margin: 0 0 1em 0;    
}

#dato4{
  color: black;
  display: block;
  background-color: #ff6c00;
  border-radius: 0.3em;
  list-style: none;
  font-family: 'robotobold';
  width: 30%;
  text-align: center;
  margin: 1em auto; 
  padding: 0.3em;
}








/*webnuevoproducto*/

#cuerpodenuevoproducto {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 3em;
  width: 100%;
}

#nuevoproducto {
  width: 50%;
}

#nuevoproducto img {
  display: block; 
  width: 50%;
  margin: 0 auto;
}

#datosnuevoproducto {
  color: white;
  width: 50%;
}

#datonp {
  font-family: 'robotobold';
  margin: 0 0 0.5em 0;
  display: flex;
  flex-direction: column;
  width: 80%;
}

#datonp select {
  font-family: 'robotomedium';
}







/*webmensajes*/

#cuerpodemensajes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
  margin-top: 3em;
  width: 100%;
}

#tipodemensaje {
  width: 20%;
}

#tipodemensaje a {
  text-decoration: none;
}

#tipodemensaje h4 {
  display: block;
  background-color: #ff6c00;
  margin: 0 auto 1em;
  color: white;
  font-family: 'robotobold';
  padding: 0.3em;
  border-radius: 0.3em;
  border: 0.2px solid;
  text-align: center;
  width: 50%;
}

#mensajes {
  width: 60%;
}

#lineademensajesenviados {
  background-color: #de9e70; 
  width: 100%;
  font-family: 'robotoregular';
  font-size: 14px;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.5em 0 0.5em;
}

#lineademensajesleidos {
  background-color: #f48f46; 
  width: 100%;
  font-family: 'robotoregular';
  font-size: 14px;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.5em 0 0.5em;
}

#lineademensajesnoleidos {
  background-color: #969090; 
  width: 100%;
  font-family: 'robotoregular';
  font-size: 14px;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.5em 0 0.5em;
}

#lineadetexto { 
  display: flex;
  flex-direction: row;
  width: 95%;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
}

#close {
  width: 2.5%;
  height: 80%;
}

#open {
  width: 2.4%;
  height: 100%;
}

#sent  {
  width: 4%;
  height: 90%;
}

#p1 {
  margin: 1%;
}

#p2 {
  font-family: 'robotobold';
}





/*webproductoseleccionado*/

#cuerpodeproducto {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 3em;
}

#producto {
  width: 50%;
}

#producto img {
  display: block;
  margin: 0 auto;
  border-style: solid;
  border-color: #ff6c00;
  border-width: 0.3em;
  width: 50%;
}

#datosdeproducto {
  width: 50%;
  display: flex;
  flex-direction: column;
} 

#titulo {
  font-family: 'robotoblack';
  color: #ff6c00;
  list-style: none;
  font-size: 1.5em;
  margin-bottom: 1em;
}

#dato3 {
  color: white;
  list-style: circle; 
  list-style: inside;
  font-family: 'robotobold';
  margin: 0 0 0.5em 0;
}

#contacto {
  display: block; 
  margin-top: 0.5em;
  background-color: #ff6c00;
  color: white;
  font-family: 'robotobold';
  padding: 0.3em;
  border-radius: 0.3em;
  border: 0.2px solid;
  width: 30%;
  text-align: center;
}

#contacto a {
  text-decoration: none;
  color: white;
}






/*RESPONSIVE*/


@media all and (min-width:0) and (max-width:25em) {







  /*index*/

  #logofadustore { width: 18%;}

  h1 {
    font-size: 50px;
  }

  h2 { 
    font-size: 14px;
  }

  h3 { 
    font-family: 'robotobold';
    text-align: center;
    margin: 0.5em;
    font-size: 12px;
    color: #000000;
  }

  #ingreso {
    flex-direction: column;
  }

  #parte1 {
    margin-bottom: 3em;
  }

  #footerpaginasimple {
    position: relative;
    flex-direction: column;
  }

  #linkfooter {
    width: 25.5em;
    font-size: 14px;
    margin: 0 auto;
    padding: 0.3em;
  }

  #footerp {
    border: #ff6c00 solid 2px;
    font-family: 'robotoregular';
    font-size: 10px;
    background-color: #ff6c00;
    color: white;
    padding: 0.4em;
    text-align: justify;
  }

  #logofooter {
    border: none;
    margin: 0.5em auto 0.5em;
    width: 50%;
  }










  /*webinicio*/

  .nav { 
    width: 100%;
  }

  .nav > li {
    float: left;
    width: 25%;
    text-align: center;
    font-size: 80%;
  }

  #u {
    right: 50%;
  }

  #m {
    right: 25.5%;
  }

  #h {
    right: 0.5%;
  }

  #cuerpo {
    flex-direction: column;
  }

  #caracteristicas {
    width: 85%;
  }

  #elementos {
    width: 92%;
  }

  #linea {
    width: 100%;
    flex-direction: column-reverse;
  }

  h7 {
    width: 93%;
    text-align: center;
  } 

  #buscador {
    margin: 2em auto;
    width: 100%;
  }

  #objetos {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1em;
  }

  #objetos a {

    width: 21%;
    height: auto;
    margin: 0.3em;
  }

  #banner {    
    width: 98%;
  }

  #footerpaginascroll {
    flex-direction: column;
  }









  /*webperfil*/

  #cuerpodeperfil {
    flex-direction: column;
    width: 94%;
  }

  #avatar {
    width: 100%;
    margin-bottom: 2em;
  }

  #datospersonales {
    width: 94%;
  }









  /*webnuevoproducto*/

  #cuerpodenuevoproducto {
    flex-direction: column;
    width: 100%;
    margin-bottom: 2em;
  }

  #nuevoproducto {
    width: 94%;
    margin-bottom: 2em;
  }

  #nuevoproducto img {
    width: 100%;
  }

  #datosnuevoproducto {
    width: 94%;
  }

  #datonp {
    width: 100%;
  }









  /*webproductoseleccionado*/

  #cuerpodeproducto {
    flex-direction: column;
  }

  #producto {
    width: 92%;
    margin: 0 auto 2em;
  }

  #producto img {
    width: 100%;
  }

  #datosdeproducto {
    width: 94%;
    display: flex;
    flex-direction: column;
  } 


  #contacto {
    margin-bottom: 2em;
    width: 96%;
  }










  /*webmensajes*/

  #cuerpodemensajes {
    flex-direction: column;
    width: 100%;
  }

  #tipodemensaje {
    width: 100%;
    margin-bottom: 2em;
  }

  #mensajes {
    width: 94%;
    margin: 0 auto 3em;
  }


  #lineademensajesenviados {
    width: 96%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    
    align-items: center;
  }

  #lineademensajesleidos {
    width: 96%;

  }

  #lineademensajesnoleidos {
    width: 96%;
  }

  #lineadetexto { 
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    
    padding: 0 1em 0 1em;
   
  }

  #close {
    width: 15px;
    height: 80%;
  }

  #open {
    width: 15px;
    height: 100%;
  }

  #sent  {
    width: 25px;
    height: 15px; 
  }

  #p1 {
    
    margin: 0.5em 0 0.5em 0;
  }

  #p2 {
  
    font-family: 'robotobold';
  }



}