@charset "UTF-8";
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
.products-header, .products-list {
  zoom: 1; }
  .products-header:before, .products-list:before, .products-header:after, .products-list:after {
    content: "";
    display: table; }
  .products-header:after, .products-list:after {
    clear: both; }

.pull-right {
  float: right; }

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

*:focus {
  outline: none; }

/* ==|====================
layout/_container
======================= */
.row {
  position: relative;
  width: 1024px;
  margin: 0 auto; }

/* ==|====================
layout/_footer
======================= */
.footer {
  padding-bottom: 75px; }

/* ==|====================
layout/_header
======================= */
.header {
  height: 253px;
  background: transparent url('../img/header-bg-rex.png?1429078266') 0 top repeat; }
  .header .row {
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    perspective: 1000; }
  .header .coin, .header .dialogue, .header .title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; }
  .header .coin {
    top: 118px;
    left: 435px; }
  .header .dialogue {
    top: 70px;
    left: 580px; }
  .header .title {
    top: 142px;
    left: 60px; }

html {
  width: 100%;
  height: 100%; }

body {
  position: relative;
  width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: none;
  font-size: 16px;
  font-family: "微軟正黑體", "Microsoft Jhenghei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: url('../img/html-bg-repeat.png?1429078349') repeat; }

.button--blue, .button--orange, .button--red, .rules .open-rules-btn.active {
  display: inline-block;
  background-color: #ccc;
  padding: 18px 20px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  min-width: 224px;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s; }
  .button--blue .arrow-sprite, .button--orange .arrow-sprite, .button--red .arrow-sprite, .rules .open-rules-btn.active .arrow-sprite, .button--blue .arrow-down, .button--orange .arrow-down, .button--red .arrow-down, .rules .open-rules-btn.active .arrow-down, .button--blue .arrow-right, .button--orange .arrow-right, .button--red .arrow-right, .rules .open-rules-btn.active .arrow-right, .button--blue .arrow-up, .button--orange .arrow-up, .button--red .arrow-up, .rules .open-rules-btn.active .arrow-up {
    float: right;
    margin: 2px -10px 0 0; }

.button--blue {
  background-color: #3586B9; }
  .button--blue:hover {
    background-color: #307ba9; }
.button--orange {
  background-color: #FC8824; }
  .button--orange:hover {
    background-color: #fc7d10; }
.button--red, .rules .open-rules-btn.active {
  background-color: #FB1B1D; }
  .button--red:hover, .rules .open-rules-btn.active:hover {
    background-color: #fb0709; }

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden; }

#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  max-width: none; }

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%; }

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left; }

#cboxContent {
  position: relative; }

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

#cboxTitle {
  margin: 0; }

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer; }

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic; }

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px; }

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; }

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
  background: #000; }

#colorbox {
  outline: 0; }

#cboxTopCenter {
  height: 28px; }

#cboxContent {
  background: transparent;
  overflow: hidden; }

.cboxIframe {
  background: transparent; }

#cboxError {
  padding: 50px;
  border: 1px solid #ccc; }

#cboxTitle {
  position: absolute;
  bottom: 4px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #949494; }

#cboxCurrent {
  position: absolute;
  bottom: 4px;
  left: 58px;
  color: #949494; }

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0; }

#cboxSlideshow {
  position: absolute;
  bottom: 4px;
  right: 30px;
  color: #0092ef; }

#cboxPrevious {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  text-indent: -9999px; }
  #cboxPrevious:hover {
    background-position: -75px -25px; }

#cboxNext {
  position: absolute;
  bottom: 0;
  left: 27px;
  width: 25px;
  height: 25px;
  text-indent: -9999px; }
  #cboxNext:hover {
    background-position: -50px -25px; }

#cboxClose {
  position: absolute;
  top: 10px;
  right: 10px;
  background: red no-repeat 0px 0px;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  z-index: 1000; }

.article #cboxClose {
  top: 56px; }

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); }

.arrow-sprite, .arrow-down, .arrow-right, .arrow-up {
  background-image: url('../img/arrow-sb15e068e68.png');
  background-repeat: no-repeat; }

.arrow-down {
  background-position: 0 0;
  height: 11px;
  width: 11px; }

.arrow-right {
  background-position: 0 -11px;
  height: 11px;
  width: 11px; }

.arrow-up {
  background-position: 0 -22px;
  height: 11px;
  width: 11px; }

.arrow-sprite, .arrow-down, .arrow-right, .arrow-up {
  display: inline-block; }

