#DownloadsPageView {

	@extend .absolute;
	overflow: hidden;
	opacity: 0;

	> div {

		ul#download-types {

			@extend .absolute;

			top: 30px;
			white-space: nowrap;

			li {

				display: inline-block;
				position: relative;
				margin-right: 17px;

				figure.dot { 
				
					@extend .absolute;

					width: 4px;
					height: 4px;
					margin: 7px 8px 4px 0px;

					svg * { fill: #fff; }
				}

				button { 
					
					position: relative;

					@include roboto-condensed;
					font-size: 15px;
					text-transform: uppercase;
					color: #fff;

					margin-left: 15px;
				}
			}
		}

		.centered {

			@extend .absolute;
			z-index: 1;

			div#download-title {

				@extend .absolute;
				z-index: 1;
				opacity: 0;

				header {
					
					@extend .absolute;
					@include play-bold;
					font-size: 28px;
					text-transform: uppercase;
					white-space: nowrap;
					color: #fff;
				}

				figure {

					@extend .absolute;
					top: 40px;
					width: 6px;
					height: 18px;

					svg * { fill: #fff; }
				}
			}

			div#download-thumbs-container {

				@extend .absolute;

				div.thumb-block-container {
					
					@extend .absolute;
					top: 80px;

					div.download-thumb {

						@extend .absolute;
						width: 274px;
						height: 140px;
						
						figure.outline {

							@extend .absolute;
							width: inherit;
							height: inherit;

							svg * { fill: #fff; }
						}

						figure.thumb {

							@extend .absolute;
							top: 8px;
							left: 12px;
							overflow: hidden;
							
							div.thumb-overlay {

								@extend .absolute;
								width: inherit;
								height: inherit;
								background: rgba(11,11,12,0.6);
								z-index: 10;
								visibility: hidden;

								a {

									@include roboto-condensed;
									font-size: 15px;
									color: #fff;
									text-transform: uppercase;
									text-align: center;
									vertical-align: middle;

									background: rgba(199, 25, 31, .8);
								}
							}

							img {

								@extend .absolute;

								&.static-thumb {
									z-index: 1;
								}

								&.animated-thumb {
									z-index: 2;
									width: 203px;
									height: 203px;
								}
							}

						} // .thumb

						// specific tweaks for download type

						&.gif-type {

							width: 224px;
							height: 218px;
							
							figure.thumb {
								width: 200px;
								height: 200px;

								div.thumb-overlay {
									background: rgba(0,0,0,0);
								}								
							}
						}

						&.wallpapers-type {

							width: 215px;
							height: 140px;
							
							figure.thumb {
								width: 191px;
								height: 122px;
							}
						}

						&.social-type {

							width: 215px;
							height: 140px;
							
							figure.thumb {
								width: 191px;
								height: 122px;
							}
						}

						&.icons-type {

							width: 144px;
							height: 140px;
							
							figure.thumb {
								width: 122px;
								height: 122px;
							}

						}

						// specific tweaks for split types

						&.split-1 {

							.thumb-overlay .download-over {
								position: relative;
								width: 100%;
								height: 25%;
								float: left;
								top: 75%;
							}
						}

						&.split-2 {

							.thumb-overlay .download-over {
								position: relative;
								width: 100%;
								height: 25%;
								float: left;
								top: 50%;
							}
						}

						&.split-3 {

							.thumb-overlay .split-1, .thumb-overlay .split-2 {
								position: relative;
								width: 50%;
								height: 50%;
								float: left;
							}

							.thumb-overlay .split-3 {
								position: relative;
								width: 100%;
								height: 50%;
								float: left;
							}
						}

						&.split-4 {

							.thumb-overlay .download-over {
								position: relative;
								width: 50%;
								height: 25%;
								float: left;
								top: 50%;
							}						
						}

					} // .download-thumb

				} // .thumb-block-container

			} // #download-thumbs-container

			div#pagination-buttons {

				@extend .absolute;
				
				top: 610px;
				left: -49px;
				width: 101px;
				height: 45px;
				opacity: 0;

				cursor: pointer;

				svg * { fill: #fff; }
				svg { overflow: visible !important; }

				.button-outlines { 

					@extend .absolute;
					width: inherit;
					height: inherit;
				}
				
				.left-arrow, .right-arrow {
					
					@extend .absolute;

					width: 50px;
					height: 45px;

					figure.arrow {

						@extend .absolute;
						z-index: 2;

						svg {

							@extend .absolute;

							top: 15px;
							left: 19px;
							width: 14px;
							height: 17px;							
						}
					}

					figure.circle {

						@extend .absolute;
						left: 3px;
						z-index: 1;
						
						svg {

							@extend .absolute;
							
							width: 46px;
							height: 46px;
							opacity: 0;

							circle { fill: #fff; }
						}
					}
				}

				.left-arrow { }

				.right-arrow { 
					
					left: 50px;

					figure.circle {
						left: 2px;
					}
				}
			} // #pagination-buttons

		} // .centered

		img.bg {

			@extend .absolute;
			z-index: -1;
		}

	} // > div
}