/*Index*/
	.e{
		width: 95%;
		margin: 0 2.5%;
	}
	.hola{
		margin-bottom: 10px;
	}
	.fecha{
		font-weight: 600;
	}
	.list{
		font-weight: 600;
		position: relative;
 	}
 	.list:hover{
 		background: rgba(0, 0, 0, 5%);
 	}
 	.list .imgs{
 		position: absolute;
 		right: 0;
 		bottom: 0;
 	}
 	.list p{
 		padding: 17px;
 		width: 80%;
 	}
 	.fa-chevron-right{
 		position: absolute;
 		top: 0;
 		right: 0;
 		padding: 20px;
 	}
 	.box_op{
 		border:1px solid rgba(0, 0, 0, 10%);
 		width: 95%;
 		margin: 0 2.5%;
 		border-radius: 10px;
 		box-shadow:0 2px 5px rgba(0, 0, 0, 15%);
 		margin-bottom: 30px;
 	}
/*Departamentos*/
	.cadep{
		background: #e7f1fb;
		padding: 12px 5px;
	}
	.borde{
		border: 1px solid rgba(0, 0, 0, 10%);
		border-radius: 5px;
		overflow: hidden;
		margin-bottom: 300px;
	}
	.num{
		border-top: 1px solid rgba(0, 0, 0, 10%);
		border-bottom: 1px solid rgba(0, 0, 0, 10%);
		padding: 12px 5px;
	}
	.g{
		padding: 0 20px 0 10px;
	}
/*Login*/
	.login{
		background: white;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 10%);
		border-radius: 10px;
		padding: 25px;
		width: 60%;
	}
	.login h2{
		margin-bottom: 20px;
		text-align: center;
	}
	.login input{
		border: 1px solid rgba(0, 0, 0, 10%);
		padding: 5%;
		font-size: 15px;
		border-radius: 5px;
		width: 90%;
	}
	.login input:focus{
		outline: 1px solid #0055ba;
	}
	.login button{
		background: #0055ba;
		color: white;
		border: none;
		padding: 10px;
		font-size: 15px;
		border-radius: 5px;
		width: 100%;
	}
	.login label{
		color: rgba(0, 0, 0, 50%);
	}
	.footer{
		margin-top: 10px;
	}
	.login p{
		background: rgba(0, 0, 0, 30%);
		color: white;
		padding: 10px;
		border-radius: 5px;
		text-align: center;
		margin-top: -10px;
	}
	.login a{
		color: white;
	}
/*Juego xd*/
	#quiz-container {
	    width: 95%;
	    padding: 2.5%;
	    text-align: center;
	    margin-top: 25%;
	}
	#question {
	    font-size: 25px;
	    margin-bottom: 20px;
	    border: 1px solid #0055ba;
	    border-radius: 5px;
	    font-weight: 600;
	    padding: 10px;
	}
	.btn {
	    background: #0055ba;
	    color: white;
	    border: none;
	    border-radius: 5px;
	    width: 48%;
	    float: left;
	    padding: 10px;
	    margin: 1%;
	    font-size: 20px;
	}
	#timer {
	    position: fixed;
	    right: 10px;
	    top: 70px;
	    background: red;
	    color: white;
	    padding: 5px;
	    border-radius: 5px;
	}
	.estrella{
		background: #ffd500;
		color: white;
		padding: 5px;
		border-radius:5px 5px 0 0;
		font-weight: 600;
		font-size: 20px;
	}
	#message{
		border-radius: 0 0 5px 5px;
	}
/*Usuarios*/
	.boxuser{
		border: 1px solid #c5c5c5;
		margin: 10px;
		border-radius: 5px;
		overflow: hidden;
	}
	.name{
		background: #0055ba;
		color: white;
		padding: 10px;
	}
	.user{
		padding: 10px;
		border-bottom: 1px solid #c5c5c5;
	}
	.pasw{
		padding: 10px;
	}
	.code{
		font-family: 'Martian Mono', monospace;
	}
	.btninvi{
		height: 60px;
		width: 60px;
		position: absolute;
		right: 0;
	}
	.gerencia{
		transition: all .3s ease;
		visibility: hidden;
		opacity: 0;
	}
	#geren:checked ~ .gerencia{
		visibility: visible;
		opacity: 1;
		display: block;
	}
