@charset "utf-8";
@font-face{ font-family: "OpSans-light"; src: url('fonts/OpSans-light.ttf') format('truetype');}
@font-face{ font-family: "OpSans-regular"; src: url('fonts/OpSans-regular.ttf') format('truetype');}
@font-face{ font-family: "OpSans-semibold"; src: url('fonts/OpSans-semibold.ttf') format('truetype');}
@font-face{ font-family: "OpSans-bold"; src: url('fonts/OpSans-bold.ttf') format('truetype');}
@font-face{ font-family: "ArNarr-regular"; src: url('fonts/ArNarr-regular.ttf') format('truetype');}


/* MENSAJE OLD BROWSER IE 9 >.................................................................................................................... */
#Mensajes { position:relative; width: 100%; height:100%; text-align:center; background-color:#ccc; font-family:Arial, Helvetica, sans-serif !important;}
    #CuerpoMensaje { position:absolute; top:50%; left:50%; width:600px; padding:20px 0; margin:-100px 0 0 -300px; background-color:#fff;}
    #CuerpoMensaje p#AlertaPrincipal { font-style:italic; font-weight:normal; color: #666; font-size:20px; display:block; margin-bottom:15px; text-align:center;}
    #CuerpoMensaje div { width:100%;  border-top:1px solid #ccc; text-align:left;}
    #CuerpoMensaje div p { width:100%; font-size:11px; color:#666; display:block; text-align:center; margin:10px 0;}
    #CuerpoMensaje ul { list-style:none; width:260px; text-align:center; margin:10px 0 0 180px; }
    #CuerpoMensaje ul li { float:left;}
    #CuerpoMensaje ul li a { width:60px; margin:0 10px; display:block; text-decoration:none; font-size:12px; color:#666;}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ORIENTACION HORIZONTAL////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {
/* RESET PAGE */
html, body,
div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
form, label, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;
                          box-sizing: border-box;}

h1, h2, h3, h4, h5, h6 { font-weight:normal;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0;
                                    box-sizing: border-box;}

/*HTML 5*/
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {display: block;}

a { text-decoration:none !important; }
a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/*LOADER*/
#Loader { -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; }
#Loader.off { opacity:0; visibility:hidden; }

/* 1 - SETEOS GLOBALES.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body { height:100%;}
html { font-size:16px  /*1rem = 18px*/ }

body {
    margin:0 auto;
    text-align:center;
	font-family: "OpSans-regular", Arial, Helvetica, sans-serif;
  }

.SafeZone { width:100%; height:100%; margin:0 auto; font-size:0;}
     .Viewport { position:relative; width:100%; max-width:1700px; height:100%;  margin:0 auto;}

/*LOGIN::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#LoginPage{ background:url(imagenes/superilustracion.jpg) no-repeat center center; background-size:cover;}
	#LoginBox { position:absolute; top:50%; left:50%; width:100%; max-width:400px; text-align:center; background:rgba(255,255,255,0.7); padding:40px; border-top:21px solid #fff;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);}

		#LogoLogin { position:absolute; top:-127px; left:50%; width:200px;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);}

		#LogoLogin img { max-width:100%; display:block;}

	#FormLogin {}
		p#TxtLogin { display:block; font-family: "OpSans-light", Arial, Helvetica, sans-serif; font-size:2.3rem; color:#000; text-align:center; display:block; margin-bottom:15px;}

		#FormLogin input#email,
		#FormLogin input#username,
		#FormLogin input#user_pass,
		#FormLogin input#user_pass2,
		#FormLogin input#password,
		#FormLogin input#username_recuperar { width:100%; display:block; height:45px; font-family: "OpSans-regular", Arial, Helvetica, sans-serif; font-size:1.1rem; padding:0 10px; margin-bottom:10px; border:1px solid #E1E1E1;
										  -webkit-transition: border-color 0.3s ease-in-out;
										  transition: border-color 0.3s ease-in-out;}

		#FormLogin input#ingresar,
		#FormLogin input#confirmar,
		#FormLogin input#recuperar { width:100%; display:block; border:none; padding:10px 0; margin-top:20px; text-align:center; font-family: "OpSans-semibold", Arial, Helvetica, sans-serif; font-size:1.1rem; color:#ffffff; background-color:#DF2D26; cursor:pointer;
									-webkit-transform: translateZ(0);
									 transform: translateZ(0);
									 -webkit-transition: letter-spacing 0.3s ease-in-out, background-color 0.3s ease-in-out;
									 transition: letter-spacing 0.3s ease-in-out, background-color 0.3s ease-in-out;}

		#PanelOlvido {display:block;}
			a#BtnOlvidoPass { display:block; margin:10px 0; font-family: "OpSans-regular", Arial, Helvetica, sans-serif; font-size:13px; color:#000; background:url(imagenes/icono-recuperar.svg) no-repeat left center; text-align:left; padding: 10px 0 10px 40px; cursor:pointer;
							-webkit-transition: -webkit-transform 0.3s ease-in-out;
							transition: transform 0.3s ease-in-out;}

			#FormOlvido { position:relative; overflow:hidden; max-height:0px; text-align:left;
						  -webkit-transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
						  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;}

				#FormOlvido label { font-size:1rem; color:#333; text-align:left; display:block; margin-bottom:5px;}
				#FormLogin input#recuperar { margin-top:10px; background-color:#2A4384;}

		/*Desktop*/
		.Desktop #FormLogin input#email:hover,
		.Desktop #FormLogin input#password:hover,
		.Desktop #FormLogin input#emailrecuperar:hover {border-color:#000; }

		.Desktop #FormLogin input#ingresar:hover,
		.Desktop #FormLogin input#recuperar:hover { background-color:#893064; letter-spacing:3px;}

		/*olvidomode*/
		.olvidomode a#BtnOlvidoPass { -webkit-transform: translateY(20px);
									  transform: translateY(20px);}
		.olvidomode #FormOlvido { padding-top:20px; padding-bottom:20px; max-height:500px;}
		/*..........*/


