* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
}

textarea {
  field-sizing:content; 
  max-height: 100px;
  width: 90%;
  padding: 5px;
}

.contenedor {
	background:white; 
  /*background-image: url("../img/Fondo400x.png");*/
	width:100%;
	margin:auto; /*Centra el contenedor en la pantalla*/
	font-family:Arial, sans-serif, Verdana;

	/* Flexbox */
	display:flex;
	flex-flow:row wrap; /*esto equivale a flex-direction:row; flex-wrap:wrap;*/
}

body {
	background:#e9e9e9;
  font-family:Arial, sans-serif, Verdana;
}

header {
	background:#d1052a;
	position:fixed;
	width:100%;
	padding:20px;
	
  z-index:1;
	color: #fff;

	/* Flexbox */
	display: flex;
  flex-wrap:wrap;/* Esto es para que si el menú no cabe lo pase para abajo sin afectar el tamaño*/
	justify-content:space-between;
	
  
	flex-direction:row;
	z-index: 2;
}

header .logo {
	color:#fff;
	font-size:30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
  width:100%;
}

header .logo img {
	width:50px;
	vertical-align: top;
}


header .logo a, .MenuLink {
	color:#fff;
	text-decoration: none;
	line-height:50px;
}

header nav {
	width:50%;
	/* Flexbox */

	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

header nav a {
	background:#c0392b;
	color:#fff;
	text-align: center;
	text-decoration: none;
	padding:10px; 

	/* Flexbox */
	flex-grow:1; /*Para que todos los elementos abarquen el mismo tamaño al 100%*/
}

header nav a:hover {
	background:#e74c3c;
}

.main {
  background-image: url("../img/Fondo400x.png");
	padding:20px;
  margin:0;
  width: 100vw;
  
	/* Flexbox */
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
	/*align-content:stretch;*/
	align-items:center;
	
	flex:1 1 100%;
	/*flex:1; Con esto se adaptaría al tamaño de la ventana del navegador*/
	
	padding-top: 140px;
	padding-bottom: 100px;
	
}

.material-symbols-outlined {
  margin-right:3px;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}

.main article {
  border:1px solid red;
  border-radius:5px;
  padding:10px; 
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.5);
  background: linear-gradient(#f87f8e, #ece2a8);
  width:300px;
  align-self:stretch;
  margin-bottom:20px;
  height:auto;
  padding-bottom:20px;
}

.main article a {
	text-decoration:none;
	color:#111;
	text-align:center;
}

.main article h2 {
	height:50px;
  text-align:center;
}

.main article a .contImg{
  width: 260px; 
  height:260px;
  display:grid;
  place-items:center;
}

.main article a .contImg .divImg {
  width: 90%; 
  height:90%;
  border-radius: 5px;
}

.main article .botArt {
  margin:10px;
  text-align:center;
}

.centrar {
  display:flex;
  align-items:center;
}
footer {
	background:#d1052a;
	width: 100%;
	padding:20px;

	/* Flexbox */
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
	
	position:fixed;
	bottom:0px;
	height:80px;
  z-index: 2;
}
footer div a {
  text-decoration:none;
}
footer div a img, .btnWhats {
  margin:2px;
  border-radius:50%;
  border:1px solid gray;
}

.abtnBlancoNegro {
  font-size:1.1em;
  padding:5px;
  margin:5px;
  border-radius:5px;
}
.abtnBlancoNegro:link, .abtnBlancoNegro:visited, .abtnBlancoNegro:active {
  color:white;
  background-color:#111111;
  text-decoration:none;
}
.abtnBlancoNegro:hover {
  background-color:#d1052a;
}

.msg-ubica{
  display:fixed;
  top:0;
  width:100%;
  background-color:yellow;
  color:red;
  padding:10px;
  border:1px solid orange;
  border-radius:5px;
}

.redondo {
  border-radius:50%;
}

.txtbuscar {
  width:60vw;
  margin-left:5%;
  border-radius:5px;
  font-size:1.1rem;
}

.msgOrange{
  color:red;
  background-color:orange;
  width:100vw;
  padding:5px;
  text-align:center;
}

/*INICIO pedido.php*/

.Articu {
  border:1px solid red;
  border-radius:5px;
  box-shadow:5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to right, #f6b08e, #fafcf2);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:2px;
  margin:5px;
  width:31vw;
  align-self:stretch;
}
.Articu .titulo{
  grid-column:span 2;
  padding:3px;
}
.Articu .detalle{
  display:block;
  margin-top:10px;
}

.CanArt {
  text-align:center;
  width:50%;
  background-color: transparent;
  border: none;
  font-weight:bold;
}

.CanSub{
  width:90%;
  margin:3px;
}

.totPed{
  width:120px;
  font-size:1.3em;
  background:black;
  color:white;
}

.totPedEtiq{
  color:silver;
  font-size:1.3em;
}

.SumRes{
  width:30px;
  margin-top: 20px;
  /*margin:5px auto;
  height:30px;*/
  background-color:rgba(185, 86, 79, 0.2);
  border:1px solid orange;
  border-radius: 50%;
  font-weight:bold;
  font-size: 1.2em;
  cursor: pointer;
  padding: 5px;
}	

.BotSum{
  color: green;
  margin-top: -5px;
}

.BotRes{
  color: red;
  margin-top: -10px;
}

.flexAround{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  align-items:center;
}

.spanChkb {
  display: inline-block;
  position: relative;
   height: 1em;
  width: 1em; 
  background: orangered;
  border-radius: 100%;
  transition: all 0.7s;
  margin-right: 5px;
}
.labelChkb {
  cursor:pointer;
}
.labelChkb input:checked ~ .spanChkb {
  border: 1px solid red;
}
.spanChkb:after {
  content: "";
  position: absolute;
  border: solid #111;
  border-width: 0 0.30em 0.30em 0;
  transform: rotate(45deg);
  width: .2em;
  height: .7em;
  left: .3em;
  top:-0.2em;
  opacity: 0;
  transition: .3s ease;
}

.labelChkb input:checked ~ .spanChkb::after{
  opacity: 1;
}
/*

.Opcion label:hover{
  background:rgba(50,100,150,0.2);
}
.Opcion label:before{
  content:"";
  width:15px;
  height:15px;
  display:inline-block;
  background:none;
  border:2px solid red;
  border-radius:50%;
  position:absolute;
  left:15px;
  top:4px;
}	

input[type="radio"]:checked + label {
  padding:5px 15px;
  background:rgba(250,0,0,0.2);
  border:1px solid red;
  border-radius:5px;
  font-weight:bold;
}

input[type="radio"]:checked + label:before {
  display:none;
}
*/
#MostImg
{
  width:100vw;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(0,0,0,.7);
  z-index:10;
  visibility:hidden;
}

.vidrio{
  background-color:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.5);
  padding:10px;
  margin:20px 30%;
  backdrop-filter:blur(5px);
  box-shadow:0 25px 45px rgba(0,0,0,.1);
  border-right:1px solid rgba(255,255,255.2);
  border-bottom:1px solid rgba(255,255,255.2);
}

