//Estilos de la pagina de evolucion historica (Url: evolucion)
.page-node-126310 {
	#page-title {
		@include title-block(tint($c-dimgray, 10), 234%);
		font-weight: 100;
	    margin: 0 auto;
		text-align: center;

	    &:after {
	    	margin: 15px auto 0 auto;
	    	width: 60px;
	    }
	}

	.view-timeline {
		.views-row {			
			.views-row {
				background: tint($c-brand-green, 20);
				margin-bottom: 0.3em;
			}
		}

		.views-field-field-period {
			@include inline-block(middle);
			position: relative;
			width: 12%;

			.field-content {
				color: $c-dimgray;
				font-size: 130%;
				font-weight: 100;
			}

			&:after {
				background: tint($c-brand-green, 20);
				border: 1px solid $c-dimgray;
				border-radius: 4px;
				box-shadow: inset 0px 0px 3px $c-white;
				content: '';
				display: inline-block;
				height: 10px;
				position: absolute;
				top: 6px;
				right: -9px;
				width: 10px;
			}
		}

		.history-title {
			background: url('../images/arrow-history-bottom.png') no-repeat 99% 10px;
    		padding: 1.5% 2% 1.5% 80px;
    		position: relative;

    		&.active {
				background: url('../images/arrow-history-top.png') no-repeat 99% 10px;

				.views-field-field-image {
					display: none;
				}
    		}

			.views-field-title {
				@include inline-block(middle);
    			width: 66%;

				.field-content {
					color: $c-white; 
					font-size: 120%;
					font-weight: 100;
					margin: 0;
				}				

				.counts {
    				background: rgba($c-black, 0.3);
    				color: $c-white; 
    				display: inline-block;
    				font-size: 149%;
    				left: 10px;
    				margin-top: -27px;
    				padding: 15px 0px;
   		 			position: absolute;
    				text-align: center;
    				top: 50%;
    				width: 55px;
				}
			}

			.views-field-field-image {
				@include inline-block(middle);
				position: absolute;
				right: 5%;
				top: 10px;

				img {
					border: 1px solid $c-white;
					border-radius: 50%;
				}
			}

			.views-field-nid {
				display: none;
			}
		}

		.history-body {
			color: $c-white;
			display: none;
			padding: 2%;

			.views-field-field-body {
				@include inline-block(middle);
				margin-right: 5%;
				width: 70%;
			}

			.views-field-field-image-1 {
				@include inline-block(top);
				width: 20%;

				img {
					border: 1px solid $c-white;
					border-radius: 50%;
				}
			}
		}

		.views-field-view {
			@include inline-block(middle);
			border-left: 1px solid $c-dimgray;
			padding-left: 1%;
			width: 86%;
		}
	}

	.image-text-bk {
		margin-top: 3em;
	}

	.image-text-bk-content {
		background: $c-white;
		border: 1px solid shade($c-brand-whitesmoke, 10);
		box-shadow: 2px 2px 1px shade($c-brand-whitesmoke, 20);
		display: inline-block;
		margin-bottom: 1em;
		padding: 0;
		position: relative;
		width: 100%;

		img {
			float: left;
			width: 51%;
		}

		.image-text-bk-resume {
			color: $c-dimgray;
			float: right;
			font-size: 1.1em;
			font-weight: 100;
			line-height: 1.5;
			padding: 3% 2%;
			width: 45%;

			h2 {
				@include title-block($c-brand-green-dark, 190%);
				font-weight: 100;
				margin-bottom: 10px;

				&:after {
					margin-top: 8px;
    				width: 56px;
				}
			}

			p {
				a {
					bottom: 2%;
					color: $c-brand-green-dark;
					font-weight: 100;
					padding-right: 27px;
					position: absolute;
					right: 2%;

					&:after {
						background: url("../images/sprite.png") -181px -54px no-repeat;
    					content: '';
    					height: 20px;
    					margin-top: -10px;
    					position: absolute;
   		 				right: 0;
    					top: 50%;
    					width: 20px;
					}
				}
			}
		}
	}
}