.icon-blue {
  display: inline-block;
  width: 33px;
  height: 32px;
  background: url('../img/list-icon.png?1429080675') no-repeat 0 -3px;
  vertical-align: middle; }

/* ==|====================
   modules/iconbtn
   ======================= */
/* ------ HTML -------

<a href="#" class="iconbtn">
  <i class="fa fa-paper-plane iconbtn__icon"></i>
  Send
</a>

   ------------------- */
.iconbtn {
  padding: 10px 20px;
  color: #f5f5f5;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  background-color: #959595;
  border-radius: 3px;
  display: inline-block; }
  .iconbtn .iconbtn__icon {
    padding-right: 5px;
    vertical-align: text-top;
    display: inline-block; }

.mCustomScrollbar {
  -ms-touch-action: none;
  touch-action: none; }

.mCustomScrollbar.mCS_no_scrollbar {
  -ms-touch-action: auto;
  touch-action: auto; }

.mCustomScrollBox {
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: 0;
  direction: ltr; }

.mCSB_container {
  overflow: hidden;
  width: auto;
  height: auto; }

.mCSB_inside > .mCSB_container {
  margin-right: 20px; }

.tabber-container .mCSB_inside > .mCSB_container {
  margin-right: 40px; }

.share-article .mCSB_inside > .mCSB_container {
  margin-right: 25px; }

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0; }

.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-left: 30px; }

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-left: 0; }

.mCSB_scrollTools {
  position: absolute;
  width: 12px;
  height: auto;
  left: auto;
  top: 0;
  right: 0px;
  bottom: 0; }

.mCSB_outside + .mCSB_scrollTools {
  right: -26px; }

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  right: auto;
  left: 0; }

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  left: -26px; }

.mCSB_scrollTools .mCSB_draggerContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto; }

.mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 20px 0; }

.mCSB_scrollTools .mCSB_draggerRail {
  width: 12px;
  height: 100%;
  margin: 0 auto;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px; }

.mCSB_scrollTools .mCSB_dragger {
  cursor: pointer;
  width: 100%;
  height: 30px;
  z-index: 1; }

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  position: relative;
  width: 8px;
  height: 100%;
  margin: 0 auto;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px; }

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 12px; }

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 8px; }

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp {
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer; }

.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0; }

.mCSB_horizontal.mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-bottom: 30px; }

.mCSB_horizontal.mCSB_outside > .mCSB_container {
  min-height: 100%; }

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  width: auto;
  height: 16px;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0; }

.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: -26px; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  margin: 0 20px; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 2px;
  margin: 7px 0; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 30px;
  height: 100%;
  left: 0; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 4px;
  margin: 6px auto; }

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 12px;
  margin: 2px auto; }

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 8px;
  margin: 4px 0; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 0; }

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 0; }

.mCSB_container_wrapper {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: 30px;
  margin-bottom: 30px; }

.mCSB_container_wrapper > .mCSB_container {
  padding-right: 30px;
  padding-bottom: 30px; }

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 20px; }

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 20px; }

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0; }

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 0; }

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 20px; }

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 0; }

.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper {
  margin-right: 0;
  margin-left: 30px; }

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container {
  padding-right: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container {
  padding-bottom: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
  margin-left: 0; }

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0; }

.mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -moz-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; }

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {
  -moz-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -o-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -webkit-transition: width 0.2s ease-out, height 0.2s ease-out, margin-left 0.2s ease-out, margin-right 0.2s ease-out, margin-top 0.2s ease-out, margin-bottom 0.2s ease-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -webkit-transition-delay: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0s, 0s;
  transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; }

.mCSB_scrollTools {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75; }

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }

.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #0000ff; }

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: red; }

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #ff0000; }

.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #ff0000; }

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }

.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 0; }

.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -20px; }

.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -40px; }

.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -56px; }

.mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover, .mCSB_scrollTools .mCSB_buttonUp:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75; }

.mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active, .mCSB_scrollTools .mCSB_buttonUp:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.9; }

.spinner-wrapper {
  height: 40px; }

.spinner {
  margin: 0px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
  z-index: 10;
  display: none; }
  .spinner.active {
    display: block; }

.spinner > div {
  background-color: #d7d7d7;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out; }

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s; }

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s; }

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s; }

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s; }

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1); } }
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4); }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1); } }
/* ==|====================
   pages/index
   ======================= */