/*MIS VENTAS - VENTAS REPORTADAS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*HEADER...................................................................................................................................*/
#Modal { position:fixed; overflow-x:auto; z-index:8000; top:0; left:0; background:rgba(255, 255, 255, 0.9); width:100%; height:100%; opacity:0; visibility:hidden;
		 -webkit-transform-origin: 50% 0%;
		  transform-origin: 50% 0%;
		  -webkit-transform: scaleY(0);
		  transform: scaleY(0);
		  -webkit-transition: -webkit-transform 0.3s ease-in-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
		  transition: transform 0.3s ease-in-out, opacity 0.3s ease-out, visibility 0.3s ease-out;}

	.ContentModal { position:absolute; top:50%; left:50%; width:100%; max-width:500px; height:auto; background-color:#FFF; border:1px solid #CCCCCC;
					-webkit-transform: translate(-50%, -50%);
					 transform: translate(-50%, -50%);}

	.ContentModal .Top { background-color:#74BA45; padding:15px 30px;}
		.ContentModal .Top p {  font-family: "OpSans-light", Arial, Helvetica, sans-serif; font-size:1.7rem; color:#FFF; text-align:left;}
		a#BtnCerrarModal { position: absolute; top:12px; right:20px;  font-family: "OpSans-light", Arial, Helvetica, sans-serif; font-size:25px; color:#fff; cursor:pointer;}

	.ContentModal .Bottom {}
		table, tr, th, td {  border-collapse: collapse;}

		table#DetalleVenta { width:100%;}
			table#DetalleVenta td { padding:15px 30px; border-bottom:1px solid #CCCCCC;}
			table#DetalleVenta tr:last-child td { border-bottom:none;}
			td.CellServicio { font-size:1rem; text-align:left;}
            td.CellPrecio { font-family: "OpSans-bold", Arial, Helvetica, sans-serif; font-size:1.1rem; text-align:right;}

			tr#TotalVentas td { font-family: "OpSans-bold", Arial, Helvetica, sans-serif; background-color:#d4d2d2;}

	/*Desktop*/
	.Desktop a#BtnCerrarModal:hover { color:#000;}

	/*ventasmode*/
	.ventasmode { overflow:hidden; }
	.ventasmode #Modal { opacity:1; visibility:visible;
						-webkit-transform: scaleY(1);
		  				transform: scaleY(1);}
	/*..........*/

	/*MsgMode*/
	.Msgmode { overflow:hidden; }
	.Msgmode #Modal { opacity:1; visibility:visible;
						-webkit-transform: scaleY(1);
		  				transform: scaleY(1);}
	/*..........*/


