@charset "UTF-8";
/* CSS Document */
html, body, main, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; /*iphone用*/ -webkit-text-size-adjust: none; font-weight: normal; }

main { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

address { font-style: normal; }

/* html5 */
article, aside, canvas, details, figcaption, figure, header, footer, hgroup, menu, nav, section, summary { display: block; }

/****************************************
common.scss
/****************************************
 common

*****************************************/
main { overflow: hidden; }

@media print, screen and (min-width: 768px) { .ma70 { margin-bottom: 70px; }
  .ma60 { margin-bottom: 60px; }
  .ma55 { margin-bottom: 55px; }
  .ma50 { margin-bottom: 50px; }
  .ma45 { margin-bottom: 45px; }
  .ma40 { margin-bottom: 40px; }
  .ma35 { margin-bottom: 35px; }
  .ma35 { margin-bottom: 35px; }
  .ma30 { margin-bottom: 30px; }
  .ma25 { margin-bottom: 25px; }
  .ma20 { margin-bottom: 20px; }
  .ma15 { margin-bottom: 15px; }
  .ma10 { margin-bottom: 10px; } }
@media screen and (max-width: 767px) { .sp-ma60 { margin-bottom: 60px; }
  .sp-ma55 { margin-bottom: 55px; }
  .sp-ma50 { margin-bottom: 50px; }
  .sp-ma45 { margin-bottom: 45px; }
  .sp-ma40 { margin-bottom: 40px; }
  .sp-ma35 { margin-bottom: 35px; }
  .sp-ma35 { margin-bottom: 35px; }
  .sp-ma30 { margin-bottom: 30px; }
  .sp-ma25 { margin-bottom: 25px; }
  .sp-ma20 { margin-bottom: 20px; }
  .sp-ma15 { margin-bottom: 15px; }
  .sp-ma10 { margin-bottom: 10px; } }
.pc-block { display: block; }
@media screen and (max-width: 767px) { .pc-block { display: none; } }

.sp-block { display: none; }
@media screen and (max-width: 767px) { .sp-block { display: block; } }

/****************************************
 flex

*****************************************/
@media print, screen and (min-width: 768px) { .flex { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; align-items: flex-start; } }
@media screen and (max-width: 767px) { .sp-flex { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; align-items: flex-start; } }
@media print, screen and (min-width: 768px) { .flex-ce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start; } }
@media screen and (max-width: 767px) { .sp-flex-ce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start; } }
@media print, screen and (min-width: 768px) { .flex-txt-ce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; align-items: flex-start; } }
@media screen and (max-width: 767px) { .sp-flex-txt-ce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; align-items: flex-start; } }
@media print, screen and (min-width: 768px) { .flex-mce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } }
@media screen and (max-width: 767px) { .sp-flex-mce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } }
@media print, screen and (min-width: 768px) { .flex-u { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end; } }
@media screen and (max-width: 767px) { .sp-flex-u { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end; } }
@media print, screen and (min-width: 768px) { .flex-t { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }
@media screen and (max-width: 767px) { .sp-flex-t { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }
@media print, screen and (min-width: 768px) { .flex-re { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; flex-direction: row-reverse; } }
@media screen and (max-width: 767px) { .flex-re { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; flex-direction: row-reverse; } }
@media print, screen and (min-width: 768px) { .flex-ue { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } }
@media screen and (max-width: 767px) { .sp-flex-ue { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } }
@media print, screen and (min-width: 768px) { .flex-o { -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -webkit-flex-order: -1; -moz-flex-order: -1; -webkit-order: -1; -moz-order: -1; order: -1; } }
@media screen and (max-width: 767px) { .sp-flex-o { -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -webkit-flex-order: -1; -moz-flex-order: -1; -webkit-order: -1; -moz-order: -1; order: -1; } }
@media print, screen and (min-width: 768px) { .flex-rt { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; flex-direction: column-reverse; } }
@media screen and (max-width: 767px) { .sp-flex-rt { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; flex-direction: column-reverse; } }
@media print, screen and (min-width: 768px) { .flex-r { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } }
@media screen and (max-width: 767px) { .sp-flex-r { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } }
@media screen and (max-width: 767px) and (max-width: 767px) { .sp-flex-r { display: block; } }

/****************************************
 Typography

*****************************************/
html { font-size: 62.5%; }

body { font-size: 1.45rem; line-height: 1.8; color: #231815; font-family: 'Noto Sans JP', sans-serif; }

* { font-family: inherit; font-size: inherit; line-height: inherit; }

a, a:visited { color: inherit; text-decoration: none; }

address { font-style: normal; }

p, .text { line-height: 1.8; }

.text-center { text-align: center; }

.text-right { text-align: right; }

/****************************************
 button

*****************************************/
/* Remove text-shadow in selection highlight: h5bp.com/i These selection rule sets have to be separate. Customize the background color to match your design. */
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/* Remove the gap between images, videos, audio and canvas and the bottom of their containers: h5bp.com/i/440 */
audio, canvas, img, video { vertical-align: middle; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; vertical-align: top; }

label, select, input[type=submit] { cursor: pointer; }

/****************************************
 link

*****************************************/
a:hover, a:focus, a:active { transition: all 0.8s ease 0s; }

img { max-width: 100%; max-height: 100%; width: auto; height: auto; vertical-align: top; font-size: 0; line-height: 0; }

/***************************************
pagination
*****************************************/
.pagenum { margin-top: 60px; border-top: solid 1px #BBBBBB; }

.pagination { text-align: center; font-weight: bold; width: 100%; padding: 40px 0; }
.pagination ul { display: flex; align-content: center; justify-content: center; }
@media print, screen and (min-width: 768px) { .pagination { font-size: 2rem; } }
@media screen and (max-width: 767px) { .pagination { font-size: 1.5rem; } }
.pagination li { margin: 5px; }
.pagination a { display: inline-block; color: #231815; background: #EEE; text-decoration: none; }
@media print, screen and (min-width: 768px) { .pagination .page-numbers { width: 40px; height: 40px; line-height: 40px; } }
@media screen and (max-width: 767px) { .pagination .page-numbers { width: 30px; height: 30px; line-height: 30px; } }
.pagination .inactive, .pagination span { padding: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; display: inline-block; }
.pagination .pagination-last { letter-spacing: .3em; }
.pagination .current { background-color: #EA6000; color: #231815; }

.pagination.page_single div a { position: relative; width: 100px; height: 50px; background: #231815; transform: skewX(-20deg); display: flex; justify-content: center; align-items: center; }
@media print, screen and (min-width: 768px) { .pagination.page_single div a { margin: 0 20px; } }
.pagination.page_single div a::before { content: ""; display: block; width: 50px; height: 10px; background: url(../img/arrow.svg) no-repeat center; background-size: contain; position: absolute; }
.pagination.page_single div a span { display: block; width: auto; height: auto; margin-top: 80px; transform: skewX(20deg); font-size: 80%; }
@media screen and (max-width: 767px) { .pagination.page_single div a { transform: scale(0.8) skewX(-20deg); transform-origin: center left; } }
.pagination.page_single div.new { transform: scale(-1, 1); }
.pagination.page_single div.new a { transform: skewX(20deg); }
.pagination.page_single div.new a span { transform: scale(-1, 1) skewX(20deg); }
@media screen and (max-width: 767px) { .pagination.page_single div.new a { transform: scale(0.8) skewX(20deg); } }
.pagination.page_single div.arc a { position: relative; transform-origin: center; }
.pagination.page_single div.arc a::before, .pagination.page_single div.arc a::after { content: ""; display: block; width: 50%; height: 3px; background: white; position: absolute; top: 50%; left: 25%; transform: skewX(-60deg); }
.pagination.page_single div.arc a::before { margin-top: -5px; }
.pagination.page_single div.arc a::after { margin-top: 5px; }

.contents-title { line-height: 150%; font-weight: 700; }
@media print, screen and (min-width: 768px) { .contents-title { padding: 100px 0 60px; font-size: 3.2rem; } }
@media screen and (max-width: 767px) { .contents-title { padding: 70px 0 30px; font-size: 2.2rem; } }

.center { width: 100%; box-sizing: border-box; max-width: 1080px; margin-left: auto; margin-right: auto; }
@media print, screen and (min-width: 768px) { .center { padding-left: 40px; padding-right: 40px; } }
@media screen and (max-width: 767px) { .center { padding-left: 5%; padding-right: 5%; } }

/****************************************
 post single

*****************************************/
.post_single { text-align: left; }
.post_single a { color: #0045FF; font-weight: 700; }
.post_single h1, .post_single h2, .post_single h3, .post_single h4, .post_single h5, .post_single h6, .post_single h7 { font-weight: 700; margin-bottom: 15px; }
.post_single h1 { font-size: 2.6rem; }
.post_single h2 { font-size: 2.4rem; }
.post_single h3 { font-size: 2.2rem; }
.post_single h4 { font-size: 1.8rem; }
.post_single h5 { font-size: 1.8rem; }
.post_single h6 { font-size: 1.8rem; }
.post_single h7 { font-size: 1.8rem; }
.post_single b, .post_single strong { font-size: 1.8rem; font-weight: 700; }
.post_single img { max-width: 100%; width: auto; height: auto; margin: 20px 0; }
.post_single em { font-style: italic; }
.post_single ul, .post_single ol { list-style: outside; margin-left: 20px; font-weight: bold; letter-spacing: 0.08em; line-height: 2.2; }
.post_single ol { list-style-type: decimal; }
.post_single p { word-break: break-all; }
.post_single .video { position: relative; width: 100%; padding-top: 56.25%; }
.post_single .video iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

.wp-caption-text { font-size: 80%; line-height: 150%; margin-top: -10px; }

.wp-caption { width: auto !important; margin: 10px 0 20px; }

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */
@-webkit-keyframes bounce { from,
  20%,
  53%,
  80%,
  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 { from,
  20%,
  53%,
  80%,
  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 flash { from,
  50%,
  to { opacity: 1; }
  25%,
  75% { opacity: 0; } }
@keyframes flash { from,
  50%,
  to { opacity: 1; }
  25%,
  75% { opacity: 0; } }
.flash { -webkit-animation-name: flash; animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
@keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
.pulse { -webkit-animation-name: pulse; animation-name: pulse; }

@-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
  40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
  50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
  65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
  75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
@keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
  40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
  50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
  65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
  75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
.rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; }

@-webkit-keyframes shake { from,
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  10%,
  30%,
  50%,
  70%,
  90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); }
  20%,
  40%,
  60%,
  80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } }
@keyframes shake { from,
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  10%,
  30%,
  50%,
  70%,
  90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); }
  20%,
  40%,
  60%,
  80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } }
.shake { -webkit-animation-name: shake; animation-name: shake; }

@-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); }
  18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); }
  31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); }
  43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); }
  50% { -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); }
  18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); }
  31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); }
  43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); }
  50% { -webkit-transform: translateX(0); transform: translateX(0); } }
.headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; }

@-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); }
  40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); }
  60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); }
  80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); }
  to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); }
  40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); }
  60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); }
  80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); }
  to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } }
.swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; }

@-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  10%,
  20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%,
  50%,
  70%,
  90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%,
  60%,
  80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
@keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  10%,
  20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%,
  50%,
  70%,
  90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%,
  60%,
  80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
.tada { -webkit-animation-name: tada; animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.wobble { -webkit-animation-name: wobble; animation-name: wobble; }

@-webkit-keyframes jello { from,
  11.1%,
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } }
@keyframes jello { from,
  11.1%,
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } }
.jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; }

@-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); }
  14% { -webkit-transform: scale(1.3); transform: scale(1.3); }
  28% { -webkit-transform: scale(1); transform: scale(1); }
  42% { -webkit-transform: scale(1.3); transform: scale(1.3); }
  70% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); }
  14% { -webkit-transform: scale(1.3); transform: scale(1.3); }
  28% { -webkit-transform: scale(1); transform: scale(1); }
  42% { -webkit-transform: scale(1.3); transform: scale(1.3); }
  70% { -webkit-transform: scale(1); transform: scale(1); } }
.heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

@-webkit-keyframes bounceIn { from,
  20%,
  40%,
  60%,
  80%,
  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); }
  0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
  20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
  80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
