/* GENERAL */
@import url('https://fonts.googleapis.com/css?family=Work+Sans');
*{
	font-family: 'Work Sans', sans-serif !important;
	text-decoration: none !important;
}

:focus {
outline-style: none;
}

::selection{
	background-color: #ff671b;
	color: #ffffff !important;
}

a{color: #343740;}
a:hover{color: #ff671b;}

body{
	background-image: url(/images/pattern.png);
	text-align: justify;
	padding: 0 !important;
    margin: 0;
	width: 100%;
	float: left;
	overflow: hidden;
}

header#header, #main, #footer {
    display: block;
	float: left;
	width: 100%;
}
/* END GENERAL */
html {
    width: 100%;
    max-width: 100%;
display: block;
float:left;}

/* HEADER */
a.logo img {
    margin: .5em auto;
    display: block;
    max-height: 60px;
}

#header{
	background-color: #ffffff;
	max-height: 150px;
	display: block;
	box-shadow: 0px 5px 20px 0px rgba(220,220,220,0.4);
}

.header-container{
	margin:auto;
}
/* HEADER */

/* ESTRUCTURA */
.col-md-12{
	width: 100%;
	float:left;
	padding: 0;
	margin: 0;
}

.col-md-6{
	width: 50%;
	float: left;
    padding: 0;	
}
/* END ESTRUCTURA*/

/* RESPONSIVE */
@media screen and (max-width: 800px){
	
}
/* END RESPONSIVE */




/* ANIMATIONS */
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-delay: .2s
}




.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-delay: 1s;
}

.fadeInLeft  {
	animation-delay: 1s;
    -webkit-animation-name: fadeInLeft ;
    animation-name: fadeInLeft ;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.fadeInRight  {
	animation-delay: 1s;
    -webkit-animation-name: fadeInRight ;
    animation-name: fadeInRight ;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
} 

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
	opacity:0;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
	opacity:1;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
	 opacity: 0;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
	opacity: 1;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.error_log { 
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
  	animation-delay: 2s;
	opacity:0;
}

.error{
	height: auto;
	background-color: #9a0000;
	   padding: 0 .6em;
	   color: #ffffff;
    line-height: 2em;
text-transform: uppercase;
text-align:left;
    width: 70%;
}

.fa, .far, .fas {
font-family: "Font Awesome 5 Free" !important;
margin-right: .5em;
font-size: 1.5em;
line-height: 1em;

} 
.err_stock{
	-webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-delay: 0s;
}
/* END ANIMATIONS */


/* LINEAS GRADIENTE */
.line{
		background: linear-gradient(-45deg, #ff671b, #c34614, #d1d1d1, #343740);
	background-size: 400% 400%;
	-webkit-animation: Gradient 6s ease infinite;
	-moz-animation: Gradient 6s ease infinite;
	animation: Gradient 6s ease infinite;
	height: 10px;
}

.line2{
	background: linear-gradient(-45deg, #343740, #d1d1d1, #c34614, #ff671b);
	background-size: 400% 400%;
	-webkit-animation: Gradient 10s ease infinite;
	-moz-animation: Gradient 10s ease infinite;
	animation: Gradient 10s ease infinite;
	height: 10px;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
/* END LINEAS GRADIENTE */


/* LOGIN */
#login .container {
    width: 100%;
	margin: auto;
	display: table;
	max-width: 500px;
}

#login .central {
	height: calc(100vh - 240px) !important;
    margin: auto !important;
    display: table-cell !important;
	vertical-align: middle !important;
	width: 100%;
}



input#txtNombre {
    width: 98.8%;
    padding: .5em 0;
    font-size: 1.1em;
    border: 2px solid #343740;
text-align: center;
margin: .5em auto;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-delay: .3s;
}

input#txtPass {
    width: 98.8%;
    padding: .5em 0;
    font-size: 1.1em;
    border: 2px solid #343740;
text-align: center;
margin: .5em auto;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-delay: .6s;
}

#login input[type="submit"]{
	  width: 100%;
    padding: .5em 0;
    font-size: 1.1em;
    border: 2px solid #ff671b;
text-align: center;
background-color: #ff671b;
color: #ffffff;
margin: .5em auto;
	   -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-delay: .9s;
}


#login input[type="submit"]:hover {
	background-color: transparent;
	border: 2px solid #ff671b;
	color: #ff671b;
}

span#lbllog {
    width: 100%;
    background: #212121;
    padding: .2em 3em;
    color: #ffffff;
    margin: 1em 0;
}

span#lbllog:empty {
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #ff671b;
  -webkit-text-fill-color: #ff671b;
  -webkit-box-shadow: 0 0 0px 1000px #eaeaea inset;
  transition: background-color 5000s ease-in-out 0s;
}
/* END LOGIN */

/* FOOTER */
footer#footer {
    background: white;
    width: 100%;
    padding: 2em 0;
	text-align: center;
}

#copyright{
    font-size: .7em;
	color:#d1d1d1;
}
/* END FOOTER */


.modal-dialog {
    width: 100% !important;
max-width: none !important;
}


