@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
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, sub, sup, tt, var, b, u, i, 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; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

*::selection { background: #333333; color: #FFFFFF; }

html { font-family: 'Noto Sans TC', sans-serif; font-size: 16px; font-weight: 200; }

body { background-color: #faf8f2; overflow-y: scroll; }
body.invite #masthead, body.invite #infomation, body.invite #comment { display: none; }

.seoHidden { display: none; }

#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #faf8f2; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; z-index: 1000; }
#loading p { position: absolute; top: 50%; left: 50%; text-align: center; font-size: 1.5em; background-color: #faf8f2; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 0 15px; }
#loading .bar { position: relative; width: 100vw; height: 1px; background-color: #CCCCCC; }
#loading .bar .percent { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #000000; }

section { position: relative; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 20px; }
section h1 { width: 100%; font-size: 3.5em; font-weight: 500; margin-bottom: 0.5em; color: #666666; }
section h1 img { width: 280px; }
section h1 img:last-child { -moz-transform: scaleY(-1); -ms-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); }

#masthead { font-size: 2em; text-align: center; margin: 0; color: #000000; background-color: transparent; padding: 0; overflow: hidden; }
#masthead .container { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: relative; -moz-perspective: 600px; -webkit-perspective: 600px; perspective: 600px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; height: 100vh; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 20px; -moz-transition: filter 0.3s ease-out, background-size 0.3s ease-out, -moz-transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: filter 0.3s ease-out, background-size 0.3s ease-out, -o-transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition: filter 0.3s ease-out, background-size 0.3s ease-out, -webkit-transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: filter 0.3s ease-out, background-size 0.3s ease-out, transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
#masthead .logo { display: block; width: 100%; }
#masthead .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../images/masthead-bg.png); background-size: auto 100%; background-position: center center; }
@media screen and (max-width: 414px) { #masthead .bg { background-image: url(../images/masthead-bg-mobile.png); } }
#masthead.zoomIn .container { -moz-transform: scale(7); -ms-transform: scale(7); -webkit-transform: scale(7); transform: scale(7); }
#masthead.openDoor .door-left { -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
#masthead.openDoor .door-right { -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }
#masthead .door-left { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../images/masthead-doorleft.png); background-size: auto 100%; background-position: center center; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -moz-transition: -moz-transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: -o-transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
@media screen and (max-width: 414px) { #masthead .door-left { background-image: url(../images/masthead-doorleft-mobile.png); } }
#masthead .door-right { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../images/masthead-doorright.png); background-size: auto 100%; background-position: center center; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -moz-transition: -moz-transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: -o-transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
@media screen and (max-width: 414px) { #masthead .door-right { background-image: url(../images/masthead-doorright-mobile.png); } }
#masthead .content { width: 30vh; margin-bottom: 15vh; opacity: 0; z-index: 10; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: opacity 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955), -moz-transform 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: opacity 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955), -o-transform 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition: opacity 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: opacity 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); background: radial-gradient(rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%); padding: 2vh; }
#masthead .content.active { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
#masthead .content .btn { -moz-box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.7); -webkit-box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.7); box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.7); }
@media screen and (max-width: 768px) { #masthead .content { width: 28vh; }
  #masthead .content .btn { font-size: 0.8em; } }

#infomation { text-align: center; height: auto; padding-left: 0; padding-right: 0; height: auto; }
#infomation h1 { margin-bottom: -1.5em; }
#infomation .flower-top, #infomation .flower-bottom { opacity: 0.6; }
#infomation .wrapper { position: relative; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ViZTVjZSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-radial-gradient(#ffffff, #ebe5ce); background: -webkit-radial-gradient(#ffffff, #ebe5ce); background: radial-gradient(#ffffff, #ebe5ce); -moz-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.3); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 60px 20px; }
#infomation .wrapper > div { display: -webkit-flex; display: flex; width: 100%; max-width: 1200px; text-align: left; margin: 0 auto; }
@media screen and (max-width: 768px) { #infomation .wrapper > div { -webkit-flex-wrap: wrap; flex-wrap: wrap; } }
#infomation .wrapper .qa { flex: 1.2; }
@media screen and (max-width: 768px) { #infomation .wrapper .qa { width: 100%; flex: 0 0 auto; -webkit-order: -1; order: -1; } }
#infomation .wrapper .map { flex: 1; margin-right: 30px; }
@media screen and (max-width: 768px) { #infomation .wrapper .map { width: 100%; height: 300px; margin-right: 0; margin-top: 30px; flex: 0 0 auto; } }
#infomation .wrapper .title { font-size: 1em; margin: 1.5em 0 0.5em 0; display: inline-block; }
@media screen and (max-width: 768px) { #infomation .wrapper .title { font-size: 0.9em; } }
#infomation .wrapper .title:first-child { margin-top: 0; }
#infomation .wrapper p { font-size: 1.8em; line-height: 1.2em; }
@media screen and (max-width: 768px) { #infomation .wrapper p { font-size: 1.3em; } }

#comment { text-align: center; height: auto; padding-bottom: 200px; margin-top: -50px; overflow: hidden; }
#comment .bg { position: absolute; top: 200px; left: 0; width: 100%; height: calc(100% - 200px); opacity: 0.6; z-index: -1; -moz-transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; visibility: hidden; -moz-transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), -moz-transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), -o-transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#comment .bg.active { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 0.6; visibility: visible; }
#comment .bg [class|="bgLayer"] { position: absolute; top: -100px; left: -100px; right: -100px; bottom: -100px; background-position: 0 -160px; }
#comment .bg [class|="bgLayer"][class$="1"] { background-image: url("../images/comment-bglayer-1.png"); }
#comment .bg [class|="bgLayer"][class$="2"] { background-image: url("../images/comment-bglayer-2.png"); }
#comment .bg [class|="bgLayer"][class$="3"] { background-image: url("../images/comment-bglayer-3.png"); }
#comment .bg [class|="bgLayer"][class$="4"] { background-image: url("../images/comment-bglayer-4.png"); }
#comment .bg [class|="bgLayer"][class$="5"] { background-image: url("../images/comment-bglayer-5.png"); }
#comment .fb-comments-container { position: relative; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ViZTVjZSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-radial-gradient(#ffffff, #ebe5ce); background: -webkit-radial-gradient(#ffffff, #ebe5ce); background: radial-gradient(#ffffff, #ebe5ce); -moz-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.3); padding: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; max-width: 600px; margin: 0 auto; }

#invite { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; -moz-transition: -moz-transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: -o-transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition: -webkit-transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: transform 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); z-index: -10; }
#invite.active { z-index: 10; }
#invite.show { opacity: 1; }
#invite::after { content: ""; display: block; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWJlNWNlIiBzdG9wLW9wYWNpdHk9IjAuOCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-radial-gradient(rgba(255, 255, 255, 0) 60%, rgba(235, 229, 206, 0.8)); background: -webkit-radial-gradient(rgba(255, 255, 255, 0) 60%, rgba(235, 229, 206, 0.8)); background: radial-gradient(rgba(255, 255, 255, 0) 60%, rgba(235, 229, 206, 0.8)); }
#invite .bg { position: fixed; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
@media screen and (max-height: 392px) { #invite { -webkit-align-items: flex-start; align-items: flex-start; overflow: auto; } }
#invite form { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; position: relative; width: 100%; max-width: 600px; padding: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZTVjZSIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYmU1Y2UiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -moz-radial-gradient(rgba(235, 229, 206, 0.5), #ebe5ce); background: -webkit-radial-gradient(rgba(235, 229, 206, 0.5), #ebe5ce); background: radial-gradient(rgba(235, 229, 206, 0.5), #ebe5ce); -moz-transition: opacity 0.25s ease-out, visibility 0.25s ease-out, -moz-transform 0.75s ease-out; -o-transition: opacity 0.25s ease-out, visibility 0.25s ease-out, -o-transform 0.75s ease-out; -webkit-transition: opacity 0.25s ease-out, visibility 0.25s ease-out, -webkit-transform 0.75s ease-out; transition: opacity 0.25s ease-out, visibility 0.25s ease-out, transform 0.75s ease-out; -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); z-index: 10; opacity: 0; visibility: hidden; -moz-transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); }
#invite form.active { opacity: 1; visibility: visible; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
#invite form .btn::before { content: "完成送出"; display: block; }
#invite form .btn.ajaxing::before { content: "資料送出中"; display: block; }
@media screen and (max-width: 414px) { #invite form { padding: 10px; } }
#invite form .back { margin-left: auto; font-size: 0.8em; cursor: pointer; }
#invite form .title { position: relative; width: 100%; font-size: 2em; text-align: center; font-weight: 300; }
@media screen and (max-width: 414px) { #invite form .title { font-size: 1.2em; margin: 0.5em 0 1em 0; } }
#invite form [class|='borderTop'] { position: absolute; top: 6px; }
#invite form [class|='borderTop'][class$='1'] { left: 6px; }
#invite form [class|='borderTop'][class$='2'] { right: 6px; -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
#invite form [class|='borderBottom'] { position: absolute; bottom: 10px; }
#invite form [class|='borderBottom'][class$='1'] { left: 12px; }
#invite form [class|='borderBottom'][class$='2'] { right: 12px; -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
#invite .input-container { width: 100%; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 15px 5px; border-bottom: 1px solid #666666; }
#invite .input-container.entered label { top: -1em; left: 0; font-size: 12px; }
#invite .input-container:nth-child(3) { width: calc(40% - 10px); }
#invite .input-container:nth-child(4) { width: calc(60% - 10px); }
#invite .input-container:nth-child(5) { width: calc(33.3333% - 10px); }
@media screen and (max-width: 414px) { #invite .input-container:nth-child(5) { width: calc(50% - 10px); } }
#invite .input-container:nth-child(6) { width: calc(33.3333% - 10px); }
@media screen and (max-width: 414px) { #invite .input-container:nth-child(6) { width: calc(50% - 10px); } }
#invite .input-container:nth-child(7) { width: calc(33.3333% - 10px); }
@media screen and (max-width: 414px) { #invite .input-container:nth-child(7) { width: calc(100% - 10px); } }
#invite .input-container:nth-child(8) { width: calc(100% - 10px); -moz-transition: width 0.2s ease-out; -o-transition: width 0.2s ease-out; -webkit-transition: width 0.2s ease-out; transition: width 0.2s ease-out; }
#invite .input-container:nth-child(8).selected { width: calc(50% - 10px); }
#invite .input-container:nth-child(9) { display: none; width: calc(50% - 10px); }
#invite .input-container:nth-child(9).active { display: block; }
#invite .input-container:nth-child(10) { display: none; width: calc(50% - 10px); }
#invite .input-container:nth-child(10).active { display: block; }
#invite .input-container input, #invite .input-container select { outline: none; border: none; background: none; width: 100%; font-size: 1em; padding: 10px 0px 3px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#invite .input-container select { padding: 10px 0 5px 0; }
#invite .input-container label { position: absolute; top: calc(50% - 0.5em); left: 0px; pointer-events: none; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -moz-transition: top 0.2s linear, left 0.2s linear, font-size 0.2s linear; -o-transition: top 0.2s linear, left 0.2s linear, font-size 0.2s linear; -webkit-transition: top 0.2s linear, left 0.2s linear, font-size 0.2s linear; transition: top 0.2s linear, left 0.2s linear, font-size 0.2s linear; }

.btn { display: block; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 10px; margin-top: 15px; border: 1px solid #333333; text-align: center; cursor: pointer; line-height: 1.2em; background-color: #333333; color: #FFFFFF; letter-spacing: 0.1em; -moz-transition: background-color 0.2s ease-out, color 0.2s ease-out; -o-transition: background-color 0.2s ease-out, color 0.2s ease-out; -webkit-transition: background-color 0.2s ease-out, color 0.2s ease-out; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.btn:hover { background-color: #111111; }
.btn span { display: inline-block; }