#header-logo, #header-right
{
	position: absolute;
}

#container
{
	height: 100%;
	min-height: 640px;
}

	#page-each1
	{
		position: relative;
		overflow: hidden;
		height: 100%;
		min-height: 640px;
		
	}
		#page-each1-bg
		{
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background-position: center;
			background-size: cover;
			will-change: transform;
		}

		.page-category-top
		{
			position: absolute;
			left: 50%;
			top: 50%;
			width: 1000px;
			height: 225px;
			margin-left: -500px;
			margin-top: -200px;
		}
			.page-category-top-title
			{
				margin-top: 45px;

				font-weight: 800;
				font-size: 90px;
				text-align: center;
				line-height: 100%;
				letter-spacing: 1px;
			}

			#page-explore
			{
				bottom: 80px;
			}

	#page-each2
	{
		overflow: visible;
	}

		#page-each2 .page-each-inside
		{
			overflow: visible;
		}

			.page-category-graph
			{
				margin-left: 11%;
			}

			.page-category-title
			{
				margin: 35px 16% 0px;
				font-weight: 800;
				font-size: 70px;
				line-height: 100%;
				color: #392779;
			}

			.page-category-text
			{
				margin: 74px 20% 250px 35%;
				
				font-weight: 200;
				font-size: 16px;
				line-height: 150%;
				letter-spacing: .2px;
				color: #222;
			}

	#page-each3
	{
		height: 880px;
		overflow: visible;
	}

		#page-each3 .page-each-inside
		{
			max-width: 1600px;
			overflow: visible;
		}

			.page-each3-bg
			{
				height: 880px;
			}

			.page-category-graph2
			{
				position: absolute;
				right: 0px;
				top: -212px;
			}

			.page-each3-right-middle
			{
				position: absolute;
				left: 50%;
				top: 45%;
				width: 332px;
				height: 340px;
				margin-left: 320px;
				margin-top: -170px;
			}

				.page-each3-right-middle-text
				{
					font-weight: 800;
					font-size: 40px;
					line-height: 100%;
				}

				.page-each3-right-middle-author
				{
					margin-top: 48px;

					font-weight: 600;
					font-size: 15px;
					letter-spacing: .2px;
				}

			.page-each3-right-bottom
			{
				position: absolute;
				padding: 10px;
				left: 50%;
				margin-left: 310px;
				bottom: 33px;
				cursor: pointer;
			}

				.page-each3-right-bottom .page-arrow
				{
					float: left;
				}

				.page-each3-right-bottom-text
				{
					float: left;
					margin-left: 13px;
					margin-top: 19px;

					font-size: 12px;
					letter-spacing: .3px;
					text-transform: uppercase;

					-webkit-transition: color .3s;
					-moz-transition: color .3s;
					transition: color .3s;
				}

	#page-each4
	{
		text-align: center;

		-webkit-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
		-moz-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
		box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
	}

		#page-each4 .page-each-inside
		{
			color: #392779;
		}

			#page-each4-header
			{
				margin-top: 90px;
				
				font-weight: 600;
				font-size: 13px;
				letter-spacing: .2px;
				text-transform: uppercase;
			}

			#page-each4-title
			{
				margin-top: 15px;
				margin-bottom: 92px;

				font-weight: 200;
				font-size: 50px;
				letter-spacing: 2px;
			}

		#page-each4-container
		{

		}

			.page-each4-each
			{
				position: relative;
				height: 570px;
			}

				.page-each4-each-img, .page-each4-each-info
				{
					float: left;
					width: 50%;
					height: 100%;
					overflow: hidden;
				}

				#page-each4-container a:nth-child(even) .page-each4-each-img,
				#page-each4-container a:nth-child(even) .page-each4-each-info
				{
					float: right;
				}

				.page-each4-each-info
				{
					padding-top: 100px;
				}

					.page-each4-each-info-header
					{
						margin-top: 100px;

						font-weight: 800;
						font-size: 17px;
						letter-spacing: .2px;

						-webkit-transition: margin-top .4s;
						-moz-transition: margin-top .4s;
						transition: margin-top .4s;
					}

					

					.page-each4-each-info-title
					{
						margin-top: 15px;

						font-weight: 800;
						font-size: 50px;
						letter-spacing: 1px;
						line-height: 100%;
					}

					.page-each4-each-info-bottom
					{
						margin-top: 105px;
						opacity: 0;

						line-height: 150%;

						-webkit-transition: opacity .4s, margin-top .4s;
						-moz-transition: opacity .4s, margin-top .4s;
						transition: opacity .4s, margin-top .4s;
					}

						.page-each4-each-info-bottom span
						{
							font-weight: 800;
						}


				.page-each4-each-img
				{

				}

					.page-each4-each-img-inside, .page-each4-each-img-inside-inside
					{
						height: 100%;
						background-size: cover;
						background-position: center;
					}

					.page-each4-each-img-inside
					{
						-webkit-transition: -webkit-transform .5s;
						-moz-transition: -webkit-transform .5s;
						transition: -webkit-transform .5s;
					}

						.page-each4-each-img-inside-inside
						{
							opacity: 0;

							-webkit-transition: opacity .5s;
							-moz-transition: opacity .5s;
							transition: opacity .5s;
						}

						


				.page-each4-each-middle
				{
					position: absolute;
					left: 50%;
					top: 50%;
					width: 50px;
					height: 50px;
					margin-left: -25px;
					margin-top: -25px;
					background-color: #fff;

					-webkit-transform: rotate(-45deg);
					-moz-transform: rotate(-45deg);
					transform: rotate(-45deg);

					-webkit-transition: .3s;
					-moz-transition: .3s;
					transition: .3s;
				}

				

					.page-each4-each-middle-line
					{
						position: absolute;
						left: 23px;
						top: 6px;
						width: 4px;
						height: 38px;
						background-color: #fff;
						opacity: 0;

						-webkit-transform: rotate(-45deg);
						-moz-transform: rotate(-45deg);
						transform: rotate(-45deg);

						-webkit-transition: left .3s, top .3s, -webkit-transform .1s .3s, opacity .1s;
						-moz-transition: left .3s, top .3s, transform .1s .3s, opacity .1s;
						transition: left .3s, top .3s, transform .1s .3s, opacity .1s;
					}
					
					.page-each4-each-middle-line:nth-child(2)
					{
						-webkit-transform: rotate(45deg);
						-moz-transform: rotate(45deg);
						transform: rotate(45deg);
					}

	#page-each5
	{

	}

		.page-each5-title
		{
			margin-top: 75px;
			margin-bottom: 60px;

			font-weight: 600;
			font-size: 15px;
			text-align: center;
			color: #392779;
		}

		.page-each5-each
		{
			float: left;
			width: 33.33333%;
			height: 485px;
			text-align: center;
		}

		#page-each5-each1 { color: #ff6969; }
		#page-each5-each2 { color: #392779; }
		#page-each5-each3 { color: #eab537; }
		#page-each5-each4 { color: #00a276; }

			.page-each5-each-image
			{
				position: relative;
				margin: 0 auto;
				width: 306px;
				height: 306px;
				overflow: hidden;

				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
			}

			#page-each5-each1 .page-each5-each-image, #page-each5-each1 .page-each5-each-image-circle { background-color: #ff6969; }
			#page-each5-each2 .page-each5-each-image, #page-each5-each2 .page-each5-each-image-circle { background-color: #392779; }
			#page-each5-each3 .page-each5-each-image, #page-each5-each3 .page-each5-each-image-circle { background-color: #eab537; }
			#page-each5-each4 .page-each5-each-image, #page-each5-each4 .page-each5-each-image-circle { background-color: #00a276; }

				.page-each5-each-image-inside
				{
					margin-top: -7px;
					margin-left: -7px;
					width: 320px;
					height: 320px;
					background-position: center;
					background-size: cover;

					-webkit-transform: scale(.95);
					-moz-transform: scale(.95);
					transform: scale(.95);

					-webkit-transition: -webkit-transform 1s;
					-moz-transition: -moz-transform 1s;
					transition: transform 1s;
				}

				.page-each5-each:hover .page-each5-each-image-inside
				{
					-webkit-transform: scale(1);
					-moz-transform: scale(1);
					transform: scale(1);
				}

				#page-each5-each1 .page-each5-each-image-inside { background-image: url('/img/page-category-bottom1.jpg'); }
				#page-each5-each2 .page-each5-each-image-inside { background-image: url('/img/page-category-bottom2.jpg'); }
				#page-each5-each3 .page-each5-each-image-inside { background-image: url('/img/page-category-bottom3.jpg'); }
				#page-each5-each4 .page-each5-each-image-inside { background-image: url('/img/page-category-bottom4.jpg'); }

				.page-each5-each-image-hover
				{
					position: absolute;
					left: -7px;
					top: -7px;
				}

				.page-each5-each-image-circle
				{
					position: absolute;
					left: 50%;
					top: 115%;
					width: 90px;
					height: 90px;
					margin-left: -45px;
					margin-top: -45px;

					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;

					-webkit-transition: top .3s;
					-moz-transition: top .3s; 
					transition: top .3s;
				}

				.page-each5-each:hover .page-each5-each-image-circle
				{
					top: 50%;

					-webkit-transition: top 500ms cubic-bezier(0.175, 0.885, 0.320, 1);
					-webkit-transition: top 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
					-moz-transition: top 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
					transition: top 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
				}

					.page-each5-each-image-circle-each
					{
						position: absolute;
						left: 26px;
						top: 43px;
						width: 38px;
						height: 4px;
						background-color: #fff;
					}

						.page-each5-each-image-circle-each:nth-child(2)
						{
							-webkit-transform: rotate(90deg);
							-moz-transform: rotate(90deg);
							transform: rotate(90deg);
						}

			.page-each5-each-title
			{
				margin-top: 20px;

				font-weight: 800;
				font-size: 30px;
				line-height: 100%;
			}

			.page-each5-each-subtitle
			{
				margin-top: 22px;

				font-weight: 600;
				font-size: 15px;
			}