header.General {width:100%; text-align:left; }
.Sistema header.General { background:url("imagenes/superilustracion.jpg") no-repeat 0 0; background-size:100% auto;}

   #Logo { position:absolute; top:0; left:0;}
        #Logo a { display: block;}
        #Logo img { max-width: 100%; display: block;}

	#TopHead { width:100%; height:162px; text-align:center;}
		#TopHead h1 { font-family: "OpSans-light", Arial, Helvetica, sans-serif; font-size:3.3rem; padding-top:50px;  color:#FFF;}

		/*Mobile*/
		#AccesosMobile { display:none;}
		/*......*/

		#Login { position:absolute; right:0; top:40px; background-color:#FFF; padding:20px 25px; width:300px; text-align: left;}
			#Login p { font-size:0.9rem;}
			#Login p#NombreUsuario { margin-top:5px;}
			a#BtnLogout { position:absolute; top:10px; right:10px; font-size:20px; color:#DF2D26; cursor:pointer;
						 -webkit-transition: color 0.3s ease-in-out;
						 transition: color 0.3s ease-in-out;}

			/*Desktop*/
			.Desktop a#BtnLogout:hover { color:#000;}
			/*....*/


	#BottomHead { width:100%; height:37px; background-color:#fff;}
		#MenuFiltros { width:calc(100% - 309px - 300px); margin-left:309px; padding-left:21px;}

			select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color:#FFF;
					-webkit-transition: border-color 0.3s ease-in-out;
					transition: border-color 0.3s ease-in-out;}

			#MenuFiltros select {font-family: "OpSans-regular", Arial, Helvetica, sans-serif; font-size:0.9rem; font-weight:bold; display:inline-block; vertical-align:bottom; height:37px; padding:0 25px 0 20px; border-right:1px solid #CCCCCC;}
			#filtro-servicio { /*width:160px;*/}
			#filtro-distribuidores { /*width:160px;*/}
			#filtro-mes { /*width:160px;*/}
			#filtro-ano { /*width:160px;*/ border-right:none !important;}
				#MenuFiltros option { font-size:0.9rem;}

			#MenuFiltros input[type="submit"] { position:relative; overflow:hidden; display:inline-block; vertical-align:middle;  height:37px; text-align:center; font-family: "OpSans-semibold", Arial, Helvetica, sans-serif; font-size:1rem;  color:#FFF; cursor:pointer;
												-webkit-transform: translateZ(0);
												 transform: translateZ(0);
												 -webkit-transition: background-color 0.3s ease-in-out;
												 transition: background-color 0.3s ease-in-out;}

			#buscar { background-color:#DF2D26; padding:0 30px;}
			#alta { background:#2A4384 url(imagenes/boton-mas-blanco.svg) no-repeat 15px 50%; padding:0 20px 0 45px;  border-left:2px solid #fff; border-right:2px solid #fff;}
            #exportar { background:#2A4384 url(imagenes/icono-exportar.svg) no-repeat 15px 50%; background-size:20px auto; padding:0 20px 0 45px; border-right: 2px solid #fff;}



			/*Desktop*/
			.Desktop #MenuFiltros input[type="submit"]:hover { background-color:#893064;}

			/*focus*/
			/*#MenuFiltros select:focus option:first-child {display: none;}	*/
			/*....*/

		#Menues {}
			#MenuGeneral { position:absolute; right:0; bottom:0; width:300px; height:70px; background-color:#fff;}
				a#BtnCerrarMenu { display:none;}

				#MenuGeneral ul { list-style:none; text-align:center; height:100%;}
					#MenuGeneral li { position:relative; display:inline-block; vertical-align:top; width:50%; height:100%;}
					#MenuGeneral li.Link {}
					#MenuGeneral li#BtnMisVentas { border-right:2px solid #fff;}
					#MenuGeneral li#BtnContacto { border-left:2px solid #fff;}

					#MenuGeneral li.Link::after{ content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:2px; background-color:#545F6B;
												 -webkit-transition:background-color 0.3s ease-in-out;
												transition: background-color 0.3s ease-in-out;}

						#MenuGeneral li.Link a { display:block; height:100%; padding-top:25px; font-size:1rem; font-weight:bold; color:#000;
												background: linear-gradient(to bottom, #fff 0%, #fff 50%, #f2f2f2 50%, #f2f2f2 100%); background-size:100% 200%;
												-webkit-transition: background-position 0.3s ease-in-out;
												transition: background-position 0.3s ease-in-out;}

					/*Desktop*/
					.Desktop #MenuGeneral li.Link:not(.select):hover a { background-position:100% 100%;}
					.Desktop #MenuGeneral li.Link:not(.select):hover::after { background-color:#000 !important;}

					/*select*/
					#MenuGeneral li.select::after { background-color:#DF2D26 !important; color:#DF2D26;}
					#MenuGeneral li.select { background-color:#f2f2f2;}
					#MenuGeneral li.select a { color:#DF2D26; cursor:default; background-position:100% 100%;}
					/*.....*/

			#MenuSecundario { position:fixed; z-index:9990; right:0; top:220px;}
				#MenuSecundario ul { list-style:none;}
				#MenuSecundario li.Link { display:block; margin-bottom:1px;}
				#MenuSecundario li.Link a { width:40px; height:40px; display:block; font-size:0px;
										-webkit-transition: background-color 0.3s ease-in-out;
										transition: background-color 0.3s ease-in-out;}
				#MenuSecundario li#BtnContacto a { background:#2a4384 url(imagenes/icono-correo.svg) no-repeat center center; background-size: 25px auto;}
				#MenuSecundario li#BtnAyuda a { background:#2a4384 url(imagenes/icono-ayuda.svg) no-repeat center center; background-size: 12px auto;}

				/*Desktop*/
				.Desktop #MenuSecundario li.Link a:hover { background-color:#893064 !important;}
				/*......*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*CENTER..................................................................................................................................*/