#ContImg{
  display:grid;
  place-items:center; 
  margin:20px auto;
  border-radius:5px;
  border:1px solid silver;
}

.cierraImg{
  display:grid;
  place-items:center;
  margin:20px 40%; 
  background-color:rgba(0,0,0,.2);
  color:white;
  font-size:2em;
  border:solid 1px white; 
  padding:5px;
  border-radius:5px;
  text-decoration:none;
}
.cierraImg:hover {
  background-color:rgba(0,0,0,.8);
}

.imgArtCont{
  width: 100px; 
  height:100px;
  display:grid;
  place-items:center;
  margin:auto;
}

.imgArt{
  width: 90%; 
  height:90%;
  border-radius: 5px;
  cursor: pointer;
}

.promo{
  font-size:.8em;
  background-color:red;
  color:yellow;
  padding:3px;
  border-radius:5px;
  border: 1px ridge orangered;
}

.Descue{
  color:yellow;
  display:block;
  text-align:right;
  font-size:1.1em
}

.TabPrec{
  margin:auto;
  grid-column:span 3;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap:2px;
  padding:0 2px 5px 0;
}

.SubRojo{
  border-bottom:1px solid red;
  margin-bottom: 5px;
}

.Extras {
  grid-column:span 4;
  padding-bottom:5px;
  border-bottom:1px dotted black;
  margin-bottom:10px;
  background-color:rgba(238,89,14,0.2);
  transition: .5s ease;
  display:none;
}
/*FIN pedido.php*/

