/* =================================================================== 
 *
 *  親指プロップス
 *  
 *  2025-05-01
 *  ------------------------------------------------------------------
 *  TOC:
 *	00. reset
 *  01. webfonts and iconfonts
 *  02. base style overrides & grid
 *  03. typography & general theme styles
 *  04. preloader
 *  05. forms
 *  06. buttons
 *  07. other components 
 *  08. common and reusable styles
 *  09. header styles
 *  10. page hero
 *  11. content wrap
 *  12. footer
 *  13. movie
 *  14. state
 *
 * =================================================================== */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;600;700;900&display=swap");*,*::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none
}
*/
/* ===================================================================
 *  00. reset - normalize.css v3.0.2 | MIT License | git.io/normalize
 *
 * ------------------------------------------------------------------- */
:root {
  --font-weight-thin: 100;
  --font-weight-semi-bold: 600;
  --font-weight-black: 900;
}
html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-size: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background: transparent;
	text-decoration: none;
	color: #000000;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	/*font-size: 2em;*/
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}
/* 要素内での改ページを避ける */
img {
	page-break-inside: avoid;
}
svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}


 /* ===================================================================
 *  01. webfonts and iconfonts
 *
 * ------------------------------------------------------------------- */


/* ===================================================================
 *  02. base style overrides & grid
 *
 * ------------------------------------------------------------------- */
html {
}
html,
body {
	width: 100%;
	height: 100%;

}

body {
	font-family: "Noto Sans Japanese", "Montserrat", "Helvetica Neue", Helvetica, "Avenir Next", "Mplus 1p", "游ゴシック体", '游ゴシック', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, sans-serif;
	font-size: 1.7rem;
	line-height: 2rem;
	color: #111111;
	margin: 0 auto;

}

.l-main-wrapper {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.l-bg-video {
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -1;
 background: url("../images/background.svg") no-repeat;
 background-size: cover;
}
.l-bg-video-mini {
 position: absolute;
 top: 0px;
 left: 0;
 width: 100%;
 height: auto;
 z-index: -1;
 background: url("../images/background_02.svg") no-repeat;
 background-size: cover;
}
.l-bg-video-mini2 {
 position: absolute;
 top: -40px;
 left: 0;
 width: 100%;
 height: auto;
 z-index: -1;
 background: url("../images/background_03.svg") no-repeat;
 background-size: cover;
}
.l-thumb-picture {
	position: fixed;
	display: flex;
  align-items: center;
	top: 0;
	left: -10px;
	width: auto;
	height: 100vh;
	z-index: 1;
}

.l-thumb-picture img {
	height: 90%;
	max-height: 800px;
}

.l-title-main {
	position: fixed;
	display: flex;
  align-items: center;
	top: 0;
	left: 25%;
	width: auto;
	height: 100vh;

}
.l-title-main img {
	height: 68%;
	max-height: 600px;
}
.l-scroll-wrapper {
	position: absolute;
	top: 0;
	left: 60%;
	width: 475px;
	min-width: 375px;
	height: 100%;
	background-color: #FFF200;
	z-index: 2;
	overflow: hidden;
}
.l-scroll--inner {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: #FFFFFF;
}

.l-scroll--inner:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	min-width: 375px;
	height: 250px;
	background-color: #FFF200;
}

.l-scroll--inner:after {
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	min-width: 375px;
	height: 250px;
	content: "";
	background-color: #FFFFFF;
	border-radius: 250px 250px 0 0;
}

.l-col {
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
	margin: 30px 0 30px 0;
	z-index: 2;
}
.p-disc-wrapper {
	position: relative;
	margin: 30px 0 0 0;
}
.l-gray-area {
	position: relative;
	padding: 60px 0 0 0;
	background-color: #F0F0F0;
	z-index: 6;
}

.l-gray-area:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 15px;
	background-color: #000000;
	opacity: 0.1;
}
.l-gray-area:after {
position: absolute;
	content: "";
	top: 15px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000000;
}

