@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
padding-left: 2rem;
}
.row {
box-sizing: border-box;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex: 0 1 auto;
-webkit-box-flex: 0;
flex: 0 1 auto;
-ms-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
.row.reverse {
-ms-flex-direction: row-reverse;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
flex-direction: row-reverse;
}
.col.reverse {
-ms-flex-direction: column-reverse;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
flex-direction: column-reverse;
}
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
padding-right: .5rem;
padding-left: .5rem;
}
.col-xs {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
-webkit-box-flex: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-xs-1 {
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-xs-2 {
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-xs-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-xs-4 {
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-xs-5 {
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-xs-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-xs-7 {
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-xs-8 {
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-xs-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-xs-10 {
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-xs-11 {
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-xs-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-xs-offset-1 {
margin-left: 8.333%;
}
.col-xs-offset-2 {
margin-left: 16.667%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-4 {
margin-left: 33.333%;
}
.col-xs-offset-5 {
margin-left: 41.667%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-7 {
margin-left: 58.333%;
}
.col-xs-offset-8 {
margin-left: 66.667%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-10 {
margin-left: 83.333%;
}
.col-xs-offset-11 {
margin-left: 91.667%;
}
.start-xs {
-ms-flex-pack: start;
-webkit-box-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-xs {
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
}
.end-xs {
-ms-flex-pack: end;
-webkit-box-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-xs {
-ms-flex-align: start;
-webkit-box-align: start;
align-items: flex-start;
}
.middle-xs {
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}
.bottom-xs {
-ms-flex-align: end;
-webkit-box-align: end;
align-items: flex-end;
}
.around-xs {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-xs {
-ms-flex-pack: justify;
-webkit-box-pack: justify;
justify-content: space-between;
}
.first-xs {
-ms-flex-order: -1;
-webkit-box-ordinal-group: 0;
order: -1;
}
.last-xs {
-ms-flex-order: 1;
-webkit-box-ordinal-group: 2;
order: 1;
}
@media only screen and (min-width: 48em) {
.container {
width: 46rem;
}
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
padding-right: 1rem;
padding-left: 1rem;
}
.col-sm {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
-webkit-box-flex: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-sm-1 {
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-sm-2 {
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-sm-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-sm-4 {
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-sm-5 {
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-sm-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-sm-7 {
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-sm-8 {
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-sm-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-sm-10 {
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-sm-11 {
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-sm-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-sm-offset-1 {
margin-left: 8.333%;
}
.col-sm-offset-2 {
margin-left: 16.667%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-4 {
margin-left: 33.333%;
}
.col-sm-offset-5 {
margin-left: 41.667%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-7 {
margin-left: 58.333%;
}
.col-sm-offset-8 {
margin-left: 66.667%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-10 {
margin-left: 83.333%;
}
.col-sm-offset-11 {
margin-left: 91.667%;
}
.start-sm {
-ms-flex-pack: start;
-webkit-box-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-sm {
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
}
.end-sm {
-ms-flex-pack: end;
-webkit-box-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-sm {
-ms-flex-align: start;
-webkit-box-align: start;
align-items: flex-start;
}
.middle-sm {
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}
.bottom-sm {
-ms-flex-align: end;
-webkit-box-align: end;
align-items: flex-end;
}
.around-sm {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-sm {
-ms-flex-pack: justify;
-webkit-box-pack: justify;
justify-content: space-between;
}
.first-sm {
-ms-flex-order: -1;
-webkit-box-ordinal-group: 0;
order: -1;
}
.last-sm {
-ms-flex-order: 1;
-webkit-box-ordinal-group: 2;
order: 1;
}
}
@media only screen and (min-width: 62em) {
.container {
width: 61rem;
}
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
padding-right: 1rem;
padding-left: 1rem;
}
.col-md {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
-webkit-box-flex: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-md-1 {
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-md-2 {
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-md-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-md-4 {
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-md-5 {
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-md-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-md-7 {
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-md-8 {
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-md-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-md-10 {
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-md-11 {
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-md-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-md-offset-1 {
margin-left: 8.333%;
}
.col-md-offset-2 {
margin-left: 16.667%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-4 {
margin-left: 33.333%;
}
.col-md-offset-5 {
margin-left: 41.667%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-7 {
margin-left: 58.333%;
}
.col-md-offset-8 {
margin-left: 66.667%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-10 {
margin-left: 83.333%;
}
.col-md-offset-11 {
margin-left: 91.667%;
}
.start-md {
-ms-flex-pack: start;
-webkit-box-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-md {
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
}
.end-md {
-ms-flex-pack: end;
-webkit-box-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-md {
-ms-flex-align: start;
-webkit-box-align: start;
align-items: flex-start;
}
.middle-md {
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}
.bottom-md {
-ms-flex-align: end;
-webkit-box-align: end;
align-items: flex-end;
}
.around-md {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-md {
-ms-flex-pack: justify;
-webkit-box-pack: justify;
justify-content: space-between;
}
.first-md {
-ms-flex-order: -1;
-webkit-box-ordinal-group: 0;
order: -1;
}
.last-md {
-ms-flex-order: 1;
-webkit-box-ordinal-group: 2;
order: 1;
}
}
@media only screen and (min-width: 75em) {
.container {
width: 71rem;
}
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
padding-right: 1rem;
padding-left: 1rem;
}
.col-lg {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
-webkit-box-flex: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-lg-1 {
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-lg-2 {
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-lg-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-lg-4 {
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-lg-5 {
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-lg-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-lg-7 {
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-lg-8 {
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-lg-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-lg-10 {
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-lg-11 {
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-lg-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-lg-offset-1 {
margin-left: 8.333%;
}
.col-lg-offset-2 {
margin-left: 16.667%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-4 {
margin-left: 33.333%;
}
.col-lg-offset-5 {
margin-left: 41.667%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-7 {
margin-left: 58.333%;
}
.col-lg-offset-8 {
margin-left: 66.667%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-10 {
margin-left: 83.333%;
}
.col-lg-offset-11 {
margin-left: 91.667%;
}
.start-lg {
-ms-flex-pack: start;
-webkit-box-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-lg {
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
}
.end-lg {
-ms-flex-pack: end;
-webkit-box-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-lg {
-ms-flex-align: start;
-webkit-box-align: start;
align-items: flex-start;
}
.middle-lg {
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}
.bottom-lg {
-ms-flex-align: end;
-webkit-box-align: end;
align-items: flex-end;
}
.around-lg {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-lg {
-ms-flex-pack: justify;
-webkit-box-pack: justify;
justify-content: space-between;
}
.first-lg {
-ms-flex-order: -1;
-webkit-box-ordinal-group: 0;
order: -1;
}
.last-lg {
-ms-flex-order: 1;
-webkit-box-ordinal-group: 2;
order: 1;
}
}
 * { 
-webkit-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(//mspooky.com/scripts/boxsizing.htc); 
}
html {
overflow-y: scroll; } .cf:after {
content: "";
display: block;
clear: both;
}
dl dt,
dl dd {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width : auto;
}
.resize img {
max-width: 100vw;
}
.tel-link a:link,
.tel-link a:hover,
.tel-link a:active {
color: #DB5961;
text-decoration: none;
}
.gnav a:link {
color: #fff;
} p {
line-break: strict;
}
body {
font-size: 1.3rem; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-family: "Montserrat", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
line-height: 1.8;
color: #333;
overflow: hidden;
}
h3 {
margin-bottom: 6px;
}
figcaption {
font-size: 1.1rem;
} #wrapper {
margin: 0 auto;
overflow: hidden;
}
.home #wrapper {
margin: 0 auto;
} .inner {
margin: 0 auto;
}
.framebox {
max-width: 1180px;
margin: 0 auto;
padding: 0 .8em;
}
.framebox-c {
max-width: 1180px;
margin: 0 auto;
padding: 20px 0;
background: rgba(255, 255, 255, 0.5);
}
.framebox-w {
max-width: 1180px;
margin: 0 auto;
padding: 0 .8em;
}
.framebox-src {
max-width: 1180px;
margin: 0 auto;
padding: 0 .8em;
background: #fcfcfc;
border: 1px solid #ddd;
padding: 30px;
margin-top: 50px;
margin-bottom: 80px;
}
.framebox-news {
max-width: 980px;
max-width: 880px;
margin: 0 auto;
padding: 30px 1em 20px 1em;
padding: 30px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px 0px 10px -5px #777;
border-radius: 12px;
}
.box1 {
margin: 50px 0 30px 0;
}
.bg-light-grey {
background: #fafafa !important;
}
.frame-line {
border-bottom: 1px solid #eee;
margin-bottom: 50px;
} .head-inner {
max-width: 950px;
margin: 0 auto;
}
.head-info {
margin-bottom: 3em;
}
.h1-head {
width: 300px;
height: 130px;
float: left;
} footer {
background-color: #f7f7f7;
border-top: 1px solid #ccc;
}
#footer-in1 {
max-width: 1100px;
padding: 2em 0;
margin: 0 auto;
}
.footerbg {
background-color: #1b1b1b;
}
#footer-in {
max-width: 1100px;
padding: 2em 10px;
margin: 0 auto;
color: #fff;
text-align: left;
font-size: 1.2rem;
}
#footer-in a {
color: #fff;
text-decoration: none;
}
#footer-in a:hover {
text-decoration: underline;
}
#footer-in li {
font-size: 1.2rem;
}
#copy {
text-align: center;
font-size: 1.1rem;
color: #fff;
text-align: center;
} #global-nav li {
padding: 10px;
} .container-nav {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.inner {
max-width: 1100px;
max-width: 100%;
margin: 0 auto;
}
.inner:after {
content: "";
clear: both;
display: block;
}
.inner a {
text-decoration: none;
}
.inner a {
-webkit-transition: all .3s;
transition: all .3s;
} #top-head {
top: -100px;
position: absolute;
width: 100%;
margin: 100px auto 0;
line-height: 1;
z-index: 999;
background: rgba(255, 255, 255, 0.2);
}
#top-head a,
#top-head {
font-weight: lighter;
text-decoration: none;
}
#top-head .inner {
position: relative;
}
#top-head .logo {
float: left;
font-size: 22px;
background: #fff;
padding: 10px;
}
.logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.logo img {
margin-right: 5px;
padding-bottom: 5px;
}
.headlogo img {
max-width: 250px;
width: 100%;
background: #fff;
padding: 20px;
-webkit-box-shadow: 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 2px 3px rgba(0, 0, 0, 0.1);
}
#global-nav ul {
list-style: none;
position: absolute;
right: 0;
bottom: 18px;
font-size: 14px;
}
#global-nav ul li {
float: left;
}
#global-nav ul li a {
padding: 10px 5px;
}
#nav-contact {
margin-right: 10px;
margin-left: 10px;
padding: 5px 0;
}
#nav-contact a {
color: #fff;
} .snip1135 a {
padding: 0.5em 0;
color: rgba(255, 255, 255, 0.5);
position: relative;
letter-spacing: 1px;
text-decoration: none;
}
.snip1135 a:before,
.snip1135 a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1135 a:before {
bottom: 0;
display: block;
height: 1px;
width: 0%;
content: "";
background-color: #fff;
}
.snip1135 a:after {
left: 0;
top: 0;
padding: 0.5em 0;
position: absolute;
content: attr(data-hover);
color: #ffffff;
white-space: nowrap;
max-width: 0%;
overflow: hidden;
}
.snip1135 a:hover:before,
.snip1135 .current a:before {
opacity: 1;
width: 100%;
}
.snip1135 a:hover:after,
.snip1135 .current a:after {
max-width: 100%;
} #top-head.fixed {
margin-top: 0;
top: 0;
position: fixed;
color: #333;
background: rgba(2, 23, 37, 0.9);
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo-t {
color: #333;
}
#top-head.fixed ul li a {
padding: 8px 0;
}
.link a {
color: #fff !important;
}
#global-nav ul li a {
color: #fff;
}
.gnav a {
color: #fff;
} #nav-toggle {
display: none;
position: absolute;
right: 20px;
top: 14px;
width: 24px;
height: 36px;
cursor: pointer;
z-index: 101;
}
#nav-toggle div {
position: relative;
}
#nav-toggle span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #ccc;
left: 0;
-webkit-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 11px;
}
#nav-toggle span:nth-child(3) {
top: 22px;
} @media screen and (max-width: 1000px) {
#top-head,
.inner {
width: 100%;
padding: 0;
}
#top-head {
top: 0;
position: fixed;
margin-top: 0;
} #top-head.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
background: rgba(2, 23, 37, 0.96);
width: 100%;
z-index: 999;
position: relative;
}
#top-head.fixed .logo,
#top-head .logo {
position: absolute;
left: 13px;
top: 13px;
font-size: 26px;
} #global-nav-bk {
position: absolute;
top: -505px;
background: rgba(2, 23, 37, 0.96);
width: 100%;
text-align: center;
padding: 10px 0;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
} #global-nav {
top: -505px;
position: fixed;
background: rgba(2, 23, 37, 0.96);
width: 100%;
height: 100%;
text-align: center;
padding: 10px 0;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
visibility: hidden;
}
#global-nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 14px;
}
#global-nav ul li {
float: none;
position: static;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
padding: 16px 0;
font-size: 1.6rem;
}
#top-head #global-nav ul li a:hover,
#top-head.fixed #global-nav ul li a:hover {
color: #fff;
}
#nav-toggle {
display: block;
} .open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
transform: rotate(-315deg);
} .open #global-nav { -webkit-transform: translateY(556px);
transform: translateY(556px); visibility: visible;
}
} @media screen and (max-width: 768px) {
.SPnone {
display: none;
}
#g-nav {
display: none;
}
.slicknav_menu {
display: block;
}
}  @media only screen and (min-width:1000px) {
#main-cont {
margin: 0 auto;
background-color: #fff;
padding-top: 1em;
padding-bottom: 80px;
}
#main-in {
width: 980px;
margin: 0 auto;
}
}
@media only screen and (max-width:999px) {
#main-cont {
width: 100%;
margin: 0 auto;
background-color: #fff;
padding-top: 1em;
padding-bottom: 20px;
}
#main-in {
width: 98%;
margin: 0 auto;
}
}
p a:link,
h3 a:link {
color: #333;
padding: 3px;
}
p a:visited,
h3 a:visited {
color: #545454;
padding: 3px;
text-decoration: none;
}
p a:hover,
h3 a:hover {
padding: 3px;
color: #545454;
text-decoration: none;
opacity: 0.6;
}
.link-txt a:link {
text-decoration: dashed !important;
color: #e46300 !important;
border-bottom: 1px solid #e46300 !important;
} .fuwatAnime {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-name: fuwatAnime;
animation-name: fuwatAnime;
visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fuwatAnime {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
} .f-orange {
color: #ec6941;
}
.f-red {
color: #f03030;
}
.f-pink {
color: #f06292;
}
.f-pink2 {
color: #e5004f;
}
.f-aomura {
color: #4263c3;
}
.f-lp {
color: #9575cd;
}
.f-eme {
color: #00a5a1;
}
.f-eme-lt {
color: #04cac5;
}
.f-blue {
color: #1961AD;
}
.redb {
color: #E60012;
font-weight: bold;
}
.red {
color: #E60012;
}
.nav-g {
color: #7c7c7c
}
.yellowline-ev {
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), color-stop(0%, #fff799));
background: linear-gradient(transparent 40%, #fff799 0%);
}
.box {
margin-bottom: 10px;
overflow: hidden;
}
.pshadow {
-webkit-box-shadow: 2px 2px 5px 1px #d9cbf3;
box-shadow: 2px 2px 5px 1px #d9cbf3;
}
.p-5 {
padding: 5px;
}
.p-10 {
padding: 10px;
}
.p-12 {
padding: 12px;
}
.p-20 {
padding: 20px;
}
.p-t10 {
padding-top: 10px;
}
.p-t30 {
padding-top: 30px;
}
.p-t40 {
padding-top: 40px;
}
.p-t50 {
padding-top: 50px;
}
.p-t80 {
padding-top: 80px;
}
.m-t10 {
margin-top: 10px;
}
.m-t20 {
margin-top: 20px;
}
.m-t30 {
margin-top: 30px;
}
.m-r6 {
margin-right: 6px;
}
.m-r10 {
margin-right: 10px;
}
.m-l1r {
margin-left: 1rem;
}
.m-l12 {
margin-left: 12px;
}
.m-l20 {
margin-left: 20px;
}
.m-l40 {
margin-left: 40px;
}
.m-b5 {
margin-bottom: 5px;
}
.m-b8 {
margin-bottom: 8px;
}
.m-b12 {
margin-bottom: 12px;
}
.m-b20 {
margin-bottom: 20px;
}
.m-b24 {
margin-bottom: 24px;
}
.m-b30 {
margin-bottom: 30px;
}
.m-b36 {
margin-bottom: 36px;
}
.m-b50 {
margin-bottom: 50px;
}
.m-b40 {
margin-bottom: 40px;
}
.m-b60 {
margin-bottom: 60px;
}
.m-b80 {
margin-bottom: 80px;
}
.m-b100 {
margin-bottom: 100px;
}
.m-b150 {
margin-bottom: 150px;
}
.m-b200 {
margin-bottom: 200px;
}
img.aligncenter {
text-align: center;
margin: 0 auto;
display: block;
}
.alignleft {
margin-bottom: 20px;
}
.alignleft img {
max-width: 100%;
width: 100%;
margin: 0 auto;
}
.alignright {
margin-bottom: 20px;
float: right;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
margin: 0 auto;
}
.fl-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.fl-top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: top;
-ms-flex-align: top;
align-items: top;
}
.fl-top-bt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: top;
-ms-flex-align: top;
align-items: top;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.img160 {
max-width: 160px;
}
.img200 {
max-width: 200px;
}
.img400 {
max-width: 400px;
width: 100%;
}
.img450 {
max-width: 450px;
width: 100%;
}
.border-b {
border-bottom: 3px solid #4986c5;
}
.border-pu {
border-bottom: 3px solid #556fb5;
}
.border-eme {
border-bottom: 3px solid #13b5b1;
}
.border-ora {
border-bottom: 3px solid #f39800;
}
.wakuBlu {
background: #2183d0;
color: #fff;
padding: 8px;
margin-right: 5px;
font-size: 1.2rem;
}
.wakuEme {
background: #00bfa5;
color: #fff;
padding: 8px;
margin-right: 5px;
}
.font9 {
font-size: .9rem;
}
.font10 {
font-size: 1.0rem;
}
.font11 {
font-size: 1.1rem;
}
.font12 {
font-size: 1.2rem;
}
.font13 {
font-size: 1.3rem;
}
.font14 {
font-size: 1.4rem;
}
.font15 {
font-size: 1.5rem;
}
.font16 {
font-size: 1.6rem;
}
.font17 {
font-size: 1.7rem;
}
.font18 {
font-size: 1.8rem;
}
.font19 {
font-size: 1.9rem;
}
.font20 {
font-size: 2.0rem;
}
.font21 {
font-size: 2.1rem;
}
.font22 {
font-size: 2.2rem;
}
.font23 {
font-size: 2.3rem;
}
.font24 {
font-size: 2.4rem;
}
.font26 {
font-size: 2.6rem;
}
.font28 {
font-size: 2.8rem;
}
.m-w260 {
max-width: 260px;
} @media screen and (min-width: 481px) {
body {
font-size: 1.6rem;
line-height: 1.8;
}
.headlogo img {
max-width: 280px;
}
#f-nav {
padding: 1em 0;
font-size: 1.4rem;
}
#f-nav ul {
display: table;
margin: 0 auto;
width: 100%;
}
#f-nav a {
text-decoration: none;
color: #fff;
}
#f-nav li {
text-align: center;
border-left: 1px solid #fff;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 12.5%;
font-size: 1.3rem;
padding: 0;
}
#f-nav li:first-child {
border-left: none;
}
}
@media only screen and (min-width: 640px) {
.h1-head {
width: 300px;
height: 130px;
float: left;
}
}
@media only screen and (max-width: 641px) {
.h1-head {
float: none;
text-align: center;
width: 100%;
margin-bottom: 10px;
}
footer address {
margin-left: 10px;
}
} @media only screen and (min-width: 768px) {
#g-nav ul {
max-width: 1000px;
margin: 0 auto;
}
.head-inner {
position: relative;
}
.h1-head {
position: absolute;
left: 0;
}
.head-info {
position: absolute;
right: 0;
bottom: 10px;
}
#f-nav ul {
width: 75%;
}
#copy {
padding-top: 10px;
}
.alignleft {
margin-bottom: 20px;
float: left;
}
.container {
margin: 0 auto;
background: rgba(255, 255, 255, 0.1);
}
.framebox {
max-width: 1180px;
margin: 0 auto;
padding: 50px 0;
}
.box1 {
margin: 50px 0;
}
}   .cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
} @media screen and (max-width: 768px) {
.SPnone {
display: none;
}
}
@media screen and (min-width: 768px) {
.PCnone {
display: none;
}
}  .cat-item.cat-item-2 {
display: none;
}
.searchandfilter input {
color: #333;
padding: 8px 20px;
border: none;
border: 1px solid #ccc;
}
.searchandfilter li {
list-style: none;
display: inline-block;
padding-right: 10px;
padding-bottom: 10px;
margin-bottom: 5px;
}
.cat-item {
padding: 8px 10px;
}
 #slide-area {
margin: 0 auto;
}
#slider {
height: 320px;
}
#slider img {
height: 320px;
max-width: 960px;
}
.background-image figure img {
left: 50%;
position: absolute;
top: 50%;
max-width: 450px;
width: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.background-image figure {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 550px;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.background-image img {
width: 100%;
}
.background-image figure.figure-slide-01 {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/slide/01sp.jpg);
width: 100%;
}
.background-image figure.figure-slide-02 {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/slide/02sp.jpg);
width: 100%;
}
.background-image figure.figure-slide-03 {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/slide/03sp.jpg);
width: 100%;
} .heading-cont01 {
color: #333333;
text-align: center;
font-size: 1.8em;
}
.heading-cont01:first-letter {
color: #2589d0;
font-size:  2.2em;
} h1 {
position: relative;
padding: 0 .4em .1em;
}
h2 {
font-size: 2.4rem;
margin: 6px 0;
}
h3 {
font-size: 2rem !important;
margin: 6px 0;
}
h4 {
font-size: 1.8rem !important;
margin: 6px 0;
}
h5 {
font-size: 1.6rem !important;
margin: 6px 0;
}
h2.ind-cont01 img {
max-width: 240px;
}
h2.ind-cont02 {
text-align: center;
color: #f06292;
margin-bottom: 40px;
}
h1.ind-cont02 {
text-align: center;
color: #f06292;
color: #545454;
margin-bottom: 40px;
font-size: 2rem;
}
h2.ind-cont03 {
text-align: center;
}
h2.ind-cont03 img {
max-width: 350px;
width: 100%;
padding: 10px;
}
p.ind-tt {
text-align: left !important;
font-size: 1.6rem;
margin-bottom: 20px;
}
@media screen and  (min-width: 768px) {
p.ind-tt {
text-align: center !important;
}
}
h4 {
position: relative;
font-size: 1.6rem;
//font-weight: normal;
}
h5.ind-servise {
color: #f06292;
text-align: center;
font-size: 1.8rem;
padding: 24px 0 10px 0;
font-weight: normal;
}
.main-bg {
background: #fff;
overflow: hidden;
}
h3.ind img {
max-width: 190px;
margin-bottom: 20px;
} p.top {
color: #31004a;
font-size: 1.8rem;
margin-bottom: 24px;
} .gutters .top-news {
width: 38%;
float: right;
}
.news-box {
overflow: auto;
height: 210px;
margin-bottom: 12px;
}
.news-date {
border-bottom: dashed #999 1px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 8px 5px;
overflow: auto;
}
.news-day {
font-size: 1.3rem;
}
.news-ti {
font-size: 1.4rem;
margin-left: 12px;
}
.news-link-box {
text-align: right;
} dl.info {
padding: 8px;
border-bottom: 1px solid #eee;
}
dd.info-title {
margin-left: 1em;
}
dl.info a {
text-decoration: none;
color: #545454;
}
dl.info a:hover {
color: #999;
}
dt {
width: 100px;
}
dd {
margin-left: 1em;
padding: 10px;
}
dd.cate {
margin: 3px 1em;
font-size: 1rem;
width: 100px;
}
dd.cate a {
padding: 3px 5px;
border-radius: 4px;
} .news a {
color: #fff;
background: #75768b;
}
.site a {
color: #fff;
//background: #13b5b1;
margin: 3px;
}
.site-shop a {
color: #fff;
background: orange;
} .news-wrapper {
margin: 20px 10px 50px 10px;
}
.news-list__list {
margin-bottom: 24px;
}
.news-list__item {
display: block;
font-size: 14px;
border-bottom: 1px solid #ccc;
padding: 6px 10px;
} .news-list__heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 6px;
margin-bottom: 6px;
}
.news-list__date {
margin-right: 12px;
font-size: 12px;
}
.label-category {
font-weight: bold;
padding: 2px 10px;
background-color: #e8e8e8;
display: block;
text-align: center;
color: #333;
border-radius: 20px;
font-size: 10px;
}
.news-list__label {
margin-right: 20px;
}
.news-list__body {
display: block;
}
.news-list__body a {
color: #545454;
text-decoration: none;
}
.news-list__body a:hover {
text-decoration: underline;
}  @media only screen and (min-width: 768px) {
.news-wrapper {
margin: 50px 10px 60px 10px;
}
.news-list__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
font-size: 14px;
padding: 10px;
}
} @media only screen and (min-width: 768px) {
dl.info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 8px;
border-bottom: 1px solid #eee;
}
} .index-cap {
font-size: 1.5rem;
//line-height:2.4rem; 
}
.top-point img {
margin-bottom: 1em;
}
.top-event img {
margin-bottom: 1em;
} .bg-nayami {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/index/nayami-bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
padding: 120px 0;
}
h2.nayami {
color: #fff;
font-size: 1.8rem;
text-align: center;
padding: .1em 0;
position: relative;
padding: .5em .75em;
background-color: #13b5b1;
max-width: 600px;
margin: 0 auto;
}
h2.nayami::after {
position: absolute;
top: 100%;
left: 50%;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #13b5b1;
}
h2.soudan {
font-size: 2.2rem;
padding: 60px 0 10px 0;
}
h6.b-tt {
text-align: left;
font-size: 1.5rem;
}
h6.eme-tt {
text-align: center;
font-size: 1.5rem;
color: #333;
}
h6.eme-tt {
margin: 0 auto;
position: relative;
margin-bottom: 2.2em;
color: #0a9b97;
}
h6.eme-tt:before {
content: '';
position: absolute;
bottom: -10px;
width: 80px;
height: 3px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #0a9b97;
}
.denpako {
background: #fee0d6;
text-align: center;
}
.webkoB {
background: #c6e0fb;
text-align: center;
}
.webkoY {
background: #f6f7a8;
text-align: center;
}
.kamikoP {
background: #ffcbdc;
text-align: center;
}
.kamikoG {
background: #b3e1e0;
text-align: center;
}
.orikoP {
background: #e7e6f5;
text-align: center;
}  .eme-btn {
background-color: #1abc9c;
color: #fff;
text-align: center;
font-size: 1.8rem;
padding: 20px 30px;
border-radius: 50px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 3px 0 #0e8c73;
box-shadow: 0 3px 0 #0e8c73;
-webkit-transition: none;
transition: none;
max-width: 450px;
font-weight: bold;
}
.eme-btn:hover {
background-color: #31c8aa;
-webkit-box-shadow: 0 3px 0 #23a188;
box-shadow: 0 3px 0 #23a188;
}
.eme-btn:active {
top: 3px;
-webkit-box-shadow: none;
box-shadow: none;
} .bule-btn {
background-color: #5696d9;
color: #fff;
text-align: center;
font-size: 1.8rem;
padding: 20px 30px;
border-radius: 50px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 3px 0 #373a73;
box-shadow: 0 3px 0 #6f7195;
-webkit-transition: none;
transition: none;
max-width: 450px;
}
.bule-btn:hover {
background-color: #286eb6;
-webkit-box-shadow: 0 3px 0 #6f7195;
box-shadow: 0 3px 0 #6f7195;
}
.bule-btn:active {
top: 3px;
-webkit-box-shadow: none;
box-shadow: none;
} .red-btn {
background-color: #ef5350;
color: #fff;
text-align: center;
font-size: 1.8rem;
padding: 20px 40px;
border-radius: 6px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 3px 0 #a61c19;
box-shadow: 0 3px 0 #a61c19;
-webkit-transition: none;
transition: none;
max-width: 450px;
font-weight: bold;
}
.red-btn:hover {
background-color: #ec3131;
-webkit-box-shadow: 0 3px 0 #a61c19;
box-shadow: 0 3px 0 #a61c19;
}
.red-btn:active {
top: 3px;
-webkit-box-shadow: none;
box-shadow: none;
} .pink-btn {
background-color: #f06292;
color: #fff;
text-align: center;
font-size: 1.8rem;
padding: 20px 40px;
border-radius: 30px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 3px 0 #c8265d;
box-shadow: 0 3px 0 #c8265d;
-webkit-transition: none;
transition: none;
max-width: 400px;
font-weight: bold;
}
.pink-btn:hover {
background-color: #d66189;
-webkit-box-shadow: 0 3px 0 #c8265d;
box-shadow: 0 3px 0 #c8265d;
}
.pink-btn:active {
top: 3px;
-webkit-box-shadow: none;
box-shadow: none;
} .pinkline-btn {
position: relative;
z-index: 2;
background-color: #fff;
border: 2px solid #f06292;
border-radius: 50px;
color: #f06292;
line-height: 30px;
padding: 8px 30px;
overflow: hidden;
font-size: 1.6rem;
}
.pinkline-btn:hover {
color: #fff;
}
.pinkline-btn::after {
left: -100%;
width: 100%;
height: 100%;
}
.pinkline-btn:hover::after {
top: 0;
left: 0;
background-color: #f06292;
} .works-btn a {
color: #fff !important;
}
.works-btn {
display: inline-block;
//max-width: 200px;
width: 100%;
padding: 12px 30px;
text-align: center;
text-decoration: none;
outline: none;
border-radius: 3px;
}
.works-btn::before,
.works-btn::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.works-btn,
.works-btn::before,
.works-btn::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.works-btn {
background-color: #75768b;
color: #fff;
}
.works-btn:hover {
background-color: rgba(6, 53, 84, 1);
color: #fff !important;
}
.linearrow {
text-align: center;
position: relative;
padding: .5em;
background-color: #13b5b1;
margin: 0 auto;
}
.linearrow::after {
position: absolute;
top: 100%;
left: 47%;
content: '';
width: 0;
height: 0;
border: 20px solid transparent;
border-top: 15px solid #13b5b1;
}
.area {
border: 1px solid #545454;
padding: 20px;
}
h5.ind-nayami {
color: #000;
text-align: left;
font-size: 1.6rem;
padding: 10px 0 10px 0;
}
.box-nayami {
background: #fff;
padding: 12px;
border: 1px solid #13b5b1;
min-height: 160px;
border-radius: 20px;
}
.nayami-tt {
font-size: 1.4rem;
padding: 10px 10px 16px 20px;
line-height: 2.4rem;
}
.bg-dotted {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/index/bg-dot1000.gif);
background-position: center;
padding: 60px 0;
}
h2.ind-title03 {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/index/03-work.jpg);
background-repeat: no-repeat;
background-size: 60px;
color: #f06292;
padding: 15px 0 15px 70px;
font-weight: normal;
margin-bottom: 24px;
}
h2.ind-title04 {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/index/04-news.jpg);
background-repeat: no-repeat;
background-size: 60px;
color: #f06292;
padding: 15px 0 15px 70px;
font-weight: normal;
margin-bottom: 24px;
} .ad-bg {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/index/ad-bg.gif);
padding: 60px 0;
}
.ad-bg2 {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/index/ad-bg2.gif);
padding: 60px 0;
}
.ad-box {
max-width: 550px;
margin: 0 auto;
margin-bottom: 30px;
}
.ad-box2 {
margin: 0 auto;
margin-bottom: 30px;
margin-top: -130px;
}
.ad-ttbox {
margin: 0 auto;
background: #f06292;
padding: 14px;
color: #fff;
font-weight: bold;
font-size: 1.5rem;
max-width: 450px;
}
.pink-bgy {
background: #fff799;
color: #f06292;
padding: 0 5px;
margin: 0 5px;
} .newsboxL {
margin: 0 auto;
margin-bottom: 20px;
padding: 0 10px;
float: left;
width: 100%;
max-height: 500px;
}
.newsbox {
//border: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
padding: 16px;
}
.newsbox-Rt {
text-align: left;
}
.box1-fl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} .swiper-container {
text-align: center;
}
.swiper-container .swiper-slide img {
max-width: 100%;
height: auto;
}
.prettyprint {
border: none;
background: #fafafa;
color: #697d86;
}
.swibox {
padding: 10px;
margin-bottom: 30px;
}
.swibox img {
border: 1px solid #dcdcdc;
margin: 10px 0;
}
a.swiboxlink:link,
a.swiboxlink:visited {
color: #222 !important;
text-decoration: none;
}
.swiper-pagination-bullet {
background-color: #75768b !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
color: #75768b !important;
}
.swiper-container [class^="swiper-button-"] {
color: #75768b !important;
}   .topinfobox {
margin: 0 auto;
font-size: 1.2rem;
width: 100%;
max-height: 140px;
background: #fffacb; color: #333;
line-height: 1.5;
margin-top: -15px;
}
.topinfoin {
padding: 20px 20px 20px 20px;
display: block;
}
.topinfoin a {
text-decoration: none;
}
.topinfoin a:hover {
text-decoration: none;
}
.ti-date {
margin-right: 5px;
font-size: 1.2rem;
}  #topics {
border-left: 3px solid #000;
padding: 0 0 0 16px;
}
@media screen and (max-width:768px) {
#topics {
margin: 0 0 10px 0;
}
}
#topics h2 {
font-size: 2.4rem;
color: #333;
font-weight: bold;
margin-bottom: 0 !important;
}
#topics h2 span.bgLRextend::before {
background: #333;
}
.bx-wrapper {
box-shadow: none;
border: none;
}   .slider li{
padding: 10px 0;
} .slider a {
display: block;
background: #fff;
color: #333 !important;
text-decoration: none;
} .slider time {
display: inline-block;
font-size: 1.2rem;
margin-right: 10px;
color: #777;
} @media screen and (max-width:768px) {
.slider {
padding: 0 10px;
background: #fff;
}
.slider li {
border-bottom: 1px dashed #ccc;
}
.slider li:last-child {
border-bottom: none;
}
.slider time {
display: block;
}
} @media screen and (min-width: 481px) {
#slider {
height: 320px;
background: none;
}
} @media only screen and (min-width: 768px) {
.background-image figure.figure-slide-01 {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/slide/01.jpg);
width: 100%;
}
.background-image figure.figure-slide-02 {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/slide/02.jpg);
width: 100%;
}
.background-image figure.figure-slide-03 {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/slide/03.jpg);
width: 100%;
}
section.news {
padding: 40px 20px;
}
.newsboxL {
margin: 0 auto;
margin-bottom: 20px;
margin-left: 5px;
padding: 0 10px;
float: left;
width: 100%;
max-width: 530px;
max-width: 49%;
}
h2.nayami {
color: #fff;
font-size: 2.6rem;
text-align: center;
padding: .1em 0;
position: relative;
padding: .5em .75em;
background-color: #13b5b1;
max-width: 600px;
margin: 0 auto;
}
h2.nayami::after {
position: absolute;
top: 100%;
left: 50%;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #13b5b1;
}
h6.b-tt {
text-align: center;
font-size: 1.8rem;
}
h6.eme-tt {
text-align: center;
font-size: 1.8rem;
color: #333;
}
.topinfoin {
font-size: 1.2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ti-date {
margin-right: 10px;
font-size: 1.4rem;
}
.ti-tt {
margin-right: 10px;
font-size: 1.4rem;
}
.news-list__date {
margin-right: 20px;
font-size: 14px;
}
} @media only screen and (max-width: 768px) {
.topeve img {
margin: 0 auto;
max-width: 100%;
margin-top: 12px;
}
}
  .top-image {
display: none;
}
.h2-page img {
vertical-align: bottom;
padding-right: 20px;
}
.toptitle-ka {
color: #fff;
font-size: 2.4rem !important;
font-weight: normal;
text-align: center;
padding: .1em 0;
text-shadow: 2px 2px 3px #616161;
line-height: 1.1;
}
.toptitle-s-ka {
color: #fff;
font-size: 1.4rem !important;
font-weight: normal;
text-align: center;
margin-bottom: 10px;
text-shadow: 2px 2px 3px #616161;
text-shadow: 2px 2px 3px #333;
}
.bg-nayami {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/index/nayami-bg2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 60px 0;
}
h2.nayami {
color: #fff;
font-size: 2rem !important;
text-align: center;
padding: .1em 0;
position: relative;
padding: .5em .75em;
background-color: #13b5b1;
max-width: 600px;
margin: 0 auto;
}
h2.nayami::after {
position: absolute;
top: 100%;
left: 10%;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #13b5b1;
}
h2.nayami-p {
color: #fff;
font-size: 1.8rem !important;
text-align: center;
padding: .1em 0;
position: relative;
padding: .5em .75em;
background-color: #262848;
margin: 0 auto;
line-height: 1.6;
}
@media screen and (min-width: 481px) {
h2.nayami-p {
font-size: 2.2rem !important;
}
}
h2.nayami-p::after {
position: absolute;
top: 100%;
left: 10%;
content: '';
width: 0;
height: 0;
border: 20px solid transparent;
border-top: 15px solid #262848;
}
.h3bg {
background: #1b1b1b;
padding: 10px;
color: #fff;
font-size: 1.6rem;
font-weight: normal;
}
.h3-1 {
text-align: left;
vertical-align: middle;
padding: 8px 12px;
margin-bottom: 30px;
border-left: 5px solid #545454;
border-bottom: 3px solid #eee;
border-right: 3px solid #eee;
font-weight: normal;
font-size: 1.8rem;
background: #fff;
}
.h3-2 {
text-align: right;
vertical-align: middle;
border-bottom: 1px solid #1b1b1b;
padding-bottom: 6px;
margin-bottom: 30px;
}
.h3-3 {
text-align: left;
vertical-align: middle;
padding-bottom: 6px;
margin-bottom: 30px;
background: #1b1b1b;
padding: 10px 24px;
color: #fff;
font-size: 1.8rem;
font-weight: normal;
}
.h3-top {
font-size: 1.6rem;
} .junbi {
min-height: 400px;
}
.junbi img {
max-width: 280px;
}
.inner {
font-size: 2.4rem;
font-weight: bold;
color: #333;
vertical-align: middle;
}
.kasotp {
padding: 30px 10px;
text-align: center;
}
.kasotp img {
max-width: 100%;
height: auto;
width : auto;
}
.bgw-r {
background: #fff;
border-radius: 15px;
padding: 10px;
}
.bgy-r {
background: #fcf8d9;
border-radius: 15px;
padding: 20px;
}
.breadcrumb-area-bg {
background: #f4f4f4;
background: #fff;
}
.breadcrumb-area {
color: #858585;
padding: 10px 0;
font-size: 1.1rem;
}
.breadcrumb-area a {
color: #858585;
margin: 0 5px;
text-decoration: none;
}
.breadcrumb-area a:hover {
text-decoration: underline;
} .bg-gaiyo {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/service/bg2.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 100px 0 20px 0;
}
.top-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px 0;
}
.top-btn-w {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px 0;
font-size: 1.1rem;
overflow: scroll;
}
.top-btn-w a {
color: #545454;
}
.wcBtn {
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px;
text-align: center;
padding: 0.75em;
-webkit-transition: all .3s;
transition: all .3s;
}
.wcBtn:hover {
border: 1px solid #6975dd;
color: #6975dd;
}
.CnavBg {
background: #F8F9FA;
padding: 10px 0;
} .button-4 {
width: 120px;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
float: left;
text-align: center;
cursor: pointer;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
margin: 0 0 0 20px;
background: #fff;
}
.button-4 a {
color: #34495e;
text-decoration: none;
line-height: 40px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.eff-4 {
width: 120px;
height: 40px;
left: -120px;
background: #2183D0; background: #7E67C5; position: absolute;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 1;
}
.button-4:hover .eff-4 {
left: 0;
}
.button-4:hover a {
color: #fff;
}  .accbox {
padding: 0;
max-width: 400px; max-width: 100%; } .accbox label {
display: block;
margin: 1.5px 0;
padding: 13px 12px;
color: #545454;
background: #cff1ff;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
} .accbox label:before {
content: '\f055';
font-family: 'Font Awesome 5 Pro';
font-weight: 300;
padding-right: 5px;
}
.accbox label:hover {
background: #cff1ff;
color: #545454;
}
.accbox input {
display: none;
} .accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.cssacc:checked+label+.accshow {
height: auto;
padding: 5px;
opacity: 1;
}
.accbox .accshow p {
margin: 0.75em
}
.cssacc:checked+label:before {
content: '\f078';
}
.top-btn a {
color: #535353;
text-decoration: none;
}
.top-btn a:hover {
color: #8f8f8f;
}
.srv-topbox {
background: #13b5b1;
color: #fff;
padding: 20px;
}
.srv-topboxIn {
padding: 20px 10px;
}
h1.navy {
color: #fff;
background: #262848;
margin: 0 auto;
text-align: center;
padding: 26px 10px;
font-size: 2rem;
}
h1.black {
color: #fff;
background: #1b1b1b;
margin: 0 auto;
text-align: center;
padding: 26px 10px;
font-size: 2rem;
} h1.flow {
color: #556fb5;
margin: 0 auto;
text-align: center;
padding: 30px 10px 30px 10px;
font-size: 2rem;
}
.midasi {
margin: 0 auto;
padding: 30px 10px 20px 10px;
font-size: 2.4rem;
}
h2.flo-count {
text-align: center;
color: #556fb5;
font-size: 3rem;
margin-bottom: 20px;
}
.flo-countL {
border-bottom: 3px solid #bdcfff;
}
h2.flo {
color: #fff;
font-size: 1.6rem !important;
line-height: 1.4;
border-radius: 3px;
text-align: center;
position: relative;
padding: 1em .75em;
margin: 0 auto;
background: #0078ca;
background: linear-gradient(135deg, #0078ca 0%, #b3b6ed 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078ca', endColorstr='#b3b6ed', GradientType=1);
}
h2.flo::after {
position: absolute;
top: 100%;
left: 20px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #0D7CCD;
}
h2.jun {
color: #333;
font-size: 2rem;
text-align: center;
padding: .3em .75em;
margin: 50px auto;
}
.flowcount img {
display: block;
text-align: center;
margin: 0 auto;
max-width: 34px;
margin-bottom: 20px;
margin-top: 20px;
} h2.works {
color: #545454;
font-size: 1.7rem;
line-height: 1.4;
border-radius: 3px;
text-align: center;
position: relative;
padding: .6em .75em;
margin: 0 auto;
border-top: 3px solid #eb9eb8;
border-bottom: 3px solid #eb9eb8;
background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 4px, #fef2f6 4px, #fef2f6 8px);
background: repeating-linear-gradient(-45deg, #fff, #fff 4px, #fef2f6 4px, #fef2f6 8px);
}
h2.works::after {
position: absolute;
top: 100%;
left: 49%;
content: '';
width: 0;
height: 0;
border: 15px solid transparent;
border-top: 15px solid #eb9eb8;
}
h2.works2 {
color: #555;
font-size: 1.8rem;
text-align: center;
font-weight: normal;
margin-bottom: 40px;
}
.cat-child {
color: #555;
} .single4box {
border: 1px solid #333;
}
.single4box1 {
background: #333;
padding: 10px;
text-align: center;
color: #fff;
} table.table01 {
width: 100%;
border-right: #999 solid 1px;
border-collapse: collapse;
margin-bottom: 30px;
}
table.table01 thead th {
background: #333;
color: #FFF;
padding: 15px 15px;
border-right: #FFF solid 1px;
border-bottom: #FFF solid 1px;
font-weight: normal;
text-align: left;
}
table.table01 thead th:last-child {
border-right: #333 solid 1px;
}
table.table01 tbody th {
background: #333;
color: #FFF;
padding: 15px 15px;
border-bottom: #FFF solid 1px;
vertical-align: top;
}
table.table01 tbody tr:last-child th {
border-bottom: #999 solid 1px;
}
table.table01 tbody td {
background: #FFF;
padding: 10px 15px;
border-left: #999 solid 1px;
border-bottom: #999 solid 1px;
border-top: #999 solid 1px;
vertical-align: top;
vertical-align: middle;
}
@media screen and (max-width: 640px) {
table.table01 thead {
display: none;
}
table.table01 tbody th {
display: block;
}
table.table01 tbody td {
display: block;
}
table.table01 tbody td::before {
content: attr(label);
float: left;
clear: both;
font-weight: bold;
}
table.table01 tbody td p {
padding-left: 6em;
}
}
h4.comment {
margin-bottom: 10px;
}
.comment1 {
background: #fff;
padding: 30px;
border-radius: 5px;
margin-bottom: 20px;
border-bottom: 3px solid #eee;
border-right: 3px solid #eee;
font-weight: normal;
}
.comment2 {
background: #fff;
padding: 30px;
border-radius: 5px;
margin-bottom: 20px;
border-bottom: 3px solid #eee;
border-right: 3px solid #eee;
}
h3.flow {
text-align: center;
padding: .5em .75em;
background: #ebf4ff;
;
color: #1575c2;
margin-bottom: 20px;
font-size: 1.7rem !important;
}
h3.flowY {
text-align: center;
padding: .5em .75em;
background: -webkit-repeating-linear-gradient(45deg, #fff799, #fff799 5px, #fff 5px, #fff 10px);
background: repeating-linear-gradient(45deg, #fff799, #fff799 5px, #fff 5px, #fff 10px);
color: #1575c2;
margin-bottom: 20px;
font-size: 1.6rem !important;
}
h3.srv {
text-align: center;
margin-bottom: 20px;
font-weight: normal;
font-size: 2rem;
}
h3.companyB {
font-weight: normal;
font-size: 2rem;
padding-left: 12px;
border-left: 5px solid #0b3f62;
}
h4.company {
font-weight: normal;
font-size: 1.8rem;
//padding-left: 12px;
border-bottom: 1px solid #0b3f62;
}
h3.companyP {
font-weight: normal;
font-size: 2rem;
padding-left: 12px;
border-left: 5px solid #d66189;
}
h3.companyE {
font-weight: normal;
font-size: 2rem;
padding-left: 12px;
border-left: 5px solid #13b5b1;
}
h5.planName {
font-weight: bold;
font-size: 2.4rem;
padding: 20px 10px 10px 10px;
}
.syoki {
color: #fff;
font-size: 1.2rem;
background: #f06292;
padding: 4px;
margin-right: 6px;
}
.planCap-b {
color: #4986c5;
font-size: 1.3rem;
font-weight: bold;
background: #d2e5f7;
padding: 5px;
border-radius: 20px;
text-align: center;
}
.planCap-pu {
color: #556fb5;
font-size: 1.3rem;
font-weight: bold;
background: #dae2f8;
padding: 5px;
border-radius: 20px;
text-align: center;
}
.planCap-eme {
color: #1d9598;
font-size: 1.3rem;
font-weight: bold;
background: #cff6f4;
padding: 5px;
border-radius: 20px;
text-align: center;
}
.planCap-ora {
color: #eb6100;
font-size: 1.3rem;
font-weight: bold;
background: #f6f7a8;
padding: 5px;
border-radius: 20px;
text-align: center;
}
.boxPlan {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/service/bg-price-left.png), url(//mspooky.com/wp/wp-content/themes/web2025/img/service/bg-price-right.png);
background-position: left 0 top 0, right 0 bottom 0;
background-size: 500px, 500px;
background-repeat: no-repeat;
background-color: #ececec;
padding: 80px 0;
}
.boxPlan_flow {
background-color: #fafafa;
padding: 20px 0;
}
@media only screen and (min-width: 768px) {
.boxPlan_flow {
padding: 80px 0;
}
}
.boxPlan1 {
background: #fff;
padding: 20px 20px 10px 20px;
-webkit-box-shadow: 2px 2px 4px 1px #dddddd;
box-shadow: 0px 0px 10px -5px #777;
margin-bottom: 20px;
border-radius: 30px;
}
.boxPlan100 {
background: #fafafa;
padding: 100px 0;
padding: 60px 0;
}
.boxComp {
background: #F8F9FA;
padding: 40px 0;
}
.boxCompIn {
background: #fff;
}
h5.Srvin {
font-weight: bold;
font-size: 1.6rem;
padding: 12px 0;
}
.boxLineB {
border: 12px solid #c6e0fb;
}
.boxLineO {
border: 12px solid #fee0d6;
}
.boxLineY {
border: 12px solid #f6f7a8;
}
.boxLineP {
border: 12px solid #ffcbdc;
}
.boxLineG {
border: 12px solid #b3e1e0;
}
.boxLinePr {
border: 12px solid #e7e6f5;
}
.boxSrv {
background: url(//mspooky.com/wp/wp-content/themes/web2025/img/service/servicebg2.jpg);
background-position: center;
padding: 100px 0;
}
.boxSrvin {
background: #fff;
padding: 26px;
width: 100%;
}
.boxSrvin img {
max-width: 260px;
width: 100%;
}
.Planinbox {
padding: 20px 0;
border-bottom: 1px solid #75768b;
}
.mitsu {
color: #fff;
font-size: 1.3rem;
background: #ff0000;
padding: 4px;
}
h3.yellowBg {
background: #ffee58;
padding: 10px;
border-radius: 26px;
text-align: center;
font-size: 1.8rem;
margin: 40px 0;
}
h3.purple {
background: #d2daf0;
color: #556fb5;
padding: 10px;
text-align: center;
font-size: 1.8rem;
margin: 40px 0 20px 0;
}
h3.pink {
background: #f9e9ed;
color: #f06292;
padding: 10px;
text-align: center;
font-size: 1.8rem;
margin: 40px 0 20px 0;
}
h3.eme {
background: #caf0ec;
color: #05ab94;
padding: 10px;
text-align: center;
font-size: 1.8rem;
margin: 40px 0 20px 0;
}
.graybox {
background: #f1f1f1;
padding: 20px;
}
.bg-gray {
background: #f7f7f7;
}
.outline-b {
margin-bottom: 1.5em;
padding: 0 1em;
font-size: 1.5rem;
line-height: 1.7;
text-indent: 1em;
font-weight: bold;
} .ser-ta {
max-width: 800px;
width: 100%;
text-align: center;
}
.ser-ta th,
.ser-ta td {
padding: 8px;
border: 1px solid #a0a0a0;
}
.emeL {
width: 50%;
background: #caf0ec;
color: #05ab94;
}
.emeD {
width: 50%;
background: #4bb5aa;
color: #fff;
}
.emebg {
background-color: #ebf6f5;
} .btnO1 {
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 50px;
padding: 8px 20px;
outline: none;
border-radius: 50px;
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 20px;
}
.btnO1::before,
.btnO1::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.btnO1,
.btnO1::before,
.btnO1::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btnO1 {
background-color: #ff6737;
border: 2px solid #ff6737;
color: #fff;
line-height: 50px;
}
.btnO1:hover {
background-color: #fff;
border-color: #ff6737;
color: #ff6737;
} .btnO2 {
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 50px;
padding: 8px 20px;
outline: none;
border-radius: 50px;
font-size: 1.6rem;
font-weight: bold;
}
.btnO2::before,
.btnO2::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.btnO2,
.btnO2::before,
.btnO2::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btnO2 {
background-color: #f39800;
border: 2px solid #f39800;
color: #fff;
line-height: 50px;
}
.btnO2:hover {
background-color: #fff;
border-color: #f39800;
color: #f39800;
} .btnO3 {
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 50px;
padding: 4px 20px;
width: 250px;
outline: none;
border-radius: 50px;
font-size: 1.6rem;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px;
}
.btnO3::before,
.btnO3::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.btnO3,
.btnO3::before,
.btnO3::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btnO3 {
background-color: #fff;
border: 2px solid #28c2ad;
color: #28c2ad;
line-height: 50px;
}
.btnO3:hover {
background-color: #28c2ad;
color: #fff;
}
.out-ta {
width: 100%;
}
.out-ta th {
width: 18%;
}
.out-ta th,
.out-ta td {
padding: 8px;
border: 1px solid #333;
}
.out-ta th {
background: #fff100;
font-weight: normal;
}
.eve-ta-bg th {
background: #e3df96;
}
.eve-ta-bg a {
padding-bottom: 3px;
}
.eve-ta-bg a:hover {
color: #7C7C7C;
}
.out-ta th:first-child {
border-top: 1px solid #333;
border-left: 1px solid #333;
font-weight: bold;
} .bg-flow {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/flow/flowbg2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top 50px left 100%;
padding: 100px 0 20px 0;
}
.boxflow {
max-width: 960px;
margin: 0 auto;
margin-bottom: 30px;
}
.boxflow-last {
max-width: 960px;
margin: 0 auto;
margin-bottom: 50px;
}
.flowImg img {
//max-width: 90px;
margin: 0 auto;
} .companyTel{
width: 90%;
}
.companyTel th {
background: #2283d1;
border: solid 1px #ccc;
color: #fff;
padding: 5px;
}
.companyTel td {
border: solid 1px #ccc;
padding: 5px;
}
@media screen and (max-width: 640px) {
.last td:last-child {
border-bottom: solid 1px #ccc;
width: 100%;
}
.companyTel th,
.companyTel td {
border-bottom: none;
display: block;
width: 100%;
}
}
.cTel-num {
text-align: center;
color: #2283d1;
font-size: 2.4rem;
}
.flow-bgeme {
background: #f4f4f4;
padding: 20px;
border-radius: 8px;
}
.flow-bgpin {
background: #f4f4f4;
padding: 20px;
width: 100%;
border-radius: 8px;
} .worksbgG {
//background: #F7F7F7;
}
.bg-works {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/works/bgsp2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top 50px left 100%;
padding: 100px 0 20px 0;
}
.fl-wrap {
display: block;
}
.workBox img {
width: 100%;
}
.workBox {
text-align: center;
margin: 0 auto;
padding: 10px;
width: 100%;
background: #fff;
margin-bottom: 10px;
}
.worktext {
text-align: left;
line-height: 1.6;
color: #545454;
font-size: 1.4rem;
line-height: 1.3;
font-size: 1.26rem;
}
.worktext-s {
font-size: 1.3rem;
color: #999;
}
@media only screen and (min-width:768px) {
.workBox {
min-height: 230px;
margin-bottom: 10px;
}
.worktext{
line-height: 1.3;
font-size: 1.26rem;
}
}
@media only screen and (min-width:970px) {
.workBox {
min-height: 260px;
}
}
.siteurl a {
color: #555 !important;
}
.siteurl a:hover {
color: #999 !important;
} figure.snip1130 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
max-height: 220px;
width: 100%;
background: #000000;
color: #000000;
text-align: left;
margin-bottom: 10px;
}
figure.snip1130 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease-in-out;
transition: all 0.45s ease-in-out;
}
figure.snip1130 img {
max-width: 100%;
position: relative;
opacity: 1;
}
figure.snip1130 figcaption {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
padding: 10px;
z-index: 1;
opacity: 0;
color: #fff;
}
figure.snip1130 h4,
figure.snip1130 p {
margin: 0;
}
figure.snip1130 h4 {
display: inline-block;
letter-spacing: -1px;
text-transform: uppercase;
font-weight: 400;
font-size: 1.7rem;
}
figure.snip1130 h4 span {
font-weight: 800;
}
figure.snip1130 p {
font-size: 0.8em;
} figure.snip1130 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
figure.snip1130.blue {
background: #123851;
}
figure.snip1130.red {
background: #581a14;
}
figure.snip1130.yellow {
background: #7f5006;
}
figure.snip1130.green {
background: #104627;
}
figure.snip1130:hover img,
figure.snip1130.hover img {
opacity: 0.5;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.snip1130:hover figcaption,
figure.snip1130.hover figcaption {
opacity: 0.8;
}
figure.snip1130:hover:after,
figure.snip1130.hover:after {
opacity: 0.8;
}
.webcircle {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
text-align: center;
line-height: 40px;
}
figure.snip1130 h4 a:hover {
color: #000;
} .bread-cate-wrapper {
//background: #F7F7F7;
}
.btn-cate {
display: flex;
justify-content: center;
background: #F2F6F7;
background: #F0F1F3;
margin-bottom: 3rem;
}
.btn-cate-child {
padding: 6px 10px;
margin: 10px;
border-radius: 6px;
font-size: 1.2rem;
background: #fff;
color: #90d5d4;
overflow: hidden;
position: relative;
z-index: 1;
a {
text-decoration: none;
color: #555;
}
a:hover {
::after {
transform: scale(1, 1);
}
}
}
.btn-cate-child::after {
background: #90d5d4;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
transform: scale(0, 1);
transform-origin: left top;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
z-index: -1;
}
.btn-cate-child:hover {
//color: #fff !important;
}
.btn-cate-child:hover::after {
transform: scale(1, 1);
} @media only screen and (max-width:480px) {
.btn-cate2-wrapper {
display: none;
}
}
.btn-cate2-wrapper h2 {
font-size: 1.6rem !important;
background: #019d8e;
color: #fff;
text-align: center;
}
.btn-cate2 {
display: flex;
justify-content: center;
margin-bottom: 3rem;
div {
margin-right: 5px;
}
}
.btn-cate-child2 {
display: block;
padding: 4px 10px;
margin: 6px 0px;
//max-width: 150px;
width: 100%;
border-radius: 6px;
font-size: 1.2rem;
background: #fff;
color: #555;
overflow: hidden;
position: relative;
z-index: 1;
border: 1px solid #ddd;
text-decoration: none;
a {
text-decoration: none;
color: #555;
}
a:hover {
::after {
transform: scale(1, 1);
}
}
}
.btn-cate-child2::after {
background: #90d5d4;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
transform: scale(0, 1);
transform-origin: left top;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
z-index: -1;
}
.btn-cate-child2:hover::after {
transform: scale(1, 1);
}
@media only screen and (min-width:768px) {
.btn-cate2 {
display: block;
div {
margin-right: 0;
}
}
} @media only screen and (max-width:480px) {
.out-ta {
margin: 0;
}
.out-ta th,
.out-ta td {
width: 100%;
display: block;
border-top: none;
}
} table {
margin: 20px auto;
width: 100%;
}
.tbl-opt th {
background: #75768b;
border: solid 1px #ccc;
color: #fff;
padding: 10px;
width: 18%;
}
.tbl-opt td {
border: solid 1px #ccc;
padding: 20px;
}
.tbl-opt2 {
width: 10%;
text-align: center;
background: #dcdcdc;
font-weight: bold;
}
.tbl-opt3 {
width: 10%;
text-align: center;
background: #f1f1f1;
font-weight: bold;
}
.tbl-opt4 {
background: #fff;
}
@media screen and (max-width: 640px) {
.last td:last-child {
border-bottom: solid 1px #ccc;
width: 100%;
}
.tbl-opt {
width: 90%;
}
.tbl-opt td {
border: solid 1px #ccc;
padding: 12px;
}
.tbl-opt th,
.tbl-opt td {
border-bottom: solid 1px #ccc;
display: block;
width: 100%;
}
} .bg-company {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/company/companybg2.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 100px 0 20px 0;
}
.bg-conta {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/company/bg2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
//padding: 50px 0 30px 0;
padding: 100px 0 20px 0;
}
h5.company {
font-size: 1.8rem;
}
table {
margin: 10px auto;
}
.tbl-r02 th {
background: #333;
background: rgba(2, 23, 37, 1);
border: solid 5px #fff;
color: #fff;
padding: 10px;
width: 12%;
}
.tbl-r02 td {
border: solid 5px #fff;
padding: 10px;
}
@media screen and (max-width: 640px) {
.last td:last-child {
border-bottom: solid 1px #ccc;
width: 100%;
}
.tbl-r02 th {
text-align: left;
}
.tbl-r02 th,
.tbl-r02 td {
border-bottom: none;
display: block;
width: 100%;
}
} .column1 {
width: 100%;
height: 260px;
padding: 30px;
background: #fff;
}
.column2 {
width: 100%;
height: 260px;
background: #fff;
}
.mmlogo img {
max-width: 280px;
width: 100%;
margin: 20px 0;
}
@media all and (min-width: 600px) {
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.form {
min-height: 2000px;
}
.form__mms {
min-height: 7000px;
}
h2.link-cont {
text-align: center;
color: #019d8e;
margin-bottom: 40px;
}
.baitai {
padding: 10px;
margin: 0 auto;
text-align: center;
width: 50%;
}
.baitai img {
border: 1px solid #ccc;
margin: 0 auto;
margin-bottom: 5px;
}
.baitaibox {
margin-bottom: 100px;
}
.baitaimei {
text-align: center;
font-size: 1.2rem;
color: #fff;
}
.radio {
background: #eb6100;
padding: 2px;
}
.tv {
background: #d62b28;
padding: 2px;
}
.goo {
background: #ea9813;
padding: 2px;
}
.sun {
background: #e1565e;
padding: 2px;
}
.ori {
background: #3472b9;
padding: 2px;
}
.pos {
background: #0097a7;
padding: 2px;
} .pp {
padding: 10px 10px 0 20px;
}
.pp ul {
list-style: disc;
} .figcaption {
margin-top: 1em;
font-size: .6em;
text-align: center;
}
.figcaption2 {
margin-top: 1em;
font-size: .6em;
text-align: center;
}
.cast-box figure {
margin-bottom: 10px;
}
.cast-imagebox {
margin: 10px auto;
}
.cast-imagebox div {
float: left;
width: 48%;
}
.cast-imagebox div:first-child {
margin-right: 4%;
}  .accbox {
padding: 0;
max-width: 400px; max-width: 100%; margin-top: 8px;
} .accbox label {
display: block;
margin: 1.5px 0;
padding: 13px 12px;
color: #fff;
background: #333;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
} .accbox label:hover {
background: #707070;
color: #fff;
} .accbox input {
display: none;
} .accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
-webkit-transition: 0.8s;
transition: 0.8s;
} .cssacc:checked+label+.accshow {
height: auto;
padding: 5px;
background: #eee;
opacity: 1;
} .cssacc:checked+label:before {
content: '\f078';
}  #sitemap_list a {
color: #222;
}
#sitemap_list a:hover {
color: #666;
}
#sitemap_list li li {
color: #333;
}
.cat-item {
width: 100%
}
#sitemap-list li ul {
margin: 0;
padding: 8px 0 0 0;
}
#sitemap-list li li {
margin: 0 0 5px 15px;
}
#sitemap-list {
margin: 0;
padding: 30px;
line-height: 1.5;
}
#sitemap-list li {
font-size: medium;
text-indent: 0;
padding: 0 0 5px 5px;
margin: 0;
margin-bottom: 1.6rem;
list-style-type: none;
}
#sitemap-list li a {
color: #333;
}
#sitemap-list li a:hover {
color: #999;
}
.children li {
border-bottom: none;
} .txt404 h1 {
margin: 10px 0 20px 0;
}
.erpage img {
margin: 0 auto;
max-width: 350px;
width: 100%;
padding: 20px
} a.photo:link,
a.photo:visited {
color: #fff;
text-decoration: none;
-webkit-transition: all .3s;
transition: all .3s;
}
a.photo:hover {
opacity: 0.8;
color: #fff;
text-decoration: none;
}
a.photo img:hover {
opacity: 0.8;
}
.shadow {
display: inline-block;
color: #fff;
text-align: center;
text-decoration: none;
outline: none;
-webkit-transition: all .3s;
transition: all .3s;
}
.shadow:hover {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.bg-ly {
max-width: 690px;
margin: 0 auto;
background: #fffbda;
border-radius: 15px;
padding: 30px 20px;
margin-top: 60px;
}
.bold {
font-weight: bold;
}
.container-f {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 16px;
}
.container-f2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 16px;
}
.step img {
max-width: 66px;
}
.d-table {
display: table;
margin: 0 auto;
}
.d-table-cell {
display: table-cell;
vertical-align: middle;
}  .pagination {
clear: both;
padding: 20px 0;
font-size: 11px;
line-height: 13px;
left: 50%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.pagination span,
.pagination a {
display: block;
float: left;
margin: 2px 2px 2px 0;
padding: 6px 9px 5px 9px;
text-decoration: none;
width: auto;
color: #fff;
background: #555;
}
.pagination a:hover {
color: #fff;
background: #333;
}
.pagination .current {
padding: 6px 9px 5px 9px;
background: #13B5B1;
color: #fff;
}  .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .nav-previous {
float: left;
} .nav-next {
float: right;
} .nav-previous,
.nav-next {
max-width: 45%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} .category h3 {
font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", "Meiryo", sans-serif;
font-size: 1.4rem;
line-height: 1.6;
margin-bottom: 10px;
}
#archive-main {
background-color: #FFF;
padding: 50px 20px 30px 20px;
}
.archive-box .news-date-box {
font-size: 1.2rem;
margin-bottom: 0.3em;
}
.news-date-box {
color: #999;
}
.archive-box .news-detail-box {
font-size: 1.5rem;
margin-bottom: 1em;
line-height: 150%;
}
.archive-box .news-link-box {
text-align: right;
}
#wrapper .news-link-box a:link,
#wrapper .news-link-box a:visited {
background: #a0a0a0;
background: #333;
padding: 6px;
width: 100px;
font-size: 1.2rem;
color: #fff;
}
.news-all-box {
border-bottom: 1px dotted #333;
padding-bottom: 1em;
margin-bottom: 2em;
}
#wrapper .news-link-box a:hover {
background: #454545;
color: #fff;
}
h2.news-head {
font-size: 3.6rem;
}
#wrapper .pager p a:link {
color: #333;
}
#wrapper .pager p a:visited {
color: #333;
}
#wrapper .pager p a:hover {
color: #333;
} .news-head {
font-size: 1.8rem;
font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", "Meiryo", sans-serif;
padding-bottom: 5px;
border-bottom: 1px solid #BEC8CD;
line-height: 2.2rem;
font-weight: normal;
}
.post-date {
text-align: right;
color: #999;
font-size: 0.9em;
}
.catelink {
margin-bottom: 0.8rem;
}
.catelink a {
color: #576FB5;
border-bottom: 1px dashed #576FB5;
}
.single-cont {
margin-bottom: 100px;
margin-top: 10px;
}
.single-cont p {
font-size: 1.5rem;
line-height: 1.8em;
margin-bottom: 12px;
}
article.single-news-box {
padding: 30px 20px;
background: #fff;
margin: 30px 0;
}
article.single-news-box img {
display: block;
padding: 20px;
margin: 0 auto;
text-align: center;
} #form {
position: relative;
}
#s-box {
height: 40px;
padding: 0 10px;
position: absolute;
left: 0;
top: 0;
border-radius: 2px;
border: solid 3px #eaeaea;
outline: 0;
}
#s-btn-area {
height: 50px;
position: absolute;
left: 250px;
top: 0;
background: none;
color: #666;
border: none;
font-size: 20px;
outline: 0;
}
#s-btn {
background-color: black;
width: 50px;
height: 30px;
position: relative;
right: 20px;
bottom: 10px;
border-radius: 3px;
font-size: 16px;
color: #fff;
line-height: 31px;
} .searchandfilter {
margin: 0 auto;
}
.cat-item {
margin: 0 auto;
display: block;
padding: 8px 10px;
width: 100%;
font-size: 1.2rem;
} .reca {
text-align: center;
}
.reca a {
color: #333;
text-decoration: underline;
}
.reca a:hover {
text-decoration: none;
} .past-cont {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.pastimg {
margin: 0 10px 20px 0;
} @media screen and (min-width: 481px) { .h2-page {
font-size: 3.6rem;
}
.bt-entry p {
width: 70%;
} .goods img {
max-width: 375px;
}
.goodsbox {
margin-left: 20px;
}
} @media only screen and (min-width: 768px) { .top-image {
display: inherit;
margin-bottom: 1em;
}
h1.photo {
line-height: 32px;
font-size: 1.8em;
margin-bottom: 40px;
margin-top: 20px;
}
h1.navy {
color: #fff;
font-size: 2.2rem;
background: #262848;
margin: 0 auto;
text-align: center;
padding: 26px 10px;
}
h1.black {
color: #fff;
font-size: 2.2rem;
background: #1b1b1b;
margin: 0 auto;
text-align: center;
padding: 26px 10px;
}
h1.photored {
line-height: 32px;
color: #e60012;
font-size: 1.6em;
margin-bottom: 30px;
}
h2.photo {
padding: 6px;
color: #fff;
background: #ef7802;
border-radius: 10px;
margin: 20px 0 20px 0;
}
h2.photo-cau {
padding: 6px;
border-bottom: 1px solid #333;
font-size: .9em;
text-align: left;
} .bg-nayami {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/index/nayami-bg.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
padding: 100px 0;
}
h2.nayami-p {
font-size: 1.8rem;
max-width: 1100px;
}
h2.nayami {
font-size: 2.6rem !important;
}
.boxSrv {
background: url(//mspooky.com/wp/wp-content/themes/web2025/img/service/servicebg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
padding: 100px 0;
} h3.yellowBg {
background: #ffee58;
padding: 10px;
border-radius: 26px;
text-align: center;
font-size: 2.2rem;
margin: 40px 0;
}
h3.purple {
background: #d2daf0;
padding: 10px;
text-align: center;
font-size: 2.2rem;
margin: 40px 0;
color: #556fb5;
}
h3.pink {
background: #f9e9ed;
padding: 10px;
text-align: center;
font-size: 2.2rem;
margin: 40px 0;
color: #f06292;
}
h3.eme {
background: #caf0ec;
padding: 10px;
text-align: center;
font-size: 2.2rem;
margin: 40px 0;
color: #05ab94;
}
.fl-srv {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
} .bg-gaiyo {
padding: 100px 0 20px 0;
} .bg-flow {
background-position: top 0 left 0;
padding: 100px 0 20px 0;
}
h2.flo {
color: #fff;
font-size: 2rem !important;
text-align: center;
position: relative;
margin: 0 auto;
padding: 20px;
}
h2.flo-count {
font-size: 3.4rem;
}
.flowImg img {
max-width: 140px;
margin: 0 auto;
} .bg-works {
background-position: top 0 left 0;
padding: 100px 0 20px 0;
}
.top-btn-w {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px 0;
} .bg-conta {
background-image: url(//mspooky.com/wp/wp-content/themes/web2025/img/company/bg2.jpg);
background-repeat: no-repeat;
padding: 100px 0 20px 0;
}
.form {
min-height: 1700px;
}
.form__mms {
min-height: 6400px;
}
.baitai {
width: 20%;
}
.baitaimei {
text-align: left;
} .h3bg {
padding: 10px 24px;
font-size: 1.8rem;
}
.h3bg-l {
background: #1b1b1b;
padding: 10px 60px;
color: #fff;
font-size: 1.8rem;
font-weight: normal;
} .toptitle-ka {
font-size: 3rem !important;
}
.toptitle-end {
color: #fff;
font-size: 2.2rem;
font-weight: normal;
text-align: left;
padding: .1em 0;
margin: 0 auto;
max-width: 1000px;
}
.toptitle-s-ka {
font-size: 1.5rem !important;
margin-bottom: 30px;
}
.bt-entry p {
width: 55%;
}
.category h3 {
font-size: 1.6rem;
}
.archive-box .news-detail-box {
font-size: 1.6rem;
margin-bottom: 1em;
line-height: 150%;
}
.news-head {
font-size: 2.8rem;
font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", "Meiryo", sans-serif;
padding-bottom: 20px;
border-bottom: 1px solid #BEC8CD;
line-height: 2.6rem;
font-weight: normal;
} .figcaption {
margin-top: 1em;
font-size: .6em;
text-align: right;
}
.price {
text-align: left;
}
.pricelong {
text-align: right;
} .fl-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.workBox {
text-align: center;
width: 31%;
margin-right: 10px;
} .cat-item {
margin: 0 auto;
display: block;
padding: 8px 10px;
font-size: 1.2rem;
}
} @media only screen and (max-width: 768px) {} #loading {
width: 100vw;
height: 100vh;
-webkit-transition: all 1s;
transition: all 1s;
background-color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 9999; display: -webkit-box;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}  @-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
.loaded {
opacity: 0;
visibility: hidden;
}
.loader {
color: #86a6e4;
font-size: 90px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
-webkit-box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@-webkit-keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} .zindex100 {
z-index: 100 !important;
position: relative;
}
.context {
width: 100%;
}
.area-mov-circles {
background: #fff;
width: 100%;
position: relative;
padding: 40px 0 60px 0;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1 !important;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(211, 211, 211, 0.5);
background: rgb(202, 223, 236, 0.5);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
//opacity: 0;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
//opacity: 1;
border-radius: 50%;
}
}
 @-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;
} @-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;
} @-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(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 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(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 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, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
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);
}
}
.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;
} @-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;
} @-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: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.delay-025s {
-webkit-animation-delay: 0.25s;
animation-delay:  0.25s;
}
.animated.delay-05s {
-webkit-animation-delay: 0.5s;
animation-delay:  0.5s;
}
.animated.delay-075s {
-webkit-animation-delay: 0.75s;
animation-delay:  0.75s;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-125s {
-webkit-animation-delay: 1.25s;
animation-delay: 1.25s;
}
.animated.delay-15s {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.animated.delay-175s {
-webkit-animation-delay: 1.75s;
animation-delay: 1.75s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-25s {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.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;
}
.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.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;
}
}