main {width:100%; text-align:left; background-color:#F2F2F2;}
	#ContentMisVentas { padding:80px 0;}

		table#MisVentas { position:relative; width:100%;}
			table#MisVentas thead { max-width:1700px;
									 -webkit-transform: translateZ(0);
									  transform: translateZ(0);}

			#BarraMisVentas { position:relative; top:auto;}

				table#MisVentas thead tr { width:100%;}
					table#MisVentas thead td { font-family: "OpSans-bold", Arial, Helvetica, sans-serif; font-size:1rem; padding:0 20px 25px 20px;}
					td.CellFecha { width:170px;}
					td.CellRazonSocial { width:450px;}
					td.CellCuit {}
					td.CellEdicion { width:300px;}

			table#MisVentas tbody {}
				table#MisVentas tbody td { vertical-align:middle;  font-family: "OpSans-regular", Arial, Helvetica, sans-serif; font-size:1rem; border-bottom:1px solid #CCCCCC; padding:5px 20px;
											 -webkit-transition:background-color 0.3s ease-in-out;
						 					transition: background-color 0.3s ease-in-out;}

				table#MisVentas tbody tr:last-child td { border:none;}

				table#MisVentas tbody td.CellEdicion { font-size:0; text-align: right;}
					a.BtnEdicion { width:30px; height:30px; display:inline-block; vertical-align:top; cursor:pointer;}
					a.BtnMas { background:url(imagenes/boton-mas.svg) no-repeat center center;}
					a.BtnEditar { background:url(imagenes/boton-lapiz.svg) no-repeat center center; margin:0 40px;}
					a.BtnEliminar { background:url(imagenes/boton-equis.svg) no-repeat center center;}

			/*Desktop*/
			.Desktop table#MisVentas tbody tr:hover td { background-color:#fff;}

			/*fixedtable*/
			.fixedtable { padding-top:50px;}
			.fixedtable #BarraMisVentas { position:fixed; z-index:7000; top:0; width:100%; height:50px; background-color:#F2F2F2; border-bottom:2px solid #DF2D26;}
			.fixedtable table#MisVentas thead#BarraMisVentas tr { display:table; width:100%;}
			.fixedtable table#MisVentas thead#BarraMisVentas td { display:table-cell; padding:10px 20px;}
			/*.......*/

			#NavPaginado { width:100%; text-align:center; margin: 60px 0 0 0;}
				#NavPaginado ul { list-style:none; margin:0 auto;}
				#NavPaginado li { display:inline-block; vertical-align:middle; font-size:17px; margin:0 5px;}
				#NavPaginado li a { display:block; cursor:pointer; color:#df2d26; font-weight:bold; padding:0 8px; line-height:0 !important;}
				#NavPaginado li.Prev a,
				#NavPaginado li.Next a { font-size: 30px; line-height:0 !important; color:#df2d26;}
				#NavPaginado li.Number a {  color:#666666; font-weight:normal;}

				/*Desktop*/
				.Desktop #NavPaginado li:not(.select):hover a { opacity:0.7;}

				/*select*/
				/*#NavPaginado li.Number.select a { color:#df2d26; font-weight:bold; cursor:default;}*/
				/*.......*/


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*FOOTER...................................................................................................................................*/
footer.General {width:100%; padding:30px 0; background:#fff url(imagenes/superilustracion-filete.jpg) no-repeat 0 0; background-size:100% auto; text-align:left;}
	#Social,
	#Sitemap { width:33.33%; display:inline-block; vertical-align:top;}

	p.TituloFooter { font-family: "OpSans-bold", Arial, Helvetica, sans-serif; font-size:1rem;}
	.NavSocial {}
		.NavSocial ul { list-style:none; margin-top:20px;}
			.NavSocial li { display:inline-block; vertical-align:top; margin-right:5px;}
			.NavSocial a { display:block; width:40px; height:40px; border:2px solid #000; border-radius:50%; background-repeat:no-repeat; background-position:center center;}
			a.BtnFacebook { background-image:url(imagenes/icono-facebook.jpg);}
			a.BtnYoutube { background-image:url(imagenes/icono-youtube.jpg);}
			a.BtnTwitter { background-image:url(imagenes/icono-twitter.jpg);}
			a.BtnLinkedin { background-image:url(imagenes/icono-linkedin.jpg);}

	.Sitemap {}
		.NavSitemap ul { list-style:none;}
			.NavSitemap li { margin:10px 0;}
			.NavSitemap a { font-size:1rem; color:#000; display:block; }

	#NavLegales { padding:50px 30px 0 30px;}
		p#Copy { display:inline-block; vertical-align:middle; font-family: "OpSans-bold", Arial, Helvetica, sans-serif; font-size:0.9rem;}

		#NavLegales ul {display:inline-block; vertical-align:middle; list-style:none;}
			#NavLegales li { display:inline-block; vertical-align:middle; margin-left:20px;}
			#NavLegales a { font-size:0.9rem; color:#000;}


/*EDITAR VENTA::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*main*/
	#DatosVenta { padding:25px 0; text-align:center; background-color:#EAEAEA;}
		#GrupoDatosVenta { width:100%; max-width:810px; margin:0 auto; text-align:left;}
			#FormEditar {}
				#FormEditar fieldset { display:inline-block; vertical-align:top; text-align:left; margin:0 5px;}
				#field-razon-social {}
					#FormEditar label { font-family: "OpSans-bold", Arial, Helvetica, sans-serif; font-size:0.9rem; display:block; margin:0 0 5px 30px;}
					#FormEditar input[type="text"],
					#FormEditar select { font-family: "OpSans-regular", Arial, Helvetica, sans-serif; font-size:1rem; font-weight:bold; height:40px; padding-left:10px; border:1px solid #CCCCCC;
										-webkit-transition: border-color 0.3s ease-in-out;
										 transition: border-color 0.3s ease-in-out;}


					.campoeditar { display:block; background:url(imagenes/boton-lapiz.png) no-repeat center left; padding-left:30px;}
						#editar-fecha { width:120px; background-color:#FFF;}
						#editar-razon-social { width:220px;}
						#editar-cuit { width:120px;}

					/*Desktop*/
					.Desktop #FormEditar input[type="text"]:hover,
					.Desktop #FormEditar select:hover { border-color:#333;}
					/*......*/

	#ListadoVenta { min-height:400px; padding:25px 0; text-align:center; }
		#GrupoListaOrden { width:100%; max-width:810px; margin:0 auto;}
			table#ListaOrden { width:100%; }
				table#ListaOrden thead td { font-family: "OpSans-bold", Arial, Helvetica, sans-serif; font-size:0.9rem; padding-bottom:5px;}

				td.CellOrdenFamilia { text-align:left;}
				td.CellOrdenPrecio { width:150px}
				td.CellOrdenCosto { width:150px}
				td.CellOrdenEliminar { width:50px;}

				table#ListaOrden thead td.CellOrdenFamilia { padding-left:30px;}
				table#ListaOrden thead td.CellOrdenPrecio { padding-left:30px; text-align:left;}
				table#ListaOrden thead td.CellOrdenCosto { padding-left:30px; text-align:left;}
				table#ListaOrden tbody td { padding:5px 0;}
				table#ListaOrden tbody td.CellOrdenPrecio { text-align:right;}
				table#ListaOrden tbody td.CellOrdenCosto { text-align:right;}

					.editar-familia { width:94%;}
					.editar-precio { width:180px; padding:0 10px; text-align:right;}


	#AgregarItem { width:calc(100% - 80px); margin-left:30px; padding:15px 0;}
		a#BtnAgregarItem { display: block; text-align: center; font-family: "OpSans-semibold", Arial, Helvetica, sans-serif; font-size: 1rem;  color: #FFF; padding:10px 0; cursor: pointer; background-color:#2A4384;
							-webkit-transform: translateZ(0);
							transform: translateZ(0);
							-webkit-transition: letter-spacing 0.3s ease-in-out, background-color 0.3s ease-in-out;
							transition: letter-spacing 0.3s ease-in-out, background-color 0.3s ease-in-out;}

	#AccionesEditar { width:calc(100% - 80px); margin-left:30px; border-top:2px solid #CCCCCC; text-align:right; padding:15px 0;}
		#AccionesEditar input[type="submit"] { display:inline-block; vertical-align:top; text-align:center; padding:10px 20px; margin-left:10px; font-family: "OpSans-semibold", Arial, Helvetica, sans-serif; font-size: 1rem;  color: #FFF; cursor:pointer;
												-webkit-transform: translateZ(0);
												 transform: translateZ(0);
												 -webkit-transition: background-color 0.3s ease-in-out;
												 transition: background-color 0.3s ease-in-out;}

		#editar-cancelar { background-color:#DF2D26;}
        #editar-confirmar { background-color:#2A4384;}

		/*Desktop*/
		.Desktop a#BtnAgregarItem:hover { background-color:#893064; letter-spacing:3px;}
		.Desktop #AccionesEditar input[type="submit"]:hover { background-color:#893064;}
		/*.......*/

