/* Box colors */
.bg-1 { margin-top: 20px; color: #37474f; }
.bg-2 { background: #7986cb; color: #ECEFF1; }
.bg-3 { background: #37474f; color: #fff; }
/* Common button styles */
.button { min-width: 150px; max-width: 250px; display: block; padding: 1em 2em; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; }
.button:focus { outline: none; }
.button > span { vertical-align: middle; }
/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */
.bg-1 .button { color: #ba9b48; border-color: #ba9b48; }
.bg-2 .button { color: #ECEFF1; border-color: #ECEFF1; }
.bg-3 .button { color: #fff; border-color: #fff; }
/* Sizes */
.button--size-s { font-size: 14px; }
.button--size-m { font-size: 16px; }
.button--size-l { font-size: 18px; }
/* Wapasha */
.button.button--wapasha { background: #006eaa; color: #fff; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; }
.button--wapasha.button--inverted { background: #fff; color: #37474f; }
.button--wapasha::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #3f51b5; z-index: -1; border-radius: inherit; opacity: 0; -webkit-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); }
.button--wapasha.button--inverted::before { border-color: #7986cb; }
.button--wapasha:hover { background-color: #fff; color: #3f51b5; }
.button--wapasha.button--inverted:hover { background-color: #37474f; color: #7986cb; }
.button--wapasha:hover::before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; }
/* Individual button styles */



/* Saqui */
.button.button--saqui { overflow: hidden; color: #fff; background: #37474f; -webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in; transition: background-color 0.3s ease-in, color 0.3s ease-in; }
.button--saqui.button--inverted { background: #fff; color: #37474f; }
.button--saqui::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1em 2em; color: #37474f; -webkit-transform-origin: -25% 50%; transform-origin: -25% 50%; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); -webkit-transition: -webkit-transform 0.3s ease-in; transition: transform 0.3s ease-in; }
.button--saqui.button--inverted::after { color: #fff; }
.button--saqui:hover::after, .button--saqui:hover { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.button--saqui:hover { background-color: #0068b7; color: #7986cb; }
.button--saqui.button--inverted:hover { background-color: #0068b7; color: #3f51b5; }
.button--saqui:hover::after { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
/* Ujarak */
.button--ujarak { -webkit-transition: border-color 0.4s, color 0.4s; transition: border-color 0.4s, color 0.4s; }
.button--ujarak::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #37474f; z-index: -1; opacity: 0; -webkit-transform: scale3d(0.7, 1, 1); transform: scale3d(0.7, 1, 1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
.button--ujarak.button--round-s::before { border-radius: 2px; }
.button--ujarak.button--inverted::before { background: #7986CB; }
.button--ujarak, .button--ujarak::before { -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
.button--ujarak:hover { color: #fff; border-color: #37474f; }
.button--ujarak.button--inverted:hover { color: #37474F; border-color: #fff; }
.button--ujarak:hover::before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }