@font-face {
font-family: 'icomoon';
src: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/fonts/icomoon/icomoon.eot?srf3rx);
src: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/fonts/icomoon/icomoon.eot?srf3rx#iefix) format("embedded-opentype"), url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/fonts/icomoon/icomoon.ttf?srf3rx) format("truetype"), url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/fonts/icomoon/icomoon.woff?srf3rx) format("woff"), url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/fonts/icomoon/icomoon.svg?srf3rx#icomoon) format("svg");
font-weight: normal;
font-style: normal;
} html {
scroll-behavior: smooth;
}
body {
font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP", sans-serif;
font-size: 18px;
line-height: 1.6;
color: #333;
background: #f7f5f0;
width: 100%;
position: relative;
font-feature-settings: "palt";
overflow-x: hidden; }
.mincho {
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
h2.mincho,.mincho h3 {
font-weight: 400;
}
a {
color: #333;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover, a:active, a:focus {
outline: none;
text-decoration: none;
}
img {
image-rendering: -webkit-optimize-contrast;
}
.linkbtn {
text-align: center;
margin-top: 25px;
display: inline-block;
width: 100%;
}
.linkbtn a {
border: 2px solid #222;
padding: 16px 20px;
border-radius: 40px;
display: block;
max-width: 400px;
margin: 0 auto;
-webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
font-size: 1.3vw;
color: #282828;
font-weight: bold;
}
.linkbtn a:hover {
background-color:#ef9f24;
color:#fff;
border: 2px solid #ef9f24;
}
.mail a{
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.mail a:hover {
opacity: 0.6;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 900;
margin: 0 0 30px 0;
font-feature-settings: "palt";
}
ul, ol {
list-style-type: none;
padding: 0;
margin: 0;
}
.mw_wp_form .error {
font-size: 14px;
color: #B70000;
display: block;
padding: 10px;
}
.row + .row {
margin-top: 50px;
}
p {
letter-spacing: 0.2em;
}
.topschedule {
position: absolute;
bottom: 0;
right: 82px;
background-color: #fff;
border-radius: 30px 0 0 0;
padding: 30px 0px 0px 30px;
width: 850px;
}
.topschedule img {
width: 100%;
max-width: 800px;
}
table.normal {
border-collapse: collapse;
border-spacing: 0;
color:#000;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
width: calc(100%/2 - 10px);
float: left;
margin: 0 5px;
}
table.normal th, table.normal td {
padding: 3px 0;
text-align: center;
font-size: 12px;
}
table.normal.pagechedule th, table.normal td {
font-size: 14px;
}
table.normal tr:nth-child(odd){
background-color: #ecf2f7;
}
table.normal tr:nth-child(odd) .timehead {
background-color: #b0e2de;
}
table.normal tr .timehead {
background-color: #a3cee8;
text-align: left;
padding: 0 10px;
max-width: 60px;
}
.grayback {
padding:20px;
background-color: #f8f8f8;
}
.whiteinner {
padding:20px;
background-color: #fff;
}
.uketsuke1 {
background-color: #92b0e0;
}
.uketsuke2 {
background-color: #a3cee8;
}
.uketsuke3 {
background-color: #b0e2de;
}
table.normal tr.weekhead {
background-color: #92b0e0;
}
.chuijikou {
padding: 5px;
float: left;
width: 50%;
}
.chuijikou p {
font-size: 12px;
margin: 3px;
}
.headlogo {
position: fixed;
left: 25px;
top: 16px;
width: 60px;
}
.headlogo img {
width: 100%;
}
.underscheduleback {
padding: 10px 5px 5px;
background-color: #fff;
display: inline-block;
}
ul.normallist {
margin-top:30px;
}
ul.normallist li {
font-size: 16px;
line-height: 1.6;
padding: 0px 20px 5px 40px;
margin-bottom: 15px;
}
ul.normallist li::before {
font-family: "Font Awesome 5 Free";
content: '\f105';
font-weight: 900;
margin-right: 5px;
margin-left: -15px;
}
td.blueback {
background-color: #d7ebff;
}
.odd td.blueback {
background-color: #f0f8ff;
}
.pflink {
}
.pflink li {
width: calc(100%/2 - 20px);
margin: 10px;
float: left;
}
.pflink li a {
display: block;
padding: 20px;
border-radius: 10px;
background-color: #5ea4ea;
color: #fff;
text-align: center;
}
.pflink li a::before{
font-family: "Font Awesome 5 Free";
content: '\f56d';
font-weight: 900;
margin-right: 5px;
margin-left: -15px;
}
.pflink.pagelink li a::before{
font-family: "Font Awesome 5 Free";
content: '\f0c1';
font-weight: 900;
margin-right: 5px;
margin-left: -15px;
}
.pflink li a:hover {
background-color: #2064b7;
}
.dspace {
min-height: 300px;
}
.graybox a.readmore {
background-color: #fff;
color:#2064b7;
padding: 5px 20px;
font-weight: 600;
display: inline-block;
}
.graybox a.readmore:hover {
color:#2064b7;
}
.readmore::after {
font-family: "Font Awesome 5 Free";
content: '\f105';
font-weight: 900;
margin-left: 10px;
}
.section-heading a.readmore {
background-color: #32312f;
color: #fff;
padding: 10px 50px;
font-weight: normal;
display: inline-block;
font-size: 15px;
border-radius: 90px;
}
.section-heading a.readmore:hover {
color:#fdf9cf;
}
.teltext {
text-align: center;
margin-top:30px;
color: #fff;
font-weight: 600;
}
.teltext p {
font-size: 26px;
font-weight: 600;
}
.readmore::after {
font-family: "Font Awesome 5 Free";
content: '\f105';
font-weight: 900;
margin-left: 10px;
}
#breadcrumb {
text-align: left;
font-size: 14px;
margin-top: 0;
background-color: #ede8df;
width: calc(100% - 100px);
display: inline-block;
margin-bottom: 0;
margin: 0 50px;
border-radius: 0;
}
#breadcrumb ol {
display: inline-block;
margin: 0;
list-style: none;
padding: 0;
}
#breadcrumb li {
float: left;
}
#breadcrumb a::after {
content: " > ";
margin:0 5px;
}
#breadcrumb a {
color: #2d1a07;
}
#breadcrumb a:hover {
color: #a9ce52;
}
.serviceblock h3 {
font-family: 'Vollkorn', 'Noto Serif JP', serif;
font-weight: 900;
font-style: normal;
font-size: 28px;
color:#0e4270;
}
.n2-ow div.herotext {
font-family: 'Vollkorn', 'Noto Serif JP', serif;
font-weight: 900;
font-style: normal;
font-size: 55px;
}
.n2-ow div.herosmall {
font-size: 2.1rem;
font-family: 'Noto Serif JP', serif;
}
p{
font-size: 16px;
line-height: 2em;
font-weight: normal;
margin-bottom: 1.5em;
}
::-webkit-selection {
color: #818892;
background: #f9f6f0;
}
::-moz-selection {
color: #818892;
background: #f9f6f0;
}
::selection {
color: #818892;
background: #f9f6f0;
}
.edge--bottom {
position: relative;
z-index: 1;
}
.edge--bottom:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
}
.edge--bottom:after {
bottom: 0;
transform: skewY(-1.5deg);
transform-origin: 100%;
}
.edge--bottom--reverse {
position: relative;
z-index: 1;
}
.edge--bottom--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
}
.edge--bottom--reverse:after {
bottom: 0;
transform: skewY(1.5deg);
transform-origin: 0 100%;
}
.edge--top {
position: relative;
z-index: 1;
}
.edge--top:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
}
.edge--top:before {
top: 0;
transform: skewY(1.5deg);
transform-origin: 100% 0;
}
.edge--top--reverse {
position: relative;
z-index: 1;
}
.edge--top--reverse:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
}
.edge--top--reverse:before {
top: 0;
transform: skewY(-1.5deg);
transform-origin: 0 0;
}
.edge--both {
position: relative;
z-index: 1;
}
.edge--both:before, .edge--both:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
}
.edge--both:before {
top: 0;
transform: skewY(1.5deg);
transform-origin: 100% 0;
}
.edge--both:after {
bottom: 0;
transform: skewY(-1.5deg);
transform-origin: 100%;
}
.edge--both--reverse {
position: relative;
z-index: 1;
}
.edge--both--reverse:before, .edge--both--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
}
.edge--both--reverse:before {
top: 0;
transform: skewY(-1.5deg);
transform-origin: 0 0;
}
.edge--both--reverse:after {
bottom: 0;
transform: skewY(1.5deg);
transform-origin: 0 0;
}
#kyoto-header {
position: absolute;
z-index: 99;
width: calc(100% - 100px);
opacity: 1;
top: 70px;
margin-top: 0;
left: 50px;
}
li.navinvisible {
display: none;
}
.navbar-fixed-top li.navinvisible {
display: inline-block;
}
.navbar-fixed-top .navbar-right {
float: right !important;
margin-right: 30px;
}
.credit {
position: absolute;
bottom: 15px;
right: 30px;
font-size: 14px;
z-index: 10;
}
p.texleft {
text-align: left;
}
@media screen and (max-width: 896px) {
#kyoto-header {
margin-top: 0;
background: #fff;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
}
#kyoto-header #navbar2 li a {
color: rgba(0, 0, 0, 0.5) !important;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#kyoto-header #navbar2 li a:hover {
color: #a9ce52 !important;
}
#kyoto-header #navbar2 li a span:before {
background: transparent !important;
}
#kyoto-header #navbar2 li.active a {
background: transparent;
background: none;
color: #a9ce52 !important;
}
#kyoto-header #navbar2 li.active a span:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
#kyoto-header .navbar {
padding-bottom: 0;
margin-bottom: 0;
}
#kyoto-header #navbar2 li a {
color: #2d1a07;
position: relative;
font-size: 15px;
font-weight: 400;
padding-top: 33.5px;
font-family: "Noto Sans JP";
}
#kyoto-header #navbar2 li a span {
position: relative;
display: block;
padding-bottom: 2px;
}
#kyoto-header #navbar2 li a span:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -10px;
left: 0;
background-color: #a9ce52;
visibility: hidden;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
#kyoto-header #navbar2 li.facebook a span:before, #kyoto-header #navbar2 li.twitter a span:before, #kyoto-header #navbar2 li.kaiinlogin a span:before {
display: none;
}
#kyoto-header #navbar2 li a:hover {
color: #a9ce52;
}
#kyoto-header #navbar2 li a:hover span:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
#kyoto-header #navbar2 li.active a {
background: transparent;
background: none;
color: #a9ce52;
}
#kyoto-header #navbar2 li.active a span:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
} #kyoto-header #navbar2{
float: right;
}
#kyoto-header #navbar2 li a:hover:after {
width:100%;
opacity: 1;
}
#kyoto-header #navbar2 li .sub-menu {
position: absolute;
width: 220px;
left: 50%;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
background-color:#fff;
height:0px;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
opacity: 0;
z-index:99;
list-style: none;
padding: 0;
border-radius: 8px;
overflow: hidden;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
}
#kyoto-header #navbar2 li .sub-menu span{
display: none;
}
#kyoto-header #navbar2 li:hover .sub-menu {
display: block;
position: absolute;
height:auto;
opacity: 1;
top:50px;
}
#kyoto-header #navbar2 li .sub-menu li a {
padding: 8px 0;
color: #444;
margin: 0;
text-align: center;
display: block;
font-size: 14px;
border-bottom: 1px solid #eee;
height: auto;
font-weight: normal;
text-decoration: none;
}
#kyoto-header #navbar2 li .sub-menu li a:hover{
background-color:#eee;
}
#kyoto-header #navbar2 li .sub-menu li {
margin: 0;
text-align: center;
width: 100%;
}
#kyoto-header #navbar2 li .sub-menu li:after {
display: none;
}
#kyoto-header .navbar-brand {
float: left;
display: block;
width: 160px;
padding: 0;
}
#kyoto-header .navbar-brand img {
width: 160px;
}
#kyoto-header .navbar-header {
padding: 14px 20px 13px;
border-radius: 0 0 30px 0;
}
#kyoto-header .navbar-default.undernav {
background-color: #fff;
}
#kyoto-header.navbar-fixed-top .navbar-default.undernav {
background-color: #fff;
}
#kyoto-header .undernav .navbar-header {
border-radius: 0;
}
.jcdalogo{
position: absolute;
top: -55px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.jcdalogo img {
width: 120px;
}
.mail {
position: absolute;
right: -82px;
top: -82px;
}
.mail img {
width: 82px;
}
.underbox {
position: absolute;
right: -82px;
top: 0;
}
.underbox img {
width: 82px;
}
.sublogo{
position: absolute;
right: -49px;
top:100px;
}
.navbar-fixed-top .tel,.navbar-fixed-top .mail,.navbar-fixed-top .underbox,.navbar-fixed-top .sublogo {
display: none;
}
#kyoto-header.navbar-fixed-top {
position: fixed !important;
background: #fff;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
margin-top: 0px;
top: 0;
}
#kyoto-header.navbar-fixed-top #navbar2 li a {
color: rgba(0, 0, 0, 1);
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#kyoto-header.navbar-fixed-top #navbar2 li a:hover {
color: #a9ce52;
}
#kyoto-header #navbar2 li.kaiinlogin a:hover {
color: #4c3526;
opacity: 0.8;
}
#kyoto-header.navbar-fixed-top #navbar2 li.kaiinlogin a:hover {
color: #4c3526;
opacity: 0.8;
}
#kyoto-header.navbar-fixed-top #navbar2 li.active a {
background: transparent;
background: none;
color: #a9ce52;
}
#kyoto-header.navbar-fixed-top #navbar2 li.active a span:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
background-color: #a9ce52;
}
#kyoto-header .navbar-default {
border: 0;
background-color: #fff;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
border-radius: 0px;
}
@media screen and (max-width: 896px) {
#kyoto-header .navbar-default {
margin-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
#kyoto-header.navbar-fixed-top {
}
.pure-container {
display: block;
}
#kyoto-header {
position: absolute;
z-index: 99;
width: 100%;
opacity: 1;
top: 0;
margin-top: 0;
left: 0;
}
}
#kyoto-header .navbar-default .brand-slogan {
margin: 28px 0 0 15px;
float: left;
letter-spacing: 2px;
color: #adadad;
}
#kyoto-header .navbar-default .brand-slogan em {
color: #a9ce52;
font-style: normal;
}
.navbar-header a {
-webkit-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
#kyoto-home {
background-color: #fff;
background-size: cover;
background-attachment: fixed;
position: relative;
width: 100%;
color: #fff;
overflow: hidden;
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/images/maintop.jpg);
height: 100vh;
background-position-x: center !important;
}
#kyoto-home:before {
content: " ";
background-color: rgba(0,0,0,0.5);
position: absolute;
width: 100%;
height: 100%;
}
#kyoto-home.undermainimg {
max-height: 460px;
}
#kyoto-home .headinner {
width: 700px;
position: absolute;
top: 45%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
#kyoto-home .headinner div {
margin: 10px;
padding: 10px 100px
}
#navbar2 li a span i {
font-style: normal;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
#kyoto-header #navbar2 li.kaiinlogin a {
background-color: #a9ce52;
color: #4c3526;
margin-top: 28px;
border-radius: 100px;
padding: 4px 20px;
margin-left: 30px;
font-size: 14px;
}
#kyoto-home .container {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
#kyoto-home .text-wrap {
display: table;
width: 100%;
position: relative;
z-index: 4;
}
#kyoto-home .text-inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#kyoto-home .text-inner a {
color: white;
border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#kyoto-home .text-inner a:hover, #kyoto-home .text-inner a:active, #kyoto-home .text-inner a:focus {
text-decoration: none;
color: white;
border-bottom: 1px dashed white;
}
.col-md-offset-2 {
margin: 0 auto;
text-align: center;
float: none;
font-weight: bold;
}
#kyoto-home .col-md-offset-2 {
text-align: center;
float: right;
background-color: rgba(255,255,255,0.1);
padding: 20px;
}
#kyoto-home .text-inner h1 {
font-size: 50px;
color: white;
margin: 0 0 20px 0;
}
#kyoto-home .text-inner h2 {
font-size: 28px;
line-height: 38px;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.rainbow {
position: absolute;
bottom: 0;
width: calc(100% - 100px);
text-align: center;
}
.rainbow img {
width: 30%;
}
.rainbow span {
position: absolute;
bottom: 60%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
color: #2d1a07;
font-size: 2.4rem;
font-weight: bold;
letter-spacing: 2px;
}
.slant {
position: absolute;
transform: rotate(-1.7deg);
-ms-transform: rotate(-1.7deg);
-webkit-transform: rotate(-1.7deg);
-o-transform: rotate(-1.7deg);
-moz-transform: rotate(-1.7deg);
background-color: #fff;
content: "";
z-index: 3;
display: inline-block;
height: 70px;
bottom: 0;
margin-bottom: -35px;
padding: 0;
width: 101%;
}
#kyoto-intro {
position: relative;
bottom: 0;
z-index: 10;
padding-top: 4em;
padding-bottom: 2em;
}
#kyoto-intro .container{
max-width: 900px;
}
#kyoto-intro .intro-table {
display: table;
width: 100%;
}
#kyoto-intro h2 {
font-size: 58px;
display: table-cell;
padding: 5px 40px 0 0px;
line-height: 1.6em;
text-align: center;
vertical-align: middle;
margin-right: ;
}
#kyoto-contact h2 {
font-size: 58px;
}
#kyoto-intro .flavertext {
display: table-cell;
vertical-align: middle;
}
#kyoto-intro p {
text-align: left;
margin: 5px;
clear: both;
line-height: 2em;
font-size: 18px;
}
.linkbtn {
margin: 4em 0;
}
.linkbtn li {
margin-bottom: 15px;
}
.linkbtn li a {
display: block;
}
.linkbtn li a:hover {
opacity: 0.7;
}
.seminarlink{
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.seminarlink li {
width: calc(100%/3 - 20px);
margin: 10px;
}
.seminarlink li a {
display: block;
padding: 10px 20px;
color: #fff;
background-color: #a9ce52;
border-radius: 10px;
text-align: center;
}
.seminarcatttl {
background-color: #ede8df;
color: #4c3425;
padding: 15px 25px;
border-radius: 10px;
margin: 10px;
font-size: 24px;
} .pagenation {
width: 100%;
float: left;
text-align: center;
margin: 25px auto 0px;
}
.pagenation ul {
text-align: center;
margin: 0;
padding: 0;
}
.pagenation a, .pagenation span {
margin: 0 2px;
padding: 5px 0 0;
display: inline-block;
border:1px solid #333;
width: 35px;
height: 35px;
text-align: center;
position: relative;
font-weight: 900;
border-radius: 3px;
font-size: 14px;
}
.pagenation span.dots {
border:0;
}
.pagenation span.current {
background-color:#333;
color: #fff;
}
.pagenation ul li a {
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display: table;
color: #333;
text-decoration: none;
}
.pagenation ul li div {
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display: table;
color: #333;
text-decoration: none;
}
.pagenation ul li a span{
display:table-cell;
vertical-align:middle;
}
.pagenation ul li div span{
display:table-cell;
vertical-align:middle;
}
.pagenation ul li.current div span{
color:#fff;
}
.pagenation ul li a:hover,
.pagenation ul li a.active{
color: #fff;
background: #333;
}
.pagenation ul li.pagerNext, .pagenation ul li.pagerPrev {
display: none;
}
.linkunit {
margin: 10px;
}
.linkunit a {
display: inline-block;
padding: 5px 15px;
border: 2px solid #75635b;
letter-spacing: 0.05em;
background-color: #8e7165;
color: #fff;
font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP", sans-serif;
}
.linkunit a:after{
font-family: "Font Awesome 5 Free";
content: '\f105';
font-weight: 900;
margin-left: 10px;
}
.linkunit a:hover {
background-color: #fff !important;
color: #282828;
}
.telblock {
padding: 5px;
border: 2px solid #75635b;
margin: 0 auto;
}
.telblock th {
padding: 5px 13px;
background-color: #8e7165;
color: #fff;
font-size: 14px;
font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP", sans-serif;
font-weight: normal;
letter-spacing: 0.05em;
}
.telblock td {
padding: 5px;
font-size: 18px;
}
.link__form {
width: 100%;
margin-top: 30px;
}
.link__form .linkunit{
display: flex;
flex-wrap: wrap;
margin: 3px;
}
.link__form .linkunit a {
width: calc(100%/2 - 10px);
margin: 5px;
font-size: 15px;
font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP", sans-serif;
}
.qa-008 dt {
margin-bottom: 1em;
color: #333333;
font-weight: 600;
}
.qa-008 dt::before,
.qa-008 dd::before {
margin-right: .4em;
}
.qa-008 dt::before {
content: "Q.";
color: #75bbff;
}
.qa-008 dd {
margin: 0 0 2.5em;
padding: 1em 1.5em;
background-color: #edf2f9;
color: #333333;
}
.qa-008 dd::before {
content: "A.";
color: #ff8d8d;
}
@media screen and (max-width: 896px) {
.linkunit {
text-align: center;
font-size: 16px;
margin-bottom: 20px;
}
#kyoto-intro .container{
width: 100%;
max-width: initial;
}
#kyoto-home .container {
width: 100%;
}
#kyoto-intro {
padding:0 0px;
}
#kyoto-home {
padding:0px 0 0 0;
margin-bottom: 0em;
}
#kyoto-contact h2 {
font-size: 30px;
}
#kyoto-header .navbar-brand {
width: 300px;
}
#kyoto-home .col-md-offset-2 {
text-align: left;
float: left;
}
.n2-ow div.herotext {
font-size: 20px;
line-height: 1.4;
text-align: center;
}
.n2-ow div.herosmall {
font-size: 15px;
}
#kyoto-home .text-wrap {
margin-top:50px;
}
.credit {
left:0;
right: initial;
font-size: 12px;
z-index: 10;
padding:0 15px;
}
}
#kyoto-services, #kyoto-counters, #kyoto-work, #kyoto-contact, #kyoto-about {
padding: 4em 0;
}
@media screen and (max-width: 896px) {
#kyoto-services, #kyoto-counters, #kyoto-work, #kyoto-contact, #kyoto-about {
padding: 2em 0;
}
#kyoto-intro h2 {
font-size: 30px;
line-height: 2;
padding: 15px 15px 0;
display: block;
text-align: center;
}
#kyoto-intro .flavertext {
display: block;
padding: 0 15px;
}
#kyoto-intro .flavertext p{
font-size: 16px;
}
#kyoto-intro h2 br {
display: none;
}
}
#kyoto-service01, #kyoto-service02, #kyoto-service03, #kyoto-service04, #kyoto-service05, #kyoto-services, #kyoto-info, #kyoto-contact {
padding: 4em 0 4em;
}
#kyoto-service03 {
padding: 6em 0 0em;
overflow: hidden;
height: 800px;
margin-top: 4em;
}
#kyoto-service03 .sv03__parainner01 {
background-size: 800px;
background-attachment: fixed;
position: relative;
width: 100%;
overflow: hidden;
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/images/content01.jpg);
height: 800px;
background-position-x: left !important;
background-repeat: no-repeat;
}
#kyoto-service03 .sv03__parainner02 img {
position: absolute;
margin-top: 200px;
width: 200px;
right: -10px !important;
}
#kyoto-service03 h2{
font-size: 58px;
line-height: 1.6em;
}
#kyoto-service03 p {
font-size: 18px;
line-height: 2em;
}
#kyoto-service03 hr{
border: 0;
margin: 70px 0;
}
#kyoto-service05 {
padding: 6em 0 0em;
margin-top: 4em;
}
#kyoto-service05 .sv03__parainner01 {
background-size: 800px;
background-attachment: fixed;
position: relative;
width: 100%;
overflow: hidden;
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/images/rental01.jpg);
height: 800px;
background-position-x: left !important;
background-repeat: no-repeat;
}
#kyoto-service05 .sv03__parainner02 img {
position: absolute;
margin-top: 200px;
width: 200px;
right: -10px !important;
}
#kyoto-service05 h2{
font-size: 58px;
line-height: 1.6em;
}
#kyoto-service05 hr{
border: 0;
margin: 70px 0;
}
#kyoto-about {
padding: 6em 0 0em;
margin: 4em 0;
}
#kyoto-about h2{
font-size: 58px;
line-height: 1.6em;
}
#kyoto-about p {
text-align: left;
font-size: 18px;
line-height: 2em;
}
.smartsliderblock {
width: 800px; 
margin: 10px auto;
}
#kyoto-service02{
padding: 6em 0;
margin-top: 0px;
position: relative;
z-index: 20;
overflow: hidden;
}
#kyoto-service02 p {
font-size: 21px;
margin: 10px 0;
display: inline-block;
width: 100%;
}
#kyoto-service02 .sakura {
position: absolute;
width: 100%;
bottom: 0;
}
#kyoto-service04 {
padding: 0px 0em;
position: relative;
}
#kyoto-service04 video {
width: 100%;
}
#kyoto-service00 {
margin:6em 0;
padding-bottom:4em;
padding-top: 4em;
}
#kyoto-service00 .intro-table {
display: table;
width: 100%;
}
#kyoto-service00 h2 {
font-size: 58px;
display: table-cell;
padding: 5px 40px 0 0px;
line-height: 1.6em;
text-align: center;
vertical-align: middle;
margin-right: ;
}
#kyoto-service00 .flavertext{
display: table-cell;
vertical-align: middle;
}
#kyoto-service00 p,#kyoto-service000 p {
text-align: left;
margin: 5px;
clear: both;
line-height: 2em;
font-size: 18px;
letter-spacing: 0.24em;
}
#kyoto-service00 .equipcenter2 {
margin: 2em 0;
}
#kyoto-service00 .slide__img2 {
width: 50%;
float: left;
}
#kyoto-service00 .slide__text {
width: 50%;
float: left;
padding: 30px;
}
#kyoto-service00 .slide__text h3 {
font-size: 30px;
}
.slick-dots {
bottom: -50px;
}
.sv00__ttlblock {
margin-bottom: 20px;
}
.sv00__ttlblock a {
float: right;
padding: 5px 20px;
border-radius: 100px;
color: #fff;
font-size: 15px;
background-color: #32312f;
}
#kyoto-servicepage,#kyoto-single {
padding:4em 0;
}
#kyoto-servicepage .container,#kyoto-single .container {
max-width: 1132px;
}
.container.ftblock {
background-color: #f7f5f2;
padding: 5em 3em;
position: relative;
margin-top: 4em;
}
.container.ftblock.nocolor{
background-color: transparent;
}
.container.ftblock .ftblockicon {
position: absolute;
left: 60px;
top:0;
width: 60px;
}
.kanrenlink {
display: flex;
flex-wrap: wrap;
}
.kanrenlink li {
float: left;
width: calc(100%/4 - 20px);
margin: 10px;
background-color: #3179af;
border-radius: 10px;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.kanrenlink li.green {
background-color: #3fa896;
}
.kanrenlink li a {
display: table;
color: #fff;
width: 100%
}
.kanrenlink li:hover {
opacity: 0.8;
}
.kanrenlink li a span {
display: table-cell;
padding: 10px;
vertical-align: top;
font-size: 13px;
}
.kanrenlink li a span.kanrenicon {
width: 46px;
}
.secmainttl {
font-size: 30px;
letter-spacing: 3px;
color: #32312f;
}
.container .secsubttl {
margin-bottom:20px;
}
@media screen and (max-width: 799px) {
.smartsliderblock {
width: 100%; 
}
}
@media screen and (max-width: 896px) {
#kyoto-home {
height: 600px;
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/images/sp_top.jpg);
background-size: initial;
}
#kyoto-service00 {
background-image: none;
}
#kyoto-intro .col-md-3 {
text-align: center;
}
#kyoto-intro .col-md-3 img {
margin: 0 auto;
max-width: 150px;
}
#kyoto-service00 .container, #kyoto-service000 .container {
padding: 20px;
}
.container .secsubttl,.container .secmainttl {
text-align: center;
display: block;
}
.kanrenlink li {
width: calc(100%/1 - 20px);
}
#kyoto-service06 {
padding-top: 0em;
}
#kyoto-service00 .col-md-offset-2 p {
text-align: left;
}
#kyoto-service02{
padding: 4em 30px;
}
#kyoto-service02 p {
font-size: 16px;
}
#kyoto-service05 p{
font-size: 16px;
}
#kyoto-service02 p span {
display: block;
}
#kyoto-service03 {
height: initial;
}
#kyoto-service03 .sv03__parainner01 {
background-size: contain;
background-attachment: initial;
position: relative;
width: 100%;
overflow: hidden;
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/images/content01.jpg);
height: 390px;
background-position-x: left !important;
background-repeat: no-repeat;
background-position-y: top !important;
}
#kyoto-service03 .sv03__parainner02 img {
position: inherit;
margin-top: 230px;
width: 150px;
right: initial;
left: 0 !important;
}
#kyoto-service00 .slide__img2 {
width: 100%;
}
#kyoto-service00 .slide__text {
width: 100%;
padding: 15px;
}
#kyoto-service03 h2 {
font-size: 30px;
display: block;
text-align: center;
}
#kyoto-service03 .col-md-5{
position: relative;
padding: 20px 50px;
}
#kyoto-service05 {
height: initial;
margin-top: 0;
}
#kyoto-service05 .sv03__parainner01 {
background-size: contain;
background-attachment: initial;
position: relative;
width: 100%;
overflow: hidden;
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/kyoto/css/style.css?v2026/images/rental01.jpg);
height: 390px;
background-position-x: left !important;
background-repeat: no-repeat;
background-position-y: top !important;
}
#kyoto-service05 .sv03__parainner02 img {
position: inherit;
margin-top: 230px;
width: 150px;
right: initial;
left: 0 !important;
}
#kyoto-service05 h2 {
font-size: 30px;
display: block;
text-align: center;
}
#kyoto-service05 .col-md-5{
position: relative;
padding: 20px 50px;
}
#kyoto-service00 h2, #kyoto-service000 h2 {
font-size: 30px;
line-height: 2;
padding: 15px 15px 0;
display: block;
text-align: center;
}
#kyoto-service00 .flavertext {
display: block;
padding: 0 15px;
}
#kyoto-service00 .flavertext p{
font-size: 16px;
}
#kyoto-service00 h2 br {
display: none;
}
#kyoto-service04 {
padding: 0em 0px 0em;
}
#kyoto-about h2 {
font-size: 30px;
}
#kyoto-about p {
font-size: 16px;
padding: 0 30px;
}
#kyoto-service03 p, #kyoto-service00 p {
font-size: 16px;
}
}
#kyoto-counters {
padding: 6em 0;
}
#kyoto-counters h2 {
font-size: 58px;
}
#kyoto-counters table {
width: 600px;
margin-bottom: 40px;
}
#kyoto-counters table th{
width: 200px;
text-align: right;
padding: 10px;
}
#kyoto-counters table td{
text-align: left;
padding: 10px;
}
#kyoto-info ul {
list-style: none;
padding: 0 15px;
}
#kyoto-info ul li {
background-color: #fff;
}
#kyoto-info ul li a {
display: block;
color:#444;
border-bottom: 2px solid #ddd;
text-decoration: none;
padding: 10px;
font-size: 18px;
background-color: #fff;
}
#kyoto-info ul li a:hover {
background-color: #efefef;
}
.reverse {
float:  right;
}
.reverse .readmore {
float:  right;
}
.graybox {
overflow: hidden;
position: relative;
background-color: #2064b7;
}
.graybox .section-heading h2 {
color:#fff;
}
.graybox .section-heading h2::after{
background-color: #7dbeff;
}
.graybox a {
color: rgba(255, 255, 255, 0.5);
}
.graybox a:hover {
color: white;
}
.graybox .section-heading h3 {
color: rgba(255, 255, 255, 0.8);
}
#kyoto-work {
overflow: hidden;
position: relative;
color: rgba(255, 255, 255, 0.8);
background-color: #a9ce52; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMzZjk1ZWEiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzUyZDNhYSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #a9ce52)); background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #a9ce52 100%); background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #a9ce52 100%);
background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #a9ce52 100%);
}
#kyoto-work a {
color: rgba(255, 255, 255, 0.5);
}
#kyoto-work a:hover {
color: white;
}
#kyoto-work:before, #kyoto-work:after {
position: absolute;
transform: rotate(-1.7deg);
-ms-transform: rotate(-1.7deg);
-webkit-transform: rotate(-1.7deg);
-o-transform: rotate(-1.7deg);
-moz-transform: rotate(-1.7deg);
background-color: #fff;
content: "";
z-index: 3;
display: inline-block;
height: 70px;
padding: 0;
width: 101%;
}
#kyoto-work:before {
top: 0;
margin-top: -35px;
}
#kyoto-work:after {
bottom: 0;
margin-bottom: -35px;
}
#kyoto-work .section-heading h2 {
color: #fff;
}
#kyoto-work .section-heading h2:after {
background: rgba(255, 255, 255, 0.3);
}
#kyoto-work .section-heading h3 {
color: rgba(255, 255, 255, 0.8);
}
.readmore {
display: inline-block;
position: relative;
top: 0;
overflow: hidden;
z-index: 9;
margin-bottom: 30px;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.readmore a {
font-size: 18px;
padding:10px 20px;
color:#fff;
text-decoration: none;
display: block;
}
.readmore:hover, .readmore:focus {
-webkit-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
-o-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
text-decoration: none;
top: -10px;
}
.inqbtn {
display: block;
position: relative;
top: 0;
background: #fff;
overflow: hidden;
z-index: 9;
margin-bottom: 30px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
border-radius: 100px;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.inqbtn a{
display: block;
color:#2064b7;
text-decoration: none;
padding: 40px 15px;
border-radius: 10px;
text-align: center;
font-size: 3rem;
}
.inqbtn:hover, .inqbtn:focus {
-webkit-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
-o-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
text-decoration: none;
top: -10px;
}
.inqbtn a:hover{
color:#2064b7;
}
.inqbtn.tel a::before {
font-family: "Font Awesome 5 Free";
content: '\f098';
font-weight: 900;
margin-right: 10px;
}
.inqbtn.form a::before {
font-family: "Font Awesome 5 Free";
content: '\f0e0';
font-weight: 900;
margin-right: 10px;
}
.sns {
text-align: center;
margin-bottom: 20px;
}
.sns a {
margin: 0 15px;
}
.sns a  img {
width: 40px;
height: auto;
}
.footnav {
text-align: center;
margin-bottom: 20px;
}
.footnav a {
margin: 0 15px;
}
.footnav a::before {
font-family: "Font Awesome 5 Free";
content: '\f054';
font-weight: 900;
margin-right: 10px;
}
#kyoto-work .kyoto-project-item img {
z-index: 8;
opacity: 1;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#kyoto-work .kyoto-project-item .kyoto-text {
padding: 10px 20px;
}
#kyoto-work .kyoto-project-item .kyoto-text h2, #kyoto-work .kyoto-project-item .kyoto-text span {
text-decoration: none !important;
}
#kyoto-work .kyoto-project-item .kyoto-text h2 {
font-size: 18px;
font-weight: bold;
margin: 0;
}
#kyoto-work .kyoto-project-item .kyoto-text span {
color: #b3b3b3;
font-size: 16px;
font-weight: 400;
}
#kyoto-work .kyoto-project-item:hover img, #kyoto-work .kyoto-project-item:focus img {
opacity: .7;
}
#kyoto-work .kyoto-project-item:hover h2, #kyoto-work .kyoto-project-item:hover span, #kyoto-work .kyoto-project-item:focus h2, #kyoto-work .kyoto-project-item:focus span {
text-decoration: none !important;
}
.kyoto-person {
border: 2px solid #f2f2f2;
padding: 80px 30px 30px 30px;
float: left;
width: 100%;
position: relative;
}
@media screen and (max-width: 992px) {
.kyoto-person {
margin-bottom: 3.5em;
}
}
.kyoto-person figure {
position: absolute;
margin-top: -60px;
top: 0;
left: 50%;
margin-left: -60px;
display: block;
margin-bottom: 50px;
}
.kyoto-person figure img {
width: 120px;
border: 2px solid #f2f2f2;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.kyoto-person h3 {
margin-bottom: 0px;
}
.kyoto-person .kyoto-position {
color: #b3b3b3;
display: block;
margin-bottom: 20px;
}
.form-control {
box-shadow: none;
background: transparent;
border: 2px solid rgba(0, 0, 0, 0.1);
height: 54px;
font-size: 18px;
font-weight: 400;
}
.form-control:active, .form-control:focus {
outline: none;
box-shadow: none;
border-color: #a9ce52;
}
.btn {
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.btn:hover, .btn:active, .btn:focus {
outline: none;
}
#kyoto-contact {
}
#kyoto-contact .kyoto-contact-info {
padding: 0;
margin: 0 0 1.5em 0;
}
#kyoto-contact .kyoto-contact-info li {
position: relative;
padding: 0;
margin: 0 0 1.5em 0;
padding-left: 50px;
list-style: none;
font-size: 18px;
}
#kyoto-contact .kyoto-contact-info li i {
position: absolute;
top: .2em;
left: 0;
}
.section-heading {
float: left;
width: 100%;
clear: both;
}
.section-heading h2.secmainttl {
margin: 0 0 45px 0;
font-size: 38px;
font-weight: 600;
position: relative;
display: block;
line-height: 1.5;
letter-spacing: 3px;
color:#32312f;
text-align: center;
}
.section-heading h2.secmainttl:after {
position: absolute;
bottom: -20px;
content: "";
height: 10px;
width: 50px;
border-radius: 20px;
background-color: #a9ce52;
left: 50%;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
}
ul.newentry {
display: flex;
flex-wrap: wrap;
}
ul.newentry li {
list-style-type: none;
width: calc(100%/2 - 4px);
float: left;
margin: 0 2px;
display: grid;
border-bottom: 1px solid #efefef;
}
ul.newentry li a{
width: 100%;
display: inline-block;
padding: 15px;
text-align: left;
color:#333;
text-decoration: none;
}
ul.newentry li a:hover {
background-color: #f9f9f9;
}
.gonewslist {
float: right;
margin: 0;
}
.whiteback{
display: inline-block;
width: 100%;
padding: 30px;
background-color: #fff;
margin-top: 4em;
border-radius: 10px;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
}
.whiteback2 {
display: inline-block;
width: 100%;
padding: 35px 20px 0px;
background-color: #fff;
margin-bottom: 30px;
border-radius: 10px;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
}
.framewrapp {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.framewrapp iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.newsimg {
width: 100px;
height: 50px;
display: block;
background-color: #565656;
float: left;
margin-top: 10px;
}
.newstex {
width: calc(100% - 100px);
float: left;
padding: 10px;
}
.newstex h3{
margin: 0;
font-size: 15px;
margin-bottom: 5px;
line-height: 1.5em;
}
.newstex p {
margin-bottom: 0px;
font-size: 12px;
line-height: 1.5em;
}
.newsdate {
font-size: 12px;
}
.newscat {
background-color: #a9ce52;
color: #313131;
padding: 0px 10px;
margin: 0 15px;
font-size: 12px;
text-align: center;
display: inline-block;
float: left;
}
.newscat.pr {
background-color: #5dc9b7;
}
.newscat.info {
background-color: #565656;
}
.newsttl {
}
.voicelist li {
width: calc(100%/2 - 20px);
margin: 10px;
float: left;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
}
.pagebody .voicelist li{
width: calc(100%/3 - 20px);
}
.voiceimg {
width: 100%;
height: auto;
margin-bottom: 10px;
display: block;
background-color: #565656;
float: left;
}
.voicetex {
width: 100%;
float: left;
padding: 10px;
}
.voicetex h3{
margin: 0;
font-size: 16px;
margin-bottom: 10px;
}
.voicetex p {
margin-bottom: 10px;
font-size: 14px;
min-height: 120px;
}
.jpsub {
color: #0e4270;
margin-bottom: 30px;
} .spback {
background-color: #f8f8f8;
padding: 20px;
}
.txblock {
padding:20px;
}
.pagebody .column33 .txblock {
min-height: 265px;
background-color: #f8f8f8;
}
.pagebody .column33 .txblock h3{
border-top: 1px solid #333;
border-bottom: 1px solid #333;
padding: 10px;
text-align: center;
}
.txblock ul,.txblock ol {
padding-left: 20px;
}
.txblock li {
font-size: 16px;
line-height: 2;
font-weight: normal;
margin-bottom: 10px;
}
.txblock p{
margin: 0;
}
.txblock p a{
color:#d40808;
text-decoration: underline;
}
.txblock p a:hover{
opacity: 0.8;
}
.txblock.imgleft .image {
float: left;
margin: 0 40px 20px 0;
padding: 0px;
max-width: 50%;
}
.txblock.imgright .image {
float: right;
margin: 0 0px 20px 40px;
padding: 0px;
max-width: 50%;
}
.txblock .merit li {
width: calc(100%/2 - 20px);
margin: 10px;
float: left;
background-color: #fff;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
padding: 20px;
border-radius: 5px;
font-size: 18px;
}
.txblock .merit li::before {
font-family: "Font Awesome 5 Free";
content: '\f058';
font-weight: 900;
color: #379de2;
margin-right: 10px;
}
.submd10 {
max-width: 800px;
margin: 0 auto;
text-align: center;
background-color: #ede8df;
padding: 50px 30px;
border-radius: 10px;
}
.toittl {
font-size: 28px;
font-weight: 900;
color: #634a36;
}
.toisub {
font-size: 22px;
font-weight: 600;
margin: 15px 0 30px;
}
.submd10 p {
margin-bottom: 15px;
line-height: 2.5;
}
.toiunit a {
background: rgb(241,87,87);
background: -moz-linear-gradient(0deg, rgba(241,87,87,1) 0%, rgba(240,155,165,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(241,87,87,1) 0%, rgba(240,155,165,1) 100%);
background: linear-gradient(0deg, rgba(241,87,87,1) 0%, rgba(240,155,165,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15757",endColorstr="#f09ba5",GradientType=1); 
color: #fff;
display: inline-block;
padding: 15px 40px;
border-radius: 200px;
min-width: 40%;
-webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.6);
-moz-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.6);
-ms-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.6);
}
.toiunit a span {
display: block;
margin: 5px 0;
font-size: 21px;
}
.framewrapp {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.framewrapp iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.table {
padding: 20px;
margin-bottom: 0;
}
.table table {
width: 100%;
margin-bottom: 0;
}
.table table th {
padding: 10px 15px;
background-color: #343b4c;
border-bottom:1px solid #fff;
color:#fff;
width: 25%;
}
.table table td {
padding: 10px 15px;
background-color: #efefef;
border-bottom:1px solid #fff;
}
.table table.horizontal {
width: 100%;
margin-bottom: 0;
border:1px solid #ddd;
}
.table table.horizontal th {
padding: 10px 15px;
background-color: #343b4c;
border-left:1px solid #fff;
color:#fff;
text-align: center;
}
.table table.horizontal td {
padding: 10px 15px;
background-color: #f8f8f8;
border-bottom:1px solid #ddd;
border-left:1px solid #ddd;
text-align: center;
}
.table table td p {
margin: 0;
}
.table table.proglam {
border:1px solid #ddd;
}
.table table.proglam th {
border-bottom: 1px solid #fff;
border-left: 1px solid #ddd;
background-color: #2d1a07;
color: #fff;
}
.table table.proglam td {
border-bottom:1px solid #ddd;
border-left:1px solid #ddd;
background-color: #fff;
}
.mousikomilink {
background-color: #565656;
color:#fff;
padding:10px 20px;
border:2px solid #fff;
display: block;
border-radius: 5px;
text-align: center;
}
.seminarzero {
border:2px solid #000;
padding: 15px;
}
.mousikomilink.accept {
background-color: #d40808;
}
.mousikomilink.detail {
background-color: #202d48;
}
a.mousikomilink.accept:hover {
color: #fff;
background-color: #b40000;
}
a.mousikomilink.detail:hover {
color: #fff;
background-color: #000;
}
.taglist {
display: block;
margin-bottom: 15px;
}
.taglist a {
margin-right:15px;
font-size: 15px;
}
.taglist a::before {
content: "\f02b";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #565656;
margin-right:10px;
}
a.kanrenlink {
margin-right:15px;
font-size: 15px;
word-break: keep-all;
}
a.kanrenlink::before {
content: "\f0c1";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #565656;
margin-right:10px;
word-break: break-word;
}
a.amazonlink {
background-color: #232323;
color: #fff;
font-weight: bold;
padding: 10px 20px;
border-radius: 6px;
float: right;
}
a.amazonlink:hover {
background-color: #d40808;
}
h2.midashi {
margin: 30px 0 0;
padding-left: 10px;
border-left: 10px solid #a9ce52;
margin-left: 0px;
color: #a9ce52;
font-size: 24px;
}
.bookshead h2.midashi {
margin: 0px 0 0;
padding: 5px 10px;
background-color: #232323;
color: #fff;
}
.pagebody {
padding: 4em 0;
display: inline-block;
width: 100%;
}
.singlepage {
padding: 0 0 2em;
}
.singlepage h1 {
margin: 20px 0 30px 20px;
}
.pagebody h2.midashi {
margin: 0 0 45px 0;
font-size: 30px;
font-weight: 600;
position: relative;
display: block;
line-height: 1.5;
letter-spacing: 3px;
color: #32312f;
text-align: center;
border: none;
}
.pagebody h2.midashi::after {
position: absolute;
bottom: -20px;
content: "";
height: 10px;
width: 50px;
border-radius: 20px;
background-color: #a9ce52;
left: 50%;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
}
h2.mousikomiblock {
padding: 10px;
margin: 30px 0px 0 20px;
background-color: #d40808;
color: #fff;
font-size: 24px;
text-align: center;
width: calc(100% - 40px);
}
h2.faqacvttl {
margin: 0px 0 0;
padding: 10px 10px;
background-color: #232323;
color: #fff;
font-size: 21px;
}
h3.midashi {
margin: 30px 0 0;
padding-left: 0px;
margin-left: 20px;
color: #2d1a07;
font-size: 20px;
font-weight: 400;
border-top: 1px solid;
padding-top: 10px;
border-bottom: 1px solid;
padding-bottom: 10px;
width: calc(100% - 40px);
}
h3.midashiq {
margin: 30px 0 0;
padding-left: 0px;
margin-left: 20px;
color: #2d1a07;
font-size: 20px;
font-weight: 400;
padding-top: 10px;
padding-bottom: 10px;
width: calc(100% - 40px);
line-height: 1.5em;
}
#resolution h3.midashiq {
margin: 30px 0 0;
padding-left: 10px;
border-left: 10px solid #d40808;
margin-left: 0px;
border-top:1px solid #d40808;
border-bottom:1px solid #d40808;
color: #d40808;
font-size: 24px;
}
#faq h3.midashiq {
margin: 30px 0 0;
padding-left: 10px;
border-left: 10px solid #d40808;
margin-left: 0px;
border-top:1px solid #d40808;
border-bottom:1px solid #d40808;
color: #d40808;
font-size: 24px;
}
h3.midashiq::before {
content:"――";
letter-spacing: -.15em;
width: 2em;
margin-right: .5em;
}
#resolution h3.midashiq::before {
content: "\f059";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 10px;
margin-left: 2px;
}
h3.midashicheck {
margin: 30px 0 0;
padding-left: 0px;
margin-left: 20px;
color: #2d1a07;
font-size: 20px;
font-weight: 400;
border-top: 1px solid;
padding-top: 10px;
border-bottom: 1px solid;
padding-bottom: 10px;
width: calc(100% - 40px);
}
h3.midashicheck::before {
content: "\f00c";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 10px;
margin-left: 2px;
}
#faq h3.midashiq::before {
content: "Q";
font-weight: 900;
font-size: 36px;
margin-right: 10px;
margin-left: 2px;
}
.faqans {
display: table;
}
.faqans::before {
content: "A";
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-weight: 900;
font-size: 36px;
display: table-cell;
padding: 0 5px;
}
.faqans p {
display: table-cell;
padding-left: 15px;
}
ul.faqlist {
padding: 20px;
}
ul.faqlist li {
list-style-type: none;
}
.row.faqblock {
border: 1px solid #565656;
}
ul.faqlist li a {
margin: 10px 20px;
font-size: 17px;
padding-bottom:5px;
border-bottom:1px solid #d40808;
display: inline-block;
}
ul.faqlist li a::before {
content: "Q";
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-weight: 900;
margin-right: 10px;
margin-left: 2px;
}
h4.midashi {
margin: 30px 0 0;
padding-left: 0px;
margin-left: 20px;
color: #2d1a07;
font-size: 18px;
font-weight: 400;
padding-top: 10px;
padding-bottom: 10px;
width: calc(100% - 40px);
}
.txblock h4.midashi {
margin-left: 0;
margin-top:0;
}
h4.midashi::before {
content: "\f0da";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 10px;
margin-left: 2px;
}
span.answer-name {
font-weight: bold;
background: #2d1a07;
padding: 0 10px;
margin-right: 15px;
color: #fff;
}
.archivelist {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.archivelist li {
width: calc(100%/3 - 20px);
margin: 10px 10px 20px;
float: left;
box-shadow: 0px 0px 31px -15px #777777;
background-color: #f8f8f8;
border-radius: 10px;
overflow: hidden;
transition:0.5s all;
border: 1px solid #CFCFCF;
}
.archivelist.book li {
width: calc(100%/4 - 20px);
position: relative;
}
.archivelist a {
display: block;
}
.archivelist li:hover {
background-color: #fff;
}
.archivelist .listimg {
display: block;
height: 160px;
width: 100%;
overflow: hidden;
}
.archivelist .listimg.topsize {
height:185px;
}
.archivelist .booklistimg {
display: block;
height: 350px;
width: 100%;
overflow: hidden;
}
.archivelist .listimg img{
width: 100%;
height: auto;
transition:0.5s all;
opacity: 1;
}
.archivelist .booklistimg img {
width: 100%;
height: auto;
transition:0.5s all;
opacity: 1;
}
.archivelist li:hover .listimg img {
transform:scale(1.2,1.2);
transition:0.5s all;
opacity: 0.8;
}
.archivelist li:hover .booklistimg img {
transform:scale(1.2,1.2);
transition:0.5s all;
opacity: 0.8;
}
.archivelist .listttl {
font-size: 17px;
line-height: 1.5;
margin: 15px 15px 15px;
}
.archivelist .booklistttl {
font-size: 15px;
line-height: 1.5;
height: 81px;
margin: 0;
position: absolute;
bottom: 0;
background-color: #7c1920;
display: block;
width: 100%;
padding: 5px 10px;
color: #fff;
font-weight: 400;
}
.archivelist .listdate {
font-size: 14px;
line-height: 1.6;
padding: 15px 15px 0px;
display: block;
}
.archivelist .listtext {
font-size: 15px;
line-height: 1.6;
padding: 0 15px 15px;
display: block;
}
.archivelist .catblock {
margin: 10px 15px -5px;
}
.archivelist .catname {
background-color: #efefef;
margin-right: 4px;
font-size: 12px;
padding: 2px 4px;
}
.archivelist .catname.communication {
background-color: #d2e5ff;
}
.archivelist .catname.hospitality-etiquette {
background-color: #d2fff2;
}
.archivelist .catname.sales-force {
background-color: #fff4d2;
}
.archivelist .catname.management {
background-color: #ffd2d2;
}
.archivelist .catname.complaint-handling {
background-color: #f5d2ff;
}
.archivelist .catname.coaching {
background-color: #d2d9ff;
}
.fullcolumn img{
width:100%;
height: auto;
}
.tagset ul li {
float: left;
margin-right: 20px;
}
.tagset ul li a:hover {
color:#d40808;
text-decoration: underline;
}
.column1 img {
width: calc(100% - 40px);
height: auto;
margin: 20px;
}
.halfcolumn {
width: 50%;
padding: 20px;
float: left;
}
.halfcolumn.reverse{
float: right;
}
.halfcolumn img{
width:100%;
height: auto;
}
.fullcolumn {
width: 100%;
padding: 0;
float: left;
}
.column30 {
width: 30%;
padding: 20px;
float: left;
}
.column30 img{
width: 100%;
height: auto;
}
a .image{
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
img {
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
a:hover .image{
background-color:#d40808;
}
a:hover .image img {
opacity: 0.8;
}
.column70 {
width: 70%;
padding: 20px;
float: left;
}
.bookshead .column70 {
padding-left: 10px;
}
.column75 {
width: 75%;
padding: 0px 1%;
float: left;
margin: 0;
}
.column80 {
width: 80%;
padding: 0px 1%;
float: left;
margin: 0;
}
.column25 {
width: 25%;
padding: 0px 1% 15px;
float: left;
margin: 0;
}
.column20 {
width: 20%;
padding: 0px 1%;
float: left;
margin: 0;
}
.column60 {
width: 60%;
padding: 0px 1%;
float: left;
margin: 0;
}
.column66 {
width: 66.67%;
padding: 0px 1%;
float: left;
margin: 0;
}
.column40 {
width: 40%;
padding: 0px 1%;
float: left;
margin: 0;
}
.column50 {
width: 50%;
padding: 15px 1%;
float: left;
}
.column20 {
width: 20%;
padding: 0px 1%;
float: left;
margin: 0;
}
.column60 img{
width:100%;
height:auto;
}
.column66 img{
width:100%;
height:auto;
}
.column25 img{
width:100%;
height:auto;
}
.column20 img{
width:100%;
height:auto;
}
.column33 {
width: 33.33%;
padding: 20px;
float: left;
}
.column33 img{
width:100%;
height: auto;
}
.column20 {
width: 20%;
padding: 20px;
float: left;
}
.column20 img{
width:100%;
height: auto;
}
#contact_forms {
padding: 20px;
}
#contact_forms table {
width: 100%;
margin-bottom:0;
}
#contact_forms table tr.odd {
background: #eee;
}
#contact_forms table tr {
border-bottom: 1px solid #d8d8d8;
}
#contact_forms table tr:first-child {
border-top: 1px solid #d8d8d8;
}
#contact_forms table th {
width: 210px;
text-align: right;
vertical-align: top;
padding: 10px 25px;
font-weight: bold;
box-sizing: border-box;
line-height: 1.5;
font-size: 12px;
}
#contact_forms table th div {
position: relative;
padding-top: 2px;
}
#contact_forms table th .required {
position: absolute;
left: 0;
top: 3px;
display: inline-block;
margin-right: 5px;
width: 50px;
line-height: 16px;
background: #ba0000;
letter-spacing: 3px;
text-align: center;
font-size: 11px;
font-weight: normal;
color: #fff;
}
#contact_forms table td {
padding: 10px 25px;
font-weight: normal;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.5;
}
#contact_forms table td label {
display: inline-block;
margin: 0 30px 0 0;
}
#contact_forms table td input[type="checkbox"], .contact table td input[type="radio"] {
margin: 0 3px 0 0;
}
#contact_forms tr td span.small {
font-size: 10px;
}
#contact_forms tr td input,#contact_forms tr td textarea,#contact_forms tr td select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
#contact_forms tr td textarea {
width: 100%;
height: 100px;
resize: none;
}
#contact_forms .form_btns {
margin: 20px 0 30px;
text-align: center;
height: 200%;
}
#contact_forms .comment02 {
margin: 0 0 20px;
}
#contact_forms .comment02 a {
color: #ba0000;
}
#contact_forms .alert_red {
color: #ba0000;
}
#contact_forms .form_headtTitle {
margin: 20px 20px 10px;
font-weight: bold;
font-size: 18px;
color: #808080;
}
#contact_forms .comment_mt15px {
margin-top: 15px;
display: inline-block;
}
.spback {
background-color: #f8f8f8;
padding: 20px;
} .single-body {
max-width: 1132px;
}
.container{
width: 100%;
}
.contactlist li {
width: calc(100%/2 - 20px);
margin: 10px;
float: left;
}
.contactlist li a {
padding: 20px;
display: block;
border: 3px solid #000;
}
.sns-list {
margin: 0 auto;
text-align: center;
}
.sns-list li {
display: inline-block;
margin: 0 8px;
}
.sns-list li a {
padding: 8px 0;
font-weight: 600;
text-align: center;
display: block;
color: #000;
border: 3px solid #000;
border-radius: 6px;
width: 50px;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.sns-list li a.fb:hover {
background-color: #4267b2;
color:#fff;
}
.sns-list li a.tw:hover {
background-color: #1da1f2;
color:#fff;
}
.sns-list li a.ins:hover {
background-color: #7d29c4;
color:#fff;
}
.sns-list li a.gplus:hover {
background-color: #dc4e41;
color:#fff;
}
@media screen and (max-width: 896px) {
.section-heading h2, .section-heading h2.secmainttl {
font-size: 24px;
}
#kyoto-contact {
padding-bottom: 4em;
}
.jpsub {
text-align: center;
}
#kyoto-counters {
padding: 3em 0;
}
#kyoto-counters h2 {
font-size: 30px;
}
#kyoto-counters table {
width: 100%;
}
#kyoto-counters table th {
width: initial;
}
}
.section-heading h3 {
font-weight: 300;
line-height: 1.5;
color: #929292;
}
@media screen and (max-width: 896px) {
.section-heading h3 {
font-size: 24px !important;
line-height: 34px;
}
.reverse .readmore, .readmore {
margin: 0 auto;
display: block;
float: none;
text-align: center;
}
#pageid5 .readmore {
width: 90%;
}
#kyoto-home .headinner div {
padding: 10px 0px
}
}
.btn {
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.kyoto-nav-toggle {
width: 25px;
height: 25px;
cursor: pointer;
text-decoration: none;
}
.kyoto-nav-toggle.active i::before, .kyoto-nav-toggle.active i::after {
background: #a9ce52;
}
.kyoto-nav-toggle:hover, .kyoto-nav-toggle:focus, .kyoto-nav-toggle:active {
outline: none;
border-bottom: none !important;
}
.kyoto-nav-toggle i {
position: relative;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
width: 25px;
height: 3px;
color: #a9ce52;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #a9ce52;
transition: all .2s ease-out;
}
.kyoto-nav-toggle i::before, .kyoto-nav-toggle i::after {
content: '';
width: 25px;
height: 3px;
background: #a9ce52;
position: absolute;
left: 0;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.kyoto-nav-toggle i::before {
top: -7px;
}
.kyoto-nav-toggle i::after {
bottom: -7px;
}
.kyoto-nav-toggle:hover i::before {
top: -10px;
}
.kyoto-nav-toggle:hover i::after {
bottom: -10px;
}
.kyoto-nav-toggle.active i {
background: transparent;
}
.kyoto-nav-toggle.active i::before {
top: 0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.kyoto-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
.kyoto-nav-toggle {
position: absolute;
top: 2px;
right: 0px;
z-index: 21;
padding: 6px 0 0 0;
display: block;
margin: 0 auto;
display: none;
height: 44px;
width: 25px;
border-bottom: none !important;
}
@media screen and (max-width: 896px) {
.kyoto-nav-toggle {
display: block;
}
}
#footer {
padding: 50px 0;
color: #7f7f7f;
position: relative;
clear: both;
float: left;
width: 100%;
display: inline-block;
margin-top: 50px;
padding-bottom: 100px;
}
#footer .container{
width:100%;
padding-top:50px;
color:#fff;
}
#footer .gotop {
position: absolute;
top: -60px;
left: 50%;
z-index: 8;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
#footer .gotop img {
width: 30px;
}
#footer .copyblock {
margin-top:40px;
background-color: #000;
padding: 10px;
text-align: center;
}
#footer .copyblock p {
color: #fff;
margin: 0;
}
#footer .col-md-4 {
font-size: 15px;
}
#footer .col-md-4 img {
width: 200px;
margin-bottom: 20px;
}
#footer .col-md-4,#footer .col-md-8 {
padding: 0 20px;
}
#footer .gotop:hover, #footer .gotop:focus {
top: -50px;
text-decoration: none !important;
}
#footer .copyright {
font-size: 16px;
margin-bottom: 0px;
padding-bottom: 0;
}
#footer h3 {
font-size: 20px;
font-style: italic;
font-weight: bold;
margin: 10px 0;
clear: both;
}
#footer ul li a {
color: #fff;
float: left;
margin: 0 20px 0 0;
}
.btn {
text-transform: uppercase;
letter-spacing: 2px;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.btn.btn-primary {
background: #a9ce52;
color: #fff;
border: none !important;
border: 2px solid transparent !important;
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus {
box-shadow: none;
background: #a9ce52;
}
.btn:hover, .btn:active, .btn:focus {
background: #393e46 !important;
color: #fff;
outline: none !important;
}
.btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active {
border-color: transparent;
}
.social {
padding: 0;
margin: 0;
display: inline-block;
position: relative;
width: 100%;
}
.social li {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
.social li a {
font-size: 16px;
display: table;
width: 40px;
height: 40px;
margin: 0 4px;
}
.social li a i {
display: table-cell;
vertical-align: middle;
}
.social li a:hover, .social li a:active, .social li a:focus {
text-decoration: none;
border-bottom: none;
}
.social li a.social-box {
background: #a9ce52;
color: #fff;
}
.social li a.social-circle {
background: #a9ce52;
color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.social li a:hover {
background: #393e46 !important;
}
.social.social-box a {
background: #a9ce52;
color: #fff;
}
.social.social-circle a {
background: #a9ce52;
color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
#map {
width: 100%;
height: 500px;
position: relative;
}
@media screen and (max-width: 896px) {
#map {
height: 200px;
}
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
.js .to-animate,
.js .to-animate-2,
.js .single-animate {
opacity: 0;
}
@media screen and (max-width: 480px) {
.col-xxs-12 {
float: none;
width: 100%;
}
}
.row-bottom-padded-lg {
padding-bottom: 7em;
}
@media screen and (max-width: 896px) {
.row-bottom-padded-lg {
padding-bottom: 2em;
}
}
.row-bottom-padded-md {
padding-bottom: 4em;
}
@media screen and (max-width: 896px) {
.row-bottom-padded-md {
padding-bottom: 2em;
}
}
.row-bottom-padded-sm {
padding-bottom: 2em;
}
@media screen and (max-width: 896px) {
.row-bottom-padded-sm {
padding-bottom: 2em;
}
}
.kyoto-animated {
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
} .sponly {
display: none;
}
.pconly {
}
.linkbtnback {
background-color: #f7f5f0;
padding: 20px;
margin-top: 10px;
}
@media screen and (max-width: 896px) {
.container.ftblock {
padding: 5em 1em;
}
#kyoto-intro .sponly {
display: block;
margin-top:30px;
}
.pconly {
display: none;
}
.navbar-nav {
display: none;
}
#kyoto-pick img {
width: 100%;
}
.newsttl {
display: block;
margin-top: 10px;
}
.row p img {
max-width: 100%;
height: auto;
}
.servicelist {
width: 100%;
}
.servicelist li {
width: 90%;
margin: 0px 5% 20px;
}
.servicelist li a .servicedetail {
padding: 20px;
}
.teltext p {
font-size: 18px;
}
.pflink li {
width: calc(100%/1 - 20px);
}
.topschedule {
position: initial;
padding:30px;
width: 100%;
}
table.normal {
width: calc(100%/1 - 10px);
}
.chuijikou {
width: 100%;
}
#footer .col-md-4, #footer .col-md-8 {
clear: both;
padding: 0 60px 30px;
font-size: 15px;
display: inline-block;
text-align: center;
width: 100%;
}
#footer ul li {
float: left;
margin-bottom: 10px;
}
.tel, .mail, .underbox, .sublogo {
display: none;
}
#kyoto-home .headinner {
width: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
.rainbow {
width: 100%;
}
#kyoto-home .headinner div {
font-size: 90%;
text-align: center;
margin: 0;
}
table.weekschedule,.wp-image-105 {
margin-top:30px;
}
}
.container {
width: 100%;
max-width: 1132px;
}
@media screen and (max-width: 897px) {
body {
min-width: 100%;
}
.container {
width: 100%;
padding: 10px;
}
#kyoto-service02 .container {
padding: 0;
}
#kyoto-home .gradient {
margin-top: 0;
}
.headlogo {
left: 10px;
top: 16px;
width: 60px;
}
}
@media screen and (max-width: 480px) {
#kyoto-home .headinner {
width: 90%;
}
.rainbow span {
bottom: 25px;
font-size: 18px;
}
}
.proftable th{
display: none;
}
@media screen and (max-width: 896px) {
#shinki-pala1 {
padding: 3em 0 0;
}
.pala1box {
max-width: initial;
margin-top: 30px;
padding: 30px;
}
.contactlist li {
width: calc(100%/1 - 20px);
margin: 10px;
float: left;
}
.pala1box img {
width: 100%;
margin-top: -60px;
}
.cardbox h3 {
font-size: 24px;
}
.cardbox {
width: 100%;
padding: 20px 0;
}
.sectionlink a {
width: 80%;
}
.sectionlink a:hover {
width: 90%;
}
.sectionlink {
margin: 50px 0 0;
}
#shinki-pala2 {
padding: 3em 0;
}
#shinki-pala2 ul li {
width: calc(100%/1 - 20px);
}
#shinki-pala3, #shinki-pala4, #shinki-pala5 {
padding: 3em 0;
}
.wbox h2 {
font-size: 32px;
}
.above-card {
height: 500px;
width: 100%;
}
.under-card {
width: 100%;
margin-top: -350px;
}
.wboxcontainer {
max-width: initial;
}
.portfoliolist {
float: left;
}
.portfoliolist li {
width: calc(100%/3 - 0px);
margin: 0;
}
.slick-initialized .slick-slide {
padding: 15px;
}
#shinki-spslide {
padding: 3em 0;
}
.movielist li {
width: calc(100%/2 - 20px);
}
table.horizontal {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.tab_item, .tab_item2 {
font-size: 15px;
}
.smponly {
display: block;
margin-top: 100px;
}
.smponly img {
width: 100%;
}
.hero-image {
height: auto;
margin-bottom:20px;
}
.headerColor-default .pure-container {
display: block;
}
.tagblock {
width: calc(100% - 0px);
margin: 10px 0px 50px 0px;
padding: 10px 20px 0;
font-size: 15px;
}
table th, table td {
font-size: 15px;
}
.tagset {
padding: 0px;
}
.tagblockttl {
width: 100%;
margin-right: 0;
border-bottom: 1px solid #565656;
border-right: 0px;
margin-bottom: 10px;
padding-bottom: 10px;
}
.tagset ul {
list-style: none;
float: right;
margin: 0 0 10px 0;
width: 100%;
}
.archivelist li {
width: calc(100%/2 - 20px);
}
.singlebody {
padding: 0em 0;
}
.column33 {
width: 100%;
}
.txblock.imgleft .image {
width: 100%;
}
.txblock.imgright .image {
width: 100%;
}
.txblock.imgleft .image img {
max-width: 100%;
}
.txblock.imgright .image img {
max-width: 100%;
}
.column20 {
width: 50%;
}
span.typehead {
font-size: 18px;
margin: 10px 20px 0;
}
.under h1 {
margin: 10px 20px 50px;
font-size: 28px;
line-height: 1.4;
}
.under h1.noborder {
margin: 10px 20px 30px;
}
#breadcrumb {
text-align: left;
color: #2d1a07;
}
.toilink {
bottom: 0;
border-radius: 5px 0 0 0px;
top: initial;
}
.taglist {
display: block;
margin: 10px 20px;
}
p {
font-size: 15px;
line-height: 1.8;
}
h2.midashi {
font-size: 21px;
line-height: 1.5;
}
h3.midashiq {
margin-top: 20px;
font-size: 18px;
}
.pagebody h2.midashi {
font-size: 20px;
line-height: 1.5;
margin: 0 20px 30px;
}
.pagebody h3.midashiq {
margin-top: 20px;
font-size: 18px;
}
.tab_item {
line-height: 1.5em;
height: 62px;
width: calc(100%/2 - 10px);
margin: 5px;
border-radius: 10px;
}
.footnav .row{
display: flex;
flex-wrap: wrap;
}
.footnav .col-md-3 {
width: calc(100%/2 - 10px);
margin: 5px;
float: left;
}
.footbottom {
padding: 2em 0;
text-align: center;
}
.footbottom li {
width: 100%;
}
.footbottom img  {
max-width: 240px;
margin-top:30px;
}
.navbar-header {
padding: 0 15px;
}
.archivelist.book li {
width: calc(100%/2 - 20px);
margin: 10px;
}
.specialtitle {
font-size: 24px;
margin-bottom: 32px;
}
#contact_forms tr th {
display: block;
text-align: left;
}
#contact_forms tr td {
display: block;
}
#contact_forms table td label {
width: 100%;
}
#contact_forms tr td input[type="text"]{
width: 100%;
}
#contact_forms table th .required {
position: initial;
height: auto;
padding: 5px;
}
.selfcheckblock label {
width: calc(100%/2 - 10px);
}
#kyoto-home2 .gradient {
height: initial;
margin-top: 0;
}
}
@media screen and (max-width: 640px) {
.archivelist li {
width: calc(100%/1 - 0px);
}
.txblock.imgright .image img,.txblock.imgleft .image img {
max-width: initial;
width:100%;
}
#form_msg table th, #form_msg table td {
display: block;
width: 100%;
}
textarea, input {
width: 100%;
}
}
@media screen and (max-width: 480px) {
table th, table td {
font-size: 14px;
}
#shinki-header{
padding-top: 0;
}
#contact_forms {
padding: 0px;
}
#shinki-header .navbar-brand {
height: 40px;
margin-top: 15px;
}
.pure-toggle-label {
top: 6px;
}
.smpnavacd dd {
padding: 5px;
}
.smpnavacd li {
width: calc(100%/2 - 10px);
margin: 5px;
}
.smpnavacd li a {
margin: 0;
}
.smponly {
display: block;
margin-top: 67px;
}
.archivelist li {
width: calc(100%/1 - 0px);
margin: 10px 0 20px;
border-radius: 0;
}
.pala1box {
margin-top: 0;
}
.pala1box.r-card {
margin-top: 30px;
}
.tabs {
padding: 30px 0px 10px;
}
.tabs .linkbtn {
margin-top: 35px;
}
.container {
padding: 0;
}
#breadcrumb {
width: 100%;
margin: 0px;
}
#shinki-pala1 .col-md-4 img, #shinki-pala2 .col-md-4 img, #shinki-pala3 .col-md-4 img {
max-height: initial;
width: 100%;
height: auto;
}
.lpheadlabel {
width: 100%;
}
#shinki-pala1 ul li {
width: 100%;
}
#lpspec .speclist li .speclistimg img {
max-height: 70px;
}
.specimgdesc li {
padding: 10px 20px;
margin: 0 10px 10px;
width: calc(100% - 20px);
}
#lpspec .speclist li {
width: calc(100%/1 - 10px);
}
.h2title {
font-size: 24px;
}
#lpspec .optionlist li div img {
width: 100%;
margin-bottom: 0;
}
#lpspec .optionlist li .optionlisttitle {
position: relative;
}
#shinki-pala1 ul li p {
padding: 0 20px;
font-size: 15px;
}
.herotext {
font-size: 24px;
}
.herotext span{
display: block;
}
.under h1 {
font-size: 24px;
line-height: 1.4;
font-weight: normal;
}
.table table th {
width: 30%;
}
.table table th {
font-size: 14px;
}
.table table td p {
font-size: 14px;
}
.halfcolumn.table {
padding: 0 10px;
}
.halfcolumn.table table {
display: table;
}
.footnav {
padding: 2em 0;
}
.footnav li a {
font-size: 14px;
}
.footnav .col-md-3 {
width: calc(100%/1 - 10px);
}
.footnav li {
list-style: none;
width: calc(100%/2 - 20px);
float: left;
margin: 5px 10px;
}
.footbottom li {
margin: 5px;
}
.footbottom li a {
font-size: 14px;
}
.footnav h3 {
font-size: 16px;
}
.mmbnr {
padding: 1em 0 1em;
}
#pageid468, #pageid664 {
padding: 0;
}
.column30 {
width: 100%;
}
.column30 .image {
text-align: center;
}
.column30 img {
width: 100%;
height: auto;
max-width: 200px;
}
.column70 {
width: 100%;
}
.archivelist.book li {
width: calc(100%/2 - 10px);
margin: 5px;
}
.archivelist .booklistimg {
height: auto;
}
.halfcolumn {
width: 100%;
}
}
.acd-check{
display: none;
}
.acd-label {
background: #fff;
color: #32312f;
display: table;
margin-bottom: 1px;
padding: 0;
width: 100%;
position: relative;
font-size: 18px;
text-align: left;
border-radius: 10px;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
}
.youtube {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%;
}
.acd-label span {
padding: 15px;
display: table-cell;
}
.acd-label::before {
background-color: #a9ce52;
box-sizing: border-box;
content: 'Q';
display: table-cell;
padding: 15px 20px;
font-weight: bold;
color: #fff;
border-radius: 10px 0 0 10px;
width: 60px;
}
.acd-label::after {
background: #efefef;
box-sizing: border-box;
content: '\f067';
display: table-cell;
font-family: "Font Awesome 5 Free";
padding: 15px 20px;
font-weight: bold;
border-radius: 0 10px 10px 0;
width: 60px;
}
.acd-content{
background-color: #fff;
display: block;
height: 0;
opacity: 0;
padding: 0 30px;
transition: .5s;
visibility: hidden;
margin-top: -10px;
margin-bottom:34px;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 0 0 10px 10px;
}
.acd-content p {
}
.acd-content p strong {
font-weight: bolder;
margin-top: .5em;
font-size: 18px;
line-height: 1.2em;
color: #dd1560;
}
.acd-check:checked + .acd-label:after{
content: '\f068';
font-weight: bold;
}
.acd-check:checked + .acd-label + .acd-content{
height: auto;
opacity: 1;
padding: 30px;
visibility: visible;
}
.row.gutter {
margin: 15px;
}
.nayami__img {
width: 60%;
}
.p-infomation_flex {
display: flex;
flex-wrap: wrap;
}
.p-infomation_panel {
background-color: #fff;
box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
width: calc(100%/3 - 20px);
margin: 10px;
border-radius: 10px;
overflow: hidden;
}
.p-information_img {
height: 180px;
overflow: hidden;
width: 100%;
float: initial;
margin: 0;
}
.p-information_img img {
width: 100%;
height: auto;
}
.p-information_date {
font-size: 14px;
padding: 5px 10px 5px;
}
.p-infomation_panel h3 {
font-size: 15px;
padding: 7px 10px;
margin-bottom: 0;
line-height: 1.5em;
}
.p-infomation_panel p {
padding: 5px 10px 5px;
line-height: 1.5em;
text-align: justify;
margin-bottom: 0;
}
.p-information_more {
text-align: center;
width: 50%;
margin: 50px auto 0;
max-width: 300px;
}
.p-information_more a {
display: flex;
align-items: center;
font-weight: 600;
}
.p-information_more a span {
position: relative;
min-height: 29px;
margin-top: 8px;
font-size: 2.5rem;
line-height: 1.18;
text-align: center;
width: 100%;
border: 1px solid #000;
padding: 10px;
}
.p-information_more a span::before {
position: absolute;
top: 22px;
left: 82%;
width: 18%;
height: 4px;
content: "";
background-color: #000;
transition: width .25s;
}
.p-information_more a:hover span::before {
left: 82%;
width: 36%;
}
.p-products {
position: relative;
}
.under .p-products__container {
position: relative;
display: flex;
padding-top: 50px;
padding-bottom: 80px;
background-position: bottom;
background-size: cover;
}
.slider .p-infomation_panel {
float: left;
min-height: 330px;
}
.underline {
text-decoration: underline;
}
.underline:hover {
text-decoration: none;
}
.pplink {
border: 2px solid #565656;
padding: 4px 15px;
display: inline-block;
margin-top: 10px;
background-color: #fff;
}
.pplink:hover {
background-color: #000;
color: #fff;
}
@media screen and (max-width: 1420px) {
.pure-container {
display: block;
}
.navbar-nav {
display: none;
}
#kyoto-intro .col-md-4 img {
margin: 0 auto;
max-width: 200px;
}
}
@media screen and (max-width: 896px) {
.acd-label {
font-size: 16px;
}
.nayami__img {
width: 100%;
}
.voice_svg {
text-align: center;
padding-top: 30px;
clear: both;
}
.voice_svg img{
max-width: 250px;
}
.linkbtn li {
width: calc(100%/2 - 20px);
margin: 0 10px 20px;
float: left;
}
#kyoto-service00 {
margin: 0em 0px;
padding-bottom: 4em;
width: 100%;
}
#breadcrumb {
width: 100%;
margin: 0 0px;
}
.pagebody .column33 .txblock {
min-height: initial;
}
.txblock .merit li {
width: calc(100%/1 - 20px);
}
.linkbtn a {
font-size: 3vw;
}
}
@media screen and (max-width: 640px) {
ul.newentry li {
width: calc(100%/1 - 4px);
}
.voicelist li {
width: 100%;
margin: 20px 0 10px;
}
.p-infomation_panel {
background-color: #fff;
box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
width: calc(100%/1 - 20px);
margin: 10px 20px 10px 20px;
border-radius: 10px;
overflow: hidden;
}
.p-information_img {
height: 120px;
width: 120px;
overflow: hidden;
justify-content: space-around;
align-items: center;
float: left;
margin-right: 15px;
display: flex;
}
.p-information_img img {
width: auto;
height: 125px;
}
.p-infomation_panel p {
padding: 5px 0px 0px;
width: calc(100% - 135px);
float: right;
}
.slider .p-infomation_panel {
min-height: initial;
}
}
@media screen and (max-width: 480px) {
.linkbtn li {
width: calc(100%/1 - 40px);
margin: 0 20px 20px;
}
.newsimg {
width: 100%;
height: auto;
}
.newstex {
width: 100%;
}
.voiceimg {
width: 100%;
height: auto;
}
.voicetex {
width: 100%;
}
} .step-wrap1 {
counter-reset:count;
margin: 2em auto;
max-width: 800px;
position: relative;
}
.step-content1 {
padding: 0 0 1.3em 2em;
margin: 0;
position: relative;
}
.step-content1::before {
content: "";
display: block;
width: 13px;
height: 13px;
background: #a9ce52;
border: solid 3px #ffffff;
border-radius: 50%;
position: absolute;
top: 8px;
left: 6px;
box-shadow: 0 0 0 5px #a9ce52;
}
.step-content1::after {
content: "";
display: block;
height: calc(100% - 35px);
border-left: dotted 5px #768888;
position: absolute;
top: 30px;
left: 10px;
}
.step-title1 {
font-weight: bold;
font-size: 120%;
color: #fff;
background-color: #f2abb4;
padding: 3px 10px;
margin-top: 10px;
}
.step-label1 {
color: #768888;
font-weight: bold;
}
.step-label1::after {
counter-increment:count;
content:counter(count);
position: relative;
left: .3em;
}
.step-body1 {
margin-top: .5em;
padding: 0 0 1em;
border-bottom: dotted 2px #ddd;
}
.step-wrap1 > :last-of-type::after {
display: none;
} .clearfix {
margin-bottom:2em;
}@import url("//fonts.googleapis.com/css?family=Roboto:400,900,900i");
@import url("//fonts.googleapis.com/earlyaccess/notosansjapanese.css");
body {
font-size: 1vw;
margin: 0;
padding: 0;
color: #222;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
a  {
text-decoration: none;
z-index: 10;
}
a:hover  {
opacity: 0.8;
}
p {
line-height: 1.8em;
margin-top: 0;
margin-bottom: 30px;
}
ul, ol {
list-style-type:none;
padding: 0;
margin:0;
}
h1,h2,h3,h4,h5  {
padding: 0;
margin:0;
}
h1 {
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
h2 {
font-size: 26px;
font-weight: 400;
text-align: center;
position: relative;
color: #845367;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.colorname {
display: table;
}
.colorname span {
display: table-cell;
vertical-align: middle;
padding: 0 10px 0 0;
}
#kakunin input {
font-size: 18px;
color: #fff;
background-color: #222;
display: block;
text-align: center;
padding: 20px 23px;
margin: 30px auto 20px;
width: 90%;
border-radius: 50px;
max-width: 480px;
}
.mw_wp_form_complete {
background-color: #fff;
border-radius: 10px;
padding:20px;
text-align: center;
}
.semilink a {
font-size: 18px;
color: #fff;
background-color: #e23b6f;
display: block;
text-align: center;
padding: 20px 23px;
margin: 30px auto 20px;
width: 90%;
border-radius: 50px;
max-width: 480px;
}
.single .archivebody h2 {
text-align: left;
font-size: 1.6em;
line-height: 1.2em;
margin: 30px 0;
font-family: "Noto Sans Japanese";
background-color: #fff5f5;
padding: 15px;
border-bottom: 6px solid #ec688b;
border-radius: 5px;
}
h3 {
font-size: 1.5em;
}
.single .archivebody h3 {
background-color: #ec688b;
font-size: 1.2em;
padding: 7px;
margin: 30px 0 15px;
color: #fff;
border-radius: 5px;
}
.column75 h2, .column25 h2 {
text-align: left;
}
.subtex {
margin-bottom: 30px;
color: #ec688b;
font-size: 16px;
margin-top: 10px;
}
.seventybl h2{
font-size: 25px;
color: #fff;
background-color: #ec688b;
border-radius: 5px;
}
.fl-right {
float: right;
}
.border {
clear:  both;
}
.clear {
clear:  both;
}
.archivebody .row{
background-color: #fff;
border-radius: 10px;
padding: 30px 20px;
}
.newsarchive {
padding: 20px;
float: left;
border-radius: 10px;
}
.newsarchive li {
width: 98%;
float: left;
margin: 10px 1%;
}
.newsarchive li a{
color:#222;
}
.pagebody .newsarchive .date {
color:#565656;
}
.rightbody .newsarchive h3 {
background-color: transparent;
color: #565656;
font-size: 16px;
padding: 0;
margin: 5px 0;
}
.rightbody .newsarchive h3::before{
display: none;
}
#form_msg table {
width: 100%;
border-collapse: collapse;
background-color: #ffffff7a;
}
#form_msg table th, #form_msg table td {
padding: 7px 20px;
border-bottom: 1px solid #fff;
}
.nec {
background-color: #c53332;
padding: 3px 5px;
color: #fff;
font-size: 12px;
font-weight: normal;
border-radius: 2px;
margin-left: 5px;
}
#form_msg table th {
background-color: #f7f5f0;
text-align: left;
}
.js-mw-checkbox {
text-align: center;
width: auto !important;
margin: 0 auto;
background-color: transparent !important;
}
.js-mw-checkbox td {
border-bottom: 0px !important;
vertical-align: top;
}
section {
width: 100%;
clear:both;
float: left;
}
section.grayback {
background-color: #fff;
}
.section-subtitle {
font-weight: 600;
font-size: 20px;
text-align: center;
display: block;
margin: 30px 0 20px;
}
.news-list li {
width: 98%;
margin: 15px 1% 0;
float: left;
}
.news-list li a {
display: block;
color: #8a7379;
}
.news-block .news-list li a {
background-color: #fff;
display: table;
}
.pr-block .news-list li a {
background-color: #f7f7f7;
}
.news-list li h3 {
font-size: 16px;
margin-bottom: 5px;
display: table-cell;
}
.news-list li .date {
font-size: 16px;
display: table-cell;
margin-bottom: 5px;
margin-right: 10px;
width: 110px;
font-family: "Noto Sans Japanese","游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
.linkbnr li {
width: 48%;
margin: 0 1% 10px;
float: left;
}
.linkbnr li a {
display: block;
}
.aboutinq li {
width:  48%;
margin:5px 1%;
float:  left;
}
.aboutinq li a {
display: block;
text-align: center;
padding: 15px;
background-color: #000;
color: #fff;
}
.alignright {
float:  right;
}
.alignleft {
float:  left;
} .pagenation {
width:100%;
float: left;
text-align: center;
margin:0px auto 60px;
}
.pagenation ul {
text-align: center;
margin: 0;
padding: 0;
}
.pagenation a, .pagenation span {
margin: 0 2px;
padding: 8px 5px;
display: inline-block;
border: 1px solid #845367;
width: 35px;
text-align: center;
position: relative;
font-weight: 900;
border-radius: 3px;
color:#845367;
}
.pagenation span.dots {
border:0;
}
.pagenation span.current {
background-color:#845367;
color: #fff;
}
.pagenation ul li a {
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display: table;
color: #333;
text-decoration: none;
}
.pagenation ul li div {
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display: table;
color: #333;
text-decoration: none;
}
.pagenation ul li a span{
display:table-cell;
vertical-align:middle;
}
.pagenation ul li div span{
display:table-cell;
vertical-align:middle;
}
.pagenation ul li.current div span{
color:#fff;
}
.pagenation ul li a:hover,
.pagenation ul li a.active{
color: #fff;
background: #333;
}
.pagenation ul li.pagerNext, .pagenation ul li.pagerPrev {
display: none;
}
header {
width: 100%;
position: fixed;
z-index: 99;
background-color: #fff;
height: 70px;
border-bottom: 1px solid #efefef;
top: 0;
}
.home header {
width: 100%;
position: absolute;
z-index: 99;
background-color: #fff;
height: 70px;
border-bottom: 0px solid #fff;
bottom: 0;
top: initial;
}
.pagebody .child_pages .post_content .post_excerpt {
margin-top: 10px;
font-size: 16px;
line-height: 1.8em;
margin-bottom: 10px;
}
.pagebody .child_pages .post_content h4 {
font-weight: normal;
font-size: 16px;
line-height: 1.2em;
}
.pagebody .child_pages .post_content h4 {
background-color: #ec688b;
border-radius: 5px;
padding: 0;
}
.pagebody .child_pages .post_content h4 a{
color:#fff;
display: block;
padding: 10px;
}
#barba-wrapper {
padding-top: 70px;
background-color: #fff;
}
.home #barba-wrapper {
padding-top: 0px;
}
.blockinner {
padding: 60px 0;
margin: 0 15%;
width: 70%;
display: inline-block;
}
.row {
float: left;
width: 100%;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.single-blog .row,.news .row, .post-type-archive-blog .row {
margin-bottom: 60px;
}
.center {
text-align: center;
}
.row.listpanel {
background-color: rgba(91, 191, 255, 0.2);
border-radius: 8px;
clear: both;
margin-top: 0;
padding-top: 0;
}
.companylist .company-catch {
font-weight: 600;
font-size: 20px;
background-color: #0b68e1;
padding: 5px 15px;
border-radius: 5px 5px 0 0;
color: #fff;
}
.pagebody .companylist h2 {
text-align: left;
padding: 10px 15px 10px;
margin: 0 0 15px;
font-size: 25px;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
.pagebody .companylist h2::after,.pagebody .companylist h2::before {
display: none;
}
.pagebody .companylist h3 {
font-size: 20px;
text-align: left;
background-color: transparent;
color: #ff7015;
padding: 0 35px;
}
.pagebody .companylist p {
padding: 0 15px;
}
.halfcolumn {
width: 50%;
padding: 15px 2%;
float: left;
}
.movie-wrap {
position: relative;
padding-bottom: 56.25%; height: 0;
overflow: hidden;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fullcolumn {
width: 100%;
padding: 15px 2%;
float: left;
}
.fullcolumn img{
max-width: 750px;
}
.featureback {
background-color:#f7f7f7;
border-radius:  5px;
}
.featureblock {
background-color: rgba(255,255,255,0.7);
padding: 20px;
border-radius: 10px;
}
.featureblock h3 {
color: #ec408b;
margin-bottom: 20px;
}
.featureblock p {
}
.column75 {
width: 75%;
padding: 15px 2%;
float: left;
}
.column25 {
width: 25%;
padding: 15px 2%;
float: left;
}
.column60 {
width: 60%;
padding: 15px 2%;
float: left;
}
.column40 {
width: 40%;
padding: 15px 2%;
float: left;
}
.column60 img{
max-width:100%;
height:auto;
}
.column25 img{
max-width:100%;
height:auto;
}
.column40 img{
max-width:100%;
height:auto;
}
.column75 img{
max-width:100%;
height:auto;
}
.column33 {
width: 31.33%;
padding: 0px 2% 15px;
float: left;
margin: 0 1% 10px;
position: relative;
}
.imagesection .column33 {
max-height: 380px;
overflow: hidden;
}
.column33 img{
max-width:100%;
height: auto;
}
.imagesection .column33 .varname{
position: absolute;
bottom:0;
width: 100%;
background-color: #fff;
color:#565656;
left: 0;
padding: 5px 0;
}
.image_left_01 {
float:left;
margin-right: 15px;
}
.column50 {
width: 46%;
padding: 0px 2% 15px;
margin: 0 auto;
background-color: #d9e5ff;
border-radius: 5px;
}
.column50 img{
max-width:100%;
height: auto;
}
.halfcolumn img{
max-width:100%;
height: auto;
}
.spttl {
font-size: 22px;
display: block;
font-weight: 600;
margin-bottom: 15px;
}
.tex-left {
text-align: left;
padding: 30px 30px 10px;
}
.page_voice {
background-color: #fff;
padding: 20px 20px 5px;
border-radius: 10px;
margin-bottom: 15px;
}
footer {
color:#fff;
}
footer h3{
margin-bottom:10px;
}
footer a {
color:#fff;
display: block;
margin-bottom: 5px;
}
.mapleft{
width: 30%;
float: left;
height: 400px;
background-color: #000;
}
.mapleft h2 {
color: #fff;
font-size: 36px;
text-align: left;
margin: 100px 25px 0;
}
.mapleft p {
color: #fff;
margin: 10px 25px;
}
.mapright{
width: 70%;
float: right;
}
.photoblock {
padding: 0px 2%;
}
.pagebody .photoblock {
padding: 15px 2%;
}
.photoblock span {
display: block;
position: relative;
overflow: hidden;
}
.pagebody table {
width: 100%;
border-collapse: collapse;
}
.pagebody table th.t_top {
border-top: #b3b3b3 10px solid;
}
.pagebody table th {
border-bottom: #e3e3e3 1px solid;
border-left: #e3e3e3 1px solid;
border-right: #e3e3e3 1px solid;
text-align: center;
background: #f7f7f7;
padding: 10px 20px;
font-weight: normal;
}
.pagebody table td.t_top {
border-top: #8895f9 10px solid;
}
.pagebody table td {
border-bottom: #e3e3e3 1px solid;
border-right: #e3e3e3 1px solid;
border-left: #e3e3e3 1px solid;
text-align: left;
padding: 10px;
background-color: #fff;
}
.pagebody table td td{
border:none;
padding: 5px 0;
}
.pagebody .sptext {
background-color: #d9f6ff;
padding: 20px;
text-align: center;
border-radius: 10px;
margin-bottom: 20px;
font-size: 1.2rem;
color: #204594;
line-height: 1.6em;
display: inline-block;
width: 100%;
}
.pagebody .sptext.sp2 {
background-color: #a5e698;
color: #0e7248;
}
.pagebody .sptext ul{
margin:15px 0;
}
.pagebody .sp-ttl {
font-weight: 600;
display: block;
border-bottom: #fff 3px dotted;
padding-bottom: 15px;
margin-bottom: 15px;
}
.pagebody .sptext li {
width: 49%;
margin: 0 0.5% 5px;
float: left;
background-color: #fff;
padding: 15px;
text-align: left;
border-radius: 6px;
}
.pagebody .sptext.sp2 li {
width: 99%;
margin: 0 0.5% 5px;
float: left;
background-color: #fff;
padding: 15px;
text-align: left;
border-radius: 6px;
}
.ancestlist li {
width: calc(25% - 4px);
float: left;
background-color: #e4f7ff;
margin: 2px 2px;
}
.ancestlist li a{
color: inherit;
display: block;
position: relative;
overflow: hidden;
padding: 15px;
text-align: center;
color: #053071;
font-weight: 600;
}
.ancestlist li a::after {
content: ' ';
width: 100%;
height:100%;
left:-100%;
top:0;
display: block;
position: absolute;
background-color: rgba(91, 191, 255, 0.2);
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 0;
}
.ancestlist li a:hover::after {
content: ' ';
left: 0;
}
.fullcolumn .addresslist li {
width: 47%;
border-left: 20px solid #efefef;
display: inline-block;
background-color: #f7f7f7;
margin: 10px 1%;
}
.halfcolumn .addresslist li {
width: 97%;
border-left: 20px solid #efefef;
display: inline-block;
background-color: #f7f7f7;
margin: 10px 1%;
position: relative;
}
.addresslist li.type-link a::before {
font-family: "Font Awesome 5 Free";
content: '\f0c1';
margin: 0 5px 0 0;
font-weight: bold;
color:#ff7e00;
}
.addresslist li.type-pdf a::before {
font-family: "Font Awesome 5 Free";
content: '\f1c1';
margin: 0 5px 0 0;
font-weight: bold;
color:#ff0000;
}
.addresslist li.type-map a::before {
font-family: "Font Awesome 5 Free";
content: '\f3c5';
margin: 0 5px 0 0;
font-weight: bold;
color:#15aabf;
}
.addresslist li a{
color: inherit;
display: block;
position: relative;
overflow: hidden;
padding: 15px;
}
.addresslist li a::after {
content: ' ';
width: 100%;
height:100%;
left:-100%;
top:0;
display: block;
position: absolute;
background-color: rgba(91, 191, 255, 0.2);
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 0;
}
.addresslist li a:hover::after {
content: ' ';
left: 0;
}
.addresslist li .addname{
color: #204594;
font-size: 18px;
font-weight: 600;
display: inline-block;
}
.addresslist li .add01{
margin: 5px 0;
}
.addresslist li .add02{
margin: 5px 0;
}
.info-link h3::before {
font-family: "Font Awesome 5 Free";
content: '\f0c1';
margin: 0 5px 0 0;
font-weight: bold;
color:#ff7e00;
}
.info-pdf h3::before {
font-family: "Font Awesome 5 Free";
content: '\f1c1';
margin: 0 5px 0 0;
font-weight: bold;
color:#ff0000;
}
.info-file h3::before {
font-family: "Font Awesome 5 Free";
content: '\f15c';
margin: 0 5px 0 0;
font-weight: bold;
color:#15b36a;
}
.toprow li a {
color: #0f297e;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.toprow li a:hover {
color: #ff6a3a;
}
.toprow li a.catbox {
background-color: #f67566;
padding: 3px 10px;
float: right;
color: #fff;
}
.toprow li .catbox a {
background-color: #f67566;
padding: 3px 10px;
float: right;
color: #fff;
}
.whiteblock {
background-color: #fff;
}
#title:first-letter {
color: #00a518;
} .headinner{
max-width: 1240px;
margin: 0 auto;
}
.header-logo {
width:119px;
float: left;
margin: 0 0px 0 25px;
}
.header-logo a{
display: block; 
}
.header-logo img{
width:100%;
height: auto;
max-width: 100px;
}
.home .header-logo img{
margin-top: -30px;
max-width: 140px;
}
.header-menu {
float: right;
position: relative;
}
.header-menu nav {
float:  right;
}
#main-nav2 {
float: left;
width: 100%;
margin:25px 0 0 0;
padding:0;
}
#main-nav2 li {
list-style: none;
float: left;
display: inline-block;
margin: 0 8px;
}
#main-nav2 li a{
color:#845367;
position: relative;
padding: 10px 5px;
font-weight: 600;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
font-size: 1vw;
}
#main-nav2 li a:hover {
color:#dd1560;
}
#main-nav li#menu-item-55 {
margin-top: -5px;
}
#main-nav li#menu-item-55 a::before, #main-nav li#menu-item-55 a::after {
display: none; 
}
#main-nav li#menu-item-55 a {
background-color: #262626;
color: #fff;
border-radius: 110px;
padding: 10px 11px;
font-size: 20px;
}
#main-nav li#menu-item-55 a:hover {
background-color: #0f297e;
}
.faq-list {
}
.faq-list li{
display: inline-block;
margin-bottom: 10px;
width: 100%;
}
.faq-list li a{
}
.voicelist {
}
.voicelist li {
width: calc(50% - 20px);
float: left;
background-color: #fff;
padding: 20px;
margin: 10px;
border-radius: 10px;
} .hero-image {
position: relative;
height: 100vh;
overflow: hidden;
}
.hero-image video {
width:100%;
height:auto;
position: absolute;
bottom:70px;
}
.hero-image2 {
position: relative;
height: 90vh;
overflow: hidden;
}
.hero-title {
position: absolute;
top: 56%;
left: -100%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
width: 60%;
z-index: 3;
color: #fff;
opacity: 0;
}
.home .hero-title {
position: absolute;
top: 40%;
left: -100%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
z-index: 3;
color: #fff;
opacity: 0;
display: inline-block;
background-color: rgba(255,255,255,0.8);
padding: 20px;
border-radius: 10px;
width:initial
}
.hero-title h1{
font-size: 15px;
color: #877070;
text-align: center;
font-weight: 400;
margin-top: 10px;
}
.hero-title .top-title {
font-family: "Sawarabi Mincho", 'Libre Baskerville', serif;
color: #ec008b;
font-size: 40px;
text-align: center;
font-weight: 500;
}
.hero-title.active {
opacity: 1;
left: 50%;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
-ms-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay: .2s;
}
.hero-title p{
text-align: center;
margin-top: 20px;
font-size: 18px;
font-weight: 600;
} .slidebelt-image {
position: relative;
height:560px;
overflow: hidden;
margin-top: 25px;
}
.slidebelt-title {
position: absolute;
top: 50%;
left: -100%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
background-color: rgba(255,255,255,0.8);
width: 50%;
z-index: 3;
padding: 30px;
color: #262626;
opacity: 0;
}
.slidebelt-title.active {
opacity: 1;
left: 0;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
-ms-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay: .2s;
}
.page .aligncenter {
margin: 0 auto 30px;
text-align: center;
float: initial;
display: block;
}
.page .ichiran .aligncenter {
margin-bottom:0;
}
.page .ichiran img {
max-width: 280px;
}
.imagesection {
background-color: #fff;
border-radius:10px;
padding:10px;
}
.page .imagesection .aligncenter {
margin: 0 auto;
}
.pagebody .imagesection h2 {
margin-bottom:20px;
} .child_pages-thumbnail .child_page {
width:50%;
max-width: 100%;
} .whiteback {
position: relative;
}
.whiteback::before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
z-index: 10;
}
.whiteback.topback::before {
display: none;
}
.whiteback::after {
content: " ";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
z-index: 10;
}
.grayback {
position: relative;
}
.grayback::before {
content: " ";
position: absolute;
top: -26px;
left: 0;
width: 100%;
height: 26px;
z-index: 10;
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/race01.png);
}
.grayback::after {
content: " ";
position: absolute;
bottom: -26px;
left: 0;
width: 100%;
height: 26px;
z-index: 10;
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/race02.png);
}
.footnav .column25 {
padding: 15px 1%;
} #fb_page_plugin_area {
width:100%;
max-width: 500px;
display: inline-block;
height:auto;
}
.archive .hero-image {
height: 410px;
background-size: cover;
background-position: center;
position: relative;
}
.archive .hero-image .heroback {
width: 100%;
height: 100%;
background-position: center;
}
.single .hero-image {
height: 410px;
background-size: cover;
background-position: center;
position: relative;
}
.single .hero-image .heroback {
width: 100%;
height: 100%;
background-position: center;
} .page .hero-image {
height: 410px;
background-size: cover;
background-position: top;
position: relative;
}
.page .hero-image .heroback {
width: 100%;
height: 100%;
background-position: top;
background-size: cover;
}
.heroback.proposal,.heroback.blog {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/about.jpg);
}
.heroback.usage {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/usage.jpg);
}
.heroback.productlist {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/product0.jpg);
}
.page-id-982 .heroback.productlist {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/product.jpg);
}
.page-id-170 .heroback.productlist {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/product2.jpg);
}
.page-id-172 .heroback.productlist {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/product3.jpg);
}
.page-id-671 .heroback.productlist {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/product4.jpg);
}
.page-id-1656 .heroback.productlist {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/ps2top.jpg);
}
.heroback.qa{
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/about.jpg);
}
.heroback.corporate-info{
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/about.jpg);
}
.heroback.guide_top{
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/guide.jpg);
}
.heroback.news{
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/about.jpg);
}
.single-blog .heroback.news{
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/about.jpg);
}
.page .management-philosophy .hero-image,.page .qa .hero-image,.page .guide_top .hero-image,.page .contact .hero-image,.page .semiorder .hero-image,.page .outline .hero-image,.page .voice .hero-image,.page .seventy .hero-image,.page .about .hero-image.page .hero-image,.monodukuri .hero-image,.profile .hero-image {
height: 180px;
display:none;
}
.heroback.active::before {
left: 100%;
}
.heroback::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ec688b;
z-index: 3;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
-ms-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay: .2s;
}
.heroback.active::after {
left: 100%;
}
.heroback::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 3;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
.mpblock {
background-color: #fff;
display: inline-block;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
}
.pagebody .mpblock h2 {
padding-bottom: 20px;
}
.flright {
float: right;
}
.wp-caption {
background-color: #fff;
padding: 10px;
margin: 0 20px;
}
.wp-caption img{
width:100%;
}
.wp-caption-text {
font-size: 12px;
}
.page .hero-title .headtitle {
font-size: 30px;
font-weight: 900;
color: #e23b6f;
border: 2px solid #e23b6f;
text-align: center;
padding: 9px 30px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 100px;
}
.page .hero-title p{
color: #000;
margin: 20px 0;
font-size: 20px;
font-weight: 600;
}
.archive .hero-title .headtitle {
font-size: 30px;
font-weight: 900;
color: #e23b6f;
border: 2px solid #e23b6f;
text-align: center;
padding: 9px 30px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 100px;
}
.archive .hero-title p{
color: #000;
margin: 20px 0;
font-size: 20px;
font-weight: 600;
} .listrow {
width: 100%;
display: table;
border-bottom: 1px dotted #efefef;
margin-bottom: 10px;
padding-bottom: 10px;
}
.listrow li{
width:50%;
float: left;
margin:0;
background-color: #fff;
display: table-cell; 
}
.listrow li a{
color: inherit;
display: block;
position: relative;
overflow: hidden;
padding: 15px;
}
.listrow li a::after {
content: ' ';
width: 100%;
height:100%;
left:-100%;
top:0;
display: block;
position: absolute;
background-color: rgba(91, 191, 255, 0.2);
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 0;
}
.listrow li a:hover::after {
content: ' ';
left: 0;
}
.listrow .colinner {
display: table;
width: 100%;
}
.listrow .colinner::before {
font-family: "Font Awesome 5 Free";
content: '\f105';
margin-right: 10px;
color: #fff;
font-weight: bold;
background-color: #1860cb;
display: table-cell;
vertical-align: middle;
padding: 0px 5px;
text-align: center;
width: 5%;
}
.listrow .colmagn {
padding: 10px;
}
.contactlist{
vertical-align: middle;
padding: 0;
}
.contactlist li {
font-size: 25px;
font-weight: 900;
width: 100%;
float:  left;
}
.contactlist li.link-inq {
width:100%;
}
.contactlist li.link-inq a {
font-size: 18px;
color: #fff;
background-color: #a87683;
display: block;
text-align: center;
padding: 20px 23px;
margin: 0px auto 20px;
width: 90%;
border-radius: 5px;
}
.contactlist li.linktel {
font-size: 18px;
color: #fff;
background-color: #a87683;
display: block;
text-align: center;
padding: 20px 23px;
margin: 20px 22px 20px;
width: 90%;
border-radius: 5px;
}
.voicelink {
width: 50%;
display: block;
float: left;
}
.header2 {
display: none;
} footer {
color: #222;
display: inline-block;
width: 100%;
}
footer a {
color: #222;
display: block;
margin-bottom: 15px;
}
footer .menu a::before {
font-family: "Font Awesome 5 Free";
content: '\f105';
margin: 0 5px 0 0;
font-weight: bold;
}
.addressblock {
display: table;
width: 80%;
margin: 0 auto;
}
.addressblock .halfcolumn{
display: table-cell;
}
.foot-list {
width: 80%;
margin: 0 auto;
}
.foot-list li {
width: 48%;
display: inline-block;
margin: 0 0.5% 5px;
}
.foot-list li a {
background-color: rgba(0,0,0,0.4);
padding: 15px 0;
font-weight: 600;
text-align: center;
position: relative;
overflow:  hidden;
}
.foot-list li a::after {
content: ' ';
width: 100%;
height:100%;
left:-100%;
top:0;
display: block;
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 0;
}
.foot-list li a:hover::after {
content: ' ';
left: 0;
}
.sns-list {
margin: 0 auto;
text-align: center;
}
.sns-list li {
display: inline-block;
margin: 0 8px;
}
.sns-list li a {
background-color: #8e6c7c;
padding: 15px 0;
font-weight: 600;
text-align: center;
color: #fff;
border-radius: 6px;
width: 50px;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.sns-list li a.fb:hover {
background-color: #4267b2;
color:#fff;
}
.sns-list li a.tw:hover {
background-color: #1da1f2;
color:#fff;
}
.sns-list li a.ins:hover {
background-color: #7d29c4;
color:#fff;
}
.sns-list li a.gplus:hover {
background-color: #dc4e41;
color:#fff;
} .pagehead {
z-index: 3;
position: absolute;
text-transform: uppercase;
top: -100px;
left: 0;
padding: 0 50px;
font-size: 80px;
color: #03113c;
font-weight: 900;
}
.active .pagehead {
top:250px;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-delay: .6s;
-moz-transition-delay: .6s;
-ms-transition-delay: .6s;
-o-transition-delay: .6s;
transition-delay: .6s;
}
.child-list{
z-index: 3;
position: absolute;
width: 100%;
background-color: rgba(15,41,126,0.8);
bottom: -300px;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-delay: .6s;
-moz-transition-delay: .6s;
-ms-transition-delay: .6s;
-o-transition-delay: .6s;
transition-delay: .6s;
}
.active .child-list {
bottom:0;
}
.pagebody .child_pages .child_page-container {
margin: 5px;
border: 1px solid #dedede;
background-image: none;
background-repeat: repeat-x;
background-position: left bottom;
border-radius: 5px;
padding: 10px;
background-color: #fff;
border-radius: 0;
border: 0;
}
.child-list ul{
float: left;
width: 100%;
padding: 10px;
}
.child-list ul li {
width: 22%;
display: inline-block;
margin:5px 0.5%;
font-size: 14px;
}
.child-list ul li a{
background-color:#03113c;
display: block;
padding: 15px 0;
color:#fff;
text-align: center;
font-weight: 600;
}
.child-list ul li ul{
display: none;
}
.pagebody .blockinner {
max-width: 1120px;
margin: 0 auto;
display: block;
}
.seminarbody .blockinner {
max-width: 1000px;
margin: 0 auto;
display: block;
}
.archivebody .blockinner {
max-width: 1000px;
margin: 0 auto;
display: block;
}
.page-title {
font-size: 30px;
font-weight: 900;
text-align: center;
margin: 10px 0 50px;
position: relative;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
color:#e23b6f;
}
.imginner .page-title {
color: #222;
margin: 20px;
}
.imginner .page-subtitle {
text-align: center;
font-size: 16px;
margin: 0;
}
.smallinner {
width: 70%;
margin: 0 15%;
} .journal h1 {
position: relative;
padding: 0.5em 0.5em 0.5em 2.5em;
color: #215dc8;
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #f2fcff;
margin-bottom: 15px;
}
.journal h1:before{ 
font-family: "Font Awesome 5 Free";
content: "\f138";
position: absolute;
left: 0.5em;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
color: #215dc8; 
top:50%;
}
.seminarbody h1 {
position: relative;
padding: 0.5em 0.5em 0.5em 2.5em;
color: #215dc8;
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #f2fcff;
margin-bottom: 15px;
}
.seminarbody h1:before{ 
font-family: "Font Awesome 5 Free";
content: "\f138";
position: absolute;
left: 0.5em;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
color: #215dc8; 
top:50%;
}
.pagebody h2 {
font-size: 30px;
text-align: center;
margin: 0px 0 0px;
position: relative;
padding: 15px 55px 0px;
position:relative; 
}
.pagebody h2.item_title {
color: #e23b6f;
clear:both;
}
.seminarbody h2 {
font-size: 18px;
text-align: center;
margin: 20px 0 0px;
position: relative;
padding: 5px 0;
color: #fff;
background-color: #215dc8;
position: relative;
}
.seminarbody h2::before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
left : 0.5em;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
top:50%;
}
.seminarbody h2:first-letter {
color: inherit;
}
.seminarblock1 {
background-color: #f8f8f8;
padding: 25px;
border-radius: 5px;
margin-bottom: 25px;
}
.seminarinner {
background-color: #fff;
padding: 15px 20px;
border-radius: 5px;
}
.seminarblock1.prg p{
margin-bottom: 7px;
}
.seminarblock1.abouttex th{
width: 100px;
background-color: #0a3b7b;
padding: 10px 0;
text-align: center;
color: #fff;
}
.seminarblock1.abouttex td{
padding: 10px 15px;
background-color: #fff;
}
#faq-block {
margin-top:-70px;
padding-top:70px;
}
.faq-list {
background-color: #fff;
padding: 20px;
border-radius: 10px;
}
.pagebody .faq-content h3 {
margin: 30px 0 0;
}
.faqlist-question::before {
font-family: "Font Awesome 5 Free";
content: '\f0da';
color: #9b566b;
margin: 0 15px 0 0px;
font-weight: bold;
}
.faq-answer {
padding: 10px 40px 0px;
background-color: #fff;
clear: both;
border-radius: 0 0 10px 10px;
float: left;
width: 100%;
margin-bottom: 20px;
}
.scroll-back {
display: block;
padding: 10px 0;
float: left;
width: 100%;
margin: 0;
}
.scroll-back a {
float: right;
background-color: #f4eceb;
padding: 5px 10px;
color:#9b566b;
border-radius: 50px
}
.pagebody h3 {
font-size: 20px;
text-align: left;
margin: 30px 0 10px;
background-color: #ec688b;
color: #fff;
position: relative;
padding: 10px 0 10px 60px;
border-radius: 45px;
clear: both;
}
.pagebody h3::before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
left: 1em;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
top: 50%;
}
.pagebody .faq-content h3.faq-question {
border-radius: 10px 10px 0 0;
}
.pagebody h4 {
font-size: 20px;
text-align: center;
margin: 0px 0 15px;
background-color: #f5f5f5;
padding: 10px;
}
.pagebody.journal h2 {
font-size: 20px;
text-align: left;
margin: 0px 0 15px;
background-color: #f5f5f5;
padding: 5px 20px;
border-bottom: 1px dotted #cfcfce;
clear: both;
}
.pagebody.journal p {
margin:0 20px 25px;
}
.pagebody.journal .jimgblock p {
width:calc(67% - 25px);
float: left;
}
.jimgblock img {
width:30%;
float: right;
margin-bottom: 15px;    
}
.pagebody.journal h2::before,.pagebody.journal h2::after {
display: none;
}
.pagebody.journal h2:first-letter {
color: initial;
}
.pagebody .halfcolumn img {
max-width: 100%;
height:auto;
}
.pagebody .fullcolumn img {
max-width: 100%;
height:auto;
}
.pagebody .halfcolumn.reverse {
float:  right;
}
.miniimg li {
width:49%;
margin:5px 0.5%;
float: left;
text-align: center;
font-size: 14px;
}
.miniimg li img{
width: 100%;
height:auto;
}
.dv1 {
}
.dv1 li {
width: 100%;
clear: both;
padding: 5px 15px;
background-color: #efefef;
float: left;
margin: 5px 0;
}
.dv1 li ul li {
width: 31.333%;
background-color: #fff;
float: left;
clear: initial;
margin: 5px 1%;
}
.contact-block .blockinner {
max-width: 500px;
padding: 20px 0;
margin: 0 auto;
display: block;
}
.contact-block .blockinner .row{
margin: 30px 0;
padding: 10px;
}
.contact-block .blockinner .row .fullcolumn{
text-align: center;
}
.diamond {
left: 0;
right: 0;
width: 80px;
height: 80px;
margin: 30px auto;
font-weight: 600;
background: #efefef;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
overflow: hidden;
color: #fff;
font-size: 30px;
}
.diamond__inner {
position: absolute;
top: -29.5px;
left: -200.5px;
width: 150px;
height: 150px;
line-height: 138px;
background: transparent;
background-color: transparent;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
text-align: center;
background-color: #ffbd00;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
opacity: 0;
}
.active .diamond__inner {
opacity: 1;
left: -29.5px;
} *, ::before, ::after {
box-sizing: border-box;
}
.slideout {
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.slideout.active::before {
left: 100%;
}
.slideout::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ec688b;
z-index: 3;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
-ms-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay: .2s;
}
.slideout.active::after {
left: 100%;
}
.slideout::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 3;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
#imageblock {
z-index: 2;
position: relative;
height: 100%;
width: 80%;
float: right;
background-color:#fff;
}
#imageblock2 {
z-index: 2;
position: relative;
height: 600px;
width: 60%;
float: right;
}
#imageblock3 {
z-index: 2;
position: relative;
height: 500px;
width: 50%;
float: left;
}
.imageinner {
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.imageinner .imageheight {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: top;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#image01 {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/slide01.jpg);
width: 100%;
height: 100%;
}
#imagehead02 {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/slide02.jpg);
width: 100%;
height: 100%;
}
#imagehead03 {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/head03.jpg);
width: 100%;
height: 100%;
}
#image01::before, #imagehead02::before, #imagehead03::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#image02 {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/top02.jpg);
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
#image03 {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/top03.jpg);
width: 100%;
height: 100%;
}
.imageinner.active::before {
left: 100%;
}
.imageinner::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ec688b;
z-index: 3;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
-ms-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay: .2s;
}
.imageinner.active::after {
left: 100%;
}
.imageinner::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 3;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
#imageblock2 ul {
z-index: 2;
background-color: #292929;
width: 100%;
padding: 0 10px 10px;
display: inline-block;
}
#imageblock2 ul li {
margin: 3px 2%;
width: 46%;
float: left;
}
#imageblock2 ul li a {
background-color: #000;
color: #fff;
padding: 10px 0;
text-align: center;
display: block;
position: relative;
overflow: hidden;
}
#imageblock2 ul li a::after {
content: "";
background-color: rgba(150,255,255,0.3);
position: absolute;
width:100%;
height:100%;
top:0;
left:-100%;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 0;
}
#imageblock2 ul li a:hover::after {
left:0;
}
input {
margin-bottom: 5px;
}
.submit-button input {
width: 400px;
margin: 30px auto 0;
background-color: #ff4343;
border: none;
padding: 10px;
display: block;
border-radius: 5px;
color: #fff;
font-weight: 900;
font-size: 30px;
}
.service-left {
position: relative;
height: 500px;
width: 90%;
}
.service-left .svclist {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/red-ribbon.png);
background-repeat: no-repeat;
background-position: left top;
position: absolute;
left: -120%;
top: 0px;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
}
.active.service-left .svclist {
left: 0;
width: 100%;
z-index: 30;
}
.service-left .svcsub {
width: 80%;
margin: 20px 15px 10px;
}
.service-left .svcsub span{
margin: 5px 1%;
font-size: 20px;
color:  #fff;
font-weight: 600;
}
.service-left .svclist ul {
width: 100%;
margin: 0;
}
.svc-listinner-l {
width: 75%;
float:  right;
margin:0 7.5%;
}
.service-left .svclist li {
width: 18%;
float: left;
margin: 5px 1%;
}
.service-left .svclist li a{
}
.service-left .svclist li a img {
width: 100%;
}
.service-right {
position: relative;
height: 500px;
width: 90%;
float: right;
}
.service-right .svclist {
background-image: url(//www.studio-tomi.co.jp/kyoto/wp-content/themes/tomi2/css/style.css?v2026/img/red-ribbon.png);
background-repeat: no-repeat;
background-position: right top;
position: absolute;
right: -120%;
top: 0px;
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: 0s;
}
.active.service-right .svclist {
right: 0;
width: 100%;
z-index: 30;
}
.service-right .svcsub {
width: 80%;
margin: 20px 15px 10px;
}
.service-right .svcsub span{
margin: 5px 1%;
font-size: 20px;
color:  #fff;
font-weight: 600;
}
.service-right .svclist ul {
width: 100%;
margin: 0;
}
.service-right .svclist li {
width: 18%;
float: left;
margin: 5px 1%;
}
.svc-listinner-r {
width: 75%;
float:  left;
margin:0 7.5%;
}
.service-right .svclist li a{
}
.service-right .svclist li a img {
width: 100%;
}
.pagelist li {
position: relative;
width: 23%;
float: left;
margin: 10px 1%;
}
.pagelist li span {
position: absolute;
bottom: 0;
background-color: #000;
width: 100%;
left: 0;
color: #fff;
padding: 5px 20px;
}
.pagelist li img {
width: 100%;
height: auto;
float:  left;
} #breadcrumb {
margin-left: 0;
clear: both;
background-color: #ec688b;
padding: 10px 0;
}
#breadcrumb ul {
max-width: 980px;
margin: 0 auto;
}
#breadcrumb li{
display:inline; list-style: none;
font-weight: bold; }
#breadcrumb li:after{ font-family: "Font Awesome 5 Free";
content: '\f0da';
padding: 0 3px;
color: #fff;
font-weight: 600;
margin: 0 5px;
}
#breadcrumb li:last-child:after{
content: '';
}
#breadcrumb li a {
text-decoration: none;
color: #fff;
}
#breadcrumb li span {
text-decoration: none;
color: #fff;
}
#breadcrumb li:first-child a:before{ font-family: "Font Awesome 5 Free";
content: '\f015';
font-weight: normal;
font-size: 1.1em;
color: #fff;
font-weight: 600;
margin-right: 5px;}
#breadcrumb li a:hover {
text-decoration: underline;
}
.pagebody h2.gutter {
margin-bottom:30px;
}
.sns-timeline__instawrap {
position: relative;
padding: 0 10px;
}
.sns-timeline__instawrap li {
position: relative;
float: left;
width: 20%;
border: 1px solid #ffeae3;
}
.sns-timeline__instawrap li::before {
content: '';
display: block;
padding-top: 100%;
}
.sns-timeline__instawrap a {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
.sns-timeline__instawrap img {
max-width: 100%;
}
.sns-timeline__instafollow {
text-align: center;
clear: both;
padding-top: 20px;
margin: 0;
}
.sns-timeline__instafollow img {
margin-right: .5em;
}
.swiper-slide-shadow-left, .swiper-slide-shadow-right {
display: none;
}
.ttl-message {
background-image: linear-gradient(90deg, #ec688b, #db94a7);
color: #fff;
position: relative;
padding: 16px 0 24px;
}
.ttl-message h2{
color: #fff;
}
.ttl-message::after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 22px 16px 0 16px;
border-color: #e47e99 transparent transparent transparent;
position: absolute;
left: 0;
right: 0;
top: 100%;
margin: 0 auto;
}
.movielist {
background-color: #fff;
display: inline-block;
width: 100%;
padding: 40px 20px 10px;
margin-bottom: 40px;
}
.movielist h3 {
font-size: 20px;
text-align: left;
margin: 30px 0 0px;
background-color: #a87683;
color: #fff;
position: relative;
padding: 10px 0 10px 60px;
border-radius: 5px 5px 0 0px;
clear: both;
}
.movielist h3::before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
left: 1em;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
top: 50%;
}
.movielist li {
width: calc(100%/3 - 20px);
margin:10px;
float: left;
}
.buylist li{
width: calc(100%/3 - 20px);
margin:10px;
float: left;
}
.buylist img{
width: 100%;
border-radius: 5px;
}
.buylist .buybtn {
text-align: center;
padding: 5px 0 20px;
}
.buylist .buybtn a {
background-color: #ec688b;
color: #fff;
border-radius: 50px;
padding: 10px;
display: inline-block;
}
.btn-general {
margin: 0 auto;
width: 216px;
}
.btn-general.-black a, .btn-general.-black button, .btn-general.-black p {
background-image: linear-gradient(-45deg, #a0a0a0, #020202);
display: block;
text-align: center;
color: #fff;
padding: 8px 15px;
margin: 20px auto;
border-radius: 70px;
box-shadow: 4px 4px rgba(0, 0, 0, 0.1);
}
.columnwrap {
display: flex;
flex-wrap: wrap;
width: ;
}
.lefthero {
width: 38%;
position: fixed;
height: 100vh;
overflow: hidden;
}
.lefthero .imginner{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: 400px;
text-align: center;
}
.lefthero .imginner img {
width: 100%;
height: auto;
max-width: 300px;
}
.lefthero .imginner h1 {
color: #222;
margin:20px auto;
}
.lefthero .imginner p {
color: #222;
font-size:80%;
}
.rightbody {
width:62%;
margin-left: 38%;
position: relative;
background-attachment: fixed;
background-position: 230px center;
background-size: 115%;
}
.rightbody .pinkback {
background-color: #e5d6d6d1;
height: 100vh;
}
.rightbody .blockinner {
padding: 150px 0 0px;
}
.rightbody .child_pages .post_content h4 a,.centerbody .child_pages .post_content h4 a{
font-weight: bolder;
margin-top: .5em;
font-size: 16px;
line-height: 1.2em;
color: #dd1560;
}
.rightbody .child_pages .child_page-container,.centerbody .child_pages .child_page-container {
margin: 5px;
border: 0px solid #dedede;
background-image: none;
background-repeat: repeat-x;
background-position: left bottom;
border-radius: 5px;
padding: 10px;
background-color: #ffffff91;
text-align: center;
}
.rightbody .page-title {
font-size: 26px;
font-weight: 600;
text-align: center;
margin: 50px 0 50px;
position: relative;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
color: #8d5e70;
padding: 10px;
border-top: 1px solid #8d5e70;
border-bottom: 1px solid #8d5e70;
}
.rightbody .header-menu,.centerbody .header-menu {
position: relative;
margin: 30px auto 0;
display: block;
text-align: center;
width: 100%;
}
.centerbody .header-menu nav {
float: none;
margin-bottom: 20px;
margin: 0 auto;
text-align: center;
display: block;
}
.rightbody .header-menu nav {
float: none;
margin-bottom: 20px;
margin: 0 auto 30px;
text-align: center;
display: block;
border-bottom: 1px solid #845367;
padding-bottom: 30px;
}
.rightbody #main-nav,.centerbody #main-nav {
float: none;
width: initial;
margin: 0 auto;
padding: 0;
display: inline-block;
}
.rightbody .footnav .column25 {
width: 50%;
}
.rightbody .ichiran h3 {
text-align: center;
font-size: 21px;
color: #000;
padding: 12px 15px;
}
.rightbody .ichiran a {
color: #000;
}
.centerbody {
width:100%;
min-width: 1000px;
position: relative;
background-attachment: fixed;
background-position: center top;
background-size: 115%;
}
.centerbody .page-title {
font-size: 26px;
font-weight: 600;
text-align: center;
margin: 50px 0 50px;
position: relative;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
color: #8d5e70;
padding: 10px;
border-top: 1px solid #8d5e70;
border-bottom: 1px solid #8d5e70;
}
.centerbody h2{
margin-bottom:15px;
}
.centerbody .blockinner {
padding: 35px 40px 0;
background-color: #e5d6d6d9;
}
.centerbody .contact-block .blockinner,.centerbody footer .blockinner {
background-color: transparent;
padding: 40px 0;
}
.centerbody .mpblock {
background-color: transparent;
}
.acd-check{
display: none;
}
.acd-label {
background: #8d5e70;
color: #fff;
display: block;
margin-bottom: 1px;
padding: 10px;
position: relative;
font-size: 21px;
text-align: center;
}
.acd-label::after {
background: #772645;
box-sizing: border-box;
content: '\f067';
display: block;
font-family: "Font Awesome 5 Free";
padding: 11px 20px;
position: absolute;
right: 0;
top: 0px;
font-weight: bold;
}
.acd-content{
background-color: #ffffff91;
display: block;
height: 0;
opacity: 0;
padding: 0 30px;
transition: .5s;
visibility: hidden;
margin-bottom:20px;
}
.acd-content p {
}
.acd-content p strong {
font-weight: bolder;
margin-top: .5em;
font-size: 18px;
line-height: 1.2em;
color: #dd1560;
}
.acd-check:checked + .acd-label:after{
content: '\f068';
font-weight: bold;
}
.acd-check:checked + .acd-label + .acd-content{
height: auto;
opacity: 1;
padding: 30px;
visibility: visible;
}
.centerbody table {
width: 100%;
border-collapse: collapse;
}
.centerbody table th.t_top {
border-top: #b3b3b3 10px solid;
}
.centerbody table th {
border-bottom: #e3e3e3 1px solid;
border-left: #e3e3e3 1px solid;
border-right: #e3e3e3 1px solid;
text-align: center;
background: #f7f7f7;
padding: 10px 20px;
font-weight: normal;
}
.centerbody table td.t_top {
border-top: #8895f9 10px solid;
}
.centerbody table td {
border-bottom: #e3e3e3 1px solid;
border-right: #e3e3e3 1px solid;
border-left: #e3e3e3 1px solid;
text-align: left;
padding: 10px;
background-color: #fff;
}
.centerbody table td td{
border:none;
padding: 5px 0;
}
.centerinner {
padding: 0 80px;
}
.centerinner .blockinner.centerin {
margin: 0;
width: 100%;
}
.child_pages .post_content .post_excerpt {
margin-top: .5em;
font-size: 12px;
line-height: 1.2em;
display: none;
}@media screen and (min-width:1137px) {
.header2 {
display: none;
}
.footsp {
margin-bottom:15px;
}
.service-left {
position: relative;
height: 550px;
width: 90%;
}
.page .hero-title {
width: auto;
}
.archive .hero-title {
width: auto;
}
}
@media screen and (max-width:1137px) {
.rightbody .header-menu, .centerbody .header-menu {
display: none;
}
.header2 {
display: block;
}
.centerbody {
min-width: initial;
}
.centerbody .blockinner {
padding: 35px 40px 0;
min-width: initial;
background-color: #e5d6d6d9;
margin: 0;
width: 100%;
}
body {
font-size: 16px;
}
.centerinner {
padding: 0 0px;
}
.pure-container {
display: block;
}
.header-logo {
float: initial;
}
.hero-image {
height: 300px;
}
.environment .active .pagehead {
top:20px;
}
.pagehead {
font-size: 60px;
}
.archive .hero-title {
width: auto;
}
.lefthero {
width: 100%;
position: initial;
height: auto;
overflow: initial;
}
.lefthero img{
width: 100%;
height:auto;
}
.lefthero .imginner {
position: relative;
margin: 100px auto 40px;
top: 0;
left: 0;
transform: none;
width: 100%;
padding: 0 5%;
}
.rightbody {
width: 100%;
margin-left: 0;
min-width: initial;
position: relative;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
}
@media screen and (max-width:1137px) {
.fullcolumn img{
max-width: initial;
width:100%;
height:auto;
}
.child-list ul {
width: 100%;
}
.centerbody .contact-block .blockinner, .centerbody footer .blockinner {
float: none;
margin: 0 auto;
}
.archive .hero-title {
width: initial;
}
#imageblock {
width: 100%;
}
.header-menu {
display: none;
}
.header-logo {
width: 100px;
margin: 5px 10px;
text-align: left;
}
#imageblock2 ul {
width: 80%;
}
.blockinner {
width: 90%;
padding: 30px 0;
margin: 0 5%;
}
.active .pagehead {
top: 50px;
}
.page-title {
font-size: 30px;
}
.pagebody h2 {
font-size: 26px;
margin: 10px 0;
padding: 0;
}
.column40 {
width: 100%;
text-align: center;
}
.column60 {
width: 100%;
}
.fullcolumn .addresslist li {
width: 97%;
}
header,.home header {
position: fixed;
z-index: 99;
top: 0;
}
.home #barba-wrapper {
padding-top: 70px;
}
.home .header-logo img {
margin-top: 0px;
}
.home #barba-wrapper {
padding-top: 70px;
}
.hero-title {
}
.hero-title h1 {
font-size: 12px;
}
.hero-title .top-title {
font-size: 25px;
}
.hero-title .hero-subttl {
display: none;
}
.hero-image {
height: 320px;
border-bottom: 0px solid #ec688b;
}
.halfcolumn .halfcolumn {
width: 50%;
}
#imageblock2 ul {
width: 100%;
bottom: 0;
margin-bottom: 0;
}
#imageblock2 ul li {
padding: 1px 0;
font-size: 13px;
}
#imageblock2 {
width: 90%;
margin: 0 5%;
position: initial;
display: none;
}
#imageblock2 ul {
width: 100%;
bottom: 0;
margin-bottom: 0;
top: initial;
}
.service-left {
position: relative;
height: initial;
width: 100%;
}
.active.service-left .svclist {
position: initial;
float: left;
}
.svc-listinner-l {
width: 90%;
margin: 0 5%;
}
.service-left .svclist li {
width: 48%;
}
.service-right {
position: relative;
height: initial;
width: 100%;
}
.active.service-right .svclist {
position: initial;
float: right;
}
.svc-listinner-r {
width: 90%;
margin: 0 5%;
}
.service-right .svclist li {
width: 48%;
}
.oslist li {
width: 50%;
}
.news-list li {
width: 98%;
margin: 10px 1%;
float: left;
}
.header-logo {
width: 100px;
margin: 5px 10px;
text-align: left;
}
.header-logo img{
width: 100%;
}
#imageblock2 ul li {
padding: 0;
font-size: 13px;
}
.active .pagehead {
top: 50px;
}
.environment .active .pagehead {
top:50px;
}
.pagehead {
width: 100%;
font-size: 40px;
text-align: center;
}
.child-list ul {
width: 100%;
}
.child-list ul li {
width: 48%;
margin: 2px 0.5%;
}
.child-list ul li a {
padding: 5px 0;
font-size: 13px;
font-weight: 400;
}
.ancestlist li {
width: calc(50% - 4px);
}
h2 {
font-size: 28px;
}
h3 {
font-size: 1.3em;
}
.subtex {
text-align: center;
}
.column75 h2, .column25 h2 {
text-align: center;
}
.slidebelt-title {
position: initial;
width: 100%;
display: block;
clear: both;
top: 0;
transform: none;
}
.pagebody h3 {
font-size: 18px;
text-align: left;
padding: 5px 10px;
}
.pagebody h3::before {
display: none;
}
footer .column33 {
width: 100%;
}
.footsp {
width:  33.33%;
float:  left;
}
footer .column16 {
width: 100%;
margin-bottom: 15px;
}
footer .column16 a {
display: block;
width: 33.33%;
float: left;
}
#osttl {
font-size: 25px;
margin: 0px 2% 0;
}
.column75 {
width: 100%;
}
.rightbody .footnav .column25 {
width: 40%;
margin: 0 5%;
}
.column33 {
width: 48%;
}
.column25.last {
width: 60%;
margin: 0 20%;
}
.pagebody table td input {
}
.pagebody table td textarea {
}
.submit-button input {
width: 80%;
}
.slideout {
width: 100%;
}
.hero-title.active {
}
.mapleft {
width: 100%;
float: left;
height: initial;
}
.mapleft h2 {
margin: 10px 25px 0;
}
.mapright {
width: 100%;
}
.page .hero-title {
}
.pagelist li {
position: relative;
width: 48%;
float: left;
margin: 10px 1%;
}
textarea,input {
}
.page .hero-image {
height: 240px;
} .child_pages-thumbnail .child_page {
width:100%;
max-width: 100%;
}
#breadcrumb ul {
max-width: initial;
margin: 0 auto;
width: 90%;
}
#breadcrumb li {
display: inline;
list-style: none;
font-weight: bold;
font-size: 12px;
}
.page .hero-image .heroback {
background-size: 190% auto;
}
.page .hero-title .headtitle {
font-size: 22px;
}
.contactlist li.link-inq {
width: 100%;
}
.contact-block {
background-size: cover;
}
.home .hero-title {
width: 80%;
}
.newsarchive li {
width: 98%;
float: left;
margin: 10px 1%;
}
}
@media screen and (max-width:869px) {
.sns-timeline__instawrap li {
width: 33.333%;
}
.movielist li {
width: calc(100%/1 - 20px);
margin: 10px;
float: left;
}
.buylist li{
width: calc(100%/1 - 20px);
margin:10px;
float: left;
}
.footnav .column25 {
width:48%;
}
.centerbody h2 {
margin-bottom: 15px;
font-size: 1.4em;
}
body {
font-size: 16px;
}
.centerbody .blockinner {
padding: 35px 10px 0;
}
.rightbody .blockinner {
padding: 35px 20px;
width: 100%;
margin: 0 auto;
}
.lefthero .imginner p {
font-size: 100%;
}
.centerinner h3 {
font-size: 1.3em;
margin: 20px 0;
}
}
@media screen and (max-width:480px) {
.voicelink {
width: 100%;
}
.footnav .column25 {
width:98%;
}
.halfcolumn {
width: 100%;
}
.listrow li {
width: 100%;
margin-bottom: 10px;
}
.oslist li {
width: 100%;
}
.contactlist li {
display: block;
width: 100%;
text-align: center;
}
.child-list ul li a::after, .contactlist li.link-inq a::after {
display: none;
}
.column33 {
width: 100%;
}
.footsp {
width: 100%;
}
.contactlist li.linktel {
margin: 20px 18px 20px;
color: #fff;
}
.contactlist li.linktel a {
color: #fff;
}
#form_msg th {
width: 20%;
}
footer .column16 {
display: none;
}
.active.service-left .svclist {
width: 100%;
}
.active.service-right .svclist {
width: 100%;
}
.halfcolumn .halfcolumn {
width: 100%;
}
.contactlist li.link-inq {
width: 100%;
}
.voicelink {
width: 100%;
}
.hero-title .top-title {
font-size: 19px;
}
footer {
}
.rightbody .footnav .column25 {
width: 90%;
margin: 0 5%;
}
.copyright {
font-size: 15px;
color: #8e6c7c;
}
.page .hero-image .heroback {
background-size: 220% auto;
text-align: center;
}
.page .hero-title .headtitle {
font-size: 20px;
}
.pagebody h2 {
font-size: 20px;
}
.pagebody h3 {
text-align: center;
font-size: 17px;
}
.pagebody .newsarchive h3 {
text-align: left;
font-size: 15px;
}
}html, body {
height: 100%; }
#main-nav {
margin-top: 120px;
padding: 0;
}
#main-nav li {
list-style: none;
}
#main-nav li a {
display: block;
text-align: center;
color: #fff;
font-weight: 900;
font-size: 40px;
padding: 20px;
} .pure-container {
position: fixed;
height: 100%;
width: 0;
z-index: 99999;
top: 0;
right: 0;
}
.about .pure-container {
position: fixed;
} .pure-toggle {
left: -9999px;
position: absolute;
top: -9999px; }
.pure-toggle:focus ~ .pure-toggle-label {
color: #333; }
.pure-toggle-label {
display: none;
cursor: pointer;
display: block;
position: absolute;
top: 11px;
max-width: initial;
z-index: 99;
color: #333;
width: 50px;
height: 50px;
transition: all 400ms ease-in-out;
border-radius: 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent; }
.pure-toggle-label:hover {
opacity: 1; }
.pure-toggle-label:hover .pure-toggle-icon,
.pure-toggle-label:hover .pure-toggle-icon:before,
.pure-toggle-label:hover .pure-toggle-icon:after {
opacity: 1; }
.pure-toggle-label:active {
-webkit-tap-highlight-color: transparent; }
.pure-toggle-label .pure-toggle-icon,
.pure-toggle-label .pure-toggle-icon:before,
.pure-toggle-label .pure-toggle-icon:after {
position: absolute;
top: 54%;
left: 50%;
height: 3px;
width: 26px;
cursor: pointer;
background: #333;
display: block;
content: '';
transition: all 500ms ease-in-out; }
.navbar-colorchange .pure-toggle-label .pure-toggle-icon,
.navbar-colorchange .pure-toggle-label .pure-toggle-icon:before,
.navbar-colorchange .pure-toggle-label .pure-toggle-icon:after {
background: #333;}
.pure-toggle-label .pure-toggle-icon {
transform: translate3d(-50%, -4px, 0);
-webkit-transform: translate3d(-50%, -4px, 0); }
.pure-toggle-label .pure-toggle-icon:before {
transform: translate3d(-50%, -14px, 0);
-webkit-transform: translate3d(-50%, -12px, 0); }
.pure-toggle-label .pure-toggle-icon:after {
transform: translate3d(-50%, 10px, 0);
-webkit-transform: translate3d(-50%, 8px, 0); }
.pure-toggle-label[data-toggle-label='left'] {
left: 15px;
right: auto; }
.pure-toggle-label[data-toggle-label='right'] {
right: 14px;
left: auto; }
.pure-toggle-label[data-toggle-label='top'] {
left: 50%;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0); }
.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label:not([data-toggle-label='left']),
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label:not([data-toggle-label='right']),
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label:not([data-toggle-label='top']) {
opacity: 0;
z-index: -1; }
.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'],
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'],
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] {
border-color: #333;
color: #333; }
.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon,
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon {
background-color: transparent; }
.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon:before,
.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon:after,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon:before,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon:after,
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon:before, .pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon:after {
top: 0; }
.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon:before,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon:before,
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon:before {
transform: translateX(-50%) rotate(45deg);
-webkit-transform: translateX(-50%) rotate(45deg);background-color: #fff; }
.pure-toggle[data-toggle='left']:checked ~ .pure-toggle-label[data-toggle-label='left'] .pure-toggle-icon:after,
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] .pure-toggle-icon:after,
.pure-toggle[data-toggle='top']:checked ~ .pure-toggle-label[data-toggle-label='top'] .pure-toggle-icon:after {
transform: translateX(-50%) translateY(-10px) rotate(-45deg);
-webkit-transform: translateX(-50%) translateY(-10px) rotate(-45deg);
top: 10px;background-color: #fff; } .pure-drawer {
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100vh;
visibility: hidden;
background-color: rgba(0,0,0,0.9);
transition-property: all;
transition-duration: 500ms;
transition-timing-function: ease-out;
width: 100%; }
@media only screen and (min-width: 40.063em) {
.pure-drawer {
width: 100%; } }
@media only screen and (min-width: 64.063em) {
.pure-drawer {
width: 30%; } }
.pure-drawer[data-position='right'] {
left: auto;
right: 0; }
.pure-drawer[data-position='top'] {
height: 100%;
width: 100%; }
@media only screen and (min-width: 40.063em) {
.pure-drawer[data-position='top'] {
height: 100%; } }
@media only screen and (min-width: 64.063em) {
.pure-drawer[data-position='top'] {
height: 100%; } } .pure-pusher-container {
position: relative;
height: 100%;
overflow: hidden; } .pure-pusher {
position: relative;
height: 100%;
overflow-y: auto;
left: 0;
z-index: 2;
background-color: #fff;
transition-property: transform;
transition-duration: 500ms;
transition-timing-function: ease-out; } .pure-overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 0;
height: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.4);
transition-property: opacity;
transition-duration: 500ms;
transition-delay: 500ms;
transition-timing-function: ease-in-out; }
.pure-toggle[data-toggle='left']:checked ~ .pure-overlay[data-overlay='left'] {
left: 100%; }
@media only screen and (min-width: 40.063em) {
.pure-toggle[data-toggle='left']:checked ~ .pure-overlay[data-overlay='left'] {
left: 300px; } }
@media only screen and (min-width: 64.063em) {
.pure-toggle[data-toggle='left']:checked ~ .pure-overlay[data-overlay='left'] {
left: 300px; } }
.pure-toggle[data-toggle='right']:checked ~ .pure-overlay[data-overlay='right'] {
right: 100%; }
@media only screen and (min-width: 40.063em) {
.pure-toggle[data-toggle='right']:checked ~ .pure-overlay[data-overlay='right'] {
right: 100%; } }
@media only screen and (min-width: 64.063em) {
.pure-toggle[data-toggle='right']:checked ~ .pure-overlay[data-overlay='right'] {
right: 100%; } }
.pure-toggle[data-toggle='top']:checked ~ .pure-overlay[data-overlay='top'] {
top: 100%; }
@media only screen and (min-width: 40.063em) {
.pure-toggle[data-toggle='top']:checked ~ .pure-overlay[data-overlay='top'] {
top: 100%; } }
@media only screen and (min-width: 64.063em) {
.pure-toggle[data-toggle='top']:checked ~ .pure-overlay[data-overlay='top'] {
top: 100px; } }
.pure-toggle[data-toggle='left']:checked ~ .pure-overlay[data-overlay='left'],
.pure-toggle[data-toggle='right']:checked ~ .pure-overlay[data-overlay='right'],
.pure-toggle[data-toggle='top']:checked ~ .pure-overlay[data-overlay='top'] {
width: 100%;
height: 100%;
opacity: 1;
z-index: 2; } .no-csstransforms3d .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
left: 100%; }
@media only screen and (min-width: 40.063em) {
.no-csstransforms3d .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
left: 300px; } }
@media only screen and (min-width: 64.063em) {
.no-csstransforms3d .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
left: 300px; } }
.no-csstransforms3d .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
left: -100%; }
@media only screen and (min-width: 40.063em) {
.no-csstransforms3d .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
left: -300px; } }
@media only screen and (min-width: 64.063em) {
.no-csstransforms3d .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
left: -300px; } }
.no-csstransforms3d .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
top: 100%; }
@media only screen and (min-width: 40.063em) {
.no-csstransforms3d .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
top: 100%; } }
@media only screen and (min-width: 64.063em) {
.no-csstransforms3d .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
top: 100px; } }  [data-effect='pure-effect-slide'] .pure-drawer {
z-index: 3;
transition-duration: 500ms; }
[data-effect='pure-effect-slide'] .pure-drawer[data-position='left'] {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
[data-effect='pure-effect-slide'] .pure-drawer[data-position='right'] {
transform : translate(0, 45px); opacity:0; }
[data-effect='pure-effect-slide'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
[data-effect='pure-effect-slide'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-slide'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-slide'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } [data-effect='pure-effect-slide'] .pure-overlay {
transition-duration: 500ms;
transition-delay: 250ms; }  [data-effect='pure-effect-reveal'] .pure-drawer {
visibility: visible;
transition-duration: 500ms; } [data-effect='pure-effect-reveal'] .pure-pusher-container .pure-pusher {
transition-duration: 500ms; }
[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-reveal'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0); } } [data-effect='pure-effect-reveal'] .pure-overlay {
transition-duration: 500ms;
transition-delay: 250ms; }  [data-effect='pure-effect-slideAlong'] .pure-drawer {
transition-duration: 500ms; }
[data-effect='pure-effect-slideAlong'] .pure-drawer[data-position='left'] {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0); }
[data-effect='pure-effect-slideAlong'] .pure-drawer[data-position='right'] {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0); }
[data-effect='pure-effect-slideAlong'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0); }
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } [data-effect='pure-effect-slideAlong'] .pure-pusher-container .pure-pusher {
transition-duration: 500ms; }
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-slideAlong'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0); } } [data-effect='pure-effect-slideAlong'] .pure-overlay {
transition-duration: 500ms;
transition-delay: 250ms; }  [data-effect='pure-effect-reverseSlide'] .pure-drawer {
transition-duration: 500ms; }
[data-effect='pure-effect-reverseSlide'] .pure-drawer[data-position='left'] {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0); }
[data-effect='pure-effect-reverseSlide'] .pure-drawer[data-position='right'] {
transform : translate(0, 45px); opacity:0; }
[data-effect='pure-effect-reverseSlide'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0); }
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } [data-effect='pure-effect-reverseSlide'] .pure-pusher-container .pure-pusher {
transition-duration: 500ms; }
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
transform : translate(0, 45px); opacity:0; }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-reverseSlide'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0); } } [data-effect='pure-effect-reverseSlide'] .pure-overlay {
transition-duration: 500ms; }  [data-effect='pure-effect-scaleDown'] .pure-drawer {
transition-duration: 500ms; }
[data-effect='pure-effect-scaleDown'] .pure-drawer[data-position='left'] {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
[data-effect='pure-effect-scaleDown'] .pure-drawer[data-position='right'] {
transform : translate(0, 45px); opacity:0; }
[data-effect='pure-effect-scaleDown'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
[data-effect='pure-effect-scaleDown'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-scaleDown'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-scaleDown'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } [data-effect='pure-effect-scaleDown'] .pure-pusher-container {
-webkit-perspective: 1500px;
perspective: 1500px; }  [data-effect='pure-effect-scaleDown'] .pure-pusher-container .pure-pusher {
z-index: 1;
transition-duration: 500ms; }
[data-effect='pure-effect-scaleDown'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 0, -300px);
transform: translate3d(0, 0, -300px); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-scaleDown'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 0, -300px);
transform: translate3d(0, 0, -300px); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-scaleDown'] .pure-toggle:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 0, -300px);
transform: translate3d(0, 0, -300px); } } [data-effect='pure-effect-scaleDown'] .pure-overlay {
transition-duration: 500ms;
transition-delay: 250ms; }  [data-effect='pure-effect-scaleUp'] {
-webkit-perspective: 1500px;
perspective: 1500px; }
[data-effect='pure-effect-scaleUp'][data-position='left'] {
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%; }
[data-effect='pure-effect-scaleUp'][data-position='right'] {
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%; }
[data-effect='pure-effect-scaleUp'][data-position='top'] {
-webkit-perspective-origin: 50% 0;
perspective-origin: 50% 0; } [data-effect='pure-effect-scaleUp'] .pure-drawer {
transition-duration: 500ms; }
[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='left'] {
-webkit-transform: translate3d(0, 0, -100%);
transform: translate3d(0, 0, -100%); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='left'] {
-webkit-transform: translate3d(0, 0, -300px);
transform: translate3d(0, 0, -300px); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='left'] {
-webkit-transform: translate3d(0, 0, -300px);
transform: translate3d(0, 0, -300px); } }
[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='right'] {
-webkit-transform: translate3d(100%, 0, -100%);
transform: translate3d(100%, 0, -100%); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='right'] {
-webkit-transform: translate3d(300px, 0, -300px);
transform: translate3d(300px, 0, -300px); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='right'] {
-webkit-transform: translate3d(300px, 0, -300px);
transform: translate3d(300px, 0, -300px); } }
[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(0, 0, -100%);
transform: translate3d(0, 0, -100%); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(0, 0, -100%);
transform: translate3d(0, 0, -100%); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-scaleUp'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(0, 0, -100px);
transform: translate3d(0, 0, -100px); } }
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } [data-effect='pure-effect-scaleUp'] .pure-pusher-container .pure-pusher {
transition-duration: 500ms; }
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
transform : translate(0, 45px); opacity:0; }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-scaleUp'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0); } } [data-effect='pure-effect-scaleUp'] .pure-overlay {
transition-duration: 500ms;
transition-delay: 250ms; }  [data-effect='pure-effect-scaleRotate'] .pure-drawer {
transition-duration: 500ms; }
[data-effect='pure-effect-scaleRotate'] .pure-drawer[data-position='left'] {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
[data-effect='pure-effect-scaleRotate'] .pure-drawer[data-position='right'] {
transform : translate(0, 0px); opacity:0; }
[data-effect='pure-effect-scaleRotate'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible;
opacity:  1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } [data-effect='pure-effect-scaleRotate'] .pure-pusher-container {
-webkit-perspective: 1500px;
perspective: 1500px; } [data-effect='pure-effect-scaleRotate'] .pure-pusher-container .pure-pusher {
transition-duration: 500ms; }
[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
transform: translate3d(100px, 0, -600px) rotateY(-20deg); }
[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100px, 0, -600px) rotateY(20deg);
transform: translate3d(100px, 0, -600px) rotateY(20deg); }
[data-effect='pure-effect-scaleRotate'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 0, -100px) rotateX(20deg);
transform: translate3d(0, 0, -100px) rotateX(20deg); } [data-effect='pure-effect-scaleRotate'] .pure-overlay {
transition-duration: 500ms;
transition-delay: 250ms; }  [data-effect='pure-effect-fall'] .pure-drawer {
transition-duration: 500ms; }
[data-effect='pure-effect-fall'] .pure-drawer[data-position='left'],
[data-effect='pure-effect-fall'] .pure-drawer[data-position='right'] {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
[data-effect='pure-effect-fall'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } [data-effect='pure-effect-fall'] .pure-pusher-container .pure-pusher {
transition-duration: 500ms; }
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-fall'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0); } } [data-effect='pure-effect-fall'] .pure-overlay {
transition-duration: 500ms;
transition-delay: 250ms; }  [data-effect='pure-effect-push'] .pure-drawer {
transition-duration: 500ms; }
[data-effect='pure-effect-push'] .pure-drawer[data-position='left'] {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
[data-effect='pure-effect-push'] .pure-drawer[data-position='right'] {
transform : translate(0, 45px); opacity:0; }
[data-effect='pure-effect-push'] .pure-drawer[data-position='top'] {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } [data-effect='pure-effect-push'] .pure-pusher-container .pure-pusher {
transition-duration: 500ms; }
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='left']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); } }
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
transform : translate(0, 45px); opacity:0; }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='right']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); } }
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
@media only screen and (min-width: 40.063em) {
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@media only screen and (min-width: 64.063em) {
[data-effect='pure-effect-push'] .pure-toggle[data-toggle='top']:checked ~ .pure-pusher-container .pure-pusher {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0); } } [data-effect='pure-effect-push'] .pure-overlay {
transition-duration: 500ms;
transition-delay: 250ms; }  [data-effect="pure-effect-bounce"] .pure-drawer {
z-index: 3;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
[data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible; } [data-effect="pure-effect-bounce"] .pure-overlay {
transition-duration: 1000ms;
transition-delay: 500ms; }  [data-effect="pure-effect-fade"] .pure-drawer {
z-index: 3;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
[data-effect="pure-effect-fade"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-fade"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-fade"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible; } [data-effect="pure-effect-fade"] .pure-overlay {
transition-duration: 1000ms;
transition-delay: 500ms; }  [data-effect="pure-effect-flipX"] .pure-drawer {
z-index: 3;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
[data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible; } [data-effect="pure-effect-flipX"] .pure-overlay {
transition-duration: 1000ms;
transition-delay: 500ms; }  [data-effect="pure-effect-flipY"] .pure-drawer {
z-index: 3;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
[data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible; } [data-effect="pure-effect-flipY"] .pure-overlay {
transition-duration: 1000ms;
transition-delay: 500ms; }  [data-effect="pure-effect-zoom"] .pure-drawer {
z-index: 3;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
[data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'],
[data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'],
[data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
visibility: visible; } [data-effect="pure-effect-zoom"] .pure-overlay {
transition-duration: 1000ms;
transition-delay: 500ms; } .animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s; }
@-webkit-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0); }
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); }
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0); } }
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0); }
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); }
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0); } }
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom; }
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1; }
25%, 75% {
opacity: 0; } }
@keyframes flash {
0%, 50%, 100% {
opacity: 1; }
25%, 75% {
opacity: 0; } }
.flash {
-webkit-animation-name: flash;
animation-name: flash; } @-webkit-keyframes pulse {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05); }
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes pulse {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05); }
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse; }
@-webkit-keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1); }
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1); }
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1); }
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1); }
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1); }
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1); }
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand; }
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); } }
@keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); } }
.shake {
-webkit-animation-name: shake;
animation-name: shake; }
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg); }
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg); }
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg); }
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg); }
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg); }
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg); }
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg); }
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg); }
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); } }
.swing {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing; }
@-webkit-keyframes tada {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
10%, 20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes tada {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
10%, 20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.tada {
-webkit-animation-name: tada;
animation-name: tada; } @-webkit-keyframes wobble {
0% {
-webkit-transform: none;
transform: none; }
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
100% {
-webkit-transform: none;
transform: none; } }
@keyframes wobble {
0% {
-webkit-transform: none;
transform: none; }
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
100% {
-webkit-transform: none;
transform: none; } }
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble; }
@-webkit-keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03); }
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97); }
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03); }
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97); }
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); } }
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-duration: .75s;
animation-duration: .75s; }
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0); }
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0); }
100% {
-webkit-transform: none;
transform: none; } }
@keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0); }
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0); }
100% {
-webkit-transform: none;
transform: none; } }
.bounceInDown, [data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown; }
@-webkit-keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0); }
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
100% {
-webkit-transform: none;
transform: none; } }
@keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0); }
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0); }
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0); }
100% {
-webkit-transform: none;
transform: none; } }
.bounceInLeft, [data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'] {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft; }
@-webkit-keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0); }
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); }
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0); }
100% {
-webkit-transform: none;
transform: none; } }
@keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0); }
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0); }
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0); }
100% {
-webkit-transform: none;
transform: none; } }
.bounceInRight, [data-effect="pure-effect-bounce"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'] {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight; }
@-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0); }
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0); }
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0); }
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp; }
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
100% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); } }
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9); }
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1); }
100% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); } }
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
-webkit-animation-duration: .75s;
animation-duration: .75s; }
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown; }
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0); }
100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0); }
100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
.bounceOutLeft, [data-effect="pure-effect-bounce"] .pure-drawer[data-position='left'] {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft; }
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0); }
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0); }
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
.bounceOutRight, [data-effect="pure-effect-bounce"] .pure-drawer[data-position='right'] {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight; }
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0); }
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0); }
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0); }
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
.bounceOutUp, [data-effect="pure-effect-bounce"] .pure-drawer[data-position='top'] {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp; }
@-webkit-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn; }
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInDown, [data-effect="pure-effect-fade"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown; }
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig; }
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInLeft, [data-effect="pure-effect-fade"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'] {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft; }
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig; }
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInRight, [data-effect="pure-effect-fade"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'] {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight; }
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig; }
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp; }
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig; }
@-webkit-keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut; }
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
@keyframes fadeOutDown {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); } }
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown; }
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
@keyframes fadeOutDownBig {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0); } }
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig; }
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
@keyframes fadeOutLeft {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } }
.fadeOutLeft, [data-effect="pure-effect-fade"] .pure-drawer[data-position='left'] {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft; }
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
@keyframes fadeOutLeftBig {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0); } }
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig; }
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
@keyframes fadeOutRight {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } }
.fadeOutRight, [data-effect="pure-effect-fade"] .pure-drawer[data-position='right'] {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight; }
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
@keyframes fadeOutRightBig {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0); } }
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig; }
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
@keyframes fadeOutUp {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); } }
.fadeOutUp, [data-effect="pure-effect-fade"] .pure-drawer[data-position='top'] {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp; }
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
@keyframes fadeOutUpBig {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0); } }
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig; }
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; } }
@keyframes flip {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; } }
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip; }
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
.flipInX, [data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'], [data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'], [data-effect="pure-effect-flipX"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX; }
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
@keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0; }
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in; }
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; }
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px); } }
.flipInY, [data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'], [data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'], [data-effect="pure-effect-flipY"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY; }
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1; }
100% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0; } }
@keyframes flipOutX {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1; }
100% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0; } }
.flipOutX, [data-effect="pure-effect-flipX"] .pure-drawer[data-position='left'], [data-effect="pure-effect-flipX"] .pure-drawer[data-position='right'], [data-effect="pure-effect-flipX"] .pure-drawer[data-position='top'] {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important; }
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1; }
100% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0; } }
@keyframes flipOutY {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px); }
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1; }
100% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0; } }
.flipOutY, [data-effect="pure-effect-flipY"] .pure-drawer[data-position='left'], [data-effect="pure-effect-flipY"] .pure-drawer[data-position='right'], [data-effect="pure-effect-flipY"] .pure-drawer[data-position='top'] {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
-webkit-animation-duration: .75s;
animation-duration: .75s; }
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0; }
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1; }
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1; }
100% {
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0; }
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1; }
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1; }
100% {
-webkit-transform: none;
transform: none;
opacity: 1; } }
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
@-webkit-keyframes lightSpeedOut {
0% {
opacity: 1; }
100% {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0; } }
@keyframes lightSpeedOut {
0% {
opacity: 1; }
100% {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0; } }
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0; }
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0; }
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn; }
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; }
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; }
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft; }
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight; }
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; }
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft; }
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0; }
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
@keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0; }
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1; } }
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight; }
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1; }
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0; } }
@keyframes rotateOut {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1; }
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0; } }
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut; }
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; } }
@keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0; } }
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft; }
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
@keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight; }
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
@keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1; }
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0; } }
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft; }
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0; } }
@keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1; }
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0; } }
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight; }
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1; }
100% {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0; } }
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1; }
100% {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0; } }
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge; } @-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
100% {
opacity: 1;
-webkit-transform: none;
transform: none; } }
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn; } @-webkit-keyframes rollOut {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
@keyframes rollOut {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut; }
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
50% {
opacity: 1; } }
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
50% {
opacity: 1; } }
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn; }
@-webkit-keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInDown, [data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='top']:checked ~ .pure-drawer[data-position='top'] {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown; }
@-webkit-keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInLeft, [data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='left']:checked ~ .pure-drawer[data-position='left'] {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft; }
@-webkit-keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInRight, [data-effect="pure-effect-zoom"] .pure-toggle[data-toggle='right']:checked ~ .pure-drawer[data-position='right'] {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight; }
@-webkit-keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp; }
@-webkit-keyframes zoomOut {
0% {
opacity: 1; }
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
100% {
opacity: 0; } }
@keyframes zoomOut {
0% {
opacity: 1; }
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3); }
100% {
opacity: 0; } }
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut; }
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
100% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
100% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown; }
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
100% {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center; } }
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
100% {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center; } }
.zoomOutLeft, [data-effect="pure-effect-zoom"] .pure-drawer[data-position='left'] {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft; }
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
100% {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center; } }
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
100% {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center; } }
.zoomOutRight, [data-effect="pure-effect-zoom"] .pure-drawer[data-position='right'] {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight; }
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
100% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
100% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomOutUp, [data-effect="pure-effect-zoom"] .pure-drawer[data-position='top'] {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp; }
@-webkit-keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown; }
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible; }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible; }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft; }
@-webkit-keyframes slideInRight {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
visibility: visible; }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideInRight {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
visibility: visible; }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight; }
@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp; }
@-webkit-keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%); } }
@keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%); } }
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown; }
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0); }
100% {
visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); } }
@keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0); }
100% {
visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%); } }
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft; }
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0); }
100% {
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%); } }
@keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0); }
100% {
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%); } }
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight; }
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%); } }
@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
100% {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%); } }
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp; }