@media screen and (max-width: 1650px)
{
	#page-each3
	{
		height: 660px;
	}

		.page-each3-bg
		{
			background-repeat: no-repeat;
			background-size: auto 100%;
			height: 660px;
		}

		.page-each3-right-middle
		{
			margin-top: -130px;
		}

			.page-each3-right-middle-text
			{
				font-size: 35px;
			}
}

@media screen and (max-width: 1400px)
{
	#page-each5 .page-each-inside
	{
		max-width: 1100px;	
	}

	.page-each3-right-middle
	{
		margin-left: 260px;
	}

	.page-each3-right-bottom
	{
		margin-left: 250px;
	}
	
}

@media screen and (max-width: 1200px)
{
	.page-category-top-title
	{
		font-size: 75px;
	}

	.page-category-text
	{
		margin-bottom: 130px;
	}

	.page-category-graph2
	{
		display: none;
	}

	#page-each3
	{
		height: 500px;
	}

		.page-each3-bg
		{
			height: 500px;
		}

		.page-each3-right-middle
		{
			margin-left: 167px;
			margin-top: -180px;
			width: 310px;
		}

			.page-each3-right-middle-text
			{
				font-size: 32px;
			}

			.page-each3-right-middle-author
			{
				margin-top: 38px;
			}

		.page-each3-right-bottom
		{
			margin-left: 157px;
		}


	#page-each5 .page-each-inside
	{
		padding: 0px 40px;
	}

		.page-each5-each
		{
			height: 400px;
		}

			.page-each5-each-image
			{
				width: 250px;
				height: 250px;
			}

				.page-each5-each-image-inside
				{
					width: 265px;
					height: 265px;
				}

				.page-each5-each-image-hover 
				{
					position: absolute;
					left: -6px;
					top: -6px;
					width: 262px;
					height: 262px;
				}

		.page-each5-each-title
		{
			font-size: 27px;
		}
}

