html,
body {
	min-height: 100vh;
	overflow-x: hidden;
}

.js .container-PageRevealEffects {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.js .pages {
	position: relative;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	/*by my*/
	width: 86%;
	float:right;
}

.page {
	/*padding: 4.50em 3.5em 3.5em 3.5em;*/
	background: #ffffff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 0;	
}

.js .page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	z-index: 1;
}

.js .page--current {
	visibility: visible;
	position: relative;
	overflow-y: scroll;/*by my*/
}


/* Navigation */

.pagenav {
	position: absolute;
	pointer-events: none;
	top: 2em;
	left: 2em;
	right: 2em;
	bottom: 2em;
	z-index: 1000;
}

.no-js .pagenav {
	display: none;
}

.pagenav__button {
	position: absolute;
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	width: 2em;
	height: 2em;
	cursor: pointer;
	pointer-events: auto;
}

.pagenav__button:focus {
	outline: none;
}

.pagenav__button--top,
.pagenav__button--bottom {
	left: 50%;
	margin: 0 0 0 -1em;
}

.pagenav__button--bottom,
.pagenav__button--cornerbottomleft {
	bottom: 0;
}

.pagenav__button--left,
.pagenav__button--right {
	top: 50%;
	margin: -1em 0 0 0;
}

.pagenav__button--right,
.pagenav__button--cornertopright,
.pagenav__button--cornerbottomright {
	right: 0;
}

.pagenav__button--cornerbottomright {
	bottom: 0;
}

.icon {
	width: 100%;
	height: 100%;
	fill: rgba(0, 0, 0, 0.55);
/*	stroke: #303840;*/
}

.pagenav__button:hover .icon {
	/*stroke: #000;*/
}

