@charset "utf-8";
*{
	border:0;
	padding:0;
	margin:0;
	box-sizing:border-box;
}
html{
	scroll-behavior: smooth;
}
:root{
	--color-gray:#212121;
	--color-gray2:#777;
	--color-graylight:#efefef;
	--color-hover:#0075DB;
	--color-bgr1:#00315C;
	--color-bgr2:#005AA8;
	--color-bgr3:#1994FF;
	--color-bgr4:#00a650;
	--color-bgr5:#cf2e25;
	--color-bgr6:#15bc36;
	--color-btn:linear-gradient(#0075DB, #005AA8);
	--color-btnhvr:linear-gradient(#00a650, #00a650);

}
body {
	font: 100%/1.4 'Lato', sans-serif;
	/*font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;*/
	background:#FFF;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Selectores de elemento/etiqueta ~~ */
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin:20px 0;
	padding:0 15px 0 15px;
}
h1{
	font-size:200%;
}
hr{
	background:var(--color-gray);
	border:1px solid var(--color-gray);
}
.lnk{
	color:#0075DB;
	text-decoration:none;
}
.lnk:hover{
	color:var(--color-bgr2);
}
.izquierda{
	margin-right:1em;
}
.derecha{
	margin-left:0.5em;
}
.hidden-dsk{
	display:none;
}
ul, ol, dl { /* Debido a las diferencias existentes entre los navegadores, es recomendable no añadir relleno ni márgenes en las listas. Para lograr coherencia, puede especificar las cantidades deseadas aquí o en los elementos de lista (LI, DT, DD) que contienen. Recuerde que lo que haga aquí se aplicará en cascada en la lista .nav, a no ser que escriba un selector más específico. */
	padding: 0;
	margin: 0;
}
.btn-opt{
	display:inline-block;
	text-decoration:none;
	color:var(--color-bgr);
	padding:10px 15px;
	margin:5px;
	border-radius:10%;
	transition:all .5s;
}
.btn-opt:hover{
	color:#FFF;
	border-radius:50%;
}
.btn-edit:hover{
	background:var(--color-hover2);
}
.btn-del:hover{
	background:var(--color-bgr5);
}
.btn-act, .btn-des{
	display:inline-block;
	text-decoration:none;
	padding:10px 15px;
	margin:5px;
	transition:all .5s;
}
.btn-act{
	color:var(--color-bgr4);
}
.btn-des{
	color:var(--color-bgr5);
}
.btn_sis{
	color:#FFF;
	background:var(--color-gray);
	border:0;
}
.btn-acc:hover{
	background:var(--color-bgr4);
}
.btn-den:hover{
	background:var(--color-bgr5);

}
.center-items{
	display:flex;
	justify-content:center;
	align-items:center;
}
.center-txt{
	text-align:center;
}
.pdn-lg-spcs{
	padding:1em 0;
}
.pdn-spcs{
	padding:3em 1em;
}
.gr-txt{
	color:var(--color-gray2);
}
.ico-big{
	font-size:400%;
}
.tbl-lgin{
	width:100%;
}
.tbl-lgin input{
	width:100%;
}
.tbl-lgin img{
	height:45px;
	width:auto;
}
.tbl-cnt{
	padding:30px;
	background:#efefef;
}
.ttl-pdn-sps{
	width:100%;
	padding:3em 1em;
}
.ttl-pdn-sps h1{
	padding:0;
	margin:0;
	font-size:150%;
}
.cnt-pdn-sps{
	width:100%;
	padding:2em 1em;
}
.nav-bar-opt{
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-end;
	padding:1em;
}
.nav-bar-opt a{
	text-decoration:none;
	padding:10px;
	background:var(--color-gray);
	color:#FFF;
	margin:5px;
	border-radius:5px;
}
.nav-bar-opt a:hover{
	background:var(--color-hover);
}
.nav-bar-opt a i{
	margin-right:10px;
}
.img-min{
	height:50px;
	width:auto;
}
.cabecera_tabla{
	background: var(--color-hover);
	color:#FFF;
}
th, td{
	padding:5px;
}
.trFila1{
	background:#FFF;
}
.trFila2{
	background:#EEEEEE;
}
.trBrillo{
	background:#FFEFBF;
}
input, textarea, select {
	padding: 10px;
	border-radius:5px;
	font:100%/1.4 'Open Sans', sans-serif;
	border:1px solid #616161;
}
.btn-input{
	display:inline-block;
	text-decoration:none;
	padding:10px 20px;
	background:var(--color-btn);
	color:#FFF;
	border-radius:5px;
	border:0;
	transition:all .5s;
	margin-top:10px;
	cursor:pointer;
}
.btn-input:hover{
	background:var(--color-btnhvr);
}
.btn-rgl{
	display:inline-block;
	text-decoration:none;
	padding:10px 20px;
	background:var(--color-bgr3);
	color:#FFF;
	border-radius:5px;
	border:0;
	transition:all .5s;
	margin-top:10px;
	cursor:pointer;
}
.btn-rgl:hover{
	background:var(--color-bgr2);
}
.btn-rgl i{
	margin-right:10px;
}
.spn-rsp{
	display:none;
}
/*PARA BOIRA*/
#boira{
	z-index:800;
	position:fixed;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100%;
	color:#FFF;
	background:rgba(0,0,0,.7);
}
#espaiFlotant{
	z-index:801;
	width:auto;
	min-width:330px;
	/*max-height:70%;
	overflow-y: scroll;*/
	height:auto;
	position:fixed;
	display:none;
	color:var(--color-gray);
	padding:2em;
	background:#FFF;
	box-shadow:0px 0px 10px 2px rgba(0,0,0,1);
	border-radius:5px;
	top: 50%;
  	left: 50%;
  	transform: translateX(-50%) translateY(-50%);
}
.veureDia{
	width:416px;
	height:383px;
	color:#5d5d5d;
}
.contenedor-carga i{
	display:block;
	font-size:40px;
	color:var(--color-hover);
	animation:girar 1.5s linear infinite;
}
@keyframes girar{
	from{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}
/*fin de boira*/
.main-container{
	display:flex;
	flex-flow:column nowrap;
}
header{
	width:100%;
	padding:10px;
	background:#FFF;
	z-index:1;
	box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.2);

	display:flex;
	flex-flow:row nowrap;
	justify-content: space-between;
	align-items:center;
	order:1;
}
.contenedor-menu{
	margin:1em;
	z-index:100;
	display:none;
}
.contenedor-menu a{
	color:var(--color-gray);
	text-decoration:none;
	padding: 2px 10px;
}
.contenedor-menu .btn-cat-off{
	display:none;
}
.contenedor-menu a i{
	font-size:150%;
	display: inline-block;
	transition:all .5s;
}
.cnt-logo{
	display:inline-block;
}
.cnt-logo a{
	display:flex;
	justify-content:center;
	flex-flow:row nowrap;
	align-items:center;
	text-decoration:none;
	color:var(--color-gray);
}
.cnt-logo a span{
	margin-left:1em;
	font-size:120%;
	display:none;
}
.cnt-logo a img{
	height:70px;
	width:auto;
}
.nav1{
	padding:1em;
	z-index: 100;
}
.nav1 .menu{
	list-style:none;

	/*flex father*/
	display:flex;
	flex-flow:row nowrap;
}
.nav1 .menu li a{
	text-decoration:none;
	display:block;
	padding:0;
	margin:5px 10px;
	color:var(--color-gray);
	transition:all .3s;
}
.nav1 .menu li a i{
	display:inline-block;
}
.nav1 .menu li a:hover{
	color:var(--color-hover);
}
.nav1 .menu li a i.izquierda{
	display:inline-block;
	font-weight:bold;
}
.nav1 .menu li a i.derecha{
	display:inline-block;
	transform:rotate(180deg);
	font-weight:bold;

	transition: all .2s;
}
.nav1 .menu ul{
	z-index:100;
	display:none;
	position:absolute;
	overflow:hidden;
	width:auto;
	margin: 6px 0 0 0;
	/*box-shadow: 0 1px 7px 1px rgba(0,0,0,0.5);*/
	/*border-radius:10px;*/
}
.nav1 .menu ul::before{
	position:absolute;
	content:"";
	pointer-events: none;
	top:8px;
	left:1em;
	box-sizing: border-box;
	background:#444;
	width:20px;
	height:20px;
	transform:rotate(45deg);
	transition:all .5s;

	z-index:-1;
}
.nav1 .menu ul:hover::before{
	background:var(--color-hover);
}
.nav1 .menu ul li:nth-child(1){
	margin-top:1em;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	overflow: hidden;
}
.nav1 .menu ul li:last-child{
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	overflow: hidden;
}
.nav1 .menu ul li a{
	display:block;
	background:#444;
	color:#FFF;
	border-radius:0;
	font-weight: normal;
	margin:0;
	padding:1em 1.5em;
	text-decoration:none;
	transition:all .5s;
}
.nav1 .menu ul li a:hover{
	background:var(--color-hover);
	color:#FFF;
	border:0px;
}
.nav1 .menu .activado > a{
	color:var(--color-hover);
}