@media screen and (min-width: 1025px)
{
	#page-each1 .page-arrow:hover, #page-each1 .page-arrow:hover .page-arrow-bg,
	.page-each3-right-bottom:hover .page-arrow, .page-each3-right-bottom:hover .page-arrow-bg
	{
		background-color: #ffdb77; 
	}

	.page-each3-right-bottom:hover .page-each3-right-bottom-text
	{
		color: #ffdb77; 
	}

	.page-each4-each:hover .page-each4-each-info-header
	{
		margin-top: 50px;
	}

	.page-each4-each:hover .page-each4-each-info-bottom
	{
		margin-top: 125px;
		opacity: 1;
	}

	.page-each4-each:hover .page-each4-each-img-inside
	{
		opacity: 1;

		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		transform: scale(1.05);
	}

		.page-each4-each:hover .page-each4-each-img-inside-inside
		{
			opacity: 1;
		}

	.page-each4-each:hover .page-each4-each-middle
	{
		width: 80px;
		height: 80px;
		margin-left: -40px;
		margin-top: -40px;
	}

		.page-each4-each:hover .page-each4-each-middle-line
		{
			opacity: 1;
			left: 38px;
			top: 21px;

			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);

			-webkit-transition: left .3s, top .3s, -webkit-transform .3s, opacity .25s .05s;
			-moz-transition: left .3s, top .3s, -moz-transform .3s, opacity .25s .05s;
			transition: left .3s, top .3s, transform .3s, opacity .25s .05s;
		}

		.page-each4-each:hover .page-each4-each-middle-line:nth-child(2)
		{
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
}

