//Estilos del menu expandido del menu principal (Trámites, servicios e información para);
.block-system-main-menu  {

	.menu-item {
		list-style: none;
		text-align: left;
	}

	> .content {
		> .menu {
			> .expanded  {

				> .menu {
					position: absolute !important; 
					clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
					clip: rect(1px, 1px, 1px, 1px); 
				}

				> .content-father-main {
					background: rgba($c-black, 0.9);
					height: 100%;
					left: 0;
					padding-top: 100px;
					position: fixed;
					top: 0;
					width: 100%;
					z-index: 100;
					
					&.element-invisible {
						padding: 0;
						height: 0;
						overflow: auto;
						width: 0;
					}

					> .menu {
						@include holder;
						@include ib-grid;
						display: block;
						text-align: left;
						overflow: hidden;
						padding: 0;

						> .menu-item {
							@include inline-block(top);
							margin-right: 2%; 
							width: 32%;
							
							.nolink {
								border-bottom: 1px dashed $c-white;
								color: $c-white;
								display: inline-block;
								font-size: 1.1em;
								margin-bottom: 1em;
								padding: 0 0 0.5em 0!important; 
								width: 100%;
							} 

							.menu-item {
								a, a:link  {
									color: $c-expanded-menu;
									font-weight: 100;
									display: inline-block;
									font-size: 1em;
									line-height: 1.7;
									padding: 2px 0 2px 5%;
									position: relative;
									width: 95%;
									z-index: 1;

									&:hover {
										background: tint($c-gray, 10);
										color: shade($c-dimgray, 40);
										text-decoration: none;
									}

									&:before {
										@include size(6px, 10px);
										content: '';
										background: url('../images/sprite.png') no-repeat -211px -19px;
										left: 5px;
										position: absolute;
										top: 11px;
									}
								}
							}

							&:nth-child(3n) {
								margin-right: 0;
							}
						}

						.expanded {
							color: blue;

							> a, 
							> a:link {
								color: $c-white!important;

								&:before {
									background: $c-white!important;
									border-radius: 50%;
									height: 5px!important;
									top: 13px!important;
									width: 5px!important;
								}

								~ .menu {
									li {
										a, a:link {
											padding-left: 10%;

											&:before {
												left: 25px;
											}
										}
									}
								}	
							}
						}
					}
					.close {
						@include size(29px);
						background: url('../images/sprite.png') no-repeat -225px -109px;
						cursor: pointer;
						display: inline-block;
						position: absolute;
						right: 1%;
						top: 10px;
						z-index: 1000;

						&:hover {
							background-position: -225px -75px;
						}
					}
				}
			}
		}	
	}
}