/*INICIO ComprDatos.php*/
.Descr {
	grid-column:span 3;	
	background:rgba(250,150,75,.5);
	padding:3px;
	font-weight: bold;
}

.DesgPed{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top:20px;
  gap: 8px;
}

.EncabTabla{
	background:rgba(255,20,10,.8);
	color:white;
	padding:5px;
	border-radius:5px 5px 0 0;
	font-style: italic;
	font-weight: bold;
	text-align:center;
}

.lugar {
	background:#E12E15;
	border:1px solid #E12E15;
	color:white;
	padding:3px;
	border-radius:5px 5px 0 0;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.lugarCont{
	border:1px solid #E12E15;
	border-radius: 0 0 5px 5px;
	padding:3px;
	grid-column:span 3;
	display:block;
}

.ModifPedido {
  padding:5px;
  margin:10px;
  border-radius:10px;
}

.TotPagTabla{
  text-align:right;
  padding:10px 20px;
}
/*FIN ComprDatos.php*/

/*INICIO ConfPedido.php*/
.Encabezado{
	background:rgba(0,0,0,.8);
	color:white;
	padding:5px;
	border-radius:5px 5px 0 0;
	font-style: italic;
	font-weight: bold;
	text-align:center;
}

.seccion{
  padding:120px 10px;
  margin:auto;
}
/*FIN ConfPedido.php*/

/* FORM */
.form-login {
  margin:0 auto;
  padding:20px 15px;
  border:1px solid rgba(0,0,0,0.5);
  border-radius:5px;
  margin-top:20px;
  font-size:16px;
  font-family:sans-serif;
	width:50vw;
}

.container-input {
  padding-top:20px;
  position:relative;
  margin-bottom:15px;
	width:100%;
}

.field {
  border:none;
  outline:none;
  box-shadow:0 1px #9e9e9e;
  padding:8px 3px;
  background:transparent;
  transition:all .3s;
  display:block;
  width:100%;
}

.label {
  position:absolute;
  left:0;
  top:20px;
  color:#9e9e9e;
  padding:8px 3px;
  z-index:-1;
  transition:all .3s;
}

/*El siguiente selector es para indicar el siguiente label después del input*/
.field:focus ~ .label,.field:valid ~ .label {
  top:0;
  font-size:.8rem;  
}

.field:focus ~ .label {
  color:red;
}

.field:focus {
  box-shadow:0 2px red;
}

.inform{
	display:block;
	margin-top:100px;
	margin-bottom:100px;
	width:100%;
}

.mens {
	border-radius:5px;
	background-color:transparent;
	color:yellow;
	font-weight:bold;
	padding:5px;
}	

/* BOTON */
.btn-82,
.btn-82 *,
.btn-82 :after,
.btn-82 :before,
.btn-82:after,
.btn-82:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-82 {
  -webkit-tap-highlight-color: transparent;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
.btn-82:disabled {
  cursor: default;
}
.btn-82:-moz-focusring {
  outline: auto;
}
.btn-82 svg {
  display: block;
}
.btn-82 [hidden] {
  display: none;
}
.btn-82 {
  background: none;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  padding: 1.2rem 1.5rem;
  position: relative;
}
.btn-82 span {
  font-weight: 900;
  mix-blend-mode: difference;
  transition: opacity 0.2s;
}
.btn-82:hover span {
  -webkit-animation: text-reset 0.2s 0.8s forwards;
  animation: text-reset 0.2s 0.8s forwards;
  opacity: 0;
}
.btn-82:after,
.btn-82:before {
  border: 4px solid #fff;
  border-radius: 999px;
  content: "";
  height: 60%;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: height 0.2s;
  width: 100%;
}
.btn-82:after {
  background: #fff;
  border: none;
  height: 2rem;
  width: 0;
  z-index: -1;
}
.btn-82:hover:before {
  -webkit-animation: border-reset 0.2s linear 0.78s forwards;
  animation: border-reset 0.2s linear 0.78s forwards;
  height: 2rem;
}
.btn-82:hover:after {
  -webkit-animation: progress-bar 1s;
  animation: progress-bar 1s;
}

/*INICIO Principal.php*/
.intro{
	padding-top:120px;
	background-image: linear-gradient(to bottom, #efc881, #ffb400);
	height:100vh;
	width:100vw;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:flex-center;
	align-items:center;
	max-width:900px;
	margin:auto;
	}

  .opcion{
    padding:120px;
    background-image: linear-gradient(to bottom, #ffb400, #ff603c);
    height:50vh;
    width:100vw;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:flex-center;
    align-items:center;
    max-width:900px;
    margin:auto;
  }
  
  .lugarPrinc{
    padding:120px;
    background-image: linear-gradient(to bottom, #ff603c, #ffa08c);
    
    text-align:center;
    height:100vh;
    width:100vw;
    display:flex;
    flex-direction:column;
    justify-content:flex-center;
    align-items:center;
    max-width:900px;
    margin:auto;
  }

  .btnPrinc {
    background-color: red; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1em;
    margin: 4px 2px;
    cursor: pointer;
    border-radius:10px;
  }
  
  .carrusel {
    width:90%;
    max-width:120em;
    overflow: hidden;
  }
  
  .carrusel .grande {
    width:100%;
    display:flex;
    flex-flow:row nowrap;
    justify-content:space-between;
    align-items:center;
    transition:all .5s ease;
    transform:translateX(0%);
  }
  
  .carrusel .imag {
    width:calc=(100% / 4 - 2em);
    height:50vh;
    display:grid;
    place-items:center;
    margin:auto;
  }
  
  .carrusel .puntos {
    width:100%;
    margin:1em 0 0;
    padding:.4em;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
  }
  
  .carrusel .punto {
    width:2em;
    margin:2em;
    height:2em;
    color:black;
    border-radius:50%;
  }
  
  .Horario{
    background:rgba(150,0,0,0.2);
    padding:10px;
    border-radius:10px;
  }
  .mapa {
    border:0;
    border-radius:5px;
  }
  /*FIN Principal.php*/

  
/*INICIO opciones.php*/
.visitas{
  background-color:white;
  color:white;
  display:block;
  width:100vw;
}

/*FIN opciones.php*/

/*INICIO index.php*/

.abtn {
  background-color:#d1052a;
  color:white;
  font-size:1.1em;
  padding:10px;
  margin:auto;
  border-radius:5px;
  cursor: pointer;  
  width:120px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content: center;
}

.abtn:hover {
  color:white;
  background-color:#f3293c;
}


.Mesero{
  width:450px;
  height:390px;
}

.posMenu{
  position:fixed;
  left:25%;
  top:450px;
  z-index:10;
}

.imgOrden{
  opacity:0.8;width:300px;float:right;margin-top:-50px;
  /*height:50px;
  opacity:0.8;*/
}

.LisAli {
  width:290px;
  border:none;
  height:50px;
  margin-left:60px;
  font-weight:bold;
  background: transparent;
}

details{
  margin-bottom: 15px;
  border-bottom: 2px solid #d1052a;
  border-radius: 10px;
  padding: 5px;
  width: 88vw;
  max-width: 815px;
}

summary {
  max-width: 800px;
  width: 85vw;
  margin: 5px;
  padding: 5px;
  border-radius: 10px;
  font-size: 1.1em;
  font-weight: bold;
  background:rgba(255,20,10,.9);
  color: white;
  box-shadow: rgba(209, 05, 42, 0.4) 0px 10px 20px, rgba(209, 05, 42, 0.53) 0px 6px 6px;
}

/*FIN index.php*/


/*INICIO LisPedidos.php*/

.btnAyuda{
  width:95%;
  text-align:right;
  position:fixed;
}

/*FIN LisPedidos.php*/

/*INICIO LisPedidos.php*/

.OpcMenu{
  grid-column:span 5;
  font-size:1.1em;
  font-weight:bold;
  background-color:rgba(255,20,10,.8);
}

.DescrLP {
	grid-column:span 4;	
	background:rgba(250,150,75,.5);
	padding:3px;
	font-weight: bold;
}

/*FIN LisPedidos.php*/

/*INICIO ConfInic.php*/
.chkBtn{
  margin: 10px;
}
.chkBtn ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}	
.chkBtn ul li {
  display: inline-block;
}	
.chkBtn ul li label {
  display: inline-block;
  background-color: #ffc9bb;
  padding: 4px 6px;
  color:#c0392b;
  transition: .3s all ease;
  border: 1px solid #c0392b;
  cursor: pointer;
}
.chkBtn ul li label:hover {
  border: 1px solid gray;
}
.chkBtn ul li input[type="checkbox"]:checked + label {
  border: 1px solid black;
  background-color: red;
  color:white;
}	
.chkBtn ul li input[type="checkbox"] {
  display: none;
}	
.botonChk{
  appearance:none;
  position:relative;
  display:inline-block;
  background:lightgrey;
  height:1.65rem;
  width:2.75rem;
  vertical-align:middle;
  border-radius:2rem;
  box-shadow:0px 1px 3px #0003 inset;
  transition:.25s linear background;
}

.botonChk::before {
  content:"";
  display:block;
  width:1.25rem;
  height:1.25rem;
  background:#fff;
  border-radius:1.2rem;
  position:absolute;
  top:0.2rem;
  left:0.2rem;
  box-shadow:0px 1px 3px #0003;
  transition:.25s linear transform;
  transform:translate(0rem);
}
:checked {
  background:red;
}
:checked::before {
  transform:translate(1rem);
}
/*FIN ConfInic.php*/

/*INICIO Menu.php*/

ul {
  list-style:none;
}

.nav {
  width:100%;
  height:100%;
  position:fixed;
  background-color:#d1052a;
  overflow:hidden;
  max-height:0;
  transition:max-height 0.5s ease-out;
}

.menu a {
  display:block;
  padding:10px;
  color:white;
  background-color: brown;
  width: 100vw; 
}

.menu a:hover {
  background-color:red;
}
.hamb {
  cursor:pointer;
  float:right;
  padding:40px 20px;
}

.hamb-line {
  background:white;
  display:block;
  height:2px;
  position:relative;
  width:24px;
}


.hamb-line::after, .hamb-line::before {
background-color:white;
content:'';
display:block;
height:100%;
position:absolute;
transition:all .2s ease-out;
width:100%;
}

.hamb-line::before {
top:5px;
}

.hamb-line::after {
top:-5px;
}

.side-menu {
display:none;
}

.side-menu:checked ~ nav {
max-height:90%;
/* background-color:cyan; */
margin-top: 130px;
}

.side-menu:checked ~ a {
background-color:yellow;
}

.side-menu:checked ~ .hamb .hamb-line {
background:transparent;
}

.side-menu:checked ~ .hamb .hamb-line::before {
transform:rotate(-45deg);
top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after  {
transform:rotate(45deg);
top:0;
}

/*FIN Menu.php*/




/*INICIO MenuEnc.php*/
/*TABS INICIO*/
.ContTabs {
  width:90%;
  /* max-width:120em; */
  background-color:silver;
  padding:1em;
  font-family: sans-serif;
  font-size:.8em;
}
.ContTabs .ul {
  width:90%;
  background-color:silver;
  display:flex;
  flex-flow:row nowrap;
  justify-content:flex-start;
  align-items:center;
}
.ContTabs .li{
  background-color:red;
  color: white;
  padding:1em;
  margin:0 2px 0 0;
  list-style-type:none;
  transition:all .5s ease;
  cursor:pointer;
}

.ContTabs .li.activo {
  background-color:white;
  color:red;
  }
.ContTabs .subcontenedor{
  min-height:20vh;
  background-color:white;
  position:relative;
  top:-5px; 
  height:40vh;
  overflow: auto;
}
.ContTabs .bloque{
  background-color:white;
  color:red;
  padding:1em;
  position:absolute;
  opacity:0;
  transform:translateY(50%);
  transition:all .5s ease;
  z-index: 0;
}

.ContTabs .bloque.activo{
    opacity:1;
    transform:translateY(0%);
    z-index: 1;
}
/*TABS FIN*/
/*Estrellas INICIO*/
    
.rating:not(:checked) > input {
  position: relative;
  appearance: none;
}
.rating {
  width:200px;
}
.rating:not(:checked) > label {
    float: right;
    cursor: pointer;
    font-size: 30px;
    color: #666;
}

.rating:not(:checked) > label::before {
    content: '★';
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover + input:checked ~ label {
    color:#e58e09;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color:#ff9e0b;
}

.rating > input:checked ~ label {
    color:#ffa723;
}
/*Estrellas FIN*/
/*Botón chk INICIO */
.chkBtn{
  margin: 10px;
}
.chkBtn ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 15px;
}	
.chkBtn ul li {
  display: inline-block;
}	
.chkBtn ul li label {
  display: inline-block;
  padding: 4px 6px;
  color:#c0392b;
  border: 2px solid red;
  transition: .3s all ease;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.chkBtn ul li label:hover {
  border: 1px solid gray;
}
.chkBtn ul li input[type="checkbox"]:checked + label,
.chkBtn ul li input[type="radio"]:checked + label {
  border: 1px solid black;
  background-color: red;
  color:white;
}	
.chkBtn ul li input[type="checkbox"],
.chkBtn ul li input[type="radio"]
 {
  display: none;
}	

/*Botón chk FIN */

/*FIN MenuEnc.php*/
/*-----------------*/
@-webkit-keyframes progress-bar {
  0% {
    opacity: 1;
    width: 0;
  }
  10% {
    opacity: 1;
    width: 15%;
  }
  25% {
    opacity: 1;
    width: 25%;
  }
  40% {
    opacity: 1;
    width: 35%;
  }
  55% {
    opacity: 1;
    width: 75%;
  }
  60% {
    opacity: 1;
    width: 100%;
  }
  to {
    opacity: 0;
    width: 100%;
  }
}
@keyframes progress-bar {
  0% {
    opacity: 1;
    width: 0;
  }
  10% {
    opacity: 1;
    width: 15%;
  }
  25% {
    opacity: 1;
    width: 25%;
  }
  40% {
    opacity: 1;
    width: 35%;
  }
  55% {
    opacity: 1;
    width: 75%;
  }
  60% {
    opacity: 1;
    width: 100%;
  }
  to {
    opacity: 0;
    width: 100%;
  }
}
@-webkit-keyframes border-reset {
  0% {
    height: 2rem !important;
  }
  to {
    height: 100% !important;
  }
}
@keyframes border-reset {
  0% {
    height: 2rem !important;
  }
  to {
    height: 100% !important;
  }
}
@-webkit-keyframes text-reset {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes text-reset {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* boton */
/*
@media screen and (max-width: 800px) {
	.form-login {
		width:70vw;
    background-color: cyan;
    margin: auto;
	}
  
  .Articu {
    width:45vw;	
  }
}
*/

@media screen and (max-width: 1000px) {		
	.contenedor {
		flex-direction:column;
	}

	header {
		flex-direction:column;
		padding:0;
	}

	header .logo {
		margin:20px 0;
	}

	header nav {
		width: 100%;
	}

  .Articu {
    width:75vw;	
  }
  .vidrio{
    margin:20px 20%;
  }
}

@media screen and (max-width: 700px) {
  .form-login {
		width:95vw;
	}
	footer {
		justify-content:space-around;
	}

  .Articu {
    width:90vw;	
  }
  .vidrio{
    margin:20px 10%;
  }
  .ContTabs .li{
    font-size:.7em;
  }
  
}

@media (min-width: 700px) {
  .nav {
    max-height:none;
    top:0;
    position:relative;
    float:right;
    width:fit-content;
    background-color:transparent;
  }

  .menu li {
      float:left;
  }

  .menu a:hover {
    background-color:red;
  }

  .menu a {
    width: 100%; 
}

  .hamb {
      display:none;
  }
}