/*CONTACTO::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*main*/
	#FormContacto { min-height:400px;  width:100%; max-width:500px; margin:0 auto; padding:60px 0;}
		#FormContacto h2 { font-family: "OpSans-semibold", Arial, Helvetica, sans-serif; font-size: 1.2rem; margin-bottom:15px;}

		#FormContacto input#nombreapellido,
		#FormContacto input#emailcontacto,
		#FormContacto input#telefono,
                #FormContacto select,
		#FormContacto textarea#mensaje { width:100%; display:block; height:45px; font-family: "OpSans-regular", Arial, Helvetica, sans-serif; font-size:1.1rem; padding:0 10px; margin-bottom:10px; border:1px solid #E1E1E1;
										 -webkit-transition: border-color 0.3s ease-in-out;
										  transition: border-color 0.3s ease-in-out;}

		#FormContacto textarea#mensaje { height:200px; overflow:auto; padding:10px; margin-bottom:10px;}

		#FormContacto input#enviar { width:100%; display:block; border:none; padding:10px 0; margin-top:10px; text-align:center; font-family: "OpSans-semibold", Arial, Helvetica, sans-serif; font-size:1.1rem; color:#ffffff; background-color:#DF2D26; cursor:pointer;
									-webkit-transform: translateZ(0);
									 transform: translateZ(0);
									 -webkit-transition: letter-spacing 0.3s ease-in-out, background-color 0.3s ease-in-out;
									 transition: letter-spacing 0.3s ease-in-out, background-color 0.3s ease-in-out;}

		/*Desktop*/
		.Desktop #FormContacto input#nombreapellido:hover,
		.Desktop #FormContacto input#emailcontacto:hover,
		.Desktop #FormContacto input#telefono:hover,
		.Desktop #FormContacto textarea#mensaje:hover {border-color:#000; }

		.Desktop #FormContacto input#enviar:hover { background-color:#893064; letter-spacing:3px;}
		/*........*/

.SafeZone * { line-height: 1.2em !important;}

.Col p { text-align:justify;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			-o-hyphens: auto;
			hyphens: auto;}

}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*COMPATIBLIDADES///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
	select { padding-right:35px; background:#fff url(imagenes/flecha-select.gif) no-repeat right 50%;}
}


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*ANCHOS///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1920px) {
html { font-size: 15px; /*1rem = 15px*/}

}

@media (max-width: 1750px) {
.Viewport { padding:0 15px; max-width:none;}

/*MIS VENTAS - VENTAS REPORTADAS*/
/*header*/
	#Logo { left:15px;}
	#Login,
	#MenuGeneral { right:15px;}

/*main*/
	/*fixedtable*/
	.fixedtable #BarraMisVentas { max-width:none; width:calc(100% - 30px);}
	/*..........*/

	td.CellEdicion { width: 230px; padding-left:0 !important; padding-right:0 !important;}
	.Filtrado a.BtnMas,
	.Filtrado a.BtnEditar,
	.Filtrado a.BtnEliminar { margin:0 20px;}

/*footer*/
#NavLegales { padding-left:15px; padding-right:15px;}

}