.nav2{
	padding:1em;
	z-index: 100;
}
.nav2 ul{
	list-style:none;

	/*flex father*/
	display:flex;
	flex-flow:row nowrap;
}
.nav2 ul li a{
	text-decoration:none;
	display:block;
	padding:0;
	margin:5px 10px;
	color:var(--color-gray);
	transition:all .3s;
}
.nav2 ul li a i{
	font-size:150%;
}
.nav2 ul li .lg-out{
	color:var(--color-bgr5);
}
.slider{
	/*flex children*/
	order:3;
}
/*CONTAINER MENÚ*/
.container {
	width: 100%;
	padding: 0;
	background-color: #FFF;
	margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	overflow: hidden; /* esta declaración hace que .container conozca dónde terminan las columnas flotantes incluidas y las contenga */

	/*flex father*/
	display:flex;
	flex-flow:row nowrap;
	justify-content: space-between;

	/*flex children*/
	order:3;
}
.sidebar1 {
	border:1px solid var(--color-graylight);
	border-radius:5px;
	padding: 1em;
	margin:1em;
	background:var(--color-bgr1);
	z-index:400;
	color:#FFF;

	/*flex children*/
	flex: 0 0 250px;
	order:1;
}
.sidebar1 h4{
	font-size:150%;
}
.sidebar1 div{
	overflow-y: scroll;
	height:400px;
}
.sidebar1 div::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
}
.sidebar1 div::-webkit-scrollbar-thumb {
    background: var(--color-bgr3);
    border-radius: 4px;
}
/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
.sidebar1 div::-webkit-scrollbar-thumb:hover {
    background: var(--color-bgr2);
}
/* Cambiamos el fondo cuando esté en active */
.sidebar1 div::-webkit-scrollbar-thumb:active {
    background-color: var(--color-gray);
}
.sidebar1 div .nav-cat{
	display:flex;
	flex-flow:column nowrap;
}
.sidebar1 div .nav-cat li{
	list-style: none;
	margin-bottom:10px;
}
.sidebar1 div .nav-cat li a{
	text-decoration:none;
	margin-left:15px;
	color:#FFF;
	font-size:92%;
	transition:all .3s;
}
.sidebar1 div .nav-cat li a:hover{
	color:var(--color-graylight);
	font-weight:bold;
}
.sidebar1 div .nav-cat li a i{
	display:inline-block;
	transform: rotate(90deg);
}
.main-content {
	display:block;
	width:100%;

	/*flex children*/
	order:2;
}
footer {
	display:grid;
  	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap:2%;
	padding: 1em 2%;
	background: var(--color-bgr2);
	color:#FFF;

	/*flex children*/
	order:3;
}
footer div{
	padding:2em 1em;
	background:none;
}
footer div:nth-child(1){
	/*text-align:center;*/
}
footer div:nth-child(1) a img{
	height:60px;
	width:auto;
}
footer div:nth-child(1) p img{
	width:150px;
	height:auto;
}
footer div p a{
	text-decoration:none;
	color:#FFF;
	transition:all .3s;
}
footer div p a i{
	padding:10px;
	border-radius:50%;
	transition:all .5s;
}
footer div p a:hover i{
	background:var(--color-bgr1);
}
.flotante-whatsapp{
	bottom:30px;
	background:var(--color-bgr6);
	transition:all .5s;
}
.flotante-ruta{
	bottom:100px;
	background:var(--color-bgr5);
	transition:all .5s;
}
.flotante-whatsapp, .flotante-ruta{
	position:fixed;
	right:30px;
	color:#FFF;
	padding:30px;
	width:0px;
	height:0px;
	font-size:40px;
	border-radius:50%;
	z-index:200;
	text-decoration:none;

	display:flex;
	justify-content:center;
	align-items:center;
	transition:all .5s;
}
.flotante-whatsapp:hover, .flotante-ruta:hover{
	background:var(--color-gray);
}
.nav-web{
	padding:1em;
	color:var(--color-hover);

	display:flex;
	flex-flow:row wrap;
	justify-content: flex-start;
}
.nav-web a{
	text-decoration:none;
	background:var(--color-bgr3);
	font-size:70%;
	color:#FFF;
	padding: 5px 10px;
	margin:2px;
	border-radius:5px;
	transition:all .5s;
}
.nav-web a:hover{
	background:var(--color-bgr2);
}
.banner-style{
	font:200%/1.4 'Share Tech', sans-serif;
	display:block;
	padding:1em;
	background:var(--color-bgr3);
	color:#FFF;
	text-align:center;
}
.banner-style h2{
	margin:0;
}
.banner-style .ipt-space{
	font-size:50%;
	font-family:'Lato', sans-serif;

	display:flex;
	justify-content: center;
	align-items: center;
}
.banner-style .ipt-space input{
	border:0;
	width:400px;
}
.banner-style .ipt-space input:active, .banner-style .ipt-space input:focus {
	border:0;
}
.banner-style .ipt-space i{
	font-size:25px;
	margin-left:1em;

	animation:pulse;
  	animation-duration: 1s;
	animation-delay:1s;
	animation-iteration-count: infinite;
}
.main-glr-prd{
	/*flex father*/
	padding:1em 0;
	display:flex;
	justify-content:space-around;
	flex-flow:row wrap;

}
.main-glr-prd .glr-ctn{
	position:relative;
	padding:1em;
	border:1px solid var(--color-graylight);
	margin:1em;
	text-align:left;
	transition:all .5s;

	animation: zoomIn;
	animation-duration: 1s;

	/*flex child*/
	flex:1 1 30%;
	max-width:320px;
	min-width:250px;

	/*flex father*/
	display:flex;
	flex-flow:column wrap;
	justify-content: center;
}
.main-glr-prd .glr-ctn:hover{
	box-shadow: 0 0 7px 1px rgba(0,0,0,0.3);
}
.main-glr-prd .glr-ctn div{
	margin-bottom:1em;
}
.main-glr-prd .glr-ctn div .brd-prd{
	position:absolute;
	top:10px;
	left:10px;
}
.main-glr-prd .glr-ctn div .brd-prd img{
	height:45px;
	widht:auto;
}
.main-glr-prd .glr-ctn div .oft-prd{
	position:absolute;
	top:1em;
	right:1em;

	padding:2px 5px;
	font-size:80%;
	font-weight:bold;
	background: var(--color-hover2);
	border-radius: 5px;
	color:#FFF;

	animation:pulse;
  	animation-duration: 1s;
	animation-delay:1s;
	animation-iteration-count: infinite;
}
.main-glr-prd .glr-ctn div .img-prd{
	width:100%;
	height:auto;
	margin:1em 0;
}
.main-glr-prd .glr-ctn div p{
	color:var(--color-gray);
	margin:10px 0 0 0;
}
.main-glr-prd .glr-ctn div .pr-bfr-dsc{
	text-decoration: line-through;
	font-size:80%;
	color:#777;
}
.main-glr-prd .glr-ctn div .pr-aft-dsc{
	font-size:150%;
	font-weight:bold;
}
.main-glr-prd .glr-ctn div .pr-aft-dsc span{
	margin-left:10px;
	font-size:13px;
	color:var(--color-bgr4);
	font-weight:normal;
}
.main-glr-prd .glr-ctn div .ctg-name{
	display:inline-block;
	padding:2px 5px;
	color:#FFF;
	border-radius:5px;
	margin: 10px 0 10px 15px;
	font-size:80%;
}
.main-glr-prd .glr-ctn div .dscrt{
	margin:0 0 1em 0;
}
.main-glr-prd .glr-ctn a{
	padding:10px;
	margin:10px auto;
	margin-top:auto;
	background:var(--color-bgr4);
	color:#FFF;
	border:2px solid var(--color-bgr4);
	text-decoration:none;
	border-radius:5px;
	transition:all .5s;

	display:flex;
	justify-content:center;
	align-items:center;

}
.main-glr-prd .glr-ctn a:hover{
	background:var(--color-gray);
	border:2px solid var(--color-gray);
	padding: 10px 20px;
}
.main-glr-prd .glr-ctn a i{
	margin-left:10px;
}
.main-glr-prd .glr-ctn:last-child div{
	margin:0;
}
.main-glr-prd .glr-ctn:last-child div .lnk-cat{
	color:var(--color-gray2);
	background:none;
	margin:auto;
	border:0;

	display:flex;
	flex-flow:column nowrap;
	align-items:center;
	justify-content:center;
}
.main-glr-prd .glr-ctn:last-child div .lnk-cat i{
	font-size:90px;
	margin:0 0 15px 0;
}
.main-glr-prd .glr-ctn:last-child div .lnk-cat:hover{
	color:var(--color-gray);
}
.main-cnt-ctgr{
	padding:1em;

	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
}
.main-cnt-ctgr div{
	color:var(--color-gray2);
	background:var(--color-graylight);
	margin:.5em;
	border-radius:5px;
	animation: zoomIn;
	animation-duration: 1s;
}
.main-cnt-ctgr div a{
	text-decoration:none;
	color:var(--color-gray2);
	background:var(--color-graylight);
	padding:1em;
	border-radius:5px;


	display:flex;
	flex-flow:row nowrap;
	justify-content: center;
	align-items: center;
}
.main-cnt-ctgr div a:hover{
	background:var(--color-gray);
	color:#FFF;
}
.main-cnt-ctgr div a span:nth-child(1){
	margin-right:10px;
	font-size:150%;
	border-radius:50%;
}
.main-cnt-ctgr div a span:nth-child(2){
	margin:auto;
}
.cnt-brds{
	justify-content:space-around;
	align-items:center;
	padding:2em;

	display:flex;
	flex-flow:row wrap;
}
.cnt-brds img{
	height:40px;
	width:auto;
	margin:10px;
}
.cnt-grid-prdt{
	display:grid;
	grid-gap:2em;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto auto;
}
.grid-img{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;

	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
	padding:1em;
}
.grid-img .cnt-img{
	position:relative;
	text-align:center;
}
.grid-img .cnt-img .main-img{
	width:90%;
	height:auto;
	padding:2em 0 0 0;
}
.grid-img .cnt-img span{
	position:absolute;
	top:10px;
	left:10px;
}
.grid-img .cnt-img span img{
	height:40px;
	width:auto;
}
.grid-dsc{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 4;

	padding:1em;
}
.grid-dsc div{
	padding:1em;
	background:var(--color-graylight);
	margin:1em;
	border-radius:5px;
}
.grid-data {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 4;

	width:400px;

	display:block;
}
.grid-data .glr-ctn{
	background:#FFF;
	position:relative;
	padding:1em;
	margin: 1em;
	border:1px solid var(--color-graylight);
	box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.2);
	text-align:left;
	border-radius:5px;
}

