@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;
}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; }