.steps {
  position: relative;
  padding-bottom: 7px;
  background-color: #000;
  -moz-box-shadow: #333 0px 0px 12px;
  -webkit-box-shadow: #333 0px 0px 12px;
  box-shadow: #333 0px 0px 12px;
  z-index: 1; }
  .steps__container {
    text-align: center; }

.rules {
  background-color: #EDEBDE; }
  .rules .rules-text {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 112px;
    overflow: hidden;
    background: url('../img/rules.png?1429078385') 0 8px no-repeat;
    -moz-transition: height 0.3s;
    -o-transition: height 0.3s;
    -webkit-transition: height 0.3s;
    transition: height 0.3s; }
    .rules .rules-text.open {
      height: 510px; }
  .rules .open-rules-btn {
    position: absolute;
    top: 30px;
    left: 470px; }
    .rules .open-rules-btn .arrow-up {
      display: none; }
    .rules .open-rules-btn.active .arrow-down {
      display: none; }
    .rules .open-rules-btn.active .arrow-up {
      display: inline-block; }
  .rules .about-mib-btn {
    position: absolute;
    top: 30px;
    left: 748px; }
  .rules .outlink-service-rule, .rules .outlink-qa {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block; }
  .rules .outlink-service-rule {
    width: 170px;
    height: 40px;
    top: 380px;
    left: 444px; }
  .rules .outlink-qa {
    width: 72px;
    height: 40px;
    top: 380px;
    left: 625px; }

.products-header {
  padding: 14px 0 0 0;
  font-size: 28px;
  letter-spacing: 1px;
  line-height: 30px; }
  .products-header .icon-blue {
    margin-right: 6px; }
  .products-header .money {
    padding: 0 10px 0 0px;
    color: #E10715;
    font-size: 26px; }
  .products-header .sort {
    float: right;
    font-size: 14px;
    padding-top: 4px;
    margin-right: 8px; }
    .products-header .sort__label {
      display: inline-block;
      font-weight: bold;
      margin-right: 9px; }
    .products-header .sort .ascending-btn, .products-header .sort .descending-btn {
      padding: 4px 14px;
      margin-right: 3px;
      background-color: #CCCCCC;
      text-decoration: none;
      color: #7A7A7A;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: #000 1px 1px 2px inset;
      -webkit-box-shadow: #000 1px 1px 2px inset;
      box-shadow: #000 1px 1px 2px inset;
      -moz-transition: color 0.3s, background-color 0.3s;
      -o-transition: color 0.3s, background-color 0.3s;
      -webkit-transition: color 0.3s, background-color 0.3s;
      transition: color 0.3s, background-color 0.3s; }
      .products-header .sort .ascending-btn.active, .products-header .sort .descending-btn.active {
        background-color: #FECB2E;
        color: #fff;
        text-shadow: #222 1px 1px 1px; }

.products-list {
  margin-top: 22px; }

.products-item {
  float: left;
  width: 230px;
  margin: 10px 13px; }
  .products-item__img-wrapper {
    position: relative;
    width: 230px;
    height: 230px;
    overflow: hidden;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-transform: translate3d(0px, 0px, 0);
    -ms-transform: translate3d(0px, 0px, 0);
    -webkit-transform: translate3d(0px, 0px, 0);
    transform: translate3d(0px, 0px, 0); }
  .products-item__img-border {
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    position: absolute;
    border: solid 1px #D7D7D7;
    z-index: 1; }
  .products-item__img-clip {
    position: relative;
    width: 230px;
    height: 230px;
    overflow: hidden;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -moz-transition: -moz-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear; }
    .products-item__link:hover .products-item__img-clip {
      -moz-transform: scale(1.08, 1.08);
      -ms-transform: scale(1.08, 1.08);
      -webkit-transform: scale(1.08, 1.08);
      transform: scale(1.08, 1.08); }
  .products-item__img {
    max-width: 230px; }
  .products-item__link {
    text-decoration: none; }
  .products-item__desc {
    margin: 8px 9px;
    font-size: 14px;
    height: 36px;
    color: #4E4F51;
    letter-spacing: 0.9px;
    line-height: 18px; }
  .products-item__red {
    margin: 4px 9px;
    color: #DF0F21;
    font-size: 14px;
    letter-spacing: 0.8px; }

.go2top_block {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0; }

.go2top {
  display: block;
  width: 55px;
  height: 55px;
  background: transparent url('../img/gotop.png?1429080797') left top no-repeat;
  cursor: pointer;
  margin: 0 auto;
  margin-bottom: 20px; }