@media (max-width: 1570px) {
/*MIS VENTAS - VENTAS REPORTADAS*/
/*header*/
	#TopHead { height: 121px;}
		#Logo { width:230px;}

		#TopHead h1 { padding-top:30px;}

		#Login { top: 10px;}

	#BottomHead { height:auto;}
	#BottomHead .Viewport::after { content:""; display: block; clear:both;}

		#MenuFiltros {display:inline-block; width: calc(100% - 270px); margin-left: 230px; padding:0 0 0 25px;}
			#filtro-servicio,
			#filtro-distribuidores,
			#filtro-mes,
			#filtro-ano { /*width:calc(33.33% - 84px);*/ font-size: 0.9rem;}

			#MenuFiltros input[type="submit"] { font-size: 0.9rem;}

		#AccesosMobile { display:block;  float:right;}
			a#BtnFiltros { display:none;}
			a#BtnMenu { display: inline-block; vertical-align:top; text-align:center; width:30px; height:37px; font-size:30px; color:#000; cursor:pointer;
					     -webkit-transition: color 0.3s ease-in-out;
						 transition: color 0.3s ease-in-out;}

			/*Desktop*/
			.Desktop a#BtnMenu:hover { color:#666;}
			/*......*/

		#Menues { position:fixed; z-index:9000; overflow-x:auto; top:0; left:0; background:rgba(255, 255, 255, 0.9); width:100%; height:100%; padding-top:150px; opacity:0; visibility:hidden;
					 -webkit-transform: scaleY(0);
					 transform: scaleY(0);
					 -webkit-transform-origin: 50% 0%;
					 transform-origin: 50% 0%;
					 -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out, -webkit-transform 0.3s ease-out;
					 transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;}

			a#BtnCerrarMenu { display:block; position:fixed; top:20px; right:20px; font-family: "OpSans-light", Arial, Helvetica, sans-serif; font-size:25px; color:#DF2D26; cursor:pointer;
								-webkit-transition: color 0.3s ease-in-out;
								 transition: color 0.3s ease-in-out;}

			#MenuGeneral,
			#MenuSecundario { position:relative; right:auto; bottom:auto; top:auto; width:280px; height:auto;  text-align:center; margin:0 auto; background-color:transparent;}

				#Menues ul { display:block;}
				#Menues ul li.Link { position:relative; display:block; width:100%; margin:5px auto; border:none !important;}
				#Menues ul li.Link a { display:block; width:100%; height:auto; color: #000; text-align:center; font-family: "OpSans-light",Arial,Helvetica,sans-serif !important; font-weight:normal !important;  font-size:1.7rem; padding:15px 0; border:1px solid #ccc; background-image:none !important; background-color:#fff !important;}

				#MenuGeneral li.Link::after { bottom: 1px; background-color:#fff;}
				#MenuSecundario li.Link::after{ content:""; display:block; position:absolute; left:0; bottom: 1px; width:100%; height:2px; background-color:#fff;
												 -webkit-transition:background-color 0.3s ease-in-out;
												transition: background-color 0.3s ease-in-out;}

				#MenuSecundario li.Link a { background-image:none !important;}


				/*Desktop*/
				.Desktop a#BtnCerrarMenu:hover { color:#000;}

				.Desktop #MenuGeneral li.Link:not(.select):hover a,
				.Desktop #MenuSecundario li.Link:not(.select):hover a { background-color:#f2f2f2 !important;}
				.Desktop #MenuSecundario li.Link a:hover { background-color: #f2f2f2 !important;}

				.Desktop #Menues li.Link:not(.select):hover::after { background-color:#545f6b !important;
																			-webkit-transition: background-color 0.3s ease-in-out;
																			transition: background-color 0.3s ease-in-out;}

				/*select*/
				#Menues li.select::after { background-color:#DF2D26 !important; color:#DF2D26;}
				#Menues li.select {}
				#Menues li.select a { color:#DF2D26; cursor:default; background-color:#f2f2f2;}


				/*menumode*/
				.menumode { overflow:hidden;}
				.menumode #Menues { opacity:1; visibility:visible;
										 -webkit-transform: scaleY(1);
										 transform: scaleY(1);}
				/*.......*/



/*main*/
	#ContentMisVentas {padding-top:60px;}
		table#MisVentas thead td,
		table#MisVentas tbody td { font-size: 0.85rem;}
		table#MisVentas tbody td.CellEdicion { text-align: right; padding-right:0;}
}

@media (max-width: 1300px) {
/*MIS VENTAS - VENTAS REPORTADAS*/
/*header*/
	#TopHead h1 { font-size:3rem;}

	#Login { width: 220px;}
		#Login p { font-size: 0.8rem;}

/*main*/
	#MenuFiltros {}
		#filtro-servicio,
		#filtro-distribuidores,
		#filtro-mes,
		#filtro-ano {/* width:calc(33.33% - 73px);*/}

		#MenuFiltros input[type="submit"] { font-size:0; width:50px;}
		#buscar { background:#DF2D26 url(imagenes/icono-lupa.svg) no-repeat center center; background-size:20px auto;}
		#exportar { background-position: center center;}
		#alta { background-position: center center;}
}

