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

  html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p,
a, img,
dl, dt, dd, ol, ul, li,
strong, sub, sup, i, small, address, time,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, footer, nav, section, article, aside,
figure, figcaption, canvas, audio, video {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-weight: normal;
font-size: 100%;
vertical-align: baseline;
}
article, aside, figure, figcaption,
footer, header, nav, section {
display: block;
}
html {
overflow-y: scroll;
min-height: 100%;
}
body {
min-height: 100%;
}
input, textarea, button {
margin: 0;
padding: 0;
font-size: 100%;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
a {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
color: rgba(0, 0, 0, 0.9);
text-decoration: none;
}
a:hover {
color: #e30b20;
text-decoration: none;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
body {
background: #ffffff;
color: #333;
font-size: 100%;
font: 400 87.5%/1.5em 'Open Sans', sans-serif;
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'Noto Sans Japanese', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
font-feature-settings: 'palt' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button {
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'Noto Sans Japanese', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
} html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
} ins {
background-color: #ff9;
color: #000;
text-decoration: none;
} mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
} hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
} body {
font-size: 14px;
line-height: 1.5;
text-align: left;
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'Noto Sans Japanese', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #2a201b;
}
a {
color: #2a201b;
text-decoration: none;
}
a:visited {
color: #2a201b;
text-decoration: none;
}
a:hover {
color: #e30b20;
}
img {
vertical-align: bottom;
}
#header {
width: 100%;
background: #faf8f4;
}
#header #logo {
position: absolute;
top: 5px;
left: 25px;
}
#header #logo img {
width: 35%;
height: auto;
}
#header #top_img img {
width: 100%;
height: auto;
margin: 15px 0 0;
}
#lead {
color: #f0ede6;
text-align: center;
margin: 30px auto 0;
width: 90%;
}
#lead p {
margin: 15px 0;
}
#lead p span {
display: block;
}
#contact_btn {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
margin: 30px auto 0;
width: 90%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#contact_btn a {
display: block;
color: #f0ede7;
text-decoration: none;
background-size: 30px 20px;
background-position: 50px 20px;
text-align: center;
padding: 15px 0 15px 30px;
font-size: 18px;
font-weight: bold;
}
#footer {
margin: 30px 0 0;
padding: 30px 10%;
border-top: solid 1px #f0ede7;
color: #f0ede7;
font-size: 12px;
text-align: center;
}
#footer span {
display: block;
margin: 0;
padding: 0;
}
#footer span.company_name {
font-weight: bold;
}
.tcenter {
text-align: center;
}
.invisible {
transition: opacity 0.5s ease;
opacity: 0.0;
}
.visible {
transition: opacity 0.5s ease;
opacity: 1.0;
}
.scaleUpIn {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: scale(1, 1);
opacity: 1.0;
}
.scaleUpOut {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: scale(1.3, 1.3);
opacity: 0.0;
}
.fromTopIn {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: translate(0, 0);
opacity: 1.0;
}
.fromTopOut {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: translate(0, -10px);
opacity: 0.0;
}
.fromBottomIn {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: translate(0, 0);
opacity: 1.0;
}
.fromBottomOut {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: translate(0, 10px);
opacity: 0.0;
}
.fromLeftIn {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: translate(0, 0);
opacity: 1.0;
}
.fromLeftOut {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: translate(-10px, 0);
opacity: 0.0;
}
.fromRightIn {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: translate(0, 0);
opacity: 1.0;
}
.fromRightOut {
transition: transform 1.0s ease, opacity 1.0s ease;
transform: translate(10px, 0);
opacity: 0.0;
}
@media (max-width: 699px) { .hide_pc {
display: inline-block !important;
}
.hide_sp {
display: none !important;
}
.wrapper {
width: 96%;
margin: 0 auto;
}
.btn {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
color: #FFFFFF;
font-size: 0.9rem;
font-weight: bold;
border-radius: 100px;
padding: 3px 20px;
border: none;
display: inline-block;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
}
.btn.h-contact {
background: #CF1141;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.img-wrapper {
position: relative;
padding-top: 56.25%;
}
.img-wrapper img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
.raised {
display: inline-block;
color: #FFF;
font-size: 1em;
text-decoration: none !important;
letter-spacing: 0.05em;
padding: 0.6em 1.3em;
border-radius: 2px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: .3s;
border: 1px solid #fff;
}
.raised:hover {
background: #f90;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.flat_button {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
cursor: pointer;
text-decoration: none;
color: #333;
}
.flat_button.mhover {
color: #000;
}
.flat_button.mhover:after {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.1;
}
.flat_button .rp-effect {
background: gray;
}
.ripple {
position: relative;
overflow: hidden;
}
.ripple .rp-effect {
position: absolute;
border-radius: 50%;
opacity: 0.35;
transform: scale(0);
background: #FFF;
animation: ripple 700ms;
pointer-events: none;
}
@-webkit-keyframes ripple {
to {
opacity: 0;
transform: scale(2);
}
}
@keyframes ripple {
to {
opacity: 0;
transform: scale(2);
}
}
header {
width: 100%;
overflow: hidden;
position: relative;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_icatch.jpg);
background-position: center;
background-size: cover;
height: 72vh;
}
header:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0px;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_header_bottom.png);
background-size: cover;
background-position: center;
height: 100px;
z-index: 2;
}
header:after {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh.png);
opacity: 1.0;
}
header .wrapper {
position: absolute;
z-index: 999;
width: 96%;
margin: auto;
left: 0;
right: 0;
top: 20%;
text-align: center;
padding: 20px 0px;
}
header .wrapper:before {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: #333;
opacity: 0.2;
}
header .wrapper h2 {
position: relative;
z-index: 2;
font-weight: bold;
font-size: 1.2rem;
line-height: 1.6rem;
letter-spacing: 0.1rem;
padding: 0 10px;
color: #ffffff;
text-shadow: 1px 0px 10px rgba(0, 0, 0, 0.4);
}
header .wrapper p {
position: relative;
z-index: 2;
margin: 15px auto;
padding: 0 10px;
color: #ffffff;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: 0.1rem;
text-shadow: 1px 0px 10px rgba(0, 0, 0, 0.9);
}
header .wrapper p.catch-points {
text-align: left;
display: inline-block;
}
header .wrapper p.catch-sales {
margin-top: 0px;
}
header .wrapper a {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: relative;
z-index: 2;
margin-top: 10px;
}
header nav {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 44px;
transition: .3s;
}
header nav:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background: #fff;
opacity: 0.1;
}
header nav .logo {
z-index: 100;
position: absolute;
top: 5px;
bottom: 0;
margin: auto;
left: 10px;
display: inline;
vertical-align: middle; background: url(https://billage.tremolo.me/wp/wp-content/uploads/2019/10/logo.png) no-repeat;
background-size: 100%;
width: 80px;
height: auto;
outline: none;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: block;
opacity: 1.0;
}
header nav .logo.mhover {
opacity: 0.5;
}
header nav.h-light {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
header nav.h-light:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background: #fff;
opacity: 0.9;
}
header nav.h-light .logo {
z-index: 100; background: url(https://billage.tremolo.me/wp/wp-content/uploads/2019/10/logo_bl.png) no-repeat;
background-size: 100%;
opacity: 0.8;
}
header nav.h-light .logo.mhover {
opacity: 0.5;
}
header nav ul {
z-index: 2;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
header nav ul li {
vertical-align: middle;
height: 44px;
font-size: 14px;
line-height: 44px;
padding: 0 14px;
display: none;
}
header nav ul li a {
-webkit-font-smoothing: antialiased;
color: #333;
text-decoration: none;
}
header nav ul li a.mhover {
color: #fff;
}
header nav ul li.intro {
font-weight: bold;
display: inline-block;
position: relative;
right: 0px;
padding: 0;
overflow: hidden;
}
header nav ul li.intro a {
text-shadow: none;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
padding: 15px 20px;
background: #e90000;
color: #fff;
font-weight: bold;
}
header nav ul li.intro a.mhover {
background: #f90;
}
header nav ul li.intro a.mhover:after {
content: "";
position: absolute;
background: #F90 !important;
}
header .bg_header_bottom {
position: absolute;
bottom: 0px;
z-index: 2;
margin: auto;
width: 100%;
height: auto;
}
.content {
position: relative;
z-index: 1;
background: #ffffff;
}
section {
padding: 60px 0;
}
section .title h2 {
position: relative;
font-size: 1.2rem;
font-weight: bold;
line-height: 1.6rem;
letter-spacing: 0.05rem;
text-align: center;
margin: 0px auto;
display: block;
}
section .title h2:after {
content: "";
width: 81px;
height: 15px;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_title_after.png?1537575275) no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background-size: 81px 15px;
background-position: center;
position: absolute;
top: 100px;
right: 50%;
left: 47%;
width: 81px;
height: 15px;
}
section .title h2.short:after {
content: "";
width: 40px;
height: 8px;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_title_after.png?1537575275) no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background-size: 40px 8px;
background-position: center;
position: absolute;
top: 50px;
right: 0;
left: 0;
width: 40px;
height: 8px;
margin: auto;
}
section .title h2.uline:after {
content: "";
background: #333;
position: absolute;
top: 50px;
right: 0;
left: 0;
width: 40px;
height: 3px;
margin: auto;
}
section .title h2.nouline:after {
content: "";
background: none;
}
section#target {
position: relative;
padding: 30px 0;
}
section#target .title h2 {
font-size: 1.2rem;
}
section#target .wrapper {
width: 86%;
margin: 0 auto;
}
section#target .container {
margin: 50px auto 20px;
display: flex;
flex-wrap: wrap;
}
section#target .container .item {
background: white;
width: 90%;
max-width: 320px;
padding: 25px 20px 30px 20px;
margin: 10px auto;
text-align: center;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
border-radius: 0px;
border: 1px solid #ccc;
border-top: 8px solid #e90000;
}
section#target .container .item span {
padding: 5px 10px;
color: white;
font-size: 0.8rem;
background: #A2A2A2;
border-radius: 100px;
}
section#target .container .item h3 {
color: #e90000;
margin-top: 15px;
margin-bottom: 15px;
padding-bottom: 2px;
font-size: 120%;
font-weight: bold;
letter-spacing: 0.1em;
border-bottom: 1px solid #e90000;
}
section#target .container .item p {
font-size: 0.9rem;
}
section#target .container .item .case {
padding: 5px 10px;
color: #ffffff;
font-size: 0.9rem;
letter-spacing: 0.05em;
background: #A2A2A2;
width: 60px;
margin: auto;
margin-bottom: 20px;
}
section#target .container .item .trouble01 {
width: 110px;
height: auto;
}
section#target .container .item .trouble02 {
width: 110px;
height: auto;
position: relative;
bottom: 10px;
}
section#target .container .item .trouble03 {
width: 110px;
height: auto;
position: relative;
bottom: 10px;
left: 14px;
}
section#target .bg_fline_gray {
background: linear-gradient(to right, #eeeeee, #dddddd);
height: 200px;
position: absolute;
bottom: 0px;
width: 100%;
z-index: -1;
}
section#feature {
position: relative;
padding: 40px 0 100px 0;
}
section#feature .bg_feature_banner {
width: 100%;
position: absolute;
z-index: -999;
top: 150px;
margin: auto;
display: inline-block;
vertical-align: top;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_flow_of_available.jpg);
background-size: cover;
height: 68%;
opacity: 0;
}
section#feature .bg_feature_banner:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh.png);
opacity: 0.5;
z-index: 1;
}
section#feature .bg_feature_banner .bg_img {
z-index: -999;
margin: auto;
width: 100%;
display: none !important;
}
section#feature .list {
position: relative;
display: inline-block;
z-index: 1;
top: 40px;
bottom: 0;
left: 5%;
right: 5%;
margin: auto;
width: 90%;
}
section#feature .list .list-item {
height: 100px;
margin: 30px 0;
border: none;
}
section#feature .list .list-item .list-item-header {
border: none;
padding: 0px;
height: 52px;
width: 100%;
}
section#feature .list .list-item .list-item-header:after {
content: "";
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
background: #e90000;
height: 2px;
}
section#feature .list .list-item .list-item-header label {
display: inline-block;
color: #e90000;
font-size: 18px;
font-weight: bold;
}
section#feature .list .list-item .list-item-header h3 {
display: inline-block;
padding: 0 10px;
font-size: 14px;
font-weight: bold;
color: #000;
}
section#feature .list .list-item .list-item-header p {
font-size: 16px;
}
section#feature .list .inner .col {
box-sizing: border-box;
padding: 10px 5px 0px 5px;
display: inline-block;
vertical-align: middle;
position: relative;
}
section#feature .list .inner .col:first-child span {
padding: 2px 12px;
background: #ffffff;
border-radius: 100px;
color: #e90000;
font-weight: bold;
font-size: 0.8rem;
text-align: center;
line-height: 80px;
}
section#feature .list .inner .col h3 {
font-weight: bold;
}
section#feature .list .inner .col p {
font-size: 0.7rem;
}
section#feature .bg-shadow {
position: absolute;
z-index: 1;
content: "";
display: block;
background: rgba(0, 0, 0, 0.1);
height: 100%;
width: 100%;
top: 0;
bottom: 0;
right: 0;
}
section#feature-contact {
position: relative;
padding: 50px 0;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_feature_contact.jpg);
background-size: cover;
z-index: 2;
}
section#feature-contact:after {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh.png);
opacity: 0.5;
z-index: -1;
}
section#feature-contact .wrapper {
width: 96%;
margin: 0 auto;
}
section#feature-contact .wrapper h3 {
color: white;
font-size: 1.4rem;
line-height: 1.8rem;
text-shadow: 0 0 14px rgba(0, 0, 0, 0.3);
}
section#feature-contact .container {
display: flex;
flex-wrap: wrap;
}
section#feature-contact .container .item {
padding: 0 10px;
}
section#feature-contact .container .item.btn-center {
width: 100%;
margin-top: 30px;
text-align: center;
}
section#feature-contact .container .item a {
padding: 0.2em 0.8em;
}
section#feature-contact .bg-shadow {
position: absolute;
z-index: -1;
content: "";
display: block;
background: rgba(0, 0, 0, 0.4);
height: 100%;
width: 100%;
top: 0;
bottom: 0;
right: 0;
}
section#feature-contact .btn {
text-align: center;
color: #ffffff;
font-size: 1.1rem;
font-weight: bold;
padding: 10px 20px;
border: none;
display: inline-block;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
}
section#work-flow {
background: #ffffff;
background-size: 100%;
padding: 50px 0;
}
section#work-flow .wrapper {
width: 94%;
margin: 60px auto;
border: 1px solid #ddd;
}
section#work-flow .row {
padding: 0;
display: flex;
text-align: center;
vertical-align: middle;
}
section#work-flow .row .col {
margin: 0;
}
section#work-flow .row .col.cando {
margin: 0;
width: 80%;
}
section#work-flow .row .col.flow {
position: relative;
z-index: 0;
padding: 30px 0;
width: 24%;
background: #E3E4EC;
text-align: center;
border-radius: 0px;
}
section#work-flow .row .col.flow.one {
background: #f0f0f0;
}
section#work-flow .row .col.flow.one h3 {
padding-top: 18px;
}
section#work-flow .row .col.flow.two {
background: #f0f0f0;
position: relative;
overflow: hidden;
}
section#work-flow .row .col.flow.two:before {
content: "";
display: block;
width: 1000px;
height: 500px;
background: #eaeaea;
transform: rotate(15deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 1;
z-index: -1;
}
section#work-flow .row .col.flow.two:after {
content: "";
display: block;
width: 1000px;
height: 500px;
background: #eaeaea;
transform: rotate(-15deg);
transform-origin: right top;
position: absolute;
top: 0;
right: 1px;
z-index: -1;
}
section#work-flow .row .col.flow.two h3 {
padding-top: 85px;
}
section#work-flow .row .col.flow.four {
background: #eaeaea;
position: relative;
overflow: hidden;
}
section#work-flow .row .col.flow.four:before {
content: "";
display: block;
width: 1000px;
height: 500px;
background: #dfdfdf;
transform: rotate(15deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 1;
z-index: -1;
}
section#work-flow .row .col.flow.four:after {
content: "";
display: block;
width: 1000px;
height: 500px;
background: #dfdfdf;
transform: rotate(-15deg);
transform-origin: right top;
position: absolute;
top: 0;
right: 1px;
z-index: -1;
}
section#work-flow .row .col.flow.four h3 {
padding-top: 18px;
}
section#work-flow .row .col.flow.five {
background: #dfdfdf;
position: relative;
overflow: hidden;
}
section#work-flow .row .col.flow.five:before {
content: "";
display: block;
width: 1000px;
height: 500px;
background: #c0c0c0;
transform: rotate(15deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 1;
z-index: -1;
}
section#work-flow .row .col.flow.five:after {
content: "";
display: block;
width: 1000px;
height: 500px;
background: #c0c0c0;
transform: rotate(-15deg);
transform-origin: right top;
position: absolute;
top: 0;
right: 1px;
z-index: -1;
}
section#work-flow .row .col.flow.five h3 {
padding-top: 18px;
}
section#work-flow .row .col.flow.six {
background: #c0c0c0;
position: relative;
overflow: hidden;
}
section#work-flow .row .col.flow.six:before {
content: "";
display: block;
width: 1000px;
height: 500px;
background: #666;
transform: rotate(15deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 1;
z-index: -1;
}
section#work-flow .row .col.flow.six:after {
content: "";
display: block;
width: 1000px;
height: 500px;
background: #666;
transform: rotate(-15deg);
transform-origin: right top;
position: absolute;
top: 0;
right: 1px;
z-index: -1;
}
section#work-flow .row .col.flow.six h3 {
color: white;
padding-top: 18px;
}
section#work-flow .row .col.flow h3 {
margin: 10px 0 20px;
vertical-align: middle;
font-size: 0.9rem;
font-weight: bold;
height: 45%;
padding: 0 5px;
}
section#work-flow .row .col .inner {
padding: 32px 0;
background: #ffffff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 0px;
}
section#work-flow .row .col .inner.black {
background: #373636;
color: white;
border: solid 2px #373636;
}
section#work-flow .row .col .inner.black .left {
width: 12%;
display: inline-block;
}
section#work-flow .row .col .inner.black .right {
display: inline-block;
width: 70%;
}
section#work-flow .row .col .inner.black .right h4 {
font-size: 1.2rem;
color: #ffffff;
}
section#work-flow .row .col .inner.black .right p {
font-size: 0.8rem;
font-weight: bold;
margin-top: 10px;
}
section#work-flow .row .col .inner h4 {
color: #333;
font-size: 0.9rem;
font-weight: bold;
}
section#work-flow .row .col .inner span.plan {
padding: 2px 8px;
font-size: 0.5rem;
font-weight: bold;
background: #E5E5E5;
border-radius: 4px;
}
section#work-flow .row .col .inner p {
margin: 0 0 5px;
font-size: 0.7rem;
}
section#work-flow .row .col .inner .number {
vertical-align: middle;
display: inline-block;
width: 8%;
}
section#work-flow .row .col .inner .number span {
padding: 3px 10px 3px;
box-sizing: border-box;
width: 20px;
height: 20px;
color: white;
font-weight: bold;
line-height: 20px;
background: #e90000;
border: solid 3px #F8D9D9;
border-radius: 50%;
}
section#work-flow .row .col .inner .left {
vertical-align: middle;
display: inline-block;
width: 30%;
text-align: left;
position: relative;
left: 0px;
}
section#work-flow .row .col .inner .left span {
color: #e90000;
font-size: 0.9rem;
font-weight: bold;
display: inline-block;
margin-right: 5px;
}
section#work-flow .row .col .inner .left h4 {
display: inline-block;
}
section#work-flow .row .col .inner .right {
vertical-align: middle;
display: inline-block;
width: 50%;
text-align: left;
}
section#work-flow .row .col .inner .right ul {
list-style: none;
}
section#work-flow .row .col .inner .right ul li {
position: relative;
font-size: 0.8rem;
line-height: 20px;
margin-left: 5px;
}
section#work-flow .row .col .inner .right ul li:after {
display: block;
content: '';
position: absolute;
top: .4em;
left: -1.2em;
width: 8px;
height: 3px;
border-left: 2px solid #F90;
border-bottom: 2px solid #F90;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
section#work-flow .row .col .inner .divider {
vertical-align: middle;
display: inline-block;
margin-right: 7%;
margin-left: 2%;
height: 85px;
width: 1px;
background: #ddd;
}
section#work-flow .row.first {
text-align: center;
vertical-align: middle;
background: #373636;
border-bottom: 1px solid #ddd;
color: #ffffff;
}
section#work-flow .row.first .col {
background: transparent;
vertical-align: middle;
padding: 10px 0;
border-radius: 0px;
font-weight: bold;
}
section#work-flow .row.first .col.flow {
position: relative;
z-index: 0;
padding: 10px 0;
width: 24%;
text-align: center;
border-radius: 0px;
background: #666;
}
section#work-flow .row.first .col.cando {
margin: 0;
width: 80%;
}
section#price {
position: relative;
padding: 30px 0;
}
section#price:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh-diagmonds.png);
opacity: 0.5;
z-index: -1;
}
section#price .notice {
background: #ffffff;
width: 80%;
margin: 50px auto;
padding: 20px;
box-sizing: border-box;
border: double 1px #B1B1B1;
}
section#price .notice h3 {
font-size: 1rem;
font-weight: bold;
text-align: center;
margin: 0 0 16px;
}
section#price .notice dl {
width: 100%;
margin: 0 auto;
font-size: 0.82rem;
}
section#price .notice dl dt {
display: inline-block;
}
section#price .notice dl dt {
display: inline-block;
}
section#price .notice p {
margin-top: 15px;
font-size: 0.7rem;
text-align: center;
line-height: 1.2rem;
}
section#price .inner {
width: 80%;
margin: 60px auto 0;
display: block;
border-collapse: separate;
border-spacing: 20px;
table-layout: fixed;
}
section#price .inner .col {
box-sizing: border-box;
display: block;
background: white;
border-radius: 0px;
width: 100%;
max-width: 300px;
margin: 30px auto;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
section#price .inner .col.high {
border: 1px solid #e90000;
}
section#price .inner .col.medium {
border: 1px solid #111;
}
section#price .inner .col.low {
border: 1px solid #041378;
}
section#price .inner .col .head {
padding: 22px 0;
background: #2A2A2A;
overflow: hidden;
display: block;
position: relative;
}
section#price .inner .col .head:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh-diagmonds.png);
opacity: 0.3;
z-index: 1;
}
section#price .inner .col .head.high {
color: white;
background: -moz-linear-gradient(top left, #FF6666 0%, #E90000 100%);
background: -webkit-linear-gradient(top left, #FF6666 0%, #E90000 100%);
background: linear-gradient(to bottom right, #ff6666 0%, #e90000 100%);
}
section#price .inner .col .head.medium {
color: white;
background: -moz-linear-gradient(top left, #666666 0%, #111 100%);
background: -webkit-linear-gradient(top left, #666666 0%, #111 100%);
background: linear-gradient(to bottom right, #666666 0%, #111111 100%);
}
section#price .inner .col .head.low {
color: white;
background: -moz-linear-gradient(top left, #2068a8 0%, #041378 100%);
background: -webkit-linear-gradient(top left, #2068a8 0%, #041378 100%);
background: linear-gradient(to bottom right, #2068a8 0%, #041378 100%);
}
section#price .inner .col .head h3 {
color: white;
text-align: center;
font-weight: bold;
font-size: 1.6rem;
letter-spacing: 0.02rem;
}
section#price .inner .col .head p {
color: white;
text-align: center;
font-size: 0.7rem;
margin: 10px 0 0;
}
section#price .inner .col .content {
padding: 20px 25px;
text-align: center;
}
section#price .inner .col .content h4 {
margin-bottom: 14px;
font-size: 0.9rem;
text-align: center;
font-weight: bold;
}
section#price .inner .col .content h4 strong {
font-size: 150%;
font-weight: bold;
letter-spacing: 0.1em;
}
section#price .inner .col .content ul {
height: 200px;
}
section#price .inner .col .content ul li {
list-style: none;
margin: 10px 0;
font-size: 0.8rem;
letter-spacing: 1.2px;
}
section#price .inner .col .content .ulinebar {
border: none;
height: 1px;
width: 100%;
margin: 22px auto;
display: block;
background: #989898;
}
section#price .inner .col .content .punit {
display: inline-block;
width: 100px;
font-size: 0.7rem;
line-height: 1rem;
}
section#price .inner .col .content .price {
display: inline-block;
font-size: 1.3rem;
font-weight: bold;
}
section#price .inner .col .content .price b {
font-size: 2.2rem;
}
section#flow {
position: relative;
padding: 50px 0 120px;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_flow.jpg);
background-size: cover;
background-position: center center;
}
section#flow:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh.png);
opacity: 0.9;
z-index: 2;
}
section#flow .title {
position: relative;
z-index: 5;
}
section#flow .wrapper {
margin: 0 auto;
width: 92%;
position: relative;
z-index: 5;
}
section#flow .wrapper .inner {
width: 100%;
background: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
padding: 0;
margin-top: 60px;
display: block;
}
section#flow .wrapper .inner .col {
box-sizing: border-box;
width: 100%;
position: relative;
display: block;
padding: 25px 3% 20px 3%;
border-right: none;
border-bottom: dashed 1px #888;
}
section#flow .wrapper .inner .col:after {
content: "";
position: absolute;
display: block;
right: 0;
left: 0;
bottom: -20px;
margin: auto;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/ico_next.png);
background-size: 31px 30px;
background-repeat: no-repeat;
background-position: center;
transform: rotate(90deg);
width: 30px;
height: 40px;
z-index: 1111;
background-color: #fff;
}
section#flow .wrapper .inner .col:last-child {
content: "";
border-right: none;
}
section#flow .wrapper .inner .col:last-child:after {
content: "";
background-color: none;
background: none;
}
section#flow .wrapper .inner .col .thumb {
vertical-align: middle;
width: 56px;
}
section#flow .wrapper .inner .col .next {
display: none;
position: absolute;
margin: auto;
bottom: -22px;
left: 0;
right: 0;
width: 30px;
height: 30px;
background: #fff;
padding: 5px 0px 6px 0px;
text-align: center;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
section#flow .wrapper .inner .col span {
font-size: 0.9rem;
font-weight: bold;
vertical-align: middle;
background: #eee;
padding: 5px 10px 5px 10px;
text-align: center;
width: 80px;
position: absolute;
right: 0;
left: 0;
margin: auto;
}
section#flow .wrapper .inner .col h3 {
font-weight: bold;
color: #e90000;
letter-spacing: 1.8px;
font-size: 1rem;
border: 1px solid #e90000;
border-left: 6px solid #e90000;
padding: 4px 10px 4px 15px;
margin: auto;
margin-top: 50px;
}
section#flow .wrapper .inner .col p {
margin-top: 10px;
}
section#flow .bg-wshadow {
position: absolute;
z-index: 2;
content: "";
display: block;
background: rgba(255, 255, 255, 0.5);
height: 100%;
width: 100%;
top: 0;
bottom: 0;
right: 0;
}
section#contact {
background: #ffffff;
padding: 50px 0;
}
section#contact .wrapper {
width: 90%;
margin: 0 auto;
}
section#contact form {
margin-top: 60px;
}
section#contact form #success {
text-align: center;
background: #16dc16;
display: block;
margin: 0 auto 30px;
width: 90%;
color: white;
padding: 0 5px;
}
section#contact form .row {
width: 96%;
margin: 10px auto;
display: block;
}
section#contact form .row .form-area-select {
position: relative;
display: inline-block;
width: 100%;
border-radius: 2px;
background: #ffffff;
}
section#contact form .row .form-area-select:before {
position: absolute;
top: 1.4em;
right: 0.9em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666666;
pointer-events: none;
}
section#contact form .row label {
width: 100%;
display: inline-block;
vertical-align: top;
padding-top: 5px;
font-size: 0.8rem;
font-weight: bold;
vertical-align: middle;
text-align: left;
}
section#contact form .row label.must:after {
content: "※";
color: #e90000;
font-size: 8px;
vertical-align: top;
font-weight: bold;
margin-left: 5px;
}
section#contact form .row input, section#contact form .row textarea, section#contact form .row select {
width: 100%;
display: inline-block;
box-sizing: border-box;
padding: 8px;
outline: none;
border: solid 1px #ddd;
}
section#contact form .row select {
width: 100%;
height: 46px;
background: white;
border: 1px solid #bbb;
border-radius: 0px;
display: inline-block;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: 1px solid #bbbbbb;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
-moz-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
}
section#contact form .row select::-ms-expand {
display: none;
}
section#contact form .row button,
section#contact form .row input[type="button"],
section#contact form .row input[type="submit"] {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
text-align: center;
margin: 0px auto;
background: #e90000;
color: #FFF;
font-size: 1.1rem;
font-weight: bold;
padding: 15px 20px;
width: 50%;
border: none;
outline: none;
display: block;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
}
section#contact form .row button.mhover,
section#contact form .row input[type="button"].mhover,
section#contact form .row input[type="submit"].mhover {
background: #f90;
}
section#contact form .row .help-block.text-danger {
position: relative;
}
footer {
border-top: dashed 1px #888;
background: linear-gradient(to right, #333333 0%, #111111 100%);
color: #ffffff;
padding: 20px 0 40px 0;
}
footer .wrapper {
text-align: center;
}
footer .footer-logo {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: relative;
top: 8px;
vertical-align: bottom;
}
footer .footer-logo.mhover {
opacity: 0.5;
}
footer ul {
width: 100%;
vertical-align: middle;
display: block;
margin: 0 auto;
font-size: 13px;
}
footer ul li {
display: inline;
list-style: none;
vertical-align: middle;
}
footer ul li:before {
content: "|";
margin: 0 1px;
color: #ddd;
}
footer ul li:first-child:before {
content: "";
}
footer ul li a {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
font-size: 0.8rem;
text-decoration: none;
color: #ffffff !important;
padding: 4px 10px;
}
footer ul li a:visited {
color: #ffffff !important;
}
footer ul li a.mhover {
color: #ffffff !important;
background: none;
}
footer ul li a.mhover:after {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
content: "";
background: #444 !important;
position: absolute;
top: 0px;
bottom: 0px;
right: 0;
left: 0;
margin: auto;
z-index: -1;
opacity: 0.2 !important;
}
.form-area br {
display: none;
}
.form-area .form-group p {
display: inline;
}
.form-area span.required {
color: #B20000;
}
.form-area label {
text-align: right;
padding: 0px 20px 0px 0px;
color: #333;
font-weight: bold;
display: inline-block !important;
}
.form-area label.vtop {
float: left;
padding-top: 12px;
}
.form-area label.vtop-cnf {
float: left;
}
.form-area .validate-error-message .error {
color: #B20000;
background-color: #F0C1B2;
padding: 8px 10px 5px;
text-align: center;
margin: 14px 0px 15px;
border: 1px solid #B20000;
}
.form-area .input-form-info {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.33333;
color: #aaa;
margin-left: 10px;
height: 100px;
}
.form-area input[type="text"],
.form-area input[type="email"],
.form-area input[type="password"],
.form-area input[type="tel"] {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
padding: 12px 8px 8px 10px !important;
border: 0;
outline: none;
vertical-align: middle;
min-width: 100%;
font-size: 15px;
line-height: 20px;
color: #647373;
border: 1px solid #bbb !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
transition: .05s border-color ease-in-out;
border-radius: 0 !important;
-moz-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
}
.form-area input[type="text"].short,
.form-area input[type="email"].short,
.form-area input[type="password"].short,
.form-area input[type="tel"].short {
width: 25%;
}
.form-area input[type="text"].short-min,
.form-area input[type="email"].short-min,
.form-area input[type="password"].short-min,
.form-area input[type="tel"].short-min {
width: 20%;
}
.form-area input[type="text"].middle,
.form-area input[type="email"].middle,
.form-area input[type="password"].middle,
.form-area input[type="tel"].middle {
width: 42% !important;
}
.form-area input[type="text"].fit,
.form-area input[type="email"].fit,
.form-area input[type="password"].fit,
.form-area input[type="tel"].fit {
padding: 5px 10px;
width: 90%;
}
.form-area input[type="text"]:hover,
.form-area input[type="email"]:hover,
.form-area input[type="password"]:hover,
.form-area input[type="tel"]:hover {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
cursor: pointer;
border: 1px solid #ccc;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
outline: 0;
}
.form-area input[type="text"]:focus,
.form-area input[type="email"]:focus,
.form-area input[type="password"]:focus,
.form-area input[type="tel"]:focus {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
border: 1px solid #e30b20 !important;
box-shadow: 0 0 1px 0 #ff9900;
outline: 0;
}
.form-area input[type="text"].form-error,
.form-area input[type="email"].form-error,
.form-area input[type="password"].form-error,
.form-area input[type="tel"].form-error {
background-color: #F0C1B2 !important;
border: 2px solid #B20000 !important;
}
.form-area input[type="text"][disabled],
.form-area input[type="email"][disabled],
.form-area input[type="password"][disabled],
.form-area input[type="tel"][disabled] {
background: #eee;
cursor: not-allowed;
}
.form-area textarea {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
padding: 12px 8px 8px 10px !important;
border: 0;
outline: none;
vertical-align: middle !important;
min-width: 100%;
font-size: 15px;
line-height: 20px;
color: #647373;
border: 1px solid #bbb !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
transition: .05s border-color ease-in-out;
border-radius: 0 !important;
-moz-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
}
.form-area textarea:hover {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
cursor: pointer;
border: 1px solid #ccc;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
outline: 0;
}
.form-area textarea:focus {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
border: 1px solid #e30b20 !important;
box-shadow: 0 0 1px 0 #ff9900;
outline: 0;
}
.form-area textarea.form-error {
background-color: #F0C1B2 !important;
border: 2px solid #B20000 !important;
}
.form-area input[type="checkbox"] {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.form-area label input[type="checkbox"] + span:hover {
cursor: pointer;
}
.form-area input[type="checkbox"] + span::before, .form-area input[type="checkbox"] + span::after {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
position: absolute;
top: 0;
left: 0;
display: inline-block;
content: '';
box-sizing: border-box;
}
.form-area input[type="checkbox"] + span::before {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
z-index: 0;
background-color: transparent;
width: 22px;
height: 22px;
border: 1px #bbb solid;
border-radius: 5px;
}
.form-area input[type="checkbox"].form-error + span::before {
border: 2px #B20000 solid;
background-color: #F0C1B2;
}
.form-area label input[type="checkbox"] + span::after {
z-index: 1;
margin: 5px 8px;
width: 6px;
height: 9px;
}
.form-area label input[type="checkbox"]:checked + span::before {
background-color: #f90;
border: 2px #f90 solid;
}
.form-area label input[type="checkbox"]:checked + span::after {
border: 2px solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.form-area input[type="radio"] {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.form-area label input[type="radio"] + span:hover {
cursor: pointer;
}
.form-area input[type="radio"] + span::before, .form-area input[type="radio"] + span::after {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
position: absolute;
top: 0;
left: 0;
display: inline-block;
content: '';
box-sizing: border-box;
}
.form-area input[type="radio"] + span::before {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
z-index: 0;
background-color: transparent;
width: 22px;
height: 22px;
border: 1px #bbb solid;
border-radius: 2.0em;
}
.form-area input[type="radio"].form-error + span::before {
border: 2px #B20000 solid;
background-color: #F0C1B2;
}
.form-area label input[type="radio"] + span::after {
z-index: 1;
margin: 5px 8px;
width: 6px;
height: 9px;
}
.form-area label input[type="radio"]:checked + span::before {
border: 2px solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.form-area .screen-reader-response {
display: none;
}
.form-area .wpcf7 input[type="text"].wpcf7-not-valid,
.form-area .wpcf7 input[type="email"].wpcf7-not-valid,
.form-area .wpcf7 input[type="tel"].wpcf7-not-valid {
background-color: #F0C1B2;
}
.form-area .wpcf7 textarea.wpcf7-not-valid {
background-color: #F0C1B2;
}
.form-area .wpcf7 .wpcf7-not-valid-tip {
color: #e30b20;
width: 100%;
display: block;
margin-top: 10px;
}
.form-area .wpcf7 .wpcf7-not-valid input[type="checkbox"] + span::before {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
z-index: 0;
background-color: #F0C1B2;
width: 22px;
height: 22px;
border: 1px #bbb solid;
border-radius: 5px;
}
.form-area .wpcf7 .wpcf7-character-count {
font-size: 90%;
color: #ccc;
padding-left: 10px;
}
.form-area .wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
background-color: #60b838;
color: #fff;
padding: 10px 0px;
text-align: center;
}
.form-area .wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
color: #B20000;
background-color: #F0C1B2;
padding: 8px 10px 5px;
text-align: center;
margin: 14px 4% 25px;
border: 1px solid #B20000;
}
}
@media only screen and (min-width: 700px) { .hide_pc {
display: none !important;
}
.hide_sp {
display: inline-block !important;
}
.wrapper {
width: 100%;
margin: 0 auto;
}
.btn {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
color: #FFFFFF;
font-size: 1.1rem;
font-weight: bold;
border-radius: 100px;
padding: 5px 40px;
border: none;
display: inline-block;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
}
.btn.h-contact {
background: #CF1141;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.img-wrapper {
position: relative;
padding-top: 56.25%;
}
.img-wrapper img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
.raised {
display: inline-block;
color: #FFF;
font-size: 1em;
text-decoration: none !important;
letter-spacing: 0.05em;
padding: 0.6em 1.3em;
border-radius: 2px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: .3s;
border: 1px solid #fff;
}
.raised:hover {
background: #f90;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.flat_button {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
cursor: pointer;
text-decoration: none;
color: #333;
}
.flat_button:hover {
color: #000;
}
.flat_button:hover:after {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.1;
}
.flat_button .rp-effect {
background: gray;
}
.ripple {
position: relative;
overflow: hidden;
}
.ripple .rp-effect {
position: absolute;
border-radius: 50%;
opacity: 0.35;
transform: scale(0);
background: #FFF;
animation: ripple 700ms;
pointer-events: none;
}
@-webkit-keyframes ripple {
to {
opacity: 0;
transform: scale(2);
}
}
@keyframes ripple {
to {
opacity: 0;
transform: scale(2);
}
}
header {
height: 760px;
width: 100%;
overflow: hidden;
position: relative;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_icatch.jpg);
background-position: center;
background-size: cover;
}
header:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0px;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_header_bottom.png);
background-size: cover;
background-position: center;
height: 100px;
z-index: 2;
}
header:after {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh.png);
opacity: 1.0;
}
header .wrapper {
position: absolute;
z-index: 999;
width: 80%;
max-width: 820px;
height: 300px;
min-height: 330px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
padding: 30px 20px 50px 20px;
}
header .wrapper:before {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: #333;
opacity: 0.3;
}
header .wrapper:after {
content: "";
z-index: 1;
position: absolute;
bottom: 0px;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_header_bottom.png);
}
header .wrapper h2 {
position: relative;
z-index: 2;
font-weight: bold;
font-size: 2.2rem;
line-height: 3rem;
letter-spacing: 0.1rem;
color: white;
text-shadow: 1px 0px 10px rgba(0, 0, 0, 0.4);
}
header .wrapper p {
position: relative;
z-index: 2;
margin: 20px auto;
color: white;
font-size: 1.0rem;
font-weight: bold;
letter-spacing: 0.2rem;
text-shadow: 1px 0px 10px rgba(0, 0, 0, 0.9);
}
header .wrapper p.catch-points {
text-align: left;
display: inline-block;
}
header .wrapper p.catch-sales {
margin-top: 0px;
}
header .wrapper a {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: relative;
z-index: 2;
margin-top: 10px;
}
header nav {
position: fixed;
height: 54px;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
transition: .3s;
}
header nav:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background: #fff;
opacity: 0;
}
header nav .logo {
z-index: 2;
position: absolute;
top: 6px;
bottom: 0;
margin: auto;
left: 25px;
display: inline;
vertical-align: middle; background: url(https://billage.tremolo.me/wp/wp-content/uploads/2019/10/logo.png) no-repeat;
background-size: 100%;
width: 90px;
height: auto;
outline: none;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: block;
opacity: 1.0;
}
header nav .logo:hover {
opacity: 0.5;
}
header nav.h-light {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
header nav.h-light:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background: #fff;
opacity: 0.9;
}
header nav.h-light .logo { background: url(https://billage.tremolo.me/wp/wp-content/uploads/2019/10/logo_bl.png) no-repeat;
background-size: 100%;
opacity: 0.8;
}
header nav.h-light .logo:hover {
opacity: 0.5;
}
header nav ul {
z-index: 2;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
header nav ul li {
vertical-align: middle;
font-size: 14px;
display: inline-block;
padding: 0px 5px;
position: relative;
top: 16px;
}
header nav ul li a {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-font-smoothing: antialiased;
font-weight: normal;
color: #333;
text-decoration: none;
padding: 5px 15px;
}
header nav ul li a:hover {
color: #666;
background: none;
}
header nav ul li a:hover:after {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
content: "";
background: #999 !important;
position: absolute;
top: 0px;
bottom: 0px;
right: 0;
left: 0;
margin: auto;
z-index: 2;
opacity: 0.2 !important;
}
header nav ul li.intro {
position: relative;
right: 0px;
padding: 0px;
margin-left: 20px;
}
header nav ul li.intro a {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
padding: 20px 20px;
background: #e90000;
color: #fff;
font-weight: bold;
}
header nav ul li.intro a:hover {
background: #f90;
}
header nav ul li.intro a:hover:after {
content: "";
background: none !important;
}
header .bg_header_bottom {
position: absolute;
bottom: 0px;
z-index: 2;
margin: auto;
width: 100%;
height: auto;
}
.content {
position: relative;
z-index: 1;
background: #ffffff;
}
section {
padding: 70px 0;
}
section .title h2 {
position: relative;
font-size: 1.7rem;
line-height: 2.4rem;
letter-spacing: 0.05rem;
font-weight: bold;
text-align: center;
margin: 0px auto;
display: block;
padding-left: 20px;
}
section .title h2:after {
content: "";
width: 81px;
height: 15px;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_title_after.png?1537575275) no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background-size: 81px 15px;
background-position: center;
position: absolute;
top: 100px;
right: 50%;
left: 47%;
width: 81px;
height: 15px;
}
section .title h2.short:after {
content: "";
width: 81px;
height: 15px;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_title_after.png?1537575275) no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background-size: 81px 15px;
background-position: center;
position: absolute;
top: 60px;
right: 50%;
left: 47%;
width: 81px;
height: 15px;
}
section .title h2.uline:after {
content: "";
background: #333;
position: absolute;
top: 50px;
right: 0;
left: 0;
width: 40px;
height: 3px;
margin: auto;
}
section .title h2.nouline:after {
content: "";
background: none;
}
section#target {
position: relative;
padding: 30px 0;
}
section#target .title h2 {
font-size: 1.4rem;
}
section#target .container {
margin: 80px auto 20px;
display: flex;
width: 90%;
max-width: 1000px;
}
section#target .container .item {
background: white;
width: 29%;
padding: 25px 20px 30px 20px;
margin: 10px 1%;
text-align: center;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 0px;
border: 1px solid #ccc;
border-top: 8px solid #e90000;
}
section#target .container .item span {
padding: 5px 10px;
color: white;
font-size: 0.8rem;
background: #A2A2A2;
border-radius: 100px;
}
section#target .container .item h3 {
color: #e90000;
margin-top: 15px;
margin-bottom: 15px;
padding-bottom: 2px;
font-size: 120%;
font-weight: bold;
letter-spacing: 0.1em;
border-bottom: 1px solid #e90000;
}
section#target .container .item p {
font-size: 0.9rem;
}
section#target .container .item .case {
padding: 5px 10px;
color: #ffffff;
font-size: 0.9rem;
letter-spacing: 0.05em;
background: #A2A2A2;
width: 60px;
margin: auto;
margin-bottom: 20px;
}
section#target .container .item .trouble01 {
width: 110px;
height: auto;
}
section#target .container .item .trouble02 {
width: 110px;
height: auto;
position: relative;
bottom: 10px;
}
section#target .container .item .trouble03 {
width: 110px;
height: auto;
position: relative;
bottom: 10px;
left: 14px;
}
section#target .bg_fline_gray {
background: linear-gradient(to right, #eeeeee, #dddddd);
height: 200px;
position: absolute;
bottom: 0px;
width: 100%;
z-index: -1;
}
section#feature {
position: relative;
padding: 70px 0;
height: 550px;
}
section#feature .title {
margin-bottom: 20px;
}
section#feature .title h2 .feature-logo {
margin-right: 10px;
}
section#feature .bg_feature_banner {
width: 45%;
max-width: 700px;
position: relative;
z-index: -999;
top: 50px;
left: 2%;
margin: auto;
display: inline-block;
vertical-align: top;
}
section#feature .bg_feature_banner:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh.png);
opacity: 0.5;
z-index: 1;
}
section#feature .bg_feature_banner .bg_img {
z-index: -999;
margin: auto;
width: 100%;
}
section#feature .list {
position: relative;
display: inline-block;
z-index: 1;
top: 30px;
bottom: 0;
left: 4%;
margin: auto;
height: 350px;
width: 48%;
}
section#feature .list .list-item {
height: 100px;
margin: 20px 0 30px 0;
border: none;
}
section#feature .list .list-item .list-item-header {
border: none;
padding: 0px;
height: 52px;
width: 100%;
}
section#feature .list .list-item .list-item-header:after {
content: "";
z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
background: #e90000;
height: 2px;
}
section#feature .list .list-item .list-item-header label {
display: inline-block;
color: #e90000;
font-size: 22px;
font-weight: bold;
}
section#feature .list .list-item .list-item-header h3 {
display: inline-block;
padding: 0 10px;
font-size: 25px;
font-weight: bold;
color: #000;
}
section#feature .list .list-item .list-item-header p {
font-size: 16px;
}
section#feature .list .inner .col {
box-sizing: border-box;
padding: 10px 5px 0px 5px;
display: inline-block;
vertical-align: middle;
position: relative;
}
section#feature .list .inner .col:first-child span {
padding: 2px 12px;
background: white;
border-radius: 100px;
color: #e90000;
font-weight: bold;
font-size: 0.9rem;
text-align: center;
line-height: 80px;
}
section#feature .list .inner .col p {
font-size: 14px;
}
section#feature .bg-shadow {
position: absolute;
z-index: 1;
content: "";
display: block;
background: rgba(0, 0, 0, 0.1);
height: 100%;
width: 100%;
top: 0;
bottom: 0;
right: 0;
}
section#feature-contact {
position: relative;
padding: 50px 0;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_feature_contact.jpg);
background-size: cover;
background-attachment: fixed;
z-index: 2;
}
section#feature-contact:after {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh.png);
opacity: 0.5;
z-index: -1;
}
section#feature-contact .wrapper {
width: 100%;
margin: 0 auto;
}
section#feature-contact .wrapper h3 {
color: #ffffff;
font-size: 1.5rem;
line-height: 2.0rem;
text-shadow: 0 0 14px rgba(0, 0, 0, 0.3);
}
section#feature-contact .container {
display: flex;
width: 90%;
max-width: 1000px;
margin: auto;
}
section#feature-contact .container .item {
padding: 0 20px;
}
section#feature-contact .container .item a {
padding: 0.2em 0.8em;
}
section#feature-contact .bg-shadow {
position: absolute;
z-index: -1;
content: "";
display: block;
background: rgba(0, 0, 0, 0.4);
height: 100%;
width: 100%;
top: 0;
bottom: 0;
right: 0;
}
section#feature-contact .btn {
text-align: center;
color: white;
font-size: 1.1rem;
font-weight: bold;
border-radius: 100px;
padding: 15px 20px;
border: none;
display: inline-block;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
}
section#work-flow {
background: #ffffff;
background-size: 100%;
padding: 50px 0;
}
section#work-flow .wrapper {
width: 96%;
max-width: 900px;
margin: 80px auto 0;
border: 1px solid #ddd;
}
section#work-flow .row {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
section#work-flow .row .col.cando {
margin: 0;
width: 80%;
}
section#work-flow .row .col.flow {
position: relative;
z-index: 0;
padding: 30px 0;
width: 20%;
text-align: center;
border-radius: 0px;
}
section#work-flow .row .col.flow:before {
content: "";
position: absolute;
z-index: 999;
left: 0;
right: 0;
top: 0;
width: 0;
height: 0;
border: 65px solid transparent;
}
section#work-flow .row .col.flow.one {
background: #f0f0f0;
}
section#work-flow .row .col.flow.one h3 {
padding-top: 18px;
}
section#work-flow .row .col.flow.two {
background: #f0f0f0;
position: relative;
overflow: hidden;
}
section#work-flow .row .col.flow.two:before {
content: "";
display: block;
width: 500px;
height: 250px;
background: #eaeaea;
transform: rotate(15deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 1;
z-index: -1;
}
section#work-flow .row .col.flow.two:after {
content: "";
display: block;
width: 500px;
height: 250px;
background: #eaeaea;
transform: rotate(-15deg);
transform-origin: right top;
position: absolute;
top: 0;
right: 1px;
z-index: -1;
}
section#work-flow .row .col.flow.two h3 {
padding-top: 85px;
}
section#work-flow .row .col.flow.four {
background: #eaeaea;
position: relative;
overflow: hidden;
}
section#work-flow .row .col.flow.four:before {
content: "";
display: block;
width: 500px;
height: 250px;
background: #dfdfdf;
transform: rotate(15deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 1;
z-index: -1;
}
section#work-flow .row .col.flow.four:after {
content: "";
display: block;
width: 500px;
height: 250px;
background: #dfdfdf;
transform: rotate(-15deg);
transform-origin: right top;
position: absolute;
top: 0;
right: 1px;
z-index: -1;
}
section#work-flow .row .col.flow.four h3 {
padding-top: 18px;
}
section#work-flow .row .col.flow.five {
background: #dfdfdf;
position: relative;
overflow: hidden;
}
section#work-flow .row .col.flow.five:before {
content: "";
display: block;
width: 500px;
height: 250px;
background: #c0c0c0;
transform: rotate(15deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 1;
z-index: -1;
}
section#work-flow .row .col.flow.five:after {
content: "";
display: block;
width: 500px;
height: 250px;
background: #c0c0c0;
transform: rotate(-15deg);
transform-origin: right top;
position: absolute;
top: 0;
right: 1px;
z-index: -1;
}
section#work-flow .row .col.flow.five h3 {
padding-top: 18px;
}
section#work-flow .row .col.flow.six {
background: #c0c0c0;
position: relative;
overflow: hidden;
}
section#work-flow .row .col.flow.six:before {
content: "";
display: block;
width: 500px;
height: 250px;
background: #666;
transform: rotate(15deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 1;
z-index: -1;
}
section#work-flow .row .col.flow.six:after {
content: "";
display: block;
width: 500px;
height: 250px;
background: #666;
transform: rotate(-15deg);
transform-origin: right top;
position: absolute;
top: 0;
right: 1px;
z-index: -1;
}
section#work-flow .row .col.flow.six h3 {
color: white;
padding-top: 18px;
}
section#work-flow .row .col.flow h3 {
margin: 10px 0 20px;
vertical-align: middle;
font-size: 0.9rem;
font-weight: bold;
height: 45%;
}
section#work-flow .row .col .inner {
padding: 26px;
background: white;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 0px;
}
section#work-flow .row .col .inner.black {
background: #373636;
color: white;
border: solid 2px #373636;
}
section#work-flow .row .col .inner.black .left {
width: 12%;
display: inline-block;
}
section#work-flow .row .col .inner.black .right {
display: inline-block;
width: 70%;
}
section#work-flow .row .col .inner.black .right h4 {
font-size: 1.5rem;
color: white;
}
section#work-flow .row .col .inner.black .right p {
font-size: 0.9rem;
font-weight: bold;
margin-top: 10px;
}
section#work-flow .row .col .inner h4 {
color: #333;
font-size: 1.1rem;
font-weight: bold;
}
section#work-flow .row .col .inner span.plan {
padding: 2px 8px;
font-size: 0.5rem;
font-weight: bold;
background: #E5E5E5;
border-radius: 4px;
}
section#work-flow .row .col .inner p {
margin: 0 0 5px;
font-size: 0.7rem;
}
section#work-flow .row .col .inner .number {
vertical-align: middle;
display: inline-block;
width: 8%;
}
section#work-flow .row .col .inner .number span {
padding: 3px 10px 3px;
box-sizing: border-box;
width: 20px;
height: 20px;
color: white;
font-weight: bold;
line-height: 20px;
background: #e90000;
border: solid 3px #F8D9D9;
border-radius: 50%;
}
section#work-flow .row .col .inner .left {
vertical-align: middle;
display: inline-block;
width: 40%;
}
section#work-flow .row .col .inner .left span {
color: #e90000;
font-size: 1.1rem;
font-weight: bold;
display: inline-block;
margin-right: 5px;
}
section#work-flow .row .col .inner .left h4 {
display: inline-block;
}
section#work-flow .row .col .inner .right {
vertical-align: middle;
display: inline-block;
width: 43%;
}
section#work-flow .row .col .inner .right ul {
list-style: none;
}
section#work-flow .row .col .inner .right ul li {
position: relative;
font-size: 0.9rem;
line-height: 20px;
margin-left: 5px;
}
section#work-flow .row .col .inner .right ul li:after {
display: block;
content: '';
position: absolute;
top: .4em;
left: -1.2em;
width: 8px;
height: 3px;
border-left: 2px solid #F90;
border-bottom: 2px solid #F90;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
section#work-flow .row .col .inner .divider {
vertical-align: middle;
display: inline-block;
margin-right: 4%;
height: 85px;
width: 1px;
background: #ddd;
}
section#work-flow .row.first {
text-align: center;
vertical-align: middle;
background: #373636;
border-bottom: 1px solid #ddd;
color: #ffffff;
}
section#work-flow .row.first .col {
vertical-align: middle;
padding: 10px 0;
border-radius: 0px;
font-size: 0.8rem;
font-weight: bold;
}
section#work-flow .row.first .col.flow {
position: relative;
z-index: 0;
padding: 10px 0;
width: 20%;
text-align: center;
border-radius: 0px;
background: #666;
}
section#work-flow .row.first .col.cando {
margin: 0;
width: 80%;
}
section#price {
position: relative;
padding: 70px 0;
}
section#price:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh-diagmonds.png);
opacity: 0.5;
z-index: -1;
}
section#price .notice {
background: #ffffff;
width: 480px;
margin: 50px auto 20px auto;
padding: 20px;
box-sizing: border-box;
border: double 1px #B1B1B1;
}
section#price .notice h3 {
font-size: 1rem;
font-weight: bold;
text-align: center;
margin: 0 0 10px;
}
section#price .notice dl {
width: 320px;
margin: 0 auto;
font-size: 0.82rem;
}
section#price .notice dl dt {
display: inline-block;
}
section#price .notice dl dt {
display: inline-block;
}
section#price .notice p {
margin-top: 15px;
font-size: 0.7rem;
text-align: center;
line-height: 1.4rem;
}
section#price .inner {
width: 100%;
max-width: 900px;
margin: 60px auto 0;
display: table;
border-collapse: separate;
border-spacing: 15px;
table-layout: fixed;
}
section#price .inner .col {
box-sizing: border-box;
display: table-cell;
background: white;
border-radius: 0px;
width: 30%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
section#price .inner .col.high {
border: 1px solid #e90000;
}
section#price .inner .col.medium {
border: 1px solid #111;
}
section#price .inner .col.low {
border: 1px solid #041378;
}
section#price .inner .col .head {
padding: 22px 0;
background: #2A2A2A;
overflow: hidden;
display: block;
position: relative;
}
section#price .inner .col .head:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh-diagmonds.png);
opacity: 0.3;
z-index: 1;
}
section#price .inner .col .head.high {
color: white;
background: -moz-linear-gradient(top left, #FF6666 0%, #E90000 100%);
background: -webkit-linear-gradient(top left, #FF6666 0%, #E90000 100%);
background: linear-gradient(to bottom right, #ff6666 0%, #e90000 100%);
}
section#price .inner .col .head.medium {
color: white;
background: -moz-linear-gradient(top left, #666666 0%, #111 100%);
background: -webkit-linear-gradient(top left, #666666 0%, #111 100%);
background: linear-gradient(to bottom right, #666666 0%, #111111 100%);
}
section#price .inner .col .head.low {
color: white;
background: -moz-linear-gradient(top left, #2068a8 0%, #041378 100%);
background: -webkit-linear-gradient(top left, #2068a8 0%, #041378 100%);
background: linear-gradient(to bottom right, #2068a8 0%, #041378 100%);
}
section#price .inner .col .head h3 {
color: white;
text-align: center;
font-weight: bold;
font-size: 1.6rem;
letter-spacing: 0.02rem;
}
section#price .inner .col .head p {
color: white;
text-align: center;
font-size: 0.8rem;
margin: 10px 0 0;
}
section#price .inner .col .content {
padding: 20px 30px;
}
section#price .inner .col .content h4 {
margin-bottom: 14px;
font-size: 0.9rem;
text-align: center;
font-weight: bold;
}
section#price .inner .col .content h4 strong {
font-size: 150%;
font-weight: bold;
letter-spacing: 0.1em;
}
section#price .inner .col .content ul {
height: 200px;
}
section#price .inner .col .content ul li {
list-style: none;
margin: 10px 0;
font-size: 0.8rem;
letter-spacing: 1.2px;
}
section#price .inner .col .content .ulinebar {
border: none;
height: 1px;
width: 100%;
margin: 22px auto;
display: block;
background: #989898;
}
section#price .inner .col .content .punit {
display: inline-block;
width: 100px;
font-size: 0.8rem;
line-height: 1rem;
}
section#price .inner .col .content .price {
display: inline-block;
font-size: 1.3rem;
font-weight: bold;
}
section#price .inner .col .content .price b {
font-size: 2.2rem;
}
section#flow {
position: relative;
padding: 50px 0 120px;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg_flow.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
section#flow:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: url(//billage.jp/admin/wp-content/themes/billage_corporate/img/br/bg-mesh.png);
opacity: 0.9;
z-index: 2;
}
section#flow .title {
position: relative;
z-index: 5;
}
section#flow .wrapper {
position: relative;
z-index: 5;
margin: 80px auto 0 auto;
width: 80%;
max-width: 900px;
}
section#flow .wrapper .inner {
background: white;
box-sizing: border-box;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
padding: 30px 0 35px 0;
margin-top: 60px;
display: table;
}
section#flow .wrapper .inner .col {
width: 32%;
position: relative;
display: table-cell;
padding: 0 30px;
border-right: dashed 1px #888;
}
section#flow .wrapper .inner .col:last-child {
content: "";
border-right: none;
}
section#flow .wrapper .inner .col:after {
content: "";
position: absolute;
display: block;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
section#flow .wrapper .inner .col .thumb {
vertical-align: middle;
width: 56px;
}
section#flow .wrapper .inner .col .next {
position: absolute;
margin: auto;
top: 0;
bottom: 10px;
right: -16px;
width: 30px;
height: 30px;
background: #fff;
padding: 5px 0px 6px 0px;
}
section#flow .wrapper .inner .col span {
margin-left: -5px;
font-size: 0.8rem;
font-weight: bold;
vertical-align: middle;
background: #eee;
padding: 5px 10px 5px 10px;
}
section#flow .wrapper .inner .col h3 {
font-weight: bold;
color: #e90000;
letter-spacing: 1.8px;
font-size: 1rem;
margin: 15px 0 15px 0;
border: 1px solid #e90000;
border-left: 6px solid #e90000;
padding: 4px 10px 4px 15px;
}
section#flow .bg-wshadow {
position: absolute;
z-index: 2;
content: "";
display: block;
background: rgba(255, 255, 255, 0.5);
height: 100%;
width: 100%;
top: 0;
bottom: 0;
right: 0;
}
section#contact {
background: #ffffff;
}
section#contact form {
margin-top: 80px;
}
section#contact form #success {
text-align: center;
background: #16dc16;
display: block;
margin: 0 auto 30px;
width: 380px;
color: white;
padding: 0 5px;
}
section#contact form .row {
width: 70%;
margin: 10px auto;
display: block;
}
section#contact form .row .form-area-select {
position: relative;
display: inline-block;
width: 70%;
border-radius: 2px;
background: #ffffff;
}
section#contact form .row .form-area-select:before {
position: absolute;
top: 1.4em;
right: 0.9em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666666;
pointer-events: none;
}
section#contact form .row .form-area-select .wpcf7-not-valid-tip {
padding-left: 1% !important;
}
section#contact form .row label {
width: 24%;
display: inline-block;
vertical-align: top;
padding-top: 0px;
font-size: 1.0rem;
font-weight: bold;
vertical-align: top;
padding-top: 10px;
}
section#contact form .row label.must:after {
content: "※";
color: #e90000;
font-size: 16px;
vertical-align: top;
font-weight: bold;
margin-left: 8px;
}
section#contact form .row input, section#contact form .row textarea, section#contact form .row select {
width: 70%;
display: inline-block;
box-sizing: border-box;
padding: 8px;
outline: none;
border: solid 1px #ddd;
}
section#contact form .row select {
height: 46px;
background: white;
border: 1px solid #bbb;
border-radius: 0px;
display: inline-block;
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: 1px solid #bbbbbb;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
-moz-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
}
section#contact form .row select::-ms-expand {
display: none;
}
section#contact form .row button,
section#contact form .row input[type="button"],
section#contact form .row input[type="submit"] {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
text-align: center;
margin: 0px auto;
background: #e90000;
color: #FFF;
font-size: 1.1rem;
font-weight: bold;
padding: 15px 20px;
width: 200px;
border: none;
outline: none;
display: block;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
}
section#contact form .row button:hover,
section#contact form .row input[type="button"]:hover,
section#contact form .row input[type="submit"]:hover {
background: #f90;
}
section#contact form .row .help-block.text-danger {
position: relative;
}
footer {
border-top: dashed 1px #888;
background: linear-gradient(to right, #333333 0%, #111111 100%);
color: #ffffff;
padding: 20px 0 40px 0;
}
footer .wrapper {
text-align: center;
}
footer .footer-logo {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: relative;
top: 8px;
vertical-align: bottom;
}
footer .footer-logo:hover {
opacity: 0.5;
}
footer ul {
width: 620px;
vertical-align: middle;
display: block;
margin: 0 auto;
font-size: 13px;
}
footer ul li {
display: inline;
list-style: none;
vertical-align: middle;
}
footer ul li:before {
content: "|";
margin: 0 10px;
color: #ddd;
}
footer ul li:first-child:before {
content: "";
}
footer ul li a {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
font-size: 0.8rem;
text-decoration: none;
color: #ffffff !important;
padding: 4px 10px;
}
footer ul li a:visited {
color: #ffffff !important;
}
footer ul li a:hover {
color: #ffffff !important;
background: none;
}
footer ul li a:hover:after {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
content: "";
background: #444 !important;
position: absolute;
top: 0px;
bottom: 0px;
right: 0;
left: 0;
margin: auto;
z-index: -1;
opacity: 0.2 !important;
}
.form-area br {
display: none;
}
.form-area .form-group p {
display: inline;
}
.form-area span.required {
color: #B20000;
}
.form-area label {
text-align: right;
padding: 0px 20px 0px 0px;
color: #333;
font-weight: bold;
display: inline-block !important;
}
.form-area label.vtop {
float: left;
padding-top: 12px;
}
.form-area label.vtop-cnf {
float: left;
}
.form-area .validate-error-message .error {
color: #B20000;
background-color: #F0C1B2;
padding: 8px 10px 5px;
text-align: center;
margin: 14px 0px 15px;
border: 1px solid #B20000;
}
.form-area .input-form-info {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.33333;
color: #aaa;
margin-left: 10px;
height: 100px;
}
.form-area input[type="text"],
.form-area input[type="email"],
.form-area input[type="password"],
.form-area input[type="tel"] {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
padding: 12px 8px 8px 10px !important;
border: 0;
outline: none;
vertical-align: middle;
min-width: 70%;
max-width: 480px;
font-size: 15px;
line-height: 20px;
color: #333;
border: 1px solid #bbb !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
transition: .05s border-color ease-in-out;
border-radius: 0 !important;
-moz-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
}
.form-area input[type="text"].short,
.form-area input[type="email"].short,
.form-area input[type="password"].short,
.form-area input[type="tel"].short {
width: 25%;
}
.form-area input[type="text"].short-min,
.form-area input[type="email"].short-min,
.form-area input[type="password"].short-min,
.form-area input[type="tel"].short-min {
width: 20%;
}
.form-area input[type="text"].middle,
.form-area input[type="email"].middle,
.form-area input[type="password"].middle,
.form-area input[type="tel"].middle {
width: 42% !important;
}
.form-area input[type="text"].fit,
.form-area input[type="email"].fit,
.form-area input[type="password"].fit,
.form-area input[type="tel"].fit {
padding: 5px 10px;
width: 90%;
}
.form-area input[type="text"]:hover,
.form-area input[type="email"]:hover,
.form-area input[type="password"]:hover,
.form-area input[type="tel"]:hover {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
cursor: pointer;
border: 1px solid #ccc;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
outline: 0;
}
.form-area input[type="text"]:focus,
.form-area input[type="email"]:focus,
.form-area input[type="password"]:focus,
.form-area input[type="tel"]:focus {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
border: 1px solid #e30b20 !important;
box-shadow: 0 0 1px 0 #ff9900;
outline: 0;
}
.form-area input[type="text"].form-error,
.form-area input[type="email"].form-error,
.form-area input[type="password"].form-error,
.form-area input[type="tel"].form-error {
background-color: #F0C1B2 !important;
border: 2px solid #B20000 !important;
}
.form-area input[type="text"][disabled],
.form-area input[type="email"][disabled],
.form-area input[type="password"][disabled],
.form-area input[type="tel"][disabled] {
background: #eee;
cursor: not-allowed;
}
.form-area textarea {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
padding: 12px 8px 8px 10px !important;
border: 0;
outline: none;
vertical-align: middle !important;
min-width: 70%;
max-width: 480px;
font-size: 15px;
line-height: 20px;
color: #333;
border: 1px solid #bbb !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
transition: .05s border-color ease-in-out;
border-radius: 0 !important;
-moz-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 3px 9px -6px rgba(0, 0, 0, 0.5);
}
.form-area textarea:hover {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
cursor: pointer;
border: 1px solid #ccc;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
outline: 0;
}
.form-area textarea:focus {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
border: 1px solid #e30b20 !important;
box-shadow: 0 0 1px 0 #ff9900;
outline: 0;
}
.form-area textarea.form-error {
background-color: #F0C1B2 !important;
border: 2px solid #B20000 !important;
}
.form-area input[type="checkbox"] {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.form-area label input[type="checkbox"] + span:hover {
cursor: pointer;
}
.form-area input[type="checkbox"] + span::before, .form-area input[type="checkbox"] + span::after {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
position: absolute;
top: 0;
left: 0;
display: inline-block;
content: '';
box-sizing: border-box;
}
.form-area input[type="checkbox"] + span::before {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
z-index: 0;
background-color: transparent;
width: 22px;
height: 22px;
border: 1px #bbb solid;
border-radius: 5px;
}
.form-area input[type="checkbox"].form-error + span::before {
border: 2px #B20000 solid;
background-color: #F0C1B2;
}
.form-area label input[type="checkbox"] + span::after {
z-index: 1;
margin: 5px 8px;
width: 6px;
height: 9px;
}
.form-area label input[type="checkbox"]:checked + span::before {
background-color: #f90;
border: 2px #f90 solid;
}
.form-area label input[type="checkbox"]:checked + span::after {
border: 2px solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.form-area input[type="radio"] {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.form-area label input[type="radio"] + span:hover {
cursor: pointer;
}
.form-area input[type="radio"] + span::before, .form-area input[type="radio"] + span::after {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
position: absolute;
position: absolute;
top: 0;
left: 0;
display: inline-block;
content: '';
box-sizing: border-box;
}
.form-area input[type="radio"] + span::before {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
z-index: 0;
background-color: transparent;
width: 22px;
height: 22px;
border: 1px #bbb solid;
border-radius: 2.0em;
}
.form-area input[type="radio"].form-error + span::before {
border: 2px #B20000 solid;
background-color: #F0C1B2;
}
.form-area label input[type="radio"] + span::after {
z-index: 1;
margin: 5px 8px;
width: 6px;
height: 9px;
}
.form-area label input[type="radio"]:checked + span::before {
border: 2px solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.form-area .screen-reader-response {
display: none;
}
.form-area .wpcf7 input[type="text"].wpcf7-not-valid,
.form-area .wpcf7 input[type="email"].wpcf7-not-valid,
.form-area .wpcf7 input[type="tel"].wpcf7-not-valid {
background-color: #F0C1B2;
}
.form-area .wpcf7 textarea.wpcf7-not-valid {
background-color: #F0C1B2;
}
.form-area .wpcf7 .wpcf7-not-valid-tip {
color: #e30b20;
width: 100%;
display: block;
margin-top: 10px;
padding-left: 28%;
}
.form-area .wpcf7 .wpcf7-not-valid input[type="checkbox"] + span::before {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
z-index: 0;
background-color: #F0C1B2;
width: 22px;
height: 22px;
border: 1px #bbb solid;
border-radius: 5px;
}
.form-area .wpcf7 .wpcf7-character-count {
font-size: 90%;
color: #ccc;
padding-left: 10px;
}
.form-area .wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
background-color: #60b838;
color: #fff;
padding: 10px 0px;
text-align: center;
}
.form-area .wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
color: #B20000;
background-color: #F0C1B2;
padding: 8px 10px 5px;
text-align: center;
margin: 14px auto 25px auto;
border: 1px solid #B20000;
width: 90%;
max-width: 700px;
}
}
 @-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;-webkit-transform-origin:center bottom;animation-name:bounce;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(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{0%,to{-webkit-transform:translateZ(0);transform:translateZ(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-name:headShake;-webkit-animation-timing-function:ease-in-out;animation-name:headShake;animation-timing-function:ease-in-out}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-animation-name:swing;-webkit-transform-origin:top center;animation-name:swing;transform-origin:top center}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(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(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(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(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;-webkit-transform-origin:center;animation-name:jello;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-duration:1.3s;-webkit-animation-name:heartBeat;-webkit-animation-timing-function:ease-in-out;animation-duration:1.3s;animation-name:heartBeat;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;-webkit-animation-name:bounceIn;animation-duration:.75s;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;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:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;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:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;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:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;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:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;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:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;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:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;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:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;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:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;-webkit-animation-name:bounceOut;animation-duration:.75s;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity: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%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}@keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}.animated.flip{-webkit-animation-name:flip;-webkit-backface-visibility:visible;animation-name:flip;backface-visibility:visible}@-webkit-keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-animation-name:flipInX;-webkit-backface-visibility:visible!important;animation-name:flipInX;backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-animation-name:flipInY;-webkit-backface-visibility:visible!important;animation-name:flipInY;backface-visibility:visible!important}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}.flipOutX{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutX;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}.flipOutY{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutY;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutY;backface-visibility:visible!important}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-name:lightSpeedIn;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-name:lightSpeedOut;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}@keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}.hinge{-webkit-animation-duration:2s;-webkit-animation-name:hinge;animation-duration:2s;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}@keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}@keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}@keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}@keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}@keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}@keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}@keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;animation-duration:1s;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:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion){.animated{-webkit-animation:unset!important;-webkit-transition:none!important;animation:unset!important;transition:none!important}}