.icon--rtop {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.icon--rbottom {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.icon--rright {
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.icon--rtopleft {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.icon--rtopright {
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.icon--rbottomleft {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.icon--rbottomright {
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}


/* Page content */

.quote {
	font-size: 5.5vh;
	line-height: 1.25;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	margin: 0 auto;
	max-width: 800px;
	padding: 1em;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.quote p {
	font-family: 'Merriweather', serif;
	margin: 0 0 0.5em;
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
}

.quote p::before {
	content: '\201C';
}

.quote p::after {
	content: '\201D';
}

.quote footer {
	font-size: 0.5em;
}

.quote footer::before {
	content: '\2014';
}


/* Revealers */

.revealer {
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 1000;
	pointer-events: none;
}

.revealer--cornertopleft,
.revealer--cornertopright,
.revealer--cornerbottomleft,
.revealer--cornerbottomright {
	top: 50%;
	left: 50%;
}

.revealer--top,
.revealer--bottom {
	left: 0;
}

.revealer--right,
.revealer--left {
	top: 50%;
	left: 50%;
}

.revealer--top {
	bottom: 100%;
}

.revealer--bottom {
	top: 100%;
}

.revealer__layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #ddd;
}

/* Revealer effects */


/* One layer effect (effect-1) */

.anim--effect-1 .page:first-child {
	background: #0e3c5b;
}

.anim--effect-1 .page:nth-child(2) {
	background: #FF6EAE;
}

.anim--effect-1 .revealer--animate .revealer__layer {
	-webkit-animation: anim-effect-1 1.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
	animation: anim-effect-1 1.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

@-webkit-keyframes anim-effect-1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	35%,
	65% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@keyframes anim-effect-1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	35%,
	65% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}


/* Two layer effect (effect-2) */

.anim--effect-2 .page:first-child {
	background: #9cdab1;
}

.anim--effect-2 .page:nth-child(2) {
	background: #F9C969;
}

.anim--effect-2 .revealer--animate .revealer__layer {
	-webkit-animation: anim-effect-2-1 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
	animation: anim-effect-2-1 1.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.anim--effect-2 .revealer--animate .revealer__layer:nth-child(2) {
	-webkit-animation-name: anim-effect-2-2;
	animation-name: anim-effect-2-2;
}

@-webkit-keyframes anim-effect-2-1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	30%,
	70% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
		animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@keyframes anim-effect-2-1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	30%,
	70% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
		animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@-webkit-keyframes anim-effect-2-2 {
	0%,
	14.5% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	37.5%,
	62.5% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
		animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	}
	85.5%,
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@keyframes anim-effect-2-2 {
	0%,
	14.5% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	37.5%,
	62.5% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
		animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	}
	85.5%,
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}


/* Three layer effect (effect-3) */

.anim--effect-3 .page:nth-child(2) {
	background: #ffffff;
}

.anim--effect-3 .revealer--animate .revealer__layer {
	-webkit-animation: anim-effect-3-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
	animation: anim-effect-3-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
}

.anim--effect-3 .revealer--animate .revealer__layer:nth-child(2) {
	-webkit-animation-name: anim-effect-3-2;
	animation-name: anim-effect-3-2;
}

.anim--effect-3 .revealer--animate .revealer__layer:nth-child(3) {
	-webkit-animation-name: anim-effect-3-3;
	animation-name: anim-effect-3-3;
}

@-webkit-keyframes anim-effect-3-1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	25%,
	75% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@keyframes anim-effect-3-1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	25%,
	75% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@-webkit-keyframes anim-effect-3-2 {
	0%,
	12.5% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	37.5%,
	62.5% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	87.5%,
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@keyframes anim-effect-3-2 {
	0%,
	12.5% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	37.5%,
	62.5% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	87.5%,
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@-webkit-keyframes anim-effect-3-3 {
	0%,
	25% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}
	75%,
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@keyframes anim-effect-3-3 {
	0%,
	25% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}
	75%,
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}


/* Forth effect */

.anim--effect-4 .page:first-child {
	background: #28282D;
}

.anim--effect-4 .page:nth-child(2) {
	background: #F15C5C;
}

.anim--effect-4 .page--animate-top .quote {
	-webkit-animation: moveQuoteTop 1.5s forwards;
	animation: moveQuoteTop 1.5s forwards;
}

@-webkit-keyframes moveQuoteTop {
	0%,
	65% {
		-webkit-transform: translate3d(0, -75px, 0);
		transform: translate3d(0, -75px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes moveQuoteTop {
	0%,
	65% {
		-webkit-transform: translate3d(0, -75px, 0);
		transform: translate3d(0, -75px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.anim--effect-4 .page--animate-bottom .quote {
	-webkit-animation: moveQuoteBottom 1.5s forwards;
	animation: moveQuoteBottom 1.5s forwards;
}

@-webkit-keyframes moveQuoteBottom {
	0%,
	65% {
		-webkit-transform: translate3d(0, 75px, 0);
		transform: translate3d(0, 75px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes moveQuoteBottom {
	0%,
	65% {
		-webkit-transform: translate3d(0, 75px, 0);
		transform: translate3d(0, 75px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.anim--effect-4 .page--animate-left .quote {
	-webkit-animation: moveQuoteLeft 1.5s forwards;
	animation: moveQuoteLeft 1.5s forwards;
}

@-webkit-keyframes moveQuoteLeft {
	0%,
	65% {
		-webkit-transform: translate3d(-75px, 0, 0);
		transform: translate3d(-75px, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes moveQuoteLeft {
	0%,
	65% {
		-webkit-transform: translate3d(-75px, 0, 0);
		transform: translate3d(-75px, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.anim--effect-4 .page--animate-right .quote {
	-webkit-animation: moveQuoteRight 1.5s forwards;
	animation: moveQuoteRight 1.5s forwards;
}

@-webkit-keyframes moveQuoteRight {
	0%,
	65% {
		-webkit-transform: translate3d(75px, 0, 0);
		transform: translate3d(75px, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes moveQuoteRight {
	0%,
	65% {
		-webkit-transform: translate3d(75px, 0, 0);
		transform: translate3d(75px, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.anim--effect-4 .page--animate-cornertopright .quote {
	-webkit-animation: moveQuoteCornerTopRight 1.5s forwards;
	animation: moveQuoteCornerTopRight 1.5s forwards;
}

@-webkit-keyframes moveQuoteCornerTopRight {
	0%,
	65% {
		-webkit-transform: translate3d(50px, -50px, 0);
		transform: translate3d(50px, -50px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes moveQuoteCornerTopRight {
	0%,
	65% {
		-webkit-transform: translate3d(50px, -50px, 0);
		transform: translate3d(50px, -50px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.anim--effect-4 .page--animate-cornertopleft .quote {
	-webkit-animation: moveQuoteCornerTopLeft 1.5s forwards;
	animation: moveQuoteCornerTopLeft 1.5s forwards;
}

@-webkit-keyframes moveQuoteCornerTopLeft {
	0%,
	65% {
		-webkit-transform: translate3d(-50px, -50px, 0);
		transform: translate3d(-50px, -50px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes moveQuoteCornerTopLeft {
	0%,
	65% {
		-webkit-transform: translate3d(-50px, -50px, 0);
		transform: translate3d(-50px, -50px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.anim--effect-4 .page--animate-cornerbottomright .quote {
	-webkit-animation: moveQuoteCornerBottomRight 1.5s forwards;
	animation: moveQuoteCornerBottomRight 1.5s forwards;
}

@-webkit-keyframes moveQuoteCornerBottomRight {
	0%,
	65% {
		-webkit-transform: translate3d(50px, 50px, 0);
		transform: translate3d(50px, 50px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes moveQuoteCornerBottomRight {
	0%,
	65% {
		-webkit-transform: translate3d(50px, 50px, 0);
		transform: translate3d(50px, 50px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.anim--effect-4 .page--animate-cornerbottomleft .quote {
	-webkit-animation: moveQuoteCornerBottomLeft 1.5s forwards;
	animation: moveQuoteCornerBottomLeft 1.5s forwards;
}

@-webkit-keyframes moveQuoteCornerBottomLeft {
	0%,
	65% {
		-webkit-transform: translate3d(-50px, 50px, 0);
		transform: translate3d(-50px, 50px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes moveQuoteCornerBottomLeft {
	0%,
	65% {
		-webkit-transform: translate3d(-50px, 50px, 0);
		transform: translate3d(-50px, 50px, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.anim--effect-4 .revealer--animate .revealer__layer {
	-webkit-animation: anim-effect-4-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
	animation: anim-effect-4-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
}

.anim--effect-4 .revealer--animate .revealer__layer:nth-child(2) {
	-webkit-animation-name: anim-effect-4-2;
	animation-name: anim-effect-4-2;
	-webkit-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
	animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
}

.anim--effect-4 .revealer--animate .revealer__layer:nth-child(3) {
	-webkit-animation-name: anim-effect-4-3;
	animation-name: anim-effect-4-3;
	-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
	animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060)
}

@-webkit-keyframes anim-effect-4-1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	35%,
	65% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@keyframes anim-effect-4-1 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	35%,
	65% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@-webkit-keyframes anim-effect-4-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	45%,
	55% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
		animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@keyframes anim-effect-4-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	45%,
	55% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
		animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@-webkit-keyframes anim-effect-4-3 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	45%,
	55% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
		animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}

@keyframes anim-effect-4-3 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	45%,
	55% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
		animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
	}
	100% {
		-webkit-transform: translate3d(0, -200%, 0);
		transform: translate3d(0, -200%, 0);
	}
}


/* Media queries */

@media screen and (max-width: 50em) {
	.quote {
		font-size: 5vw;
		text-align: center;
		padding: 0.5em;
	}
}

/*by my*/
.pagenav__button--left,
.pagenav__button--right,
.pagenav__button--gallery{
	top: 33px;
	margin: -1em 0 0 0;
}

.pagenav__button--right{
	right: 0;
}
.pagenav__button--left{
	right: 40px;	
}
.pagenav__button--gallery{
	z-index: 1;
	right: 80px;
	width: auto;
	color: rgba(0, 0, 0, 0.55);
	padding-left: 10px;
	padding-right: 10px;
	background: rgba(255,255,255,1);
	border:1px solid rgba(255,255,255,0);
	color: rgba(0,0,0,0.5) !important;
	-webkit-transition: border 0.35s;
	transition: border 0.35s;
	text-decoration: none;
}
.pagenav__button--gallery:hover{
	border:1px solid rgba(0,0,0,0.8);
	color: rgba(0,0,0,0.8) !important;
	-webkit-transition: opacity 0.35s;
	transition: border 0.35s;
	text-decoration: none;
}

/*--menu-inside--*/
.menu-inside{
  background: #000000;
  position: absolute;
  top:0;
  left:0;
  padding:3em 1.1em 1.25em 1.1em; 
  width: 11.5em;
  min-height: 100%;
  height: 100%;
  z-index: 1001;
  width:14%;
  min-width: 160px;
}
.menu-inside h4{
	padding-bottom: 4px;
	border-bottom:1px solid #555555;
}
.menu-inside > a img.img-responsive {
	margin: 0 auto;
	margin-bottom: 2em;
	width: 70px;
}
.title-block-container{
	position: absolute;
  	left:3.5em;

}
.title-block{
  position: relative;
  display: inline-block;
  background: #000000;
  color:#ffffff;
  padding: 1.5em;
}
.copete{
  max-width:316px;
  position: relative;
  display: block;
  background: rgba(255,255,255,0.75);
  color:#494949;
  padding: 1.5em;
  margin-bottom: 2em;
}
.title-block h1,.copete h1,
.title-block h2,.copete h2,
.title-block h3,.copete h3,
.title-block h4,.copete h4{
    padding: 0;
    margin: 0;
 }
.featured{
	padding: 6em 10.5em;
}
.featured a{
	text-decoration: underline;
}
.pages .page p{
	font-size: 1.2em;
	line-height: 1.8em;
	font-weight: 300;	
}
.pages .page b{
	font-weight: 500;
}
.pages .page strong{
	font-weight: 700;
}
.menu-inside ul.nav li a{
	padding:5px;
}
.menu-inside ul.nav li a:hover, .menu-inside ul.nav li a:focus{
	background: none;
}
.fill{
  width:100%;
  min-width: 100%;
  height:100%;
  background-position:top left;
  background-size:100% auto;
  background-repeat: no-repeat;
  margin-top: 4.5em;
  min-height: 450px;
}
@media screen and (max-width: 1200px){

}
@media screen and (max-width: 992px){
	.pagenav__button--left{
		right:15px;
	}
	.pagenav__button--right{
		right:-23px;
	}
	.pagenav__button--gallery{
		right:10px;
	}
	
}
@media screen and (max-width: 862px){
	.fill{
		min-height: 350px;
	}
}	
@media screen and (max-width: 768px){
	.pagenav__button--gallery{
		top:17px;
	}
	.title-block-container{
		left:0;
		position: relative;
		margin-bottom: 0;
	}
	.title-block{
		left:0;
		position: relative;
		margin-bottom: 0;
	}
	.copete{
		max-width: none;
		margin-bottom: 0;
	}
	.fill{
		margin-top: 0;
		min-height: 250px;
		background-position:center center;
	}
    .js .pages {
		padding: 7.5em 0.5em 0 0.5em;
		width: 100%;
	}
	.menu-inside{
		background: #000000;
		position: absolute;
		top:0;
		left:0;
		padding:1em; 
		min-height: 0;
		height: auto;
		z-index: 1001;
		width:100%;
		min-width:0;
	}
	.menu-inside ul.nav{
		display: inline-block !important;
		padding: 0;
		margin: -0.135em;
		width: 85%;
		vertical-align: middle;
		text-align: right;
	}
	.menu-inside ul.nav li{
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	h4.white{
		display: none;
	}
	.menu-inside > a {
		width:15%; 
		display: inline-block !important;
		margin: -0.135em;
		text-align: left;
		padding: 0;
		padding-right: 5px;
		vertical-align: middle;
	}
	.menu-inside > a img.img-responsive{
		width:50px; 
		margin:0;
		margin-bottom:0;
	}
	.featured{
		padding: 1.5em;
	}
}	
@media screen and (max-width: 480px){
	.fill{
		min-height: 190px;
	}
	.featured{
		padding: 1.5em;
	}
	.copete{
		background: rgba(0,0,0,0.15);
	}
	ul.list-unstyled{
		padding: 0.5em !important;
		font-size:1.5em !important;
	}
	.title-block-container .xxxlarge{
		font-size:2.6em !important;
	}
	.menu-inside ul.nav li a{
		padding:5px 3px;
		font-size: 14px; 
	}
	.featured .xlarge{
		font-size: 1.25em !important;
	}
	.featured.black .xxlarge{
		font-size: 1.5em !important;
		line-height: 1.5em !important;
	}
}
.menu-inside .fixed-bottom {
	position: absolute;
	bottom:0.5em;
	left:0;
}

/*--Font size ---*/
.xsmall{font-size:10px!important;}
.small{font-size:12px!important;}
.norm{font-size:14px!important;}
.large{font-size:18px!important;}      
.larger{font-size:24px!important;}
.xlarge{font-size:32px!important;}
.xxlarge{font-size:46px!important;}
.xxxlarge{font-size:66px!important;}
.reallybig{font-size:102px!important;}
.tremendous{font-size:168px!important;}
.absurd{font-size:168px!important;}
.h1{font-size:36px!important;}                             
.h2{font-size:30px!important;}                             
.h3{font-size:24px!important;}                             
.h4{font-size:18px!important;}                             
.h5{font-size:14px!important;}                             
.h6{font-size:12px!important;}

blockquote{
	font-weight: 300;
	font-style: italic;
}
.line{
	height:3px;
}
ul.list-unstyled{
	padding: 1.5em;
}
ul.list-unstyled li{
	margin-bottom: 10px;
}
.cta{
	border-top: 2px solid #000000;
	padding: 3.5em 4.5em;
	width: 100%;
}
@media screen and (max-width: 790px){
	.cta{
		padding: 1.5em;
	}
	.text-right{
		text-align: center; 
	}
	.btn-special{
		width: 48%;
		margin: -0.135em;
	}
	.btn-special span{
		display: block;
	}	
}
@media screen and (max-width: 436px){
	.btn-special{
		width: 100%;
		margin-bottom: 10px; 
	}
}