@media (max-width: 1150px) {
/*MIS VENTAS - VENTAS REPORTADAS*/
/*header*/
	#Login { width:auto; padding:5px 10px;}
		#Login p { display:none;}
		a#BtnLogout { position:relative; top:auto; right:auto; display:inline-block; vertical-align:middle; font-size:16px;}
		a#BtnLogout::before { content:"Salir"; font-size:14px; color:#000; display:inline-block; vertical-align:middle; margin-right:10px;}

	#MenuFiltros { /*width: calc(100% - 230px - 70px);*/}

/*main*/
	td.CellRazonSocial { width:350px;}

/*footer*/
	#Social,
	#Sitemap { width:50%;}
}


@media (max-width: 1023px) {
/*MIS VENTAS - VENTAS REPORTADAS*/
/*header*/
	#Logo { width: 150px;}

	#TopHead {height: 80px;}
		#TopHead h1 { padding-top:20px; font-size:2.3rem;}

	#BottomHead { /*height:40px;*/}
		#MenuFiltros { /*position:absolute; overflow:hidden; z-index:9000; top: 40px;*/ left:0; margin-top:40px; margin-left:0; width:100%; /*max-height:0;*/ padding-left:0; padding-right:0; padding-bottom: 30px; background-color:#fff; /*background:rgba(255, 255, 255, 0.9);*/
					  /*-webkit-transform-origin: 50% 0%;
					  transform-origin: 50% 0%;
					  -webkit-transform: scaleY(0);
					  transform: scaleY(0);
					  -webkit-transition: -webkit-transform 0.3s ease-in-out, padding 0.3s ease-in-out;
					  transition: transform 0.3s ease-in-out, padding 0.3s ease-in-out;*/}

			#FormFiltros { width:100%; text-align:center; /*opacity:0;
							-webkit-transform: translateY(-300px);
					 		transform:  translateY(-300px);
						    -webkit-transition: -webkit-transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.25s;
					  		transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.25s;*/}

				#MenuFiltros select { display:block; width:100%; margin:15px 0;}
				#filtro-servicio,
				#filtro-distribuidores,
				#filtro-mes,
				#filtro-ano { border:1px solid #999 !important;}

				#MenuFiltros input[type="submit"] { width: 50%; background-image:none; font-size:1rem; padding-left:0; padding-right:0;}


		a#BtnFiltros { vertical-align:top; width:40px; height:40px; background:#2A4384 url(imagenes/icono-filtros.svg) no-repeat center center; background-size:22px auto; cursor:pointer;
						 -webkit-transition: background-color 0.3s ease-in-out;
						transition: background-color 0.3s ease-in-out;}

		/* #MisVentas a#BtnFiltros {display:inline-block;}*/

		/*Desktop*/
		.Desktop a#BtnFiltros:hover {  background-color:#893064;}

		/*filtermode*/
		/*.filtermode #MenuFiltros { padding-top:20px; padding-bottom:20px; max-height:1000px;
								    -webkit-transform: scaleY(1);
					  				transform: scaleY(1);}

		.filtermode #FormFiltros {   opacity:1;
									-webkit-transform: translateY(0);
					 				transform:  translateY(0);}

		.filtermode #ContentMisVentas { -webkit-transform: translateY(270px);
										 transform: translateY(270px);}*/
		/*.........*/


/*main*/
	#ContentMisVentas { padding-top:30px;/* -webkit-transition: transform 0.3s ease-in-out;
						 transition: transform 0.3s ease-in-out;*/}

		td.CellFecha { width: 100px;}
		td.CellRazonSocial {width: 300px;}

/*MIS VENTAS - VENTAS REPORTADAS*/
/*main*/
#Servicios a#BtnMenu,
#MisVentas a#BtnMenu { position: absolute; right: 5px; top: 0; width:40px; height:40px;}

}

@media (max-width: 860px) {
/*ALTA*/
/*main*/
#FormEditar fieldset { width:50%; margin:0; padding:10px 5px;}
	#FormEditar input[type="text"], #FormEditar select { width:100%;}
}

@media (max-width: 850px) {
/*MIS VENTAS - VENTAS REPORTADAS*/
/*header*/
	#editar-fecha { width: 100px;}

	#field-razon-social { width:calc(100% - 130px - 315px);}
	#editar-razon-social { width:100%;}

/*main*/
#NavPaginado li { display:none;}
#NavPaginado li:first-child, #NavPaginado li:last-child { display:inline-block !important; font-size:40px !important;}
}


@media (max-width: 820px) {
/*MIS VENTAS - VENTAS REPORTADAS*/
/*header*/
	#TopHead h1 { display:none;}

/*main*/
	#ContentMisVentas { padding-top: 30px;}
		p#TituloMobile { font-size:2.2rem; color:#333; padding:0 0 25px 7px;}

		table#MisVentas thead { display:none;}

		table#MisVentas,
		table#MisVentas tbody,
		table#MisVentas tr,
		table#MisVentas td { display:block;}

		table#MisVentas tbody tr { position:relative; margin-bottom:10px; padding-bottom:5px; border-bottom:1px solid #CCC;}
			table#MisVentas tbody td { width:50%; font-size: 1rem; border:none; padding-left:10px; padding-right:10px;}
				td.CellEdicion { position:absolute; top:0; right:0; text-align:right;}

			table#MisVentas tbody td::before { font-family: "OpSans-bold", Arial, Helvetica, sans-serif; font-size:10px; color:#000; display:block; width:100%;}
				td.CellFecha::before {content:"FECHA:";}
				td.CellRazonSocial::before {content:"RAZON SOCIAL:";}
				td.CellCuit::before {content:"CUIT:";}

				td.CelTipo::before {content:"TIPO:";}
				td.CellDireccion::before {content:"DIRECCION:";}
				td.CellLocalidad::before {content:"LOCALIDAD:";}
				td.CellProvincia::before {content:"PROVINCIA:";}
				td.CellMonto::before {content:"MONTO:";}
				td.CellDescuento::before {content:"DESCUENTO:";}
				td.CellNC::before {content:"NC:";}

			/*Desktop*/
			.Desktop table#MisVentas tbody tr:hover td { background-color:transparent;}
			/*.......*/

			/*fixedtable*/
			.fixedtable { padding-top:0;}
			.fixedtable #BarraMisVentas { display:none;}
			/*.......*/
}