.l-yellow-area {
	position: relative;
	background-color: #FFF200;
	padding: 120px 0 20px 0;
	margin: 40px 0 0 0;
	border-radius: 250px 250px 0 0;
}

.m-round-design {
	background-color: #FFFFFF;
	width: calc(100% - 70px);
	margin: 10px 35px;
	padding: 60px 0 20px 0;
	border: 2px #000000 solid;
	border-radius: 200px 200px 20px 20px;
}



.p-title-sub {
	position: relative;
	z-index: 3;
	text-align: center;
	margin: 80px 0 0 0;
}

.p-title-sub img {
	position: relative;
	width: 65%;
}

.l-thumb-picture-small {
	position: absolute;
	top: 80px;
	right: -5px;
	width: 190px;
	height: 190px;
	z-index: 7;
}

.l-thumb-picture-small img {
	width: 100%;
}

.l-thumb-picture-small ~ .l-col {
	z-index: 5;
}

p {
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	padding: 10px 0;
}

span {
	word-break: break-all;
}

span:after {
 content: "\A";
 white-space: pre;
}

.p-headline-style {
	display: inline-block;
	width: auto;
	text-align: center;
	font-family: "Noto Sans Japanese", sans-serif;
	font-weight: 900;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	background:linear-gradient(transparent 60%, #FFF200 60%);
	background-repeat: no-repeat;
	margin: 5px 5px 0px;
	padding: 5px 3px;

}
.p-headline-style.line {
  background-size: 0% 100%;
  background-position: left bottom; 
}

.p-headline-style.line.is-view {
	transition:all 0.4s ease; 
  background-size: 100% 100%;
}


.l-picture-set {
	display: flex;
	flex: 1;
	flex-grow: 1;
	display: -webkit-flex;
	display: -webkit-flex;
	display: -webkit-box;
	justify-content: space-between;
	width: 90%;
	margin: 10px 5% 30px;
}
.l-picture-set li {
	width: calc(100% / 3);
}
.l-picture-set li img {
	width: 100%;
	padding: 0 5px;
}

.p-headline-2 {
	position: relative;
	width: auto;
	margin: 0 5px;

}
.p-sample-product {
	height: 120px;
}

.l-card-set {
	display: flex;
  flex-wrap: wrap;
  margin: 5px 0;
}
.l-card-set li {
	width: 50%;
	margin: 5px 0;

}
.l-card-set li img {
	width: 100%;
	padding: 0 10px;


}

.m-flyer {
	width: 100%;
	margin: 60px auto	30px;
}

.m-flyer img {
	max-width: 520px;
	width: 80%;
	height: auto;
}

.l_footer {
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 90px;
	background-color: #FFF200;

}
.p-corporate-logo {
	position: relative;
	top: 25px;
	left: 25%;
	width: 300px;
	height: 35px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("../../common/images/corprate_logo.svg");
}
.m-underline {
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
	max-width: 260px;
	border-bottom: 2px #000000 solid;
}
.p-headline {
	margin: 0;
}

.p-headline--english {
	width: auto;
	text-align: center;
	font-family: "Montserrat", "Noto Sans Japanese", sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0;
	letter-spacing: 0.2em;
}

.l-times {

}

.p-business-hours {
	position: relative;

	margin: 0 30px;
}

.p-business-hours {
	position: relative;
	font-size: 0.7rem;

	line-height: 1rem;
	margin: 0 auto;
}

.m-cautionary-note {
	font-size: 0.8rem;
	margin: 0;
	padding: 0;
}

.p-adress {
	position: relative;
	font-size: 0.6rem;
	text-align: center;
	margin: 0 auto;
	line-height: 0.9rem;
}

.p-adress span {
}


.p-store-name {
	position: relative;
	margin: 0;
	text-align: center;
}
.p-store-name p {
	margin: 0;
	padding: 0;
}
.p-store-name p:nth-child(1) {
	font-size: 1.2rem;
	font-weight: 900;
}
.p-store-name p:nth-child(2) {
	font-size: 1.8rem;
	font-weight: 900;
}

.p-button--google-map {
	position: relative;
	font-size: 0.8rem;
	font-family: "Montserrat", "Noto Sans Japanese", sans-serif;
	font-weight: 600;
	width: 140px;
	height: 35px;
	border-radius: 17.5px;
	background-color: #F0F0F0;
	text-align: center;
	padding: 0 0 0 9;
	margin: 10px auto;
	transition: all 0.3s;
	user-select: none;
}
.p-button--google-map:hover {
	background-color: #fff200;
}
/*
.p-button--google-map:before {
	position: absolute;
	content: "";
	top: 8px;
	left: 25px;
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	background-image: url("../../common/images/icon_map.svg");	
}
.p-button--google-map:hover:before {
	top: 9px;
}
*/
.m-button--sns {

}

.p-subline {
	margin: 30px 0 5px 0;
	font-size: 1.4rem;
	font-weight: 600;
}

.m-schedule {
	width: 100%;
}
.m-schedule img {
	width: 90%;
	max-width: 475px;
}

.m-discription {
	margin: 20px 0;
}

.m-discription p {
	font-size: 1rem;
	font-weight: 600;
}

.m-bg-kirakira {
	margin: 30px 0;
}
.m-bg-kirakira p {
	font-size: 0.9rem;
	line-height: 1.2rem;
}
/*
.m-bg-kirakira:after {
	position: absolute;
	content: "";
	top: -110px;
	left: 0px;
	width: 375px;
	height: 375px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	background-image: url("../../common/images/background_02.svg");		
}
.m-bg-kirakira2:after {
	position: absolute;
	content: "";
	top: -40px;
	left: 0px;
	width: 375px;
	height: 200px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	background-image: url("../../common/images/background_03.svg");		
}
*/
.l-scroll--footer {
	position: relative;
	background-color: #000000;
	text-align: center;
	height: 280px;
	padding: 55px 0;
}

.l-scroll--footer div {
	margin: 20px;
}


/* responsive:
 * base style overrides & grid
 * ------------------------------------------------------------------- */

@media (min-width: 884px) and (max-width: 1200px)  {
	.l-scroll-wrapper {
		left: auto;
		right: 10%;
	}
	.l-title-main {
		display: none;
	}
	.p-corporate-logo {
		left: 30px;
	}

	.l-scroll-wrapper {
		left: auto;
		right: 10%;
	}
	.l-thumb-picture img {
			height: 60%;
	}

	.l-title-main {
		display: none;
	}

	.p-corporate-logo {
		left: 30px;
	}
}
@media  (max-width: 884px) {
	.l-scroll-wrapper {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		margin: 0 auto;
		width: 100%;
		left: 0;	
	}
	.l-scroll--inner:before {
		width: 100vw;
		height: 500px;
		min-width: 375px;
	}
	.l-scroll--inner:after {
		width: 100vw;
		height: 500px;
		min-width: 375px;
		border-radius: 50vw 50vw 0 0;
	}

	.m-round-design {
		margin: 10px auto 30px;
	}

	.l-thumb-picture-small {
		top: 100px;
		width: 40vw;
		height: auto;
	}


	.l-bg-video-mini {
		width: 100vw;
		height: auto;
	}

	.l-card-set {
		padding: 0 0 10px 0;
	}

	.l-card-set li {
		margin: 0;
	}

	.l-card-set li img {
		padding: 5px 3px;
		min-width: 170px;
		width: 95%;
	}

	.l-thumb-picture {
		display: none;
	}
	.p-corporate-logo {
		display: none;
	}

	.m-round-design {
		border-radius: 50vw 50vw 20px 20px;
	}
	.l-yellow-area {
		margin: 40px 0 0 0;
		border-radius: 50vw 50vw 0 0;
	}
}
@media (max-width: 475px) {
	.m-bg-kirakira p {
		font-size: 0.75rem;
	}
 	.p-headline-2 {
		display: flex;
		justify-content:space-evenly ;
	}
	.l-thumb-picture-small {
		top: 65px;
		left: auto;
		width: 150px;
	}

	.m-round-design {
		border-radius: 200px 200px 20px 20px;
	}
	.l-yellow-area {
		border-radius: 200px 200px 0 0;
	}

	.l-scroll--inner:after {
		width: 100vw;
		height: 500px;
		min-width: 375px;
		border-radius: 200px 200px 0 0;
	}
	.p-sample-product {
			height: 110px;
	}

}
@media (max-height: 884px) {
	.l-title-main img {
		height: 60%;
		max-height: calc(100vh - 75px);
	}
}

/* ------------------------------------------------------------------- 
 * color pallete 
 * ------------------------------------------------------------------- */


/* ------------------------------------------------------------------- 
 * links 
 * ------------------------------------------------------------------- */
a,
a:visited {
	border-bottom: 1px solid transparent;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	cursor: pointer;
}
/*
a:hover,
a:focus {
	color: #000000;
	border-color: rgba(21, 21, 21, 0.2);
	text-decoration: none;
}
*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* ===================================================================
 *  03. typography & general theme styles
 *
 * ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h01, .h02, .h03, .h04, .h05, .h06 {
	color: #000000;
	font-style: normal;
	text-rendering: optimizeLegibility;
}
h1, .h01 {
	font-size: 3.6rem;
	line-height: 1.35;
	letter-spacing: .1rem;

}
h2, .h02 {
	font-size: 2.4rem;
	line-height: 1.25;

}
h3, .h03 {
	font-size: 2rem;
	line-height: 1.5;
}
h4, .h04 {
	font-size: 1.8rem;
	line-height: 1.5;

}
h5, .h05 {
	font-size: 1.4rem;
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: 0rem;
	font-weight: 600;
}
h6, .h06 {
	font-size: 1.1rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .1rem;
}
h1, h2, h3 {
	margin-top: 20px;
	margin-bottom: 10px;
}
p {
	color: rgba(0, 0, 0, 1);
}
ol {
	list-style: decimal;
}

ul {
	list-style: disc;
}

li {
	list-style: none;
	display: list-item;
}

@media (max-width: 884px) {
	h05 {
		font-size: 2.4rem;
	}
}
/* ------------------------------------------------------------------- 
 * shadow styles 
 * ------------------------------------------------------------------- */
.shadow-depth-1,
.shadow-depth-2,
.shadow-depth-3,
.shadow-depth-4 {
	transition-property: box-shadow;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}
.shadow-depth-1 {
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow-depth-1:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow-depth-2 {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow-depth-2:hover {
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.shadow-depth-3 {
	box-shadow: 0 30px 48px 22px rgba(0, 0, 0, 0.07);

}
.shadow-depth-4 {
	box-shadow: 5px 31px 85px 23px rgba(0, 0, 0, 0.07)
}
/* ------------------------------------------------------------------- 
 * selected text highlight color
 * ------------------------------------------------------------------- */
*::selection {
background: #fff200;
}
*::-moz-selection {
background: #fff200;
}

/* ------------------------------------------------------------------- 
 * animation easing styles 
 * ------------------------------------------------------------------- */
.ease-in-sine, .ease-in-sine:after, .ease-in-sine:before, .ease-in-sine *, .ease-in-sine *:after, .ease-in-sine *:before {
	-webkit-transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
	   -moz-transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
	    -ms-transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
	     -o-transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
	        transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
}
.ease-out-sine, .ease-out-sine:after, .ease-out-sine:before, .ease-out-sine *, .ease-out-sine *:after, .ease-out-sine *:before {
	-webkit-transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
	   -moz-transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
	    -ms-transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
	     -o-transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
	        transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
}
.ease-in-out-sine, .ease-in-out-sine:after, .ease-in-out-sine:before, .ease-in-out-sine *, .ease-in-out-sine *:after, .ease-in-out-sine *:before {
	-webkit-transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	   -moz-transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	    -ms-transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	     -o-transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	        transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.ease-in-quad, .ease-in-quad:after, .ease-in-quad:before, .ease-in-quad *, .ease-in-quad *:after, .ease-in-quad *:before {
	-webkit-transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	   -moz-transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	    -ms-transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	     -o-transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	        transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.ease-out-quad, .ease-out-quad:after, .ease-out-quad:before, .ease-out-quad *, .ease-out-quad *:after, .ease-out-quad *:before {
	-webkit-transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	   -moz-transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	    -ms-transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	     -o-transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	        transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ease-in-out-quad, .ease-in-out-quad:after, .ease-in-out-quad:before, .ease-in-out-quad *, .ease-in-out-quad *:after, .ease-in-out-quad *:before {
	-webkit-transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	   -moz-transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	    -ms-transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	     -o-transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	        transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.ease-in-cubic, .ease-in-cubic:after, .ease-in-cubic:before, .ease-in-cubic *, .ease-in-cubic *:after, .ease-in-cubic *:before {
	-webkit-transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	   -moz-transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	    -ms-transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	     -o-transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	        transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.ease-out-cubic, .ease-out-cubic:after, .ease-out-cubic:before, .ease-out-cubic *, .ease-out-cubic *:after, .ease-out-cubic *:before {
	-webkit-transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
	   -moz-transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
	    -ms-transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
	     -o-transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
	        transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ease-in-out-cubic, .ease-in-out-cubic:after, .ease-in-out-cubic:before, .ease-in-out-cubic *, .ease-in-out-cubic *:after, .ease-in-out-cubic *:before {
	-webkit-transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
	   -moz-transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
	    -ms-transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
	     -o-transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
	        transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ease-in-quart, .ease-in-quart:after, .ease-in-quart:before, .ease-in-quart *, .ease-in-quart *:after, .ease-in-quart *:before {
	-webkit-transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	   -moz-transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	    -ms-transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	     -o-transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	        transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.ease-out-quart, .ease-out-quart:after, .ease-out-quart:before, .ease-out-quart *, .ease-out-quart *:after, .ease-out-quart *:before {
	-webkit-transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
	   -moz-transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
	    -ms-transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
	     -o-transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
	        transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.ease-in-out-quart, .ease-in-out-quart:after, .ease-in-out-quart:before, .ease-in-out-quart *, .ease-in-out-quart *:after, .ease-in-out-quart *:before {
	-webkit-transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
	   -moz-transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
	    -ms-transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
	     -o-transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
	        transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
}
.ease-in-quint, .ease-in-quint:after, .ease-in-quint:before, .ease-in-quint *, .ease-in-quint *:after, .ease-in-quint *:before {
	-webkit-transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	   -moz-transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	    -ms-transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	     -o-transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	        transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);	
}
.ease-out-quint, .ease-out-quint:after, .ease-out-quint:before, .ease-out-quint *, .ease-out-quint *:after, .ease-out-quint *:before {
	-webkit-transition-duration: cubic-bezier(0.23, 1, 0.32, 1);
	   -moz-transition-duration: cubic-bezier(0.23, 1, 0.32, 1);
	    -ms-transition-duration: cubic-bezier(0.23, 1, 0.32, 1);
	     -o-transition-duration: cubic-bezier(0.23, 1, 0.32, 1);
	        transition-duration: cubic-bezier(0.23, 1, 0.32, 1);	
}
.ease-in-out-quint, .ease-in-out-quint:after, .ease-in-out-quint:before, .ease-in-out-quint *, .ease-in-out-quint *:after, .ease-in-out-quint *:before {
	-webkit-transition-duration: cubic-bezier(0.86, 0, 0.07, 1);
	   -moz-transition-duration: cubic-bezier(0.86, 0, 0.07, 1);
	    -ms-transition-duration: cubic-bezier(0.86, 0, 0.07, 1);
	     -o-transition-duration: cubic-bezier(0.86, 0, 0.07, 1);
	        transition-duration: cubic-bezier(0.86, 0, 0.07, 1);	
}
.ease-in-expo, .ease-in-expo:after, .ease-in-expo:before, .ease-in-expo *, .ease-in-expo *:after, .ease-in-expo *:before {
	-webkit-transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	   -moz-transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	    -ms-transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	     -o-transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	        transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);	
}
.ease-in-out-expo, .ease-in-out-expo:after, .ease-in-out-expo:before, .ease-in-out-expo *, .ease-in-out-expo *:after, .ease-in-out-expo *:before {
	-webkit-transition-duration: cubic-bezier(1, 0, 0, 1);
	   -moz-transition-duration: cubic-bezier(1, 0, 0, 1);
	    -ms-transition-duration: cubic-bezier(1, 0, 0, 1);
	     -o-transition-duration: cubic-bezier(1, 0, 0, 1);
	        transition-duration: cubic-bezier(1, 0, 0, 1);	
}
.ease-in-circ, .ease-in-circ:after, .ease-in-circ:before, .ease-in-circ *, .ease-in-circ *:after, .ease-in-circ *:before {
	-webkit-transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	   -moz-transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	    -ms-transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	     -o-transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	        transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);	
}
.ease-out-circ, .ease-out-circ:after, .ease-out-circ:before, .ease-out-circ *, .ease-out-circ *:after, .ease-out-circ *:before {
	-webkit-transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);
	   -moz-transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);
	    -ms-transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);
	     -o-transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);
	        transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);	
}
.ease-in-out-circ, .ease-in-out-circ:after, .ease-in-out-circ:before, .ease-in-out-circ *, .ease-in-out-circ *:after, .ease-in-out-circ *:before {
	-webkit-transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	   -moz-transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	    -ms-transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	     -o-transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	        transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);	
}
.ease-in-back, .ease-in-back:after, .ease-in-back:before, .ease-in-back *, .ease-in-back *:after, .ease-in-back *:before {
	-webkit-transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	   -moz-transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	    -ms-transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	     -o-transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	        transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);	
}
.ease-out-back, .ease-out-back:after, .ease-out-back:before, .ease-out-back *, .ease-out-back *:after, .ease-out-back *:before {
	-webkit-transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	   -moz-transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	    -ms-transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	     -o-transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	        transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);	
}
.ease-in-out-back, .ease-in-out-back:after, .ease-in-out-back:before, .ease-in-out-back *, .ease-in-out-back *:after, .ease-in-out-back *:before {
	-webkit-transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	   -moz-transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	    -ms-transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	     -o-transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	        transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);	
}
@keyframes bounce {
    0%   { top:000px; animation-timing-function:ease-in;  }
    37%  { top:500px; animation-timing-function:ease-out; }
    55%  { top:375px; animation-timing-function:ease-in;  }
    73%  { top:500px; animation-timing-function:ease-out; }
    82%  { top:465px; animation-timing-function:ease-in;  }
    91%  { top:500px; animation-timing-function:ease-out; }
    96%  { top:490px; animation-timing-function:ease-in;  }
    100% { top:500px; }
}

/* jquery.invew.js
 * styles
 * ------------------------------------------------------------------- */

.js-effect.fade-up {
    opacity: 0.2;
    transform: translate(0, 0.2rem);
}

.js-effect.fade-up.is-view {
		transition: 0.3s ease;
    opacity: 1;
   transform: translate(0, 0);
}
.js-effect.fade-up:nth-child(2) {
	transition-delay: 250ms;
}
.js-effect.fade-up:nth-child(3) {
	transition-delay: 500ms;
}
.js-effect.fade-up:nth-child(4) {
	transition-delay: 750ms;
}
.js-effect.fade-up:nth-child(5) {
	transition-delay: 1000ms;
}
.js-effect.slide-in {
  transform: translate(-700px, 200px) rotate(-20deg);
}
.js-effect.fade-slide {
    opacity: 0.2;
    transform: translate(-2rem, 0);
}

.js-effect.fade-slide.is-view {
		transition: 0.3s ease;
    opacity: 1;
   transform: translate(0, 0);
}
.js-effect.slide-in.is-view {
	transition: all 0.4s ease;
  transform: translate(0px, 0px) rotate(0deg);
  	transition-delay: 500ms;
}

.js-effect.slide-in-reverse {

  transform: translate(300px, 100px) rotate(20deg);
}

.js-effect.slide-in-reverse.is-view {
	transition: all 0.4s ease;
  transform: translate(0px, 0px) rotate(0deg);
}
/* ===================================================================
 *  04. preloader
 *
 * ------------------------------------------------------------------- */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(250, 250, 250, 1);
	z-index: 80;
	height: 100%;
	width: 100%;
}

