//Estilos de la pagina principal de polired (Url: Polired)

.node-type-polired {
	.group-grupo-2,
	.group-grupo-1 {
		@include holder;
	}
	#block-seed-tools-seed-title {
		@include element-invisible;	
	}
	#main-inner {
		.section {
			@include reset-holder;
		}
	}

	.field-name-noticias-principales-polired {
		@include inline-block(top);
		width: 50%;

		.view-polired-noticia .view-content {
			@include ib-grid;
			height: 100%;

			.views-row {
				@include inline-block(top);
				background: shade($c-blue-menu, 20);
				border: 1px solid shade($c-brand-whitesmoke, 10);
				box-shadow:  0px 2px 4px shade($c-brand-whitesmoke, 20);
				margin-right: 3%;
				width: 47%;
				height: 100%;

				&-last {
					margin-right: 0;
				}

				.views-field-field-imagen {
					img {
						width: 100%;
					}
				}
			}

			.views-field-title {
				padding: 3% 5% 0% 5%;
				text-align: center;

				a {
					color: $c-white;
					font-size: 116%;
					font-weight: 100;
				}
			}

			.views-field-field-resumen {
				color: $c-white;
    			font-size: 91%;
    			font-weight: 100;
    			line-height: 1.4;
    			padding: 1% 5% 4% 5%;
    			text-align: center;
			}
		}
	}

	.field-name-polired-slider {
		margin: 1em 0;
		position: relative;

		.view-footer {
			position: absolute;
			bottom: 2%;
			width: 100%;
		}
	}

	.field-name-field-polired-video {
		@include inline-block(top);
		width: 50%;

		.media-youtube-video {
			background: $c-black;	
		}
		iframe {
			height: 320px;
			width: 100%;
		}
	}

	.view-polired-slider {
		@include caroufredsel(rgba(shade($c-silver, 20), 0.7), $c-dimgray);
	}

	.view-polired-coest {
		@include caroufredsel(shade($c-silver, 10), $c-dimgray);
		position: relative;

		.view-footer {
			bottom: 10px;
			position: absolute;
			width: 100%;
		}
	}

	.group-menu-servicios {
		background: url('../images/Polired-textura.png');

		> h3 {
			@include holder;
			color: $c-white;
			padding-bottom: 25px;
    		padding-top: 25px;
		}
		
		.field-name-los-servicios-a-su-mano {
			background: shade($c-white,0.8);			
		}
		
		.field-items {
			@include holder;
		}

		.field-item {
 			> .menu {
			  margin: 0;

				> .menu-item {
					@include inline-block(top);
					list-style: none;
					position: relative;
					
					&:hover {
						> a,
						> a:link {
						   	background: $c-brand-green-dark;
    						color: $c-white;
    						cursor: pointer;	
							
							&:after {
    							content: none;
    						}
						}
					}
					> a,
					> a:link {
						color: $c-brand-green-dark;
   						display: inline-block;
						font-size: 123%;
						font-weight: 100;
    					padding: 10px 25px 10px 13px;
    					position: relative;

    					&:after {
    						@include size(18px, 16px);
    						background: url('../images/sprite.png') no-repeat -155px -74px;
    						content: '';
    						display: block;
    						margin-top: -8px;
    						position: absolute;
    						right: 3px;
    						top: 50%;
    					}
					}

					.menu {
    					background: rgba(tint($c-brand-green, 20), 0.9);
    					box-shadow: 2px 4px 8px $c-dimgray;
						display: none;
						margin: 0;
						position: absolute;
						width: 250px;
    					z-index: 1;

						 > .menu-item {
							display: block;
	    					
	    					&:hover {
    							> .nolink {
									background: $c-white;
									color: $c-brand-green;
									text-decoration: none;
    							}
    						}

							.nolink,
							a, a:link {
								color: $c-white;
								display: block;
								font-weight: 100;
								padding: 3px 10px;

								&:after {
									content: none;
								}

								&:hover {
									background: $c-white;
									color: $c-brand-green;
									text-decoration: none;
								}
							}
						}
					}
				}

				.expanded {
					&:hover > .menu {
						display: block;

						.expanded {
							position: relative;

							> ul {
								position: absolute;
								top: 0;
								right: -250px;
							}		
						}
					}
				}
			}
		}

	}

	.group-servicios {
		background: $c-lightgray;
		margin-bottom: 1.5em;
	}
	
	.group-grupo-1-servicio {
		@include holder;
		padding-bottom: 30px;
		padding-top: 30px;
	}

	.group-image-title  {
		@include inline-block(top);
		position: relative;
		width: 29%;

		.views-field-title {
    		bottom: 30px;
    		background: rgba($c-black, 0.7);
    		left: 5%;
    		position: absolute;
    		padding: 3%;
   			width: 70%;

   			a {
				color: $c-white;
				font-size: 120%;
    			font-weight: 100;
   			}
		}
	}

	.group-link-services {
		@include inline-block(top);
		background: $c-white;
		box-shadow:  0px 2px 4px shade($c-brand-whitesmoke, 20);
		padding: 2%;
		width: 67%;

		.field-group-div {
			@include inline-block(top);
			width: 49%;

			h3 {
				color: tint($c-brand-orange, 10);
				font-weight: 100;
				font-size: 135%;
				text-transform: uppercase;
			}
		}

		.group-utilizados {

			.field-items {
				width: 77%;

				.field-item {
					border-bottom: 1px solid tint($c-dimgray, 20);
					padding: 2% 0;

					a, a:link {
						background: url('../images/arrow-black.png') no-repeat center left;
						color: $c-dimgray;
						font-size: 105%;
						font-weight: 100;
						padding-left: 20px;
					}

					&:last-child {
						border-bottom: none;
					}
				}
			}	
		}
	}


	.group-grupo-admin-1 {
		box-shadow:  0px 2px 4px shade($c-brand-whitesmoke, 20);
		margin-bottom: 1.5em;
	}

	.group-administrar {
		background: $c-color-event;
		border-bottom: 1px solid tint($c-color-event, 30);
		padding: 2%;

		.field-type-link-field {
			line-height: 1.1;
			margin: 5px auto 0;
			width: 55%;
			
			a {
				color: $c-white;
				font-size: 90%;
				font-weight: 100;
			}
		}

		> h3 {
			@include inline-block(middle);
			color: $c-white;
			font-size: 200%;
			font-weight: 100;
			margin: 0;
			width: 20%;
		}

		.group-grup-admin {
			@include inline-block(middle);
			width: 80%;

			> .field-group-div {
				@include inline-block(top);
				text-align: center;
				width: 20%;
			}
		}
	}

	.group-temas {
		background: tint($c-color-event, 10);
		padding: 2%;

		> h3 {
			@include inline-block(middle);
			color: $c-white;
			font-size: 200%;
			font-weight: 100;
			margin-bottom: 0;
			margin-right: 3%; 
			width: 20%;
		}

		.field-name-field-temas-transversales {
			@include inline-block(middle);
			width: 77%;

			.field-items {
				@include ib-grid;
				.field-item {
					@include inline-block(middle);
					border-bottom: 1px solid tint($c-color-event, 30);
					margin-right: 3%;
					padding: 1% 0;
					width: 30%;

					a, a:link {
 						color: $c-white;
						font-size: 105%;
						font-weight: 100;
						padding-left: 20px;
						position: relative;

						&:before {
							background: url('../images/sprite.png') no-repeat -201px -89px;
							content: '';
							display: inline-block;
							height: 11px;
							left: 0;
							margin-top: -5px;
							position: absolute;
							top: 50%;
							width: 12px;
						}
					}

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}
	}

	.field-name-encuesta {
		@include inline-block(top);
		background: url('../images/polired-fondo-rojo.png');
		background-size: cover; 
		box-sizing: border-box;
		margin-right: 2%;
		padding: 2%;
		width: 32%;

		form {
			text-align: center;
		}

		.field-name-title  {
			text-align: left;
			h2 {
				color: $c-white;
				font-size: 110%;
			}
		}

		.form-item  {
			text-align: left;
			label {
				font-size: 93%;
				font-weight: 100;
				color: $c-white;
			}
		}

		.form-submit {
			@include button;
			background: tint($c-brand-green, 20);
			margin-top: 25px;
		}
	}

	.field-name-field-link-extras {
		@include inline-block(top);
		background: $c-blue-menu;
		margin-right: 2%;
		width: 32%;

		.field-items {
			.field-item {
    			border-bottom: 1px solid $c-white;
				padding: 4%;
				
				a, a:link {
					color: $c-white;
					font-weight: normal;
   			 		padding: 4px 0 4px 29px;
   			 		position: relative;

   			 		&:before {
   			 			@include size(22px);
   			 			background: rgba($c-white, 0.8);
   			 			border-radius: 50%;
   			 			content: '';
   			 			left: 0;
   			 			display: inline-block;
   			 			margin-top: -11px;
   			 			position: absolute;
   			 			top: 50%;
   			 		}
				}
			}
		}
	}

	.group-clasificados {
		@include inline-block(top);
		position: relative;
		width: 32%;

		.field-name-field-imagen-clasificados {
			img {
				width: 100%;
			}
		}

		.field-name-field-link-clasificados {
			position: absolute;
			left: 0;
			margin-top: -22px;
			top: 50%;
			text-align: center;
			width: 100%;

			a {
				color: $c-white;
				font-size: 220%;
				font-weight: 100;
			}
		}
	}

	.poll {
		.bar {
			background: $c-white;
			border-radius: 7px;
		}

		.text {
			color: $c-white;
			font-weight: 100;
		}

		.foreground {
			background: rgba(tint($c-brand-green, 20), 0.9);
			border-radius: 7px;
		}

		.percent {
			color: $c-white;
			font-style: italic;
			font-size: 0.8em;
		}

		.total {
			color: $c-white;
			font-weight: bold;
		}
	}
}