@media (max-width: 780px) {
/*LOGIN*/
	p#TxtLogin {  font-size: 1.9rem;}

	#FormLogin input#email,
	#FormLogin input#emailRecuperar,
	#FormLogin input#password,
	#FormLogin input#emailrecuperar { font-size:0.9rem;}

	#FormLogin input[type="submit"] { font-size:0.9rem !important;}

/*MIS VENTAS - VENTAS REPORTADAS*/
/*footer*/
	#Social { width:100%; display:block;}
	#Sitemap { width:100%; display:block; margin-top:40px;}

	p#Copy { display:block;}
	#NavLegales li { display:block; padding:0; margin:10px 0;}
}

@media (max-width: 710px) {
/*EDITAR VENTAS*/
/*main*/
	#FormEditar fieldset,
	#field-razon-social { display:block; width:100%; margin:0;}

	#FormEditar fieldset { padding-top:10px; padding-bottom:10px;}

	#editar-fecha,
	#editar-razon-social,
	#editar-cuit { width: 100%;}

}

@media (max-width: 580px) {
/*EDITAR VENTAS*/
/*main*/
	#DatosVenta { padding-bottom:0;}
		table#ListaOrden thead { display:none;}

		table#ListaOrden,
		table#ListaOrden tbody,
		table#ListaOrden tr,
		table#ListaOrden td { width:100%; display:block;}

		table#ListaOrden tbody tr { position: relative; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #CCC;}
		table#ListaOrden tbody tr:last-child { border-bottom:none;}

		td.CellOrdenFamilia,
		td.CellOrdenPrecio { text-align:left !important;}
		td.CellOrdenCosto { text-align:left !important;}
		td.CellOrdenEliminar { text-align: right !important;}

		#FormEditar fieldset {}
		#FormEditar label { font-size:0.8rem;}

		table#ListaOrden tbody td::before { font-family: "OpSans-bold", Arial, Helvetica, sans-serif; font-size:0.8rem; color:#000; display:block; margin:15px 0 15px 30px;}
			td.CellOrdenFamilia::before { content:"FAMILIA DE PRODUCTO";}
			td.CellOrdenPrecio::before { content:"PRECIO/CANTIDAD";}
			td.CellOrdenCosto::before { content:"COSTO";}

			.editar-familia { width: 100%;  display:block;}
			.editar-precio { width:180px; text-align:left; display:block;}

	#AgregarItem,
	#AccionesEditar { width:100%; margin-left:0;}
}

@media (max-width: 470px) {
/*MIS VENTAS - VENTAS REPORTADAS*/
/*header*/
	table#MisVentas tbody td { width:100%; font-size:1.2rem;}
	table#MisVentas tbody td.CellEdicion { position:relative; top:auto; right:auto; text-align:left; padding:15px 0;}
		.Filtrado a.BtnEdicion { width:33.33% !important; margin:0; text-align:center;}
		.Filtrado a.BtnEditar,
		.Filtrado a.BtnEliminar { border-left:1px solid #CCC;}

/*main*/
	#MenuFiltros select { height: 33px; padding-left:10px; font-size:0.9rem;}

/*footer*/
	/*#NavPaginado li.Prev,
	#NavPaginado li.Next { display:none;}
	#NavPaginado li { font-size: 22px;}*/

/*LOGIN*/
	#LoginBox { width:calc(100% - 25px);}
		#LogoLogin { width:170px; top: -108px;}

/*CONTACTO*/
/*main*/
	#FormContacto input#nombreapellido,
	#FormContacto input#emailcontacto,
	#FormContacto input#telefono,
	#FormContacto textarea#mensaje { font-size:0.9rem;}
}

@media (max-width: 380px) {
/*main*/
	#MenuFiltros input[type="submit"] { width: 100% !important; display:block; border:none;}
	#buscar { border-bottom:2px solid #fff !important;}
	#alta { border-right:none !important; border-bottom:2px solid #fff !important;}
}

@media (max-width: 340px) {
/*LOGIN*/
	#LoginBox { padding:25px;}

/*EDITAR VENTAS*/
/*main*/
#AccionesEditar input[type="submit"] { width:50%; margin:0;}
}

/*ALTOS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media (max-height: 720px) {
/*LOGIN*/
#LoginBox { top: 120px;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);}
}

@media (max-height: 440px) {
/*LOGIN*/
.ContentModal{ top: 20px;
				-webkit-transform: translate(-50%, 0);
				transform: translate(-50%, 0);}
}

a.BtnGeneral,a.BtnGeneral:link, a.BtnGeneral:visited {
    background-color: #DE2C21;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	cursor:pointer;
}


a.BtnGeneral:hover, a.BtnGeneral:active {
    background-color: #E86660;
}