.no-js #preloader,
.oldie #preloader {
	display: none;
}

#loader {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	padding: 0;
}

#loader:before {
	content: "";
	border-top: 8px solid rgba(0, 0, 0, 0.2);
	border-right: 8px solid rgba(0, 0, 0, 0.2);
	border-bottom: 8px solid rgba(0, 0, 0, 0.2);
	border-left: 8px solid rgba(0, 111, 187, 1);
	-webkit-animation: load 1.1s infinite linear;
	animation: load 1.1s infinite linear;
	display: block;
	border-radius: 50%;
	width: 30px;
	height: 30px;
}

@-webkit-keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

}

@keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

}

body:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
}
body.fadeout::after {
  opacity: 1;
}
body.fadeout main, body.fadeout .lp-main-hero {
	-webkit-transform: scale(1.02) translateY(20vh);
	transform: scale(1.02) translateY(20vh);
	-webkit-transition: transform 2s 0.1s;
	transition: transform 2s 0.1s;
}

/* ===================================================================
 *  06. buttons
 *
 * ------------------------------------------------------------------- */
.button, .buttons li {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: pointer;
}

.btn-text {
    padding: 12px 100px;
    border-radius: 25px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(102, 102, 102, 1);
    color: rgba(102, 102, 102, 1);
    background-color: rgba(241,241,241, 1);
	font-size: 1rem;
    /* transition-set */
    transition-property: background-color, color, border;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
.btn-text:hover {
    border-color: rgba(102, 102, 102, 1);
    color: rgba(255, 255, 255, 1);
    background-color: rgba(102, 102, 102, 1); 
}
body.science .btn-text {
	border-color: rgba(105, 188, 130, 1);
	color: rgba(105, 188, 130, 1);
}
body.science .btn-text:hover {
	border-color: rgba(105, 188, 130, 1);
    color: rgba(255, 255, 255, 1);
    background-color: rgba(105, 188, 130, 1);
}
.btn-lg:after {
	content: "";
	position: absolute;
	top: -40px;
	left: calc(50% - 1px);
	width: 2px;
	height: 40px;
	background-color: rgba(122, 122, 122, 1);
}
.btn-lg:before {
	content: "";
	position: absolute;
	top: -23px;
	left: calc(50% - 9.5px);
	width: 15px;
    height: 15px;
    border-top-style: solid;
    border-top-width: 2px;
    border-right-style: solid;
    border-right-width: 2px;
    border-color: rgba(122, 122, 122, 1);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition-duration: 0.4s;
    transition-property: top, opacity;
    transition-timing-function: ease-in-out; 
    opacity: 0;
} 
.btn-text.btn-lg:hover:before {
	top: -18px;
	opacity: 1;
}
body.science .btn-lg:after {
	background-color: rgba(105, 188, 130, 1);
}
body.science .btn-lg:before {
	border-color: rgba(105, 188, 130, 1);
}

/* responsive:
 * buttons
 * ------------------------------------------------------------------- */

/* ===================================================================
 *  07. other components
 *
 * ------------------------------------------------------------------- */
.m-button {
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: 	 none;
	-ms-user-select: 	 	 none;
	-o-user-select: 	 	 none;
	user-select: 		 		 none;
}

.m-button--sns {
	position: relative;
	display: flex;
	width: 300px;
	height: 70px;
	border-radius: 35px;
	margin: 30px auto;
	padding: 0 20px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 70px;
	white-space: nowrap;
}

.m-button--sns-x {
	background-color: #000000;
	color: #FFFFFF !important;
}

.m-button--sns-note {
	background-color: #FFFFFF;
	border: 2px #000000 solid;
	color: #000000 !important;;
}

.m-button--contact {
	padding: 0 30px;
	font-size: 1.2rem;
	background-color: #000000;
	color: #FFFFFF !important;;
}

.m-icon {
	position: relative;
	height: 40px;
	margin: 15px 5px;
}

.m-arrow {
  position: absolute;
  top: 33px;
  right: 30px;
  width: 15px;
  height: 3px;
  border-radius: 9999px;
  background-color: #FFC800;
  transition: all 0.2s;
}
.m-button:hover .m-arrow {
  right: 25px;
}

.m-arrow::before,
.m-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  right: 0;
  width: 12px;
  height: 3px;
  border-radius: 9999px;
  background-color: #FFC800;
  transform-origin: calc(100% - 1.5px) 50%;
}

