@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";

 /*/*//**/body {
font-size: 16px;
font-size: 1.14285714rem;
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
} .l-wrapper {
position:relative;
display: flex;
width:1500px;
max-width:100%;
margin: 0 auto;
} .entry-content {
font-size: 16px;
font-size: 1.14285714rem;
} .h1s {
font-size: 26px;
color: #ffffff; font-weight:700; } .service {
color: #364e96 !important; padding: 0.5em 0; border-top: solid 3px #364e96; border-bottom: solid 3px #364e96; }
.area {
padding: 0.25em 0.5em; color: #494949; background: transparent; border-left: solid 5px #7db4e6; border-top: transparent; border-bottom: transparent; }
.price {
padding: 0.05em 0.05em; color: #fff; background: transparent; border-top: transparent; border-bottom: transparent; }
.price2 {
padding: 0.05em 0.05em; text-align: center; font-size: 1.2rem!important; color: #5b5a5a; border-top: transparent; }
.word {
padding: 0.05em 0.05em; color: #fff; background: transparent; border-top: transparent; border-bottom: transparent; }
h2.top{
padding: 0; position: relative; bottom: -10px;
border-top: none; border-bottom: none; } h7 {
color: #6594e0; border-bottom: dashed 2px #6594e0; }   h5 {
background: transparent; } h4 {
padding: 0.25em 0.5em; color: #494949; background: transparent; border-left: solid 5px #7db4e6; }
.price3{
color:#3366ff;
} h2.contents {
color: #6594e0; border-bottom: dashed 2px #6594e0; } .point1 {
color: #DD0000; text-align:center;
font-size: 50px;
padding: 0 0; border-top: solid 3px #364e96; border-bottom: solid 3px #364e96; }
.point2 {
color: #222222; font-size: 20px;
padding: 0 0; }
.point3 {
color: #FF0033; font-size: 14px;
padding: 0 0; }
@media only screen and (max-width: 500px){ .point1 {
color: #DD0000; text-align:center;
font-size: 25px;
padding: 0.2em 0; border-top: solid 2px #364e96; border-bottom: solid 2px #364e96; }
.point2 {
color: #222222; font-size: 16px;
padding: 0 0; }
.point3 {
color: #FF0033; font-size: 10px;
padding: 0 0; }
} .toppost {
position: relative; bottom: -10px;
} .example { position: relative; background: #fff;
min-height: 100px;
margin-right: calc(((100vw - 100%) / 2) * -1);
margin-left: calc(((100vw - 100%) / 2) * -1);
}
.example p {
position: absolute; color: #130163;
top: 5%;
left: 30%;
padding: 10px;
margin-right: 30px;
}
.example img {
width: 100%;
} .top01 {
box-sizing: border-box;
width: 100%;
background-color: #1da1f2;
text-align: center;
z-index: 140;
} @media only screen and (max-width: 580px){
.step img {
max-width: 50%!important;
height: auto;
}
} .pc { display: block !important; }
.sp { display: none !important; } @media only screen and (max-width: 580px) {
.pc { display: none !important; }
.sp { display: block !important; } .example { position: relative; }
.example p {
color: #130163;
top: 35%;
left: 3%;
}
} @media only screen and (min-width: 580px) {
.cp_offcm01 {
display: none!important;
}
} @font-face {
font-family: 'font_woff';
font-style: normal;
font-weight: 400;
src: url(https://www.suido-service.com/blogss/wp-content/plugins/wc-shortcodes/public/assets/fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2');
font-display: swap;
} @media screen and (max-width: 480px){
.pconly{display:none;}
} .mts{
margin-top: 2em !important;
}
.mtm{
margin-top: 5em !important;
}
.mtl{
margin-top: 9em !important;
}
.mbs{
margin-bottom: 1em !important;
}
.mbm{
margin-bottom: 2em !important;
}
.mbl{
margin-bottom: 5em !important;
}
.heading.heading-page{
font-size:1rem;
line-height:1;
}
.linebtn {
box-sizing: border-box;
width: 42%;
background-color: #00b900;
position: fixed;
bottom: 0px;
text-align: center;
z-index: 150;
left: -20px;
}
.topscreen1 {
box-sizing: border-box;
width: 100%;
background-color: #00b900;
position: fixed;
bottom: 100px;
text-align:center;
z-index: -1;
}
.tap a {
display:block;
padding:10px 10px;
text-decoration: none;
}
.img {
display:inline-block;
width:49%;
} #grad {
background: -moz-linear-gradient(top, #FFC778, #FFF);
background: -orgwebkit-linear-gradient(top, #FFC778, #FFF);
background: linear-gradient(to bottom, #FFC778, #FFF); } #header_img { margin-top:0px;
background-image: url(https://www.suido-service.com/blogss/wp-content/uploads/2019/07/ssp1.jpg)
}
@media(max-width:500px){
#header_img { margin-top:0px;
background-image: url(https://www.suido-service.com/blogss/wp-content/uploads/2019/07/spmain.jpg)
}
}  @media(max-width:500px){
.inquiry th,.inquiry td {
display:block!important;
width:100%!important;
border-top:none!important;
-webkit-box-sizing:border-box!important;
-moz-box-sizing:border-box!important;
box-sizing:border-box!important;
}
.inquiry tr:first-child th{
border-top:1px solid #d7d7d7!important;
} .inquiry .haveto,.inquiry .any {	
font-size:10px;
}} .inquiry th{
text-align:left;
font-size:14px;
color:#4169e1;
padding-right:5px;
width:30%;
background:#4169e1!important;
border:solid 1px #d7d7d7;
} .inquiry td{
font-size:13px;
border:solid 1px #d7d7d7;	
} .entry-content .inquiry tr,.entry-content table{
border:solid 1px #d7d7d7;	
} .haveto{
font-size:7px;
padding:5px;
background:#ff9393;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
} .any{
font-size:7px;
padding:5px;
background:#93c9ff;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
} .verticallist .wpcf7-list-item{
display:block;
} #formbtn{
display: block;
padding:15px;
width:350px;
background:#4169e1;
color:#fff;
font-size:18px;
font-weight:bold;	 
border-radius:2px;
margin:25px auto 25px;
} #formbtn:hover{
background:#fff;
color:#ffaa56;
border:2px solid #ffaa56;
}  .img_block img{
display: block;
margin:auto;
max-width: 70%;
} #footertel {
display: block;
width: 70%;
position: fixed;
right: 0px;
bottom: 0px;
z-index: 9999;
text-align: center;
padding: 0 auto;
}
#footertel img {
max-width: 100%;
} .l-extra {
display: flex;
position: absolute;
justify-content: space-between;
width: 100%;
z-index: 1000;
}
.l-extra.fixed {
position: fixed;
top: 0;
}
.key,
.categoryDescription,
.singleTitle {
margin-top: 60px;
} @media only screen and (max-width: 767px){
.key,
.categoryDescription,
.singleTitle {
margin-top: 50px;
}
} .resizeimage img { width: 100vw; } .fluid-box{
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
background-color: #00a1e9;
} .fluid-box-inner{
margin: 0 auto;
padding: 25px;
background-color: #fff;
} [class^="img-flex-"] {
margin-bottom: 20px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.img-flex-2 > img,
.img-flex-2 a { width: 49%; height: 49%; }
.img-flex-3 > img,
.img-flex-3 a { width: 32%; height: 32%; }
.img-flex-4 > img,
.img-flex-4 a { width: 24%; height: 24%; } .container1 {
max-width:2000px;
margin:0 auto;
}
.full-width {
width:100vw; 
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.full-width img{
max-width:100vw;
width:100vw;
} .biku {
-moz-animation: animepopup 2s linear 1s infinite alternate;
-webkit-animation: animepopup 2s linear 1s infinite alternate;
-ms-animation: animepopup 2s linear 1s infinite alternate;
} #nav-drawer {
position: relative;
} .nav-unshown {
display:none;
} #nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
} .inline-block_botom {
display: inline-block; background-color:  #ffffff; padding:  10px; height: 120px; } *, *:before, *:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
.cp_cont {
height: 7vh;
}
.cp_offcm01 {
position: absolute;
top: 12px;
right: 20px;
display: inline-block;
} .cp_offcm01 .cp_menu {
position: fixed;
top: 80px;
right: -100vw;
width: 200px;
height: 100%;
cursor: pointer;
-webkit-transition: 0.53s transform;
transition: 0.53s transform;
-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
transition-timing-function: cubic-bezier(.38,.52,.23,.99);
background-color: #092e7e;
opacity: 0.8;
z-index:9999
}
.cp_offcm01 .cp_menu ul {
margin: 0;
padding: 0;
}
.cp_offcm01 .cp_menu li {
list-style: none;
}
.cp_offcm01 .cp_menu li a {
display: block;
padding: 15px;
text-decoration: none;
color: #ffffff;
border-bottom: 1px solid #ffffff;
}
.cp_offcm01 #cp_toggle01 {
position: absolute;
display: none;
opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
-webkit-transform: translateX(-100vw);
transform: translateX(-100vw);
} .cp_offcm01 #cp_toggle01 ~ label {
display: block;
padding: 0.5em;
cursor: pointer;
-webkit-transition: 0.5s transform;
transition: 0.5s transform;
-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
text-align: center;
color: #333333;
text-shadow:2px 1px 1px #165dc97a;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
}
.cp_offcm01 #cp_toggle01 ~ label::before {
font-family: 'FontAwesome';
content: '\f0c9';
font-size: 2em
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
content: '\f00d';
} .cp_contents {
color: #333333;
text-align: center;
} .omoi01 {
width: 100%;
border: 0px solid #CCCCCC;
padding: 10px;
margin-bottom: 3px;
overflow: hidden;
zoom: 1;
}
.omoi01 p {
overflow: hidden;
zoom: 1;
}
.omoiImg {
float: left;
margin: 0 10px 5px 0;
width: 35%;
}
.omoiImg2 {
margin: 0 1px 1px 0;
width: 100%;
}
.meteo{
color: #364e96; border-bottom: solid 3px #364e96; margin-bottom:7px
} .icon_img {
position: relative;
top: 150px;
right: -65%;
width: 30%;
z-index: 550;
height: auto;
} .btex{
font-size: 1.8em;
color:#051c9b; }
@media only screen and (max-width: 996px){ .icon_img {
position: relative;
top: 115px;
right: -70%;
width: 30%;
z-index: 550;
height: auto;
} .btex{
font-size: 1.6em;
color:#051c9b; }
}
@media only screen and (max-width: 500px){
.omoi01 {
width: 100%;
border: 0px solid #CCCCCC;
padding: 10px;
margin-bottom: 3px;
overflow: hidden;
zoom: 1;
}
.omoi01 p {
overflow: hidden;
zoom: 1;
}
.omoiImg {
float: none;
margin: 0 10px 5px 0;
width: 70%;
}
.meteo{
color: #364e96; border-bottom: solid 3px #364e96; margin-bottom:5px
} .icon_img {
position: relative;
top: 100px;
right: -65%;
width: 40%;
z-index: 550;
height: auto;
} .btex{
font-size: 1.3em;
color:#051c9b; }
}
.twif iframe { width: 740px !important; } .btn-flat-horizontal-border {
position: relative;
display: inline-block;
font-weight: bold;
padding: 1em 0.5em;
text-decoration: none;
color: #FFF;
background: #00008b;
transition: .4s;
}
.btn-flat-horizontal-border > span {
border-bottom: solid 2px #FFF;
border-top: solid 2px #FFF;
}
.btn-flat-horizontal-border:hover span {
padding: 0.1em 0;
} .c-aside-topic__tab--a:visited, .c-aside-topic__tab--b:visited, .c-tag__tip--a:visited, .c-tag__tip--b:visited {
color: #fff !important;
} @media screen and (max-width: 767px)
.c-aside-topic__tab {
font-size: 12px;
font-size: 0.75rem;
line-height: 16px;
margin-right: 6px;
margin-top: 6px;
padding-left: 6px;
padding-right: 6px;
}
.c-aside-topic__tab--a {
background-color: #009eff;
border-color: #165dc9;
color: #fff!important;
}
.c-aside-topic__tab {
border-radius: 3px;
border-style: solid;
border-width: 1px;
padding-left: 10px;
padding-right: 10px;
max-width: fit-content;
}
.c-aside-topic__tab--b {
background-color: #19c500;
border-color: #019600;
color: #fff!important;
}
.c-aside-topic__tab--a:visited, .c-aside-topic__tab--b:visited, .c-tag__tip--a:visited, .c-tag__tip--b:visited {
color: #fff ;
} @media screen and (max-width: 767px)
.c-aside-topic__tab--b {
background-color: #737373!important;
border-color: #737373!important;
color: #fff!important;
}
.c-aside-topic__tab--b a {
text-decoration: none;
color: #fff;
} .c-aside-topic__tab--c {
background-color: #ffffff;
border-color: #737373;
color: #666;
}
.c-aside-topic__tab--c a {
text-decoration: none;
color: #fff;
} h2.ws {
position: relative;
padding: 3rem 0rem 1rem 0rem;
}
h2.ws:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
content: '';
border-radius: 3px;
background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
}
h3.ws {
padding: 5px 0px 5px 50px;
color: #ffffff;
border: 1px solid #E5E5E5;
   border-left: 5px solid #ffffff;
} .siteTitle__sub
display:block;
color:#002080;
font-size:1.2rem;
margin-left:10px;
float:left;
} .box-blue {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 2px #5b8bd0; }
.box-blue p {
margin: 0; 
padding: 0;
} #body-inside{
}
.orverwidth{ background-color:#7fffd41a;
}
.orverwidth p{
padding:1em;
} .heading10 {
position: relative;
padding-top: 30px;
font-size: 26px;
border-bottom: 1px solid rgba(5,62,98,1);
}
.heading10 span {
position: relative;
z-index: 2;
}
.heading10::before {
content: attr(data-en);
position: absolute;
top: 0px;
left: 0;
color: rgba(5,62,98,0.2);
font-size: 40px;
text-transform: uppercase;
z-index: 1;
} .heading09 {
font-size: 26px;
}
.heading09::before {
content: attr(data-en);
display: block;
color: #498ee0;
font-size: 18px;
}
.heading09::after {
content: '';
display: block;
width: 40px;
height: 1px;
background-color: #498ee0;
} .heading02 {
position: relative;
font-size: 26px;
text-align: center;
border-bottom: 5px solid #f6f6f6;
}
.heading02::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 5px;
background-color: #387ccc;
} .s-list table{
width: 100%;
border-collapse: collapse;
}
.s-list table tr{
border-bottom: solid 2px white;
}
.s-list table tr:last-child{
border-bottom: none;
}
.s-list table th{
position: relative;
text-align: left;
width: 30%;
background-color: #52c2d0;
color: white;
text-align: center;
padding: 10px 0;
}
.s-list table th:after{
display: block;
content: "";
width: 0px;
height: 0px;
position: absolute;
top:calc(50% - 10px);
right:-10px;
border-left: 10px solid #52c2d0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.s-list table td{
text-align: left;
width: 70%;
text-align: center;
background-color: #eee;
padding: 10px 0;
} .anim-box.poyoyon3 {
animation: poyoyon3 2.5s infinite;
opacity: 1;
}
.anim-box {
background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
border-radius: 5px;
   max-width: 500px;
height: auto;
opacity: 0;
margin: auto;
text-align: center;
font-size:1.3em;
} .cent1{
margin-left:auto;
margin-right:auto;
} .box30 {
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
font-size: 1.2em;
background: #5fc2f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box30 p {
padding: 15px 20px;
margin: 0;
} .btn-wrap {
margin: 35px;
text-align: center;
}
a.btn-c {
font-size: 2rem;
position: relative;
padding: 1.5rem 4rem 1.5rem 6rem;
color: #000;
border: 2px solid #000;
border-radius: 100vh;
background: #fff100;
-webkit-box-shadow: 0 5px 0 #e6d900;
box-shadow: 0 5px 0 #e6d900;
}
a.btn-c span {
font-size: 1.1rem;
line-height: 1.3;
position: absolute;
top: -10px;
left: -20px;
width: 64px;
height: 64px;
padding-top: 15px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: #000;
border: 2px solid #000;
border-radius: 50%;
background: #fff;
}
a.btn-c span em {
font-style: normal;
color: #d20010;
}
a.btn-c small {
font-weight: bold;
}
a.btn-c i {
margin-right: 1rem;
}
a.btn-c:hover {
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
color: #000;
background: #fff21a;
-webkit-box-shadow: 0 2px 0 #e6d900;
box-shadow: 0 2px 0 #e6d900;
}
a.btn-c:hover span {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
} .price-2box{
text-align:center;
}
.mx-w{
max-width:500px;
}
.ms-w{
max-width:450px;
} .button_solid011 a {
background: #6bb6ff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 240px;
padding: 20px 25px 10px;
color: #FFF;
transition: 0.3s ease-in-out;
font-weight: 600;
flex-direction: column;
border-radius: 8px;
border-bottom: solid 5px #1d7fde;
}
.button_solid011 a span {
background: #FFFF00;
width: 80%;
text-align: center;
position: absolute;
top: -15px;
filter: drop-shadow(0px 1px 2px #aaa);
padding: 3px 0;
   font-size: 1rem;
color: #2b7fde;
border-radius: 5px;
}
.button_solid011 a span:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top: 5px solid #ffffff;
}
.button_solid011 a:hover {
border-bottom: solid 2px #1d7fde;
transform: translateY(3px);
}
.spam2{
text-align:center;
padding-top: 15px;
}
.wpcf7-response-output {
color: chocolate;
text-align: center;
}
@media only screen and (max-width: 767px) {
.siteTitle {
height: 80px;
}
.siteTitle__sub{
display:none;
}
}
   article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
src: local("Roboto"), local("Roboto-Regular"), url(//www.suido-service.com/wp-content/themes/lionmedia/assets/webfonts/roboto400.woff) format("woff");
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
src: local("Roboto Bold"), local("Roboto-Bold"), url(//www.suido-service.com/wp-content/themes/lionmedia/assets/webfonts/roboto700.woff) format("woff");
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
src: local("Roboto Black"), local("Roboto-Black"), url(//www.suido-service.com/wp-content/themes/lionmedia/assets/webfonts/roboto900.woff) format("woff");
}          .common-article {
position: relative;
}
.article-content {
position: relative;
}
.sticky-footer {
width: 100%;
position: fixed;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
max-width: 1920px;
z-index: 80;
}
.sticky-footer.sink {
-webkit-transform: translateX(-50%) translateY(55%);
transform: translateX(-50%) translateY(55%);
-webkit-transition: -webkit-transform 2s;
transition: -webkit-transform 2s;
transition: transform 2s;
transition: transform 2s, -webkit-transform 2s;
}
.sticky-footer.sink:hover {
-webkit-transform: translateX(-50%) translateY(0%);
transform: translateX(-50%) translateY(0%);
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
}
.sticky-footer.float, .sticky-footer.sink.float {
-webkit-transform: translateX(-50%) translateY(0%) !important;
transform: translateX(-50%) translateY(0%) !important;
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
}
.sticky-footer:after {
content: "";
height: 58%;
width: 100%;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
background-color: #ff391f;
}
.sticky-footer .inner {
padding: 0.3% 0;
}
.sticky-footer .inner a {
overflow: hidden;
position: absolute;
display: block;
z-index: 5;
bottom: 8.2%;
right: 22.95%;
height: 41%;
width: 24.2%;
border-radius: 4px;
}
.sticky-footer .inner a.sticky-tel {
right: 48.6%;
width: 29%;
}
.sticky-footer .inner a:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
display: block;
content: "";
display: block;
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform: translateX(-101%);
transform: translateX(-101%);
}
.sticky-footer .inner a:hover:after {
-webkit-transform: translateX(101%);
transform: translateX(101%);
}
.sticky-footer .inner img,
.sticky-footer .inner picture {
width: 100%;
display: block;
position: relative;
z-index: 1;
}
.bkt {
display: none;
font-size: 14px;
font-weight: bold;
color: #165dc9;
line-height: 1;
white-space: nowrap;
position: fixed;
left: 50%;
-webkit-transform: translateX(650px);
transform: translateX(650px);
bottom: 140px;
cursor: pointer;
z-index: 90;
padding: 6px 12px;
background-color: #fff;
border-radius: 4px;
}
.bkt svg {
margin-left: 4px;
}
.bkt:hover {
color: #e26666;
}
.site-footer {
background-color: #165dc9;
padding: 40px 0;
}
.site-footer .footer-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.site-footer .footer-nav a {
line-height: 1.8;
color: white;
font-size: 14px;
}
.site-footer .footer-nav a:hover {
text-decoration: underline;
}
.site-footer .footer-nav ul:not(.sub-menu) > li > a {
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0.5em;
}
.site-footer .footer-nav ul:not(.sub-menu) > li > a:before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 5px solid white;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
margin-right: 8px;
}
.site-footer .footer-nav ul.sub-menu {
padding-left: 0.8em;
}
.site-footer .footer-nav ul.sub-menu li {
margin-bottom: 0.1em;
}
.site-footer .footer-nav ul.sub-menu a {
font-size: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 1.8;
}
.site-footer .footer-nav ul.sub-menu a:before {
content: "";
height: 1px;
width: 6px;
background-color: #fff;
display: inline-block;
margin-right: 6px;
}
.copyright {
padding: 10px 20px 115px;
text-align: center;
line-height: 1.6;
font-size: 14px;
color: white;
background-color: #229dd9;
}
#breadcrumbs {
padding: 15px 0;
background-color: #e5f4fd;
}
#breadcrumbs .inner { overflow-x: auto;
font-size: 12px;
color: #165dc9;
}
#breadcrumbs .inner a {
color: #165dc9;
line-height: 2em;
}
#breadcrumbs .inner a:hover {
text-decoration: underline;
}
.page-header {
background-color: #14a3e4;
color: white;
padding: 20px 0;
}
.page-header .inner p {
font-size: 36px;
display: block;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.page-header .inner p img {
width: auto;
height: 3em;
margin-left: 10px;
}
.taxonomy-page .article-content .cell .cell-wrapper {
background-color: #edfaff;
}
.taxonomy-page .article-content:not(.area-showcase) .cell-title {
background-color: transparent;
font-size: 14px;
font-weight: bold;
white-space: normal;
line-height: 1.6;
color: #111111;
height: auto;
padding: 15px 15px 0;
}
.taxonomy-page .article-content:not(.area-showcase) .cell-title span {
white-space: normal;
}
.taxonomy-page .article-content:not(.area-showcase) .cell-info {
padding-top: 10px;
}
.cloned-nav {
position: fixed;
z-index: 101;
top: 0;
left: 0;
right: 0;
width: 100%;
opacity: 0;
-webkit-transition: 0.2s;
transition: 0.2s;
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
.cloned-nav .clone-wrapper {
max-width: 1280px;
margin: auto;
position: relative;
}
.cloned-nav.sink {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.clone-brand {
position: absolute;
left: 40px;
width: 120px;
top: 10px;
z-index: 80;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
.clone-brand:hover {
-webkit-transform: translateY(5px);
transform: translateY(5px);
} .site-navigation__wraper {
height: auto;
width: 100%;
background-color: #165dc9;
position: relative;
z-index: 10;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 20, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 20, 0.1);
}
.gn-orange{background:#FF6600;}
.gn-orange a{padding-left:50px !important; padding-right:50px !important;}
.site-navigation > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.site-navigation > ul > li {
position: relative;
}
.site-navigation > ul > li:first-child a {
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.site-navigation > ul > li:first-child a:hover {
border-left: 1px solid #e26666;
}
.site-navigation > ul > li.menu-item-has-children > a:after {
content: "";
display: inline-block;
margin-left: 6px;
width: 0;
height: 0;
border-top: 0.4em solid #ffffff;
border-left: 0.35em solid transparent;
border-right: 0.35em solid transparent;
margin-top: -1px;
}
.site-navigation > ul > li.menu-item-has-children:hover .sub-menu {
display: block;
}
.site-navigation > ul > li.menu-item-has-children:hover .sub-menu a {
height: auto;
padding: 12px 5px;
white-space: nowrap;
overflow: hidden;
}
.site-navigation > ul a {
height: 66px;
height: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1;
padding: 0 30px;
font-size: 16px;
color: white;
margin-left: -1px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
-webkit-transition: 0.2s;
transition: 0.2s;
}
.site-navigation > ul a:hover {
background-color: #e26666;
border-right: 1px solid #e26666;
}
.site-navigation .sub-menu {
display: none;
position: absolute;
background-color: #165dc9;
width: 100%;
margin-left: -1px;
}
.site-navigation .sub-menu a {
margin-left: 0;
border-right: 0 !important;
}
.site-navigation .sub-menu li {
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: -1px;
}
.toggle-btn {
display: none;
margin-right: 15px;
}
.toggle-btn label {
padding: 10px;
display: block;
font-size: 30px;
color: #165dc9;
}
.toggle-btn label svg:nth-child(2) {
display: none;
}
@media (min-width: 1101px) {
.toggle-btn {
display: none !important;
}
.ghost-nav {
display: none !important;
}
#menu-status:checked ~ .site-header .brand {
display: block !important;
}
}
@media (max-width: 1100px) {
.toggle-btn {
display: block;
}
}
.ghost-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 95px;
z-index: 101;
display: none;
background-color: #165dc9;
}
.ghost-nav .menu-main-navigation-container {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.ghost-nav li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ghost-nav a {
color: white;
line-height: 1.5;
white-space: nowrap;
padding: 10px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
position: relative;
}
.ghost-nav .sub-menu li {
position: relative;
}
.ghost-nav .sub-menu li a {
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.ghost-nav .sub-menu li a:before {
content: "";
width: 8px;
height: 1px;
background-color: #fff;
margin-right: 10px;
display: block;
}
.ghost-nav .sub-menu li:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
display: block;
content: "";
background-color: rgba(0, 0, 0, 0.1);
}
.ghost-nav .sub-menu li:last-child {
border-bottom: 0;
}
body.open-nav .ghost-nav {
display: block;
}
body.open-nav .site-header .toggle-btn svg:nth-child(1) {
display: none;
}
body.open-nav .site-header .toggle-btn svg:nth-child(2) {
display: block;
}
body.open-nav .site-header .brand {
display: none;
}
body.open-nav .site-header .header__main {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}           .hero-wrapper {
width: 100%;
position: relative;
overflow: hidden;
}
.hero-wrapper img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}   .card-row {
overflow: hidden;
}
.card-row .card {
position: relative;
padding: 16px;
-webkit-transition: 0.2s;
transition: 0.2s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.card-row .card:not(:first-child) {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.card-row .card a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
display: block;
}
.card-row .card figure {
width: 100px;
height: 70px;
min-width: 100px;
margin-right: 20px;
overflow: hidden;
position: relative;
}
.card-row .card figure .card-term {
position: absolute;
z-index: 2;
top: 0;
left: 0;
line-height: 1;
font-size: 10px;
padding: 2px 3px;
background-color: #165dc9;
color: white;
}
.card-row .card figure img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.card-row .card .card-text {
width: calc(100% - 120px);
}
.card-row .card .card-text h3 {
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
font-size: 14px;
line-height: 1.6;
}
.card-row .card .card-text .post-date {
font-size: 12px;
margin-top: 12px;
line-height: 1;
letter-spacing: 0;
}
.card-row.blue {
background-color: #edfaff;
}
.card-row .term-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 16px;
margin-bottom: 16px;
}
.card-row .term-link a {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1;
padding: 8px 15px;
font-size: 14px;
color: white;
background-color: #165dc9;
border-radius: 50px;
overflow: hidden;
white-space: nowrap;
}
.card-row .term-link a svg {
margin-left: 6px;
}
.card-row.blue {
background-color: #edfaff;
}
.card-row.blue .card:hover {
background-color: #def3fc;
}
.card-row.blue .card figure .card-term {
background-color: #165dc9;
}
.card-row.green {
background-color: #eefff9;
}
.card-row.green .card:hover {
background-color: #e1f7f0;
}
.card-row.green .card figure .card-term {
background-color: #0fa230;
}
.card-row.pink {
background-color: #fef2f4;
}
.card-row.pink .card:hover {
background-color: #fce5e9;
}
.card-row.pink .card figure .card-term {
background-color: #e26666;
}
.card-row.lightGreen {
background-color: #f4ffef;
}
.card-row.lightGreen .card:hover {
background-color: #e8ffdd;
}
.card-row.lightGreen .card figure .card-term {
background-color: #0ea27e;
}
.card-row.orange {
background-color: #fffff3;
}
.card-row.orange .card:hover {
background-color: #fbfbe1;
}
.card-row.orange .card figure .card-term {
background-color: #eaac01;
}
.card-row.gray {
background-color: #f6f6f6;
}
.card-row.gray .card:hover {
background-color: #e9e9e9;
}
.card-row.gray .card figure .card-term {
background-color: #6f6f6f;
}  .qa-card-list {
margin: 25px 0;
}
.qa-card {
width: 100%;
position: relative;
overflow: hidden;
}
.qa-card a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
display: block;
z-index: 3;
}
.qa-card a:hover ~ figure img {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
}
.qa-card:not(:last-child) {
margin-bottom: 15px;
}
.qa-card figure {
width: 100%;
position: relative;
height: auto;
padding-top: 20%;
min-height: 100px;
z-index: 1;
}
.qa-card figure img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
-webkit-transition: -webkit-transform 2s;
transition: -webkit-transform 2s;
transition: transform 2s;
transition: transform 2s, -webkit-transform 2s;
}
.qa-card .qa-title {
height: 36px;
width: 100%;
position: relative;
background-color: #165dc9;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
color: white;
padding: 0 15px;
white-space: nowrap;
z-index: 2;
}
.qa-card .qa-title img:first-child {
height: 60%;
width: auto;
display: block;
}  .showcase-list {
background-color: #f6f6f6;
padding: 16px;
}
.showcase-card:not(:last-child) {
margin-bottom: 15px;
}
.showcase-figure {
width: 100%;
padding-top: 56.57%;
position: relative;
overflow: hidden;
border: 6px solid white;
}
.showcase-figure img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.showcase-figure a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: 2s;
transition: 2s;
}
.showcase-figure:hover a {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: 0.6s;
transition: 0.6s;
}
.showcase-term {
width: 100%;
padding-top: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.showcase-term span {
line-height: 1;
font-size: 12px;
padding: 4px 8px;
background-color: #165dc9;
color: white;
}
.showcase-term span.kitchen {
background-color: #165dc9;
}
.showcase-term span.toilet {
background-color: #0fa230;
}
.showcase-term span.bathroom {
background-color: #e26666;
}
.showcase-term span.washroom {
background-color: #0ea27e;
}
.showcase-term span.outdoor-water-circulation {
background-color: #eaac01;
}
.showcase-term span.laundry {
background-color: #6f6f6f;
}
.showcase-info {
font-size: 12px;
padding: 12px 0;
line-height: 1.8;
}
.showcase-info .showcase-link {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.showcase-info .showcase-link a {
text-transform: uppercase;
color: #165dc9;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.showcase-info .showcase-link a:hover {
color: #e26666;
}  .article-content {
margin: 30px 0 0 -30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.article-content .cell {
width: 33.3333%;
padding-left: 30px;
padding-bottom: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.article-content .cell.voc {
padding-bottom: 80px;
}
.article-content .cell.voc .cell-wrappe {
padding-bottom: 30px;
}
.article-content .cell .cell-wrapper {
width: 100%;
position: relative;
padding-bottom: 42px;
}
.article-content .cell.blue .cell-wrapper, .article-content .cell.kitchen .cell-wrapper {
background-color: #edfaff;
}
.article-content .cell.blue .cell-title,
.article-content .cell.blue .cell-link a, .article-content .cell.blue ~ .term-link a,
.article-content .cell.blue .cell-figure .card-term, .article-content .cell.kitchen .cell-title,
.article-content .cell.kitchen .cell-link a, .article-content .cell.kitchen ~ .term-link a,
.article-content .cell.kitchen .cell-figure .card-term {
background-color: #165dc9;
}
.article-content .cell.pink .cell-wrapper, .article-content .cell.bathroom .cell-wrapper {
background-color: #fef2f4;
}
.article-content .cell.pink .cell-title,
.article-content .cell.pink .cell-link a, .article-content .cell.pink ~ .term-link a,
.article-content .cell.pink .cell-figure .card-term, .article-content .cell.bathroom .cell-title,
.article-content .cell.bathroom .cell-link a, .article-content .cell.bathroom ~ .term-link a,
.article-content .cell.bathroom .cell-figure .card-term {
background-color: #e26666;
}
.article-content .cell.green .cell-wrapper, .article-content .cell.toilet .cell-wrapper {
background-color: #eefff9;
}
.article-content .cell.green .cell-title,
.article-content .cell.green .cell-link a, .article-content .cell.green ~ .term-link a,
.article-content .cell.green .cell-figure .card-term, .article-content .cell.toilet .cell-title,
.article-content .cell.toilet .cell-link a, .article-content .cell.toilet ~ .term-link a,
.article-content .cell.toilet .cell-figure .card-term {
background-color: #0fa230;
}
.article-content .cell.gray .cell-wrapper, .article-content .cell.laundry .cell-wrapper {
background-color: #f6f6f6;
}
.article-content .cell.gray .cell-title,
.article-content .cell.gray .cell-link a, .article-content .cell.gray ~ .term-link a,
.article-content .cell.gray .cell-figure .card-term, .article-content .cell.laundry .cell-title,
.article-content .cell.laundry .cell-link a, .article-content .cell.laundry ~ .term-link a,
.article-content .cell.laundry .cell-figure .card-term {
background-color: #6f6f6f;
}
.article-content .cell.orange .cell-wrapper, .article-content .cell.outdoor-water-circulation .cell-wrapper {
background-color: #fffff3;
}
.article-content .cell.orange .cell-title,
.article-content .cell.orange .cell-link a, .article-content .cell.orange ~ .term-link a,
.article-content .cell.orange .cell-figure .card-term, .article-content .cell.outdoor-water-circulation .cell-title,
.article-content .cell.outdoor-water-circulation .cell-link a, .article-content .cell.outdoor-water-circulation ~ .term-link a,
.article-content .cell.outdoor-water-circulation .cell-figure .card-term {
background-color: #eaac01;
}
.article-content .cell.lightgreen .cell-wrapper, .article-content .cell.washroom .cell-wrapper {
background-color: #f4ffef;
}
.article-content .cell.lightgreen .cell-title,
.article-content .cell.lightgreen .cell-link a, .article-content .cell.lightgreen ~ .term-link a,
.article-content .cell.lightgreen .cell-figure .card-term, .article-content .cell.washroom .cell-title,
.article-content .cell.washroom .cell-link a, .article-content .cell.washroom ~ .term-link a,
.article-content .cell.washroom .cell-figure .card-term {
background-color: #0ea27e;
}
.article-content .cell-figure {
width: 100%;
position: relative;
padding-top: 60%;
overflow: hidden;
}
.article-content .cell-figure a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
display: block;
-webkit-transition: -webkit-transform 2s;
transition: -webkit-transform 2s;
transition: transform 2s;
transition: transform 2s, -webkit-transform 2s;
-webkit-transform-origin: center;
transform-origin: center;
}
.article-content .cell-figure:hover a {
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.article-content .cell-figure .card-term {
position: absolute;
z-index: 2;
top: 0;
left: 0;
line-height: 1;
font-size: 10px;
padding: 2px 3px;
background-color: #165dc9;
color: white;
}
.article-content .cell-figure img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.article-content .cell-title {
font-weight: bold;
width: 100%;
height: 50px;
padding: 0 5%;
position: relative;
z-index: 10;
text-align: center;
font-size: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: white;
background-color: #165dc9;
}
.article-content .cell-title span {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
.article-content .cell-title img {
position: absolute;
height: 60px;
width: auto;
right: 10px;
bottom: 0;
}
.article-content .cell-title-text {
font-size: 16px;
font-weight: bold;
text-align: left;
line-height: 1.6;
color: #165dc9;
padding: 16px 16px 0;
}
.article-content .cell-title-text ~ .cell-info {
padding-top: 8px;
padding-bottom: 8px;
}
.article-content .cell-title-text ~ .cell-info .customer-information a {
text-transform: uppercase;
font-size: 14px;
color: #165dc9;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.article-content .cell-title-text ~ .cell-info .customer-information a:hover {
color: #e26666;
}
.article-content .cell-info {
padding: 15px;
font-size: 15px;
line-height: 1.8;
}
.article-content .cell-info .original-fee {
font-size: 16px;
font-weight: 900;
text-align: center;
line-height: 1.4;
letter-spacing: 0;
}
.article-content .cell-info .fee-discount {
font-size: 20px;
color: #000077;
text-align: center;
line-height: 1.4;
font-weight: 900;
text-transform: uppercase;
padding: 6px 0;
letter-spacing: 0;
}
.article-content .cell-info .final-fee {
width: 100%;
line-height: 1.4;
text-align: center;
padding: 2px 12px;
background-color: #e40011;
font-weight: 900;
color: #ffffff;
font-size: 14px;
overflow: hidden;
line-height: 1;
margin-bottom: 15px;
}
.article-content .cell-info .final-fee strong {
font-size: 1.6em;
letter-spacing: 0;
padding: 0 4px;
}
.article-content .cell-info .customer-information {
font-weight: bold;
text-align: right;
position: absolute;
left: 0;
position: absolute;
bottom: 0;
padding: 16px;
width: 100%;
font-size: 14px;
}
.article-content .cell-title-text ~ .cell-info2 {
padding-top: 8px;
padding-bottom: 8px;
}
.article-content .cell-title-text ~ .cell-info2 .customer-information a {
text-transform: uppercase;
font-size: 14px;
color: #165dc9;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.article-content .cell-title-text ~ .cell-info2 .customer-information a:hover {
color: #e26666;
}
.article-content .cell-info2 {
padding: 15px;
font-size: 12px;
line-height: 1.8;
}
.article-content .cell-info2 .original-fee {
font-size: 16px;
font-weight: 900;
text-align: center;
line-height: 1.4;
letter-spacing: 0;
}
.article-content .cell-info2 .fee-discount {
font-size: 20px;
color: #e40011;
text-align: center;
line-height: 1.4;
font-weight: 900;
text-transform: uppercase;
padding: 6px 0;
letter-spacing: 0;
}
.article-content .cell-info2 .final-fee {
width: 100%;
line-height: 1.4;
text-align: center;
padding: 2px 12px;
background-color: #e40011;
font-weight: 900;
color: #ffffff;
font-size: 14px;
overflow: hidden;
line-height: 1;
margin-bottom: 15px;
}
.article-content .cell-info2 .final-fee strong {
font-size: 1.6em;
letter-spacing: 0;
padding: 0 4px;
}
.article-content .cell-info2 .customer-information {
font-weight: bold;
text-align: right;
position: absolute;
left: 0;
position: absolute;
bottom: 0;
padding: 16px;
width: 100%;
font-size: 14px;
}
.article-content .cell-link,
.article-content .term-link { bottom: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 16px;
margin-bottom: 16px;
width: 100%;
}
.article-content .cell-link a,
.article-content .term-link a {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1;
padding: 8px 15px;
font-size: 12px;
color: white;
background-color: #165dc9;
border-radius: 50px;
overflow: hidden;
white-space: nowrap;
}
.article-content .cell-link a svg,
.article-content .term-link a svg {
margin-left: 6px;
}
.article-content .term-link {
margin-bottom: 25px;
margin-left: 15px;
}
.article-content .term-link a {
max-width: calc(33.3334% - 40px);
}
.article-content.store-list {
padding-bottom: 60px;
}
.article-content.store-list .cell-wrapper {
background-color: #edfaff;
}
.term-link a:hover svg,
.cell-link a:hover svg {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
.article-list {
margin-top: 30px;
}
.article-list .cell-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.article-list .cell-wrapper .cell-figure {
width: 260px;
height: 180px;
margin-right: 30px;
min-width: 260px;
position: relative;
}
.article-list .cell-wrapper .cell-figure img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.article-list .cell-wrapper .cell-figure:hover {
opacity: 0.7;
}
.article-list .cell-wrapper .cell-text {
width: calc(100% - 290px);
}
.article-list .cell-wrapper .cell-text .cell-title {
font-weight: bold;
font-size: 20px;
line-height: 1.6;
margin-bottom: 0.8em;
border-bottom: 1px dotted #165dc9;
padding-bottom: 0.5em;
}
.article-list .cell-wrapper .cell-text .cell-title a {
color: #165dc9;
}
.article-list .cell-wrapper .cell-text .cell-title a:hover {
color: #e26666;
}
.article-list .cell-wrapper .cell-text .cell-info {
font-size: 14px;
line-height: 1.8;
}
.article-list .cell-wrapper .cell-text .cell-link {
margin-top: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.article-list .cell-wrapper .cell-text .cell-link a {
font-size: 14px;
line-height: 1;
color: #165dc9;
}
.article-list .cell-wrapper .cell-text .cell-link a svg {
margin-left: 5px;
}
.article-list .cell-wrapper .cell-text .cell-link a:hover {
color: #e26666;
}
.article-list .cell:not(:last-child) {
margin-bottom: 30px;
}
.pagination {
margin-top: 60px;
}
.pagination .screen-reader-text {
display: none;
}
.pagination .nav-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.pagination a,
.pagination span {
display: inline-block;
font-size: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 38px;
min-width: 38px;
vertical-align: middle;
border: solid 1px #ccc;
text-align: center;
margin: 6px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #999999;
}
.pagination a:hover,
.pagination span:hover {
background-color: #229dd9;
border-color: #229dd9;
color: white !important;
}
.pagination .page-numbers.current {
color: #229dd9;
border-color: #229dd9;
}
.pagination .page-numbers.current:hover {
color: white !important;
}
.pagination .page-numbers.next,
.pagination .page-numbers.prev {
border-color: transparent;
}
.hidden-anchor {
display: none;
}
.area-content {
margin-bottom: 30px;
}
.area-content dl {
width: 100%;
height: auto;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-size: 14px;
}
.area-content dl dt {
width: 200px;
min-width: 200px;
max-width: 200%;
padding: 10px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding-left: 20px;
}
.area-content dl dt svg {
margin-right: 8px;
color: #165dc9;
}
.area-content dl dd {
width: calc(100% - 200px);
padding: 10px 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.area-content dl dd a {
-webkit-transition: 0.2s;
transition: 0.2s;
color: #165dc9;
text-decoration: underline;
line-height: 1;
padding: 5px;
margin: 5px;
}
.area-content dl dd a:hover {
color: #e26666;
}
.area-content dl:nth-child(2n) {
background-color: #e9e9e9;
}
.index-qa-content {
margin: 30px 0;
}
.index-qa-content dl {
width: 100%;
}
.index-qa-content dl:not(:last-child) {
margin-bottom: 20px;
}
.index-qa-content dl dt {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-weight: bold;
background-color: #fff;
z-index: 2;
position: relative;
padding: 10px 52px;
min-height: 40px;
height: auto;
border: 1px solid #e3e3e3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
cursor: pointer;
color: #165dc9;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.index-qa-content dl dt:hover {
background-color: #e9e9e9;
}
.index-qa-content dl dt:before {
content: "Q";
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
left: -1px;
top: -1px;
width: 42px;
height: calc(100% + 2px);
background-color: #165dc9;
color: white;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
.index-qa-content dl dt:after {
content: "+";
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
right: -1px;
top: -1px;
width: 42px;
height: calc(100% + 2px);
opacity: 0.3;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
color: #111111;
}
.index-qa-content dl dd {
font-size: 14px;
line-height: 1.8;
display: none;
overflow: hidden;
background-color: #fff;
z-index: 1;
margin-top: -2px;
position: relative;
padding: 14px 52px;
border: 1px solid #e3e3e3;
}
.index-qa-content dl dd:before {
content: "A";
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
left: -1px;
top: -1px;
width: 42px;
height: calc(100% + 2px);
color: #e26666;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
.wp-block-table {
width: 100%;
table-layout: fixed;
margin: 30px auto;
border-collapse: collapse;
border: 1px solid #e3e3e3;
}
.wp-block-table tr, .wp-block-table td, .wp-block-table th {
border: 1px solid #e3e3e3;
padding: 10px 15px;
font-size: 14px;
}
.wp-block-table td:first-child, .wp-block-table th:first-child {
font-weight: bold;
background-color: #f3f3f3;
text-align: center;
vertical-align: middle;
width: 30%;
min-width: 120px;
}
.wsp-container {
overflow: hidden;
}
.wsp-container h2 {
display: block;
font-size: 18px;
font-weight: bold;
padding: 0.5em 0.6em;
margin-bottom: 1em;
margin-top: 1.5em;
border-bottom: 1px dotted #999999;
background-color: #f6f6f6;
}
.wsp-container h2:first-child {
margin-top: 0;
}
.wsp-container ul {
padding-left: 1.2em;
list-style: initial;
}
.wsp-container a {
font-size: 14px;
}
.wsp-container a:hover {
text-decoration: underline;
}
.wpcf7-form {
overflow: hidden;
}
.wpcf7-form .sublist {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.wpcf7-form .sublist > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
}
.wpcf7-form .sublist > div:not(:last-child) {
margin-bottom: 10px;
}
.wpcf7-form .sublist > div > span {
margin-left: 5px !important;
display: block;
}
.wpcf7-form .sublist dl {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-bottom: 10px;
}
.wpcf7-form .sublist dl dt {
min-width: 100px;
max-width: 100px;
}
.wpcf7-form .sublist dl dd span {
margin-right: 0 !important;
}
.wpcf7-form .sublist dl dd input[type=number] {
margin-left: 0;
}
.wpcf7-form .sublist dl:last-child {
margin-bottom: 0px;
}
.wpcf7-form ul {
list-style: none;
padding-left: 0;
margin: 50px auto 30px;
max-width: 1000px;
}
.wpcf7-form ul li {
padding: 30px 15px;
border-bottom: 1px solid #f3f3f3;
}
.wpcf7-form ul li div.label,
.wpcf7-form ul li label {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.wpcf7-form ul li div.label > p,
.wpcf7-form ul li label > p {
position: absolute;
width: 0;
height: 0;
}
.wpcf7-form ul li div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
.wpcf7-form ul li div:not(.control-item) > span {
width: 100%;
margin-left: 0;
}
.wpcf7-form ul li div.control-item {
max-width: 180px;
min-width: 180px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-size: 16px;
}
.wpcf7-form ul li div.control-item span {
margin-left: 5px;
font-size: 0.6em;
line-height: 1em;
padding: 0.1em 0.2em;
border-radius: 2px;
background-color: red;
color: white;
}
.wpcf7-form ul li div.control-item + div {
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.wpcf7-form ul li div.control-item + div span {
white-space: normal;
margin-right: 5px;
}
.wpcf7-form ul li input[type=text],
.wpcf7-form ul li input[type=email],
.wpcf7-form ul li input[type=tel],
.wpcf7-form ul li input[type=number],
.wpcf7-form ul li input[type=confirm_email],
.wpcf7-form ul li textarea,
.wpcf7-form ul li select {
border: 1px solid #e9e9e9;
background-color: #f6f6f6;
color: #666;
line-height: 1.5;
padding: 0.6em 0.8em;
display: block;
width: 100%;
min-width: 200px;
max-width: 500px;
font-family: inherit;
}
.wpcf7-form ul li textarea {
max-width: 800px;
height: 200px;
}
.wpcf7-form ul li input[type=number] {
margin-left: 5px;
max-width: 100px;
min-width: 100px;
}
.wpcf7-form ul li .single-line-control {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.wpcf7-form ul li .single-line-control select {
width: auto;
min-width: 80px;
}
.wpcf7-form ul li .single-line-control span {
width: auto !important;
}
.wpcf7-form ul li .single-line-control input {
max-width: 60px;
min-width: 60px;
margin-right: 4px;
margin-left: 10px;
}
#hidden-office {
display: none;
}
.form_submit input[type=submit] {
width: 200px;
height: 50px;
line-height: 50px;
background-color: #398f14;
color: white;
text-align: center;
display: block;
margin: 50px auto;
font-size: 16px;
cursor: pointer;
font-family: inherit;
}
.form_submit input[type=submit]:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transform-origin: center;
transform-origin: center;
}
div.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
background-color: #398f14;
color: white;
}
div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
border: 2px solid #ff0000;
background-color: #ff0000;
color: white;
}
div.wpcf7-spam-blocked {
border: 2px solid #ffa500;
background-color: #ffa500;
color: red;
}
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
border: 2px solid #f7e700;
background-color: #f7e700;
color: red;
}
span.wpcf7-not-valid-tip {
color: #f00;
font-size: 0.8em;
}
.use-floating-validation-tip span.wpcf7-not-valid-tip {
border: 1px solid #ff0000;
background: #ff0000;
color: white;
}
blockquote {
margin: 0 0 25px 0;
padding: 20px 20px 20px;
border-left: 4px solid #ccc;
position: relative;
background-color: #f3f3f3;
}
.area-banner {
margin: 35px 0;
}
.single-article {
padding-bottom: 50px;
}
.single-article > h1, .single-article > h2:not(.section-title) {
font-size: 32px;
font-weight: bold;
display: block;
margin: 1.5em 0 1em;
line-height: 1.5;
}
.single-article > h1:first-child, .single-article > h2:not(.section-title):first-child {
margin-top: 0.2em;
}
.single-article > h3:not(.ordered-title) {
font-size: 24px;
font-weight: bold;
display: block;
margin: 1.5em 0 1em;
line-height: 1.5;
background-color: #edfaff;
padding: 0.3em 0.6em;
color: #165dc9;
}
.single-article > h3:not(.ordered-title):first-child {
margin-top: 0.2em;
}
.single-article > ul, .single-article > ol {
padding-left: 1.2em;
list-style: initial;
}
.single-article .single-post-meta {
font-size: 12px;
letter-spacing: 0;
line-height: 1.5;
padding: 0 0 8px;
border-bottom: 1px dotted #999999;
margin-bottom: 40px;
text-transform: capitalize;
color: #999999;
}
.single-article > table {
width: 100%;
border: 1px solid #e3e3e3;
}
.single-article > table td, .single-article > table th, .single-article > table tr {
border: 1px solid #e3e3e3;
padding: 8px 10px;
font-size: 14px;
vertical-align: middle;
}
.single-article > table th:first-child, .single-article > table td:first-child {
background-color: #f3f3f3;
width: 30%;
min-width: 100px;
text-align: center;
font-weight: bold;
} @media (max-width: 1700px) {
.bkt {
width: 50px;
height: 50px;
border-radius: 0;
overflow: hidden;
text-indent: -9999999999999999999px;
background-color: #eaac01;
right: 0;
bottom: 160px;
left: auto;
-webkit-transform: none;
transform: none;
font-size: 24px;
}
.bkt svg {
position: absolute;
width: auto;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-left: 0;
}
.bkt:hover {
color: #165dc9;
}
}
@media (max-width: 1400px) {
.sticky-footer {
padding: 0 30px;
}
.header__main .contact-info .row {
font-size: 0.9vw;
}
.header__main .contact-info .row:nth-child(2) {
font-size: 2.5vw;
}
.header__main .contact-info {
margin-right: 2%;
}
.header__main .banner {
width: 40%;
}
.header__main {
padding: 8px 0;
}
.header__main .brand a {
-webkit-transform-origin: 40% 10%;
transform-origin: 40% 10%;
-webkit-transform: translateY(0px) scale(1.5);
transform: translateY(0px) scale(1.5);
}
.site-navigation > ul a {
padding: 0 20px;
font-size: 14px;
height: 50px;
} .page-header .inner p {
font-size: 32px;
}
}
@media (max-width: 1100px) {
.wpcf7-form ul {
margin: 40px auto 30px;
}
.wpcf7-form ul li div.control-item {
font-size: 14px;
}
.wpcf7-form ul li {
padding: 25px 10px;
}
body:not(.home) .header__main .brand {
width: 90px;
}
.page-header .inner p {
font-size: 28px;
}
.site-navigation__wraper,
.header__main .contact-info,
.header__icon,
.header__main .banner,
.header--top h1 {
display: none;
}
.site-header {
position: fixed;
left: 0;
top: 0;
right: 0;
width: 100%;
z-index: 102;
background-color: #fff;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.site-header .inner {
padding:0 !important;
}
.header__main .brand a {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: translateX(30px) scale(1.5);
transform: translateX(30px) scale(1.5);
}
.header__main .brand {
width: 120px;
padding:40px 0 0;
}
.header--top {
min-height: 29px;
max-height: 29px;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
background-color: #165dc9;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.header--top .btn-group a {
background-color: transparent !important;
border-radius: 0px;
color: white;
}
.header--top .btn-group {
padding-right: 12px;
}
main {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
main .primary {
width: 100%;
}
main .secondary {
width: 100%;
}
.widget .showcase-content,
.widget .qa-card-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.widget .showcase-content .showcase-card,
.widget .showcase-content .qa-card,
.widget .qa-card-list .showcase-card,
.widget .qa-card-list .qa-card {
-ms-flex-preferred-size: 31%;
flex-basis: 31%;
}
.site-footer .footer-nav {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.site-footer .footer-nav .col {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.site-footer .footer-nav .col:nth-child(3), .site-footer .footer-nav .col:nth-child(4), .site-footer .footer-nav .col:nth-child(5) {
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
margin-top: 30px;
}
.article-list {
margin: 30px 0;
}
}
@media (max-width: 900px) {
.wp-block-columns {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.wp-block-columns.hasfigure .wp-block-column:first-child {
width: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.wp-block-columns.hasfigure .wp-block-image {
height: 50vw;
min-height: 200px;
position: relative;
}
.wp-block-columns.hasfigure .wp-block-image img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.wp-block-columns.hasfigure .wp-block-column:last-child {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
margin-top: 10px;
margin-left: 0;
}
.wp-block-column,
.wp-block-column:not(:first-child),
.wp-block-column:not(:last-child) {
width: 100%;
margin-left: 0;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
margin-right: 0;
}
}
@media (max-width: 700px) {
.article-list .cell-wrapper {
display: block;
}
.article-list .cell-wrapper .cell-figure,
.article-list .cell-wrapper .cell-text {
width: 100%;
margin: 0 0 20px;
}
.article-list .cell-wrapper .cell-text .cell-title {
font-size: 18px;
}
.sticky-footer {
position: relative !important;
left: auto !important;
right: auto !important;
height: auto !important;
-webkit-transform: none !important;
transform: none !important;
-webkit-transition: none !important;
transition: none !important;
padding: 0;
}
.sticky-footer.float.sink, .sticky-footer.float, .sticky-footer.sink {
-webkit-transform: none !important;
transform: none !important;
-webkit-transition: none !important;
transition: none !important;
}
.sticky-footer .inner {
padding: 0;
}
.sticky-footer .inner a {
right: 9.6%;
width: 81%;
bottom: 40.2%;
height: 24%;
}
.sticky-footer .inner a.sticky-tel {
bottom: 9.2%;
right: 9.5%;
height: 25%;
width: 81.2%;
}
.bkt {
bottom: 62px;
}
.copyright {
padding-bottom: 10px;
}
.site-footer .footer-nav {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: block;
}
.site-footer .footer-nav .col {
width: 100%;
margin-bottom: 20px !important;
margin-top: 20px !important;
}
}
@media (max-width: 600px) {
.single-article > h1, .single-article > h2:not(.section-title) {
font-size: 24px;
}
.single-article > h3 {
font-size: 20px;
}
.single-article .wp-block-image {
float: none;
width: 100%;
}
.single-article .wp-block-image .alignleft,
.single-article .wp-block-image .alignright,
.single-article .wp-block-image .aligncenter,
.single-article .wp-block-image .alignnone {
float: none;
margin: 25px 0;
width: 100%;
}
.single-article .wp-block-image img {
width: 100%;
margin: 0;
display: block;
}
.wpcf7-form ul li label,
.wpcf7-form ul li div.label {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.wpcf7-form ul li div.control-item {
width: 100%;
min-width: 100%;
margin-bottom: 6px;
font-weight: bold;
}
.wpcf7-form ul li {
padding: 16px 0px;
}
.page-header .inner p {
font-size: 22px;
}
.single-article p {
font-size: 14px;
}
.hero-wrapper .inner {
display: none;
}
.hero-wrapper img {
position: relative;
width: 100%;
-webkit-transform: none;
transform: none;
height: auto;
display: block;
}
main {
margin: 20px auto;
}
.inner,
main {
padding: 0 20px;
} .voc-article .article-content .cell-info,
.voc-article .article-content .cell-link,
.voc-article .article-content .term-link {
display: block;
}
.voc-article .article-content {
padding-bottom: 60px;
}
.voc-article .article-content .term-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.article-content .term-link a {
max-width: 200px;
width: 50%;
min-width: 100px;
}
.voc-article .article-content .cell.voc {
padding-bottom: 20px;
}
.voc-article .article-content .cell .cell-wrapper {
padding-bottom: 40px;
}
.article-content .cell .cell-wrapper {
padding-bottom: 0;
}
.article-content .cell.orange .cell-wrapper,
.article-content .cell.outdoor-water-circulation .cell-wrapper {
position: relative;
}
.article-content {
margin: 2px 0 0 -2px;
display: block;
}
.article-content .cell {
width: 100%;
padding: 0 0 20px 20px;
} .article-content .cell-info {
padding: 15px;
font-size: 15px;
line-height: 1.8;
}
.article-content .cell-info2 {
padding: 15px;
font-size: 12px;
line-height: 1.8;
height: 120px;
}
.article-content .cell-info3 {
padding: 15px;
font-size: 12px;
line-height: 1.8;
}
.article-content .cell-title {
font-size: 18px;
}
.hidden-anchor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
display: block;
z-index: 10;
}
.hidden-anchor ~ img {
z-index: 1;
}
.article-content .cell-figure {
padding-top: 52%;
}
.article-content .cell-figure .card-term {
font-size: 12px;
}
.area-content dl {
display: block;
padding: 20px;
}
.area-content dl dt {
width: 100%;
padding: 0;
}
.area-content dl dd {
width: 100%;
padding: 0;
margin-top: 6px;
}
.article-content .cell-title-text {
padding: 15px;
}
.widget .showcase-content .showcase-card,
.widget .showcase-content .qa-card,
.widget .qa-card-list .showcase-card,
.widget .qa-card-list .qa-card {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
width: 100%;
}
.article-list {
margin: 20px 0;
}
}
@media (max-width: 500px) {
.wpcf7-form .sublist {
margin: 10px 0;
display: block;
min-width: 100%;
}
.wpcf7-form .sublist dl {
display: block;
}
.wpcf7-form .sublist dl dt,
.wpcf7-form .sublist dl dd {
width: 100%;
}
.form_submit input[type=submit] {
margin: 25px auto;
}
}
@media (max-width: 430px) {
.header__main .brand {
width: 100px;
}
}
.sticky-mobile-btn {
width: 100%;
height: auto;
left: 0;
right: 0;
bottom: 0;
position: fixed;
z-index: 90;
display: none;
}
@media (max-width:700px) {
.sticky-mobile-btn {
display: block;
}
}
body.hide-fixed-mobile-banner .sticky-mobile-btn {
display: none;
}
@media (max-width: 700px) {
.bkt {
bottom: 15vw;
}
}
.widget-title, .section-title{ width: 100%;
}
.sousyoku {
font-size: 1.8rem !important;
color: #165dc9 !important;
text-decoration: underline !important;
font-weight: bold !important;
padding: 9px !important;
}
.list-style {
font-size: 13px;
margin-bottom: 15px;
}
.h2-area {
font-size: 30px !important;
color: #2478fa !important;
}
.h1-area {
padding: 0.5em 0 !important; border-top: solid 3px #6dc4f8 !important; border-bottom: solid 3px #6dc4f8 !important; color: #6dc4f8 !important;
}
.pc-areapage { display: block !important; }
.sp-areapage { display: none !important; }
@media only screen and (max-width: 750px) {
.pc-areapage { display: none !important; }
.sp-areapage { display: block !important; }
}
.underline-area{
text-decoration:underline;
text-decoration-color:#165dc9 !important;
color: #165dc9 !important;
}
@media (min-width: 600px){
.main_banner {
padding: 16% 0% 0.7% 88%;
background: url(https://suido-expert.com/wp-content/themes/mow2019/assets/img/common/bnr_main.png);
background-size: 100%;
}
img.mail-button {
width: 98%;
}
}
@media (max-width: 600px){
.main_visual {
display: none;
}
.main_banner {
display: none;
}
} .center{ text-align:center; }
.margin0auto{ margin:0 auto; }
.f15{ font-size:15px; }
.f16{ font-size:16px; }
.f17{ font-size:17px; }
.f18{ font-size:18px; }
.f19{ font-size:19px; }
.f20{ font-size:20px; }
.f21{ font-size:21px; }
.f22{ font-size:22px; }
.f23{ font-size:23px; }
.f24{ font-size:24px; }
.f25{ font-size:25px; }
.f26{ font-size:26px; }
.f27{ font-size:27px; }
.f28{ font-size:28px; }
.f29{ font-size:29px; }
.f30{ font-size:30px; }
.pt5{ padding-top:5px; }
.pt10{ padding-top:10px; }
.pt15{ padding-top:15px; }
.pt20{ padding-top:20px; }
.pt25{ padding-top:25px; }
.pt30{ padding-top:30px; }
.pt35{ padding-top:35px; }
.pt40{ padding-top:40px; }
.pt45{ padding-top:45px; }
.pt50{ padding-top:50px; }
.pr5{ padding-right:5px; }
.pr10{ padding-right:10px; }
.pr15{ padding-right:15px; }
.pr20{ padding-right:20px; }
.pr25{ padding-right:25px; }
.pr30{ padding-right:30px; }
.pr35{ padding-right:35px; }
.pr40{ padding-right:40px; }
.pr45{ padding-right:45px; }
.pr50{ padding-right:50px; }
.pb5{ padding-bottom:5px; }
.pb10{ padding-bottom:10px; }
.pb15{ padding-bottom:15px; }
.pb20{ padding-bottom:20px; }
.pb25{ padding-bottom:25px; }
.pb30{ padding-bottom:30px; }
.pb35{ padding-bottom:35px; }
.pb40{ padding-bottom:40px; }
.pb45{ padding-bottom:45px; }
.pb50{ padding-bottom:50px; }
.pl5{ padding-left:5px; }
.pl10{ padding-left:10px; }
.pl15{ padding-left:15px; }
.pl20{ padding-left:20px; }
.pl25{ padding-left:25px; }
.pl30{ padding-left:30px; }
.pl35{ padding-left:35px; }
.pl40{ padding-left:40px; }
.pl45{ padding-left:45px; }
.pl50{ padding-left:50px; }
.mt5{ margin-top:5px; }
.mt10{ margin-top:10px; }
.mt15{ margin-top:15px; }
.mt20{ margin-top:20px; }
.mt25{ margin-top:25px; }
.mt30{ margin-top:30px; }
.mt35{ margin-top:35px; }
.mt40{ margin-top:40px; }
.mt45{ margin-top:45px; }
.mt50{ margin-top:50px; }
.mr5{ margin-right:5px; }
.mr10{ margin-right:10px; }
.mr15{ margin-right:15px; }
.mr20{ margin-right:20px; }
.mr25{ margin-right:25px; }
.mr30{ margin-right:30px; }
.mr35{ margin-right:35px; }
.mr40{ margin-right:40px; }
.mr45{ margin-right:45px; }
.mr50{ margin-right:50px; }
.mb5{ margin-bottom:5px; }
.mb10{ margin-bottom:10px; }
.mb15{ margin-bottom:15px; }
.mb20{ margin-bottom:20px; }
.mb25{ margin-bottom:25px; }
.mb30{ margin-bottom:30px; }
.mb35{ margin-bottom:35px; }
.mb40{ margin-bottom:40px; }
.mb45{ margin-bottom:45px; }
.mb50{ margin-bottom:50px; }
.ml5{ margin-left:5px; }
.ml10{ margin-left:10px; }
.ml15{ margin-left:15px; }
.ml20{ margin-left:20px; }
.ml25{ margin-left:25px; }
.ml30{ margin-left:30px; }
.ml35{ margin-left:35px; }
.ml40{ margin-left:40px; }
.ml45{ margin-left:45px; }
.ml50{ margin-left:50px; }
.mt5{ margin-top:5px; }
.mt10{ margin-top:10px; }
.mt15{ margin-top:15px; }
.mt20{ margin-top:20px; }
.mt25{ margin-top:25px; }
.mt30{ margin-top:30px; }
.mt35{ margin-top:35px; }
.mt40{ margin-top:40px; }
.mt45{ margin-top:45px; }
.mt50{ margin-top:50px; }
.mr5{ margin-top:5px; }
.mr10{ margin-top:10px; }
.mr15{ margin-top:15px; }
.mr20{ margin-top:20px; }
.mr25{ margin-top:25px; }
.mr30{ margin-top:30px; }
.mr35{ margin-top:35px; }
.mr40{ margin-top:40px; }
.mr45{ margin-top:45px; }
.mr50{ margin-top:50px; }
.mb5{ margin-top:5px; }
.mb10{ margin-top:10px; }
.mb15{ margin-top:15px; }
.mb20{ margin-top:20px; }
.mb25{ margin-top:25px; }
.mb30{ margin-top:30px; }
.mb35{ margin-top:35px; }
.mb40{ margin-top:40px; }
.mb45{ margin-top:45px; }
.mb50{ margin-top:50px; }
.ml5{ margin-top:5px; }
.ml10{ margin-top:10px; }
.ml15{ margin-top:15px; }
.ml20{ margin-top:20px; }
.ml25{ margin-top:25px; }
.ml30{ margin-top:30px; }
.ml35{ margin-top:35px; }
.ml40{ margin-top:40px; }
.ml45{ margin-top:45px; }
.ml50{ margin-top:50px; }
.green_foot {
width: 27% !important;
padding: 0 0 20px 20px !important;
float: left;
}
.blue_foot {
width: 46% !important;
padding: 0 0 20px 20px !important;
float: left;
}
.pink_foot {
width: 27% !important;
padding: 0 0 20px 20px !important;
float: left;
}
.border_foot { border: solid 1px #cccccc; }
.section-title_green_foot {
line-height: 1;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px; color: #0fa333;
padding: 14px 14px 14px 25px;
position: relative;
}
.section-title_black_foot {
line-height: 1;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px; color: #6f6f6f;
padding: 14px 14px 14px 25px;
position: relative;
}
.section-title_yellow_foot {
line-height: 1;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px; color: #e7ad03;
padding: 14px 14px 14px 25px;
position: relative;
}
.section-title_green_foot:before {
content: "";
display: block;
width: 4px;
top: 10px;
left: 10px;
bottom: 10px;
background-color: #0fa333;
position: absolute;
}
.section-title_black_foot:before {
content: "";
display: block;
width: 4px;
top: 10px;
left: 10px;
bottom: 10px;
background-color: #6f6f6f;
position: absolute;
}
.section-title_yellow_foot:before {
content: "";
display: block;
width: 4px;
top: 10px;
left: 10px;
bottom: 10px;
background-color: #e7ad03;
position: absolute;
}
.article-content .cell-info2 .fee-discount2 {
font-size: 17px;
color: #000;
text-align: center;
line-height: 1.4;
text-transform: uppercase;
padding: 6px 0;
letter-spacing: 0;
}
@media only screen and (max-width: 750px) {
.pc{ display:none; }
} @media only screen and (max-width: 1100px) and (min-width: 600px){
.side_cta {
display: none;
}
}
@media only screen and (min-width: 600px){
.side_cta {
background: url(https://suido-expert.com/wp-content/themes/mow2019/assets/img/common/bnr_side.png);
background-size: 100%;
padding: 148% 3% 4%;
margin: 30px auto;
}
}
@media only screen and (max-width: 600px){
.side_cta {
background: url(https://suido-expert.com/wp-content/themes/mow2019/assets/img/common/bnr_side.png);
background-size: 100%;
padding: 150% 10% 5%;
margin: 30px auto;
clear: both;
}
}
img.side_mail-button {
width: 100%;
}  @media (min-width: 1100px){
.main_contents_banner {
padding: 27% 7.2% 0.3% 71.8%;
background: url(https://suido-expert.com/wp-content/themes/mow2019/assets/img/common/bnr_contents.jpg);
background-size: 100%;
}
.hero-wrapper {
height: 486px;
}
.main_contents_banner_freme.pc {
display: flex;
-webkit-box-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
justify-content: space-between;
margin: auto;
max-width: 1280px;
padding: 0 40px 0 360px;
}
img.side_mail-button {
width: 100%;
}
}
@media only screen and (max-width: 1100px) and (min-width: 600px){
.main_contents_banner {
padding: 27% 7.2% 0.3% 71.8%;
background: url(https://suido-expert.com/wp-content/themes/mow2019/assets/img/common/bnr_contents.jpg);
background-size: 100%;
}
.main_contents_banner_freme.pc {
padding: 0 40px;
}
}  .h2-column {
line-height: 1 !important;
white-space: nowrap !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
-webkit-box-pack: justify !important;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
font-size: 18px !important;
background-color: #165dc9 !important;
color: white !important;
padding: 14px 14px 14px 25px !important;
position: relative !important;
}
.single__term01 {
color: #fff !important;
font-size: 1.0rem !important;
background-color: #c1272d !important;
padding: 5px 15px !important;
margin: 5px 0 15px !important;
display: inline-block !important;
}  .container-case {
font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
text-align: center;
padding-top: 25px;
padding-bottom: 30px;
}
.btn-open-case {
display: inline-block;
width: 180px;
height:50px;
text-align: center;
background-color: #165dc9 !important;
font-size: 16px;
line-height: 52px;
color: #FFF !important;
text-decoration: none;
font-weight: bold;
border: 2px solid #165dc9;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-open-case:after{
width: 100%;
height: 0;
content:"";
position: absolute;
top: 50%;
left: 50%;
background : #FFF;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: .2s;
z-index: -1;
}
.btn-open-case:hover{
color: #165dc9 !important;
}
.btn-open-case:hover:after{
height: 240%;
opacity: 1;
}
.btn-open-case:active:after{
height: 340%;
opacity: 1;
}
.area-list-midashi {
position: relative;
padding: 5px 5px 5px 42px;
background: #f4f9ff;
font-size: 20px;
color: white;
margin-left: -33px;
line-height: 1.3;
z-index:-1;
}
.area-list-midashi:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index:-2
}
.column-midashi-h2 {
padding: 0.3em; color: #494949; background: #e5f4fd; border-left: solid 5px #165dc9; }  @media (min-width: 600px){
.sp{
display: none;
}
.pc.reason01 {
background: url(https://suido-expert.com/wp-content/themes/mow2019/assets/img/common/ups.jpg);
background-size: 100%;
width: 100%;
padding: 13.3% 33.5% 70% 33.5%;
}
.flow {
background: url(https://suido-expert.com/wp-content/themes/mow2019/assets/img/common/contents_bg2.png);
background-size: 100%;
margin-bottom: 30px;
}
ul.flow-detail {
display: table;
table-layout: fixed;
width: 100%;
padding-top: 21%;
}
li.flow-right {
border-right: 20px solid #fff0;
border-left: 5px solid #fff0;
}
li.flow-center {
border-left: 10px solid #fff0;
border-right: 15px solid #fff0;
}
li.flow-left {
border-left: 20px solid #fff0;
}
p.flow-detail-midashi {
font-size: 20px;
color: #165dc9;
border-bottom: solid 2px #165dc9;
}
p.flow-detail-content {
padding: 10px;
font-size: 1.2rem;
height: 98px;
text-align: left;
}
.flow-detail li {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.add1 {
margin-top: 4.3%;
}
.service-box {
margin: 0 auto 30px;
}
.service-box2 {
padding: 30px;
width: 100%;
overflow: hidden;
}
.service-img {
width: 30%;
float: left;
}
.service-content {
width: 70%;
float: right;
}
.service-midashi {
color: #165dc9;
font-size: 2.0rem;
border-bottom: 3px solid #165dc9;
}
.service-coment {
padding: 20px 0;
}
}
@media (max-width: 600px){
.pc{
display: none;
}
.reason2 {
width: 100%;
}
.reason3 {
margin: 0 auto 10px;
}
p.r-midashi {
font-size: 2.5rem;
text-align: center;
font-weight: bold;
color: #165dc9;
}
img.reason4 {
margin: 0 auto 20px;
}
.reason5 {
width: 100%;
margin: -30px auto 50px;
}
.reason7 {
margin: 0 auto 20px;
}
.service-img img {
margin: 10px auto;
}
.service-midashi {
color: #165dc9;
font-size: 2.0rem;
border-bottom: 3px solid #165dc9;
}
p.service-coment {
padding: 20px 0;
}
.flow-box {
margin-bottom: 30px;
}
}
p.flow-coment {
text-align: center;
padding: 10px 0;
font-weight: bold;
color: #d70834;
}	
.red {
color: #FF0000;
}   .wsp-container h1,.wsp-container h2{
font-size: 32px;
font-weight: bold;
display: block;
margin: 1.5em 0 0.5em;
line-height: 1.5;
}
.wsp-container h1{
padding: 0.5em 0 !important;
border-top: solid 3px #6dc4f8 !important;
border-bottom: solid 3px #6dc4f8 !important;
color: #6dc4f8 !important;
}	
.wsp-container h2{
padding: 0.3em;
color: #494949;
background: #e5f4fd;
border-left: solid 5px #165dc9;
}
.wsp-container li::before {
content: "-----";
font-size: 17px;
font-size: 1.4rem;
margin-left: -23px;
margin-right: 12px;
letter-spacing: -3px;
}
.wsp-container li {
line-height: 1.7;
margin-left: 10px;
padding: 0 0 0 22px;
border-left: 1px solid #000;
list-style-type: none;
}
.wsp-container li a {
text-decoration:none;
font-size: 17px;
}  .center{ text-align:center; }
.margin0auto{ margin:0 auto; }
.bold{font-weight:bold;}
.red{color:#FF0000;}
.f15{ font-size:15px; }
.f16{ font-size:16px; }
.f17{ font-size:17px; }
.f18{ font-size:18px; }
.f19{ font-size:19px; }
.f20{ font-size:20px; }
.f21{ font-size:21px; }
.f22{ font-size:22px; }
.f23{ font-size:23px; }
.f24{ font-size:24px; }
.f25{ font-size:25px; }
.f26{ font-size:26px; }
.f27{ font-size:27px; }
.f28{ font-size:28px; }
.f29{ font-size:29px; }
.f30{ font-size:30px; }
.pt5{ padding-top:5px; }
.pt10{ padding-top:10px; }
.pt15{ padding-top:15px; }
.pt20{ padding-top:20px; }
.pt25{ padding-top:25px; }
.pt30{ padding-top:30px; }
.pt35{ padding-top:35px; }
.pt40{ padding-top:40px; }
.pt45{ padding-top:45px; }
.pt50{ padding-top:50px; }
.pr5{ padding-right:5px; }
.pr10{ padding-right:10px; }
.pr15{ padding-right:15px; }
.pr20{ padding-right:20px; }
.pr25{ padding-right:25px; }
.pr30{ padding-right:30px; }
.pr35{ padding-right:35px; }
.pr40{ padding-right:40px; }
.pr45{ padding-right:45px; }
.pr50{ padding-right:50px; }
.pb5{ padding-bottom:5px; }
.pb10{ padding-bottom:10px; }
.pb15{ padding-bottom:15px; }
.pb20{ padding-bottom:20px; }
.pb25{ padding-bottom:25px; }
.pb30{ padding-bottom:30px; }
.pb35{ padding-bottom:35px; }
.pb40{ padding-bottom:40px; }
.pb45{ padding-bottom:45px; }
.pb50{ padding-bottom:50px; }
.pl5{ padding-left:5px; }
.pl10{ padding-left:10px; }
.pl15{ padding-left:15px; }
.pl20{ padding-left:20px; }
.pl25{ padding-left:25px; }
.pl30{ padding-left:30px; }
.pl35{ padding-left:35px; }
.pl40{ padding-left:40px; }
.pl45{ padding-left:45px; }
.pl50{ padding-left:50px; }
.mt5{ margin-top:5px; }
.mt10{ margin-top:10px; }
.mt15{ margin-top:15px; }
.mt20{ margin-top:20px; }
.mt25{ margin-top:25px; }
.mt30{ margin-top:30px; }
.mt35{ margin-top:35px; }
.mt40{ margin-top:40px; }
.mt45{ margin-top:45px; }
.mt50{ margin-top:50px; }
.mr5{ margin-right:5px; }
.mr10{ margin-right:10px; }
.mr15{ margin-right:15px; }
.mr20{ margin-right:20px; }
.mr25{ margin-right:25px; }
.mr30{ margin-right:30px; }
.mr35{ margin-right:35px; }
.mr40{ margin-right:40px; }
.mr45{ margin-right:45px; }
.mr50{ margin-right:50px; }
.mb5{ margin-bottom:5px; }
.mb10{ margin-bottom:10px; }
.mb15{ margin-bottom:15px; }
.mb20{ margin-bottom:20px; }
.mb25{ margin-bottom:25px; }
.mb30{ margin-bottom:30px; }
.mb35{ margin-bottom:35px; }
.mb40{ margin-bottom:40px; }
.mb45{ margin-bottom:45px; }
.mb50{ margin-bottom:50px; }
.ml5{ margin-left:5px; }
.ml10{ margin-left:10px; }
.ml15{ margin-left:15px; }
.ml20{ margin-left:20px; }
.ml25{ margin-left:25px; }
.ml30{ margin-left:30px; }
.ml35{ margin-left:35px; }
.ml40{ margin-left:40px; }
.ml45{ margin-left:45px; }
.ml50{ margin-left:50px; }
.mt5{ margin-top:5px; }
.mt10{ margin-top:10px; }
.mt15{ margin-top:15px; }
.mt20{ margin-top:20px; }
.mt25{ margin-top:25px; }
.mt30{ margin-top:30px; }
.mt35{ margin-top:35px; }
.mt40{ margin-top:40px; }
.mt45{ margin-top:45px; }
.mt50{ margin-top:50px; }
.mr5{ margin-top:5px; }
.mr10{ margin-top:10px; }
.mr15{ margin-top:15px; }
.mr20{ margin-top:20px; }
.mr25{ margin-top:25px; }
.mr30{ margin-top:30px; }
.mr35{ margin-top:35px; }
.mr40{ margin-top:40px; }
.mr45{ margin-top:45px; }
.mr50{ margin-top:50px; }
.mb5{ margin-top:5px; }
.mb10{ margin-top:10px; }
.mb15{ margin-top:15px; }
.mb20{ margin-top:20px; }
.mb25{ margin-top:25px; }
.mb30{ margin-top:30px; }
.mb35{ margin-top:35px; }
.mb40{ margin-top:40px; }
.mb45{ margin-top:45px; }
.mb50{ margin-top:50px; }
.ml5{ margin-top:5px; }
.ml10{ margin-top:10px; }
.ml15{ margin-top:15px; }
.ml20{ margin-top:20px; }
.ml25{ margin-top:25px; }
.ml30{ margin-top:30px; }
.ml35{ margin-top:35px; }
.ml40{ margin-top:40px; }
.ml45{ margin-top:45px; }
.ml50{ margin-top:50px; }
.green_foot {
width: 27% !important;
padding: 0 0 20px 20px !important;
float: left;
}
.blue_foot {
width: 46% !important;
padding: 0 0 20px 20px !important;
float: left;
}
.pink_foot {
width: 27% !important;
padding: 0 0 20px 20px !important;
float: left;
}
.border_foot { border: solid 1px #cccccc; }
.section-title_green_foot {
line-height: 1;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px; color: #0fa333;
padding: 14px 14px 14px 25px;
position: relative;
}
.section-title_black_foot {
line-height: 1;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px; color: #6f6f6f;
padding: 14px 14px 14px 25px;
position: relative;
}
.section-title_yellow_foot {
line-height: 1;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 18px; color: #e7ad03;
padding: 14px 14px 14px 25px;
position: relative;
}
.section-title_green_foot:before {
content: "";
display: block;
width: 4px;
top: 10px;
left: 10px;
bottom: 10px;
background-color: #0fa333;
position: absolute;
}
.section-title_black_foot:before {
content: "";
display: block;
width: 4px;
top: 10px;
left: 10px;
bottom: 10px;
background-color: #6f6f6f;
position: absolute;
}
.section-title_yellow_foot:before {
content: "";
display: block;
width: 4px;
top: 10px;
left: 10px;
bottom: 10px;
background-color: #e7ad03;
position: absolute;
}
.article-content .cell-info2 .fee-discount2 {
font-size: 17px;
color: #000;
text-align: center;
line-height: 1.4;
text-transform: uppercase;
padding: 6px 0;
letter-spacing: 0;
} @media (min-width: 600px){
.sp{
display: none;
}
.pc.reason01 {
background: url(https://suido-expert.com/wp-content/themes/mow2019/assets/img/common/ups.jpg);
background-size: 100%;
width: 100%;
padding: 13.3% 33.5% 70% 33.5%;
}
.flow {
background: url(https://suido-expert.com/wp-content/themes/mow2019/assets/img/common/contents_bg2.png);
background-size: 100%;
margin-bottom: 30px;
}
ul.flow-detail {
display: table;
table-layout: fixed;
width: 100%;
padding-top: 21%;
}
li.flow-right {
border-right: 20px solid #fff0;
border-left: 5px solid #fff0;
}
li.flow-center {
border-left: 10px solid #fff0;
border-right: 15px solid #fff0;
}
li.flow-left {
border-left: 20px solid #fff0;
}
p.flow-detail-midashi {
font-size: 20px;
color: #165dc9;
border-bottom: solid 2px #165dc9;
}
p.flow-detail-content {
padding: 10px;
font-size: 1.2rem;
height: 98px;
text-align: left;
}
.flow-detail li {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.add1 {
margin-top: 4.3%;
}
p.flow-coment {
text-align: center;
padding: 10px 0;
font-weight: bold;
color: #d70834;
}	
}
@media (max-width: 600px){
.pc{
display: none;
}
.reason2 {
width: 100%;
}
.reason3 {
margin: 0 auto 10px;
}
p.r-midashi {
font-size: 2.5rem;
text-align: center;
font-weight: bold;
color: #165dc9;
}
img.reason4 {
margin: 0 auto 20px;
}
.reason5 {
width: 100%;
margin: -30px auto 50px;
}
.reason7 {
margin: 0 auto 20px;
}
} .wp-block-column2{    flex-basis: 80%;
margin: 0 auto 40px;}
.wp-block-column2 ul {
font-size: 14px;
background-color: #f6f6f6;
padding: 14px 14px 14px 20px;
border-radius: 6px
}
.wp-block-column2 ul li {
padding-left: 1em;
line-height: 1.8;
position: relative;
width:50%;
float:left;
font-size:18px;
font-weight:bold;
}
.wp-block-column2 ul li strong {
display: block;
font-weight: bold
}
.wp-block-column2 ul li:not(:last-child) {
margin-bottom: 0.6em
}
.wp-block-column2 ul li:before {
content: "";
display: block;
width: 6px;
height: 6px;
background-color: #eaac01;
position: absolute;
top: 0.9em;
left: 0;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translateY(-3px) rotate(45deg);
transform: translateY(-3px) rotate(45deg)
}
.kiken{font-size:45px; text-align:center; margin-bottom:80px; font-weight:bold;}
.kiken span{color:#FF0000;}
.ryoukin{width:90% !important; margin:0 auto 80px !important;}
.ryoukin th,.ryoukin td{width:50% !important;}
.ryoukin th{background:#f1f1f1 !important;}
.ryoukin .midashi th{background:#ffffe3 !important;}
.ryoukin .midashi{font-weight:bold;}
@media (max-width: 600px){
.wp-block-column2 ul li {width:100%; float:none;}
.kiken{font-size:35px; text-align:center; margin-bottom:40px; font-weight:bold;}
.reason3,.reason7{width:100% !important;}
.article-content .blue,
.article-content .pink,
.article-content .green,
.article-content .orange,
.article-content .lightgreen,
.article-content .gray{
width: 50% !important;
padding: 0px 1px 7px 1px !important;
float: left !important;
}
}  body:before {
content:"";
height:100%;
float:left;
display:inline;
width:0;
margin-top:-32767px
} .cFix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
} * html .cFix {height:1%}
.cFix {display:block}  .fee-text{
font-size:1.6rem
}
@media only screen and (max-width: 500px){
.fee-text{
font-size:1.3rem
}
}
 @-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: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.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;
}
}