html { height: 100%; } /*--------------------------------------------------- Base setting ---------------------------------------------------*/ body{ -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */ color:#0D3143; font-family:Arial,"ƒqƒ‰ƒMƒmŠpƒS ProN W3","Hiragino Kaku Gothic ProN","ƒqƒ‰ƒMƒmŠpƒS Pro W3","ƒƒCƒŠƒI", Meiryo,"MS ƒSƒVƒbƒN","MS Gothic",sans-serif; letter-spacing:0.04em; overflow-x: hidden; height: 100%; color: #0d3143; -webkit-text-size-adjust: 100%; /* ƒtƒHƒ“ƒgƒTƒCƒYŽ©“®’²® */ /*ƒtƒHƒ“ƒgƒAƒ“ƒ`ƒGƒCƒŠƒAƒX Ý’è*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; margin: 0; } body::before { content: ""; position: fixed; width: 100%; height: 100%; background-color: #FFF; z-index: 100; display: block; opacity: 1; pointer-events: none; transition: 0.6s ease-out; } body.open::before { opacity: 0; } /* = Selected Text@ƒeƒLƒXƒg‘I‘ðŽž ----------------------------------------------- */ ::selection { background:#EEE; /* Safari */ } ::-moz-selection { background:#EEE; /* Firefox */ } /* ------ fontSize 12px ------ */ .text09 { font-size:76%; } .text10 { font-size:84%; } .text11 { font-size:92%; } .text12 { font-size:100%; } .text13 { font-size:109%; } .text14 { font-size:117%; } .text15 { font-size:125%; } .text16 { font-size:134%; } .text17 { font-size:142%; } .text18 { font-size:150%; } .text19 { font-size:160%; } .text20 { font-size:168%; } .text21 { font-size:176%; } .text22 { font-size:184%; } .text23 { font-size:192%; } .text24 { font-size:200%; } /* ==================================================== shareModule.css CSS module & shareParts setting ƒ‚ƒWƒ…[ƒ‹ƒp[ƒc ==================================================== */ /*--------------------------------------------------- clerfix ---------------------------------------------------*/ .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { min-height: 1px; } * html .clearfix { height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ } /*--------------------------------------------------- clear ---------------------------------------------------*/ .cb{clear: both;} .cr{clear: right;} .cl{clear: left;} br.clear{clear: both;height:0;visibility:hidden;border:0;} hr.clear{clear: both;height:0;visibility:hidden;border:0;} /*--------------------------------------------------- text-align ---------------------------------------------------*/ .tc{text-align: center!important; display:block;} .tr{text-align: right!important;} .tl{text-align: left!important;} .tj{text-align: justify!important;text-justify: distribute!important;} /*--------------------------------------------------- Text ---------------------------------------------------*/ .textBold{ font-weight: bold; } @font-face {font-family: 'BodoniMT';src: url('../webfonts/35D10B_0_0.eot');src: url('../webfonts/35D10B_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/35D10B_0_0.woff2') format('woff2'),url('../webfonts/35D10B_0_0.woff') format('woff'),url('../webfonts/35D10B_0_0.ttf') format('truetype');} /*--------------------------------------------------- margin ---------------------------------------------------*/ /* top */ .mt-40{margin-top: -40px!important;} .mt-30{margin-top: -30px!important;} .mt-20{margin-top: -20px!important;} .mt-15{margin-top: -15px!important;} .mt-10{margin-top: -10px!important;} .mt-5{margin-top: -5px!important;} .mt0{margin-top: 0px!important;} .mt1{margin-top: 1px!important;} .mt5{margin-top: 5px!important;} .mt10{margin-top: 10px!important;} .mt15{margin-top: 15px!important;} .mt20{margin-top: 20px!important;} .mt30{margin-top: 30px!important;} .mt40{margin-top: 40px!important;} .mt50{margin-top: 50px!important;} .mt60{margin-top: 60px!important;} .mt70{margin-top: 70px!important;} .mt80{margin-top: 80px!important;} .mt90{margin-top: 90px!important;} .mt100{margin-top: 100px!important;} /* bottom */ .mb0{margin-bottom: 0px!important;} .mb5{margin-bottom: 5px!important;} .mb10{margin-bottom: 10px!important;} .mb15{margin-bottom: 15px!important;} .mb20{margin-bottom: 20px!important;} .mb30{margin-bottom: 30px!important;} .mb40{margin-bottom: 40px!important;} .mb50{margin-bottom: 50px!important;} .mb60{margin-bottom: 60px!important;} .mb70{margin-bottom: 70px!important;} .mb80{margin-bottom: 80px!important;} .mb90{margin-bottom: 90px!important;} .mb100{margin-bottom: 100px!important;} /* left */ .ml-30{margin-left: -40px!important;} .ml-5{margin-left: -16px!important;} .ml0{margin-left: 0px!important;} .ml5{margin-left: 5px!important;} .ml10{margin-left: 10px!important;} .ml15{margin-left: 15px!important;} .ml20{margin-left: 20px!important;} .ml30{margin-left: 30px!important;} .ml40{margin-left: 40px!important;} .ml50{margin-left: 50px!important;} .ml60{margin-left: 60px!important;} .ml70{margin-left: 70px!important;} .ml80{margin-left: 80px!important;} .ml90{margin-left: 90px!important;} .ml100{margin-left: 100px!important;} .ml110{margin-left: 110px!important;} .ml120{margin-left: 120px!important;} .ml150{margin-left: 150px!important;} /* right */ .mr0{margin-right: 0px!important;} .mr5{margin-right: 5px!important;} .mr10{margin-right: 10px!important;} .mr15{margin-right: 15px!important;} .mr20{margin-right: 20px!important;} .mr30{margin-right: 30px!important;} .mr40{margin-right: 40px!important;} .mr50{margin-right: 50px!important;} .mr60{margin-right: 60px!important;} .mr70{margin-right: 70px!important;} .mr80{margin-right: 80px!important;} .mr90{margin-right: 90px!important;} .mr100{margin-right: 100px!important;} /* ==================================================== baseLayout.css CSS basic layput setting ‘Sƒy[ƒW‚É“K—p ==================================================== */ /*--------------------------------------------------- # Navigation ---------------------------------------------------*/ .menuarea{ width:27px; height: 100%; position: fixed; /*top: 47vh;*/ top:35px; right:35px; z-index: 99999; text-align: center;} .menuarea a{ width:27px; height: 22px; } .menuarea a:hover .menu-line span{background-color: #FFF;} /* ƒnƒ“ƒo[ƒK[ƒƒjƒ…[*/ .menu-line, .menu-line span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-line { position: relative; z-index: 2; top:0; width: 27px; height:22px; } .menu-line span { position: absolute; left: 0; width: 100%; height: 1px; background-color: #fff; padding-bottom:1px; border-bottom: 1px solid #0d3143; } .menu-line span:nth-of-type(1) { top: 0; } .menu-line span:nth-of-type(2) { top: 10px; } .menu-line span:nth-of-type(3) { bottom: 0; } /* ƒAƒjƒ[ƒVƒ‡ƒ“*/ .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg); } /* ƒiƒrƒQ[ƒVƒ‡ƒ“ */ #navigation{ position: fixed; display: none; width: 100%; height: 100vh; top: 0; left: 0; /*background-color: #0d3143; opacity: 0.94;*/ background-color:rgba(88,77,73,.94); z-index: 99998; } #navigation .navigation_inner{ display: table; width: 100%; height: 100%; } #navigation .navigation_inner ul{margin: 0;padding: 0;} #navigation .navigation_inner .navigation_menu{ display: table-cell; vertical-align: middle; list-style: none; text-align: center; } #navigation .navigation_inner .navigation_menu .logo img{ width: 150px;} #navigation .navigation_inner .navigation_menu .copyright{ color: #FFF; font-size: 10px; padding-top:50px;} #navigation .navigation_inner .navigation_menu .navigation_item{ width: 70%; margin: 0 auto 0 auto; } #navigation .navigation_inner .navigation_menu .navigation_item:first-child{ width: 100%; text-align: center; margin: 0 0 25px 0; } #navigation{ /*font-family: 'BodoniMT', serif;*/ font-size:2rem; letter-spacing:.1em; font-weight: normal; } #navigation .navigation_inner .navigation_menu a{ display: block; color: #FFF; padding: 35px 0 35px 0; position: relative; text-decoration: none; line-height: ; text-align: center; background-size: 35px 35px; background-repeat: no-repeat; background-position: 30px 33px; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } #navigation .navigation_inner .navigation_menu a:hover{ background-color: rgba(255,255,255,0.15); background-image: url(../images/common/arrow_navi.png); background-size: 35px 35px; background-repeat: no-repeat; background-position: 30px 33px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } #navigation .navigation_inner .navigation_menu .sub{ width: 260px; margin: 0 auto; /*font-family: 'BodoniMT', serif;*/ font-size:20px; letter-spacing:.01em; font-weight: normal; } #navigation .navigation_inner .navigation_menu .sub a{ float: left; display: block; color: #FFF; padding: 35px 0 0 0; margin: 0 30px; position: relative; text-decoration: none; color: #FFF; } #navigation .navigation_inner .navigation_menu .sub a::after { position: absolute; bottom: -5px; left: 0; content: ''; width: 98%; height: 0.8px; background: #FFF; transform: scale(0, 1); transform-origin: right top; transition: transform .3s; } #navigation .navigation_inner .navigation_menu .sub a:hover::after { transform-origin: left top; transform: scale(1, 1); } #navigation .navigation_inner .navigation_menu .snsarea{width: 100%;} #navigation .navigation_inner .navigation_menu .snsarea{width:164px; margin: 40px auto 0 auto;} #navigation .navigation_inner .navigation_menu .snsarea ul {margin:0; padding: 0;} #navigation .navigation_inner .navigation_menu .snsarea li {float: left; margin: 0 20px;} /* SVG FƒTƒCƒYÝ’è*/ #navigation .my_svg02{width: 7.5px;height: auto;} #navigation .my_svg03{width: 21px;height: auto;} #navigation .my_svg04{width: 15px;height: auto;} #navigation .my_svg02 path,#navigation .my_svg03 path,#navigation .my_svg04 path{ color:#FFF; fill: currentColor; transition: all 0.1s ease; } #navigation .my_svg02 .st0,#navigation .my_svg03 .st0,#navigation .my_svg04 .st0{fill:#FFF; transition: all 0.4s ease;} /*@hoverŽž‚ÌSVGƒJƒ‰[ */ #navigation .facebook:hover .my_svg02 .st0, #navigation .twitter:hover .my_svg03 .st0, #navigation .instagram:hover .my_svg04 .st0{ fill:#b5b5b5; transition: all 0.1s ease; } /*--------------------------------------------------- # slider zoom ---------------------------------------------------*/ /*.main-visual ------------------------------------------------------------------------ */ #main-visual { width: 100%; height: 100%; position: relative; overflow: hidden; } .iphone.portrait #main-visual, .ipad.portrait #main-visual, .android.portrait #main-visual { height: 32.68%; } #main-visual .opening_logo { width: 260px; height: 100%; margin: 0 auto; /*@box—v‘fc’†‰› */ display: -webkit-flex; display: flex; -webkit-align-items: center; /* c•ûŒü’†‰›‘µ‚¦iSafari—pj */ align-items: center; /* c•ûŒü’†‰›‘µ‚¦ */ -webkit-justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦iSafari—pj */ justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦ */ z-index: 2; } #main-visual .opening_logo img{ width: 100%; } /*.btn-scroll ------------------------------------------------------------------------ */ #main-visual .btn-scroll { position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); text-align: center; overflow: hidden; z-index: 10; } #main-visual .btn-scroll a { display: inline-block; text-align: center; width: 100%; position: relative; transition: 0.3s ease-out; padding-top: 20px; /*font-family: 'BodoniMT', serif;*/ font-size: 12px; letter-spacing:.07em; color: #FFF; text-decoration: none; } #main-visual .btn-scroll a::after { content: ""; display: block; width: 1px; height: 60px; position: relative; background-color: #FFFFFF; margin: 15px auto 0; } #main-visual .btn-scroll a:hover { transform:translate(0px,20px); } /*--------------------------------------------------- # Container ---------------------------------------------------*/ #main-contents-wrapper { position: relative; overflow: hidden; } /*--------------------------------------------------- # header ---------------------------------------------------*/ header{width: 100%; position: relative;} header h1 {width: 190px; margin:50px auto 50px auto;} header h1 img{width: 190px;} header .submenu {position: absolute; top: -35px; left: 50px;} header .submenu ul {text-align: left; margin:0; padding: 0;} header .submenu ul li{float: left; text-align: left; margin-right: 30px;} header .submenu a{position: relative; font-family: 'BodoniMT', serif; font-size: 13px; color: #0A2530; letter-spacing:.03em; text-decoration: none;} header .submenu a::after { position: absolute; bottom: -5px; left: 0; content: ''; width: 98%; height: 0.8px; background: #0D3143; transform: scale(0, 1); transform-origin: right top; transition: transform .3s; } header .submenu a:hover::after { transform-origin: left top; transform: scale(1, 1); } /*--------------------------------------------------- # Contents body ---------------------------------------------------*/ /* ¶ƒŠƒLƒbƒh‰EŒÅ’è*/ .l_col_liquid { width: 100%; float: left; margin: 0 -100px 0 0; } .r_col_fix { width: 100px; float: right; text-align: center; } .l_contents { margin: 0 100px 0 0; /* ‰EƒJƒ‰ƒ€‚Ƃ̉Eƒ}[ƒWƒ“‚ð’²® */ } .l_white_block { background-image: url(../images/common/cnt_bg.gif); background-repeat: repeat-y; background-position: left; background-color: #f3f3f3; position: relative; } @media screen and (min-width:320px) and ( max-width:1065px) { .l_white_block { background-image: none; } } .l_white_block_insta { background-image: url(../images/common/cnt_bg.gif); background-repeat: repeat-y; background-position: left; background-color: #f3f3f3; position: relative; margin: 25% 0 0 0; } /*--------------------------------------------------- # Slide area ---------------------------------------------------*/ .slidearea { width: 100%; position: relative; } .slidearea .slidenumber { position: absolute; top: -50px; right: 70px; width: 100px; height: 100px; background-color: #0d3143; font-family: 'BodoniMT', serif; font-size: 16px; color: #FFF; letter-spacing: .07em; text-align: center; /*@box—v‘fc’†‰› */ display: -webkit-flex; display: flex; -webkit-align-items: center; /* c•ûŒü’†‰›‘µ‚¦iSafari—pj */ align-items: center; /* c•ûŒü’†‰›‘µ‚¦ */ -webkit-justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦iSafari—pj */ justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦ */ z-index: 2; } .slidearea .slidenumber img { width: 11px; margin: -5px 7px 0 7px; } .slider { position: relative; z-index: 1; } .slider:before{ content: ""; display: block; padding-top: 43%; } .slider .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .slide_img{ position: absolute; width: 100%; height: 100%; z-index: 1; } .slide_img img { width: 100%; height: 100%; transform: scale(1.1); } .slide-scale .slide_img img { transform: scale(1); transition: transform 3s ease; } .progress{ position: absolute; right: 0; top: 0; height: 0; width: 4px; z-index: 3; background-color: #00d6f9; } .slide-progress .progress{ transition: height 4.6s linear; height: 100%; } .slide_txt{ position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; } .slide_txt > div{ position: absolute; overflow: hidden; clip: rect(auto, 0, auto, auto); left: 9%; } .slide_txt_line1{ /* width: 54px;*/ width: 4vw; font-family: 'BodoniMT', serif; background-color:#0D3143; color: #fff; /* font-size: 12px;*/ font-size: 0.9vw; text-align: center; box-sizing: border-box; top: 11.7vw; } .slide_txt_line2{ width: auto; background-color: #223444; font-family: "ƒqƒ‰ƒMƒm–¾’© Pro W3", "Hiragino Mincho Pro","‚l‚r ‚o–¾’©", "MS PMincho", serif; color: #fff; /* font-size: 24px;*/ font-size: 1.5vw; line-height: 1; text-align: center; padding: 1vw; box-sizing: border-box; top: 14vw; } .slide_txt_line2.slide_txt_line2_2{ line-height: 1.2; } .slide_txt_line2.slide_txt_line2_2 + .slide_txt_line3{ top: 19.6vw; } .slide_txt_line3{ width: 20vw; /* width: 240px */ /* margin-left: 3%;*/ background-color: #fff; color:#223444; /* font-size: 14px;*/ font-size: 1.1vw; font-family: "ƒqƒ‰ƒMƒm–¾’© Pro W3", "Hiragino Mincho Pro","‚l‚r ‚o–¾’©", "MS PMincho", serif; line-height: 2; padding: 1vw; letter-spacing: 0.1em; box-sizing: border-box; top: 17.5vw; } .slide_txt > div:after{ content: ""; left: 0; top: 0; display: block; position: absolute; height: 100%; width: 100%; transform: translateX(0); } .slide_txt_line1:after{ background-color: #223444; } .slide_txt_line2:after{ background-color: #223444; } .slide_txt_line3:after{ background-color: white; } /* 1line‚¸‚“WŠJ */ /* .slide-textIn .slide_txt_line1{ clip: rect(auto, 4vw, auto, auto); transition: clip 1s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .slide-textIn .slide_txt_line1:after{ transform: translateX(100%); transition: transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s; } .slide-textIn .slide_txt_line2{ clip: rect(auto, 20vw, auto, auto); transition: clip 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) .25s; } .slide-textIn .slide_txt_line2:after{ transform: translateX(100%); transition: transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1.25s; } .slide-textIn .slide_txt_line3{ clip: rect(auto, 20vw, auto, auto); transition: clip 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) .5s; } .slide-textIn .slide_txt_line3:after{ transform: translateX(100%); transition: transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1.5s; } */ /* ˆê“x‚É“WŠJ */ .slide-textIn .slide_txt_line1{ clip: rect(auto, 4vw, auto, auto); transition: clip 1s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .slide-textIn .slide_txt_line1:after{ transform: translateX(100%); transition: transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s; } .slide-textIn .slide_txt_line2{ transition: clip 1s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .slide-textIn .slide_txt_line2:after{ transform: translateX(100%); transition: transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s; } .slide-textIn .slide_txt_line3{ clip: rect(auto, 20vw, auto, auto); transition: clip 1s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .slide-textIn .slide_txt_line3:after{ transform: translateX(100%); transition: transform 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s; } /* ------------- –îˆó ------------*/ .arrowarea{width:136px; position: absolute; right: 70px; bottom:-34px; z-index:2;} .arrowleft{float:left;} .arrowright{float:left;} .btn_arrow { background: #FFF; text-align: center; width: 68px; height: 68px; outline: none !important; cursor: pointer; transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; position: relative; display: inline-block; z-index:1; } .btn_arrow:after { position: absolute; content: ""; width: 100%; height: 0; bottom: 0; right: 0; z-index: -1; background: #eaeaea; transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } .btn_arrow:hover { } .btn_arrow:hover:after { left: 0%; right: auto; height: 100%; } .btn_arrow:active {top: 0;} /* SVG FƒTƒCƒYÝ’è*/ .my_svg01{ width: 20px; height: auto; margin-top:29px; } .my_svg01 path{ color:#0d3143; fill: currentColor; transition: all 0.1s ease; } .my_svg01 .st0{fill:#0d3143;} /*@hoverŽž‚ÌSVGƒJƒ‰[ .btn_arrow:hover .my_svg01 .st0{ fill:#0d3143; transition: all 0.1s ease; }*/ /*@hoverŽž‚ÌSVGˆÊ’u*/ .arrowleft .my_svg01{ position: relative; left:0; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } .arrowleft:hover .my_svg01{ position: relative; left:-10px; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } .arrowright .my_svg01{ position: relative; left:0; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } .arrowright:hover .my_svg01{ position: relative; left:10px; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } /*--------------------------------------------------- # Main title ---------------------------------------------------*/ .main_ttl{width:50%; margin: 70px auto 0 auto; text-align: center; font-family:"ƒqƒ‰ƒMƒm–¾’© Pro W3", "Hiragino Mincho Pro","‚l‚r ‚o–¾’©", "MS PMincho", serif; font-size: 8px; letter-spacing: .12em;} .main_ttl h2{ font-family: 'BodoniMT', serif; font-size:28px; color: #0A2530; letter-spacing:.01em; font-weight: normal; } .main_ttl h2::after{ content: ""; width: 26px; display: block; margin: 8px auto 16px; border-bottom: 1px solid #2c4a56; } /*--------------------------------------------------- # index column block ---------------------------------------------------*/ .section_column{width:900px; margin: 0 auto 0 auto; padding: 10px 0 110px 0;} .sidettl01{font-family: 'BodoniMT', serif; font-size:11px; color: #0A2530; letter-spacing:.04em; transform: rotate( -90deg ); position: absolute; top: 340px; left: 8px;} .sidettl02{font-family: 'BodoniMT', serif; font-size:11px; color: #0A2530; letter-spacing:.04em; transform: rotate( -90deg ); position: absolute; top: 1020px; left: 14px;} @media screen and (min-width:320px) and ( max-width:1065px) { .sidettl01,.sidettl02{display: none;} } .btn_category {width: 240px; font-family: 'BodoniMT', serif; font-size:14px; letter-spacing:.04em; margin: 60px 0 0 80px;} .btn_category a{display: block; color: #0A2530; text-decoration: none; } .btn_category a::after { content: ""; display: block; border-bottom: 1px solid #0d3143; transition: all .3s ease; width: 140px; height: 35px; background-image: url(../images/common/arrow_news.svg); background-repeat: no-repeat; background-size: 12px auto; background-position: -20px 0; } .btn_category a:hover::after { width: 100%; height: 35px; background-image: url(../images/common/arrow_news.svg); background-repeat: no-repeat; background-size: 12px auto; background-position: 0 0; } .btn_category .andmore { position: relative; height:6px; margin: 0; padding: 0; transition: all .3s ease; transition-delay: 0; left: 0px; } .btn_category a:hover .andmore { position: relative; height:6px; margin: 0; padding: 0; transition: all .35s ease; transition-delay: 0.06s; left: 30px; } .wrap_column{width:900px; margin: 70px 0 0 0;} .newsblock{width:260px; margin:0 20px 0 20px; float: left;} .newsblock .photo {position: relative; width:260px;} .newsblock .photo img{width:260px;} .newsblock .photo .number{ width:38px; height:38px; position: absolute; top: 25px; left: 25px; z-index: 10; background-color: #FFF; font-family:"ƒqƒ‰ƒMƒm–¾’© Pro W3", "Hiragino Mincho Pro","‚l‚r ‚o–¾’©", "MS PMincho", serif; font-size:11px; letter-spacing:.08em; /*@box—v‘fc’†‰› */ display: -webkit-flex; display: flex; -webkit-align-items: center; /* c•ûŒü’†‰›‘µ‚¦iSafari—pj */ align-items: center; /* c•ûŒü’†‰›‘µ‚¦ */ -webkit-justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦iSafari—pj */ justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦ */ } .newsblock .blockbody{width:210px; padding: 25px 25px 25px 25px; background-color: #FFF; font-family:"ƒqƒ‰ƒMƒm–¾’© Pro W3", "Hiragino Mincho Pro","‚l‚r ‚o–¾’©", "MS PMincho", serif; position: relative;} .newsblock .blockbody .column_ttl01{font-size:16px; line-height: 180%; letter-spacing:.09em;} .newsblock .blockbody .column_ttl02{font-size:14px; line-height: 190%; letter-spacing:.09em;} .newsblock .blockbody .date{font-family: 'BodoniMT', serif; font-size:11px; letter-spacing:.08em; margin-top: 36px;} .newsblock .blockbody .arrow{width: 36px; height: 36px; background-color: #FFF; border-radius: 50%; position: absolute; right: 25px; bottom: 22px;} .newsblock .blockbody .arrow a{width: 36px; height: 36px; display: block; transition: all 0.2s ease; border-radius: 40% ; background-color: #FFF; /*@box—v‘fc’†‰› */ display: -webkit-flex; display: flex; -webkit-align-items: center; /* c•ûŒü’†‰›‘µ‚¦iSafari—pj */ align-items: center; /* c•ûŒü’†‰›‘µ‚¦ */ -webkit-justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦iSafari—pj */ justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦ */ } .newsblock .blockbody .arrow a:hover{background-color: #f3f3f3; border-radius: 50% ;} /* SVG FƒTƒCƒYÝ’è*/ .my_svg02{ width: 12px; height: auto; margin-top:0; } .my_svg02 path{ color:#0d3143; fill: currentColor; transition: all 0.1s ease; } .my_svg02 .st0{fill:#0d3143;} /*=========== Overzoom ============ */ .wipe_block01 .photo { width: 260px; background-color: #eaeaea; overflow: hidden; } .wipe_block01 .photo a img { display: block; transition: 0.7s ease-out; } .wipe_block01 .photo a:hover img { transform: scale(1.05) rotate(0.1deg); transition: 0.2s ease-out; opacity: 0.3; } /*============ scroll animation ============= */ .wipe_block01 .photo a { display: block; transition: all 0.8s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; transition-delay:0.4s; width: 0%; overflow: hidden; } .wipe_block01.in .photo a { display: block; transition: all 0.6s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; transition-delay:0.4s; width: 100%; overflow: hidden; } /*--------------------------------------------------- # index news block ---------------------------------------------------*/ .section_news{width:860px; margin: 0 auto 0 auto;} .section_news .main_ttl{margin:90px auto 0 auto;} .newsarea{width:100%; margin: 70px 0 0 0;} .newslist{font-family:"ƒqƒ‰ƒMƒm–¾’© Pro W3", "Hiragino Mincho Pro","‚l‚r ‚o–¾’©", "MS PMincho", serif; margin: 0 0 40px 0;} .newslist .arrow{width: 36px; height: 36px; border-radius: 50%; float: left; margin-right: 40px;} .newslist .arrow a{width: 36px; height: 36px; display: block; transition: all 0.2s ease; border-radius: 50% ; background-color: #f3f3f3; /*@box—v‘fc’†‰› */ display: -webkit-flex; display: flex; -webkit-align-items: center; /* c•ûŒü’†‰›‘µ‚¦iSafari—pj */ align-items: center; /* c•ûŒü’†‰›‘µ‚¦ */ -webkit-justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦iSafari—pj */ justify-content: center; /* ‰¡•ûŒü’†‰›‘µ‚¦ */ } .newslist .arrow a:hover{background-color: #eaeaea; border-radius: 50% ;} .newslist .date{width: 90px; font-size: 11px; float: left; margin-top: 10px} .newslist .text{width: 694px; font-size: 11px; float: left; margin-top: 10px} .btn_news_posi{position: relative; left: 730px!important; margin: 60px 0 0 0!important;} /*--------------------------------------------------- #index insta block ---------------------------------------------------*/ .instafeed{width: 100%; margin-top:-20%;} .instafeed a{width: 20%;float: left; } .instafeed a img{width:100%; height: auto;} .instabtnarea{width:900px; margin: 0 auto 100px auto; padding-left: 100px;} /*--------------------------------------------------- #Footer ---------------------------------------------------*/ footer {width:100%; text-align: right; margin: 100px 0 0 0;} footer .footerarea{margin: 0 60px 80px 60px;} footer .footlogo{width: 100%; margin: 0 0 60px 0;} footer .footlogo img{width:140px;} footer .pagetop{width: 100%; margin-bottom: 40px;} footer .left{width: 70%; float:left; text-align: left;} footer .left .submenu{margin:0 0 0 44px;} footer .left .submenu ul{padding:0; margin: 0;} footer .left .submenu li{float:left; margin: 0 40px 0 0;} footer .submenu a{position: relative; font-family: 'BodoniMT', serif; font-size: 14px; color: #0A2530; letter-spacing:.03em; text-decoration: none;} footer .submenu a::after { position: absolute; bottom: -5px; left: 0; content: ''; width: 100%; height: 0.8px; background: #0D3143; transform: scale(0, 1); transform-origin: right top; transition: transform .3s; } footer .submenu a:hover::after { transform-origin: left top; transform: scale(1, 1); } footer .left .copyright {margin:40px 0 0 44px;} footer .left .copyright img{width: 247px;} footer .right{width: 30%; float:left;} footer .right .snsarea{margin:95px 0 0 0;} footer .right .snsarea ul {margin:0; padding: 0;} footer .right .snsarea li {float: right; margin-left:38px;} /* SVG FƒTƒCƒYÝ’è*/ footer .my_svg02{width: 7.5px;height: auto;} footer .my_svg03{width: 21px;height: auto;} footer .my_svg04{width: 15px;height: auto;} footer .my_svg02 path,footer .my_svg03 path,footer .my_svg04 path{ color:#0d3143; fill: currentColor; transition: all 0.1s ease; } footer .my_svg02 .st0,footer .my_svg03 .st0,footer .my_svg04 .st0{fill:#0d3143; transition: all 0.4s ease;} /*@hoverŽž‚ÌSVGƒJƒ‰[ */ footer .facebook:hover .my_svg02 .st0, footer .twitter:hover .my_svg03 .st0, footer .instagram:hover .my_svg04 .st0{ fill:#b5b5b5; transition: all 0.1s ease; } footer .btn_arrow { background: #0d3143; text-align: center; width: 68px; height: 68px; outline: none !important; cursor: pointer; transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; position: relative; display: inline-block; z-index:1; } footer .btn_arrow:after { position: absolute; content: ""; width: 100%; height: 100%; bottom: 0; right: 0; z-index: -1; background: #f3f3f3; transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } footer .btn_arrow:hover { } footer .btn_arrow:hover:after { left: 0%; right: auto; height: 0%; } footer .btn_arrow:active {top: 0;} /* SVG FƒTƒCƒYÝ’è*/ footer .my_svg01{ width: 10.5px; height: auto; margin-top:22px; } footer .my_svg01 path{ color:#0d3143; fill: currentColor; transition: all 0.1s ease; } footer .my_svg01 .st0{fill:#0d3143;} /*@hoverŽž‚ÌSVGƒJƒ‰[ */ footer .btn_arrow:hover .my_svg01 .st0{ fill:#FFF; transition: all 0.1s ease; } /*@hoverŽž‚ÌSVGˆÊ’u*/ footer .arrow .my_svg01{ position: relative; top:0; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } footer .arrow:hover .my_svg01{ position: relative; top:10px; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } footer .arrow .my_svg01{ position: relative; left:0; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } footer .arrow:hover .my_svg01{ position: relative; top:-10px; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.325, 1) 0s; } /*--------------------------------------------------- Table color ---------------------------------------------------*/ .colTable { font-size:13px; line-height:160%; border-top: 1px solid #67ADDB; border-left: 1px solid #67ADDB; border-right: 1px solid #67ADDB; } .colTable th { padding: 25px 25px; border-bottom: 1px solid #67ADDB; border-right: 1px solid #67ADDB;border-bottom: 1px solid #67ADDB; vertical-align: top; } .colTable td { padding: 25px 25px; border-bottom: 1px solid #67ADDB; } .colTableback { font-size:13px; color: #fff; font-weight:100; background-color: #0079C0;} /*===================================================================== Overzoom ======================================================================= */ .wipe_block02 .photo { width: 280px; overflow: hidden; } .wipe_block02 .photo a img { display: block; transition: 0.4s ease-in-out; } .wipe_block02 .photo a:hover img { transform: scale(1.10) rotate(0.1deg); opacity: 0.8; } /*===================================================================== scroll animation ======================================================================= */ .wipe_block02 .photo a { display: block; transition: 0.9s ease-in-out; transition-delay:0.7s; width: 0%; overflow: hidden; } .wipe_block02.in .photo a { display: block; transition: 0.8s ease-in-out; transition-delay:0.7s; width: 100%; overflow: hidden; } .lang{ position:absolute; top:34px; right:100px; z-index:10; } .lang li{ display:inline-block; } .lang li:first-child{ padding-right:5px; } .lang li a{ display:block; width:30px; background:#eee; padding:0 5px; text-align:center; -webkit-transition:all .4s; -o-transition:all .4s; transition:all .4s; } .lang li:nth-child(2){ width:30px; background:#eee; padding:0 5px; text-align:center; } .lang li:nth-child(2), .lang li a:hover{ background:#584D49; color:#fff; } @media screen and (max-width:767px) { .lang{ display:none; } } /* ==================================================== baseLayout_sp.css CSS basic layput setting SP_‘Sƒy[ƒW‚É“K—p ==================================================== */ @media only screen and (max-width:768px){ header .submenu { display: none; } header h1 { margin: 20px auto; width: 100px; } header h1 img { width: 100%; height: auto; } .menuarea{ width:27px; height: 22px; position: fixed; top: 25px; right:25px; z-index: 99999; text-align: center;} #navigation .navigation_inner .navigation_menu .logo img{ width: 90px;} #navigation .navigation_inner .navigation_menu .navigation_item{ width: 100%; margin: 0 ; } #navigation .menu01,#navigation .menu02,#navigation .menu03,#navigation .menu04{ font-size:20px; letter-spacing:.1em; font-weight: normal; } #navigation .navigation_inner .navigation_menu .menu01 a, #navigation .navigation_inner .navigation_menu .menu02 a, #navigation .navigation_inner .navigation_menu .menu03 a, #navigation .navigation_inner .navigation_menu .menu04 a, #navigation .navigation_inner .navigation_menu .menu05 a { display: block; color: #FFF; padding: 15px 0 15px 0; position: relative; text-decoration: none; line-height: ; text-align: center; background: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #navigation .navigation_inner .navigation_menu .menu01 a:hover, #navigation .navigation_inner .navigation_menu .menu02 a:hover, #navigation .navigation_inner .navigation_menu .menu03 a:hover, #navigation .navigation_inner .navigation_menu .menu04 a:hover, #navigation .navigation_inner .navigation_menu .menu05 a:hover{ background:none; } } #navigation .navigation_inner .navigation_menu .menu05 a{ margin-top:15px; display:inline-block; padding:10px 15px; border:1px solid #fff; } @media only screen and (max-width:768px){ #main-visual { width: 100%; height: 100%; position: relative; overflow: hidden; } .iphone.portrait #main-visual, .ipad.portrait #main-visual, .android.portrait #main-visual { height: 100%; } #main-visual .opening_logo {width: 130px;} } /*main_ttl*/ @media only screen and (max-width:768px){ .main_ttl h2 { font-size: 18px; } } /*section_column*/ @media only screen and (max-width:768px){ .section_column { width: 85%; margin:0 auto; padding: 0 0 40px 0; } } /*wrap_column*/ @media only screen and (max-width:768px){ .wrap_column { width: 100%; margin:30px auto 0 auto; } } /*.wipe_block01 .photo*/ @media only screen and (max-width:768px){ /*=========== Overzoom ============ */ .wipe_block01 .photo { width: 100%; overflow:visible; } .wipe_block01 .photo a img { display: block; transition: none; } .wipe_block01 .photo a:hover img { transform: scale(1.00) rotate(0.1deg); transition: none; opacity: 1; } /*============ scroll animation ============= */ .wipe_block01 .photo a { display: block; transition: none; width: 100%; overflow: hidden; } .wipe_block01.in .photo a { display: block; transition: none; width: 100%; overflow: hidden; } } /*section_news*/ @media only screen and (max-width:768px){ .section_news { width: 85%; margin:0 auto; } .section_news .main_ttl { margin:0 auto; padding: 40px 0 0 0; } } /*newsblock*/ @media only screen and (max-width:768px){ .newsblock { width: 100%; margin: 0 0 28px 0; float: none; } .newsblock .blockbody .column_ttl01 { font-size: 14px; } .newsblock .blockbody .column_ttl02 { font-size: 14px; } .newsblock .photo {position: relative; width:100%;} .newsblock .photo img { width: 100%; height: 100%; } .newsblock .blockbody { width: 100%; padding: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing:border-box; box-sizing: border-box; } .newsblock .blockbody .date { margin-top: 15px; } .newsblock .blockbody .arrow a{ background-color: #f3f3f3; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } } /*section_column*/ @media only screen and (max-width:768px){ .l_white_block .main_ttl { margin:40px auto 40px auto; } } /*btn_category */ @media only screen and (max-width:768px){ .btn_category { width: 90%; margin: 0 auto ; padding: 10px 20px 0 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing:border-box; box-sizing: border-box; } .btn_news_posi { left: auto !important; margin: 0 auto 20px auto !important; padding: 0 0 20px 60%; position: relative; overflow: hidden; } } /*btn_category */ @media only screen and (max-width:768px){ .newsarea { margin:0; padding: 40px 0 0 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing:border-box; box-sizing: border-box; } } @media only screen and (max-width:768px){ .l_white_block{ background-image: none; padding: 20px 0 0 0; } } /*btn_category */ @media only screen and (max-width:768px){ .newslist .text { width: 100%; margin-top: -15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing:border-box; box-sizing: border-box; padding:0 0 0 56px; } .newslist .date { margin-top: 0; } .newslist .arrow { margin-right: 20px; } } /*l_white_block_insta */ @media only screen and (max-width:768px){ .l_white_block_insta { background-image: none; margin:0; background-color: initial; } .l_contents { margin: 0; } .instafeed a { width: 33.33%; } .instafeed a:nth-child(10){ display: none; } .instafeed { margin:0; } .instabtnarea { width: 100%; margin: 0 auto 0 auto; padding: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing:border-box; box-sizing: border-box; } } /*footer */ @media only screen and (max-width:768px){ footer .footerarea { margin: 28px 0 0 0; padding-bottom:60px; } footer { width: 85%; text-align: right; margin:0 auto; } footer .btn_arrow { position: relative; width: 44px; height: 44px; background: #f3f3f3; z-index: 9000; } footer .btn_arrow:after { content: none; } footer .btn_arrow:hover { } /*@hoverŽž‚ÌSVGƒJƒ‰[ */ footer .btn_arrow:hover .my_svg01 .st0{ fill:#0d3143; transition: all 0.1s ease; } footer .arrow .my_svg01 { top: -7px; } footer .my_svg01 { width: 6.5px; height: 14px; margin-top: 23px; } /*@hoverŽž‚ÌSVGˆÊ’u*/ footer .arrow:hover .my_svg01{ top:-7px; } footer .left .submenu { display: none; } footer .right { display: none; } footer .footlogo { margin: 0 0 20px 0; } footer .footlogo img{width:90px;} footer .left .copyright { margin: 0px 0 0 30px; width: 100%; } footer .left .copyright img { width: 100%; } footer .pagetop { width: 100%; margin-bottom: 30px; } } @media only screen and (max-width:768px) { .slidearea .slidenumber { display: none; } } /*l_col_liquid */ @media only screen and (max-width:768px){ .slider:before { padding-top: 80%; } .l_col_liquid { float: none; margin: 0; position: relative; } .l_col_liquid .arrowarea { right: auto; bottom: auto; top: 28%; width: 100%; margin-top:-15px; } .btn_arrow { width: 35px; height: 35px; } .btn_arrow:after { content: none; } .my_svg01 { margin-top: 14px; width: 10px; height: 5px; } .l_col_liquid .arrowarea .arrowleft { float: none; position: absolute; left: 0; } .l_col_liquid .arrowarea .arrowright { float: none; position: absolute; right: 0; } .arrowleft:hover .my_svg01{ position: relative; left:0; } .arrowright:hover .my_svg01{ position: relative; left:0; } .progress { display: none; } .slide_txt { position: absolute; left: auto; top: 21.05vw; width: 85%; transform: translateY(0%); left: 7%; } .slide_img img { height: auto; } .slide_txt > div img { opacity: 0; } .slide_txt_line1 { margin-bottom: 0; width: 15vw; padding: 5px 10px!important; top: 11vw!important; } .slide_txt_line2 { width: 100%; margin-left: 0; background-color:#0D3143; font-size: 12px; padding: 13px 15px 13px 13px!important; top: 17vw!important; text-align: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing:border-box; box-sizing: border-box; } .slide_txt > .slide_txt_line2 img{ width: auto; height: 40px; } .slide_txt_line3 { background-color: #fff; width: 100%; padding: 13px 15px 11px 13px!important; text-align: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing:border-box; box-sizing: border-box; margin-left: 0px; font-size: 11px; } .slide_txt > .slide_txt_line3 img { height: 60px; width: auto; } .slider { background:#F3F3F3; } .slide_txt > div { left: 0; } .slide-textIn .slide_txt_line1 { clip: rect(auto, 15vw, auto, auto); font-size: 12px; text-align: left; top: 15vw; padding: 2vw; } .slide-textIn .slide_txt_line2 { clip: rect(auto, 100vw, auto, auto); padding: 2vw; top: 20.5vw; } .slide-textIn .slide_txt_line3 { clip: rect(auto, 100vw, auto, auto); top: 26.5vw; padding: 2vw; } .slide-textIn .slide_txt_line1{ transition-delay:0; } .slide-textIn .slide_txt_line2{ transition-delay:0; } .slide-textIn .slide_txt_line3{ transition-delay:0; } } @media only screen and (max-width:768px){ .negative_sp{margin-top: -100px!important;} .main_ttl {margin: 30px auto 0 auto;} .roots_margin{margin-top: 35px;} } /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .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; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -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); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -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); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) 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(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -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(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -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 { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -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 { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-1200px, 0, 0); transform: translate3d(-1200px, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-1200px, 0, 0); transform: translate3d(-1200px, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /* ===================== font ===================== */ @font-face{ font-family:'FontAwesome'; font-weight:normal; font-style:normal; src:local('FontAwesome'), url('../font/fontawesome-webfont.eot'), url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff2') format('woff2'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-display:swap; } /* ===================== reset ===================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin:0; padding:0; border:0; font:inherit; font-size:100%; vertical-align:baseline; } table { border-collapse:collapse; border-spacing:0; } html{ line-height:1; } address, em, th{ font-style:normal; font-weight:normal; } img{ font-size:0; line-height:0; -ms-interpolation-mode:bicubic; } ul{ list-style-type:none; } h1, h2, h3, h4, h5, h6{ font-size:100%; font-weight:normal; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block; } *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing:auto; } div::after, ul::after, ol::after, dl::after, dt::after{ content:""; display:block; clear:both; } html{ height:100%; font-size:62.5%; } body{ font-family:'EB Garamond', "ƒqƒ‰ƒMƒm–¾’© Pro W3", "Hiragino Mincho Pro","‚l‚r ‚o–¾’©", "MS PMincho", serif; font-weight:400; letter-spacing: .1em; font-size:14px; font-size:1.4rem; line-height:1.8; letter-spacing:.1em; color:#111; -webkit-text-size-adjust:100%; } @media screen and (max-width:767px) { body{ line-height:1.6; } } a{ color:#111; text-decoration:none; } img{ border:0; max-width:100%; height:auto; vertical-align:bottom; } /*------------------------------------------------- layout -------------------------------------------------*/ .box{ position:relative; max-width:1130px; margin:0 auto; padding:80px 15px 0; } @media screen and (max-width:767px) { .box{ padding:40px 25px 0; } } /*------------------------------------------------- title -------------------------------------------------*/ .head-ttl{ position:relative; display:block; margin-bottom:80px; padding-bottom:40px; font-size:2.8rem; text-align:center; } .head-ttl::before{ content:""; position:absolute; bottom:-17px; left:50%; width:1px; height:40px; background:#333; z-index:10; } .head-ttl.white{ color:#fff; } .head-ttl.white::before{ background:#fff; } @media screen and (max-width:767px) { .head-ttl{ margin-bottom:40px; padding-bottom:20px; font-size:1.8rem; } .head-ttl::before{ bottom:-8px; height:20px; } } .page-ttl{ position:relative; text-align:center; color:#fff; } .page-ttl::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:-1; } .page-ttl h1{ display:block; z-index:103; } @media screen and (min-width:768px) { .page-ttl{ font-size:3rem; padding:50px 25px; letter-spacing:.2em; } .page-ttl.page-shop{ background-image:url(../img/shop/ttl-bg.png); background-repeat:no-repeat; background-size:cover; } } @media screen and (max-width:767px) { .page-ttl{ font-size:2rem; padding:25px 15px; letter-spacing:.1em; } } .page-lead{ text-align:center; } @media screen and (min-width:768px) { .page-lead{ font-size:2.2rem; padding:0 25px 50px; } } @media screen and (max-width:767px) { .page-lead{ font-size:1.5rem; padding:25px 15px; text-align:left; } } /*------------------------------------------------- breadcrumb -------------------------------------------------*/ .breadcrumb{ position:relative; margin:0 auto; } .breadcrumb ul{ margin-right:auto; } .breadcrumb li{ position:relative; display:inline-block; margin:0 16px 0 0; padding:0 32px 0 0; font-size:1.2rem; color:#ccc; } .breadcrumb li::after{ content:""; position:absolute; top:49%; right:0; background:#333; width:14px; height:1px; } .breadcrumb li:last-child::after{ display:none; } @media screen and (min-width:1024px) { .breadcrumb{ padding:30px 100px; } } @media screen and (max-width:1023px) { .breadcrumb{ padding:15px; } } @media screen and (max-width:767px) { .breadcrumb{ padding:10px; border-bottom:1px solid #eee; } .breadcrumb li{ font-size:1rem; margin:0 8px 0 0; padding:0 25px 0 0; letter-spacing:0; } } /*------------------------------------------------- scrooll -------------------------------------------------*/ #scroolltop{ position:fixed; right:10px; bottom:10px; width:50px; height:50px; color:#fff; font-size:110%; text-align:center; text-decoration:none; z-index:1000; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; transform:scale(0); } #scroolltop:hover{ opacity:0.8; text-decoration:none; } #scroolltop.show{ transform:scale(1); -webkit-transform:translateZ(1); } a#scroolltop{ display:block; } #scroolltop:before, #scroolltop:after{ position:absolute; left:50%; content:""; width:0; height:0; } #scroolltop:before{ top:50%; } #scroolltop:after{ top:50%; z-index:-1; } @media screen and (min-width: 768px) { #scroolltop{ width:50px; height:50px; } #scroolltop:before, #scroolltop:after{ margin-left:-10px; border:10px solid transparent; } #scroolltop:before{ margin-top:-14px; border-bottom:10px solid #fff; } #scroolltop:after{ margin-top:-15px; border-bottom:10px solid #111; } } @media screen and (max-width: 767px) { #scroolltop{ width:30px; height:30px; } #scroolltop:before, #scroolltop:after{ margin-left:-5px; border:5px solid transparent; } #scroolltop:before{ margin-top:-6px; border-bottom:5px solid #111; } #scroolltop:after{ margin-top:-8px; border-bottom:5px solid #fff; } } /*------------------------------------------------- header -------------------------------------------------*/ header h1 a{ display:inline-block; } /*------------------------------------------------- footer -------------------------------------------------*/ .footer{ text-align:center; } .footer li{ display:inline-block; } .footer li a{ position:relative; display:block; width:30px; height:30px; margin:0 10px; background-color:rgba(88,77,73,.94); border-radius:30px; -webkit-transition:all .3s; transition:all .3s; } .footer li a:hover{ background:#584d4a; } .footer li a img{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:16px; height:16px; } @media screen and (min-width:768px) { .footer{ margin:100px 0 50px; } .footer p{ margin-top:25px; font-size:1.2rem; } } @media screen and (max-width:767px) { .footer{ margin:50px 0 25px; } .footer p{ margin-top:15px; font-size:1rem; } } /*------------------------------------------------- /top/ -------------------------------------------------*/ .box-concept .left{ background-image:url(../img/top/concept.png); background-repeat:no-repeat; background-size:cover; background-position:center; } .box-concept .right{ position:relative; } @media screen and (min-width:768px) { .box-concept{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; align-items:center; } .box-concept .left{ width:40vw; height:100vh; } .box-concept .right{ width:60vw; height:100vh; display:-webkit-box; display:-ms-flexbox; display:flex; align-items:center; justify-content:center; } .box-concept .concept-txt{ padding:80px; } .box-concept .right p:nth-child(n+2){ margin-top:15px; } .box-concept .concept-txt .concept-txt-l{ font-size:1.8rem; } } @media screen and (max-width:1000px) { .box-concept .concept-txt{ padding:50px; } } @media screen and (max-width:767px) { .box-concept .left{ width:100%; height:50vh; } .box-concept .concept-txt{ width:95%; margin:0 auto; padding:15px; } } .box-category li{ float:left; overflow:hidden; } .box-category li .inner img{ position:absolute; right:0; -webkit-transition:all 2s; -moz-transition:all 2s; -ms-transition:all 2s; -o-transition:all 2s; transition:all 2s; z-index:-1; } .box-category li .inner{ position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; width:100%; overflow:hidden; -webkit-transition:all .3s; transition:all .3s; } .box-category li span{ padding:10px 15px; background-color:rgba(255,255,255,.94); font-size:15px; color:rgba(0,0,0,1); /*color:rgba(88,77,73,1);*/ } @media screen and (min-width:768px) { .box-category{ padding:100px; } .box-category li{ width:30%; } .box-category li:nth-child(n+2){ margin-left:5%; } .box-category li a{ -webkit-transition:all .3s; transition:all .3s; } .box-category li .inner{ padding:250px 0; } .box-category li:hover img{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } } @media screen and (max-width:767px) { .box-category{ width:90%; margin:25px auto 50px; } .box-category li{ width:48%; } .box-category li:nth-child(odd){ margin-right:4%; } .box-category li:nth-child(n+3){ margin-top:4%; } .box-category li .inner{ height:200px; } } /*------------------------------------------------- /menu/ -------------------------------------------------*/ .box-know li{ position:relative; background-color:#f3f3f3; z-index:-2; } .box-know h4{ position:relative; } .box-know h4::after{ content:""; display:block; position:absolute; width:20px; height:1px; background:#111; } .box-know p{ z-index:1; } .box-know-in h4{ text-align:left; } @media screen and (min-width:768px) { .box-know li{ padding:50px; } .box-know li:last-child{ margin-top:50px; } .box-know-in div{ float:left; } .box-know-in div:first-child{ width:55%; margin-right:5%; } .box-know-in div:last-child{ width:40%; text-align:right; } .box-know p{ margin-top:25px; } .box-know h4{ margin-bottom:25px; padding-bottom:25px; font-size:2rem; } .box-know h4::after{ left:0; right:0; bottom:0; } } @media screen and (max-width:767px) { .box-know li{ margin-top:5%; padding:20px; } .box-know-in div:last-child{ margin-top:15px; } .box-know p{ margin-top:15px; } .box-know h4{ margin-bottom:15px; padding-bottom:15px; font-size:1.6rem; } .box-know h4::after{ left:0; bottom:0; } } .box-knowledge .left::before, .box-knowledge .right::before{ content: ""; position: absolute; top:0; left: 0; width: 0; height: 0; border-right: 100px solid transparent; border-top: 300px solid #fff; z-index:-1; } .box-menu li h2{ padding:15px 30px; font-size:1.8rem; text-align:center; } @media screen and (max-width:1190px) { .box-menu li h2{ font-size:1.6rem; } } @media screen and (min-width:1120px) { .box-menu li{ float:left; width:45%; margin-right:10%; } .box-menu li:nth-child(even){ margin-right:0; } .box-menu li:nth-child(n+3){ margin-top:10%; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .box-menu li{ float:left; width:47.5%; margin-right:5%; } .box-menu li:nth-child(even){ margin-right:0; } .box-menu li:nth-child(n+3){ margin-top:5%; } } @media screen and (min-width:768px) { .box-menu li a{ -webkit-transition:all .3s; transition:all .3s; } .box-menu li a:hover{ opacity:.7; } } @media screen and (max-width:767px) { .box-menu li h2{ padding:10px 5px 5px; } .box-menu li:nth-child(n+2){ margin-top:5%; padding-top:5%; } } .menu-nav{ padding:80px 0 0; } .menu-nav ul{ position:relative; max-width:700px; margin:0 auto; display:-ms-flexbox; display:flex; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-align:center; align-items:center; } .menu-nav ul .right{ margin-left:auto; } .menu-nav a, .menu-nav a:hover::before{ -webkit-transition:all 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition:all 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .menu-nav ul .left a, .menu-nav ul .right a{ display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; text-decoration:none; background:#eee; padding:10px 20px; position:relative; } .menu-nav ul .left a{ padding-left:20px; } .menu-nav ul .left a:hover, .menu-nav ul .right a:hover{ background:#584d4a; color:#fff; } .menu-nav ul .left a::before{ position:absolute; left:-10px; top:40%; content:"\f177"; font-family:'FontAwesome'; font-size:16px; font-size:1.6rem; } .menu-nav ul .right a::before{ position:absolute; right:-10px; top:40%; content:"\f178"; font-family:'FontAwesome'; font-size:16px; font-size:1.6rem; } .menu-nav ul .left a:hover::before{ left:-22px; } .menu-nav ul .right a:hover::before{ right:-22px; } .menu-nav ul .right a::before{ position:absolute; right:-10px; top:40%; content:"\f178"; font-family:'FontAwesome'; font-size:16px; font-size:1.6rem; } .menu-nav ul .img img{ border-radius:50%; } .menu-nav ul .txt .number{ display:block; font-family:'Roboto Condensed', sans-serif; font-size:2rem; font-weight:700; letter-spacing:.1em; } .menu-nav ul .txt .number span{ font-size:2.6rem; } .menu-nav ul .txt .method{ display:block; letter-spacing:.02em; font-size:1.6rem; } .menu-nav ul .left .img{ margin-right:20px; } .menu-nav ul .left .txt{ text-align:left; } .menu-nav ul .right a{ -ms-flex-direction:row-reverse; flex-direction:row-reverse; } .menu-nav ul .right .img{ margin-left:20px; } .menu-nav ul .right .txt{ text-align:right; } .menu-nav ul .index{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); margin:0; } .menu-nav ul .index a{ position:relative; display:block; text-decoration:none; background:#eee; width:70px; height:70px; border-radius:50%; text-align:center; font-weight:700; } .menu-nav ul .index a::before{ position:relative; top:10px; content:"\f0c9"; font-family:'FontAwesome'; font-size:1.6rem; font-weight:normal; } .menu-nav ul .index a:hover{ background:#584d4a; color:#fff; } .menu-nav ul .index span{ display:block; font-size:1.2rem; font-weight:normal; margin-top:3px; } @media screen and (max-width:1024px) { .menu-nav{ padding:40px 0 0; } .menu-nav ul .txt .number{ font-size:1.6rem; } .menu-nav ul .txt .method{ font-size:1.2rem; } } @media screen and (max-width:767px) { .menu-nav ul .txt .number span{ font-size:1.6rem; } .menu-nav ul .index span{ margin:7px 0 0; font-size:.9rem; } } @media screen and (max-width:580px) { .menu-nav{ padding:40px 20px 0; box-sizing:border-box; } .menu-nav ul .left a, .menu-nav ul .right a{ display:block; position:relative; } .menu-nav ul .left .img, .menu-nav ul .right .img{ width:50%; } .menu-nav ul .txt .number{ font-size:1.1rem; } .menu-nav ul .txt .method{ font-size:1.2rem; } .menu-nav ul .left a, .menu-nav ul .right a{ padding-left:10px; padding-right:10px; } .menu-nav ul .left .img, .menu-nav ul .right .img{ margin:0 auto 7px; } .menu-nav ul .left .txt, .menu-nav ul .right .txt{ text-align:center; } } .menu-lineup{ max-width:1000px; margin:0 auto; border-top:1px solid #eee; } .menu-lineup li{ float:left; } .menu-lineup h3{ text-align:center; } @media screen and (min-width:768px) { .menu-lineup{ margin-top:80px; } .menu-lineup h3, .menu-lineup p{ width:80%; margin-left:auto; margin-right:auto; } .menu-lineup h3{ margin-top:25px; margin-bottom:20px; font-size:1.8rem; } .menu-lineup li{ width:45%; margin-right:10%; } .menu-lineup li:nth-child(even){ margin-right:0; } .menu-lineup li:nth-child(n+3){ margin-top:80px; } } @media screen and (max-width:767px) { .menu-lineup{ margin-top:50px; } .menu-lineup h3{ margin-top:20px; margin-bottom:15px; font-size:1.5rem; } .menu-lineup li{ width:100%; padding:15px 0; } } /*------------------------------------------------- /material/ -------------------------------------------------*/ .box-material li{ float:left; } .box-material li h4{ text-align:center; } .box-material li p{ line-height:1.4; } @media screen and (min-width:768px) { .box-material{ padding-top:25px !important; } .box-material li{ width:45%; margin-right:10%; } .box-material li:nth-child(even){ margin-right:0; } .box-material li:nth-child(n+3){ margin-top:50px; } .box-material li h4, .box-material li p{ width:80%; margin-left:auto; margin-right:auto; } .box-material li h4{ margin-top:25px; margin-bottom:20px; font-size:1.6rem; } } @media screen and (max-width:767px) { .box-material{ padding:0 10px; } .box-material li{ width:50%; margin-top:25px; padding:0 15px; } .box-material li h4{ margin-top:10px; margin-bottom:10px; font-size:1.6rem; } } /*------------------------------------------------- /shop/ -------------------------------------------------*/ .other-shop{ text-align:center; } .other-shop li{ position:relative; } .other-shop li div{ background:#f3f3f3; } .other-shop li:before{ content:""; position: absolute; top:-5px; right:0; left:0; width:10px; height:10px; margin-left:auto; margin-right:auto; background-color:rgba(88,77,73,.94); transform: rotate(45deg); } .other-shop li p.border-top{ margin-top:15px; margin-bottom:10px; } .other-shop li p.border-top span{ padding-bottom:5px; border-bottom:1px solid #ccc; } @media screen and (min-width:768px) { .other-shop{ padding:100px 50px 0; } .other-shop h3{ font-size:2rem; } .other-shop ul{ margin-top:50px; } .other-shop li{ float:left; width:50%; } .other-shop li div{ margin:0 50px; padding:50px 15px; } .other-shop li div h4{ font-size:1.8rem; } .other-shop li:nth-child(n+3){ margin-top:50px; } } @media screen and (max-width:767px) { .other-shop{ padding:50px 15px 0; } .other-shop h3{ font-size:1.6rem; } .other-shop ul{ margin-top:25px; } .other-shop li:nth-child(n+2){ margin-top:25px; } .other-shop li div{ padding:25px 15px; } .other-shop li div h4{ font-size:1.5rem; } } .box-access{ margin:0 auto; padding:0 100px; } .box-access .access-list{ text-align:center; } .box-access .googlemap{ position:relative; margin-top:80px; padding-bottom:56.25%; height:0; overflow:hidden; } .box-access .googlemap iframe, .box-access .googlemap object, .box-access.googlemap embed{ position:absolute; top:0; left:0; width:100%; height:100%; } @media screen and (min-width:768px) { .box-access{ padding-top:0 !important; } .box-access .left li:nth-child(n+2){ margin-top:10px; } } @media screen and (max-width:767px) { .box-access{ padding-top:0 !important; padding-left:15px; padding-right:15px; } .box-access{ margin-top:0; } .box-access .left{ padding:25px 0; /*text-align:center;*/ } .box-access .left h2{ font-size:1.6rem; margin-left:0; margin-bottom:15px; padding-bottom:15px; } .box-access .googlemap{ margin-top:25px; } } /*------------------------------------------------- zoomslider.css -------------------------------------------------*/ .zs-enabled{position:relative}.zs-enabled .zs-slideshow,.zs-enabled .zs-slides,.zs-enabled .zs-slide{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;overflow:hidden}.zs-enabled .zs-slideshow .zs-slides .zs-slide{background:transparent none no-repeat 50% 50%;background-size:cover;position:absolute;visibility:hidden;opacity:0;-webkit-transform:scale(1.2, 1.2);-moz-transform:scale(1.2, 1.2);-ms-transform:scale(1.2, 1.2);-o-transform:scale(1.2, 1.2);transform:scale(1.2, 1.2)}.zs-enabled .zs-slideshow .zs-slides .zs-slide.active{visibility:visible;opacity:1}.zs-enabled .zs-slideshow .zs-bullets{position:absolute;z-index:4;bottom:20px;left:0;width:100%;text-align:center}.zs-enabled .zs-slideshow .zs-bullets .zs-bullet{display:inline-block;cursor:pointer;border:2px solid #ccc;width:14px;height:14px;border-radius:8px;margin:10px;background-color:#4a4a4a}.zs-enabled .zs-slideshow .zs-bullets .zs-bullet.active{background-color:#ccc}.zs-enabled .zs-slideshow:after{content:" ";position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:transparent none repeat 0 0}.zs-enabled.overlay-plain .zs-slideshow:after{background-image:url(plain.png)}.zs-enabled.overlay-dots .zs-slideshow:after{background-image:url(dots.png)}