.m-arrow:before {
  transform: rotate(45deg);
}

.m-arrow:after {
  transform: rotate(-45deg);
}

.color-light {
  background-color: #FFF200;
}

.m-arrow.color-light::before,
.m-arrow.color-light::after {
	background-color: #FFF200;
}

/* responsive:
 * other components
 * ------------------------------------------------------------------- */

/* ===================================================================
 *  08. common and reusable styles
 *
 * ------------------------------------------------------------------- */


/* responsive:
 * common and reusable styles
 * ------------------------------------------------------------------- */
/* ===================================================================
 *  09. header styles
 *
 * ------------------------------------------------------------------- */

/* responsive:
 * header styles
 * ------------------------------------------------------------------- */


/* ===================================================================
 *  10. page hero
 *
 * ------------------------------------------------------------------- */

/* responsive:
 * page hero
 * ------------------------------------------------------------------- */

 /* ===================================================================
 *  11. content wrap
 *
 * ------------------------------------------------------------------- */
/******* bootstrap.css拡張 *******/
/*-- フレックスアイテム --*/

/* responsive:
 * content wrap
 * ------------------------------------------------------------------- */

/* ===================================================================
 * 12. footer
 *
 * ------------------------------------------------------------------- */

/* responsive:
 * footer
 * ------------------------------------------------------------------- */