.grid-data .glr-ctn .oft-prd{
	position:absolute;
	top:1em;
	right:1em;

	padding:2px 5px;
	font-size:80%;
	font-weight:bold;
	background: var(--color-hover2);
	border-radius: 5px;
	color:#FFF;

	animation:pulse;
  	animation-duration: 1s;
	animation-delay:1s;
	animation-iteration-count: infinite;

}
.grid-data .glr-ctn .dscrt{
	font-weight:bold;
}
.grid-data .glr-ctn img{
	width:100%;
	height:auto;
}
.grid-data .glr-ctn p{
	color:var(--color-gray);
}
.grid-data .glr-ctn p .spn-com{
	color:var(--color-gray2);
	font-size:90%;
}
.grid-data .glr-ctn p .spn-com i{
	margin-right:10px;
}
.grid-data .glr-ctn .pr-bfr-dsc{
	text-decoration: line-through;
	font-size:80%;
	color:var(--color-gray2);
	margin:0;
}
.grid-data .glr-ctn .pr-aft-dsc{
	font-size:160%;
	font-weight:bold;
}
.grid-data .glr-ctn .pr-aft-dsc span{
	margin-left:10px;
	font-size:13px;
	color:var(--color-bgr4);
	font-weight:normal;
}
.grid-data .glr-ctn .ctg-name{
	display:inline-block;
	padding:2px 5px;
	background:var(--color-bgr3);
	color:#FFF;
	border-radius:5px;
	font-size:80%;
}