/*Buscador*/
	.group {
	 	display: flex;
	 	line-height: 28px;
	 	align-items: center;
	 	position: relative;
	 	width: 95%;
	 	margin: 10px 0;
	}
	.input {
	 	width: 100%;
	 	height: 40px;
	 	line-height: 28px;
	 	padding: 0 1rem;
	 	padding-left: 2.5rem;
	 	border: 2px solid transparent;
	 	border-radius: 8px;
	 	outline: none;
	 	background-color: #f3f3f4;
	 	color: #0d0c22;
	 	transition: .3s ease;
	}
	.input::placeholder {
	 	color: rgba(0, 0, 0, 80%);
	}
	.input:focus, input:hover {
	 	outline: none;
	 	border-color: #0055ba;
	 	background-color: #fff;
	 	box-shadow: 0 0 0 4px #c2dcff;
	}
	.icon {
	 	position: absolute;
	 	left: 1rem;
	 	fill: rgba(0, 0, 0, 80%);
	 	width: 1rem;
	 	height: 1rem;
	}
/*Footer*/
	.footer{
		background: #0055ba;
		color: white;
		margin-top: 30px;
		text-align: center;
		padding: 20px 0;
		border-radius: 10px 10px 0 0;
	}
	.footer a{
		color: white;
		text-decoration: underline rgba(255, 255, 255, 50%);
	}
	.yoxd{
		background: #0055ba;
		color: white;
		border-radius: 10px;
		width: 95%;
		margin: 0 2.5%;
		position: relative;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 15%);
		overflow: hidden;
	}
	.yoxd div{
		width: 65%;
		padding: 5% 0 5% 5%;
		display: inline-block;
		width: 70%;
	}
	.yoxd img{
		width: 20%;
		border-radius: 50%;
		display: inline-block;
		border: 3px solid white;
		margin-top: 4%;
	}
	.yoxd a{
		background: white;
		padding: 10px 15px;
		border-radius: 30px;
		text-decoration: underline;
	}
/*Codigos*/
	.codigos{
		width: 95%;
		margin-top: 2.5%;
	}
	.title{
		background: #e7f1fb;
		color: black;
		padding: 10px;
		text-align: left;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 20%);
		border-radius: 5px;
		margin-bottom: 10px;
		font-weight: 600;
	}
	.art{
		display: flex;
		align-items: center;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 15%);
		border-radius: 5px;
		margin-bottom: 10px;
	}
	.art li{
		display: none;
	}
	.desc{
		font-size: 25px;
		font-weight: 600;
		padding: 5px 0 5px 20px;
		width: 70%;
		text-align: left;
	}
	.art img{
		padding: 5px;
		height: 73px;
		transition: all .3s ease;
		overflow: hidden;
	}
	#overlay {
	    display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(255, 255, 255, 90%);
	    justify-content: center;
	    align-items: center;
	    z-index: 1;
	}
	#zoomed-img {
	    width: 60%;
	    height: auto;
	    transition: all 0.3s ease;
	    border-radius: 10px;
	    box-shadow: 0 5px 10px rgba(0, 0, 0, 30%);
	}
	#overlay.active {
	    display: flex;
	}
/*Head*/
	header{
		background: #0055ba;
		color: white;
		height: 60px;
		box-shadow: 0 5px 5px rgba(0, 0, 0, 0%);
		display: flex;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 999999999999999999;
		border-radius: 0 0 10px 10px;
	}
	header p{
		margin: 0 20px;
		font-size: 20px;
	}
	.fa-bars{
		padding-left: 20px;
		font-size: 25px;
	}
/*Btn Up*/
	#up{
		position: fixed;
		bottom: 0px;
		right: 0px;
		margin: 30px;
		z-index: 999;
		background: #0055ba;
		color: white;
		padding: 15px;
		border-radius: 5px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 30%);
	}