/* ===================================================================
 *  13. movie
 *
 * ------------------------------------------------------------------- */

/* ===================================================================
 *  14. map
 *
 * ------------------------------------------------------------------- */

/* ===================================================================
 *  14. state
 *
 * ------------------------------------------------------------------- */
/**
 * Animate.css - http://daneden.me/animate
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2015 Daniel Eden
 * =================================================================== */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 12.5px;
  }
  50% {
    height: 25px;
    width: 12.5px;
  }
}
@-moz-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 12.5px;
  }
  50% {
    height: 25px;
    width: 12.5px;
  }
}
@-ms-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 12.5px;
  }
  50% {
    height: 25px;
    width: 12.5px;
  }
}
@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 12.5px;
  }
  50% {
    height: 25px;
    width: 12.5px;
  }
}
@-webkit-keyframes check2 {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 15px;
  }
  50% {
    height: 30px;
    width: 15px;
  }
}
@-moz-keyframes check2 {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 15px;
  }
  50% {
    height: 30px;
    width: 15px;
  }
}
@-ms-keyframes check2 {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 15px;
  }
  50% {
    height: 30px;
    width: 15px;
  }
}
@keyframes check2 {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 15px;
  }
  50% {
    height: 30px;
    width: 15px;
  }
}
@keyframes okeffect {
  0% {
    opacity: 0;
    top: 20%;
  }
  75% {
    opacity: 1;
    top: 12%;
  }
  90% {
    opacity: 1;
    top: 12%;
  }
  100% {
    opacity: 0;
    top: 15%;
  }
}
@-webkit-keyframes _bounce {
  20%,53%,80%,from,to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes _bounce {
  20%,53%,80%,from,to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: _bounce;
  animation-name: _bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}