@keyframes bounceIn { from,
  20%,
  40%,
  60%,
  80%,
  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); }
  0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
  20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
  80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
.bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; }

@-webkit-keyframes bounceInDown { from,
  60%,
  75%,
  90%,
  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); }
  0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
  75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes bounceInDown { from,
  60%,
  75%,
  90%,
  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); }
  0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
  75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft { from,
  60%,
  75%,
  90%,
  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); }
  0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); }
  75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); }
  90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes bounceInLeft { from,
  60%,
  75%,
  90%,
  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); }
  0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); }
  75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); }
  90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight { from,
  60%,
  75%,
  90%,
  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); }
  from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); }
  75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); }
  90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes bounceInRight { from,
  60%,
  75%,
  90%,
  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); }
  from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); }
  75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); }
  90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp { from,
  60%,
  75%,
  90%,
  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); }
  from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }
  75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
  90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes bounceInUp { from,
  60%,
  75%,
  90%,
  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); }
  from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }
  75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
  90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; }

@-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
  50%,
  55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } }
@keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
  50%,
  55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } }
.bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceOut; animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
  40%,
  45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }
  to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } }
@keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
  40%,
  45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }
  to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } }
.bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; }

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

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

@-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  40%,
  45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }
  to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } }
@keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  40%,
  45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }
  to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } }
.bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; }

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

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

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

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

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

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

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

@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.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) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) 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) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) 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) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } }
@keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) 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) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) 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) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -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-duration: 0.75s; animation-duration: 0.75s; -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-animation-duration: 0.75s; animation-duration: 0.75s; -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); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@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); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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-duration: 2s; animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge; }

@-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; }
  50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
  to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } }
@keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; }
  50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
  to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } }
.jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-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; }

.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.delay-03s { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }

.animated.delay-05s { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }

.animated.delay-08s { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }

.animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; }

.animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; }

.animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; }

.animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; }

.animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; }

@media screen and (min-width: 768px) { /*PC Only*/
  .animated.pc-delay-03s { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
  .animated.pc-delay-05s { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
  .animated.pc-delay-08s { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
  .animated.pc-delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; }
  .animated.pc-delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; }
  .animated.pc-delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; }
  .animated.pc-delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; }
  .animated.pc-delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; } }
@media screen and (max-width: 767px) { /*SP Only*/
  .animated.sp-delay-03s { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
  .animated.sp-delay-05s { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
  .animated.sp-delay-08s { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
  .animated.sp-delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; }
  .animated.sp-delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; }
  .animated.sp-delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; }
  .animated.sp-delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; }
  .animated.sp-delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; } }
.animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms; }

.animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms; }

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

.animated.slowly { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; }

.animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s; }