/*Box Menu*/
	.boxmenu{
		background: white;
		height: 100%;
		width: 300px;
		position: fixed;
		top: 0;
		left: -100vh;
		box-shadow: 5px 0 5px rgba(0, 0, 0, 30%);
		transition: all .3s ease;
		z-index: 99;
		z-index: 9999999;
		overflow: scroll;
	}
	.fontmenu{
		background: rgba(0, 0, 0, 30%);
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 9;
		opacity: 0;
		visibility: hidden;
		transition: ease .3s all;
		backdrop-filter: blur(5px);
		z-index: 999999;
		top: 0;
	}
	.boxmenu a{
		display: block;
		font-size: 20px;
		background: rgba(0, 0, 0, 8%);
		padding: 10px;
		margin: 10px;
		border-radius: 5px;
	}
	.boxmenu p{
		padding-left: 10px;
		color: rgba(0, 0, 0, 50%);
		margin-bottom: -10px;
	}
	.opaci{
		color: rgba(0, 0, 0, 20%);
	}
/*Boton menu*/
	#check{
		display: none;
	}
	#check:checked ~ .boxmenu{
		left: 0;
	}
	#check:checked ~ .fontmenu{
		opacity: 1;
		visibility: visible;
	}
/*Animacion Navidad*/
	@-moz-keyframes nieve{	
		from{top:-40px;}
	    to{top:101%;}
	}
	@-webkit-keyframes nieve{	
		from{top:-40px;}
	    to{top:2000px;}
	}
	@keyframes nieve{	
		from{top:-40px;}
	    to{top:2000px;}
	}

	@-moz-keyframes horiz2{
	    20%{transform:translateX(0);}
	    50%{transform:translateX(150px);}
	    80%{transform:translateX(0);}
	}
	@-webkit-keyframes horiz2{
	    20%{transform:translateX(0);}
	    50%{transform:translateX(150px);}
	    80%{transform:translateX(0);}
	}
	@keyframes horiz2{
	    20%{transform:translateX(0);}
	    50%{transform:translateX(-70px);}
	    80%{transform:translateX(0);}
	}

	@-moz-keyframes horiz{
	    20%{transform:translateX(0);}
	    50%{transform:translateX(150px);}
	    80%{transform:translateX(0);}
	}
	@-webkit-keyframes horiz{
	    20%{transform:translateX(0);}
	    50%{transform:translateX(150px);}
	    80%{transform:translateX(0);}
	}
	@keyframes horiz{
	    20%{transform:translateX(0);}
	    50%{transform:translateX(150px);}
	    80%{transform: translateX(0);}
	}
		
	.tpl-snow > div{position:fixed;-webkit-animation:ease-in infinite normal;-moz-animation:ease-in infinite normal;animation:ease-in infinite normal;}	

	.tpl-snow > div{z-index:9999999999999;width:10px;height:10px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background-color:#fff;-webkit-animation-name:nieve,horiz;-moz-animation-name:nieve,horiz;animation-name:nieve,horiz;box-shadow:0 1px 3px rgba(0, 0, 0, 50%);}
	.tpl-snow > div:nth-of-type(odd){width:5px; height:5px;-webkit-animation-name:nieve,horiz2;-moz-animation-name:nieve,horiz2;animation-name:nieve,horiz2;}

	.tpl-snow > div:nth-of-type(1){left:40px;-webkit-animation-duration:5.5s;-moz-animation-duration:5.5s;animation-duration:5.5s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
	.tpl-snow > div:nth-of-type(2){left:120px;-webkit-animation-duration:7s;-moz-animation-duration:7s;animation-duration:7s;}
	.tpl-snow > div:nth-of-type(3){left:200px;-webkit-animation-duration:8s;-moz-animation-duration:8s;animation-duration:8s;}
	.tpl-snow > div:nth-of-type(4){left:20%;-webkit-animation-duration:6s;-moz-animation-duration:6s;animation-duration:6s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
	.tpl-snow > div:nth-of-type(5){left:30%;-webkit-animation-duration:9s;-moz-animation-duration:9s;animation-duration:9s;}
	.tpl-snow > div:nth-of-type(6){left:40%;-webkit-animation-duration:7.2s;-moz-animation-duration:7.2s;animation-duration:7.2s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
	.tpl-snow > div:nth-of-type(7){left:50%;-webkit-animation-duration:10s;-moz-animation-duration:10s;animation-duration:10s;}
	.tpl-snow > div:nth-of-type(8){left:60%;-webkit-animation-duration:6.4s;-moz-animation-duration:6.4s;animation-duration:6.4s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
	.tpl-snow > div:nth-of-type(9){left:70%;-webkit-animation-duration:10s;-moz-animation-duration:10s;animation-duration:10s;-webkit-animation-delay:1.4s;-moz-animation-delay:1.4s;animation-delay:1.4s;}
	.tpl-snow > div:nth-of-type(10){left:80%;-webkit-animation-duration:8s;-moz-animation-duration:8s;animation-duration:8s;}
	.tpl-snow > div:nth-of-type(11){left:90%;-webkit-animation-duration:7.1s;-moz-animation-duration:7.1s;animation-duration:7.1s;-webkit-animation-delay:2s;-moz-animation-delay:2s;animation-delay:2s;}
	.tpl-snow > div:nth-of-type(12){left:99%;-webkit-animation-duration:6.6s;-moz-animation-duration:6.6s;animation-duration:6.6s;-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;animation-delay:1.6s;}
	.tpl-snow > div:nth-of-type(13){left:10px;-webkit-animation-duration:10.2s;-moz-animation-duration:10.2s;animation-duration:10.2s;}
	.tpl-snow > div:nth-of-type(14){left:180px;-webkit-animation-duration:12s;-moz-animation-duration:12s;animation-duration:12s;}
	.tpl-snow > div:nth-of-type(15){left:213px;-webkit-animation-duration:7.3s;-moz-animation-duration:7.3s;animation-duration:7.3s;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s;}
	.tpl-snow > div:nth-of-type(16){left:23%;-webkit-animation-duration:9.2s;-moz-animation-duration:9.2s;animation-duration:9.2s;}
	.tpl-snow > div:nth-of-type(17){left:38%;-webkit-animation-duration:5s;-moz-animation-duration:5s;animation-duration:5s;}
	.tpl-snow > div:nth-of-type(18){left:45%;-webkit-animation-duration:15s;-moz-animation-duration:15s;animation-duration:15s;}
	.tpl-snow > div:nth-of-type(19){left:58%;-webkit-animation-duration:5s;-moz-animation-duration:5s;animation-duration:5s;}
	.tpl-snow > div:nth-of-type(20){left:64%;-webkit-animation-duration:12s;-moz-animation-duration:12s;animation-duration:12s;}
	.tpl-snow > div:nth-of-type(21){left:76%;-webkit-animation-duration:5.6s;-moz-animation-duration:5.6s;animation-duration:5.6s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
	.tpl-snow > div:nth-of-type(22){left:86%;-webkit-animation-duration:8.5s;-moz-animation-duration:8.5s;animation-duration:8.5s;}
	.tpl-snow > div:nth-of-type(23){left:83%;-webkit-animation-duration:14.4s;-moz-animation-duration:14.4s;animation-duration:14.4s;}
	.tpl-snow > div:nth-of-type(24){left:95%;-webkit-animation-duration:12s;-moz-animation-duration:12s;animation-duration:12s;}
	.tpl-snow > div:nth-of-type(25){left:55px;-webkit-animation-duration:8.7s;-moz-animation-duration:8.7s;animation-duration:8.7s;-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s;}
	.tpl-snow > div:nth-of-type(26){left:133px;-webkit-animation-duration:5.2s;-moz-animation-duration:5.2s;animation-duration:5.2s;}
	.tpl-snow > div:nth-of-type(27){left:215px;-webkit-animation-duration:10.4s;-moz-animation-duration:10.4s;animation-duration:10.4s;-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;animation-delay:1.6s;}
	.tpl-snow > div:nth-of-type(28){left:26%;-webkit-animation-duration:9s;-moz-animation-duration:9s;animation-duration:9s;}
	.tpl-snow > div:nth-of-type(29){left:33%;-webkit-animation-duration:12s;-moz-animation-duration:12s;animation-duration:12s;}
	.tpl-snow > div:nth-of-type(30){left:49%;-webkit-animation-duration:9.4s;-moz-animation-duration:9.4s;animation-duration:9.4s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
	.tpl-snow > div:nth-of-type(31){left:55%;-webkit-animation-duration:9.1s;-moz-animation-duration:9.1s;animation-duration:9.1s;}
	.tpl-snow > div:nth-of-type(32){left:68%;-webkit-animation-duration:9.6s;-moz-animation-duration:9.6s;animation-duration:9.6s;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s;}
	.tpl-snow > div:nth-of-type(33){left:73%;-webkit-animation-duration:12.4s;-moz-animation-duration:12.4s;animation-duration:12.4s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
	.tpl-snow > div:nth-of-type(34){left:85%;-webkit-animation-duration:9s;-moz-animation-duration:9s;animation-duration:9s;-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s;}
	.tpl-snow > div:nth-of-type(35){left:93%;-webkit-animation-duration:5s;-moz-animation-duration:5s;animation-duration:5s;}
	.tpl-snow > div:nth-of-type(36){left:99%;-webkit-animation-duration:10.6s;-moz-animation-duration:10.6s;animation-duration:10.6s;}
	.tpl-snow > div:nth-of-type(37){left:15px;-webkit-animation-duration:9.6s;-moz-animation-duration:9.6s;animation-duration:9.6s;}
	.tpl-snow > div:nth-of-type(38){left:99px;-webkit-animation-duration:7.5s;-moz-animation-duration:7.5s;animation-duration:7.5s;}
	.tpl-snow > div:nth-of-type(39){left:260px;-webkit-animation-duration:11s;-moz-animation-duration:11s;animation-duration:11s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
	.tpl-snow > div:nth-of-type(40){left:28%;-webkit-animation-duration:19s;-moz-animation-duration:19s;animation-duration:19s;}
	.tpl-snow > div:nth-of-type(41){left:35%;-webkit-animation-duration:14s;-moz-animation-duration:14s;animation-duration:14s;}
	.tpl-snow > div:nth-of-type(42){left:43%;-webkit-animation-duration:5.6s;-moz-animation-duration:5.6s;animation-duration:5.6s;}
	.tpl-snow > div:nth-of-type(43){left:53%;-webkit-animation-duration:8.8s;-moz-animation-duration:8.8s;animation-duration:8.8s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
	.tpl-snow > div:nth-of-type(44){left:66%;-webkit-animation-duration:16s;-moz-animation-duration:16s;animation-duration:16s;}
	.tpl-snow > div:nth-of-type(45){left:78%;-webkit-animation-duration:6s;-moz-animation-duration:6s;animation-duration:6s;}
	.tpl-snow > div:nth-of-type(46){left:88%;-webkit-animation-duration:9.5s;-moz-animation-duration:9.5s;animation-duration:9.5s;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s;}
	.tpl-snow > div:nth-of-type(47){left:94%;-webkit-animation-duration:7.6s;-moz-animation-duration:7.6s;animation-duration:7.6s;}
	.tpl-snow > div:nth-of-type(48){left:96%;-webkit-animation-duration:8.2s;-moz-animation-duration:8.2s;animation-duration:8.2s;-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}

	@media(max-width:600px){
		.tpl-snow > div:nth-of-type(24) ~ *{display:none;}
	}

	@media(max-width:800px){
		.tpl-snow > div:nth-of-type(36) ~ *{display:none;}
	}
/*Gafetes*/
	.back{
		position: relative;
		margin-bottom: 150%;
		width: 100%;
	}
	.flip-card {
		width: 100%; 
		position: relative;
		display: inline-block;	
	}
	.flip-card img{
		height: auto;
		width: 90%;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	}
	.flip-card-inner {
	  transition: transform 0.5s;
	  transform-style: preserve-3d;
	  backface-visibility: hidden;
	  position: relative;
	}

	.flip-card:focus {
	    outline: 0;
	}

	.flip-card:hover .flip-card-inner,
	.flip-card:focus .flip-card-inner{
	  transform: rotateY(180deg);
	}

	.flip-card-front,
	.flip-card-back {
	  position: absolute;
	}

	.flip-card-front {
	  z-index: 2;
	}

	.flip-card-back {
	  transform: rotateY(180deg);
	  z-index: 1;
	}
/*General*/
	*{
		margin: 0;
		padding: 0;
		font-family: 'Urbanist', arial;

	}
	a{
		text-decoration: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		color: black;
	}
	.filtro{
	    display: none;
	}