@import "library.less";

#fsvs-pagination {
	.pagination-link {
		> span {
			border: none!important;
		}
	}
}

.page-index {
	height: 100%;
	color: #ffffff;
	
	.container {
		position: absolute;
		display: block;
		width: 1200px;
		height: 600px;
		left: 50%;
		top: 50%;
		margin-left: -600px;
		margin-top: -300px;
		color: #ffffff;
		text-decoration: none;
	}

	.frames {
		height: 100%;
	
		.frame {
			position: relative;
			height: 100%;
			width: 100%;
			overflow: hidden;
			.cover;
			
			.copyright {
				position: absolute;
				z-index: 4;
				bottom: 10px;
				right: 10px;
				font-size: 10px;
				color: #ffffff;
				opacity: 0.5;
				font-family: 'trivia-grotesk';
				.transition(@duration: 200ms);
			}
		}
	}
	
	.circle {
		position: absolute;
		z-index: 0;
		width: 200px;
		height: 200px;
		background-size: contain;
		
		&.circle-one {
			background-image: url(../images/index/o1.png);
		}
		
		&.circle-two {
			background-image: url(../images/index/o2.png);
		}
	}
	
	#intro {
		background-image: url(../images/index/bg-13.jpg);
		
		.title, .description, .pack {
			z-index: 2;
		}
		
		.title {
			position:  absolute;
			background-image: url(../images/index/title-1.png);
			width: 1001px;
			height: 514px;
			left: 0px;
			top: 0px;
		}
		
		.description {
			position:  absolute;
			z-index: 1;
			width: 460px;
			height: 200px;
			left: 200px;
			top: 360px;
			
			p {
				font-family: 'trivia-grotesk';
				font-size: 16px;
				line-height: 22px;
			}
		}
		
		.pack {
			position:  absolute;
			background-image: url(../images/index/pack-1.png);
			width: 145px;
			height: 240px;
			left: 0px;
			top: 360px;
			
			.logo {
				position: absolute;
				opacity: 0;
				left: 37px;
				top: 20px;
				width: 75px;
				height: 65px;
			}
		}
		
		.arrow {
			position:  absolute;
			background-image: url(../images/index/arrow-d.png);
			width: 47px;
			height: 47px;
			left: 50%;
			margin-left: -23px;
			bottom: 25px;
			cursor: pointer;
			
			&:after {
				content: '';
				position: absolute;
				z-index: 0;
				width: 210px;
				height: 210px;
				background-image: url(../images/index/circle-1.png);
				left: 50%;
				top: 50%;
				margin-left: -105px;
				margin-top: -170px;
			}
		}
		
		.face {
			position: absolute;
			z-index: 3;
			width: 319px;
			height: 343px;
			background-image: url(../images/index/face-2.png);
			right: -120px;
			bottom: -60px;
		}
	}
	
	#generator {
		background-image: url(../images/index/bg-12.jpg);
		
		.face {
			position:  absolute;
			width: 220px;
			height: 235px;
			background-image: url(../images/index/face-1.png);
			right: 40px;
			bottom: 0px;
		}
		
		.phrase {
			position:  absolute;;
			width: 436px;
			height: 182px;
			background-image: url(../images/index/frame-1.png);
			right: 150px;
			top: 200px;
		
			p {
				font-family: 'garamond-premier-pro-caption';
				font-size: 32px;
				line-height: 34px;
				padding: 50px 40px;
			}
		}
		
		.title {
			position:  absolute;
			font-size: 90px;
			line-height: 100px;
			width: 900px;
			height: 103px;
			left: 0px;
			top: 0px;
			font-family: flounder, Arial;
		}
		
		.subtitle {
			position:  absolute;
			width: 450px;
			left: 0px;
			top: 230px;
			font-family: 'trivia-grotesk';
			font-size: 16px;
			line-height: 22px;
		}
		
		.big-button {
			position: absolute;
			bottom: 30px;
			left: 0px
		}
	}
	
	#routes {
	}
	
	#contest {
		background-image: url(../images/index/bg-3.jpg);
		
		.title {
			font-family: flounder, Arial;
			font-size: 64px;
			line-height: 77px;
			text-align: center;
			color: #ffffff;
		}
		
		.subtitle {
			font-family: 'trivia-grotesk';
			font-size: 17px;
			line-height: 21px;
			text-align: center;
			color: #ffffff;
			margin-top: 10px;
		}
		
		.place-cards-container {
			width: 960px;
			margin: 40px auto;
		
			.place-card {
				display: block;
				float: left;
				margin-right: 30px;
				color: inherit;
				text-decoration: none;
				
				&:nth-child(3n) {
					margin-right: 0px;
				}
				
				&:hover {
					.content p {
						text-decoration: underline;
					}
				}
			}
		}
		
		.big-button {
			margin: 0 auto;
			width: 380px;
		}
		.centered {
			margin: 0 auto;
			width: 380px;
			
			.big-button {
				float: left;
				line-height: 70px;
				font-size: 32px;
				height: 70px;
			}
			.big-button:nth-child(1) {
				margin-right: 40px;
				font-size: 26px;
			}
		}
		
	}
}