@media (print), (prefers-reduced-motion: reduce) { .animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } }
/* header.scss

***************************************
 header

*****************************************/
.header_top { position: fixed; width: 100%; z-index: 98; top: 0; left: 0; background: #F7F7F7; display: flex; justify-content: space-between; box-sizing: border-box; transition: ease .3s; }
@media print, screen and (min-width: 768px) { .header_top { padding: 20px 40px 20px 30px; } }
@media screen and (max-width: 767px) { .header_top { padding: 20px 5%; } }
@media print, screen and (min-width: 768px) { .header_top .logo { width: 260px; } }
@media screen and (max-width: 767px) { .header_top .logo { width: 180px; } }

.top .header_top { opacity: 0; }

.nav_open, .nav_close { width: 70px; position: relative; z-index: 3; }
@media print, screen and (min-width: 768px) { .nav_open, .nav_close { height: 50px; } }
@media screen and (max-width: 767px) { .nav_open, .nav_close { height: 33px; margin-right: 8px; transform: scale(0.8); transform-origin: center right; } }
.nav_open::before, .nav_open::after, .nav_close::before, .nav_close::after { content: ""; display: block; width: 100%; height: 4px; background: #EA6000; position: absolute; top: 50%; transform: skewX(-60deg); }
.nav_open::before, .nav_close::before { margin-top: -6px; left: 8px; }
.nav_open::after, .nav_close::after { margin-top: 8px; left: -6px; }

.nav_close { position: fixed; right: 0px; top: 0px; }
@media print, screen and (min-width: 768px) { .nav_close { margin: 20px 40px 20px 30px; } }
@media screen and (max-width: 767px) { .nav_close { margin: 20px 25px 20px 18px; } }
.nav_close::before, .nav_close::after { margin: 0; left: 0; background: white; }
.nav_close::before { transform: rotate(-45deg) skewX(60deg); }
.nav_close::after { transform: rotate(45deg) skewX(-60deg); }

.top_img .nav_open { position: absolute; right: 0; top: 0; }
@media print, screen and (min-width: 768px) { .top_img .nav_open { margin: 20px 40px 20px 30px; } }
@media screen and (max-width: 767px) { .top_img .nav_open { margin: 20px 32px 20px 30px; } }
.top_img .nav_open::before, .top_img .nav_open::after { background-color: white; }

nav { display: none; position: fixed; width: 100%; z-index: 98; top: 0; left: 0; height: 100%; box-sizing: border-box; padding: 5vw; }
nav ol { position: relative; z-index: 2; }
nav ol::before { content: ""; display: block; position: absolute; width: 40px; height: 100%; left: -5vw; margin-top: -10px; background: #EA6000; transform: skewY(-20deg); }
@media screen and (max-width: 767px) { nav ol { padding-left: 40px; padding-top: 4.5vh; } }
nav a:hover img { opacity: .3; }
nav img { transition: ease .3s; }
@media print, screen and (min-width: 768px) { nav img { height: 50px; margin-bottom: 3vh; } }
@media screen and (max-width: 767px) { nav img { height: 35px; margin-bottom: 3.5vh; } }
nav::before { content: ""; display: block; position: absolute; width: 100%; height: 0%; top: -100vw; left: 0; background: #231815; transition: ease-in-out 0.3s; }
nav::after { content: ""; display: block; position: absolute; right: 20%; top: 0; width: 30%; height: 100%; background: url(../img/logo.svg) no-repeat center; background-size: contain; opacity: 0.1; }
nav.open::before { top: 0%; height: 100%; }

#load { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: white; z-index: 99; }

/* footer

***************************************

footer

*****************************************/
@media print, screen and (min-width: 768px) { .contact_bar { position: fixed; z-index: 97; width: 45px; height: 200px; left: 0; bottom: 40px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; color: white; }
  .contact_bar::before { content: ""; display: block; position: absolute; transform: skewY(-20deg); background: #231815; width: 100%; height: 100%; transition: ease .3s; }
  .contact_bar:hover::before { background-color: #EA6000; }
  .contact_bar div + div { margin: 20px 0 30px; }
  .contact_bar div { width: 100%; text-align: center; position: relative; z-index: 2; }
  .contact_bar p { transform: rotate(-90deg); }
  .contact_bar img { width: 20px; height: auto; }
  .contact_bar a { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; } }
@media screen and (max-width: 767px) { .contact_bar { display: none; } }
.totop a { position: fixed; z-index: 90; width: 40px; height: 100px; background: #231815; right: 0; transform: skewY(-20deg); transition: ease .3s; }
.totop a::before { content: ""; display: block; width: 50px; height: 10px; background: url(../img/arrow.svg) no-repeat center; background-size: contain; transform: scale(-1, 1) rotate(-90deg) skewX(20deg); top: 49px; left: 0px; position: absolute; }
@media print, screen and (min-width: 768px) { .totop a { bottom: 40px; }
  .totop a:hover { background-color: #EA6000; } }
@media screen and (max-width: 767px) { .totop a { bottom: 20px; transform: scale(0.8) skewY(-20deg); transform-origin: center right; } }

footer { text-align: center; }
@media print, screen and (min-width: 768px) { footer { padding: 100px 0 0; } }
@media screen and (max-width: 767px) { footer { padding: 60px 0 0; } }
footer img { height: auto; }
@media print, screen and (min-width: 768px) { footer img { width: 365px; } }
@media screen and (max-width: 767px) { footer img { width: 60%; } }
footer b { font-weight: 700; display: block; }
@media print, screen and (min-width: 768px) { footer .nv_logo img { width: 240px; } }
@media screen and (max-width: 767px) { footer .nv_logo img { width: 45%; } }

.foot_link { background: #DDDDDD; padding: 20px 0; font-size: 1.4rem; }
@media print, screen and (min-width: 768px) { .foot_link { margin-top: 100px; } }
@media screen and (max-width: 767px) { .foot_link { margin-top: 60px; } }
@media print, screen and (min-width: 768px) { .foot_link li { margin: 0 40px; } }
@media screen and (max-width: 767px) { .foot_link li { margin: 0 5%; } }

.copyright { background: #EA6000; color: white; font-size: 1.4rem; padding: 20px 0; }

.top_img { background: #EA6000; display: flex; align-items: center; justify-content: center; padding: 0; }
.top_img div { text-align: center; }
.top_img img { height: auto; }
@media print, screen and (min-width: 768px) { .top_img img { width: 370px; } }
@media screen and (max-width: 767px) { .top_img img { width: 50%; } }

/* animation */
@-webkit-keyframes fadezoomIn { from { opacity: 0; -webkit-transform: scale3d(2, 2, 2); transform: scale3d(2, 2, 2); } }
@keyframes fadezoomIn { from { opacity: 0; -webkit-transform: scale3d(2, 2, 2); transform: scale3d(2, 2, 2); } }
.fadezoomIn { animation-delay: .5s; -webkit-animation-name: fadezoomIn; animation-name: fadezoomIn; }

/* info */
.info { padding-top: 90px; }
.info b { display: block; }

@media screen and (max-width: 767px) { .about { padding-bottom: 50px; } }
.about .copy { text-align: center; line-height: 150%; color: #EA6000; margin: 90px auto; font-weight: 700; }
@media print, screen and (min-width: 768px) { .about .copy { font-size: 2.4rem; } }
@media screen and (max-width: 767px) { .about .copy { font-size: 2rem; } }
.about .flex-ce { margin-bottom: 60px; }
@media print, screen and (min-width: 768px) { .about .flex-ce .cont { width: 60%; }
  .about .flex-ce .cont p { width: 80%; } }
.about .flex-ce .cont p { margin: 40px 0 0 auto; font-size: 1.6rem; font-weight: 700; }
.about .flex-ce .img { width: 25%; border: solid 25px #EA6000; }
@media print, screen and (min-width: 768px) { .about .flex-ce .img { width: 25%; } }
@media screen and (max-width: 767px) { .about .flex-ce .img { width: 50%; margin: 40px auto 0; } }
.about .flex-ce .img #slider { width: 100%; position: relative; padding-bottom: 100%; }
.about .flex-ce .img #slider img { position: absolute; top: 0; left: 0; opacity: 0; }

.about_img { height: 900px; position: relative; }
.about_img p { position: absolute; z-index: 2; color: #EA6000; display: inline; background: white; line-height: 150%; font-weight: 700; padding: 10px 15px; border: solid 5px #EA6000; }
@media print, screen and (min-width: 768px) { .about_img p { font-size: 3.2rem; } }
@media screen and (max-width: 767px) { .about_img p { font-size: 2rem; } }
@media print, screen and (min-width: 768px) { .about_img .line1 p { top: 30%; left: 15%; } }
@media screen and (max-width: 767px) { .about_img .line1 p { top: 30%; left: 5%; } }
.about_img .line2 p { right: 15%; }
@media print, screen and (min-width: 768px) { .about_img .line2 p { top: 10%; } }
@media screen and (max-width: 767px) { .about_img .line2 p { top: 20%; } }
.about_img .line3 p { top: 50%; }
@media print, screen and (min-width: 768px) { .about_img .line3 p { right: 8%; } }
@media screen and (max-width: 767px) { .about_img .line3 p { left: 20%; } }
@media print, screen and (min-width: 768px) { .about_img .line4 p { top: 37%; left: 8%; } }
@media screen and (max-width: 767px) { .about_img .line4 p { top: 57%; right: 5%; } }

.line_img { position: absolute; top: 0; height: 900px; width: 100%; overflow: hidden; display: none; }
.line_img div { display: block; position: absolute; left: 0; width: 5200px; height: 100%; background-size: auto 100% !important; }
.line_img .line1-1 { background-image: url(../img/line_img/line1-1.svg); animation: loop_line 20s linear infinite; }
.line_img .line1-2 { background-image: url(../img/line_img/line1-2.svg); animation: loop_line 30s linear infinite; }
.line_img .line1-3 { background-image: url(../img/line_img/line1-3.svg); background-size: auto 100%; animation: loop_line 40s linear infinite; }
.line_img .line2-1 { background-image: url(../img/line_img/line2-1.svg); animation: loop_line 20s linear infinite; }
.line_img .line2-2 { background-image: url(../img/line_img/line2-2.svg); animation: loop_line 30s linear infinite; }
.line_img .line2-3 { background-image: url(../img/line_img/line2-3.svg); animation: loop_line 40s linear infinite; }
.line_img .line3-1 { background-image: url(../img/line_img/line3-1.svg); animation: loop_line 20s linear infinite; }
.line_img .line3-2 { background-image: url(../img/line_img/line3-2.svg); animation: loop_line 30s linear infinite; }
.line_img .line3-3 { background-image: url(../img/line_img/line3-3.svg); animation: loop_line 40s linear infinite; }
.line_img .line4-1 { background-image: url(../img/line_img/line4-1.svg); animation: loop_line 20s linear infinite; }
.line_img .line4-2 { background-image: url(../img/line_img/line4-2.svg); animation: loop_line 30s linear infinite; }
.line_img .line4-3 { background-image: url(../img/line_img/line4-3.svg); animation: loop_line 40s linear infinite; }

@keyframes loop_line { 0% { transform: translate(0); }
  100% { transform: translate(-2600px, 0); } }
@media print, screen and (min-width: 768px) { .works_pic { background: url(../img/pic.jpg) no-repeat center #9295aa; background-size: auto 100%; height: 400px; } }
@media screen and (max-width: 767px) { .works_pic { background: url(../img/pic_mb.jpg) no-repeat center #9295aa; background-size: auto 100%; padding-bottom: 50%; } }

section { position: relative; padding-bottom: 100px; }

.sec_title { width: auto; padding-left: 20px; position: absolute; text-align: right; overflow: hidden; display: flex; align-items: flex-end; justify-content: right; right: 0; top: 0px; z-index: 2; }
@media print, screen and (min-width: 768px) { .sec_title { margin: -76.5px 0 0 auto; } }
@media screen and (max-width: 767px) { .sec_title { margin: -56.5px 0 0 auto; } }
.sec_title::before { content: ""; display: block; height: 30px; background: #EA6000; transform: skewX(-42deg); }
@media print, screen and (min-width: 768px) { .sec_title::before { width: 100px; margin-right: -16px; } }
@media screen and (max-width: 767px) { .sec_title::before { width: 80px; margin-right: -26px; } }
.sec_title div { display: inline-block; padding-top: 30px; width: auto; position: relative; }
@media print, screen and (min-width: 768px) { .sec_title div { padding-right: 30px; padding-left: 130px; } }
@media screen and (max-width: 767px) { .sec_title div { padding-right: 5%; padding-left: 100px; } }
.sec_title div::before { content: ""; position: absolute; right: -50px; top: 0; display: block; width: 100%; height: 100%; background: white; transform: skewX(-42deg); }
.sec_title img, .sec_title span { display: block; position: relative; }
.sec_title img { width: auto; margin: 0 0 0 auto; }
@media print, screen and (min-width: 768px) { .sec_title img { height: 40px; } }
@media screen and (max-width: 767px) { .sec_title img { height: 25px; } }
.sec_title span { margin-top: 10px; letter-spacing: 0.2em; }
@media screen and (max-width: 767px) { .sec_title span { font-size: 1.2rem; } }

/* works */
.works .contents-title, .works .sec_title span { color: #EA6000; }
.works dt { color: white; background-color: #666666; font-size: 2.4rem; padding: 0 15px; margin-bottom: 20px; }
@media print, screen and (min-width: 768px) { .works dt { width: 420px; } }
.works dd { margin-bottom: 40px; }

/* products */
.products { background: #666666; color: white; }
@media print, screen and (min-width: 768px) { .products { padding-top: 100px; } }
@media print, screen and (min-width: 768px) { .products .ico div { position: absolute; z-index: 2; background-position: center; background-repeat: no-repeat; background-size: 100% auto; animation: change-img-anim 2s infinite; animation-direction: normal; } }
@media print, screen and (min-width: 768px) and (min-width: 768px) { .products .ico div { width: 275px; height: 175px; top: -75px; } }
@media screen and (min-width: 768px) and (max-width: 767px) { .products .ico div { width: 95px; height: 60px; top: -26px; } }
@media print, screen and (min-width: 768px) { @keyframes change-img-anim { 0% { background-image: url(../img/products_ico1.png); }
    24% { background-image: url(../img/products_ico1.png); }
    25% { background-image: url(../img/products_ico2.png); }
    49% { background-image: url(../img/products_ico2.png); }
    50% { background-image: url(../img/products_ico3.png); }
    74% { background-image: url(../img/products_ico3.png); }
    75% { background-image: url(../img/products_ico4.png); }
    99% { background-image: url(../img/products_ico4.png); }
    100% { background-image: url(../img/products_ico1.png); } } }
.products .sec_title div::before { background: #666; }
.products .products_cont { border-top: solid 1px white; }
.products .products_cont a { margin-top: 0; }
@media print, screen and (min-width: 768px) { .products .products_cont { padding-top: 40px; padding-bottom: 40px; } }
@media screen and (max-width: 767px) { .products .products_cont { padding-top: 20px; padding-bottom: 20px; }
  .products .products_cont .btn { margin-top: 10px; } }
.products dl { border-bottom: solid 1px white; }
.products dt { color: white; display: flex; align-items: center; position: relative; }
@media print, screen and (min-width: 768px) { .products dt { font-size: 2.4rem; padding-left: 45px; margin-bottom: 20px; } }
@media screen and (max-width: 767px) { .products dt { font-size: 1.9rem; padding-left: 40px; margin-bottom: 10px; } }
.products dt::before { content: ""; display: block; position: absolute; top: 5px; left: 10px; background: #EA6000; transform: skewX(-30deg); }
@media print, screen and (min-width: 768px) { .products dt::before { width: 18px; height: 30px; } }
@media screen and (max-width: 767px) { .products dt::before { width: 15px; height: 25px; } }
.products dt span { display: inline-block; line-height: 130%; vertical-align: middle; border: solid 1px white; padding: 5px; }
@media print, screen and (min-width: 768px) { .products dt span { font-size: 1.4rem; margin-left: 30px; } }
@media screen and (max-width: 767px) { .products dt span { font-size: 1.1rem; margin-left: 20px; } }

.youtube { margin: 80px auto 60px; }
@media screen and (max-width: 767px) { .youtube { text-align: left; } }
.youtube .bold { font-weight: 700; }
@media print, screen and (min-width: 768px) { .youtube .bold { font-size: 2.1rem; } }
@media screen and (max-width: 767px) { .youtube .bold { font-size: 1.8rem; } }

.btn a { background: #231815; border-radius: 25px; display: flex; align-items: center; justify-content: center; margin: 20px 0 0 auto; color: white; text-decoration: none; }
@media print, screen and (min-width: 768px) { .btn a { height: 50px; } }
@media screen and (max-width: 767px) { .btn a { height: 40px; } }
.btn a::after { content: ""; display: block; }
.btn a:hover { background: #EA6000; }

.btn.arrow a { width: 110px; }
@media screen and (max-width: 767px) { .btn.arrow a { transform: scale(0.8); transform-origin: center right; } }
.btn.arrow a::after { background: url(../img/arrow.svg) no-repeat center; background-size: contain; width: 50px; height: 8px; margin-top: -3px; }

/* division */
.division .contents-title, .division .sec_title span { color: #EA6000; }
.division h4 { color: #EA6000; font-size: 1.8rem; }
@media print, screen and (min-width: 768px) { .division h4 { margin: -30px 0 80px; } }
@media screen and (max-width: 767px) { .division h4 { margin: 10px 0 40px; } }
@media print, screen and (min-width: 768px) { .division .flex-ce img { width: 40%; }
  .division .flex-ce div { width: 50%; } }
.division dt { color: white; background-color: #666; width: 110px; padding: 0 5px; margin-bottom: 20px; }
.division dd { margin-bottom: 50px; }
.division dd span { font-size: 1.2rem; display: block; margin-top: 10px; }
.division .btn { width: 300px; }
.division .btn a::after { content: ""; display: block; background: url(../img/dl.svg) no-repeat; background-size: contain; width: 25px; height: 20px; margin-left: 20px; }

@media print, screen and (min-width: 768px) { .company_pic { background: url(../img/company_pic.jpg) no-repeat center #5051be; background-size: auto 100%; height: 400px; } }
@media screen and (max-width: 767px) { .company_pic { background: url(../img/company_pic_mb.jpg) no-repeat center #5051be; background-size: auto 100%; padding-bottom: 50%; } }

@media print, screen and (min-width: 768px) { .recruit_pic { background: url(../img/recruit_pic.jpg) no-repeat center #8e95ac; background-size: auto 100%; height: 400px; } }
@media screen and (max-width: 767px) { .recruit_pic { background: url(../img/recruit_pic_mb.jpg) no-repeat center #8e95ac; background-size: auto 100%; padding-bottom: 50%; } }

/* company */
.company { background: #666666; color: white; padding: 100px 0 150px; }
.company .flex-ce { margin-bottom: 80px; }
.company .flex-ce .contents-title { padding: 0; }
@media print, screen and (min-width: 768px) { .company .flex-ce div { width: 60%; } }
.company .flex-ce div p { font-size: 1.8rem; }
@media print, screen and (min-width: 768px) { .company .flex-ce .img { width: 27%; text-align: right; } }
@media screen and (max-width: 767px) { .company .flex-ce .img { width: 50%; margin: 40px auto 0; text-align: center; } }
.company .sec_title div::before { background: #666; }
.company table { border-top: solid 1px #999999; border-spacing: 0; width: 100%; margin-bottom: 15px; }
.company th, .company td { text-align: left; vertical-align: top; border-bottom: solid 1px #999999; padding-top: 15px; padding-bottom: 15px; box-sizing: border-box; }
.company th { width: 150px; }
@media screen and (max-width: 767px) { .company table, .company tbody, .company tr, .company th, .company td { display: block; width: 100%; }
  .company tr { padding: 15px 0; border-bottom: solid 1px #999999; }
  .company th, .company td { padding: 0; border: none; }
  .company th { font-weight: 700; margin-bottom: 10px; font-size: 90%; } }

.googlemap { height: 0; overflow: hidden; position: relative; }
@media print, screen and (min-width: 768px) { .googlemap { padding-bottom: 34%; } }
@media screen and (max-width: 767px) { .googlemap { padding-bottom: 100%; } }
.googlemap iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }

/* news */
.top_news { padding-top: 150px; }
.top_news .sec_title span { color: #EA6000; }
.top_news .more a { justify-content: space-between; width: 190px; padding: 0 20px; box-sizing: border-box; }

@media print, screen and (min-width: 768px) { .top_news .news_arc li { width: 30%; min-height: 180px; display: flex; align-items: stretch; }
  .top_news .news_arc li a { padding: 20px 20px 40px; display: block; }
  .top_news .news_arc li a::after { bottom: 20px; right: 20px; margin: 0; }
  .top_news .news_arc li .date { margin-bottom: 10px; }
  .top_news .news_arc li .title { margin-right: 0; } }
.news_arc { align-items: stretch; }
.news_arc li { margin-bottom: 30px; }
.news_arc a { background: #EEEEEE; text-decoration: none; position: relative; box-sizing: border-box; width: 100%; align-items: center; transition: ease .3s; }
@media print, screen and (min-width: 768px) { .news_arc a { display: flex; padding: 50px; }
  .news_arc a:hover { background: #EA6000; } }
@media screen and (max-width: 767px) { .news_arc a { display: block; padding: 5%; } }
.news_arc a::after { content: ""; display: block; background: url(../img/arrow_bk.svg) no-repeat center; background-size: contain; width: 50px; height: 8px; margin-bottom: -4px; }
@media print, screen and (min-width: 768px) { .news_arc a::after { bottom: 50%; right: 50px; position: absolute; } }
@media screen and (max-width: 767px) { .news_arc a::after { margin: 20px 0 0 auto; } }
.news_arc p { line-height: 130%; }
.news_arc .date { font-size: 1.2rem; min-width: 120px; }
@media screen and (max-width: 767px) { .news_arc .date { margin-bottom: 10px; } }
.news_arc .title { font-size: 1.8rem; margin-right: 50px; }

/* recruit */
.recruit { background: #FCEDE4; }
.recruit .sec_title span { color: #EA6000; }
.recruit .sec_title div::before { background: #FCEDE4; }
.recruit p { font-size: 1.8rem; }
.recruit li { background: white; min-height: 180px; display: flex; align-items: stretch; }
@media print, screen and (min-width: 768px) { .recruit li { width: 48%; } }
.recruit li p { text-align: center; }
.recruit li b { display: block; font-size: 2rem; margin-bottom: 20px; }
.recruit a { padding: 20px 20px 40px; text-decoration: none; position: relative; box-sizing: border-box; width: 100%; }
.recruit a::after { content: ""; display: block; position: absolute; background: url(../img/arrow_bk.svg) no-repeat center; background-size: contain; width: 50px; height: 8px; bottom: 20px; right: 20px; }
.recruit a:hover { background: #EA6000; }

/* other_page========================== */
.other_page { padding: 100px 0 0; }
.other_page .sec_title { margin: 0 0 30px; position: static; }
.other_page .sec_title div { margin: 0 0 0 auto; }
.other_page .sec_title span { color: #EA6000; }
.other_page .sec_title::before { display: none; }

/* contact========================== */
.contact .contents-title { font-size: 2rem; }
.contact .tel_ico { width: 45px; height: 45px; background: url(../img/tel_bk.svg) no-repeat center; background-size: contain; margin: 0 auto 30px; }
.contact .mail_ico { width: 45px; height: 35px; background: url(../img/mail_bk.svg) no-repeat center; background-size: contain; margin: 0 auto 30px; }
.contact .tel { padding: 65px 0; border-top: solid 1px #BBBBBB; border-bottom: solid 1px #BBBBBB; text-align: center; }
.contact .tel b { display: block; font-size: 3.6rem; }
.contact .mail { text-align: center; margin-bottom: 70px; }
.contact .mail b { display: block; font-size: 1.6rem; }
.contact .kakunin .btn { margin: 0 20px; }
.contact .kakunin .btn.sp-ma20 { border-radius: 25px; background: #231815; position: relative; }
.contact .kakunin .btn.sp-ma20::before { content: ""; display: block; position: absolute; height: 8px; width: 50px; text-decoration: none; background: url(../img/arrow.svg) no-repeat; background-size: 50px 8px; top: 50%; left: 10%; margin-top: -4px; transform: scale(-1, 1); }
.contact .kakunin .btn.sp-ma20 input { margin: 0; background: transparent; padding-left: 50px; cursor: pointer; }

/* products_page========================== */
.products_page p.contents-title { padding-top: 0; }
.products_page .products_cont { border-top: solid 4px #666666; margin-bottom: 60px; }
.products_page .products_cont .contents-title { padding: 40px 0; padding-left: 45px; position: relative; }
@media print, screen and (min-width: 768px) { .products_page .products_cont .contents-title { font-size: 3rem; } }
@media screen and (max-width: 767px) { .products_page .products_cont .contents-title { font-size: 2.1rem; } }
.products_page .products_cont .contents-title::before { content: ""; display: block; position: absolute; width: 18px; height: 30px; top: 43px; left: 10px; background: #EA6000; transform: skewX(-30deg); }
.products_page .products_cont .contents-title span { font-size: 1.4rem; display: inline-block; line-height: 130%; vertical-align: middle; border: solid 1px #231815; padding: 5px; margin-left: 30px; }
.products_page .products_cont h4 { line-height: 150%; }
@media print, screen and (min-width: 768px) { .products_page .products_cont h4 { font-size: 2.4rem; } }
@media screen and (max-width: 767px) { .products_page .products_cont h4 { font-size: 1.8rem; } }
.products_page .products_cont h5 { font-size: 1.8rem; }
.products_page .products_cont .video_area { max-width: 840px; margin: 60px auto; }
.products_page .products_cont b { background: #666; color: white; display: inline-block; margin-bottom: 20px; padding: 3px 15px; }
.products_page .products_cont .red { color: #C90000; }
.products_page .products_cont .dl, .products_page .products_cont .license { border: solid 1px #707070; padding: 40px; }
.products_page .products_cont .dl a, .products_page .products_cont .license a { color: #0045FF; text-decoration: underline; }
.products_page .products_cont + .products_list { border-top: solid 4px #666666; padding-top: 60px; }
.products_page .products_cont .newtab { width: 290px; }
.products_page .products_cont .newtab a::after { background: url(../img/newtab.svg) no-repeat center; background-size: 100% auto; width: 21px; height: 16px; margin-left: 20px; }

.policy_nav li, .products_list li { display: inline-block; }
@media print, screen and (min-width: 768px) { .policy_nav li, .products_list li { margin-bottom: 15px; margin-right: 15px; } }
@media screen and (max-width: 767px) { .policy_nav li, .products_list li { margin-bottom: 10px; margin-right: 10px; } }
.policy_nav li a, .products_list li a { display: block; border: solid 2px #EA6000; color: #EA6000; border-radius: 25px; }
@media print, screen and (min-width: 768px) { .policy_nav li a, .products_list li a { padding: 5px 15px; }
  .policy_nav li a:hover, .products_list li a:hover { background: #EA6000; color: white; } }
@media screen and (max-width: 767px) { .policy_nav li a, .products_list li a { padding: 2px 10px; font-size: 90%; } }

/**/
.dot li { position: relative; padding-left: 25px; }
.dot li::before { content: ""; display: block; position: absolute; width: 10px; height: 10px; top: 10px; left: 0; background: #666666; border-radius: 50%; }

.num > li { position: relative; list-style: decimal; margin-left: 25px; }
.num > li div.num { padding-left: 25px; position: relative; }
.num > li span.num { display: inline-block; position: absolute; left: 0; }

.video { position: relative; width: 100%; padding-top: 56.25%; }
.video iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

/* news========================== */
.news_single { background: #EEEEEE; }
@media print, screen and (min-width: 768px) { .news_single { padding: 50px 100px; } }
@media screen and (max-width: 767px) { .news_single { padding: 40px 5%; } }
.news_single .date { font-size: 1.2rem; }
@media print, screen and (min-width: 768px) { .news_single .date { margin-bottom: 50px; } }
@media screen and (max-width: 767px) { .news_single .date { margin-bottom: 20px; } }
.news_single .title { font-size: 1.8rem; margin-bottom: 60px; padding-bottom: 60px; border-bottom: solid 1px #666666; }

/* recruit_page========================== */
.recruit_page table { border-spacing: 0; width: 100%; border-top: solid 4px #666666; border-bottom: solid 3px #666666; }
@media print, screen and (min-width: 768px) { .recruit_page table th, .recruit_page table td { padding: 50px 20px; border-bottom: solid 1px #707070; }
  .recruit_page table th { font-weight: 700; text-align: left; width: 150px; } }
@media screen and (max-width: 767px) { .recruit_page table, .recruit_page tbody, .recruit_page tr, .recruit_page th, .recruit_page td { display: block; width: 100%; text-align: left; }
  .recruit_page tr { padding: 15px 0; border-bottom: solid 1px #707070; }
  .recruit_page th, .recruit_page td { padding: 0; border: none; }
  .recruit_page th { font-weight: 700; margin-bottom: 10px; font-size: 90%; } }
.recruit_page .contact { border-bottom: solid 4px #666666; }
.recruit_page .contact .contents-title { padding-top: 0; }
.recruit_page .contact .tel { border: none; }
.recruit_page .contact .btn.arrow a { transform-origin: center; }

.recruit_page .cat, .recruit_form .cat { border: solid 1px #231815; font-size: 2rem; padding: 15px 30px; }
.recruit_page .btn a, .recruit_form .btn a { width: 250px; justify-content: space-around; }

/* recruit_form========================== */
.recruit_form h4 { font-weight: 700; font-size: 2rem; }

/* form_thanks========================== */
.form_thanks p { margin-bottom: 150px; }
.form_thanks .btn a { margin: auto; }

/* policy========================== */
.policy .policy_nav + .contents-title { padding-top: 60px; }
@media print, screen and (min-width: 768px) { .policy .in { padding-left: 25px; } }
@media screen and (max-width: 767px) { .policy .in { padding-left: 5%; } }

.policy_cont { border-top: solid 4px #666666; border-bottom: solid 4px #666666; }
.policy_cont a { color: #0045FF; font-weight: 700; }
.policy_cont .cont { border-bottom: solid 1px #707070; }
@media print, screen and (min-width: 768px) { .policy_cont .cont { padding: 50px 20px; } }
@media screen and (max-width: 767px) { .policy_cont .cont { padding: 40px 5%; } }
.policy_cont dt, .policy_cont b { display: block; font-weight: 700; margin-bottom: 20px; }
.policy_cont .cont:last-child { border: none; }

.privacy_handling dt { font-size: 1.8rem; }