@media screen and (max-width: 1024px)
{
	.page-category-top
	{
		margin-top: -170px;
	}

		.page-category-graph
		{
			margin-left: 8%;
		}


	.page-category-title, .page-category-text
	{
		margin-left: 15%;
		margin-right: 15%;
	}

	.page-category-title
	{
		font-size: 58px;
	}

	.page-category-text
	{
		margin-top: 64px;
		margin-bottom: 120px;
	}


	#page-each3
	{
		height: auto;
		overflow: hidden;
	}

		.page-each3-bg
		{
			width: 100% !important;
			margin-left: auto !important;
			margin-right: auto;
			background-position: center;
		}

		.page-each3-right-middle
		{
			position: relative;
			left: auto;
			top: auto;
			width: auto;
			height: auto;
			margin: 16px;
			margin-top: 0px;
			padding: 40px 30px;
			background-color: #fff;
			overflow: hidden;

			color: #392779;
		}

			.page-each3-right-middle-text
			{
				font-size: 22px;
				text-align: center;
				line-height: 120%;
			}

			.page-each3-right-middle-author
			{
				margin-bottom: 10px;
				text-align: center;
			}


		.page-each3-right-bottom
		{
			display: none;
		}


	#page-each4-title
	{
		font-size: 45px;
		letter-spacing: 1px;
	}

	.page-each4-each
	{
		height: 400px;
	}

		.page-each4-each-middle
		{
			margin-top: -20px;
			margin-left: -20px;
			width: 40px;
			height: 40px;
		}

		.page-each4-each-info
		{
			padding-top: 18px;
		}

			.page-each4-each-info-header
			{
				margin-top: 115px;
			}

			.page-each4-each-info-title
			{
				font-size: 35px;
			}


	#page-each5 .page-each-inside
	{
		padding: 0px 25px;
	}

		.page-each5-each
		{
			height: 340px;
		}

			.page-each5-each-image
			{
				width: 190px;
				height: 190px;
			}

				.page-each5-each-image-inside
				{
					margin-left: 0px;
					margin-top: 0px;
					width: 190px;
					height: 190px;

					-webkit-transition: none;
					-moz-transition: none;
					transition: none;

					-webkit-transform: scale(1);
					-moz-transform: scale(1);
					transform: scale(1);
				}

			.page-each5-each-title
			{
				font-size: 25px;
			}

			.page-each5-each-image-hover, .page-each5-each-image-circle
			{
				display: none;
			}
}