.modal-content {
padding: 0em 1em 2em 1em !important;
}






/* ALVARO CSS 
table {
    font-family: arial, sans-serif;
    font-size = 8px;
    border-collapse: collapse;
    width: 100%;
}

tr:hover {
  background-color: #85C1E9;
  cursor: pointer;
}


div {
    width:auto
}
div.vis
{
	background-color: white;
	display: block;
}

div.inv
{
	display: none
}
END ALVARO CSS */



/* CONSULTA */
div#UpdatePanel1 {
    width: 90%;
    margin: auto;
    display: block;
}

#consulta input {
    padding: .5em 1em;
	border: 2px solid;
}

#consulta input[type="submit"] {
	text-transform: uppercase;
	cursor: pointer;
	margin: 0 .5em;
}

input#btnAdios {
    background: #343740 !important;
    border-color: #343470;
	color: #ffffff;
}

input#btnAdios:hover {
    background: transparent !important;
    border-color: #343740;
	color: #343740;
}

input#btnLimpiar {
    background: #76cec9;
    border-color: #76cec9;
	color: #ffffff;
}

input#btnLimpiar:hover {
    background: transparent !important;
    border-color: #76cec9;
	color: #76cec9;
}


#consulta div#UpdatePanel1 {
    width: 100%;
    margin: auto;
    display: block;
    display: table;
	height: calc(100vh - 250px);
	padding: 1em 0;
}

input#btnBuscar {
	background: transparent;
}

table{border:none;}

th, td {
	padding: .5em;
}

th{
	background-color: #343740;
	color: #ffffff;
	
}

tr:hover {
    background: #76cec9;
    color: #ffffff;
}

body#consulta form {
    width: 90%;
	margin: auto;
}

tr:nth-child(even) {
background: #ffffff80;
color: #010101;
}

tr:hover{
	background-color: #76cec9;
	color: #ffffff;
}



div#searchzone{
	font-size: .9em;
}


select#cboTem {
    text-transform: uppercase;
    cursor: pointer;
    margin: 0 .5em;
    padding: .5em;
	border: 2px solid #ffffff;
}




@media (max-width: 769px) {
	div#searchzone input {
		font-size: .65em !important;
		margin: .4em 0 !important;
		padding: .4em;
	}
	
	table {
	font-size: .7em;
	}

	#dgwArticulos tr td:nth-child(1), #dgwArticulos tr th:nth-child(1) {
		
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 50px;
		text-overflow: ellipsis;
		white-space: nowrap;
	overflow: hidden;
	}

	#dgwArticulos tr td:nth-child(2), #dgwArticulos tr th:nth-child(2) {
		
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 50px;
		text-overflow: ellipsis;
		white-space: nowrap;
	overflow: hidden;
	}

	#dgwArticulos tr td:nth-child(3), #dgwArticulos tr th:nth-child(3) {
		
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 50px;
		text-overflow: ellipsis;
		white-space: nowrap;
	overflow: hidden;
	}

	#dgwArticulos tr td:nth-child(4), #dgwArticulos tr th:nth-child(4) {

		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 50px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	
	div#searchzone {
		max-width: 500px;
		margin: auto;
		padding: 1em 0;
	}
	
	
	div#searchzone input#txtCodigo {
		width: 49%;
	}
	input#btnBuscar, input#btnLimpiar, input#btnAdios {
		width: 15%;
	}
	
	select#cboTem{
		    width: 100% !important;
		display: block;
		float: right;
		margin: .5em 0;
	}
	
	select#cboTem{
		padding: .2em 0 !important;
	}
	
	#divColores p {
    color: #ffffff;
    border: 2px solid #ba1616;
    padding: .5em;
    font-size: .7em;

}

table{
font-size: .7em !important;

}

div#divArticulos, #divColores, div#divTallas {
max-height: 200px !important;
height: auto !important;
    height: auto !important;
	overflow:auto !important;
width: calc(100%);
}
	a.logo img{
		max-height: 40px;
	}
	
	
	#divTallas tr td, #divTallas tr th{
		width: 5%;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 20px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: .8em;
	}
	#divTallas tr td:first-child, #divTallas tr th:first-child{
		max-width: 40px !important;
	}
}


@media (max-width: 500px) {
	div#searchzone input#txtCodigo {
		width: 45%;
	}
	
}

div#divArticulos, #divColores, div#divTallas {
max-height: 320px;
height: auto !important;
    height: auto !important;
}
	


input#txtCodigo:focus {
background-color: #ccd6eb;
border-color: #ccd6eb;
}
div#divArticulos table, #divColores table, div#divTallas  table{ 
border: 2px solid #f4f4f4;
}


#divColores p {
    color: #ffffff;
    border: 2px solid #ba1616;
    padding: .5em;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 600;
background: #ba1616;
text-align: center;
}

table{
	font-size: .8em;
	width: 100%;
}

#loading img{
    max-height: 30px;
	max-width: 30px;
}

.active {
    background: #ff671b !important;
color: #ffffff !important;
}

td {
cursor: pointer;
}

.inv{
	display: none;
}


/* CONSULTA */