.grid-data .glr-ctn a{
	padding:10px;
	margin:10px auto;
	background:var(--color-bgr4);
	color:#FFF;
	border:2px solid var(--color-bgr4);
	text-decoration:none;
	border-radius:5px;
	transition:all .5s;

	animation:pulse;
  	animation-duration: 1s;
	animation-delay:1s;
	animation-iteration-count: infinite;

	display:flex;
	justify-content: center;
	align-items: center;
}
.grid-data .glr-ctn a:hover{
	background:var(--color-gray);
	border:2px solid var(--color-gray);
}
.grid-data .glr-ctn a i{
	margin-right:10px;
}
.main-cnt-us{
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
}
.cnt-us1, .cnt-us3{
	padding:2em;
	display:flex;
	justify-content: space-between;
	flex-flow:row wrap;

}
.cnt-us1 div, .cnt-us3 div{
	flex:1 1 50%;
	text-align:center;

	display:flex;
	flex-flow:column nowrap;
	justify-content: center;
	align-items: center;
}
.cnt-us1 div h2, .cnt-us3 div h2{
	color:var(--color-hover);
}
.cnt-us1 div img{
	width:100%;
	height:auto;
}
.cnt-us3 div iframe{
	width:90%;
	height:500px;
}
.cnt-us3 div a{
	text-decoration:none;
	padding: 1em;
	background:var(--color-graylight);
	color:var(--color-gray);
	border-radius:5px;
	transition:all .5s;
}
.cnt-us3 div a i{
	margin: 0 10px 0 0;
	padding:10px;
	background:var(--color-bgr5);
	color:#FFF;
	border-radius:50%;
}
.cnt-us3 div a:hover{
	background:var(--color-gray);
	color:#FFF;
}
.cnt-us2, .cnt-us4{
	padding:2em;
	background:var(--color-graylight);
	display:flex;
	flex-flow:column nowrap;
	justify-content: center;
	align-items:center;
	text-align:center;
}
.cnt-us2 p i{
	margin: 0 1em 0 0;
	padding:10px;
	background:var(--color-hover);
	color:#FFF;
	border-radius:50%;
}
.cnt-us4 a{
	text-decoration:none;
	padding: 1em;
	margin:5px;
	background:var(--color-gray2);
	color:#FFF;
	border-radius:5px;
	transition:all .5s;
}
.cnt-us4 a i{
	padding:10px;
	margin:0 10px 0 0;
	border-radius:50%;
}
.cnt-us4 a .i1{
	background:var(--color-bgr3);
}
.cnt-us4 a .i2{
	background:var(--color-bgr6);
}
.cnt-us4 a:hover{
	background:var(--color-gray);
}
@media(max-width:1200px){
	.cnt-grid-prdt{
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
	}
	.grid-img{
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	.grid-dsc{
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.grid-data {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}
}
@media(max-width:1000px){
	footer div{
		padding:0;
	}
}
@media(max-width:970px){
	footer {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	footer div{
		padding:1em 2em 1em 3em;
	}
	footer div:nth-child(1){
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	footer div:nth-child(2){
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	footer div:nth-child(3){
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	footer div:nth-child(4){
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.contenedor-menu{
		display: flex;
		flex-flow: row nowrap;
		width: 70px;
	}
	header{
		flex-flow:row nowrap;
		justify-content: space-between;
		height:86px;
		position:fixed;
		top:0;
		z-index:100;
		width: 100%;
	}
	.nav1{
		position:fixed;
		top:86px;
		left:0;
		display:none;
		width:350px;
		height:calc(100% - 86px);
		overflow-y:scroll;
		boxsizing:border-box;
		box-shadow: 10px 10px 18px 6px rgba(0,0,0,.3);
		z-index: 1000;
		padding:0 !important;
		background:var(--color-gray);

		animation:bounceInLeft;
  		animation-duration: 1s;
	}
	.nav1 .menu{
		display:block;
	}
	.nav1 .menu li a i.derecha{
		float:right;
	}
	.nav1 .menu ul{
		position:relative;
		box-shadow: none;
		border:none;
		margin:0;
	}
	.nav1 .menu ul::before{
		display:none;
	}
	.nav1 .menu ul li:first-child, .nav1 .menu ul li:last-child{
		margin:0;
		border-radius:0;
	}
	.nav1 .menu li a{
		margin:0;
		padding:1em;
		background:var(--color-hover);
		color:#FFF;
	}
	.nav1 .menu li a:hover{
		background:var(--color-bgr2);
		color:#FFF;
	}
	.nav1 .menu ul li a {
		padding-left: 3em;
		background:var(--color-graylight);
		color:var(--color-gray);
	}
	.nav1 .menu ul li a:hover{
		background:var(--color-gray);
		color:var(--color-graylight);
	}
	.nav1 .menu ul li a i{
		float:right;
	}
	.nav1 .menu .activado > a{
		background:var(--color-bgr2);
		color:#FFF;
	}
	.sidebar1{
		position:fixed;
		top:86px;
		left:0;
		width:300px;
		overflow-y: scroll;
		margin: 0;
		padding: 1em;
		height: calc(100% - 86px);
		box-shadow: 5px 0px 15px 1px rgba(0,0,0,0.3);
		border-radius:0;
		transform:translateX(-150%);
		transition:all .5s ease;
	}
	body{
		margin-top:86px;
	}
	.hidden-dsk{
		display:inline-block;
	}

}
@media(max-width:900px){
	.sidebar1{
		font-size:120%;
	}
	footer {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
	}
	.responsive_table .cabecera_tabla{
		display:none;
	}
	.responsive_table tr{
		display:flex;
		flex-flow:column nowrap;
		text-align:center;
		padding:1em 0;
	}
	.spn-rsp{
		display:inline-block;
		margin-right:10px;
	}
}
@media(max-width:800px){
	footer {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	footer div{
		padding:1em 1em 1em 10%;
	}
	.cnt-grid-prdt{
		display:flex;
		flex-flow:column nowrap;
	}
	.cnt-grid-prdt .grid-img{
		order:1;
	}
	.cnt-grid-prdt .grid-dsc{
		order:3;
	}
	.cnt-grid-prdt .grid-data{
		order:2;
		width:100%;
	}
}
@media(max-width:700px){
	.cnt-us1, .cnt-us3{
		flex-flow:column wrap;
		padding:0;
		width:100%;
	}
	.cnt-us1 div, .cnt-us3 div{
		padding:2em 0;
	}
	.cnt-us2, .cnt-us4{
		margin:3em 0;
	}
	.cnt-us1 div img{
		width:200px;
		height:auto;

	}
}
@media(max-width:600px){
	footer {
		display:flex;
		flex-flow:column nowrap;
		justify-content: center;
	}
	footer div{
		padding:1em 1em 1em 20%;
	}
	footer div:nth-child(1){

		order:4;
	}
	footer div:nth-child(2){
		order:1;
	}
	footer div:nth-child(3){
		order:2;
	}
	footer div:nth-child(4){
		order:3;
	}
	.nav1{
		width:100%;
		top:70px;
		height:calc(100% - 70px);
		overflow-y:scroll;
	}
	header{
		padding:0;
		height:70px;
	}
	.contenedor-menu a{
		padding:2px 5px;
	}
	.sidebar1{
		top:70px;
		height: calc(100% - 70px);
	}
	.cnt-logo a img{
		height:40px;
		width:auto;
	}
	.banner-style{
		font: 180%/1.4 'Share Tech', sans-serif;
	}
}
@media(max-width:450px){
	footer div{
		padding:1em 1em 1em 10%;
	}
	.banner-style{
		font: 130%/1.4 'Share Tech', sans-serif;
	}
	.cnt-logo a img{
		height:30px;
		width:auto;
	}
}