@media screen and (max-width: 768px)
{

	#header-menu-button:after
	{
		display: none;
	}
	
	#page-each1 
	{
		min-height: auto;
		height: 512px;
	}

		.page-category-top
		{
			height: 133px;
			margin-top: -110px;
		}

			.page-category-top-title
			{
				font-size: 40px;
			}

	#page-explore
	{
		bottom: 120px;
	}

		#page-explore-circle
		{
			width: 28px;
			height: 28px;
		}

			#page-explore .page-arrow-line
			{
				background-color: #fff !important;
			}

	.page-category-graph
	{
		width: 150px !important;
		height: 175px !important;
		margin-top: -88px !important;

		margin-left: -webkit-calc(50% - 75px) !important;
		margin-left: -moz-calc(50% - 75px) !important;
		margin-left: calc(50% - 75px) !important;
	}
	

	.page-category-title
	{
		margin-top: 25px;
		font-size: 30px;
	}

	.page-category-text
	{
		margin-top: 44px;
    	margin-bottom: 80px;

		font-size: 14px;
		letter-spacing: .2px;
	}

	.page-each3-bg
	{
		height: 326px;
	}

	#page-each4
	{
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

		#page-each4-header
		{
			margin-top: 53px;
		}

		#page-each4-title
		{
			margin-bottom: 42px;
			font-size: 22px;
			letter-spacing: .5px;
		}

		#page-each4-container
		{
			padding: 0px 16px 24px;
		}

			.page-each4-each
			{
				overflow: hidden;
				height: auto;
				margin-bottom: 16px;
			}

			.page-each4-each, .page-each4-each-middle-line
			{
				color: #fff !important;
			}

				.page-each4-each-middle
				{
					background-color: #fff !important;
				}

				.page-each4-each-img, .page-each4-each-info
				{
					width: 100%;
				}

				.page-each4-each-img
				{
					height: 160px;
				}

				.page-each4-each-info
				{
					padding-top: 0px;
					height: 150px;
				}

					.page-each4-each-info-header
					{
						margin-top: 30px;

						font-weight: 400;
						font-size: 15px;
					}

					.page-each4-each-info-title
					{
						margin-top: 9px;

						font-size: 30px;
					}


				.page-each4-each-middle
				{
					width: 28px;
	    			height: 28px;
	    			margin-top: -9px;
	    			margin-left: -14px;
				}

					.page-each4-each-middle-line
					{
						left: 14px;
						top: 9px;
						width: 2px;
						height: 10px;
						opacity: 1;
					}



	#page-each5
	{
		background-color: #f6f6f6;
	}

		.page-each5-title
		{
			margin: 36px auto 50px;
			width: 200px;
		}

		.page-each5-each
		{
			width: 100%;
			height: 240px;
		}

			.page-each5-each-image
			{
				width: 88px;
				height: 88px;
			}

				.page-each5-each-image-inside
				{
					width: 88px;
					height: 88px;
				}
			
			.page-each5-each-subtitle
			{
				margin-top: 15px;
			}

			.page-each5-each-subtitle
			{
				margin-top: 14px;

				font-weight: 400;
				font-size: 15px;
			}

	#page-back-to-top.page-arrow
	{
		background-color: transparent;
	}

	body[data-cat="1"] #page-back-to-top.page-arrow { border-color: #ff6969; }
	body[data-cat="2"] #page-back-to-top.page-arrow { border-color: #453483; }
	body[data-cat="3"] #page-back-to-top.page-arrow { border-color: #eebe4c; }
	body[data-cat="4"] #page-back-to-top.page-arrow { border-color: #0cb889; }

		body[data-cat="1"] #page-back-to-top .page-arrow-line { background-color: #ff6969; }
		body[data-cat="2"] #page-back-to-top .page-arrow-line { background-color: #453483; }
		body[data-cat="3"] #page-back-to-top .page-arrow-line { background-color: #eebe4c; }
		body[data-cat="4"] #page-back-to-top .page-arrow-line { background-color: #0cb889; }
}

@media screen and (max-width: 450px)
{
	.page-category-top
	{
		margin-top: -100px;
	}
		
		.page-category-top-title
		{
			font-size: 30px;
		}
}